Share
Diseñar mensajes de interfaz de usuario efectivos y amigables es una forma de arte en sí misma. Si bien los diseñadores dedican mucho tiempo a crear la mayor parte de la interfaz de usuario principal, el diseño de mensajes puede parecer una idea posterior. La retroalimentación es en realidad el pegamento entre el usuario y la interfaz; Sin ella, los usuarios pueden confundirse..
Antes de continuar, quizás deberíamos echar un vistazo a ejemplos de la vida real de los mensajes de retroalimentación de UI:
El mensaje de error más común que encontrará es el mensaje 404 página no encontrada. Esto sucede cuando un usuario ha escrito accidentalmente la URL incorrecta o la URL anterior ya no es accesible.
Los mensajes de tiempo de inactividad del sitio web ocurren cuando el servidor se desactiva literalmente, a veces inesperadamente:
Hay instancias cuando está programado:
Estos mensajes están diseñados para notificar al usuario de un resultado después de haber realizado una acción:
En este caso, Versiones le dice al usuario que su descarga ha comenzado y se puede encontrar en su carpeta de descargas:
Un mensaje común en la parte superior del sitio que recuerda a los usuarios que deben verificar su correo electrónico:
Zootool usa una página completa para decirle al usuario que verifique sus correos electrónicos antes de permitirles continuar:
Y este agradece a los usuarios por verificar:
Los mensajes de formulario se encuentran regularmente también. Los ejemplos más comunes se experimentan durante la validación, lo que ocurre cuando un usuario envía un formulario en el que un script comprueba si se han producido errores:
Puede haber algún uso creativo de los mensajes de formulario, puede que no necesariamente aparezcan solo por errores. Podrían usarse como una guía ingeniosa que ayuda al usuario a completar un formulario:
Este es un ejemplo de un mensaje que aparece después de que un formulario se haya completado correctamente:
Las líneas entre la web y las aplicaciones nativas son cada vez más borrosas. Muchas aplicaciones web están diseñadas para comportarse como una aplicación nativa. Por ejemplo, 750words.com tiene un mensaje emergente similar a un gruñido cuando usa un atajo de teclado para guardar una entrada:
También puede diseñar mensajes para que aparezcan en áreas bien posicionadas para alentar a los usuarios a realizar acciones adicionales. Twitter.com informa a los usuarios que tienen actualizaciones:
El diseño de mensajes para las interfaces móviles es otro desafío debido al factor de forma pequeña; los mensajes tienen que ser obvios.
Nuevamente, si está bien programado, se puede diseñar un mensaje para que actúe como una sugerencia:
También se puede utilizar como una forma de aliento para que el usuario complete una tarea:
Necesitamos ponernos en la piel de nuestros usuarios. ¿Qué desea que sientan cuando visitan su sitio web o usan su aplicación? Usted querría que sintieran que pueden confiar en usted y que sería una ventaja adicional si realmente se sintieran encantados al usar su sitio web. Si no hay suficiente pensamiento en el diseño de sus mensajes, podría causar mucha frustración y decepción..
La mayoría de los usuarios visitan un sitio web o usan una aplicación para completar un objetivo definido. Para obtener más información sobre una empresa, comprar un producto, realizar una tarea utilizando una aplicación, etc. Por ejemplo, imagínese como un usuario que intenta comprar algo en un sitio web. ¿Te imaginas cómo se sentiría el usuario si no pasara nada después de hacer clic en "agregar al carrito"? Tiene que haber señales adecuadas que indiquen dónde ha fallado una acción:
Otro escenario sería un usuario que intenta completar una tarea importante en su sitio web. Tal vez el usuario podría estar tratando de pagar el alquiler a través de un sitio web financiero en línea que usted está a cargo. ¿Te imaginas el miedo, la frustración y la preocupación si el sitio web deja de funcionar de repente en medio de una transacción financiera??
El mensaje de error anterior no identifica el origen del error, lo que puede frustrar al usuario que intenta completar una transacción..
Consideremos algunas de las mejores prácticas en lo que respecta a comentarios y mensajes.
Este mensaje de Dealotto es una buena demostración de que es simple pero específico:
Nadie se perderá estos errores de validación en este formulario de registro en Vimeo:
37signals creó este mensaje de pizarra en blanco para que los usuarios tengan una idea de qué hacer cuando no tienen elementos:
¿Alguna vez te has encontrado con una interfaz que está tratando de obtener cada centímetro de tu atención? Utiliza todas las convenciones de UI disponibles, ventanas modales, mensajes en línea, mensajes de la parte superior de la página para intentar que hagas algo..
Ser demasiado obvio o incesante puede resultar en el efecto contrario; El usuario se da por vencido en la interfaz..
Esta ventana modal solía aparecer cuando intentaba leer un artículo de noticias de Huffington Post por primera vez. Podría ser confuso para los usuarios que pueden haber pensado que Twitter era necesario para leer el artículo..
Al mostrar un mensaje, ya sea por un error o una notificación, siempre será útil proporcionar consejos o ayuda adicionales al usuario. Esto es especialmente cierto en el contexto de los errores del sitio, muchas veces son inevitables pero podemos hacer que la experiencia sea lo menos dolorosa posible..
Vimeo proporciona guías útiles para otras secciones, con un enlace de ayuda en la parte inferior:
Pequeños íconos de ayuda dentro de tu formulario pueden ser increíblemente útiles:
Esta información sobre herramientas de ayuda va un poco más allá, incluido un enlace en el que el usuario puede hacer clic para obtener más información:
Invisionapp proporciona una sugerencia útil al mostrar la imagen de carga:
Diseñar buenos mensajes de retroalimentación tiene que ver con la anticipación. Esto incluye anticipar:
Kicksend notó que algunos de sus usuarios no estaban verificando sus correos electrónicos. Analizaron sus datos y encontraron que simplemente estaban escribiendo las direcciones de correo electrónico incorrectas por errores tipográficos comunes. Por lo tanto, diseñaron un complemento jquery, mailcheck.js para verificar errores tipográficos comunes cuando los usuarios completan sus direcciones de correo electrónico. Con un cheque tan simple, redujeron los rebotes de verificación en un 50%:
Fab.com anticipó que algunos de sus usuarios cancelarían sus cuentas. Aquí intentan salvar una causa perdida al proporcionar este mensaje cuando intenta cancelar una cuenta:
A veces, anticipar escenarios puede ser un salvavidas:
O puede ayudar a recuperar una venta potencialmente perdida:
Se trata de los pequeños detalles. Esta pantalla de inicio de sesión de Gmail anticipa que puede haber olvidado que ha cambiado su contraseña:
Más inspiración de Gmail; Estoy seguro de que esto ha sido útil para innumerables personas al anticipar un error de usuario común, como olvidarse de adjuntar archivos:
Los indicadores de progreso son una forma importante de mensajes de UI. Foursquare diseñó un mensaje sutil para informar a los usuarios que están obteniendo su ubicación y encontrando lugares interesantes mientras se cargan los datos. Esto logra un doble objetivo..
.
TeuxDeux anticipa que la sincronización es importante para una lista de tareas pendientes y advierte a un usuario que la conexión a Internet se está perdiendo con una notificación de humor:
Hay un montón de otros ejemplos sobre cómo anticipar y construir “defensas” para su interfaz de usuario.
Anteriormente mencionamos que es importante pensar en nombre del usuario. Minimizar su frustración es crucial e incluso podemos ir un paso más allá. Muchos usuarios se enfrentan a una pantalla durante largas horas. Al mostrar empatía o inyectar algo de humor, convierte un escenario frustrante o mundano en uno potencialmente divertido..
Este robot roto te hace sonreír, ¿verdad??
Para más buenos ejemplos de 404 páginas, puede consultar esta colección de Pinterest. Aparte de los errores, incluso las notificaciones simples pueden hacerte sonreír durante un largo día:
Muchos de nosotros luchamos con la bandeja de entrada cero, pero tal vez valga la pena el esfuerzo de Gmail:
Este mensaje de Buffer utiliza un poco de adulación y humor para obtener más suscripciones:
Otro mensaje de notificación que probablemente le hará sonreír a través de una redacción inteligente:
Esta excelente cubierta de Aaron Walter, diseñador jefe de Mailchimp es una buena introducción al diseño emocional para aquellos que estén interesados en aprender más..
Espero que esta reducción en la creación de mensajes para su interfaz de usuario haya sido útil. He incluido recursos adicionales a continuación para una mayor lectura y exploración. No hay blanco o negro en el diseño de mensajes, sino que requiere mucha empatía, experiencia y, por supuesto, comentarios de los propios usuarios..
No tenga miedo de pasar por una serie de iteraciones para entender bien sus mensajes. Solicite comentarios a las personas, comience por comunicar el mensaje deseado al usuario y, si eso funciona, quizás incluya un poco de humor o emoción para mejorar la experiencia general. Siempre trata de ser útil!
Siéntase libre de dejar preguntas en el área de comentarios. Los comentarios siempre son bienvenidos para ayudarnos a escribir artículos aún mejores para usted en Webdesigntuts+.
Accentsconagua