Diseño de Interfaces en Velneo 6.x (i)

El diseño de una interfaz

Dentro del mundo de los programadores, la mayoría de nosotros nos centramos principalmente en las funcionalidades, dejando a un lado la "presentación" o el diseño de la interfaz. Sin embargo, uno de los aspectos que más importa de una aplicación es su diseño.

Si trabajas cerca de algún diseñador, es posible que te suene la frase: “El diseño está en los detalles“. El problema quizás sea ese, que los programadores no siempre disponemos de tiempo para pararnos en esos detalles "visuales". No obstante, es muy importante diseñar sistemas que sean efectivos, eficientes, sencillos y amenos a la hora de utilizarlos. El objetivo final: minimizar errores, incrementar la satisfacción, disminuir la frustración y, en definitiva, hacer más productivas las tareas que rodean a personas y ordenadores.

Para el estudio de esta relación hombre-máquina existe una rama de la Psicología Aplicada que estudia la Interacción Persona-Ordenador (IPO), más conocida por su nombre en inglés Human-Computer Interaction (HCI) y su investigación lleva a la estandarización y mejora de la usabilidad, a la vez que aporta una variedad de herramientas y técnicas que ayudan a desarrollar mejores interfaces de usuario.

No voy a entrar en las diferentes teorías al respecto (hoy veremos una parte práctica…). El objeto de este artículo es compartir algunas interfaces que he realizado para aplicaciones en Velneo 6.x (algunas otras las iré publicando en sucesivas entregas) para aquel que quiera integrarlas en sus proyectos. De hecho, con esto cumplo con un compromiso adquirido con algunos de los alumnos de los cursos de Velneo que imparto en el vCenter.

Interfaz Ideas

Es un ejemplo de interfaz en Velneo 6.x desarrollado ya hace unos años, entre otros para Sarabi, el gestor de contenidos que sirve esta página. Es un diseño con menús tipo formulario y "doble bala".

Se caracteriza por la jerarquía de las opciones, estructuradas en tres niveles horizontales. Permite el acceso por teclado a toda la interfaz, reservando los números como teclas aceleradoras para el primer nivel, las letras "A-I" para el segundo, y para el tercer nivel toma las mismas que el segundo más el pulsado de Mayúsculas (Shift+A-I)

Además, permite combinar las funcionalidades (Menú / Incluir Menú) de modo que es el usuario el que decide en qué casos añadir un nuevo menú (Shift+Espacio) o cerrarlo (Shift+Esc).

Es totalmente integrable con las plantillas (únicamente cambia el sistema de menús). Adjunto además varios mapas para descargar y utilizar en el Almacén de Objetos.


Interfaz Ideas (Simba). Pulsa en la imagen para ampliar [+]




Interfaz Ideas (Sarabi). Pulsa en la imagen para ampliar [+]


Descargar Interfaz Ideas
Descargar Almacén de Objetos (1 tabla) para Interfaz Ideas

Interfaz AutoMSG

Este es otro ejemplo de interfaz en Velneo 6.x, desarrollado para una aplicación sencilla de mensajería para vehículos de flota, que envía los mensajes a través del sistema GPS. El equipo va totalmente integrado en los vehículos, de ahí que para el desarrollo de la interfaz se tomara la apariencia de un equipo más (su aprendizaje resulta más sencillo y familiar).

Fue desarrollada para una pantalla táctil con una resolución de 800x600, de ahí que los botones y rejillas sean de tamaño considerable (teniendo en cuenta el manejo con los dedos, en lugar del ratón).


Interfaz AutoMSG. Pulsa en la imagen para ampliar [+]

Descargar Interfaz AutoMSG

Mejorando la imagen con iconos

Uno de los elementos que más destacan dentro del diseño de aplicaciones son los iconos asociados a las diferentes opciones disponibles. Los iconos no son simples elementos decorativos, al contrario, son una parte esencial de los mecanismos de interacción de cualquier interfaz, y por ello deben ser diseñados y/o seleccionados con cuidado.

Existen multitud de librerías en Internet, no es objeto de este artículo repasarlas todas. Os dejo un enlace a una que me gusta especialmente, la librería Crystal Icons de Everaldo, con múltiples iconos ordenados por categorías (actions, apps, devices, filesystems o mymetypes) en múltiples tamaños (16x16, 22x22, 24x24, 32x32, 48x48, 64x64 y 128x128)


Samples de la librería Crystal Icons. Pulsa en la imagen para ampliar [+]

Everaldo Crystal Icons
Yellow Icons

Mainbar: Barra de herramientas principal

Para complementar los elementos gráficos de una aplicación en Velneo 6.x, las Barras de herramientas son un elemento muy importante. Aquí os dejo una Barra de herramientas de uso general con las principales opciones que son de utilidad en una aplicación. ;-)


Barra mainbar. Pulsa en la imagen para ampliar [+]

Descargar Mainbar

vSaludos
Fran Abad

Más info:

Descargas de este artículo (*Disponibles en la sección de Descargas)
Descargar Interfaz Ideas
Descargar Almacén de Objetos (1 tabla) para Interfaz Ideas
Descargar Interfaz AutoMSG
Descargar Mainbar

Otros enlaces de interés
Guías de estilos visuales para el interfaz de plantillas
Interacción Persona Ordenador (IPO)

Librerías de iconos
Everaldo Crystal Icons
Yellow Icons