PRINCIPIOS DE BUEN DISEO DE PANTALLAS

02/04/2006

DAI

Qu quieren ver los usuarios?

Apariencia clara y ordenada Indicacin obvia de lo que se muestra y lo que se debera hacer con l Informacin esperada situada donde debera estar Clara indicacin de qu se relaciona con qu, incluyendo opciones, encabezados, leyendas, datos, etc Idioma conocido Forma sencilla de descubrir qu hay en el sistema Clara indicacin de cundo una accin puede realizar un cambio permanente en los datos o sistema
02/04/2006 DAI

Qu hacen los usuarios al interactuar con una pantalla?

Identificar una tarea a realizar o necesidad a cubrir Decidir cmo 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
02/04/2006 DAI

Metas del diseo 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 tecnologas
02/04/2006 DAI

Significado y propsito de la pantalla

Todos los elementos de la pantalla ..

Controles Texto Organizacin de pantalla nfasis Colores Grficos Animaciones Mensajes Cualquier forma de retroalimentacin

deben:

Tener significado para los usuarios Servir para realizar tareas

02/04/2006

DAI

Organizar elementos de pantalla

Los usuarios se acostumbran a cualquier cosa

02/04/2006

DAI

Ordenacin de Datos y Contenidos

Dividir informacin en unidades que sean lgicas, significativas y sensatas Organizar en funcin del grado de interrelacin entre datos e informacin Proporcionar ordenacin de unidades de pantalla de informacin y elementos priorizados segn las expectativas de usuario y sus necesidades Posibles esquemas de ordenacin: secuencia de uso, frecuencia de uso, funcin, importancia, de lo general a lo especfico Formar grupos que cubren todas las posibilidades Asegurar que toda la informacin a comparar es visible al mismo tiempo Asegurar que slo se muestra informacin relativa a las tareas o necesidades de los usuarios

02/04/2006

DAI

Por dnde empezamos?

Parte de la pantalla Trayectoria de rastreo

02/04/2006

DAI

Navegacin y flujo de pantalla

Proporcionar ordenacin de la informacin y elementos de forma que:

Gue al ojo del usuario Favorece movimientos naturales Minimiza distancias entre puntero y movimiento de ojos

Situar los elementos y controles ms importantes y usados con mayor frecuencia arriba a la izquierda Ayudar en la navegacin mediante:

Alineacin de elementos Agrupamiento de elementos Uso de bordes de lnea Crticos Importantes Secundarios Perifricos

Dirigir la atencin hacia tems:

02/04/2006

DAI

Navegacin y flujo de pantalla

Flujo arriba-abajo, izquierda-derecha Situar botones de comandos al final de la secuencia ordenada Cuando se deba mostrar informacin relacionada por separado, hacer separaciones naturales o lgicas Conjunto de ventanas en orden lgico informativo
02/04/2006 DAI

Movimiento natural del ojo

De zonas oscuras a zonas claras De objetos grandes a pequeos De formas inusuales a formas comunes De colores de alta saturacin a colores de baja saturacin
02/04/2006 DAI

Por qu de arriba abajo?

Movimientos de ojo entre tems ms cortos Movimientos de control entre tems ms cortos Percepcin de agrupamientos ms obvia Cuando los ojos se van de la pantalla y vuelven, se vuelve a la posicin en que se dej aun cuando se busque el siguiente tem de la secuencia (tipo punto de fijacin con nombre- anchor- en HTML)
02/04/2006 DAI

Composicin visual agradable

La que posee las siguientes cualidades:

Balance Simetra Regularidad Predictibilidad Secuencialidad Economa Unidad Proporcin Simplicidad Agrupamiento

02/04/2006

DAI

Balance

02/04/2006

DAI

Simetra

02/04/2006

DAI

Regularidad

02/04/2006

DAI

Predictibilidad

02/04/2006

DAI

Secuencialidad

02/04/2006

DAI

Economa

02/04/2006

DAI

Unidad

02/04/2006

DAI

10

Proporcionalidad

02/04/2006

DAI

Simplicidad

02/04/2006

DAI

11

Ejemplo de mal diseo

02/04/2006

DAI

Diseo mejorado: Agrupamiento

02/04/2006

DAI

12

Agrupamiento
Proporciona asociaciones funcionales de elementos Crear agrupamientos espaciales con alrededor de 5 grados de ngulo de visin Refuerzo visual:

Separacin adecuada entre grupos Lneas de borde entre grupos

Proporcionar ttulos significativos para cada grupo

02/04/2006

DAI

Diseo mejorado: Agrupamiento mejorado

02/04/2006

DAI

13

Grupos separados por espacios en blanco

Proporciona separacin adecuada entre grupos a travs del uso libre de espacios en blanco En pginas web, hay que tener en cuenta entre la zona en blanco y el scrolling que ello requiere

02/04/2006

DAI

Grupos separados por bordes

Usar para: Centrar la atencin sobre la informacin del grupo Guiar el ojo a travs de una pantalla Variacin de grosor y estilos de lneas Crear lneas consistentes en altura y longitud Dejar suficiente espacio entre la informacin y los bordes Alineamiento de fronteras de grupos En diseo web: Ser precavido en el uso de lneas horizontales como separadores de secciones Guardar lneas horizontales para situaciones en las se deba enfatizar las diferencias entre reas adyacentes

02/04/2006

DAI

14

Ejemplo agrupamiento sin bordes

02/04/2006

DAI

Ejemplo agrupamiento con bordes

02/04/2006

DAI

15

Grupos usando fondos

Usar fondo que contraste con el resto de la pantalla Usar tcnicas de alto contraste o nfasis para componentes de pantalla a los que queremos dirigir la atencin del usuario
02/04/2006 DAI

MXIMA: Trabajar con un sistema debera ser tan poco doloroso que deberamos trabajar casi sin darnos cuenta

02/04/2006

DAI

16

Estilo visual en Diseo de Pginas Web

Mantener un estilo consistente y visualmente unificado a travs de las pginas 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
02/04/2006 DAI

Cantidad de informacin
Presentar la cantidad de informacin adecuada para la tarea

Muy poca es ineficiente, mucha es confuso

Presentar toda la informacin necesaria para realizar una accin o tomar una decisin en la pantalla cuando sea posible Restringir los niveles de densidad de pantalla o ventana a no ms del 30%
02/04/2006 DAI

17

Tamao de pgina web

Minimizar el tamao de la pgina

Restringir a dos o tres pantallas de informacin

Situar informacin crtica e importante arriba de forma que siempre se vea al abrir la pgina

En los primeros 10 cms de la pgina

02/04/2006

DAI

Pginas largas o cortas?

Para encontrar informacin especfica rpidamente enlaces en pginas cortas Para comprender conceptos sin interrupcin con enlaces internos Para imprimir la mayora del contenido tener una versin en una pgina muchos

Una pgina

Una nica pgina o

Para conexiones lentas y no hay necesidad de todas las pginas al mismo tiempo pgina tipo ndice con enlaces a pginas cortas

02/04/2006

DAI

18

Scrolling y paginacin
Scrolling

No puede ocultar la finalidad de la pgina Evitar scrolling horizontal Minimizar el scrolling vertical En caso de scrolling vertical
Proporcionar estructura de fin de pgina nica y consistente Proporcionar claves contextuales que orienten al usuario

Paginacin

Visin de pginas completas Crear una segunda versin del sitio web donde los contenidos se vean por pginas
02/04/2006 DAI

Diferenciacin
Diferenciacin 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 botn Mostrar elementos adyacentes con suficiente contraste.
02/04/2006 DAI

19

Foco y nfasis (I)

Enfatizar visualmente los elementos ms importantes, prominentes y centrales Usar tcnicas de nfasis como:

Mayor brillo Polaridad inversa o video inverso Fuente mayor y distintiva Subrayado Parpadeo Color contrastante Tamao mayor Posicionamiento Aislamiento Forma distintiva o inusual Espacio en blanco

02/04/2006

DAI

Foco y nfasis (II)

Quitar el nfasis de elemento poco importantes Evitar:

Enfatizar demasiados elementos Usar demasiadas tcnicas de nfasis Pantalla catica

En diseo de pginas web:

Llamar la atencin al contenido nuevo o modificado El fondo de pantalla no puede ocultar el texto
02/04/2006 DAI

20

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 tcnicas para conseguir aspecto tridimensional

02/04/2006 DAI

Tcnicas de apariencia 3D (I)

Solapamiento Sombras Resaltar Encoger o agrandar Bordes a distinto nivel Cambio de textura
02/04/2006 DAI

21

Tcnicas de apariencia 3D (I)

Cambio de color Cambio de tamao Cambio de claridad Colocacin vertical Cambio de espaciado Cambio de movimiento
02/04/2006 DAI

Presentar informacin de manera simple y significante

Proporcionar inteligibilidad (diferenciacin) Proporcionar legibilidad (identificar, interpretar y amigabilidad) Presentar informacin de manera usable (traducciones, enlaces a referencias adecuadas) Usar propiedades de contraste Crear lneas visuales (implcitas o no) para guiar al ojo Ser consistente en apariencia y uso
02/04/2006 DAI

22

Tipografa
Usar fuentes sencillas, comunes No usar ms de dos familias, compatibles en grosor de lnea, tamao de letras maysculas, etc

Asignar un propsito diferente a cada familia Permitir el dominio de una familia

02/04/2006

DAI

Fuentes
NO ms de 3 tamaos diferentes Sistemas grficos

12pts menus, 10 pts ventanas 12-14 pts cuerpo, 18-36 ttulos y encabezados

Web

Espaciado: 1-1.5 el tamao de fuente No ms de 2 estilos de la misma familia

Itlica para llamar la atencin Negrita para llamar la atencin o crear jerarqua

No ms de 2 pesos

Subrayado en web para enlaces de navegacin

02/04/2006 DAI

23

Maysculas-minsculas
Maysculas:

Ttulo Encabezado de (sub)seccin Mensajes de aviso Palabras o frases con fuente pequea Datos Texto Mensajes de informacin Instrucciones Descripciones de men, botones y controles de seleccin Leyendas de control

Mixto

Minsculas

mucho cuidado!!

02/04/2006

DAI

Diseando elementos de pantalla

02/04/2006

DAI

24

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

02/04/2006

DAI

Campos de datos
Campos editables

Caja de lneas Caja de polaridad inversa

Slo lectura

Datos directamente sobre el fondo

Enfatizarlos visualmente
02/04/2006 DAI

25

Campos de datos: ejemplo

02/04/2006

DAI

Etiquetas vs Campos de datos

Diferenciarlos

Contraste de intensidad, columnas separadoras, cajas, etc Relaciones fsicas 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 mltiples

Etiqueta sobre la columna de campos

02/04/2006

DAI

26

Justificacin de etiquetas/campos de datos

Enfoque 1

Justificacin izquierda tanto de etiquetas como de campos 1 espacio en blanco entre la etiqueta ms larga y la columna de campos Justificacin izquierda de los campos y derecha de etiquetas Dejar espacio en blanco entre ambos grupos
02/04/2006 DAI

Enfoque 2

02/04/2006

DAI

27

02/04/2006

DAI

02/04/2006

DAI

28

02/04/2006

DAI

02/04/2006

DAI

29

02/04/2006

DAI

02/04/2006

DAI

30

Encabezados

02/04/2006

DAI

Encabezado de seccin
Encabezado significativo que describa la relacin de los controles agrupados Situar los encabezados de seccin sobre los controles de pantalla relacionados

02/04/2006

DAI

31

Encabezado de seccin
Alternativamente, situarlos en la esquina superior izquierda del borde que rodee al grupo Todo en maysculas o mixto e intensidad normal Etiquetas indentadas respecto del comienzo del encabezado
02/04/2006 DAI

Subsecciones y columnas
Texto significativo Situar a la izqda de columnas de campos asociados y arriba en columnas de grupos de campos asociados Separacin encabezado/etiquetas mediante smbolo separado 1 y 3 espacios respectivamente Alineacin izquierda o derecha Intensidad normal y mayscula

02/04/2006

DAI

32

Encabezado de grupo de campos

Texto signficativo, centrado sobre el grupo Uso de lnea de borde Maysculas, intensidad normal o may-min si se usa fuente o estilo diferente

02/04/2006

DAI

Encabezado de pgina web

De grupos de controles: como controles De pgina y texto

Textos significativos Jerarqua de fuentes, estilos y tamaos en funcin de la importancia del contenido Menor cantidad de estilos y tamaos posible No mezclar indiscriminadamente (o evitar la mezcla de) niveles de encabezado
02/04/2006 DAI

33

Instrucciones al usuario
Situar precediendo a la parte o partes de la pantalla a las que aplique la instruccin Usar nico estilo y color, may-min mixto Posicin visual: Justificacin izquierda Etiquetas indentadas, texto con mnimo de 3 espacios a la derecha Dejar lnea en blanco entre las instrucciones y los controles o textos correspondientes

02/04/2006

DAI

Mscaras
Situar a la derecha del control de entrada de texto relacionado Mostrar entre parntesis y con estilo nico En caso de controles situados en columna

Suficientemente lejos para no perjudicar la legibilidad Suficientemente cerca para no perder la asociacin

Alineamiento izquierda en una misma columna recomendado

02/04/2006

DAI

34

PAUTAS DE ORGANIZACIN Y ESTRUCTURACIN

02/04/2006

DAI

Pantallas de entrada y modificacin de datos (I)

Organizacin

Lgica y clara Informacin usada con mayor frecuencia, as como la informacin requerida: al principio y en las primeras pantallas Alineacin izqda-dcha; posicin consistente respecto a los campos de datos
02/04/2006 DAI

Etiquetas

35

Pantallas de entrada y modificacin de datos (II)

Crear grupos lgicos (5-7 lneas) Para entradas de datos:

Distribuirlos convenientemente en las diferentes pantallas, ventanas y grupos Identificar si la informacin es opcional u obligatoria Identificar la informacin obligatoria con una nica fuente o smbolo Instrucciones delante de los controles a los que se refiere Mscaras a la derecha de los controles a los que se refiere

Para instrucciones y mscaras

02/04/2006

DAI

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 nmero Encabezado de fila justificacin izqda Organizacin de datos lgica

Informacin similar junta Arriba la info ms importante o ms usada Organizacin cronolgica o secuencial

Fondos suaves Espaciado consistente entre filas y columnas Si hay ms de 7 filas, insertar espacio en blanco cada 5

02/04/2006

DAI

36

A partir de documentos referencia

Organizacin a imagen de la referencia Etiquetas: abreviaciones, contracciones, posicin consistente, alineamiento dcha Grupos lgicos segn 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 mscaras Que se rellene de izqda a dcha y disposicin como en referencia SE DEBE PODER RELLENAR SI MIRAR LA PANTALLA
02/04/2006 DAI

Pantallas de slo lectura (I)

Organizacin

Mostrar informacin necesaria para realizar acciones, tomar decisiones y responder preguntas Agrupar lgicamente la informacin, la ms frecuente arriba a la izquierda En caso de pantallas mltiples, la info ms relevante en las primeras Balance visual mediante espacios y lneas

02/04/2006

DAI

37

Pantallas de slo lectura (II)

Presentacin de datos

Dar a los datos estructura significativa

Uso de separadores naturales (tipo hora, fecha, prefijo)

Para strings de ms de 5 caracteres y sin separacin natural, usar bloques de 3-4 caracteres separados por espacio en blanco

02/04/2006

DAI

Pantallas de slo lectura (III)

Organizacin de datos

Alineados en columnas Escaneo de arriba a abajo

Justificacin de datos

Justificacin izquierda de cadenas de texto Justificacin derecha de listas de nmeros Situaciones mixtas: sensacin de escalera

Muestra de datos

No mostrar campos de valores nulos, 0s Combinar datos y etiquetas

elefantes: 612 Vs 612 elefantes

02/04/2006

DAI

38

Ejemplos

02/04/2006

DAI

Pantallas de slo lectura (IV)

Tablas

Presentar/comparar grandes cantidades de datos Similar al caso del grid y justificacin de datos No mayor al tamao de una pantalla Resaltar una celda, columna o fila mediante contraste Cuidado en situacin de bordes alrededor de celdas (legibilidad)
02/04/2006 DAI

39

Operaciones en la web

02/04/2006

DAI

Pautas de escaneo
Organizacin

Minimizar movimientos de ojos Agrupacin lgica de informacin Ttulo, encabezados significativos Prrafos cortos uni-idea y concisos De lo general a lo particular Agrupar informacin en tablas Uso de resmenes Listas numeradas y no numeradas Resaltar conceptos importantes y palabras/frases con alto contenido informativo
02/04/2006 DAI

Composicin

Presentacin

40

Pautas de navegacin
Facilitar el escaneo Proporcionar mltiples capas de estructura Facilitar la navegacin Respetar el deseo del usuario de abandonar Ayudar a los usuarios a re-orientarse
02/04/2006 DAI

Bsquedas: Problemas
Entender lo que dice el usuario Formular la bsqueda Presentar resultados significativos

02/04/2006

DAI

41

Pautas de bsqueda: conocer al usuario

Nivel de experiencia Anticipar

Tipos posibles de bsquedas Tipo de informacin solicitada Tipo de informacin a buscar Cantidad de informacin a mostrar

Planear acciones de los usuarios durante la bsqueda Estrategias de bsqueda flexibles

02/04/2006 DAI

Pautas de bsqueda: expresar la bsqueda

Qu

Integrar navegacin y bsqueda En funcin de las necesidades de usuario e informacin del sitio web

Dnde

En la pgina home En cada pgina

Cmo

Permitir a los usuarios especificar la extensin de las bsquedas Uso de parmetros (palabras clave, frases, variantes) Uso de controles de bsqueda (campo de texto, checkboxes, listas, botones) Comprobacin lxica Interfaces diferentes para bsqueda simple y avanzada Guiar y asistir (instrucciones, ayuda, wizard,etc)

02/04/2006

DAI

42

Pautas de bsqueda: Refinamiento y ejecucin

Refinamiento progresivo

Permitir al usuario controlar el tamao del conjunto de resultados Bsqueda rpida (cantidad de items, lista preliminar de temas) Bsqueda refinada para mejorar los resultados Activacin mediante pulsacin de botn o tecla En refinamiento, cambios en parmetros varan el resultado de la bsqueda
02/04/2006 DAI

Ejecucin

Pautas de bsqueda: Presentacin de resultados

Meta

Proporcionar lo que el usuario busca de forma fcilmente comprensible

Mostrar tambin los criterios de bsqueda Explicar la salida de la bsqueda y la cantidad de elementos Presentacin de resultados mediante lista textual concisa, ordenada Modificar secuencia o agrupar por atributo o valor Listados multipgina

02/04/2006

DAI

43

Pautas de bsqueda: Pginas destino y pginas localizables

Pginas destino: resumen y resaltar palabras clave Pginas localizables: ttulo

Contenido basado en texto Repetir palabras clave frecuentemente Diferente de otros ttulos de pgina Sin resaltar nada, estilo mixto Que tenga sentido aun vindolo fuera de contexto

02/04/2006

DAI

44