Principios de usabilidad: La regla de los 3 clicks
- Tema: Usabilidad
- » Se lee en 61 segs
La regla de los 3 clicks (3 clicks rules) recomienda que no se debería llegar a ninguna información clave de un website en más de tres clicks. La correcta aplicación de este principio produce en el usuario una experiencia positiva, ese usuario probablemente volverá a nuestro site recordando que una vez pudo cumplir su objetivo satisfactoriamente.
Hemos hecho un pequeño experimento para probar la efectividad de este principio. La tarea es ir al website de una cadena de televisión y averiguar qué programa emitirán mañana por la noche.
Aquí los resultados.
| web del canal | rotulación | tiempo | clicks |
| tve.es | Programación | 37 segundos | 3 |
| cuatro.com | N/A | 19 segundos | 1 |
| tvc.cat | Programació | 32 segundos | 3 |
| lasexta.com | N/A | 8 segundos | 1 |
| telecinco.es | Proramación | 50 segundos | 2 |
| foxtv.es | Programación | 19 segundos | 2 |
| axn.es | Programación | 18 segundos | 2 |
Este pequeño test ha resultado interesante.
Una primera conclusión nos diría algo básico, la aplicación correcta de un principio no garantiza el éxito en la usabilidad global. Por ejemplo en telecinco la información está muy desordenada y desorienta al usuario, si bien pudimos llegar al obejtivo en 2 clicks nos tomó 50 segundos conseguir la información. Otro ejemplo puede ser el caso de cuatro y la sexta, ambos canales presentan en el homepage un pequeño recuadro con la programación y surge la pregrunta, por qué 11 segundos de diferencia entre una y otra. Resulta que cuatro, al hacer click en “mañana” desplaza el scroll del recuadro hasta el final consiguiendo con ello desorientar al usuario, conclusión: al usuario le costó 11 segundos orientarse.
Otra experiencia interesante fue TVC, al hacer click en programació te prenseta un calendario, pero para que muestre los resultados debes hacer un click adicional, como a los usuarios no nos gusta leer más de la cuenta, lo intuitivo es pensar que al hacer click en el calendario ya tendríamos la respuesta. Este es un click innecesario, de estos que yo suelo llamar “clicks informáticos”, que son necesarios porque el sistema lo requiere.
Tags:Usabilidad
Abril 27, 2007
Apuntes sobre el Breadcrumb Navigation
- Tema: Usabilidad, Diseño Web
- » Se lee en 121 segs
Hace un par de semana comentábamos aquí los nuevos aportes que hacía Nielsen sobre los breadcrumbs, ahora desarrollemos un poco los conceptos básico en esta materia.
Definiciones básicas
Breadcrumb se puede definir como un sistema de navegación auxiliar que ofrece al usuario una ruta clara de dónde está y de dónde ha venido.
Usos Frecuentes
Suele estar presente en sitios web donde la información está estructurada jerárquicamente, con 3 o más niveles de profundidad. Se puede encontrar sobre todo en tiendas, catálogos, intranets y algunas webs corporativas.
El paradigma de este elemento de navegación es Amazon.com, quizá sea quien más haya desarrollado este tema. La complejidad del Breadcumb Navigation de Amazon, ameritaría un artículo entero para poder explicar sus diferentes formas, ya que este sistema está vinculado también con el motor de búsquedas, así como su sistema de categorización.
¿Cómo usarlo?
Jakob Nielsen propone que sean de la siguiente manera:
Y que esté ubicado debajo del “header/cabecera”
En algunos casos suelen colocar antes de los links la frase Usted está Aquí/You Are Here. Como elemento para reforzar el sentido de los Breadcurmbs.
Se suele separar con el símbolo > (mayor qué). Angela Colter, Kathryn Summers, Cheri Smith de la Universidad de Baltimore, en el año 2002 publicaron un estudio titulado Exploring User Mental Models of Breadcrumbs in Web Navigation, en el cual demuestran que el separador más utilizado es el símbolo > (mayor qué), con un 47.11% de popularidad.
¿Cuándo debo usarlo?
Antes de iniciar el desarrollo de los breadcrumbs en tu website, puedes hacerte las siguientes preguntas:
¿Mi website es demasiado complejo y tiene una estructura de información jerárquica?
¿La jerarquía posee más de 3 niveles de profundidad?
¿He detectado que los usuarios suelen estar desinformados en relación a su ubicación dentro de la jerarquía del site?
¿Crees que un breadcrumb puede aportar valor al usuario?
Si todas estas respuestas son afirmativas ¡adelante!
¿Por qué usarlo?
1. Permite un acceso rápido a niveles de navegación superior *
2. Muestra al usuario dónde está *
3. No causa problemas a la hora de realizar los test de usuario *
4. Ocupa muy poco espacio en la página *
5. Aporta usabilidad a tu web site (recordar “Interfaces explorables”, uno de los principios de diseño de interacciones propuestos por Bruce Tognazzini)
6. Te echa una mano en SEO, pequeña pero te la echa.
7. No es costoso de implementar (depende claro a lo Amazon es muy caro)
8. El usuario te lo agradecerá
* Según J. Nielsen.
Traducción
En este mundo tan complejo y globalizado a veces cuesta ponerse de acuerdo en los nombres de las cosas. Aquí algunos ejemplos:
breadcrumb Navigation o Breadcrumb Trail: rastro, ruta, ruta de navegación, camino de navegación, hilo de Ariadna, rastro de migas de pan, sendero de migas de pan, menú de rastro.
Ejemplos
IBM
Useit
Walmart
El Periódico
Abril 23, 2007
Live, from La Rambla, This is Sant Jordi 07′
- Tema: Off the Topic
- » Se lee en 1 segs
Acabamos de volver del “Happening” organizado por Jordi de TMC. Su singular despacho cuenta con una particularidad muy aprovechable: un terrado del tamaño de la finca completa con unas vistas inmejorables de Barcelona, desde Montjuïc hasta la torre Agbar, pasando por Santa María del Mar, la Catedral y un sinfín de otros terrados a cuál más particular.
Como no podía faltar la tecnología, estaban transmitiendo vía stream los acontecimientos de la reunión en pleno centro de Barcelona. Quién iba a pensar, hace 10 años, que podríamos ver en directo imágenes a través de Internet sin necesidad de pagar el coste de un satélite o de una unidad móvil! Ahora una webcam, un buen ADSL y un servidor adecuado (y, por supuesto, alguien que sepa mezclar este coctail) son suficientes para una transmisión en directo.
Feliç Sant Jordi a tothom!
Tags:Off the TopicAbril 20, 2007
Escribiendo atributos Alt
- Tema: Usabilidad
- » Se lee en 61 segs
El atributo Alt en las imágenes es uno de los elementos clave a la hora de pensar en accesibilidad. Es el atributo que permitirá dar mayor semántica a un website cuando está siendo visto a través de navegadores adaptados para personas con impedimentos visuales, entre otras funciones muy útiles.
Hemos hecho el ejercicio de mirar cómo algunos websites relevantes suelen escribir este atributo.
| Website | Alt vacios | Info sobre accesibiliad | Estilo del Alt | Ejemplo de rotulación del atributo Alt |
| bbc.co.uk | 4 | si | Indicativo | Wolrd news, bbc.co.uk, news feeds |
| wikepedia.com | 0 | no | Descriptivo | This is the internationally recognised symbol for accessibility |
| sidar.org | 0 | si | Descriptivo | Logotipo de SIDAR, lleva a su página principal |
| mozilla.org | 0 | no | Descriptivo | Get firefox now at mozilla.com |
| gencat.cat | 0 | si | Indicativo | Canviem-ho, encara hi som a temps |
| apple.com | 5 | no | Indicativo | Apple, Apple Store |
| microsoft.com | 0 | no | Indicativo | microsoft, Download and install… |
| lacaixa.es | 4 | si | indicativo | Logotip de la caixa |
| cajamadrid.es | 1 | si | Descriptivo | Entrar en la Oficina Internet Caja Madrid [abre en una ventana nueva] |
Conclusión:
No basta con rellenar el atributo, hay que escribirlo de manera descriptiva y semántica de lo contrarío sirve para burlar a los validadores automáticos.
Aquí unos ejemplos de cómo se podría redactar mejor el contendido de este atributo.
MAL: Alt= “palomitas”
BIEN: Alt= “Foto: Bolsa grande de apetitosas palomitas de maíz - [lleva a página promocional sobre entradas de cine]”
Ejemplo wikipedia:
MAL: … Alt=“Foto de una lechuga”> Las lechugas tienen un periodo, bla bla….
BIEN: Alt= “Muchas variedades de lechugas tiene propiedades curativas”> Las lechugas tiene un periodo, bla bla….
Es decir, utilizar la imagen como una cita o un elemento que a parte de describir el contenido aporte algo al lector.
La wikipedia ha desarollado su manual de estilo para redactar correctamente el alt para las imágenes, muy interesante.
Me quedo con esta frase:
“Don’t talk about the image, talk about the thing”
¿Cómo lo veis, reescribimos los alt de nuestras imágenes?
Tags:UsabilidadAbril 16, 2007
Validar es de Humanos
- Tema: Usabilidad, Diseño Web
- » Se lee en 61 segs
Últimamente he estado leyendo mucho sobre temas de validación del HTML. De hecho hace unas semanas realicé un ejercicio de validación, para ver quién valida y quién no, tomando como muestra algunos de los sitios web más visitados, según Alexa.
Ahora una reflexión.
Parecerá una obviedad pero quizá no lo es tanto, no olvidemos que existe mucha gente que piensa que el IE es igual a Internet. La validación del HTML no es nada si no hay un buen basamento de usabilidad y arquitectura de la información.
En muchos casos nos podemos encontrar con una página completamente validada en XHTML 1.0 Estricto. Sin embargo, la página no tiene nada de usable, no aporta nada al usuario, pero es válida.
Creo que hemos de compensar la balanza. La validación del código en sí misma no es nada si no se acompaña de un buen contenido, de una buena maquetación, de una buena arquitectura. Lo sé, parece obvio pero en muchos proyectos me he encontrado con que la validación ha de ser la reina y la usabilidad mmm… en segundo plano. La validación es una cosa exacta, cero errores es igual a válido, mientras que la usabilida, es más abstracta y variable, depende del target, de los objetivos del site, hay unas líneas básicas pero son subjetivas.
Un buen website es resultado de muchos pequeños detalles y de mucha reflexión sobre el usuario, el código es una parte y no el todo. Quizá, este símil sea oportuno: Una página que no valida es como un artículo de prensa con gazapos.
Tags:Diseño Web, Usabilidad, validación, XHTMLAbril 13, 2007
Temblor: Twitter primero, las noticias después
- Tema: Web World, Off the Topic
- » Se lee en 61 segs
Esta mañana mientras aquí en la península nos despertábamos para comenzar con ánimos el viernes, al otro lado del charco, en México se producía un sismo de 6.3 grados en la escala de Richter. Afortunadamente, no fue más que un sacudón de unos 45 segundos de duración, según reportan testigos presenciales en el Distrito federal.
Estos últimos datos corresponden a fuentes oficiales, durante el suceso fuentes extraoficiales o más oficiales que las oficiales, narraban lo acontecido tal cual lo iban viviendo haciendo uso de Twitter.
Gracias al trabajo de investigación realizado por Scoble, pudimos analizar los comentarios realizados en tiempo real de quienes vivían el suceso en carne propia.
Así pudimos comprobar los primeros reportes con fuentes de primera mano. Aquí algunos ejemplos:
Satrina Earthquake in Mexico City, was long and a little bit strongFri Apr 13 05:50:50 GMT
arroba Temblo en la ciudad de mexico… se sintio oscilatorio ( hare llamadas aunque ya es muy noche 12:45 am)Fri Apr 13 05:47:48 GMT
paranoideo Very strong earthquake in Mexico City, paranoideo.com is reporting live (:P)
Lo interesante a analizar en este fenómeno es que, y ya se ha dicho mucho, queda demostrado una vez más que este tipo de servicios a lo 2.0 ponen en tela de juicio la inmediatez de los medios de comunicación que, pese a que están online no tienen la capacidad de repuesta tan inmediata que puede tener un usuario de una red social.
¿Por qué? Porque al usuario le da igual si la noticia tiene las 5w o si el hay errores ortográficos, el usuario escupe en palabras frías lo que ve y lo que siente así, sin más. Desprendiéndose de cualquier prejuicio.
Links: Mexico City Earthquake, reported on Twitter first
Tags:Off the Topic, Web WorldAbril 11, 2007
Typo3 quiere mejorar la usabilidad de su backend
- Tema: Usabilidad, Web World
- » Se lee en 1 segs
Typo3 uno de los CMS Open Source más populares del mercado, lanza una encuesta para mejorar la usabilidad de su backend y conocer un poco mejor a sus usuarios.
Con una batería de 33 preguntas, indaga sobre 5 aspectos cruciales: Uso y Workflow, Eficacia de tareas, Documentación, Uso personal e Información personal
Personalmente he tenido contacto con CMS de código abierto como Joomla, Wordpress, Mambo, Dropal, eZ Publish, Typo3, entre otros y la verdad es que el talón de Aquiles de este tipo de sistemas sigue siendo la dificultad de operar el backend, Typo3 el que más. Aunque Wordpress desde su nacimiento siempre ha sido el más “usable” de todos, aún sigue teniendo gaps, sobre todo en el editor de texto y en lo que a Media Management se refiere. Si bien es cierto que existen millones de extensiones para mejorar estos aspectos aún en el “core” no están contempladas estas opciones.
Links: Encuesta “Mejorando la usabilidad de TYPO3”
Tags:Usabilidad, Web WorldAbril 10, 2007
Breadcrumb si o Breadcrumb no, esa es la cuestión
- Tema: Usabilidad
- » Se lee en 61 segs
Tras las pausas de las Pascuas, Jakob Nielsen en su alertbox, nos presenta una oda al uso del Breadcrumb. En ella destacan 4 razones fundamentales para utilizar este elemento:
- Muestra al usuario dónde está
- Permite un acceso rápido a niveles de navegación superior
- No causa problemas a realizar los test de usuario
- Ocupa muy poco espacio en la página
Más aún deja claro la creciente tendencia a la estandarización del uso y ubicación del Breadcrumb. Poco a poco pasa a ser un elemento que no puede faltar en un buen website.
Pero… ahora yo me pregunto ¿de verdad la gente usa este recurso o al menos lo mira y se pregunta qué es? Según las investigaciones de Nielsen sí, aunque en mis rústicas y poco fundamentadas observaciones de campo creo que la gente no usa este recurso. El botón de “Atrás” de los navegadores sigue siendo el elemento más fuerte de navegación. Como anécdota, no hace mucho un par de clientes pidieron que se eliminara el Breadcrumb porque lo consideraban “inútil” y además fue muy tajante en este sentido.
Estoy de acuerdo con Nielsen en el sentido de que este elemento no estorba dentro del website y además puede aportar valor al usuario. Sin embargo, no sé hasta qué punto aporta y en qué grado es útil para el usuario. Porque si el usuario no entiende de qué van estos links los estamos haciendo pensar y eso no es bueno. También se debe considerar cuándo usarlo, la gente de Úsalo hace ya varios años comenta un poco sobre cuándo usar este recurso.
Otro aspecto a tomar en cuenta es que el breadcrumb trail aporta valor pero no es indispensable, a la hora de planificar un análisis heurístico nos debemos preguntar si en realidad hace falta y si puntúa o no.
¿Qué opináis? ¿Breadcrumb si o Breadcrumb no?
Links: Breadcrumb Navigation Increasingly Useful
Los hermanos Grimm y la Usabilidad. El sendero de migas de pan
Traducción: Breadcrumb Trail: rastro, ruta, ruta de navegación, camino de navegación, hilo de Ariadna, rastro de migas de pan, sendero de migas de pan.
Abril 3, 2007
Felices Pascuas, Happy Easter
- Tema: Off the Topic
- » Se lee en 1 segs
Usandolo.com se va de gira española de costa a costa. Barcelona-Bilbao Tour, regresando el 9 de abril.
¡Felices Fiestas!
Tags:Off the TopicAbril 2, 2007
Pescando las búsquedas: una experiencia diferente
- Tema: Usabilidad, Web World
- » Se lee en 1 segs
Hace ya varios días que venimos comentado nuevas formas de expresión de resultados de una búsqueda. Hoy me he topado con Fisssh!, un multibuscador que expresa los resultados en formato editorial con la finalidad que el usuario “escanee” con mayor facilidad sus búsquedas.
Vía BuzzShout
Tags:Usabilidad, Web World- Usándolo.com es el blog personal de Jorge Márquez, dedicado a conversar sobre usabilidad, diseño web y tecnología.
¡ Sindica el contenido de usandolo.com usando RSS !
Temas
Últimamente
- Usabilidad en microsites: caso iPhone y movistar
- Firefox 3: ¿Conseguirán el récord Guiness?
- Cuando Marketing no entiende de Usabilidad
- Ok/Cancel, todo un clásico
- Visto el coche de Google Street View en Barcelona
- Barack Obama y su estrategia online
- Google Friend Connect, redes sociales para todos
- ¿conoceis Bitacoras.com?
- Al Gore y la usabilidad
- Leyes y principios: Fitts’ Law
Archivos
- Julio 2008
- Junio 2008
- Mayo 2008
- Abril 2008
- Marzo 2008
- Febrero 2008
- Enero 2008
- Diciembre 2007
- Noviembre 2007
- Octubre 2007
- Septiembre 2007
- Agosto 2007
- Julio 2007
- Junio 2007
- Mayo 2007
- Abril 2007
- Marzo 2007
- Febrero 2007
- Enero 2007
