Menu

El diseño web en los programas de gestión #2

28 julio, 2015 - Arte y creatividad, Diseño & ASP.NET, Marketing, Sociedad Digital, Tecnología

Las reglas del buen diseño web en los programas de gestión

La semana pasada empezamos esta serie sobre el diseño web en los programas, como prometimos hoy volvemos con la segunda parte, en la que analizamos en profundidad las reglas de un buen diseño web, ¿preparados?

Cumple con la regla de oro y haz un diseño web “FUN”: (funcionalidad-usabilidad-navegabilidad)

Por encima de todo, están estos sencillos y a la vez magistrales principios que harán que tu trabajo con el programa, se convierta en una experiencia positiva.

Que un sitio web sea navegable, permite al usuario moverse por su estructura e identificar las diferentes secciones y contenidos de una forma sencilla, a la vez que intuitiva, con menús simples pero bien estructurados. Sin perderse.

Un programa tendrá un diseño web funcional, cuando el usuario pueda llevar a cabo un proceso concreto de forma clara, rápida y accesible, sin rodeos innecesarios, ni trampas. Si grabar el registro de un cliente, por ejemplo,  se puede hacer en dos pasos de forma segura y práctica, no obliguemos al usuario a realizar  5 pasos para alcanzar el mismo objetivo.

Por último no nos olvidemos de la usabilidad. El uso de los diferentes procesos, deben ser una buena experiencia para el usuario, para ello hay que facilitarle la vida: Usar colores que no alteren y cansen la vista; evitar procesos que impliquen periodos largos de espera; Permitir una interacción adecuada para evitar por ejemplo errores involuntarios; Conseguir que el usuario alcance un óptimo manejo del programa en el menor tiempo posible, etc.

Se coherente con el espacio y la composición estructural

En aras de la usabilidad, y aunque no pretendemos que tu interfaz se convierta en una obra de arte con estudios de ritmos y leyes de la sección dorada, si es importante que seas coherente en tu composición del contenedor corporativo.

En este aspecto, analizaremos unas cuantas características reseñables, partiendo de la base que el contenedor corporativo, está a su vez dentro de otro contenedor: el propio navegador.

El navegador, está diseñado para que los contenidos se muestren “cuan grandes son” a lo alto (con su barra de scroll), destinando una franja mínima (lo más pequeña posible) para el menú de opciones, y aprovechando al máximo el ancho que está totalmente vacío, en blanco.

Es decir, el navegador da el máximo protagonismo al contenido, y reduce al mínimo la propia estructura del navegador. Por lo tanto, es lógico pensar que si el diseño web estructural del navegador se ha hecho así, por algo será ¿no te parece?

Pues aunque te parezca ilógico, hoy por hoy, todavía se hacen programas que se empeñan en no aprovechar las características del navegador, y estructuran su contendor corporativo, bajo nuestro punto de vista, de forma errónea. Veamos dos ejemplos de estructuras. El primero  con un diseño poco agraciado, y el segundo con la máxima optimización. Tú mismo podrás juzgar.

Ejemplo 1

En este ejemplo, vamos a aunar prácticamente todos los fallos posibles en los que se puede incurrir a la hora de diseñar la estructura Web de una interfaz de usuario en un programa de gestión.

 

El diseño web en los programas de gestión

 

Este sería el esquema. Pero fíjate que se corresponde punto por punto, con el volcado de pantalla del programa real que se muestra a continuación. Os podemos asegurar, que el gráfico descargado en el volcado, no ha sido alterado lo más mínimo, a excepción de los contenidos que lógicamente han sido distorsionados para no incurrir en problemas de privacidad.

 

El diseño web en los programas de gestión

 

Empecemos con los errores destacables en el contenedor corporativo del diseño web:

 

Ejemplo 2

Con este segundo ejemplo, veremos como el contenedor corporativo subsana todos los errores que incurría el formato anterior. Veamos el esquema de su estructura.

 

El diseño web en los programas de gestión

 

El esquema que se muestra a continuación, se corresponde también al 100% con un programa real de gestión de vehículos:

 

El diseño web en los programas de gestión

 

Analicemos la estructura de este nuevo contenedor corporativo:

 

El diseño web en los programas de gestión

Para concluir este punto, vamos a sugerirte, a modo de resumen, un diseño de contenedor corporativo ideal. Evidentemente, esto es algo genérico, y a la larga, siempre tendremos que supeditarnos a las necesidades reales de cada programa, pero vale como idea base. Ahí lo dejamos.

La estética y el color del diseño web importa.

Como decíamos al principio del post, un diseño FUN, requiere de unos requisitos que provoque en el usuario del programa, una buena experiencia de su uso. Un interfaz amigable implica rotundamente en la usabilidad: experiencia, interacción, aprendizaje, etc.

¿Y qué podemos hacer para diseñar una interfaz amigable?

Parte del problema ya lo hemos resuelto diseñando un buen contenedor corporativo, pero ahora nos toca hablar del contenido, y es en esa parcela donde entra a jugar la estética y el color.

La cabecera, a estas alturas, ya se habrá ocupado de mostrar la parte corporativa de la empresa: logotipo, eslogan, etc. Pero ahora nos vamos a centrar en el contenido propiamente dicho: en el cuerpo del contenedor corporativo. Y como una imagen vale más que mil palabras, nos serviremos de nuevo de los dos ejemplos vistos anteriormente para explicarte mejor el uso del color y la estética.

El ser humano procesa la información que ve, mucho más rápido de lo que imaginamos. Si crees que lo que lees, se va procesando de forma secuencial y pareja, estás muy equivocado. El cerebro va muy por delante de la lectura de nuestras letras.

Por esa misma razón, el cerebro procesa de forma automática la relación entre los colores y  determinadas acciones.

Puedes hacer una prueba.  Toma la hoja de un periódico y dibuja un pequeño círculo de color rojo en la parte menos significativa o importante. Esté donde esté, la vista se irá irremisiblemente hacia el círculo rojo, como un aviso de atención. ¡El rojo implica atención, peligro…!

Y podemos aprovechar esas circunstancias para mejorar la experiencia del usuario con nuestro programa.

Es muy conveniente hacer uso de los colores para que el usuario identifique determinadas acciones con ellos, Botones de acción en el diseño webgeneralmente con el uso de botones de acción:

De los dos ejemplos que vimos antes, el diseño del primero de ellos es monocromático e invariablemente gris. Lo que cuesta mucho más al usuario procesar el contenido. Por el contrario, en el ejemplo nº 2, podemos ver que el contenido dispone de botones con colores verdes y azules. El usuario rápidamente asimila esos colores con acciones comunes a lo largo de todos los contenidos, lo que hará posible un mejor aprendizaje, aprovechamiento del tiempo y menos cansancio al requerir menos atención de proceso.

Nosotros no vamos a inventar ahora las acciones que suelen llevar implícitas el uso de determinados colores. Ya existen convencionalismos que lo hacen posible. Tú lo único que tienes que hacer es seguirlos.

A continuación te mostramos los más usados:

 

El diseño web en los programas de gestión

 

En el programa del ejemplo 2, los botones que permiten cambiar el contenido de un registro de la Base de Datos, y que por lo tanto implica una importante ACCIÓN, se muestran en color verde, mientras que en la parte superior, aparece otro botón que ejecuta la búsqueda de unos criterios previamente seleccionado, lo que implica la ejecución de una tarea INFORMATIVA.

Una acción que implicara, por ejemplo el borrado de un registro de la Base de Datos, debería ser rojo, mientras que para botones o iconos de navegabilidad, movimiento u otras tareas neutras, podrían utilizarse el color gris.

Colores como el naranja o el amarillo, se suelen utilizar para acciones o tareas de AVISO o ALERTA sin la contundencia del rojo, al que se considera como ALARMA.

Hay más colores que puedes utilizar. Ahí queda tu imaginación y sentido común para utilizarlos con lógica y criterio dentro de tu interfaz de usuario.

Respecto a la estética, no cabe duda que en un programa de gestión, el contenido nos viene impuesto. No es lo mismo que cuando hablamos de un diseño publicitario. En un programa, tendremos datos tabulados, informes, botones, gráficas estadísticas…, en una palabra, poco margen para la estética y para el diseño. Aun así, siempre hay hueco para esto, y como en las acciones, los colores y la concepción espacial tienen su protagonismo.

Te voy a poner un simple ejemplo de cómo se puede emplear la estética en beneficio de la usabilidad. Imagina que nuestro programa gestiona entre otros, clientes, proveedores y usuarios, y en algún momento de la gestión se muestran los datos en estructuras  tabuladas.

Si utilizamos distintos colores para distinguir las diferentes tablas, al poco tiempo de usar el programa, el usuario tendrá una clara y rápida percepción de estar trabajando con clientes y no con proveedores, pues asociará ese colectivo al color correspondiente.

El programa real del ejemplo nº 2 que hemos seleccionado para mostrarte las bondades de un buen diseño de programa, utiliza esta técnica estética para diferenciar entre los tipos de operativa. Concretamente el menú de opciones, diferencia tres áreas: Gestión, Administración y Opciones, y a cada una le asigna un color. Gestión -> Verde; Administración -> Fucsia y Opciones -> Naranja.

Así mismo, todos los contenidos relacionados con dichas áreas, mantienen la misma convención de colores. De esta forma, el usuario reconoce sin duda alguna en que parte del proceso se encuentra y a qué área se está dedicando.

 

El diseño web en los programas de gestión

 

Y no olvides otro detalle importante para conseguir optimizar el diseño FUN: Indica siempre al usuario en donde está en cada momento. Fíjate en el gráfico anterior como la barra de título indica que el usuario se encuentra en el área de Administración, y dentro de ésta, en el proceso de Clientes.

Por último, no podemos dejar este capítulo del color y la estética sin hacer mención al estilo iconográfico. Ya hablamos un poco al respecto en el post que trataba del diseño Web.

Los iconos son representaciones gráficas que tienen la gran cualidad de ir al centro de la atención de usuario como el dardo a la diana. ¡Gran invento el de los iconos!

Y ¿Cómo podemos aprovechar estos maravillosos dibujillos en nuestros programas de gestión?, te preguntarás. Pero eso amigo/a, te lo dejamos a tu criterio. Sin embargo, sí que podemos orientarte un poquito: ¿Recuerdas lo que decíamos de los botones que ejecutan acciones?

Destacábamos las ventajas de los botones coloreados frente a los monocromáticos, pero además, si incluyen un logotipo, el resultado es aún mejor. Mira el siguiente ejemplo y juzga por ti mismo.

 

El diseño web en los programas de gestión

 

El primer botón (el clásico de toda la vida de Windows), no destaca de la importante acción que va a realizar: Borrar algo. Es exactamente igual que cualquier otro que tenga a su lado cuya acción seguramente será de grabar o de cancelar. Son tres acciones muy diferentes y por esa razón, deberían disponer al menos, de un código de atención por medio de colores que los diferenciara ¿no te parece?

Sin embargo, los siguientes botones, sitúan al usuario claramente en el contexto de la acción que puede realizar al pulsar sobre ellos, ya que el color rojo le alerta de que conlleva riesgo.

Bueno, con esto finalizamos el post, y como siempre te dejo la moraleja: “El diseño juega un papel muy importante en las interfaces de usuario, y nunca has de tomarlo a la ligera”

Por último, os recordamos que existen muchísimos recursos en Internet en forma de librerías de uso público que puedes utilizar y que seguro te vendrán fenomenal  a la hora de preparar tu diseño web para un programa  😉 y no dudes en echar un vistazo a otra de nuestras series sobre la evolución del diseño web.

Esperamos que os haya gustado esta serie sobre el diseño web en los programas y sobre todo, que os haya sido de utilidad. ¿Os queda alguna duda? ¿Alguna vez os habéis enfrentado a esa dicotomía entre diseño y pura utilidad?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *