Patrones de diseño de la interfaz de usuario: Soluciones probadas para problemas comunes de usabilidad

11 Min.
Patrones de diseño de la interfaz de usuario

¿Cómo debería estructurarse el menú de su sitio web? ¿Por qué es más fácil para algunos propietarios de sitios web conseguir suscriptores que para otros? ¿Qué hace que los usuarios rellenen el formulario de su sitio web o lo ignoren? Como diseñador, he estado tratando con preguntas sobre el diseño de la interfaz de usuario y la usabilidad de la web - puedes encontrar las respuestas en este artículo.

¿Qué son los patrones de diseño de la interfaz de usuario (UI)?

Los patrones de diseño de la interfaz de usuario (UI) son librerías de problemas de usabilidad que ya han sido analizados y resueltos con éxito. Sin embargo, no deben adoptarse de forma individual. Sin embargo, proporcionan una base amplia para una experiencia armoniosa del usuario. Los patrones de UI están ahí para facilitar y acelerar su flujo de trabajo.

Más consejos sobre el diseño de UX y la usabilidad de la web

Como en este artículo una buena usabilidad ayuda a guiar a los usuarios sin problemas a través de su sitio, su producto o su marca.

Fórmula para los patrones de diseño de la interfaz de usuario

¿Cómo sabe qué patrones de diseño son apropiados para su sitio web y cómo utilizarlos correctamente? Chris Bank ha escrito sobre esto en su libro electrónico Patrones de diseño de la interfaz de usuario móvil el siguiente procedimiento se trabaja:

  • Identificación del problema: ¿Qué está tratando de lograr el usuario en su sitio web y qué problemas encuentra? Intenta formular los problemas en una sola frase.
  • Solución: ¿Han resuelto ya otros diseñadores este problema? Si es así, ¿cómo?
  • Ejemplo en la vida real: Mira los ejemplos y repásalos como usuario. Trata de analizar lo que te ayudó a resolver una determinada tarea. Piensa en lo que te hizo pensar - o tal vez incluso inquietarse - acerca de la tarea. 
  • Uso: Resuma los resultados de su análisis. ¿Cómo puede implementarlos en su sitio web para que ofrezcan un valor añadido a los visitantes? ¿Qué patrones de diseño debería evitar usar? Si tienes una guía de estilo, deberías incluir tus resultados allí.
Patrones de diseño de la interfaz de usuario: Soluciones probadas para problemas comunes de usabilidad

4 categorías de patrones de diseño de la interfaz de usuario

Los patrones de diseño de la interfaz de usuario pueden dividirse en cuatro categorías, que les presentaré brevemente en esta sección. Desafortunadamente no podré cubrir todos los patrones de diseño de la UI. Si quieres profundizar en el tema, la web te ofrece posibilidades casi ilimitadas para leer más. Algunos recursos útiles sobre el tema de los patrones de diseño de UI son:

1. elementos de navegación más comunes

La navegación es uno de los elementos de interacción más importantes para el usuario: no sólo actúa como una tabla de contenidos para su página, sino también como una guía de orientación. El hecho de que se coloque normalmente en la parte superior o en el lateral de la página fue originalmente por razones jerárquicas. Con la navegación mostramos al usuario de un vistazo lo que puede hacer en nuestro sitio y dónde está en este momento.

Gracias a años de práctica, hemos interiorizado este conocimiento hasta tal punto que la tendencia al minimalismo no tiene que detenerse en la navegación. Los patrones de diseño son por lo tanto bastante personalizables - o incluso tienen que ser individualizados para su sitio para hacerlos funcionar.

captura de pantalla-www.castoretpollux.com-2020.06.11-18-05-59
El sitio web de Castor y Pólux

Castor et Pullex han seguido las reglas del patrón de la interfaz de usuario y aún así las han adaptado a su sitio: una navegación que se encuentra en la pantalla superior derecha y que se vuelve "pegajosa" al desplazarse. El logo que siempre lleva al usuario de vuelta a "el refugio seguro" - la página de inicio.

Un sitio web que permite mucha interacción y por lo tanto parece casi caótico, obtiene una agradable usabilidad utilizando soluciones de diseño ya conocidas.

La navegación "pegajosa", como se describe en el ejemplo anterior, es un maravilloso invento del diseño web. No sólo se pueden utilizar para mostrar animaciones impresionantes, sino que también aseguran que los visitantes de su sitio web pasen de "A a B" más rápidamente. Con One Pager también funcionan como un hilo rojo: El usuario sabe dónde está y lo que ya ha visto.

Es similar con las migas de pan: No tienen mucho sentido con páginas pequeñas. Pero para páginas más complejas pueden hacer maravillas. No sólo ayudan al usuario a orientarse, sino también a saltar a cualquier lugar deseado en la navegación.

En el siguiente ejemplo se muestra otra forma de utilizar estos patrones:

Los creadores de este sitio han adoptado el conocimiento del menú de la hamburguesa móvil: Por un lado, para facilitar una navegación minimalista de su sitio, que no es ajena al usuario. Por otro lado, querían dar a su producto suficiente espacio para estar en primer plano.

screenshot-demodern.com
Proyecto de muestra de Demoders

Algo pasado de moda, pero al menos igual de útil, son las llamadas pestañas en la navegación. Son una reminiscencia de un sistema de archivo y los usuarios las entienden rápida e intuitivamente. Aquí, también, en la versión reducida, el trabajo semi-especializado es tan bueno como en la versión original.

Mientras tanto, las pestañas se utilizan cada vez más como pestañas modales para mostrar contenidos que deberían estar vinculados entre sí de forma que se ahorre espacio. Como pestañas modales, también tienen la ventaja de que las páginas no tienen que ser recargadas completamente para mostrar otros contenidos. Especialmente en las páginas de productos de las tiendas basadas en los que a menudo WooCommerce los vemos - como en los siguientes ejemplos: 

Patrones de diseño de la interfaz de usuario: Soluciones probadas para problemas comunes de usabilidad
vista desde Patio del Atlántico

A continuación, un ejemplo menos minimalista para la comparación:

Patrones de diseño de la interfaz de usuario: Soluciones probadas para problemas comunes de usabilidad
página de muestra de ropa de bambú

Los patrones de UI a menudo se basan en interacciones en el mundo real. Por lo tanto, es importante no perder nunca de vista las propiedades físicas y/o cambiarlas intencionadamente. Porque esto lleva al hecho de que el usuario ya no puede entender intuitivamente estas acciones y sus consecuencias. Para aclararlo, he adaptado el ejemplo anterior una vez:

screenshot-bambooclothing.co.uk-2020.06.11-18-33-55_modified

Las propiedades físicas de la estructura de la carpeta ya no están dadas. Las pestañas ahora parecen elementos de navegación mal colocados. La afiliación de los elementos se pierde un poco, parecen estar dispuestos casi al azar.

Menús desbordantes y botones de "Saltar a la sección"

Para completar nuestra lista, no deberían faltar los menús desbordantes y los botones de "Saltar a la sección". "Los botones de salto a la sección" se encuentran normalmente en la esquina inferior izquierda. Permiten al usuario volver a la parte superior de la página con un solo clic. Especialmente con un buscapersonas, los botones de salto a la sección tienen sentido: ahorran tiempo y evitan la frustración por el tedioso desplazamiento.

Los menús desplegables tienen su origen menos en mejorar la usabilidad de las páginas. Fueron desarrollados para ahorrar espacio y para acomodar más contenido en la navegación. También hacen que tu diseño se vea más ordenado y claro. Los menús desplegables pertenecen a los Patrones de Diseño, que a menudo se llaman Anti-Patrones - porque no hacen realmente más fácil la navegación por el sitio web. Sin embargo, se sigue recomendando el uso de menús desplegables. Después de todo, su función es conocida y aprendida. Los indicadores de un menú desplegable suelen ser los patrones de espina de pescado que apuntan hacia abajo.

Patrones de diseño de la interfaz de usuario: Soluciones probadas para problemas comunes de usabilidad
El sitio web de Ehire

Los botones y los enlaces se mencionan intencionadamente sólo brevemente en este artículo, ya que deben ser suficientemente familiares para cada diseñador. Apenas hay límites para el diseño y la animación de los botones. Su estilo suele depender de la disposición visual de la información ofrecida. Deberían ser claramente visibles en el El color principal de la página y se colocan de manera que se agrupen con el contenido pertinente.

Lo mismo se aplica a los enlaces: Ya no tienen que ser mostrados en azul con un subrayado, como era el caso anteriormente. Pero su existencia debe ser clara y sobre todo uniforme. Amplios conocimientos sobre los botones que se obtienen aquí.

La paginación, es decir, el intercambio de contenido a través de varias páginas, es especialmente importante para las tiendas de comercio electrónico que ofrecen un gran número de productos. Con la ayuda de la paginación, el contenido se ofrece en varias páginas, el tiempo de carga se reduce y el contenido se divide en secciones fácilmente digeribles. Los periódicos, como el FAZ, también usan la Paginación para dividir los artículos más largos.

captura de pantalla-www.faz.net-2020.06.13-15-49-43
Ejemplo de la FAZ

Además, el llamado "pie gordo", que se ha convertido en una tendencia en los últimos años, es ahora uno de los patrones de IU aprendidos. Aquí puede, por ejemplo, enlazar con subpáginas visitadas con frecuencia, almacenar sus datos de contacto y mostrar contenido legal que no tiene cabida en la navegación principal. 

El pie de página funciona entonces en parte como una tabla de contenidos de su página con una estructura diferente. Pero también puede servir como una especie de bromista para obtener más información. Una vez que el usuario se ha desplazado por su sitio, el pie de página puede ofrecerle contenidos relevantes -como artículos interesantes, enlaces a medios sociales, etc.- que le mantendrán ocupado con su producto.

2. entrada y salida: Formularios de contacto y suscripción

Aparte de las directrices de protección de datos, también vale la pena centrarse en las necesidades de los usuarios. Especialmente en los dispositivos móviles un formulario de entrada puede llevar rápidamente a la frustración: La ya pequeña pantalla, el entorno físico durante el uso, el aspecto temporal y cualquier conexión inestable pueden convertirse rápidamente en una prueba de nervios. Afortunadamente, hay algunos patrones de diseño que ya han tratado exactamente estos problemas.

Consejo:

Lo mismo se aplica aquí como en general en la web: Tan corto como sea posible, tan largo como sea necesario. Los estudios han demostrado que añadir preguntas inútiles es un colapso en la participación y puede costar mucho dinero.

A continuación he creado una forma ficticia para mostrarle los principios más importantes:

Formulario
Principios para los formularios de entrada
  1. Pruebas de seguimiento de los ojos han descubierto que procesamos la información más rápido cuando se ordena de arriba a abajo en lugar de de izquierda a derecha. Por lo tanto, es aconsejable colocar el encabezamiento sobre el campo de formulario y crear sólo una columna.
  2. Es útil dar al usuario una entrada de muestra en marcadores de posición predefinidos - de esta manera la información requerida se visualiza de antemano. Debes evitar las entradas de números fragmentados, porque sólo complican la entrada. Además, deben ser programados de tal manera que sean tolerantes con los espacios.
  3. El manejo de los errores es un tema importante y complejo. El asterisco y el campo de entrada enmarcado en rojo han demostrado ser patrones de UI. Lo ideal es que los campos se expliquen por sí solos. Sin embargo, siempre hay que esperar que algo no funcione. Por lo tanto, ofrecen diferentes opciones de ayuda. Hay varias posibilidades para esto: Un botón de información, que ofrece ayuda cuando se está flotando. O la aparición de pequeños modales si el formulario no se envía con éxito.
  4. Tiene sentido dar retroalimentación ya durante la entrada. En el caso de las contraseñas, también se ha demostrado que es útil dar al usuario una evaluación cualitativa de la seguridad de la contraseña que ha elegido. 
  5. La Forma Multi-Paso tiene varias ventajas psicológicas. En primer lugar, tiene un efecto más claro y menos disuasorio. Si al usuario se le muestra también dónde se encuentra en la forma mediante un indicador (aquí la barra de carga), sabe exactamente qué esperar. La probabilidad de que se separe prematuramente es menor. La información personal siempre debe ser solicitada al final del formulario. Si el visitante de su sitio web ya ha rellenado el formulario en gran medida, le será más difícil renunciar al tiempo que ya ha invertido sin resultados. También es aconsejable pedir sólo la información que realmente se necesita y dar las razones de la solicitud. Si le pide a sus usuarios que se inscriban en algo, es aconsejable indicar un beneficio para ellos a la "Siempre consiga primero las mejores ofertas". En el último paso debe dar una pequeña visión general de lo que sucede a continuación - y lo que el usuario puede esperar cuando.

Además, sus formularios deben incluir el llenado automático (por los datos almacenados en el navegador) y el reconocimiento de la información (como la adición de la ciudad después de introducir un código postal). Especialmente WordPress muchas formas tienen esto ya incluido por defecto. 

Debe evitar el uso de los captchas, si es posible, o al menos mantenerlo al mínimo. De acuerdo con de este estudio los captchas pueden llevar a un 30 por ciento menos de interacción con la forma.

3. estructurar su contenido

Como operador de un sitio web, debe prestar especial atención a la forma en que el contenido de su sitio está estructurado: ¿Apoyan a sus visitantes a encontrar su camino en su sitio? ¿Son sus contenidos fácilmente accesibles y se puede entender su jerarquía? 

La cuestión de la accesibilidad fácil atrae particularmente a los usuarios que ven su sitio en condiciones cambiantes. Por ejemplo, las personas con problemas de visión de color y discapacidades visuales. Si desea tratar el tema de la accesibilidad y la ausencia de barreras con más detalle, encontrará más información aquí: 

Si tienes un blog o una revista online, probablemente conoces el problema: tienes un montón de contenido interesante que te gustaría ofrecer de la forma más uniforme posible. Un patrón de diseño adecuado para esto es la llamada "Lista de Artículos". Aquí se clasifica el contenido y se muestra sólo una pequeña parte del mismo. De esta manera puedes mostrar muchos temas de un vistazo sin inundar a tus usuarios con información. Un buen ejemplo muestra aquí RAIDBOXES:

RAIDBOXES  WP unboxed
Vista de la WordPress revista wp unboxed

Esta división permite al usuario navegar por todo el contenido por áreas de interés y así encontrar lo que le interesa más rápidamente.

Para ofrecer ciertos contenidos sin distracciones, se pueden utilizar cajas modales. Estas cajas se colocan sobre el resto de su sitio y permiten al usuario concentrarse en el contenido. Esto puede ser necesario e importante. Sin embargo, hay que tener en cuenta que estos modales también son más bien anti-patrones: Básicamente, bloquean la libertad de acción del usuario mientras el modal esté abierto.

Sin embargo, si se usan correctamente, las cajas modales pueden ayudar a los visitantes a comprender mejor su contenido. Sin embargo, las cajas modales demasiado frecuentes o aparentemente no provocadas pueden causar rápidamente frustración y una sensación de impotencia.

La caja de luz y el modo de pantalla completa también pertenecen a esta categoría. Por un lado, permiten a tu usuario mirar más de cerca el contenido seleccionado. Por otro lado, hacen imposible cualquier otra interacción. Por lo tanto, siempre es importante ofrecer al menos un punto de fuga. Especialmente conocidos son el clic en una X en la parte superior derecha de la imagen o el clic fuera del cuadro para cerrarlo de nuevo.

Las presentaciones de diapositivas también son una forma popular de mostrar imágenes. Se hace una distinción entre la reproducción automática y los pases de diapositivas de navegación manual. Las galerías suelen aparecer como imágenes en miniatura y luego se amplían mediante presentaciones de diapositivas y/o cajas de luz.

Aquí se debe actuar principalmente de acuerdo a la función: ¿Qué tipo de imágenes representa? ¿Tienen que estar disponibles como pantalla completa? Y lo que es más importante: ¿su contenido en conjunto o las imágenes individuales? ¿Vale la pena recurrir a otras posibilidades, como una lupa que amplía las imágenes cuando se cierne? Este último es especialmente popular en el comercio electrónico.

Captura de pantalla de los patrones de diseño de Unsplash-UI
Vista en miniatura de unsplash.com

unsplash.com utiliza una mezcla de galería de fotos y cajas de luz. Sin embargo, las imágenes no se muestran como miniaturas. ¿Por qué? Unsplash es una plataforma que sólo ofrece imágenes para descargar. Esto significa que los usuarios deben poder decidir a favor o en contra de la imagen a primera vista. Para poder tomar esta decisión, la resolución de la imagen debe ser relativamente buena. Las miniaturas serían demasiado pequeñas para eso. Y hacer clic en cada imagen individualmente o navegar a través de una presentación de diapositivas minimizaría la eficiencia del sitio muchas veces.

A lo largo de todo el proceso de implementación y concepción nunca debe perderse de vista la cuestión de la utilidad/valor añadido y la importancia.

4. Utilizar los canales sociales

Se trata de patrones que ayudan a guiar a los usuarios a sus canales de medios sociales y/o a facilitar la interacción social. Puede encontrar ejemplos detallados de estos patrones aquí leer.

Conclusión

En conclusión, puedo recomendar dos enfoques en particular. Primero: Visite y analice tantos sitios web como sea posible para obtener inspiración: ¿Cómo han resuelto o no han resuelto otros diseñadores ciertos problemas? ¿Qué es lo que me frustra cuando navego por la web? ¿Cuándo fue la última vez que me sorprendió positivamente, y por qué? 

Segundo, siempre recuerda que no eres el usuario. Los visitantes de su sitio web piensan sorprendentemente diferente a usted. Puede que no conozcan su producto todavía. Por lo tanto, realice varias pruebas repetidas veces para evaluar cómo es realmente la usabilidad de su sitio.

¿Qué preguntas tienes a Sonja sobre los patrones de UI?

Siéntase libre de usar la función de comentarios. ¿Quieres estar informado sobre nuevos artículos y consejos sobre diseño y desarrollo web? Entonces síguenos en TwitterFacebook o sobre nuestra Boletín de noticias.

Después de estudiar Diseño de Juegos y Escritura Creativa en la verde región de Auckland, se ha especializado Sonja Hoffmannen el diseño de web y aplicaciones y su desarrollo. Su enfoque está en la gamificación y la exploración de la motivación y la experiencia del usuario, junto con la pasión y la curiosidad por las tendencias tecnológicas.

Artículos relacionados

Comentarios sobre este artículo

Escriba un comentario

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