Cinco pautas para diseñar una buena interfaz de usuario

“Usabilidad“, “diseño limpio“, “keep it simple”, “experiencia de usuario“… Cada vez son más los conceptos que inevitablemente inundan nuestra mente a la hora de tener en cuenta las características de un producto o servicio. Sin embargo, todas ellas van enfocadas a la misma finalidad: lograr una buena interfaz de usuario. Sencilla a la vez que completa y personalizada. Crear una interfaz de usuario eficaz puede llegar a ser más complejo de lo que parece.

Sin embargo, jamás debemos ignorar este aspecto, ya que podría significar la diferencia entre el éxito o el fracaso de nuestro producto. Además, una buena interfaz de usuario premiará a los desarrolladores con unos altos índices de conversión, y al usuario con una mayor facilidad de uso. Es decir, todos contentos. Pero, ¿qué debemos tener en cuenta a la hora de desarrollar nuestra interfaz? Podemos resumir las pautas clave en 5 apartados:

1. Sencillez, claridad y concisión

Debemos tener siempre como objetivo crear una interfaz sencilla que pueda ser utilizada de manera intuitiva. Cuantos menos manuales de instrucciones tengan que leer nuestros usuarios, mejor que mejor. Orden, jerarquía y metáforas visuales son algunos de los elementos que nos ayudarán a clarificar las funciones de nuestro producto o servicio.

Por otro lado, debemos evitar a toda costa la ambigüedad. Encontrar en una misma web la misma función o otras similares repetidas varias veces puede desconcertar al visitante (¿pero cómo contacto con éste proveedor, en el botón “llámanos”, o en el de “contacta con nosotros”?). Por eso, es recomendable unificar todas estas funciones en una sola.

Y es que no hay nada peor que una pantalla atiborrada de opciones. Pensemos en los productos o servicios más exitosos de la red. Sin ir más lejos, Google es el claro ejemplo del éxito de una interfaz concisa y minimalista.

Google interfaz usuario

Sin embargo, tampoco debemos caer en el error de simplificar demasiado las acciones. El sitio de diseño web 99desings pone como ejemplo de este error el caso de Gmail, que en su última actualización, cambió su navegador superior, el cual contaba con varias opciones de texto que permitían acceder a varios servicios de Google con un solo clic, por un solo icono bastante confuso, en el cual se agrupan ahora todas ellas. El resultado fue negativo, ya que la mayoría de los usuarios no encontraban el icono y Gmail empezó a recibir un aluvión de solicitudes de ayuda.

Gmail aplicaciones boton

La explicación a esto es sencilla. Los usuarios, por la propia naturaleza humana, tienden a evitar e ignorar las cosas que no entienden. Diseñar elementos de la interfaz cuya función no está clara no es una buena idea, porque nadie suele molestarse en averiguarlo. Encontrar el equilibrio entre la claridad y la concisión es sin duda lo más complicado de una buena interfaz de usuario.

2. Familiaridad y contextualidad

Esta podría ser una solución a los errores similares al que cometió Gmail: utilizar botones que hagan referencia al mundo real, o utilizando conceptos ya existentes. Por ejemplo, utilizar un incono de un disquete como botón de “Guardar”. Se trata de algo que nació como metáfora del mundo real y que ha acabado convirtiéndose en una convención muy fuerte y arraigada, a pesar de que ya nadie use disquetes.

De igual manera, el usuario espera ver los controles de interfaz cerca del objeto que quiere cambiar. Seguro que en más de una ocasión has intentado editar tu nombre de usuario en Facebook haciendo clic sobre él, al igual que haces, por ejemplo, para cambiar la foto de portada, y has descubierto que para modificarlo debes realizar una serio de acciones menos intuitivas (dirigirte al menú superior, pinchar en “configuración”, “configuración de la cuenta”, encontrar “nombre” y seleccionar “editar”). En LinkedIn, por ejemplo, solo hay que pinchar en el lápiz que aparece al lado del nombre. En resumen, podemos decir que al igual que en la vida real, los usuarios esperan ver los elementos de la interfaz en el contexto del objeto que quieren controlar. ¿O acaso es necesario bajar al sótano para utilizar el microondas, o ir a la cocina para tirar de la cisterna del retrete?

3. Interactividad o “feedback”

El usuario se sentirá más seguro si tiene información clara y constante. Esto proporciona la sensación de control y hace al usuario confiar en el producto para volver a utilizarlo. Debemos procurar que nuestra interfaz parezca “viva”, que responda a las acciones del usuario, que le informe claramente de lo que está haciendo bien y que, de igual manera, le advierta de sus errores y le ofrezca soluciones para remediarlos (un buen botón de “Deshacer” o el típico “Restaurar configuración inicial”).

4. La importancia de las funciones estándar

Según 99designs, el usuario raramente cambia las opciones predeterminadas de un producto o servicio. Pone como ejemplo un suceso curioso a la par que divertido: el archiconocido tono de llamada de Nokia (sí, aquel que se convirtió en el tono de llamada de la mayoría de los usuarios de teléfonos móviles en la década pasada). Se trataba del tono de llamada predeterminado, y efectivamente, casi nadie lo modificó.

De igual manera, la mayoría de los usuarios conserva el fondo de pantalla predeterminado de su teléfono móvil, las opciones de fábrica en los ajustes de su televisión, y la temperatura que venía de serie en su frigorífico. Por ello, es importante asegurarnos de que las opciones predeterminadas son lo más útiles y prácticas posibles.

5. Posición y colores de las acciones

Debemos tener muy en cuenta los lugares clave para situar los botones o enlaces hacia determinadas acciones. Por ejemplo, si utilizas PayPal, te habrás fijado en que el botón de pago en la página final del proceso de compra aparece tanto al principio como al final de la información de facturación. El principio y el final del contenido son dos puntos clave para situar elementos que inviten a realizar acciones importantes (comprar un producto, suscribirse a un servicio, etc.)

Colores botones

Otro punto importante a la hora de diseñar los botones de las acciones es el color. Mientras que para las áreas de mayor tamaño de tu web o aplicación debes tratar de utilizar colores neutros (huye del negro como color de fondo, no queda tan profesional y tan “guay” como tu creías), debes hacer todo lo contrario para resaltar las acciones. Utiliza colores llamativos y de alto contraste, ¡pero no cualquiera! Estos deben ser usados teniendo en cuenta la familiaridad de la que hablamos en el segundo punto. Por ejemplo, el rojo indica alerta o peligro, mientras que el amarillo o el naranja llaman la atención del usuario pero con menos urgencia. El verde indica continuidad de una acción, y el azul refleja tranquilidad y estabilidad. Si necesitas más información acerca de la psicología de los colores, puedes consultar este artículo o echar un ojo a esta infografía.

Y tú, ¿qué aspectos tienes en cuenta a la hora de desarrollar la interfaz de usuario?
 


Compartir en :


Noticias relacionadas




Comentarios