Post on 14-Oct-2018
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
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 la información
Gráficos revelan datos
Los detalles dan claridad
Comparar
El dato por encima de todo
Mayor detalle hace la diferencia
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
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?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 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
•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
•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
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