El miedo del usuario y el botón atrás.

Cuando un usuario navega por la Web, es muy posible que sus intenciones sean buscar información, de cualquier tipo, y si llega a nuestra web pueden ocurrir dos cosas:

  • Que haya sido por error: Mejor dejémosle ir, probablemente se sienta incluso estafado al pulsar alguno de nuestros anuncios que no le llevarán a nada.
  • Que tengamos el contenido que está buscando, parecido, o simplemente algo que le pueda interesar: Puede que tengamos un artículo relacionado que es de su interés, produtos similares o enlaces a otros sitios donde se encuentra la información que busca.

Sin embargo cuando un usuario busca en google, se encuentra de repente una ristra enorme de resultados, tiene que elegir muy bien dónde va a hacer clic y dónde no.

Nivel 1: Título de la página:

Este elemento será clave para que el usuario pulse sobre el enlace. Debe tener algo de relación con su búsqueda y no solamente una keyword. Estar en el mismo idioma, ser de un dominio nacional (.es), y que la ruta tenga alguna descripción más.
Nivel 2: Descripción del site en google:

Si hemos pasado con éxito el miedo al título, el usuario hará un rápido escaneo en la descripción del resultado. Si lo que lee ahi le resulta adecuado habremos pasado a la siguiente fase.

Nivel 3: Entrada y aterrizaje:

Hurra! El usuario ha hecho clic! Algunos pensarían que ya está todo hecho, pero no es así. Lo primero de todo es no cansarle con el tiempo. Si pasa más de un segundo desde que ha hecho clic hasta que empieza a aparecer algo… se impacientará. Si pasa un segundo más estará a punto de irse, y en el tercer segundo probablemente ya no quede nadie. Es lo mismo que ir a un bar, pero hablando en términos de segundos en lugar de minutos! (según bares, claro!). Igual que el miedo llevaba a la ira en Star Wars, aquí el miedo y la confusión llevan al history.back() o lo que es lo mismo, al botón atrás o volver.
Nivel 4: Búsqueda de contenido:

El usuario revisará la Web buscando la información que tenía en la cabeza. Si lo encuentra todo caótico y difícil - Miedo - Botón atrás. Es importante saber el comportamiento errático que suelen tener los usuarios al “parsear” un sitio Web, este artículo de Yusef Hassan “Cómo leen los usuarios”, es bastante instructivo al respecto.

Nivel 5: (Final boss): Acceso al contenido encontrado:

Vale, tenemos lo que buscaba, y de alguna forma él lo ha encontrado. Ahora tenemos que dejarle navegar y que se pierda controladamente por nuestro sitio. Si se empieza a encontrar cosas raras, como menús que van a sitios que no deben, anuncios que parecen enlaces de la Web, o saltos de una parte a otra de la Web sin sentido, se verá perdido - miedo - botón atrás.

Conclusión:

En menos de 3 segundos tenemos que ser capaces de poner en las narices del usuario el contenido que estaba buscando. Hay mucha competencia ahi fuera, y lo habitual en el usuario es pensar que ha entrado en el enlace equivocado y volver a la búsqueda para probar otra cosa.

Nuevo segmento en emagister

El tiempo que llevaba sin escribir, se ha debido fundamentalmente a que he estado ocupando el 150% de mi tiempo a lanzar (de una vez) el segmento de formación subvencionada en emagister.

Ahora será más fácil buscar cursos gratuitos tanto para desempleados como para trabajadores, y avalados por el ministerio.

Básicamente, la fundación tripartita gestiona unos fondos y los reparte en función de determinados sectores laborales, que pasan de sindicatos y patronales, a centros de formación. De forma que al trabajador le sale totalmente gratis el curso. Y hay cursos muy interesantes!

Aunque ahora mismo no hay muchos cursos, ya que estamos en temporada baja formativa y todavía hay que trabajar más en ello, os invito a que paséis por la Web y veáis lo que podéis estudiar.

http://www.emagister.com/subvencionados/

¿Cómo funciona internet?

En la primera asignatura de la carreara en la que vi algo de redes, la profesora nos puso un video muy curioso. Yo ya conocía algo de redes por entonces, así que me pareció bastante gracioso, y sobre todo, didáctico en cuanto a la forma de explicarlo.

Warriors of the net .

1ª parte

2ª parte

Mis extensiones firefox

A raiz del último post de maestros del web, que habla de las 10 extensiones de firefox más populares, y debido a mi falta de tiempo para pensar post con mejor contenido, voy a hacer una lista con las extensiones que yo uso, por si a alguien le resultan de utilidad:

  • Better Gmail
    Particularización de greasemonkey especializada en añadir funcionalidades a gmail. Filtros, búsquedas, barras laterales e integración con reader.
  • del.icio.us bookmarks:
    Mantén tus enlaces de delicious actualizados y en cualquier parte. Esta extensión suplanta el menú de marcadores y siempre que agreguemos algo, irá directo a nuestra cuenta.
  • DOM Inspector
    Extensión que se puede instalar junto con firefox que nos permite ver la estructura del DOM de la página por donde estamos navegando.
  • Download Statusbar
    Para ver el proceso de las descargas, en lugar del gestor por defecto de firefox, tendremos una pequeña barra inferior mucho más usable.
  • Firebug
    Extensión por excelencia para los desarrolladores Web. Control de scripts, DOM, request y tiempos. Inspector de código y control de CSS.
  • FlashGot
    Download manager que gestiona mucho mejor las descargas y permite resumirlas sin hacer odiosas copias. Además de poder coger todos los enlaces que haya en una página.
  • Google Bloc de notas
    Ya no uso para nada el bloc de notas del sistema operativo. Esta extensión para firefox creada por google, crea un pequeño icono en la barra de estado y podremos apuntar todo lo que queramos. Lo mejor: podemos acceder desde cualquier sitio con nuestra cuenta google.
  • GTDInbox
    Getting Things Done, o Terminando las cosas de una vez por todas, es una extensión que convierte gmail en un pequeño gestor de tareas, añadiendo barras y opciones para que nos podamos organizar mejor. Un poco lioso en la configuración, pero muy útil cuando lo tienes dominado.
  • Screen grab!
    Esta pequeña extensión, aun en desarrollo y con unos cuantos fallos, nos permite hacer una captura de pantalla de toda nuestra página, haciendo scroll automático cuando es más larga que nuestra pantalla. Así, si queremos sacar una Web completa en imágen no tendremos que ir dando a imprimir pantalla y luego unirlo todo en Photoshop, mucho más rápido.
  • Seoquake
    Extensión por excelencia para SEO. Nos da datos rápidos de cualquier Web en estos términos. Google index y PR, yahoo, alexa, etc…
  • Web Developer
    Otra de las imprescindibles para desarrolladores Web. Con esta extensión podremos hacer todas las pruebas que queramos de una Web, así como desactivar opciones, etc… Ya hablé de la Web Developer Toolbar tiempo atrás.

Y con todo esto y cinco pestañas abiertas, consume la no desdeñable cantidad de 140Mb de memoria RAM…

Mapa de la Web 2.0

No suelo mencionar demasiado a los microsiervos aquí, ya que asumo que los lee la mayoría de la gente, pero en este caso haré una excepción, para los pocos usuarios que no los lean y para poder tenerlo guardado como referencia para mi para siempre ;).

mapa_web20

Se trata del un trabajo que han hecho en internality, que resume de forma muy completa la Web 2.0. Me parece muy útil por dos razones:

- Tener de forma resumida algunas de las mejores aplicaciones “2.0″ que hay ahí fuera.

- Tener un big picture que te recuerede algunos de los factores importantes si estás desarrollando algun start-up.

Generador de metadatos Dublin Core

Todavía no había escrito nada de microformatos ni metadatos por aquí, y esta reseña en Webposible me ha brindado la oportunidad.

Básicamente Dublin Core es una serie de especificaciónes de código que pretenden dar contenido semántico a la Web. Es bastante extensible, modular y flexible, por lo que puede ser una cosa muy interesante.

Algunas de las relaciones que ofrece son el título, autor, relación, colaboradores, derechos o fechas. Pero resultaba bastante pesado ir metiendo estos metadatos en cada proyecto. Pero por suerte la gente de Webposible ha desarrollado un generador de metadatos Dublin Core, que nos ayudará en esta tarea.

La idea de ir haciendo la Web más semántica cada día es emocionante!

Indexación en Ajax

Para alguien que me lo pregunto hace poco, una aclaración rápida sobre los términos indexación y Ajax.

Ajax es una solución excelente para añadir dinamismo y usabilidad en nuestras aplicaciones Web, pero tiene un gran problema: La indexación.

Si queremos conseguir muchas páginas vistas, lo primero que tenemos que hacer es tener un buen número de páginas indexadas por los buscadores (aka google). Y para que ésto suceda tenemos que poder asociar una URL a un contenido diferente.

Por ejemplo, si en un blog tuvieramos una única dirección index.php, que mediante Ajax, manipulando el DOM de la página va cambiando el contenido (cosa que he visto), google solamente se va a enterar de que tenermos una portada con unos contenidos estáticos y poco más. Sin embargo, si asociamos una URL (aunque sean parámetros con GET) a un contenido, tendremos una página distinta.

index.php?item=331 será distinta página que index.php?item=41

Esto es lo habitual en CMSs, o aplicaciones en general. Sin embargo con ajax, tendríamos un index.php, y todas las peticiones irían con el XMLHttpRequest
De esta forma, si desarrollamos una aplicación en Ajax que requiera de indexación, siempre tendremos que ofrecer el mismo contenido mediante el formato habitual de la petición GET con parámetros.

Otro factor a tener en cuenta es que los parámetros no son muy buenos amigos de los buscadores, entonces tenemos que encontrar una forma de cambiar la ristra de parámetros por una dirección estática y acabada en .htm ¿Cómo conseguimos esto?

Opción 1:

Indexación con mod_rewrite

: Mod rewrite es un modulo del servidor web apache, que permite tener una dirección “pseudoestática” que se convierte en una dirección con parámetros.
id est: miweb.com/ajax-y-la-indexacion-123.htm será convertida en miweb.com/index.php?post=123
Un pequeño manual para trabajar con mod rewrite.
Opción 2:

Indexación con páginas de error Error404.

El mod rewrite está bastante bien, y soporta incluso expresiones regulares, pero en ciertas ocasiones se puede quedar un poco corto, sobre todo si trabajamos con algún servidor donde no tenemos acceso a todas las funcionalidades. ¿Qué podemos hacer entonces?

El error404 es la página que devuelve un servidor cuando no encuentra el documento solicitado, y esta página puede ser personalizable. Es decir, que podríamos crear una página e404.php que gestiona los parámetros y redirige a donde toca.

id est: Solicitamos miweb.com/ajax-y-la-indexacion-123.htm. Esa página no existe, ergo el servidor devuelve un error 404. Busca en su configuración dónde está la página de error a mostrar, y la abre. Abre en el servidor una página php (e404.php) que interpreta. Entonces aquí, podemos desde hacer consultas a la BD, hasta “parsear” la URL que no existe, y sacar el número (123 en este caso) y convertirlo si hacer las búsquedas pertinentes con esos parámetros.

Esta segunda opción es algo más complicada, pero admite una lógica más extensa y un mayor control si nuestra aplicación es grande.

Nota: Se que este post es bastante básico y hay mucha información de esto por ahí, pero normalmente prefiero escribir un post aquí, que enviar un mail explicandolo.

Los problemas de las antenas de telefonía móvil

El último post de alt1040 en el que hablan de la prohibición de poner una antena de telefonía móvil en Móstoles por peligro de cáncer, me ha recordado ciertos problemas que tuvimos en Valladolid hace unos años.

Antecedentes aqui y aqui.

El hecho fue que se detectaron repetidos casos de cáncer en chicos que estudiaron en el mismo colegio (García Quintana) de Valladolid. A raiz de aquello, se empezaron a hacer denuncias y movilizaciones. Esos padres preocupados por la salud y la educación de sus hijos (pero que luego pasan de ellos la mayor parte del tiempo), exigían justicia, y no ivan iban a permitir que las malditas operadoras de telefonía móvil (por entonces movistar, amena y vodafone - airtel.
Me parece trágido trágico que unos niños mueran por causa del cáncer, y resulta hasta comprensible que se busquen explicaciones hasta debajo de las piedras, pero también es cierto que tendemos a culpar aquello que no conocemos.

No quiero dar aquí una lección de física, radiofrecuencias y termodinámicas (En este blog seguimos las leyes de la termodinámica!), pero me parece curioso que se quejen tanto de las antenas los mismos que luego se quejan porque no tienen cobertura. Amén de no saber que decir ante otras afirmaciones como ondas de radio que circulan, redes inalámbricas, microondas. Un ejemplo:

espectro_ondas

Es decir, son más peligrosos los microondas (sobre todo algunos microondas baratos con escasa protección), o las maravillosas cabinas de bronceado que permiten que más de un detractor de las antenas luzca en invierno un color estilo Michael Jackson.

Para más información al respecto, prefiero remitiros al artículo de John Moulder: Antenas base de telefonía móvil y salud, un tipo que al ser profesor de oncología radioterápica, algo sabrá del tema.

Disfruten de sus móviles!

Diseñar para la experiencia de sensaciones

Logic+Emotion es un blog de marketing que suele acompañar sus artículos con imágenes explicativas bastante buenas.

Hace tiempo (cuando aun no estaba online este pequeño weblog) llegué a un artículo que nos mostraba la trinidad del diseño digital basado en la experiencia. Investigando, ví que había un precedente (y que esta era su mejora), y hace unos días he visto su evolución. Me ha parecido muy interesante ver los tres artículos en su conjunto, y entender la evolución natural. ¿Cuál será el siguiente paso?
Estas son las imágenes:

dd3

Diseño de producto, marketing e ingeniería normalmente se pegan entre si. La clave está en el centro de sus conjuntos.

dd2

Esta evolución habla de diseñar para la gente, estimular los sentidos, y contar buenas historias. Es decir, hablamos de usabilidad, de diseño para el usuario y de la excelencia del contenido.

dd1

Y la evolución es, incluir, además de lo anterior la “sostenibilidad” o lo que he preferido traducir como escalabilidad.

La colección de artículos:

Experience Design 101
Holy Trinity of digital experience design
Meet Ed: Experience Diamond

Ubuntu Dapper Drake en ShipIt

Como es habitual, ya podemos pedir nuestras copias de Dapper Drake Feisty Fawn (7.04) Ubuntu con el servicio ShipIt que ofrecen.

Es cierto que es más cómodo y rápido descargarselo, pero más de una vez me ha sacado de un apuro tener un ubuntu por ahi a mano. En esta ocasión te envían como máximo 3 CDs salvo que hagas un pedido especial (para ponencias o similares), y echo de menos (igual me equivoco cuando reciba los mios), que te envíen kubuntu (mi preferida, por ahora al menos).

Actualización: Se pueden pedir kubuntus aqui. Gracias Hev!