¿Qué es Usabilidad y Arquitectura de la   Información?       Amalio A. Rey      www.emotools.com      www.amaliorey.com
¿Qué es la “Usabilidad”?   La cualidad que indica FACILIDAD DE USO   En Internet = “ERGONOMÍA DIGITAL”   Se ocupa de es...
¿Qué es “Arquitectura de la                Información” (AI)? (1)    Lo principal de una web es el CONTENIDO: La AI intent...
¿Qué es “Arquitectura de la            Información” (AI)? (2)   Definir los patrones y flujos de navegación    entre las ...
“Primera Ley de la Usabilidad”      Escucha y observa a tus usuarios. No lo              sabes todo de tu web   Algo que ...
Ejemplo de las “sorpresas” de los            tests de usabilidadEn un estudio de usabilidad realizado en una Webde una com...
Ejemplo-1: Extensión de los Menús    No hagas menús muy extensos. Evita que tengan muchas    opciones = Más de 5 pueden se...
Ejemplo-2: Colores de los enlaces   Los enlaces "nuevos" y "visitados" tener    el mismo color pero con diferentes    ton...
Ejemplo-3: ¿Dónde estoy?      Indica al usuario “donde estoy” sin    desactivar el botón correspondiente del              ...
Ejemplo-4: Menú desplegables y uso                  de los bulletsEvita los menús desplegables pero si los usas,       al ...
¡¡MUCHAS GRACIAS!!Si quieres seguir profundizando en este tema, te          invito a que visites estas web:             ww...
Próxima SlideShare
Cargando en…5
×

Que es usabilidad y arquitectura de información web

2.912 visualizaciones

Publicado el

Publicado en: Empresariales
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
2.912
En SlideShare
0
De insertados
0
Número de insertados
230
Acciones
Compartido
0
Descargas
42
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Que es usabilidad y arquitectura de información web

  1. 1. ¿Qué es Usabilidad y Arquitectura de la Información? Amalio A. Rey www.emotools.com www.amaliorey.com
  2. 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. 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. 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. 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. 6. Ejemplo de las “sorpresas” de los tests de usabilidadEn un estudio de usabilidad realizado en una Webde una compañía aérea norteamericana, sedescubrió que los usuarios tenían miedo de hacer"clic" sobre un botón que decía: "Compre un billeteahora". Los usuarios pensaban que pulsando ahí,se verían obligados a comprar un billete, o queautomáticamente se le cargaría a su cuenta. Esteproblema tan simple, provocó la pérdida demuchas ventas a la compañía... Amalio A. Rey - www.emotools.com
  7. 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. 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. 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. 10. Ejemplo-4: Menú desplegables y uso de los bulletsEvita 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. 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

×