PRINCIPIOS DE BUEN

DISEO DE PANTALLAS
RESUMEN

Curiel Anaya Arturo

Francisco Javier Donghu Federico

Contenido
DISEO DE PANTALLAS .................................................................................................... 2
usuarios ................................................................................................................... 2
Metas-Diseo de Interfaces ........................................................................................... 2
PANTALLA ................................................................................................................... 2
Elementos ................................................................................................................ 2
En la Ordenacin de datos ............................................................................................ 2
Navegacin en la pantalla. ............................................................................................ 3
Composicin Visual Agradable ..................................................................................... 3
ESTILO PAGINAS WEB ..................................................................................................... 5
Scrolling y paginacin .................................................................................................. 5
Foco y nfasis ........................................................................................................... 5
Informacin, Tipografa y fuentes. .................................................................................. 6
Encabezados ............................................................................................................. 7
PAUTAS DE ORGANIZACIN Y ESTRUCTURACION ..................................................................... 8
Organizacin ............................................................................................................. 8
Etiquetas ................................................................................................................. 8
Documentos de Referencia. .......................................................................................... 8
Pantallas de solo lectura .............................................................................................. 8
Pautas de escaneo ...................................................................................................... 8
Pautas de navegacin .................................................................................................. 9
Pautas de Busqueda .................................................................................................... 9

DISEO DE PANTALLAS
Actualmente al realizar una presentacion o una interfaz los desarrolladores y ponentes buscan la
manera correcta de atraer la atencin de su pblico o cliente haciendo presentaciones ms llamativas
con herramientas multimedia y colores que capten la atencin, a continuacin veremos unos principios
a tomar en cuenta cuando se est realizando una interfaz.

usuarios

Los usuarios buscan orden, indicaciones, informacion inmediata incluyendo opciones ,

encabezados, leyendas, datos, etc.
Un idioma conocido.
Metodos sencillos de conocer el sistema.
Facilidad de modificacion de datos
Al momento de interactuar los usuarios buscan identificar una tarea facilmente
o Manipular los controles
o Satisfacer sus necesidades.
o Buscar datos necnesarios.

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

PANTALLA
Elementos
o
o
o
o
o

Controles
Texto
Organizacin de pantalla
nfasis
Colores

o
o
o
o

Grficos
Animaciones
Mensajes
Cualquier forma de retroalimentacin

deben tener significado y servir

para las tareas

En la Ordenacin de datos
o
o
o
o
o

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

Navegacin en la pantalla.
o

o
o

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
Dirigir la atencin hacia tems:
Crticos
Importantes
Secundarios
Perifricos

Composicin Visual Agradable

Balance

Regularidad

Simetria

Predictibilidad

Secuencialidad

Unidad

Simplicidad

Economa

Proporcionalidad

Ejemplo de mal diseo

Ejemplo de agrupamiento usando bordes

ESTILO PAGINAS WEB

Para desarrollar una pgina web con un estilo aceptable para el usuario se debe 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 Informacin
o Situar informacin crtica e importante arriba de forma que siempre se vea al
abrir la pgina
Minimizar el tamao de la pgina
o Restringir a dos o tres pantallas de informacin

Scrolling y paginacin

Scrolling
o No puede ocultar la finalidad de la pgina
o Evitar scrolling horizontal
o Minimizar el scrolling vertical
o En caso de scrolling vertical

Proporcionar estructura de fin de pgina nica y consistente

Proporcionar claves contextuales que orienten al usuario
Paginacin
o Visin de pginas completas
o Crear una segunda versin del sitio web donde los contenidos se vean por pginas

Foco y nfasis
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

Informacin, Tipografa y fuentes.

Para mostrar una interfaz o una exposicin es necesario:

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

En la tipografa

Usar fuentes sencillas, comunes

No usar ms de dos familias, compatibles en grosor de lnea, tamao de letras maysculas, etc
o Asignar un propsito diferente a cada familia
o Permitir el dominio de una familia.
Maysculas:
o Ttulo
o Encabezado de (sub)seccin
o
Mensajes de aviso
o
Palabras o frases con fuente pequea
Mixto
o
Datos
o Texto
o
Mensajes de informacin
o
Instrucciones
o
Descripciones de men, botones y controles de seleccin
o
Leyendas de control

En las fuentes:

NO ms de 3 tamaos diferentes
Sistemas grficos
o 12pts mens, 10 pts ventanas
Web 12-14 pts cuerpo, 18-36 ttulos y encabezados
Espaciado: 1-1.5 el tamao de fuente
No ms de 2 estilos de la misma familia Itlica para llamar la atencin
No ms de 2 pesos Negrita para llamar la atencin o crear jerarqua
Subrayado en web para enlaces de navegacin.

Encabezados
Recomendaciones de encabezados en una pgina web.
o
o
o
o
o
o

o
o

Encabezado significativo que describa la relacin de

los controles agrupados
Situar los encabezados de seccin sobre los controles
de pantalla relacionados
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.
Encabezado de grupo de campos:
o Texto signficativo, centrado sobre el grupo
o Uso de lnea de borde
o
Maysculas, intensidad normal o may-min
si se
usa fuente o estilo diferente.
De grupos de controles: como controles
De pgina y texto
o
Textos significativos
o Jerarqua de fuentes, estilos y tamaos en funcin de la importancia del contenido
o Menor cantidad de estilos y tamaos posible
o No mezclar indiscriminadamente (o evitar la mezcla de) niveles de encabezad
Instrucciones al usuario:
o Situar precediendo a la parte o partes de la pantalla a las que aplique la instruccin
o Usar nico estilo y color, may-min mixto
o 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

PAUTAS DE ORGANIZACIN Y ESTRUCTURACION

Estas son algunas recomendaciones de la estructura de una pantalla o diseo de pagina web.

Organizacin
o Lgica y clara
o Informacin usada con mayor frecuencia, as como la informacin requerida: al principio
y en las primeras pantallas

Etiquetas
o Alineacin izqda-dcha; posicin consistente respecto a los campos de datos.

Documentos de Referencia.
o Organizacin a imagen de la referencia
o Etiquetas: abreviaciones, contracciones, posicin consistente, alineamiento dcha
o Grupos lgicos segn referencia
o Encabezados como en referencia, may o mixto
o Paso manual de un control a otro

Pantallas de solo lectura

o 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 lnea.

o Presentacion de datos.

Presentacin de datos Dar a los datos estructura significativa Uso de

separadores naturales (tipo hora, fecha, prefijo)

Para stringsde ms de 5 caracteres y sin separacin natural, usar bloques de 34 caracteres separados por espacio en blanco.
o Tablas.
Presentar/comparar grandes cantidades 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)

Pautas de escaneo
o

o
o

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

Pautas de navegacin
o
o
o
o
o

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.

Pautas de Busqueda
o

Qu
o Integrar navegacin y bsqueda
o
En funcin de las necesidades de usuario e informacin del sitio web
Dnde
o En la pgina home
o
En cada pgina
Cmo
o
Permitir a los usuarios especificar la extensinde las bsquedas
o
Uso de parmetros (palabras clave, frases, variantes)
o
Uso de controles de bsqueda (campo de texto, checkboxes, listas, botones)
o
Comprobacin lxica
o
Interfaces diferentes para bsqueda simple y avanzada
o
Guiar y asistir (instrucciones, ayuda, wizard,etc)
Meta
o
Proporcionar lo que el usuario busca de forma fcilmente comprensible Mostrar
tambin los criterios de bsqueda
o Explicar la salida de la bsqueda y la cantidad de elementos
o Presentacin de resultados mediante lista textual concisa, ordenada
Modificar secuencia o agrupar por atributo o valor
o Listados multipgina