4 Patrones de UI para mejorar las interacciones con los usuarios

No hay una forma correcta de diseñar una interfaz de usuario de un sitio web. No hay una plantilla de “curalotodo” para que puedas conectar tu marca y pulsar “enviar”. Cada sitio tiene sus propios objetivos, motivos, estrategias y estilo artístico. Este no es un artículo que esboza un conjunto definitivo de reglas para diseñar el sitio web perfecto cada vez. Este es un artículo que describe algunos patrones de diseño efectivos para que puedas elegir y modificar según sea necesario.

Controles de entrada

La naturaleza misma de los controles de entrada es permitir a su usuario interactuar más profundamente con el sitio. Pero hay una paradoja aquí: los usuarios normalmente quieren más control, pero cada nuevo control complica la interfaz de usuario y desordena la pantalla. Una de las mejores maneras de lograr ese equilibrio perfecto es tener controles a pedido.

Fuente: CollabFinder

La idea es ahorrar espacio en la pantalla ocultando los controles en lugar de deshacerse de ellos. Es una solución en la que todos ganan y la prueba de su eficacia se ve en cómo casi todos los sitios web de alto perfil la han adoptado. Los controles pueden ocultarse y revelarse al pasar el cursor por encima del contenido afectado (Pinterest), ocultarse en los menús desplegables colapsados mediante pestañas (Google Docs), o un híbrido de ambos, como en el ejemplo anterior de CollabFinder.

Pero los controles de entrada no siempre son los adecuados. El campo de entrada de texto, por ejemplo, puede ser una herramienta valiosa, pero muchos diseñadores lo dan por sentado; utilizan un campo de texto genérico y olvidan que está ahí. La personalización del cuadro de texto no sólo infundirá cierta personalidad a tu sitio, sino que también te diferenciará de otros sitios. Esto puede ser muy útil, sobre todo si los colores predeterminados de la caja no se ajustan a los colores de su sitio.

Si su sitio se centra en un solo campo de entrada, o si la entrada es un primer paso necesario, establecer un autoenfoque en ese campo de entrada sería una medida inteligente. El autoenfoque es cuando el cursor comienza dentro del campo automáticamente, el más usado por Google. Tan pronto como entres en Google, puedes empezar a escribir tu consulta sin tener que hacer clic en ningún sitio.

Como se describe en Web UI Patterns 2014, Google también incorpora valores predeterminados y la función de autocompletar, que acelera significativamente las acciones del usuario y ayuda a los usuarios a explorar temas y asuntos adicionales.

Si necesitas un poco de ayuda con los detalles sobre el cambio de la caja del campo de texto, este sitio te dará un poco de ayuda con la codificación.

Navegación

Uno de los elementos esenciales para el diseño de la interfaz de usuario es una plataforma de navegación completamente funcional. Es completamente necesaria para cada sitio, no importa cuán grande sea el resto de su sitio si sus usuarios no pueden encontrar nada.

Debido a que la navegación es tan importante, hay algunas reglas universales que se pueden aplicar a cada sitio. Collis Ta’eed, cofundador de Envato, nos da las dos reglas cardinales de la navegación:

  1. Los usuarios deben saber siempre su ubicación en el sitio (orientación) Para que los usuarios se sientan cómodos, deben sentir que pueden moverse con confianza por el sitio y racionalizar el sitio en su extremo. Hay algunas maneras de lograrlo, las más comunes: elementos destacados del menú, rutas de migas de pan y encabezados.
  2. El sistema de navegación no debe cambiar (consistencia) En otras palabras, no mueva la barra de menú. Al mantener el mismo sistema de navegación, el usuario podrá averiguar cómo encontrar el camino a casa, incluso si se pierde.

Fuente: Mejores prácticas de la interfaz de usuario de la web

Un componente principal de la navegación es el contenido en sí mismo, después de todo, no tiene sentido diseñar un sistema de navegación si a nadie le importa lo que encuentra. Como verás más arriba, la API de Google Maps, proporciona una navegación primaria con un simple menú horizontal, mientras que a la navegación secundaria se le da menor prioridad en el lado derecho. (Desde una perspectiva estándar, los lugares más visibles para añadir un menú de navegación son horizontal y verticalmente). Pero notarás que el contenido ocupa la mayor parte del espacio. La navegación primaria está silenciada con pequeñas fuentes y colores claros, permitiendo que el contenido hable por sí mismo.

La navegación no tiene por qué ser vistosa o incluso llamativa, como podemos ver en el sitio del Proyecto REI 1440. Su menú mínimo de tres opciones es más pequeño que incluso el logotipo de la empresa. Toda la navegación se basa en la horizontalidad, permitiendo que el contenido circule de izquierda a derecha a medida que el usuario filtra por tiempo, actividad o ubicación. Pero eso no significa que la navegación horizontal triunfe sobre la vertical cada vez…

El sitio del Sonido Supremo de Skullcandy, por ejemplo, utiliza el pozo de navegación vertical con un enfoque de desplazamiento poco ortodoxo. La pantalla gira mientras sigues el cable de los auriculares a lo largo de la página. Esto sólo puede funcionar porque el menú de navegación de la derecha se mantiene firme, anclando y orientando al usuario mientras explora.

Para más ejemplos de navegación horizontal y vertical, eche un vistazo a esta colección de patrones de navegación UI.

Ajustes por defecto

Los usuarios rara vez cambian la configuración predeterminada, incluso si tienen la opción de hacerlo. Eso significa que está en para hacerlo bien la primera vez.

Aunque esto parece mucha responsabilidad, hay un lado positivo. Puedes elegir la configuración predeterminada de las acciones que quieres que el usuario siga. Tomemos, por ejemplo, Living Social, la audiencia predeterminada para las ofertas de correo electrónico es “todo el mundo”, lo que anima a los usuarios a reenviar las ofertas a más personas.

Aunque es tentador tener un control absoluto sobre la configuración del usuario, es importante para el UX que le prestes algo de libertad a tu usuario. Crear un proceso enrevesado para mantener al usuario en la configuración por defecto sólo los frustrará y los alejará.

La configuración predeterminada se utiliza mejor cuando se pueden hacer conjeturas calificadas sobre las preferencias del usuario. Si no conoce bien a su usuario objetivo, trazar los ajustes predeterminados puede hacer más daño que bien.

Otro factor a considerar son los campos de entrada. No utilice los valores predeterminados para nada que requiera la reflexión del usuario, como suscribirse a boletines de noticias o aceptar las condiciones de uso. En este artículo se ofrece información más detallada sobre la configuración predeterminada, con ejemplos.

Acciones guiadas

Mientras que los ajustes por defecto pueden hacer que la gente se sienta incómoda con su nivel de control, una forma mucho más suave de guiar sus acciones es el poder de la sugestión. Las acciones guiadas permiten fomentar una mayor participación, interacción e incluso retroalimentación, siempre que la acción que sugiera no sea engorrosa.

Fuente: LinkedIn.

LinkedIn es uno de los mejores ejemplos en cuanto al uso de la acción guiada. Al abrir una página, el usuario suele ver indicaciones para realizar acciones, por ejemplo, para avalar las habilidades de sus conexiones. La naturaleza humana es disfrutar ayudando a los amigos, por lo que el impulso de esta acción guiada funciona porque es algo que quieren hacer de todos modos, pero puede que no se les haya ocurrido por sí mismo. El beneficio de LinkedIn es que fomenta una mayor implicación con su sitio, promoviendo tanto la inversión como la experiencia de los usuarios.

La acción guiada puede utilizarse en un nivel más sutil que LinkedIn. Al enfatizar visualmente las funciones clave, los controles y los botones, un diseñador puede sugerir y llamar la atención sobre las acciones preferidas, de forma muy similar a como se enfatiza una llamada a la acción.

Como puedes ver arriba, mira lo mucho que Spotify quiere que te los descargues en comparación con, digamos, mirar sus características. Web UI Patterns 2014 tiene más ejemplos de las formas subrepticias de usar las acciones guiadas.

Conclusión

Los elementos de diseño de la interfaz de usuario, como los controles de entrada, la navegación, los ajustes predeterminados y las acciones guiadas son todos componentes de una interfaz de usuario exitosa; sin embargo, es su elección la forma de implementarlos. Estos elementos son todos versátiles y pueden ser usados con flexibilidad. Las decisiones que tomes en cuanto al tipo de elementos de diseño de la interfaz de usuario afectarán a la personalidad de tu sitio web en su conjunto, así que ten cuidado al elegir cuáles te representarán adecuadamente.

Para obtener consejos prácticos sobre la creación de interfaces web basados en ejemplos de empresas importantes como AirBnB, Wufoo, Linkedin y otras, consulte Web UI Best Practices .

¿Tienes algún otro consejo sobre las interfaces de usuario? Compártelos en los comentarios.

admin

Deja una respuesta

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

Publicar un comentario