Principios de Buen Diseño de Pantallas Cátedra Programación I

Transcripción

1 PRINCIPIOS DE BUEN DISEÑO DE PANTALLAS Qué quieren ver los usuarios? Apariencia clara y ordenada Indicación obvia de lo que se muestra y lo que se debería hacer con él Información esperada situada donde debería estar Clara indicación de qué se relaciona con qué, incluyendo opciones, encabezados, leyendas, datos, etc Idioma conocido Forma sencilla de descubrir qué hay en el sistema Clara indicación de cuándo una acción puede realizar un cambio permanente en los datos o sistema Qué hacen los usuarios al interactuar con una pantalla? Identificar una tarea a realizar o necesidad a cubrir Decidir cómo se completará la tarea o satisfará la necesidad Manipular los controles Buscar los datos necesarios Realizar juicios resultantes en decisiones relevantes para la tarea o necesidad MAXIMA: La gente se pasará horas y horas mirando la pantalla Metas del diseño de interfaces Reducir el trabajo visual Reducir el trabajo intelectual Reducir el trabajo de la memoria Minimizar o eliminar cargas o instrucciones impuestas por la tecnologías Significado y propósito de la pantalla Todos los elementos de la pantalla.. Controles Texto Organización de pantalla Énfasis Colores Gráficos Animaciones Mensajes Cualquier forma de retroalimentación deben: Tener significado para los usuarios Servir para realizar tareas Página 1 de 16

2 Organizar elementos de pantalla Ordenación de Datos y Contenidos Dividir información en unidades que sean lógicas, significativas y sensatas Proporcionar ordenación de unidades de pantalla de información y elementos priorizados según las expectativas de usuario y sus necesidades Posibles esquemas de ordenación: secuencia de uso, frecuencia de uso, función, importancia, de lo general a lo específico Asegurar que toda la información a comparar es visible al mismo tiempo Asegurar que sólo se muestra información relativa a las tareas o necesidades de los usuarios Por dónde empezamos? Parte de la pantalla Trayectoria de rastreo Navegación y flujo de pantalla Proporcionar ordenación de la información y elementos de forma que: Guíe al ojo del usuario Favorece movimientos naturales Situar los elementos y controles más importantes y usados con mayor frecuencia arriba a la izquierda Ayudar en la navegación mediante: Alineación de elementos Agrupamiento de elementos Uso de bordes de línea Dirigir la atención hacia ítems: Críticos Importantes Secundarios Periféricos Navegación y flujo de pantalla Flujo arriba-abajo, izquierda-derecha Situar botones de comandos al final de la secuencia ordenada Cuando se deba mostrar información relacionada por separado, hacer separaciones naturales o lógicas Conjunto de ventanas en orden lógico informativo Página 2 de 16

3 Movimiento natural del ojo De zonas oscuras a zonas claras De objetos grandes a pequeños De formas inusuales a formas comunes De colores de alta saturación a colores de baja saturación Percepción de agrupamientos más obvia Cuando los ojos se van de la pantalla y vuelven, se vuelve a la posición en que se dejó aun cuando se busque el siguiente ítem de la secuencia (tipo punto de fijación con nombreanchor- en HTML) Composición visual agradable La que posee las siguientes cualidades: Balance Simetría Regularidad Predictibilidad Secuencialidad Unidad Simplicidad Agrupamiento Balance Simetría Página 3 de 16

4 Regularidad Predictibilidad Secuencialidad Página 4 de 16

5 Unidad Simplicidad Agrupamiento Proporciona asociaciones funcionales de elementos Refuerzo visual: Separación adecuada entre grupos Líneas de borde entre grupos Proporcionar títulos significativos para cada grupo Ejemplo de mal diseño Diseño mejorado: Agrupamiento Página 5 de 16

6 Grupos separados por espacios en Blanco Proporciona separación adecuada entre grupos a través del uso libre de espacios en blanco En páginas web, hay que tener en cuenta entre la zona en blanco y el scrolling ( el desplazamiento de texto, imágenes o videos en una pantalla) que ello requiere Grupos separados por bordes Usar para: Centrar la atención sobre la información del grupo Guiar el ojo a través de una pantalla Variación de grosor y estilos de líneas Crear líneas consistentes en altura y longitud Dejar suficiente espacio entre la información y los bordes Alineamiento de fronteras de grupos Ejemplo agrupamiento sin bordes Página 6 de 16

7 Ejemplo agrupamiento con bordes Grupos usando fondos Usar fondo que contraste con el resto de la pantalla Usar técnicas de alto contraste o énfasis para componentes de pantalla a los que queremos dirigir la atención del usuario MÁXIMA: Trabajar con un sistema debería ser tan poco doloroso que deberíamos trabajar casi sin darnos cuenta Estilo visual en Diseño de Páginas Web Mantener un estilo consistente y visualmente unificado a través de las páginas de un sitio web Basar el estilo visual en: El perfil y metas del propietario del sitio web El perfil, gustos y expectativas del usuario del sitio web Cantidad de información Presentar la cantidad de información adecuada para la tarea Muy poca es ineficiente, mucha es confuso Presentar toda la información necesaria para realizar una acción o tomar una decisión en la pantalla cuando sea posible Página 7 de 16

8 Tamaño de página web Minimizar el tamaño de la página Restringir a dos o tres pantallas de información Situar información crítica e importante arriba de forma que siempre se vea al abrir la página Páginas largas o cortas? Para encontrar información específica rápidamente muchos enlaces en páginas cortas Para comprender conceptos sin interrupción Una página con enlaces internos Para imprimir la mayoría del contenido Una única página o tener una versión en una página Para conexiones lentas y no hay necesidad de todas las páginas al mismo tiempo página tipo índice con enlaces a páginas cortas Scrolling Evitar scrolling horizontal Minimizar el scrolling vertical En caso de scrolling vertical - Proporcionar estructura de fin de página única y consistente - Proporcionar claves contextuales que orienten al usuario (el usuario comprende mejor un texto cuando el contexto lo ayuda a ello) Diferenciación Diferenciación de controles de pantalla y grupos de controles No tocar bordes de pantalla/ventana No tocar otros elementos Foco y énfasis Enfatizar visualmente los elementos más importantes, prominentes y centrales Usar técnicas de énfasis como: Mayor brillo Fuente mayor y distintiva Subrayado Parpadeo Color contrastante Página 8 de 16

9 Tamaño mayor Posicionamiento Aislamiento Forma distintiva o inusual Espacio en blanco Quitar el énfasis de elemento poco importantes Evitar: Enfatizar demasiados elementos Usar demasiadas técnicas de énfasis Pantalla caótica En diseño de páginas web: Llamar la atención al contenido nuevo o modificado El fondo de pantalla no puede ocultar el texto Profundidad de niveles o apariencia tridimensional Asumir siempre una fuente de luz en la esquina superior izquierda Mostrar los botones de comandos sobre la pantalla Mostrar los controles basados en pantalla bajo la pantalla Usar perspectivas, resaltar y otras técnicas para conseguir aspecto tridimensional Técnicas de apariencia 3D Solapamiento Resaltar Bordes a distinto nivel Cambio de textura Cambio de color Cambio de tamaño Presentar información de manera simple y significante Proporcionar inteligibilidad (diferenciación) Proporcionar legibilidad (identificar, interpretar y amigabilidad) Presentar información de manera usable (traducciones, enlaces a referencias adecuadas) Usar propiedades de contraste Crear líneas visuales (implícitas o no) para guiar al ojo Ser consistente en apariencia y uso Tipografía Página 9 de 16

10 Usar fuentes sencillas, comunes No usar más de dos familias, compatibles en grosor de línea, tamaño de letras mayúsculas, etc Asignar un propósito diferente a cada familia Fuentes NO más de 3 tamaños diferentes Web cuerpo, títulos y encabezados No más de 2 estilos de la misma familia Itálica para llamar la atención Negrita para llamar la atención o crear jerarquía Subrayado en web para enlaces de navegación Mayúsculas-minúsculas Mayúsculas: Título Encabezado de (sub)sección Mensajes de aviso Palabras o frases con fuente pequeña Mixto (Mayúsculas minúsculas ) Datos Texto Mensajes de información Instrucciones Descripciones de menú, botones y controles de selección Leyendas de control Diseñando elementos de pantalla Etiquetas/Leyendas Identificar controles con etiquetas/leyendas. Etiquetas/leyendas distinguibles Nombres completos y significativos para usuarios Mostrarlos con intensidad normal Usar may-min mixto Primera letra de cada palabra significativa en MAY Campos de datos Campos editables (los usuarios pueden introducir o modificar el valor de los mismos) Caja de líneas Enfatizarlos visualmente Página 10 de 16

11 Ejemplo: Etiquetas vs Campos de datos Diferenciarlos Contraste, columnas separadoras, cajas, etc Relaciones físicas consistentes Campos de texto simples Etiqueta a la izquierda del campo de datos Alinear ambos verticalmente Alinear ambos, la etiqueta con la esquina superior izquierda del campo de texto 1 espacio en blanco entre la etiqueta más larga y la columna de campos Justificación izquierda de los campos y derecha de etiquetas Dejar espacio en blanco entre ambos grupos Campos de texto múltiples Etiqueta sobre la columna de campos Ejercicio: Te presentamos distintos diseños de pantallas. Determina cual ofrece el mejor diseño. Justificar 1) 2) Página 11 de 16

12 3) 4) 5) 6) 7) 8) 9) Página 12 de 16

13 10) 11) 12) 13) Encabezados de páginas web Jerarquía de fuentes, estilos y tamaños en función de la importancia del contenido Menor cantidad de estilos y tamaños posible No mezclar indiscriminadamente (o evitar la mezcla de) niveles de encabezado Encabezado significativo que describa la relación de los controles agrupados Página 13 de 16

14 Situar los encabezados de sección sobre los controles de pantalla relacionados Alternativamente, situarlos en la esquina superior izquierda del borde que rodee al grupo Todo en mayúsculas o mixto Separación encabezado/etiquetas mediante espacios Instrucciones al usuario Situar precediendo a la parte o partes de la pantalla a las que aplique la instrucción Usar único estilo y color, may-min mixto Dejar línea en blanco entre las instrucciones y los controles o textos correspondientes Máscaras Situar a la derecha del control de entrada de texto relacionado Mostrar entre paréntesis y con estilo único En caso de controles situados en columna Suficientemente lejos para no perjudicar la legibilidad Suficientemente cerca para no perder la asociación Alineamiento izquierda en una misma columna recomendado PAUTAS DE ORGANIZACIÓN Y ESTRUCTURACIÓN Pantallas de entrada y modificación de datos Organización Lógica y clara Información usada con mayor frecuencia, así como la información requerida: al principio y en las primeras pantallas Etiquetas Alineación: posición consistente respecto a los campos de datos Para entradas de datos: Distribuirlos convenientemente en las diferentes pantallas, ventanas y grupos Identificar si la información es opcional u obligatoria Identificar la información obligatoria con una única fuente o símbolo A partir de documentos referencia Organización a imagen de la referencia Grupos lógicos según referencia Encabezados como en referencia, may o mixto Paso manual de un control a otro Página 14 de 16

15 No hacen falta instrucciones ni máscaras Que se rellene de izqda a dcha y disposición como en referencia SE DEBE PODER RELLENAR SI MIRAR LA PANTALLA Operaciones en la web Organización Minimizar movimientos de ojos Agrupación lógica de información Composición Título, encabezados significativos Párrafos cortos uni-idea y concisos De lo general a lo particular Agrupar información en tablas Listas numeradas y no numeradas Presentación Resaltar conceptos importantes y palabras/frases con alto contenido informativo Pautas de navegación Facilitar la navegación Respetar el deseo del usuario de abandonar Ayudar a los usuarios a re-orientarse Pensar en un diseño que recibirá constantemente cambios en su portada, para que el usuario pueda recibir en cada visita una vista fresca del diseño y el contenido Mientras más opciones le muestre al usuario, no solo de contenido sino también de navegación, más satisfecho éste se sentirá y seguirá siendo un usuario fiel. Búsquedas: Pautas de búsqueda: conocer al usuario Nivel de experiencia Anticipar Tipos posibles de búsquedas Tipo de información solicitada Tipo de información a buscar Cantidad de información a mostrar Planear acciones de los usuarios durante la búsqueda Estrategias de búsqueda flexibles Pautas de búsqueda: expresar la búsqueda Qué Integrar navegación y búsqueda En función de las necesidades de usuario e información del sitio web Dónde En la página home En cada página Cómo Uso de controles de búsqueda (campo de texto, checkboxes, listas, botones) Página 15 de 16

16 Interfaces diferentes para búsqueda simple y avanzada Guiar y asistir (instrucciones, ayuda, etc) Pautas de búsqueda: Presentación de resultados Proporcionar lo que el usuario busca de forma fácilmente comprensible Mostrar también los criterios de búsqueda Explicar la salida de la búsqueda Presentación de resultados mediante lista textual concisa, ordenada Página 16 de 16