Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Pantallas
Pantallas
02/04/2006
DAI
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
z z z
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
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
Controles Texto Organizacin de pantalla nfasis Colores Grficos Animaciones Mensajes Cualquier forma de retroalimentacin
deben:
02/04/2006
DAI
02/04/2006
DAI
z z z z
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
02/04/2006
DAI
Gue al ojo del usuario Favorece movimientos naturales Minimiza distancias entre puntero y movimiento de ojos
z z
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
02/04/2006
DAI
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
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
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
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
02/04/2006
DAI
02/04/2006
DAI
12
Agrupamiento
z z z
Proporciona asociaciones funcionales de elementos Crear agrupamientos espaciales con alrededor de 5 grados de ngulo de visin Refuerzo visual:
02/04/2006
DAI
02/04/2006
DAI
13
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
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
z z z z z
02/04/2006
DAI
14
02/04/2006
DAI
02/04/2006
DAI
15
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
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
z
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
Situar informacin crtica e importante arriba de forma que siempre se vea al abrir la pgina
02/04/2006
DAI
Para encontrar informacin especfica rpidamente muchos enlaces en pginas cortas Para comprender conceptos sin interrupcin Una pgina con enlaces internos Para imprimir la mayora del contenido Una nica pgina o tener una versin en una pgina 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
z
Scrolling
No puede ocultar la finalidad de la pgina Evitar scrolling horizontal Minimizar el scrolling vertical En caso de scrolling vertical
z z
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
z
z z
Etiquetas de botones no en los bordes del botn Mostrar elementos adyacentes con suficiente contraste.
02/04/2006 DAI
19
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
Llamar la atencin al contenido nuevo o modificado El fondo de pantalla no puede ocultar el texto
02/04/2006 DAI
20
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:
Solapamiento Sombras Resaltar Encoger o agrandar Bordes a distinto nivel Cambio de textura
02/04/2006 DAI
21
Cambio de color Cambio de tamao Cambio de claridad Colocacin vertical Cambio de espaciado Cambio de movimiento
02/04/2006 DAI
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
z z z
22
Tipografa
z
Usar fuentes sencillas, comunes No usar ms de dos familias, compatibles en grosor de lnea, tamao de letras maysculas, etc
02/04/2006
DAI
Fuentes
z z z z z z z
12pts menus, 10 pts ventanas 12-14 pts cuerpo, 18-36 ttulos y encabezados
Web
Itlica para llamar la atencin Negrita para llamar la atencin o crear jerarqua
No ms de 2 pesos
23
Maysculas-minsculas
z
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
02/04/2006
DAI
24
Etiquetas/Leyendas
z z z z z z z
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
z
Campos editables
Slo lectura
Enfatizarlos visualmente
02/04/2006 DAI
25
02/04/2006
DAI
Diferenciarlos
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
02/04/2006
DAI
26
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
z
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
z
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
z z
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
z z
02/04/2006
DAI
32
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
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
z z z
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
z z z
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
02/04/2006
DAI
34
02/04/2006
DAI
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
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
02/04/2006
DAI
Uso de grids
z z z z z
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
z z z
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
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
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
Presentacin de datos
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
Organizacin de datos
Justificacin de datos
Justificacin izquierda de cadenas de texto Justificacin derecha de listas de nmeros Situaciones mixtas: sensacin de escalera
Muestra de datos
02/04/2006
DAI
38
Ejemplos
02/04/2006
DAI
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
z
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
z z z z z
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
z
02/04/2006
DAI
41
Tipos posibles de bsquedas Tipo de informacin solicitada Tipo de informacin a buscar Cantidad de informacin a mostrar
z z
Qu
Integrar navegacin y bsqueda En funcin de las necesidades de usuario e informacin del sitio web
Dnde
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
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
Meta
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
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