Diseño Gráfico de la Pantalla

CRAP – contraste, repetición, alineación, proximidadLas Mallas (Grids) son esenciales para el diseño gráficoOtros conceptos de diseño visual:

consistencia relacionesclaves organizacionales claridad y legibilidady navegacionales uso de imágenes apropiadonomenclatura familiar

Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.

Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press

Saul Greenberg

CRAP

Contraste – Hacer que las cosas diferentes se vean diferentes– Resaltar los elementos dominantes– Opacar elementos no importantes– Crea dinamismo

Repetición – Repetir el diseño por toda la interfaz– consistencia– crea unidad

Alineación– Conecta visualmente los elements– Crea un flujo visual

Proximidad– Agrupar elementos relacionados– Separar los no relacionados

Robin Williams Non-Designers Design Book, Peachpit Press

Original

Proximidad

Alineación

Contraste

Repetición

Saul Greenberg

Mallas (Grids)

Líneas horizontales y verticales para ubicar los componentes de las ventanas

– Se alinean componentes relacionados

Organización– Contraste para elementos dominantes– Grupos de elementos por proximidad– Estructura organizacional– Alineación

Consistencia– Ubicación– Formato– Repeticón de elementos– Organización Separación entre

componentes y borde de la

ventana

Espacios entre componentes

No Ok

Message text in Arial 14, left adjusted

Standard icon set

Componentes fijos

Formato de contenidos variables

No Ok

Message text in Arial 14, left adjusted

Standard icon set

No Ok

Do you really want to delete the file “myfile.doc” from the folder “junk”?

?

Ok

Cannot move the file “myfile.doc” to the folder “junk” because the disc is full.

!

Apply

Cancel

The file was destroyed

Jerarquía de dos niveles•sangrías•contraste

Agrupamiento por espaciado

La alineación conecta los elementos visuales en una secuencia

Lógica de flujo organizacional

Saul Greenberg

Consistencia visual (repetición)

Consistencia interna– Los elementos siguen las mismas convenciones y reglas– Se usa un conjunto de mallas específicas para la aplicación

Consistencia externa– Se siguen convenciones de la plataforma y del estilo de interfaz– Utilizar mallas propias de la plataforma y de los componentes

Sólo desviarse de esto cuando haya un claro beneficio para el usuario

Warning

mmmm mmmmmm

Okay

!

Help

mmmm mmmmmm mmm

Okay

?

Tip of the day: Monday, Mar 12

mmmm mmmmmm

Dismiss

Saul Greenberg

Relacionar elementos de la pantalla

Grupos por proximidadAlineaciónEspacio en blanco (negativo)Estructura explícita

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Saul GreenbergWebforms

Terrible alineación – no hay flujo

Mal contraste – No se puede distinguir las etiquetas de color de los campos

editables

Mala repetición– Los botones no parecen botones

Mala estructura explícita– Los bloques compiten con la alineación

IBM's Aptiva Communication Center

No se fijaron en el orden y la

organización

Distribución sin orden

Mullet & Sano

Arreglo de la distribución

Mullet & Sano

Tensión espacial

Mullet & Sano

Aquí se usa la estructura explícita como apoyo

Mullet & Sano

El uso excesivo de efectos 3-d hacen que la ventana se veainnecesariamente amontonada

WebForms

¿Cómo se puede escoger algo si no se puede discernir entre un elemento y otro?

GIF Construction Set Microsoft Access 2.0

Saul Greenberg

Pistas de navegación

Proveer de enfoque inicial

El orden debe seguir la secuencia del modelo conceptual del usuario

Se rediseñó la distribución utilizando alineación y agrupamiento

Mullet & Sano

Saul Greenberg

La importancia del espacio negativo y la alineación

Mullet & Sano

Saul Greenberg

La economía de los elementos visuales

Minimizar el número de controles

Incluir sólo aquellos que son necesarios– Eliminar o relegar otros a ventanas secundarias

Minimizar el amontonamiento– De tal manera que no se oculte información

NNNN

MMMM

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

MMMM

NNNN

Se arregló la densidad excesiva de componentes

Mullet & Sano

Las Pestañas (Tabs)– Una forma excelente de agrupar elementos relacionados– Pero puede ser sobreutilizada

Saul Greenberg

Claridad y legibilidad

Los caracteres, símbolos y elementos gráficos deben ser fácilmente perceptibles y distinguibles

Text set in Braggadocio

Text set in Helvetica

Text set in Courier

TEXT SET INCAPITOLS

Text set in Times Roman

Saul Greenberg

Claridad y legibilidad

Uso apropiado de la tipografía– Sólo 1-2 tipos de letra (3 máximo)– Normales, itálicas, negritas– 1-3 tamaños máximo

LargeMediumSmall

LargeMediumSmall

Readable

Design components to be inviting and attractive

Design components to be inviting and attractive

Unreadable

Design components to be inviting and attractive

Design components to be inviting and attractive

Saul Greenberg

Claridad y legibilidad

Uso del tipo de letra– El tamaño en puntos– Espaciado de palabras y líneas– Longitud del renglón– Sangrías– Color

Legible

Design components to be inviting and attractive

Design components to be inviting and attractive

Ilegible: Design components to be easy to interpret andunderstand. Design components to be inviting and attractive

Popkin Software’s System Architect

Por como se ven, estas opciones deberían ser muy importantes, pero no lo son

Time & Chaos

Estos ejemplos en gris son difíciles de leer, ¿porqué no hacerlos de una vez negros?

Regional preferences in Windows 95

Esta orientación del texto es difícil de leer

Microsoft Word

Saul Greenberg

Uso de imágenes

Signos, íconos, símbolos– La correcto es escoger algo entre concreto y abstracto

El diseño de íconos es muy difícil– A excepción de los más familiares, siempre conviene

etiquetarlos

La posición de la imagen y su tipo siempre deben estar relacionados

– Uso de “familias” de imágenes

Uso consistente y relevante de imágenes

Familia parcial de íconos

Distintos niveles de abstracción

Mullet & Sano

Metáforas refinadas contra excesivamente literales

Mullet & Sano

¿Qué significan estas imágenes? • No hay etiquetas para los íconos• Curiosamente, una de las pestañas es un glosario que

las explica, ¿pero cual?

Novell GroupWise 5.1

Saul Greenberg

Convenciones

Formas familiares de usar componentes gráficos– Apropiado para usuarios casuales y expertos– Se fundamenta en literatura computacional– Se debe usar con cuidado en sistemas de demostración (tipo

kiosko)

Menús tradicionales Menú de cascada

Elemento de caja de diálogo

Barras de herramientas

Manipulación de la ventana

Controles tipográficos

estándar

Archivo

Pantallas WYSIWYG

Microsoft Powerpoint

Saul Greenberg

Cómo escoger los componentes apropiados

¿Qué componentes deben estar en la pantalla?– Acciones frecuentes

• Manipulación directa para actividades básicas• Botones/formas/barras de herramientas/herramientas especiales

para acciones frecuentes/inmediatas• Menús/ventana de propiedades para acciones menos frecuentes• Ventanas secundarias para acciones poco frecuentes

¿Cómo relacionar los componentes?– Organizar los elementos relacionados en “bonches” o grupos

Se muestra la funcionalidad básica

Apple MacPaint & Macwrite, from mullet & Sano

Saul Greenberg

Componentes y complejidad

¿Cómo se puede reducir la navegación?– Evitar rutas largas– Evitar jerarquías profundas

Saul Greenberg

Ejercicio

Rediseño Gráfico

Crear un grid enfatizando:– Consistencia visual – relationes entre

elementos de la interfaz – Señales de navegación – economía – legibilidad y disponibilidad – imagenes

Construyendo un grid1. Manteniendo la consistencia con el estilo de la GUI

• Ubicar componentes estándares – barra de título, controles de ventana, …

2. Decidir la distribución navegacional + epacios en blanco + legibilidad + tipografía

• El grid muestra la ubicación de componentes genéricos • Dichos componentes genéricos pueden tener sus propios grids.

Usando el grid3. Determinar relaciones, estructura navegacional

• Asociar la estructura navegacional con el grid

4. Economía• Juntar dos ventanas en una• Cortar ventana de sonido

Usando el grid5. Evaluar desplegando ejemplos actuales

6. Economizar más• Decida cual prefiere

vs