Diseño de la InformaciónUsabilidad en la informaciónJacob Nielsen – Steve Krug

Diseño de Información Edward Tufte

Estructuras de interfasesPatrick Lynch, Sarah Horton

Usabilidad web

Usabilidad web

Elementos de usabilidad (Informe APEI sobre usabilidad. Yusef Montero y Sergio Ortega)

1. La Experiencia de Usuario

2. Diseñar para usabilidad, accesibilidad y encontrabilidad

3. Diseñar para congnición, para interpretaciónSIMPLICIDAD

4. Principios fundamentales del diseño visual

Usabilidad web

Elementos de usabilidad – Cómo se integran

PARA LOGRAR UNA EXITOSA

- Experiencia de Usuario

SE DISEÑA A PARTIR DE ESTÁNDARES

- Usabilidad- Accesibilidad- Encontrabilidad

CON EL OBJETIVODE POSIBILITAR

- Cognición- CorrectaInterpretación del usuario

Usabilidad webComponentes de la Experiencia de Usuario (Usabilidad Web Nielsen)

Facilidad:Facilidad para ejecutar tareas básicas por primera vez

Eficiencia:Después de aprendida la tarea, cuanto tarda en ejecutarla

Recordación:Después de un tiempo, cuanto tarda en realizar la tarea

Eficacia:Cuantos errores comete el usuario

Satisfacción:Es agradable y sencillo

+ impacto

- impacto

Usabilidad web

UsabilidadInterfases ÚTILES Y FÁCILES

AccesibilidadInterfases a las QUE TODOS PUEDAN ACCEDER

EncontrabilidadInterfases que puedan ser ENCONTRADAS

Diseño:• Con estándares

• Limpio (- es +)

• Contenidos pensados enel usuario

¿Cómo seLogra?

Usabilidad web

Diseñar para congnición, para interpretaciónSIMPLICIDAD

¿Cómo lograr que toda la información y tareas estén completas y visibles, de forma simple?

Usabilidad web

Diseñar para congnición, para interpretaciónSIMPLICIDAD

Complejidad inherente al sitio web- Depende de sus funciones y contenidos - (Arquitectura de Información)

Complejidad aparente del sitio web - Depende de decisiones de diseño, uso estructural y visualización - (Diseño Centrado en el Usuario)

Usabilidad web

Diseñar para congnición, para interpretaciónSIMPLICIDAD

Se diseña para procesamiento LIMITADO de información

- Se deben agrupar hasta 7(+/-)2 items, incluso se plantea 3 a 5 items o elementos- El usuario explora a partir de la técnica ensayo-error, así entonces menos items, disminuyen el error- Ordenar info alfabética, cronológica, geográficamente o numéricamente

Usabilidad web

Diseñar para congnición, para interpretaciónSIMPLICIDAD

Se diseña para procesamiento LIMITADO de información

- Ordenar por categorías temáticas. Pocos items que deben ser agrupados mediante rótulos descriptivos.- Limitar posibilidades para evitar errores (formularios de fechas)- La importancia del contexto: tipo de público, habilidades, tendencias gráficas deben ser evaluadas

Usabilidad web+ complejo

- sencillo

- Mucha info- Dificil de interpretar- Tarea elaborada

- Falta info- Dificil de interpretar- Tarea incompleta

- Se evalúa la información- Fácil interpretación- Tarea correcta

Usabilidad webPrincipios fundamentales del diseño visual

1. Enfatizar:Hacer visible lo relevanteDeterminar jerarquías visuales

2. Organizar:Establecer relaciones o diferenciaciones visuales (color, tipografía, disposición gráfica de elementos, composición)

3. Hacer reconocible:Disminuir el esfuerzo para comprender una información (íconos, rotulos, encabezados)

Usabilidad webSimplicidad

> Limpieza gráfica

> Tareas claras

> Zonas en blanco

> Formas y textos estándar

Usabilidad web

Simplicidad

> Destacar lo importante

> Info en su justa medida

> Limitar carga de información

Usabilidad webUsabilidad - conclusiones Jacob Nielsen

1.Visibilidad del estado del sistema. 2.Utilizar el lenguaje de los usuarios. 3.Control y libertad para el usuario. 4.Consistencia y estándares. 5.Prevención de errores. 6.Minimizar la carga de la memoria del usuario. 7.Flexibilidad y eficiencia de uso. 8.Los diálogos estéticos y diseño minimalista. 9.Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores. 10.Ayuda y documentación.

Usabilidad webUsabilidad - conclusiones Steve Krug

1. No leemos, saltamos por el contenido2. Crear jerarquías visuales3. Usar métodos convencionales4. Signos visibles de navegación5. Crear áreas bien definidas6. Hacer obvio lo que es clickeable7. Minimizar el ruido gráfico8. Escribir lo justo y necesario

Diseño de información

Diseño de la información

Gráficos revelan datos

Los detalles dan claridad

Comparar

El dato por encima de todo

Mayor detalle hace la diferencia

Diseño de la información

Gráficos revelan datos

Diseño de la información

Diseño de la información

Mayor detalle hace la diferencia

Diseño de la información

Diseño de la información

Comparar

Diseño de la información

Diseño de la información

El dato por encima de todo

Diseño de la información

Diseño de la información

Diseño de la información

Componentes de lasInterfases WebThe Web Style Guide

http://webstyleguide.com

Interfases Web

Definición de GUI

Wireframes / Mockups

Elementos estándar en una interfase web/mockup

¿Dónde y cómo poner las cosas?

Señalización / Orientación

Convenciones de diseño

Estructura de las plantillas

Diseño visual

Interfases Web

Definición de GUI

La interfaz gráfica de usuario (GUI) de un sistema informático comprende las metáforas de interacción, imágenes y conceptos que se utilizan para transmitir la función y el significado de la pantalla al usuario.

Interfases Web

Wireframes / Mockups

Representaciones gráficas de las GUI, a modo de “bocetos”que permiten presentar una idea de lo que representará el diseño final de las interfases de usuario.

Proporcionan:

Un diseño fundamental de la interfase

Modelado de la estructura de navegación

Interfases Web

Wireframes / Mockups

Interfases Web

Elementos estándar que debe contener el mockupLogotipoTítulo de sitioTítulo de páginaMiga de panBuscadorEnlaces a sitios sup.Navegación GlobalNavegación LocalContenidoEmailContacto

Interfases Web

¿Dónde y cómo poner las cosas?

El medio y las esquinasRegla de los tercios“Z” de Gutemberg (Clásica)Lectura por gravedad

Reglas clásicas de composición

Interfases Web

¿Dónde y cómo poner las cosas?

Patrones de lectura en la web

Interfases Web

¿Dónde y cómo poner las cosas?Tendencias claras que han surgido con el tiempo será la base para la "mejor práctica" las recomendaciones en la página web de la composición.

Interfases Web

¿Dónde y cómo poner las cosas?Los usuarios han desarrollado expectativas claras acerca de dónde deben estar los contenidos comunes y los elementos de la interfaz. Violar estas expectativas en su cuenta y riesgo.

Interfases Web

¿Dónde y cómo poner las cosas? Combinar

• Estilo de las web actual

• Pautas de diseño y composición tradicional

• Investigación sobre GUI

• Composicion clásica de páginas web

Interfases Web

Señalización / Navegación

• Orientación 1: Miga de pan / Breadcrumbs

Interfases Web

Señalización / Navegación

• Orientación 2: Títulos de página, cambiosde color en links, headers

• Uso consistente de los elementos gráficos que apoyan la exploración del sitio

• Múltiples, usted estáaquí

Interfases Web

Señalización / Navegación

• Decisiones de ruta Sistemas de navegación

• Limitar las decisiones de rutas de navegación

Interfases Web

Señalización / Navegación

• Coherencia gráfica: Color, tipografía, composición

• Elementos gráficos identificables en el sitio y Flexibilidad visual que permita identificar entre una sección y otra

Interfases Web

Convenciones de diseño1. Solo se ve una página a la vez En muchos casos una parte de la página

Interfases Web

Convenciones de diseño2. Navegación clara Sencilla, opción de volver a página inicial, coherencia gráfica

Interfases Web

Convenciones de diseño3. Todas las páginas identificadas Siempre que el usuario sepa donde está y que pueda volver a las navegaciones superiores de forma intuitiva.

Interfases Web

Convenciones de diseño4. Simplicidad y coherencia - Menos es más- Minimalista- Sin excesos- Diseñar en módulos (nodos)

Interfases Web

Ejemplo de interfaz completa

Los elementos que debe tener una GIU

No todos se utilizan simultáneamente)

Interfases Web

Estructura de las páginasPlantillas

• Comenzar con plantillas de páginas internas, ya que son las que dominarán el sitio

• Luego diseñar el home

Interfases Web

Estructura de las páginasPlantillas internas• Estructura: HOME > Internas principal (landing pages) > Internas secundaria

• Navegación global y local

• Maquetado de diseño: consistente para todo el sitio

• Estilo gráfico: elementos visuales coherentes, pero flexibles dependiendo de los cambios de canales o secciones

Interfases Web

Estructura de las páginasPlantillas páginas

principales• Identidad

• Navegación evidente, intuitiva, clara, fácil

• Puntualidad en el enfoque de contenido

• Herramientas de búsqueda, directorios, nodos de links, accesos rápidos, etc

Interfases Web

Estructura de las páginasEjemplo EAFIT• Identidad: color, logo, fuente

• Navegación evidente: nodos de navegación y contenidos separados, jerarquizados

• Puntualidad: no es buena, maneja varios tópicos

• Herramientas de búsqueda, directorios: buscador, subportales, búsqueda por públicos, canales, etc

Interfases Web

Diseño visual

•Bloques de construcción: el conjunto de elementos produce un todo organizado

•Jerarquías visuales de cambio claras: qué es lo importante y qué es “paisaje”

•Definir zonas funcionales de la página: dividir y definir para que se van a utilizar las diferentes regiones de la interfaz

•Agrupar información: elementos que se relacionan permiten definir la estructura de contenido

Interfases Web

Diseño visual – Principio de la Gestalt

• Proximidad: elementos cercanos son relacionados

• Similitud: asociación por elementos que comparten características visuales

• Continuidad: detalles que mantienen un patrón tienden a agruparse juntos como figura

• Cierre: elementos gráficos interrumpidos se pueden ver

• Figura – Fondo: la figura se distingue por el fondo

• Conectividad: encerrar elementos dentro de otros

• 1 + 1 = 3: dos cuadros próximos, activan un tercer cuadro en blanco

Interfases Web

Diseño visual – Principio de la Gestalt

Interfases Web

Diseño visual

•Bloques de construcción

•Jerarquías visuales

•Definir zonas funcionales

•Agrupar información

Interfases Web

Coherencia

•Estilo de imágenes, textos y gráficos

•Construyen ritmo y unidad

•El usuario puede predecir rutas de navegación, se familiariza con el diseño

Interfases Web

Contraste

•Destacar elementos

•Organizarlos de manera lógica y predecible

Interfases Web

Contraste

•Importante tener en cuenta para tipografía

•Evite el uso excesivo de contraste: si todo es llamativo, nada llama la atención

•Seleccione preferiblemente colores elegidos por la naturaleza

Interfases Web

Simplicidad

Interfases Web

Diseño de páginas

de información

•La zona principal es la que captura al usuario promedio

•Dividir la página en zona visual (superior) y funcional (inferior)

Interfases Web

Diseño de páginas

de información

•Creación de jerarquías de atención con contraste para que sean puntos de entrada a las zonas interiores del sitio

Interfases Web

Diseño de páginas de información

•Patrones de repetición significativa de contraste para que el lector identifique rápidamente el diseño de la página