• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Must Comunicación

Diseño Web y Marketing Online

  • WordPress
    • Desarrollo Web
    • Plugins
    • Seguridad
  • WooCommerce
  • Marketing
  • Tutoriales
    • WooCommerce
    • Easy Digital Downloads
  • Contacto
Estás aquí: Inicio / Diseño Web / Elaborar la experiencia de los mensajes de la interfaz de usuario

Elaborar la experiencia de los mensajes de la interfaz de usuario

Compartir
Compartir
Twittear

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 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

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

seguir leyendo en Tuts+

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)

Libros destacados

  • Diseñar para la emoción
  • Diseño de formularios web

Patrones de diseño

  • Pattern Tap
  • ui-patterns.com
  • Yahoo Patterns
  • patternry.com
  • Usabilla
  • The Godfounder
  • Little Big Details

Entradas relacionadas

Compartir
Compartir
Twittear

categorías: Diseño Web etiquetas: Tutoriales Tuts+, User experience, User Interface, UX

anterior
siguiente

Sobre Eva Collados Pascual

Apasionada de la sociedad de la información, el marketing online, la tecnología, el diseño y el arte.
Sigo a diario todas las noticias relacionadas con WordPress, si no encuentras en el blog la solución que buscabas, no dudes en consultarme.

Interacciones de los lectores

Deja un comentario Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Primary Sidebar

Categorías

  • Apps – Productividad
  • Diseño Web
  • eCommerce
  • Email Marketing
  • Emprendimiento
  • Marketing
  • SEO
  • Tutoriales
    • Tutorial de Easy Digital Downloads
    • Tutorial de WooCommerce
    • Tutorial W3 Total Cache
  • WooCommerce
  • WordPress
    • Desarrollo Web
    • Optimización
    • Plugins
    • Seguridad
    • Temas WordPress
Web Hosting

Entradas relacionadas

WooCommerce  

Etiquetas

accesibilidad caché Conversión CRO eCommerce Inspiración Web Landing Pages Marketing newsletters Performance Optimization Plugins WordPress Seguridad SEO Startups Temas WordPress Tutoriales Tuts+ UX WooCommerce WordPress WPO

® 2017 Must Comunicación • Aviso Legal • Política de Cookies • Privacidad • Sitio alojado en SIteGround

Este sitio web usa cookies propias y de terceros para recordar tus datos de inicio de sesión y recopilar estadísticas para mejorar la experiencia del usuario. Más información sobre las cookies Leer más. Aceptar x