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

Sonja Hoffmann Última actualización 21.10.2020
11 min.
Patrones de diseño de interfaz de usuario
Última actualización 21.10.2020

¿Cómo debe estructurarse el menú tus ? ¿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 del sitio web tus o lo ignoren? Como diseñador, he estado lidiando con cuestiones relacionadas con el diseño de la interfaz de usuario y la usabilidad de la web - encontrarás las respuestas en este post.

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

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

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

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

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

¿Cómo saber qué patrones de diseño son adecuados para el sitio web tu y cómo utilizarlos correctamente? Chris Bank ha elaborado el siguiente enfoque en su libro electrónico Mobile UI Design Patterns:

  • Identificación del problema: ¿Qué intenta conseguir el usuario en tus y qué problemas encuentra? Intenta formular los problemas en una sola frase.
  • Planteamiento de la solución: ¿han resuelto ya este problema otros diseñadores? Si es así, ¿cómo?
  • Ejemplo de la vida real: Mira los ejemplos y repásalos como usuario. Intenta analizar qué te ha ayudado a resolver una determinada tarea. Piensa en lo que te ha hecho pensar, o incluso en lo que te ha hecho sentir inseguro. 
  • Alcance: Resumir los resultados del análisis de tus . ¿Cómo se pueden implementar en tus para que ofrezcan a los visitantes un valor añadido? ¿Qué patrones de diseño debe evitar utilizar? Si tiene una guía de estilo, debe incluir en ella los resultados de tu .

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

Los patrones de diseño de interfaz de usuario pueden dividirse en cuatro categorías, que presentaré brevemente en esta sección. Lamentablemente, no podré cubrir todos los patrones de diseño de interfaz de usuario. Si quiere profundizar en el tema, la web ofrece posibilidades casi ilimitadas para leer sobre ellos. Algunos recursos útiles sobre el tema de los patrones de diseño de interfaz de usuario 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 funciona como tabla de contenidos para tu sitio , sino también como ayuda a la orientación. El hecho de que se coloque habitualmente en la parte superior o en el lateral tenía originalmente razones principalmente jerárquicas. Con la navegación, mostramos al usuario de un vistazo lo que puede hacer en nuestro sitio y dónde se encuentra en ese momento.

Gracias a los años de práctica, hemos interiorizado este conocimiento hasta tal punto que la tendencia al minimalismo no tiene por qué detenerse en la navegación. Por lo tanto, los patrones de diseño son bastante adaptables - o incluso tienen que ser individualizados para que tu sitio funcione.

screenshot-www.castoretpollux.com-2020.06.11-18-05-59
Página web de Cástor y Pólux

Castor et Pullex han respetado las reglas de los patrones de interfaz de usuario y aún así las han adaptado individualmente a su sitio : una navegación situada en la parte superior derecha de la pantalla y que se vuelve "pegajosa" al desplazarse. El logotipo que siempre devuelve al usuario al "refugio seguro": la página de inicio.

Un sitio web que en sí mismo permite mucha interacción, y por tanto parece casi algo caótico, recibe una agradable usabilidad mediante el uso de soluciones de diseño ya conocidas.

Las navegaciones "pegajosas", como las descritas en el ejemplo anterior, son un maravilloso invento en el diseño web. No sólo se pueden utilizar para mostrar animaciones impresionantes, sino que también garantizan que los visitantes de tus vayan de "A a B" más rápidamente. Con los One Pagers, también funcionan como un hilo rojo: El usuario sabe dónde está y qué ha visto ya.

Con el pan rallado pasa algo parecido: Para las páginas pequeñas, no tienen mucho sentido. Sin embargo, 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 de la navegación.

Puede ver otra forma de utilizar estos patrones en el siguiente ejemplo:

Los creadores de este sitio han adoptado el conocimiento del menú de hamburguesas para móviles: Por un lado, para facilitar una navegación minimalista de su sitio , que no sea ajena al usuario. Por otro lado, para seguir ofreciendo a su producto el espacio suficiente para estar en primer plano.

pantalla-demodern.com
Ejemplo de proyecto de Demodern

Un poco pasadas de moda -pero al menos igual de útiles- son las llamadas pestañas en la navegación. Recuerdan a un sistema de archivo y los usuarios los entienden de forma rápida e intuitiva. También en este caso, lo aprendido funciona en la versión reducida tan bien 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 enlazados entre sí de una manera que ahorre espacio. Como pestañas modales, también tienen la ventaja de que las páginas no tienen que recargarse completamente para mostrar otro contenido. Especialmente en las páginas de productos de las tiendas basadas en WooCommerce los vemos a menudo, como en los siguientes ejemplos: 

Patrones de diseño de la interfaz de usuario: soluciones probadas para problemas comunes de usabilidad
Vista desde el Patio Atlántico

A continuación, un ejemplo menos minimalista para comparar:

Patrones de diseño de la interfaz de usuario: soluciones probadas para problemas comunes de usabilidad
Página de ejemplo de Bamboo Clothing

A menudo, los patrones de interfaz de usuario se basan en las interacciones del mundo real. Por lo tanto, es importante no perder nunca de vista las propiedades físicas y/o cambiarlas intencionadamente. Porque esto lleva a que el usuario no pueda entender intuitivamente estas acciones y sus consecuencias. Para que te quede más claro, 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 carpetas ya no están presentes. Las pestañas ahora parecen elementos de navegación mal colocados. La filiación de los elementos se pierde un poco, parecen dispuestos casi al azar.

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

Para completar nuestra lista, no pueden faltar los menús de desbordamiento y los botones "Saltar a la sección". "Los botones para saltar a la sección suelen estar situados en la esquina inferior izquierda. Permiten al usuario volver a la parte superior de sitio con un solo clic. Los botones de salto de sección tienen sentido especialmente para las páginas únicas: ahorran tiempo y evitan la frustración causada por el tedioso desplazamiento.

Los menús desplegables tienen en realidad su origen menos en la mejora de la usabilidad de las páginas. Se desarrollaron para ahorrar espacio y dar cabida a más contenidos en la navegación. Además, el diseño de tu parece más ordenado y claro. Los menús desplegables son uno de esos patrones de diseño que a menudo se denominan antipatrones, porque realmente no facilitan la navegación por el sitio web. Sin embargo, se sigue recomendando el uso de menús desplegables. Al fin y al cabo, se sabe y se aprende cómo funcionan. Los indicadores de un menú desplegable suelen ser los patrones de espiga que apuntan hacia abajo.

Patrones de diseño de la interfaz de usuario: soluciones probadas para problemas comunes de usabilidad
Sitio web de Ehire

Los botones y los enlaces se mencionan intencionadamente sólo de forma breve en este post, ya que deberían ser suficientemente conocidos por todos los diseñadores. 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. Deben ser claramente visibles en el color primario de sitio y colocarse de forma que se agrupen con el contenido relevante.

Lo mismo ocurre con los enlaces: Ya no tienen que aparecer en azul con un guión bajo, como antes. Pero su existencia debe ser clara y, sobre todo, coherente. Aquí puede obtener amplios conocimientos sobre los botones.

La paginación -compartir el contenido en varias páginas- es especialmente importante para las tiendas de comercio electrónico que ofrecen un gran número de productos. De este modo, 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 utilizan la paginación para dividir los artículos más largos.

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

Además, el llamado "Fat Footer", que se ha puesto de moda en los últimos años, es ahora uno de los patrones de interfaz de usuario aprendidos. Aquí puede, por ejemplo, enlazar con las subpáginas más visitadas, almacenar los datos de contacto de tu y mostrar contenidos legales que no tienen cabida en la jerarquía de la navegación principal. 

El pie de página funciona entonces en parte como un índice estructurado de forma diferente tus sitio . Sin embargo, también puede servir como una especie de teaser para obtener más información. Si el usuario se ha desplazado a través de tu sitio , el pie de página puede seguir ofreciendo contenido relevante -como artículos interesantes, enlaces a redes sociales, etc.- que le enganche aún más a su producto.

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

Aparte de las directrices de protección de datos, también merece la pena centrarse en las necesidades del usuario. Especialmente en los dispositivos móviles, un formulario de entrada puede conducir rápidamente a la frustración: La pantalla, ya de por sí pequeña, el entorno físico mientras se utiliza, el aspecto temporal, así como una posible conexión inestable, pueden convertirse rápidamente en una prueba que ponga los pelos de punta. Afortunadamente, hay algunos patrones de diseño que ya han abordado estas mismas cuestiones.

Consejo:

Como suele ocurrir en la web, lo mismo ocurre aquí: Tan corto como sea posible, tan largo como sea necesario. Los estudios han demostrado que la adición de preguntas inútiles supone un colapso en la participación y, por tanto, puede costar mucho dinero en determinadas circunstancias.

A continuación he creado un formulario ficticio para mostrarle los principios fundamentales: 

Formulario
Principios para los formularios de entrada
  1. Laspruebas de seguimiento ocular han revelado que procesamos la información más rápidamente cuando está ordenada de arriba a abajo, en lugar de hacerlo de izquierda a derecha. Por lo tanto, es aconsejable colocar el titular por encima del campo del formulario y crear una sola columna.
  2. Es útil proporcionar al usuario un ejemplo de entrada en marcadores de posición predefinidos, ya que así se visualiza la información requerida de antemano. Debe evitar las entradas de números fragmentados, porque sólo complican la entrada. Además, deben programarse de forma que sean tolerantes con los espacios.
  3. La gestión de errores es un tema importante y complejo. El asterisco y el campo de entrada con borde rojo han demostrado ser patrones de interfaz de usuario. Lo ideal es que los campos sean autoexplicativos. No obstante, siempre hay que esperar que algo no funcione. Por lo tanto, asegúrese de ofrecer diferentes maneras de ayudar. Hay varias formas de hacerlo: Un botón de información que ofrece una posible ayuda al pasar el ratón por encima. O la aparición de pequeños modales cuando el formulario no se envía correctamente.
  4. Es una buena idea proporcionar información mientras se introduce la contraseña. En el caso de las contraseñas, también se ha demostrado que es útil dar al usuario una evaluación cualitativa de lo segura que es la contraseña que ha elegido. 
  5. El formulario de varios pasos tiene varias ventajas psicológicas. En primer lugar, es más claro y menos desalentador. Si, además, se muestra al usuario en qué punto del formulario se encuentra mediante un indicador (en este caso, la barra de carga), sabrá exactamente a qué atenerse. Es menos probable que aborte prematuramente. Los datos personales deben solicitarse siempre al final del formulario. Al fin y al cabo, si los visitantes del sitio web tu ya han rellenado la mayor parte del formulario, es más difícil que abandonen el tiempo que ya han invertido sin obtener resultados. También es aconsejable pedir sólo la información que realmente se necesita y también justificar la solicitud. Si pide a los usuarios de tu que se inscriban en algo, es aconsejable ofrecerles una ventaja a la manera de "Conseguir siempre las mejores ofertas primero". En el último paso, debe dar una pequeña descripción de lo que sucederá a continuación, y de lo que el usuario puede esperar cuando.

Además, el llenado automático (a través de los datos almacenados en el navegador), así como el reconocimiento de la información (como la adición de la ciudad después de introducir un código postal) deben ser integrados en sus formularios. Especialmente en WordPress muchos formularios ya lo tienen incluido por defecto. 

Debe evitar el uso de captchas si es posible, o al menos mantenerlos al mínimo. Según este estudio, los captchas pueden provocar un 30% menos de interacción con el formulario.

3. estructurar los contenidos de tus

Como propietario de un sitio web, debe prestar especial atención a la cuestión de cómo está estructurado el contenido tus sitio : ¿Ayudan a los visitantes de tu a orientarse bien en tu sitio ? ¿Se puede acceder fácilmente al contenido de tu y se puede entender su jerarquía? 

La cuestión de la fácil accesibilidad es especialmente atractiva para los usuarios que ven tu sitio en condiciones alteradas. Por ejemplo, las personas con problemas de visión del color y deficiencias visuales. Si quiere profundizar en el tema de la accesibilidad, puede encontrar más información aquí: 

Si tienes un blog o una revista online, probablemente conozcas el problema: tienes un montón de contenidos interesantes que te gustaría ofrecer de la forma más uniforme posible. Un patrón de diseño adecuado para ello es la llamada "lista de artículos". Aquí se categoriza el contenido de tu y se muestra sólo una pequeña sección a la vez. De este modo, se muestran muchos temas de un vistazo sin inundar de información a los usuarios de tu . Un buen ejemplo se muestra aquí RAIDBOXES:

RAIDBOXES WP unboxed
Vista de la revista WordPress wp unboxed

Esta división permite al usuario hojear 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, puede utilizar cajas modales. Estos se superponen al resto de tus sitio y permiten al usuario centrarse sólo en su contenido. Esto puede ser necesario e importante. Sin embargo, hay que tener en cuenta que estos modales también tienden a ser antipatrones: Básicamente, bloquean cualquier espacio de maniobra para el usuario mientras el modal esté abierto.

Sin embargo, si se utilizan correctamente, los cuadros modales pueden ayudar a los visitantes de tu a comprender mejor su contenido. Sin embargo, los cuadros modales que se activan con demasiada frecuencia o sin motivo aparente 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 su usuario mirar de cerca el contenido seleccionado. Por otro lado, hacen imposible cualquier otra interacción. Por eso siempre es importante ofrecer al menos un punto de fuga. Especialmente conocidos son hacer clic en una X en la parte superior derecha de la imagen o hacer clic fuera de la caja para cerrarla de nuevo.

Una forma popular de mostrar imágenes son también las presentaciones de diapositivas. Se distingue entre presentaciones de diapositivas de reproducción automática y de navegación manual. Las galerías suelen aparecer como imágenes en miniatura y luego se amplían mediante pases de diapositivas y/o lightboxes.

Aquí se debe actuar principalmente según la función: ¿Qué tipo de imágenes muestra? ¿Tienen que estar disponibles como pantalla completa? ¿Y qué es más importante: el contenido de tu en su conjunto o las imágenes individuales? ¿Merece la pena recurrir a otras posibilidades, como una lupa que amplíe las imágenes de tu al pasar el ratón por encima? Este último es especialmente popular en el comercio electrónico.

Captura de pantalla Unsplash Patrones de diseño de interfaz de usuario
Vista en miniatura en unsplash.com

unsplash.com utiliza una mezcla de galería de imágenes y lightboxes. 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 directamente en el primer vistazo. Para poder tomar esa 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 de sitio muchas veces.

A lo largo del proceso de implementación y diseño, nunca hay que perder de vista la cuestión del beneficio/valor y la importancia.

4. jugar en los canales sociales

Se trata de patrones que ayudan a guiar a los usuarios de tu hacia sus canales de medios sociales y/o facilitan su interacción social. Puede leer ejemplos más detallados aquí.

Conclusión

En conclusión, puedo recomendarle dos enfoques en particular. En primer lugar, visite y analice el mayor número posible de sitios web para inspirarse: ¿Cómo han resuelto o no han resuelto otros diseñadores determinados problemas? ¿Qué me frustra a mí mismo cuando navego por la red? ¿Cuándo fue la última vez que me sorprendí positivamente, y por qué? 

En segundo lugar, recuerda siempre que tú no eres el usuario. Los visitantes de tus piensan de forma sorprendentemente diferente a la suya. Es posible que aún no conozcan el producto tu . Por lo tanto, realice repetidamente varias pruebas para evaluar cómo es la usabilidad en tus sitio .

¿Qué preguntas tiene para Sonja sobre los patrones de interfaz de usuario?

No dudes en utilizar la función de comentarios. ¿Quieres estar informado/a sobre nuevos artículos y consejos sobre diseño y desarrollo web? Entonces síguenos en Twitter, Facebook o a través de nuestra newsletter.

Después de estudiar Diseño para Juegos y Escritura Creativa en Auckland, Sonja Hoffmann se ha especializado en el diseño y desarrollo web. Su labor profesional se enfoca en la gamificación y exploración de la motivación y la experiencia del usuario, junto con su pasión y curiosidad por las tendencias tecnológicas.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

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