Patrones de diseño de la interfaz de usuario

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

¿Cómo debe estructurarse el menú del sitio web 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 en tuso lo ignoren? Como diseñador, me he enfrentado a cuestiones relacionadas con 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 interfaz de usuario?

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 tusin problemas a través de tusitio , tuproducto o tumarca.

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

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

  • Identificación de problemas: ¿Qué intenta conseguir el usuario en tusy qué problemas encuentra? Intenta formular los problemas en una sola frase.
  • Planteamiento: ¿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 hizo pensar -o incluso sentir- inseguro. 
  • Alcance: Resumir los resultados del análisis de tus. ¿Cómo se pueden implementar en tuspara 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 seguir leyendo. 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 tusitio , sino también como ayuda a la orientación. El hecho de que se sitúe 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 sitioy 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 tusitio funcione.

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

Castor et Pullex se han ceñido a las reglas de los patrones de interfaz de usuario y, sin embargo, las han adaptado individualmente a su sitio: una navegación que se encuentra 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 pueden utilizarse para mostrar animaciones impresionantes, sino que también garantizan que los visitantes del sitio web tusvayan 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.

Lo mismo ocurre con el pan rallado: No tienen mucho sentido para las páginas pequeñas. Sin embargo, para páginas más complejas, pueden hacer maravillas. No sólo ayudan al usuario a orientarse, sino también a volver a cualquier punto de la navegación.

Otra forma de utilizar estos patrones se muestra en el siguiente ejemplo:

Los creadores de este sitiohan adoptado el conocimiento del menú de hamburguesas para móviles: por un lado, para facilitar una navegación minimalista de su sitioque no sea ajena al usuario. Por otro lado, para ofrecer 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 igual de bien en la versión reducida que en la original.

Mientras tanto, las pestañas se utilizan cada vez más como pestañas modales para mostrar contenidos que se van a enlazar entre sí de una manera que ahorra 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 ello, es importante no perder nunca de vista las propiedades físicas y/o modificarlas intencionadamente. Porque esto lleva a que el usuario ya no pueda entender intuitivamente estas acciones y sus consecuencias. Para que te quede claro, he adaptado el ejemplo anterior:

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.

Consentimiento*
Este campo es de validación y no debe ser modificado.

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

Para que nuestra lista sea completa, no deben faltar los menús de desbordamiento y los botones "Saltar a la sección". Los botones "Saltar a la sección" suelen estar situados en la esquina inferior izquierda. Permiten al usuario volver al principio de sitiocon un solo clic. Los botones de salto de sección son especialmente útiles para las páginas de un solo uso: 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 contenido en la navegación. También hacen que el diseño de tuparezca más ordenado y claro. Los menús desplegables pertenecen a los patrones de diseño que suelen llamarse antipatrones, porque realmente no facilitan la navegación por el sitio web. Sin embargo, sigue siendo aconsejable utilizar 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

En este artículo sólo voy a mencionar brevemente los botones y los enlaces, 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 correspondiente.

Lo mismo ocurre con los enlaces: Ya no tienen que aparecer en azul con un subrayado, como antes. Pero su existencia debe ser clara y, sobre todo, coherente. Aquí se pueden encontrar amplios conocimientos sobre los botones.

La paginación -la división del contenido en varias páginas- es importante sobre todo 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 acorta 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

El llamado "pie de página gordo", que se ha puesto de moda en los últimos años, es ahora también 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 en tuy 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 de contenidos estructurado de forma diferente para el sitio. Pero también puede servir como una especie de teaser para obtener más información. Una vez que usuario se haya desplazado por tu página web, el pie de página puede ofrecerte contenido relevante -como artículos interesantes, enlaces a redes sociales, etc.- que enganche aún más a tu 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 de los usuarios. 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 durante el uso, el aspecto temporal, así como una posible conexión inestable, pueden convertirse rápidamente en una prueba angustiosa. Afortunadamente, existen algunos patrones de diseño que ya se han ocupado precisamente de estos problemas.

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 mostrarte los principios más importantes: 

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á dispuesta 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. Resulta útil ofrecer al usuario un ejemplo de entrada en marcadores de posición predefinidos; de este modo, la información requerida se visualiza de antemano. Debe evitar las entradas de números fragmentados, porque sólo complican la entrada. Además, deben programarse de forma que toleren los espacios en blanco.
  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 varias opciones de ayuda. Hay varias formas de hacerlo: Un botón de información que ofrece 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 dar 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. La probabilidad de que aborte prematuramente es menor. Los datos personales deben solicitarse siempre al final del formulario. Al fin y al cabo, si una persona ya ha rellenado la mayor parte del formulario, es más difícil que abandone el tiempo que ya ha invertido sin ningún resultado. También es aconsejable pedir sólo la información que realmente se necesita y dar las razones para pedirla. Si está pidiendo a los usuarios de tuque se inscriban en algo, es aconsejable darles una ventaja como "Consigue siempre las mejores ofertas primero". En el último paso, debe dar una breve descripción de lo que sucederá a continuación, y de lo que el usuario puede esperar y cuándo.

Además, sus formularios deben integrar el llenado automático (a través de los datos almacenados en el navegador) y el reconocimiento de la información (como añadir la ciudad después de introducir un código postal). Con WordPress en particular, muchos formularios ya tienen esto 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

Cualquiera que dirija un sitio web debería prestar especial atención a la cuestión de cómo está estructurado el contenido tussitio : ¿Ayudan a los visitantes de tua orientarse bien en tusitio ? ¿Se puede acceder fácilmente a los contenidos de tuy se puede entender su jerarquía? 

La cuestión de la fácil accesibilidad es especialmente atractiva para los usuarios que ven tusitio en condiciones alteradas. Por ejemplo, las personas con trastornos de la 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 esto es la llamada "lista de artículos". Aquí se categoriza el contenido de tuy se muestra sólo una pequeña sección a la vez. De este modo, puede mostrar 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 de 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 tussitio y permiten al usuario concentrarse 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: En principio, bloquean cualquier margen de maniobra para el usuario mientras el modal esté abierto.

Sin embargo, cuando se utilizan correctamente, los cuadros modales pueden ayudar a los visitantes de tua entender 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. Son especialmente conocidos el clic en una X en la parte superior derecha de la imagen o el clic fuera de Box para volver a cerrarla.

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

Aquí se debe actuar principalmente según la función: ¿Qué tipo de imágenes muestra? ¿Tienen que estar necesariamente disponibles en pantalla completa? ¿Y qué es más importante: el contenido de tuen su conjunto o las imágenes individuales? ¿Vale la pena utilizar otras opciones, como una lupa que amplíe las imágenes de tual 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 ser capaces de 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 esto. Y hacer clic en cada imagen individualmente o navegar por una presentación de diapositivas minimizaría la eficacia de sitiomuchas veces.

A lo largo del proceso de implantación y concepción, nunca hay que perder de vista la cuestión del beneficio/valor añadido y la importancia.

4. jugar en los canales sociales

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

Conclusión sobre los patrones de diseño de la interfaz de usuario

En conclusión, puedo recomendar dos enfoques principales. 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 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 tuspiensan de forma sorprendentemente diferente a usted. 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 tussitio .

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

No dude en utilizar la función de comentarios. ¿Quieres estar informado de los nuevos artículos y consejos sobre diseño y desarrollo web? Entonces síganos en Twitter, Facebook o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

Tu dirección de correo electrónico no se publicará.