El documento describe un proceso de 6 pasos para desarrollar una interfaz gráfica de usuario coherente. Los primeros pasos incluyen mantener un estilo visual coherente, construir la red de navegación y determinar las relaciones y estructura de navegación. Los pasos posteriores se enfocan en simplificar la interfaz colapsando ventanas duplicadas y recortando texto para ahorrar espacio. El proceso concluye evaluando ejemplos reales y eliminando elementos innecesarios para finalizar el diseño de la interfaz.
1. Una posible solución
Paso1. Mantener la coherencia visual con el estilo GUI
• componentes incluyen barra de título, los controles de las
ventanas, cuadros de diálogo ...
• Las localizaciones de algunos de estos componentes se
muestran en la cuadrícula en el siguiente paso.
Paso 2. Construir la red, incluyendo el diseño de navegación
+ espacio en blanco + legibilidad
• La imagen muestra ahora la red con anotaciones
Incluyendo donde irán los componentes genéricos (como
las barras de título y así sucesivamente). Algunos de estos
otros componentes genéricos pueden tener sus propias
redes
2. Layout general
Barra de título
Imagen en
columna vacía
Etiquetas de 1er
orden (Arial Bold 10pt)
Casillas de
verificación
Controles de 2do
orden (normal Arial 10pt)
Espaciado entre
grupos
controles de
cuadro de diálogo
3. Una posible solución
Paso 3. Determinar las relaciones, estructura de navegación
Paso 4. Economiza al colapsar (dos ventanas en una sola,
ajuste de texto)
• La imagen siguiente muestra el ejemplo que iniciamos
con la claridad de la estructura de navegación en la
cuadrícula, y que trata de economizar el colapso de
algunos de los elementos que están juntos (es decir, dos
ventanas colapsaron en una sola).
• También recortamos un poco de texto (esto es, el diálogo
de sonido)
5. Paso 5. Evaluar reconsiderando ejemplos reales
• Aquí está el ejemplo real con la cuadrícula retirada
6. Paso 6. Economice, cheque las imágenes
• Hemos eliminado el icono de imagen de la parte superior
izquierda, lo que nos permitió compartir la ventana. En
este momento, ya podemos decidir cual preferimos.