El diseño visual de controles, información y contenido influye en que tan facil de comprender es su aplicación, asi como lo bien que se ve. Es importante reconocer que el diseño visual tiene un fuerte impacto en cuanto trabajo esta implicado en usar una aplicación - diseños pobres resultan en que usuarios tengan que poner un esfuerzo adicional, mientras que buenos diseños requieren menos esfuerzo.
Seguir estos lineamientos de diseño visual le ayudara a producir una aplicación que sea agradable, fácil de comprender y eficiente de usar.
Un punto de alineación es una línea imaginaria vertical u horizontal a través de su ventana que toca el borde de una o más etiquetas o controles en la ventana. Minimice el número de estas: cuantas menos existan, más limpio y simple aparecerá su diseño, y más fácil de entender será para las personas.
Alinee el contenido y controles en su diseño con exactitud. El ojo es muy sensible para alinear y desalinear objetos. Si los elementos visuales no se alinean, sera difícil para algunos el analizarlos. Los elementos que no se alinean por completo serán motivo de distracción.
Sea consistente. Use la misma cantidad de espacio siempre.
Organice controles e información relacionada en grupos, y use espacio para diferenciarlos. Esto hace una interfaz mucho más fácil de leer y entender.
Como regla de oro, deje espacio entre los elementos en incrementos de 6 píxeles, aumentando hasta que la relación entre los elementos relacionados se vuelva mas distante.
Entre las etiquetas y componentes asociados, deje 12 píxeles horizontales.
Para espaciado vertical entre grupos de componentes, 18 píxeles es adecuado.
Se recomienda un espacio de 18 píxeles entre el contenido de una ventana de diálogo y el borde de la ventana.
Sangre los elementos 12 píxeles para resaltar la jerarquía y la asociación.
Evite usar marcos con bordes visibles para separar grupos de controles: use el espaciado y las cabeceras en su lugar.
Espaciado y alineación incorrectos:
Espaciado y alineación correctos:
Espaciado correcto, con unidades (píxeles):
Si es posible, justifique las etiquetas a la derecha (vea el diagrama a continuación). Esto evitará vacíos grandes entre las etiquetas y sus controles asociados. Este tipo de justificación a la derecha no es posible si ha sangrado los controles: en este caso, se debe usar la justificación a la izquierda en su lugar.
Organice los elementos visuales de arriba a abajo y de izquierda a derecha. Esta es la dirección en que la gente de occidente tiende a leer una interfaz, así los elementos en la parte superior izquierda se encontrarán primero. Este orden da jerarquía a las interfaces: aquellos componentes que se ven primero se percibe que tienen prioridad sobre aquellos que vienen después. Por esta razón, deberá colocar los controles dominantes arriba y a la izquierda de los controles y contenido que ellos afectan. Los encabezados son un patrón de diseño clave en este sentido.