Consejos Para El Diseño De Interfaces De Usuario

El DiseñoDeInterfacesDeUsuario es un área sumamente amplia, en constante avance y mejora. A continuación algunos consejos para evitar errores comunes al momento de diseñar una interfaz de usuario (tanto para aplicaciones web como de escritorio).

Tamaño de los componentes

Existe la llamada "Ley de Fitts" que dice: "Mientras más grande y más cerca del puntero un objeto está, más facil es de hacerle click". Suena obvio, no?

Sin embargo, es facil ver que muchos formularios tienen el botón de "Cancelar" del mismo tamaño (o más grande!) que el botón "Aceptar". O la "lupa" de un buscador con el mismo tamaño que un icono de reset.

La mejor interfaz es la interfaz invisible

Tal cual. La mejor interfaz para el usuario es aquella en la cual el usuario no tiene que realizar ninguna acción para lograr lo que quiere. La mejor interfaz es, de hecho, la que no existe. El mejor sistema es aquel que funciona de manera tal que el usuario no tiene que interactuar con él.

Cuando empezamos a requerir interacción con el usuario es cuando comienzan las confusiones, dudas y contratiempos. Es cuando el usuario puede malinterpretar. Es, además, algo que el usuario tiene que aprender a hacer.

Como bien explica el video Don't make me click: la interfaz de una pala es su mango. ¿Y qué es mejor que una pala para le usuario? Un pozo ya terminado. Con los sistemas pasa lo mismo: si podemos brindar el resultado esperado, no nos endulcemos mostrando opciones por el solo hecho de que podemos.

Disminuir las interacciones al mínimo

Cuando sea necesario que el usuario interactue con el sistema, reducir estas interacciones al mínimo. Al usuario le importa un bledo todas las opciones y configuraciones que nuestro sistema pueda brindarles: el usuario no quiere usar nuestro sistema, sino que quiere un __resultado__ del mismo. Nadie va a Google porque le gusta hacer click en el botón "Buscar", o le resulta magicamente atractivo el logo del sitio. Vamos a Google para, justamente, irnos de alli (con la información que queriamos, si tenemos suerte). Cualquier interacción que Google me imponga en el medio se interpone entre lo que realmente necesito.

Hacer una buena interfaz es dificil

Hacer una buena interfaz de usuario es desafiante y dificil. No hay más vueltas, más que pensar y pensar. Prácticamente todos los sistemas pueden diseñarse con una mejor interfaz de usuario: no hacerlo es sólo un síndrome de facilismo (oculto bajo otras excusas muchas veces).

Orden y presentación de los campos

La información al usuario debe ser presentada en forma lógica. Agrupar campos similares es buena idea.

La presentación también deber ser lo más clara posible: apilar decenas de campos en una misma pantalla puede "intimidar" a quien lo usa, además de complicar la ubicación de un dato en particular (recuerden, mientras más información pongan en la pantalla, más va a distraer al usuario).

Como ejemplo me viene a la mente una herramienta web de atención al cliente que tuve que analizar, con pantallas con literalmente decenas y decenas de campos, todos apretujados para poder "entrar" en la misma página. ¿Se imaginan la primera vez que ven eso? Y peor aún, ¿cómo lo mantenemos si hay que modificar algo?

Consistencia en la presentación

Es importante para el usuario tener una interfaz lo más parecida posible entre diferentes aplicaciones. Visualmente, tenemos la hoja de estilos, que presenta los componentes "más o menos" de la misma manera.

Sin embargo, la ubicación de los mismos es importante también. Si tenemos un formulario, lo habitual para una aplicación web es contar con el botón de "Aceptar" abajo de todo.

Me viene a la mente nuevamente la misma aplicación de atención al cliente, donde los botones de confirmación se ubican en los lugares más originales posibles... U otra de nuestras creaciones (no recuerdo cual exactamente) que tenia 2 campos, un botón de aceptar... y luego, otros campos más... obligatorios! El usuario debía "saltar" por el formularios para poder completarlo con éxito.

Es importante que la aplicación "guie" al usuario a realizar su cometido, sin que que este necesite un mapa de ruta. ronaldinho

Uso correcto de los componentes visuales

Los formularios están formados básicamente por los siguientes componentes:

• campos de texto
• combos
• checkbox
• radios
• grillas de resultados

Cada componente tiene un comportamiento y utilidad particular. No es bueno jugar con JavaScript para cambiarle el comportamiento: esto confunde al usuario, que no puede saber de antemano cómo reaccionará el formulario.

Como anti-ejemplo, hay sistemas donde se intercalan formularios con botones de "consultar"... y otros donde simplemente hay algunos "Radios" que mágicamente disparan la acción (o peor, una serie de pantallas con solapas).

No utilizar más componentes de los necesarios

O dicho de otra manera, faciliten la vida del usuario: minimicen la cantidad de interacciones del usuario con el sistema. Mientras menos interacciones existan, habrá una menor probabilidad de equivocaciones...

Un ejemplo perfecto: pantallas con varios checkbox que son excluyentes entre si... ¿por qué no usar un grupo de radios? No solo le conviene al usuario ("comportamiento de componentes"), sino también nos facilita la vida a nosotros en tiempos de desarrollo y mantenimiento (menos validaciones y magia JavaScript).

Otro ejemplo con "sobre-uso" de componentes: campo de texto y un checkbox asociado que indica si se usa dicho campo de texto. ¿Qué necesidad de complicar el formulario de esta manera? Evidentemente, si el usuario desea utilizar el campo de texto, lo completará. Sino, lo dejará en blanco.

Nuevamente, no agreguen componentes que no son necesarios. Realicen una interfaz lo más minimalista posibe.

Valores predeterminados sensatos

Y esto aplica, creo yo, a gran parte de nuestros sistemas. Si el usuario va a completar un campo con cierto valor la mayor parte del tiempo, ¿por qué no cargarlo con un valor predeterminados? Así, en la mayoría de los casos, le evitaremos ingresar un dato.

Esta práctica se alinea con el lema "Hacerle la vida más fácil a nuestro usuario".

Ver también

• Diseño De Interfaces De Usuario
• Ley de Fitt en la Wikipedia
• Don't make me click (video - conferencia)