Este documento define la usabilidad y la arquitectura de la información. La usabilidad se refiere a la facilidad de uso de un sitio web y se ocupa de mejorar la interfaz de usuario. La arquitectura de la información se encarga de organizar el contenido de un sitio de manera lógica y facilitar el acceso a este a través de la estructura y flujos de navegación. El documento también proporciona algunos ejemplos de problemas comunes de usabilidad y formas de mejorarlos.

1. ¿Qué es Usabilidad y
Arquitectura de la
Información?
Amalio A. Rey
www.emotools.com
www.amaliorey.com

2. ¿Qué es la “Usabilidad”?
 La cualidad que indica FACILIDAD DE USO
 En Internet = “ERGONOMÍA DIGITAL”
 Se ocupa de establecer patrones de navegación y
de diseñar procesos interactivos de forma eficiente
mejorando la interfaz de usuario.
 “Es como respirar; solo te das cuenta cuando te
falta. Hay un problema de usabilidad cuando algo
es difícil de utilizar y te gustaría que fuera más
intuitivo”
 ¡Diseño centrado en las necesidades del usuario!
Amalio A. Rey - www.emotools.com

3. ¿Qué es “Arquitectura de la
Información” (AI)? (1)
Lo principal de una web es el CONTENIDO: La AI intenta
facilitar el acceso a ese contenido del modo más lógico e
intuitivo posible. Se encarga de:
 Concebir los contenidos que deben ir a un site
(“inventario de contenidos”)
 Agrupar esos contenidos en secciones de forma
lógica
 Diseñar la estructura que tendrán las páginas
(“árbol de navegación”)
Amalio A. Rey - www.emotools.com

4. ¿Qué es “Arquitectura de la
Información” (AI)? (2)
 Definir los patrones y flujos de navegación
entre las páginas
 Diseñar los procesos de interactividad
presentes en el site
 Crear prototipos de la web, que consisten en
planos vivos de la futura web
 Cooperar en el concepto general del site con
los creativos y programadores
Amalio A. Rey - www.emotools.com

5. “Primera Ley de la Usabilidad”
Escucha y observa a tus usuarios. No lo
sabes todo de tu web
 Algo que puede parecer obvio para ti, puede que
no lo sea para los usuarios.
 Puedes creer que tu página es perfecta, pero la
realidad de tus usuarios ser muy diferente.
 Realiza tests de usabilidad. Aprende de tus
usuarios observándolos interactuar con tu web.
 Pregúntales en la web “cómo podemos mejorar
este sitio”.

6. Ejemplo de las “sorpresas” de los
tests de usabilidad
En un estudio de usabilidad realizado en una Web
de una compañía aérea norteamericana, se
descubrió que los usuarios tenían miedo de hacer
"clic" sobre un botón que decía: "Compre un billete
ahora". Los usuarios pensaban que pulsando ahí,
se verían obligados a comprar un billete, o que
automáticamente se le cargaría a su cuenta. Este
problema tan simple, provocó la pérdida de
muchas ventas a la compañía...
Amalio A. Rey - www.emotools.com

7. Ejemplo-1: Extensión de los Menús
No hagas menús muy extensos. Evita que tengan muchas
opciones = Más de 5 pueden ser muchas para leer,
entender y pinchar.
 Evita que el menú se pierda por debajo de la línea de scroll.
 ¿Mejor pocos botones con varios apartados que muchos
simples?
Ej. Agrupar las direcciones de las Delegaciones, la Memoria
Anual, la Historia de la Compañía y su Misión bajo un solo
botón: "Todo sobre Nosotros".
 Si existe la necesidad real de diseñar un menú complejo =
Utiliza el sistema de “directorio” desplegado, en el centro de
la página de inicio.
Amalio A. Rey - www.emotools.com

8. Ejemplo-2: Colores de los enlaces
 Los enlaces "nuevos" y "visitados" tener
el mismo color pero con diferentes
tonalidades.
 Es preferible NO utilizar diferentes
colores para cada estatus. En todo caso
= AZUL para las “no-visitadas” y
VIOLETA para las “visitadas”.
Amalio A. Rey – eMOTools.com ©

9. Ejemplo-3: ¿Dónde estoy?
Indica al usuario “donde estoy” sin
desactivar el botón correspondiente del
menú
 Es preferible subrayar el botón o insertar
algún elemento gráfico para resaltar la
diferencia.
 Si desactivas la opción, el usuario no podrá
volver a pincharla si se siente perdido.
Amalio A. Rey - www.emotools.com

10. Ejemplo-4: Menú desplegables y uso
de los bullets
Evita los menús desplegables pero si los usas,
al abrirlos, mantenlos desplegados
 No uses menús con rollover. No lo cierres de
forma automática.. Para el usuario es mas cómodo
si pincha para abrir y cerrar el menú.
 El uso de "bullets" en los menús es necesario sólo
cuando tenemos opciones que ocupan 2 o más
líneas de texto = Dejan claro donde empieza y
donde acaba cada opción.
Amalio A. Rey - www.emotools.com

11. ¡¡MUCHAS GRACIAS!!
Si quieres seguir profundizando en este tema, te
invito a que visites estas web:
www.emotools.com
www.amaliorey.com
En TWITTER