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

Sonja Hoffmann Actualizado el 21.10.2020
11 Min.
Patrones de diseño de la interfaz de usuario
Actualizado por última vez el 21.10.2020

¿Cómo debería estructurarse el tus menú de la página web? ¿Por qué es más fácil para algunos operadores de sitios web conseguir suscriptores que para otros? ¿Qué hace que los usuarios rellenen o ignoren el formulario del tus sitio web? Como diseñador, he estado tratando con preguntas sobre el diseño de la interfaz de usuario y la usabilidad de la web - encontrarás 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 descrito, la buena usabilidad ayuda a guiar a los tu usuarios sin problemas a través de tu sitioun tu producto o tu marca.

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

¿Cómo sabes qué patrones de diseño son apropiados para un tu sitio web y cómo usarlos 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é es lo que el usuario trata de lograr en el tus 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: Resumir el análisis de los resultadostus . ¿Cómo puede implementarlos en su tus 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 los tu resultados allí.

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: funciona no sólo como una tabla de contenidos para tu sitio, sino también como una ayuda de orientación. El hecho de que normalmente se coloque en la parte superior o en el lateral fue originalmente por razones jerárquicas. Con la navegación mostramos al usuario de un vistazo lo que puede sitio hacer en el nuestro 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 adaptables - o incluso tienen que ser tu sitio individualizados para que funcionen.

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 UI y aún así las han adaptado a las suyassitio : 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" - el comienzositio .

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 pueden utilizarse para mostrar animaciones impresionantes, sino que también aseguran que los tus visitantes de un 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:

Sus sitio creadores sitio han hecho suyo el conocimiento del menú de la hamburguesa móvil: por un lado, para facilitar una navegación minimalista que no sea ajena al usuario. Por otro lado, para seguir ofreciendo 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 al principio de la sitio lista 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. Además, hacen que el tu diseño se vea más ordenado y claro. Los menús desplegables pertenecen a los Patrones de Diseño, que a menudo también 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 primario del sitio 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 datos de tu contacto y mostrar contenido legal que no tiene cabida en la navegación principal. 

El pie de página funciona entonces en parte como un índice de estructura diferentetus sitio. Pero también puede servir como una especie de bromista para obtener más información. Una vez que el usuario se tu sitio ha desplazado, 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 un indicador (en este caso la barra de carga) le muestra al usuario dónde se encuentra en el formulario, 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. Porque si el visitante de un sitio tu web ya ha rellenado en gran medida el formulario, le resulta más difícil renunciar al tiempo ya 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 se pide a los tu usuarios que se inscriban en algo, es aconsejable indicar un beneficio para ellos a la "Siempre obtener las mejores ofertas primero". 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. estructuración de tus los contenidos

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

La cuestión de la facilidad de acceso es particularmente atractiva para los usuarios que tu sitio miran las cosas en circunstancias diferentes. Por ejemplo, las personas con trastornos de la visión de color y discapacidades visuales. Si desea tratar el tema de la accesibilidad y el acceso sin 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 tu contenido y se muestra sólo una pequeña sección del mismo. De esta manera se pueden mostrar muchos temas de un vistazo sin inundar de información a los tu usuarios. 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 tus sitio del contenido y permiten al usuario concentrarse sólo en el contenido. Esto puede ser necesario e importante. Nótese, sin embargo, que estos modales también tienden a ser anti-patrones: En principio, 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 tu 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: tu ¿el contenido en su conjunto o las imágenes individuales? ¿Vale la pena recurrir a otras posibilidades, como una lupa que amplía las tu imágenes cuando se cierne? Este último es particularmente 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 sistema 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

Esto incluye patrones que ayudan a guiar a los tu usuarios a sus canales de medios sociales y/o 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 tus de la websitio piensan sorprendentemente diferente a ti. Puede que no conozcan el tu producto todavía. Por lo tanto, realice varias pruebas repetidas veces para poder evaluar cómo es la utilidad en tus sitio la realidad.

¿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 nuestro Boletín de noticias.

Después de estudiar Diseño de Juegos y Escritura Creativa en la verde Auckland, se ha especializado Sonja Hoffmann en 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

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