Diseñar mensajes de interfaz eficaces e intuitivos para los usuarios (“user friendly”) es un arte en sí mismo. Mientras los diseñadores invierten mucho tiempo creando en bloque el conjunto de la interfaz del usuario, el diseño de los mensajes suele ser algo en lo que se piensa a posteriori o de forma tardía. Las respuestas de la interfaz, la retroalimentación que proporciona, es lo que liga al usuario con ésta; sin ella, los usuarios podrían sentirse confusos.
Tipos de mensajes
Antes de profundizar más, quizá deberíamos ver ejemplos de mensajes de respuesta de UI (interfaz de usuario) extraídos de la vida real:
Mensajes web
El mensaje de error con el que te encontrarás más frecuentemente es el mensaje “404 página no encontrada”. Este mensaje aparece cuando un usuario teclea accidentalmente una URL equivocada, una página que no existe o que ya no está disponible.
Los mensajes de fuera de servicio se dan cuando el servidor se “cae”, suele suceder ocasionalmente y de forma imprevista:
Mensaje para fuera de servicio de Tumblr.
En otras ocasiones esta inactividad está programada o prevista:
Imagen de no disponibilidad programada.
La famosa ballena del mensaje de no disponibilidad por mantenimiento de Twitter.
Estos mensajes están diseñados para notificar un resultado al usuario después de que este haya realizado una determinada acción:
En este caso, Versions le indica al usuario que se ha iniciado su descarga y que podrá encontrarla en su carpeta de descargas:
Un mensaje en forma de ventana emergente recuerda a los usuarios que verifiquen su dirección de email:
Zootool emplea una página entera para solicitar al usuario la verificación de su email antes de permitirles continuar:
Y este agradece a los usuarios la verificación:
Mensajes de formulario
Los mensajes en los formularios son también muy frecuentes. El ejemplo más habitual se produce durante la validación, cuando un usuario envía un formulario, un script comprueba que no haya habido ningún error.
Pueden usarse mensajes de formulario originales, no tienen porque aparecer solo para comunicar un error. También se pueden usar en forma de breves indicaciones que expliquen cómo se deben cumplimentar:
Indicador de fortaleza de una contraseña.
Este es un ejemplo de un mensaje que aparece tras rellenar un formulario con éxito:
Mensajes de aplicación
La frontera entre la web y las aplicaciones nativas es cada vez más difusa. Muchas aplicaciones web están diseñadas para comportarse como aplicaciones nativas. Por ejemplo, 750words.com muestra un mensaje mediante una ventana emergente o “pop-up” cuando haces uso de un atajo de teclado para guardar una entrada:
También puedes diseñar mensajes que aparezcan en áreas muy visibles para propiciar que lo usuarios realicen determinadas acciones. Twitter.com informa a los usuarios siempre que tienen una actualización:
Diseñar mensajes para la interfaz de los dispositivos móviles constituye un nuevo reto debido al poco espacio disponible; los mensajes deben ser muy obvios.
Un mensaje de estado de una app.
De nuevo, si aparecen en el momento adecuado, los mensajes pueden diseñarse para funcionar como tips de ayuda o aclaración:
Los mensajes de interfaz de usuario también pueden funcionar como guía.
También pueden usarse como medios para animar a que los usuarios completen una tarea:
Crédito.
Reflexiona y ponte en el lugar del usuario
Necesitamos ponernos en los zapatos de nuestros usuarios. ¿Qué quieres que sientan cuando visitan tu web o usan tu aplicación? Seguramente te gustaría que sintiesen que pueden confiar en ti y sería un extra que pudiesen sentirse encantados mientras usan y navegan por tu web. Si no reflexionas bien el diseño de tus mensajes, podrías provocar mucha frustración y desencanto.
La mayoría de los usuarios visitan una web o usan una aplicación para lograr un objetivo. Para descubrir más sobre una empresa, para adquirir un producto, para realizar una tarea con una aplicación, etc. Por ejemplo, imagínate en el lugar del usuario que intenta comprar algo en una web. ¿Cómo se sentirá el usuario si no sucede nada tras hacer clic sobre «Añadir al carrito»? Deberían existir señales o mensajes que indiquen qué ha ido mal durante la ejecución de una acción:
Ejemplo de mensaje de error bien destacado mientras se añade un producto al carrito.
Otro escenario podría darse cuando un usuario está intentando completar una tarea importante en tu web. Quizás el usuario podría estar intentando pagar el alquiler a través de la web de un banco de la que tú te encargas. ¿Imaginas la angustia, la frustración y la preocupación que sentiría si la web dejase de funcionar de repente en mitad de la operación?
crédito de la imagenEl anterior mensaje de error falla a la hora de identificar su origen, lo que potencialmente producirá frustración en el usuario que esté intentando completar su transacción.
Mejores prácticas
Consideremos algunas buenas prácticas en las que el feedback y los mensajes están involucrados.
Sé tan específico como te sea posible
Este mensaje de Dealotto es una buena muestra de cómo es posible ser simple y a su vez específico:
- Barra verde en la parte superior como los típicos mensajes de estado.
- Icono visual para reforzar el mensaje acompañado de un titular apropiado.
- Indica al usuario que existen un número determinado de pasos.
- Mensaje en letra pequeña para transmitir más información e indicar qué acciones realizar a continuación.
Sé tan obvio como te sea posible
Nadie echará de menos los errores de validación en este formulario de suscripción de Vimeo:
- Representación con colores fuertes.
- Los mensajes de cada campo de formulario están señalados con una flecha triangular.
37signals creó este mensaje en forma de artístico tablero blanco para sugerir a los usuarios qué deben hacer cuando no tienen proyectos:
Lo que te queda por leer:
No obstante, no abrumes a tus usuarios
Proporciona guía adicional
El arte de la anticipación
Introducir humor y emoción
Artículos relacionados
- Errores 404 más útiles (en inglés)
- Validación de formularios: el enfoque de los errores (en inglés)
- ¿Por qué no pueden ser divertidos los errores? (en inglés)
- Validación en línea de formularios (en inglés)
- Validación de formularios web: mejores prácticas y tutoriales (en inglés)
- La Capa de la Personalidad (en inglés)
- ¿Cuál es la página de error 404 más útil que has encontrado? (en inglés)
Deja una respuesta