diseño gráfico de la pantalla crap – contraste, repetición, alineación, proximidad las mallas...
TRANSCRIPT
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