Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

Elaborar la Experiencia de los Mensajes de la Interfaz de Usuario

by
Length:MediumLanguages:
This post is part of a series called UX Foundations.
Defining And Applying Personas to UX Design
Applying Fitts’ Law To Mobile Interface Design

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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:


Crédito 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:


Fuente para validar campos de formulario.

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 Poniéndote 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 imagen

El 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.
dealotto confirmation

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.
Vimeo signup validation

37signals creó este mensaje en forma de artístico tablero blanco para sugerir a los usuarios qué deben hacer cuando no tienen proyectos:

basecamp blank slate

No obstante, No Abrumes a Tus Usuarios

¿Te has encontrado alguna vez una interfaz que intenta llamar tu atención a cada instante? Emplea todas las convenciones disponibles, ventanas modales, mensajes integrados en el contenido y en la parte superior de la página para intentar que hagas algo concreto.

Ser demasiado directo, obvio o insistente puede provocar un resultado no deseado; hacer que el usuario abandone la interfaz.

Overwhelming form errors
No permitas que el diseño de un mensaje de error se convierta en un abrumador mar de alarmas y notificaciones.

Este ventana modal suele aparecer cuando intentas leer una noticia en el Huffington Post por primera vez. Puede resultar confuso para los usuarios, ya que podrían pensar que es necesario entrar en Twitter para leer el artículo.

Huffington Post Twitter modal

Proporciona Guía Adicional

Cuando estés mostrando un mensaje, ya sea una notificación o sobre un error, siempre será útil proporcionar consejos adicionales o ayuda al usuario. Esto es especialmente cierto en el contexto de los fallos del sitio web, en muchas ocasiones son inevitables, pero podemos hacer cosas para que las molestias de la experiencia sean mínimas.

Vimeo proporciona útiles guías de introducción hacia otras secciones, acompañadas con su correspondiente enlace de acceso en la parte inferior:

Vimeo 404

Un pequeño icono de ayuda dentro de tu formulario podría ser muy útil:

Ticket Trunk Help
Crédito.

Este “tooltip” de ayuda va un poco más allá, en él se incluye un enlace que puede seguir el usuario para ampliar la información:


Formulario de Postmark. Fuente.

Invisionapp proporciona un útil tip que se muestra mientras la imagen se está cargando:

El Arte de la Anticipación

El diseño de un buen mensajes de feedback se basa en su anticipación. En lo que entendemos por anticipación cabe lo siguiente:

  • Cómo se sentirá el usuario.
  • Qué hará el usuario.
  • Qué tipo de errores están inclinados a cometer.
  • Escenarios en los que apelas a la paciencia de los usuarios.
  • Situaciones en las que intentas salvar una causa perdida.

Kicksend advirtió que algunos de sus usuarios no estaban verificando sus emails. Analizaron sus datos y descubrieron que sencillamente estaban escribiendo mal sus direcciones de email, cometer errores tipográficos bastante habituales. Por eso, diseñaron un plugin jquery, mailcehck.js que comprobase las erratas más comúnmente cometidas por los usuarios al introducir sus emails. Con esta sencilla comprobación, redujeron el rebote en los envíos de emails de verificación en un 50%:

Fab.com anticipó que algunos de sus usuarios cancelarían sus cuentas. En este caso intentaron subsanar una causa perdida enviando este mensaje cuando tú, como usuario, intentas cancelar una cuenta:

En ocasiones anticiparse a ciertas situaciones suele funcionar como un salvavidas:

tumblr unfinished post

O puede ayudar a recuperar una venta que podría potencialmente darse por perdida:

Threadless cart item is running out

La clave está en los pequeños detalles. Esta pantalla de inicio de sesión en Gmail se anticipa al preveer que posiblemente te hayas olvidado que cambiaste hace poco tu contraseña:

gmail forgot password

Más inspiración de Gmail; estoy seguro de que esto le ha resultado útil a muchas personas, simplemente se anticipa y nos avisa de un error que cometemos con mucha frecuencia, olvidarnos de adjuntar los archivos:


Crédito.

Los indicadores de progreso son mensajes muy importantes en las interfaces de usuario. Foursquare diseñó un sutil mensaje para informar a los usuarios sobre su ubicación y los sitios interesantes que pueden encontrar alrededor mientras se carga la información. Con esto cumplen dos objetivos.

  1. Te solicita un poco de paciencia mientras se termina de cargar la página.
  2. Y al mismo tiempo te informa que está realizando operaciones en segundo plano mediante el análisis de tus datos.
  3. .

TeuxDeux se anticipa advirtiendo que la sincronización es importante para la lista de tareas del usuario y por tanto te avisa con divertidas notificaciones cuando se pierde la conexión:


Crédito.

Existen muchos otros ejemplos sobre cómo anticiparse y construir “defensas” para la interfaz de tus usuarios.

Introducir Humor y Emoción

Ya hemos mencionado con anterioridad que es importante ponerse en el lugar de los usuarios. Minimizar su frustración es crucial y está en nuestras manos ir un poco más allá. Muchos usuarios permanecen frente a la pantalla durante largas horas. Al mostrar empatía o introducir un poco de humor, convertirás una situación frustrante o monótona en algo potencialmente entretenido.

Este despedazado robot te hace sonreir, ¿verdad?

Si quieres ver más buenos ejemplos de páginas 404, puedes visitar esta colección de Pinterest. Pero además de los errores, incluso las más simples notificaciones pueden hacerte sonreír en una larga jornada:

hootsuite feedback

Muchos de nosotros luchamos por mantener una bandeja de entrada vacía, pero quizá merece más la pena en el caso de Gmail:

Gmail inbox zero

Este mensaje de Buffer usa un poco la adulación y el humor para aumentar las suscripciones:


Crédito.

Otro mensaje de notificación que probablemente provocará una sonrisa en tu cara por su texto:


Crédito.

Esta excelente presentación de Aaron Walter, director de diseño en Mailchimp, es una buena iniciación al concepto de Diseño Emocional para aquellos que estéis interesados en aprender más sobre el tema.

Conclusión

Espero que este repaso sobre cómo crear mensajes para tu interfaz de usuario te haya resultado útil. He incluido aquí abajo recursos adicionales para que puedas leer y explorar más sobre este tema. El diseño de este tipo de mensajes no es una cuestión de blanco o negro, se trata más bien tener empatía, de crear experiencias y por supuesto, del feedback de los usuarios.

No temas hacer varios cambios hasta conseguir el tono adecuado en tus mensajes. Pide opinión a la gente, empieza comunicando al usuario el mensaje principal, y si funciona, intenta introducir un poco de humor o emoción para mejorar el conjunto de la experiencia. ¡Intenta siempre ser útil!

Pregunta cualquier duda en la sección de comentarios. El feedback siempre es bienvenido y además nos ayuda a escribir mejores artículos para todos vosotros en Tuts+.

Artículos Relacionados

Libros Destacados

Patrones de Diseño

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.