1 Diseño Gráfico de la PantallaCRAP – contraste, repetición, alineación, proximidad Las Mallas (Grids) son esenciales para el diseño gráfico Otros conceptos de diseño visual: consistencia relaciones claves organizacionales claridad y legibilidad y navegacionales uso de imágenes apropiado nomenclatura familiar Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press 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.
2 CRAP Contraste Repetición Alineación ProximidadHacer 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
3
4
5 Original
6 Proximidad
7 Alineación
8 Contraste
9 Repetición
10 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 Formato de contenidos variables Message text in Arial 14, left adjusted Standard icon set Espacios entre componentes No Ok Separación entre componentes y borde de la ventana Componentes fijos
11 ? ! The file was destroyed No OkMessage text in Arial 14, left adjusted Standard icon set ? Do you really want to delete the file “myfile.doc” from the folder “junk”? No Ok Ok Cannot move the file “myfile.doc” to the folder “junk” because the disc is full. ! Apply The file was destroyed Cancel
12 Agrupamiento por espaciadoJerarquía de dos niveles sangrías contraste Lógica de flujo organizacional La alineación conecta los elementos visuales en una secuencia Agrupamiento por espaciado
13 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 mmm mmm Okay ! Help mmm mmm ? Tip of the day: Monday, Mar 12 Dismiss
14 Relacionar elementos de la pantallaGrupos por proximidad Alineación Espacio en blanco (negativo) Estructura explícita Mmmm: Mmmm: Mmmm:
15 Mala estructura explícitaTerrible 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 Webforms
16 No se fijaron en el orden y la organizaciónIBM's Aptiva Communication Center
17 Distribución sin ordenMullet & Sano
18 Arreglo de la distribuciónMullet & Sano
19 Tensión espacial Mullet & Sano
20 Aquí se usa la estructura explícita como apoyoMullet & Sano
21 El uso excesivo de efectos 3-d hacen que la ventana se vea innecesariamente amontonada WebForms
22 ¿Cómo se puede escoger algo si no se puede discernir entre un elemento y otro?GIF Construction Set Microsoft Access 2.0
23 Pistas de navegación Proveer de enfoque inicialEl orden debe seguir la secuencia del modelo conceptual del usuario
24 Se rediseñó la distribución utilizando alineación y agrupamientoMullet & Sano
25 La importancia del espacio negativo y la alineaciónMullet & Sano
26 La economía de los elementos visualesMinimizar 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 xxx: ____ MMMM NNNN NNNN MMMM xxx: ____
27 Se arregló la densidad excesiva de componentesMullet & Sano
28 Las Pestañas (Tabs) Una forma excelente de agrupar elementos relacionados Pero puede ser sobreutilizada
29 Claridad y legibilidadLos caracteres, símbolos y elementos gráficos deben ser fácilmente perceptibles y distinguibles Text set in Helvetica TEXT SET IN CAPITOLS Text set in Braggadocio Text set in Times Roman Text set in Courier
30 Claridad y legibilidadUso 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 Large Medium Small Large Medium Small Readable Design components to be inviting and attractive Unreadable Design components to be inviting and attractive
31 Claridad y legibilidadUso 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 Ilegible: Design components to be easy to interpret and understand. Design components to be inviting and attractive
32 Popkin Software’s System Architect
33 Por como se ven, estas opciones deberían ser muy importantes, pero no lo sonTime & Chaos
34 Estos ejemplos en gris son difíciles de leer, ¿porqué no hacerlos de una vez negros?Regional preferences in Windows 95
35 Esta orientación del texto es difícil de leerMicrosoft Word
36 Familia parcial de íconosUso 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
37 Distintos niveles de abstracciónMullet & Sano
38 Metáforas refinadas contra excesivamente literalesMullet & Sano
39 ¿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
40 Convenciones Formas familiares de usar componentes gráficosApropiado para usuarios casuales y expertos Se fundamenta en literatura computacional Se debe usar con cuidado en sistemas de demostración (tipo kiosko) Archivo Manipulación de la ventana Controles tipográficos estándar Barras de herramientas Pantallas WYSIWYG Menús tradicionales Menú de cascada Elemento de caja de diálogo Microsoft Powerpoint
41 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
42 Se muestra la funcionalidad básicaApple MacPaint & Macwrite, from mullet & Sano
43 Componentes y complejidad¿Cómo se puede reducir la navegación? Evitar rutas largas Evitar jerarquías profundas
44 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
45 Construyendo un grid Manteniendo la consistencia con el estilo de la GUI Ubicar componentes estándares – barra de título, controles de ventana, … 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.
46 Usando el grid Determinar relaciones, estructura navegacional EconomíaAsociar la estructura navegacional con el grid Economía Juntar dos ventanas en una Cortar ventana de sonido
47 Usando el grid Evaluar desplegando ejemplos actuales Economizar más vsDecida cual prefiere vs