PRINCIPIOS DE BUEN DISEÑO DE PANTALLAS

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 1

2 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 Reducir el trabajo motor Minimizar o eliminar cargas o instrucciones impuestas por la tecnologías 2

3 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 Organizar elementos de pantalla Los usuarios se acostumbran a cualquier cosa 3

4 Ordenación de Datos y Contenidos Dividir información en unidades que sean lógicas, significativas y sensatas Organizar en función del grado de interrelación entre datos e información 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 Formar grupos que cubren todas las posibilidades 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 4

5 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 Minimiza distancias entre puntero y movimiento de ojos 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 5

6 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 Por qué de arriba abajo? Movimientos de ojo entre ítems más cortos Movimientos de control entre ítems más cortos 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 nombre- anchor- en HTML) 6

7 Composición visual agradable La que posee las siguientes cualidades: Balance Simetría Regularidad Predictibilidad Secuencialidad Economía Unidad Proporción Simplicidad Agrupamiento Balance 7

8 Simetría Regularidad 8

9 Predictibilidad Secuencialidad 9

10 Economía Unidad 10

11 Proporcionalidad Simplicidad 11

12 Ejemplo de mal diseño Diseño mejorado: Agrupamiento 12

13 Agrupamiento Proporciona asociaciones funcionales de elementos Crear agrupamientos espaciales con alrededor de 5 grados de ángulo de visión Refuerzo visual: Separación adecuada entre grupos Líneas de borde entre grupos Proporcionar títulos significativos para cada grupo Diseño mejorado: Agrupamiento mejorado 13

14 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 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 En diseño web: Ser precavido en el uso de líneas horizontales como separadores de secciones Guardar líneas horizontales para situaciones en las se deba enfatizar las diferencias entre áreas adyacentes 14

15 Ejemplo agrupamiento sin bordes Ejemplo agrupamiento con bordes 15

16 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 16

17 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 Restringir los niveles de densidad de pantalla o ventana a no más del 30% 17

18 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 En los primeros 10 cms de 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 18

19 Scrolling y paginación Scrolling No puede ocultar la finalidad de la página 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 Paginación Visión de páginas completas Crear una segunda versión del sitio web donde los contenidos se vean por páginas Diferenciación Diferenciación de controles de pantalla y grupos de controles Controles de pantalla, campos y bordes de grupo y botones No tocar bordes de pantalla/ventana No tocar otros elementos Etiquetas de botones no en los bordes del botón Mostrar elementos adyacentes con suficiente contraste. 19

20 Foco y énfasis (I) Enfatizar visualmente los elementos más importantes, prominentes y centrales Usar técnicas de énfasis como: Mayor brillo Polaridad inversa o video inverso Fuente mayor y distintiva Subrayado Parpadeo Color contrastante Tamaño mayor Posicionamiento Aislamiento Forma distintiva o inusual Espacio en blanco Foco y énfasis (II) 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 20

21 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 Evitar: Perspectivas para elementos no interactivos Detallar demasiado Usar perspectivas, resaltar y otras técnicas para conseguir aspecto tridimensional Técnicas de apariencia 3D (I) Solapamiento Sombras Resaltar Encoger o agrandar Bordes a distinto nivel Cambio de textura 21

22 Técnicas de apariencia 3D (I) Cambio de color Cambio de tamaño Cambio de claridad Colocación vertical Cambio de espaciado Cambio de movimiento 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 22

23 Tipografía 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 Permitir el dominio de una familia Fuentes NO más de 3 tamaños diferentes Sistemas gráficos 12pts menus, 10 pts ventanas Web pts cuerpo, títulos y encabezados Espaciado: el tamaño de fuente No más de 2 estilos de la misma familia Itálica para llamar la atención No más de 2 pesos Negrita para llamar la atención o crear jerarquía Subrayado en web para enlaces de navegación 23

24 Mayúsculas-minúsculas Mayúsculas: Título Encabezado de (sub)sección Mensajes de aviso Palabras o frases con fuente pequeña Mixto Datos Texto Mensajes de información Instrucciones Descripciones de menú, botones y controles de selección Leyendas de control Minúsculas mucho cuidado!! Diseñando elementos de pantalla 24

25 Etiquetas/Leyendas Identificar controles con etiquetas/leyendas Nombres completos y significativos para usuarios Mostrarlos con intensidad normal Usar may-min mixto Primera letra de cada palabra significativa en MAY Acabar con : Etiquetas/leyendas distinguibles Campos de datos Campos editables Caja de líneas Caja de polaridad inversa Sólo lectura Datos directamente sobre el fondo Enfatizarlos visualmente 25

26 Campos de datos: ejemplo Etiquetas vs Campos de datos Diferenciarlos Contraste de intensidad, columnas separadoras, cajas, etc Relaciones físicas consistentes Campos de texto simples Etiqueta a la izquierda del campo de datos Alinear ambos verticalmente Situar la etiqueta sobre el campo de datos Alinear ambos, la etiqueta con la esquina superior izquierda del campo de texto Campos de texto múltiples Etiqueta sobre la columna de campos 26

27 Justificación de etiquetas/campos de datos Enfoque 1 Justificación izquierda tanto de etiquetas como de campos 1 espacio en blanco entre la etiqueta más larga y la columna de campos Enfoque 2 Justificación izquierda de los campos y derecha de etiquetas Dejar espacio en blanco entre ambos grupos 27

28 28

29 29

30 30

31 Encabezados Encabezado de sección Encabezado significativo que describa la relación de los controles agrupados Situar los encabezados de sección sobre los controles de pantalla relacionados 31

32 Encabezado de sección Alternativamente, situarlos en la esquina superior izquierda del borde que rodee al grupo Todo en mayúsculas o mixto e intensidad normal Etiquetas indentadas respecto del comienzo del encabezado Subsecciones y columnas Texto significativo Situar a la izqda de columnas de campos asociados y arriba en columnas de grupos de campos asociados Separación encabezado/etiquetas mediante símbolo separado 1 y 3 espacios respectivamente Alineación izquierda o derecha Intensidad normal y mayúscula 32

33 Encabezado de grupo de campos Texto signficativo, centrado sobre el grupo Uso de línea de borde Mayúsculas, intensidad normal o may-min si se usa fuente o estilo diferente Encabezado de página web De grupos de controles: como controles De página y texto Textos significativos 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 33

34 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 Posición visual: Justificación izquierda Etiquetas indentadas, texto con mínimo de 3 espacios a la derecha 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 34

35 PAUTAS DE ORGANIZACIÓN Y ESTRUCTURACIÓN Pantallas de entrada y modificación de datos (I) 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 izqda-dcha; posición consistente respecto a los campos de datos 35

36 Pantallas de entrada y modificación de datos (II) Crear grupos lógicos (5-7 líneas) 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 Para instrucciones y máscaras Instrucciones delante de los controles a los que se refiere Máscaras a la derecha de los controles a los que se refiere Uso de grids Para introducir grandes cantidades de datos relacionados Encabezados de grid y columnas significativos, sin : Encabezado de columna justificado a la izqda para columnas con texto y dcha para columnas con número Encabezado de fila justificación izqda Organización de datos lógica Información similar junta Arriba la info más importante o más usada Organización cronológica o secuencial Fondos suaves Espaciado consistente entre filas y columnas Si hay más de 7 filas, insertar espacio en blanco cada 5 36

37 A partir de documentos referencia Organización a imagen de la referencia Etiquetas: abreviaciones, contracciones, posición consistente, alineamiento dcha Grupos lógicos según referencia Encabezados como en referencia, may o mixto Paso manual de un control a otro No hace falta diferenciar obligatoriedad 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 Pantallas de sólo lectura (I) Organización Mostrar información necesaria para realizar acciones, tomar decisiones y responder preguntas Agrupar lógicamente la información, la más frecuente arriba a la izquierda En caso de pantallas múltiples, la info más relevante en las primeras Balance visual mediante espacios y líneas 37

38 Pantallas de sólo lectura (II) Presentación de datos Dar a los datos estructura significativa Uso de separadores naturales (tipo hora, fecha, prefijo) Para strings de más de 5 caracteres y sin separación natural, usar bloques de 3-4 caracteres separados por espacio en blanco Pantallas de sólo lectura (III) Organización de datos Alineados en columnas Escaneo de arriba a abajo Justificación de datos Justificación izquierda de cadenas de texto Justificación derecha de listas de números Situaciones mixtas: sensación de escalera Muestra de datos No mostrar campos de valores nulos, 0s Combinar datos y etiquetas elefantes: 612 Vs 612 elefantes 38

39 Ejemplos Pantallas de sólo lectura (IV) Tablas Presentar/comparar grandes cantidades de datos Similar al caso del grid y justificación de datos No mayor al tamaño de una pantalla Resaltar una celda, columna o fila mediante contraste Cuidado en situación de bordes alrededor de celdas (legibilidad) 39

40 Operaciones en la web Pautas de escaneo 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 Uso de resúmenes Listas numeradas y no numeradas Presentación Resaltar conceptos importantes y palabras/frases con alto contenido informativo 40

41 Pautas de navegación Facilitar el escaneo Proporcionar múltiples capas de estructura Facilitar la navegación Respetar el deseo del usuario de abandonar Ayudar a los usuarios a re-orientarse Búsquedas: Problemas Entender lo que dice el usuario Formular la búsqueda Presentar resultados significativos 41

42 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 Permitir a los usuarios especificar la extensión de las búsquedas Uso de parámetros (palabras clave, frases, variantes) Uso de controles de búsqueda (campo de texto, checkboxes, listas, botones) Comprobación léxica Interfaces diferentes para búsqueda simple y avanzada Guiar y asistir (instrucciones, ayuda, wizard,etc) 42

43 Pautas de búsqueda: Refinamiento y ejecución Refinamiento progresivo Permitir al usuario controlar el tamaño del conjunto de resultados Búsqueda rápida (cantidad de items, lista preliminar de temas) Búsqueda refinada para mejorar los resultados Ejecución Activación mediante pulsación de botón o tecla En refinamiento, cambios en parámetros varían el resultado de la búsqueda Pautas de búsqueda: Presentación de resultados Meta 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 y la cantidad de elementos Presentación de resultados mediante lista textual concisa, ordenada Modificar secuencia o agrupar por atributo o valor Listados multipágina 43

44 Pautas de búsqueda: Páginas destino y páginas localizables Páginas destino: resumen y resaltar palabras clave Páginas localizables: título Contenido basado en texto Repetir palabras clave frecuentemente Diferente de otros títulos de página Sin resaltar nada, estilo mixto Que tenga sentido aun viéndolo fuera de contexto 44