Cuando un usuario abre su aplicación de gestión para comenzar su trabajo, se encuentra con botones, menús emergentes, iconos y una serie de mensajes visuales con los que convive la jornada de trabajo e incluso el tiempo de ocio. Una buena aplicación no depende solamente de una impecable programación y una gestión efectiva de recursos… es vital diseñar para el usuario una aplicación con un aspecto visual e interactivo (denominado look and feel), que sea sencillo y agradable.A continuación, trataré de sintetizar lo más relevante del aspecto visual de la interface de una aplicación.Tipografía.
- Estilo. Es importante el uso de una tipografía de sistema con un tamaño no superior al que vemos en las aplicaciones de nuestro sistema operativo (10 pt sin negrita), es recomendable tomar ejemplo de los programas con interfaces que tiene éxito como dice la cita "Nada elimina más las telarañas creativas que inspirarse en el buen trabajo de otros". Las tipografías sin Serifa (San Serif) como la "Arial", "Tahoma", "Trebuchet" son una buena elección y funcionan perfectamente en pantalla. El uso abusivo de la negrita añade demasiado "exceso de tinta", para remarcar es mejor utilizar el recurso del tamaño de tipografía o el color que aportan más claridad.
- Tamaño. Tener en cuenta los tamaños de tipografía ayudará a que el usuario tenga una visión jerárquica con tan sólo un vistazo y sin leer absolutamente nada, facilitando así la comprensión. Un ejemplo de ello son los titulares con un tamaño de tipografía superior.
- Coherencia. Para conseguir una interface gráfica homogénea deberemos utilizar un mismo estilo de tipografía en la aplicación, quedando reservada el uso de otras en casos excepcionales (cajas de texto con código especial, previsualización de informes, etc...)
Espacio.
- Espacio en pantalla. Es importante tener en cuenta que todavía quedan muchos equipos con resoluciones bajas. Tanto si el desarrollo va a ser personalizado como estándar, es conveniente que diseñemos para que la aplicación también se visualice correctamente en todo tipo de monitores con resolución mínima 800x600.El uso de "diseños líquidos"; es decir que se adaptan a la resolución de la pantalla es la mejor opción.
- Espacio "en blanco" y alineación. Un alineamiento vertical correcto de campos de texto, menús y elementos de formularios proporciona un orden visual. Así mismo un uso de los espacios evitaran el exceso de ruido y creará equilibrio ayudando a la compresión de la composición.
Color.El color ayudará a diferenciar varios aspectos de la interface, pero es conveniente no utilizarlo de manera abusiva utilizando una paleta reducida y sin estridencias.
- Color en la tipografía. Para que la lectura en pantalla sea apropiada es necesario que existe un contraste correcto. El mayor contraste lo encontramos con la tipografía en negro y el fondo en blanco (muy utilizada para párrafos densos) y el contratipo fondo color negro y texto color blanco que ofrece menos contraste pero es aconsejable para definir menús y zonas específicas de herramientas.
- Color y fondo. El fondo con color ayuda a definir la composición en pantalla (utilizando cajas o formas) o los campos activos e inactivos. Lo correcto es utilizar colores de la gama de grises o pasteles, evitando así cansar la vista del usuario.
Iconos.Desde el punto de vista visual es aconsejable que los iconos sean coherentes en estilo. Existen multitud de sitios con colecciones de pago (enlace a sitios de iconos) y gratuitas donde podemos conseguir iconos de mucha calidad pero siempre con el mismo estilo.Imágenes.El uso de imágenes se debería reservar para personalizar la aplicación acorde al uso de destino (hostelería, peluquería, transporte, contabilidad…) añadiéndole una aspecto corporativo (imagen de empresa) si lo requiere. Detalles en las cabeceras de los formularios de introducción de contraseña, las rejillas o el splash son ejemplos donde el uso de imágenes de forma moderada personalizarán la aplicación.Teniendo en cuenta esta serie de pautas se podrán diseñar aplicaciones más agradables para el usuario. A continuación os señalo una relación de enlaces a modo de recursos y artículos que me han parecido interesantes donde poder explorar un poco más sobre la interface y el usuario.Interface y usuario.De la Acción-Objeto al Objeto-AcciónDiseño de formularios: conceptos básicosDiseño de formularios: Composición visualDiseño de formularios: etiquetasRecursos relacionadosIconos en Iconfactory (librería de iconos de pago)Everaldo Sock Icons (librería de iconos gratutitos)The Yellow Icon : Quality Freeware Icons For You (librería de iconos gratutitos)Colour contrast check (herramienta para comprobar contraste de la tipografía sobre fondo)
