Cómo diseñar para la web utilizando patrones de diseño

Los patrones de diseño son la base de la buena usabilidad del sitio web y son las piezas sobre las que se construyen los sitios web. Son una decisión de diseño estratégica que toma un diseñador web para garantizar una buena experiencia de usuario. El trabajo de un diseñador es resolver problemas comunes de usabilidad y crear la solución más intuitiva para el usuario, y los patrones crean una experiencia de usuario predecible, intuitiva y optimizada. Ya sea que sea nuevo en el diseño o un profesional experimentado, debe estar al tanto de los patrones de diseño de interfaz de usuario comunes y mantenerse al día a medida que evolucionan los patrones.

Ejemplos de patrones de diseño

Probablemente haya oído hablar de los componentes; elementos como botones, campos de formulario, barras de búsqueda, etc. son ejemplos de ellos. Para usarlos, puede darles un buen uso creando patrones en su diseño.

Una cosa a tener en cuenta: a veces los términos "componentes" y "patrones de diseño" se usan indistintamente. A los efectos de este artículo, los componentes son los componentes básicos de un sitio web y los patrones son formas establecidas en las que los usuarios se utilizan para realizar tareas.

Como verá, un patrón es "más grande" que un solo componente. Los patrones son la forma de optimizar lo que se hace con componentes individuales. Hay muchos patrones de diseño tradicionales, tales como:

• Un logotipo que enlaza con la página de inicio en el encabezado de un sitio web
• Navegación de hamburguesas en sitios web móviles
• Formularios de inicio de sesión con un enlace "Restablecer contraseña"
• Migas de pan que permiten a los usuarios realizar un seguimiento de su ubicación en un sitio
• Carros con contadores de artículos en ellos

¿Por qué los diseñadores deberían centrarse en los patrones de diseño?

Hay muchas ventajas en el uso de patrones de diseño. No solo hacen que su trabajo sea más eficiente como diseñador, sino que, lo que es más importante, los patrones facilitan la experiencia de sus usuarios.

Los patrones de diseño establecen confianza

Los usuarios hacen suposiciones rápidas en el momento en que llegan a su sitio. En una fracción de segundo, determinan si vale la pena interactuar con el contenido o si deben buscar otra opción.

¿Es su sitio fácil de navegar? ¿Es fácil encontrar la información que buscan sus usuarios? No tendrán la paciencia para hacer clic y solucionar problemas. Es absolutamente fundamental dar una buena primera impresión y generar confianza con los usuarios.

En lo que se ha convertido en la historia de la web, ciertos patrones se han vuelto comunes. Los diseñadores se han basado en estos elementos establecidos de la interfaz de usuario para diseñar sitios web y los usuarios se han acostumbrado a ver estos patrones de diseño. Reconocen los puntos en común entre los sitios y confían en lo que les es familiar.

Tomemos un ejemplo de un patrón de diseño establecido en un sitio de comercio electrónico. Los usuarios están acostumbrados a ver pequeñas vistas previas de productos en una cuadrícula y luego hacer clic para obtener más información sobre el artículo individual. Al usar patrones establecidos en su diseño y crear una experiencia fácil de usar, está generando confianza con sus usuarios, además de que es más probable que regresen.

Los patrones de diseño son intuitivos

A medida que los usuarios interactúan con su sitio, el factor de previsibilidad se vuelve muy importante. [twitter_link]Los patrones predecibles permiten la experiencia más intuitiva.[/twitter_link] Tener patrones familiares es clave, pero también es importante asegurarse de que esos patrones se usen de manera consistente.

Un ejemplo de patrón común y predecible se encuentra en los formularios. Específicamente que todos los formularios proporcionen mensajes de validación y error. ¿Todos los formularios en su sitio hacen esto consistentemente? ¿Están todos los mensajes en el mismo lugar? ¿Qué tal el botón de enviar? ¿Hay un mensaje que indica que el formulario ha sido enviado?

Desde una perspectiva de diseño, los usuarios se han encontrado con estos patrones muchas veces antes. Proporcionar validación de formulario con mensajes útiles indica al usuario dónde están los problemas, y tener un mensaje que indique que el formulario ha sido enviado es un indicador útil de que se ha llevado a cabo una acción.

Puede parecer de sentido común cuando escucha que los patrones y la previsibilidad son necesarios para una buena experiencia de usuario. Sin embargo, no es demasiado difícil encontrarse con sitios que rompen patrones comunes, lo que puede causar frustración o confusión. Con eso en mente, siga diseñando con patrones de interfaz de usuario útiles. Cuanto más los usuarios estén familiarizados con ellos, más sabrán qué comportamiento esperar. Los patrones y las convenciones evitan que los usuarios se confundan, y apegarse a los patrones crea una experiencia predecible.

Los patrones de diseño proporcionan un lenguaje común entre los diseñadores

[twitter_link]Las grandes experiencias comienzan con un diseño eficaz.[/twitter_link]

En muchos casos, los diseñadores trabajan en equipo. Ayuda al equipo a trabajar de manera más eficiente cuando existen patrones de diseño establecidos. No hace falta reinventar la rueda si el problema ya está resuelto.

Mantener todos los patrones en una guía de estilo de front-end central es un excelente lugar para mantener el inventario. Como recurso global, es una guía rápida para que todos los miembros del equipo comprendan el caso de uso de cada patrón. Incluso si está trabajando solo, hacer un seguimiento de los patrones de diseño que está utilizando le permitirá trabajar de manera más eficiente y mirar hacia atrás en el futuro.

La fase de planificación

Está bastante claro por qué se deben utilizar los patrones de diseño, pero ¿cómo los diseñan los diseñadores web cuando diseñan para la web? Aquí hay algunos consejos que ayudan a facilitar el proceso de diseño.

Use lo que ya sabe para comenzar

Si está diseñando un rediseño completo o una "expansión" del sitio, es útil hacer un inventario y ver lo que ya sabe. Conseguir un buen punto de partida es clave. Si se trata de un proyecto completamente nuevo, es importante pensar en estas cosas y esperar que algunas preguntas sean desconocidas al principio. Para esta situación, usar la experiencia de diseño anterior para comenzar es un buen primer paso. Esto informa las decisiones iniciales porque han trabajado en otros proyectos.

Investigación inicial

La investigación es clave para una base sólida del proyecto. Como bien sabe, los usuarios siempre buscarán la forma más fácil de realizar una determinada acción en un sitio web. Comprender los problemas y las tareas en cuestión garantizará que esté diseñando lo correcto. Para empezar, piensa en estos elementos:

• ¿Quiénes son los usuarios actuales? (Sus objetivos, demografía, etc.)
• ¿Qué más quieres saber sobre estos usuarios?
• ¿Con qué patrones interactúan más?
• ¿Hay algún patrón con el que estos usuarios tengan problemas?
• ¿Qué mejoras se pueden hacer?
• ¿Qué nuevas funciones se están diseñando?
• ¿Puede funcionar cualquier patrón establecido actualmente?

La fase de investigación es el momento de identificar lo que sus usuarios deben lograr al interactuar con su sitio web. Ejemplos serían cosas como buscar contenido, suscribirse a un boletín, realizar una compra, etc. Frente a elementos familiares, los usuarios necesitarán menos tiempo para pensar y tendrán más razones para convertir. Mantenga el diseño centrado en la creación de patrones de una manera que les resulte familiar a sus usuarios en función de su conocimiento existente de lo que experimentan en la web.

Al resolver problemas de diseño, el tiempo y el presupuesto siempre son un factor, pero investigue lo más que pueda. Es su momento de descubrir los principales puntos débiles de sus usuarios y estudiar los patrones de diseño existentes. ¿Qué es común en la web? ¿Qué patrones ha utilizado con éxito en el pasado? Una vez que defina los problemas que necesita resolver, explore sitios con patrones que apunten a los mismos objetivos de usuario. Eso servirá como buena inspiración para el proyecto. No es necesario "copiarlos", pero es útil tomar nota de lo que hay.

Hasta este punto, le he recomendado que se mantenga consistente y predecible. Vale la pena mencionar que los patrones existentes se pueden modificar y puede haber casos para hacer algo nuevo. Solo asegúrese de que si está introduciendo un nuevo patrón, esté justificado por los datos del usuario y esté bien probado.

Diseño para la web con patrones de diseño

Prototipo y Pruebas

Después de la fase de investigación, es hora de comenzar a poner en práctica lo que ha aprendido. Aquí es donde el diseño cobra vida con la creación de prototipos. Dependiendo de su proceso, los prototipos pueden ser simples estructuras alámbricas de baja fidelidad o diseños más complejos de alta fidelidad.

Comience con los patrones existentes de su investigación como referencia. A medida que avanza en el proceso, asegúrese de que el prototipo cubra todas las funciones que necesita y que tenga en cuenta todos los objetivos de los usuarios. Puede tomar un poco de revisión y ajuste para llegar a un buen punto de partida.

Una vez que esté seguro de que todos los requisitos están incluidos en el prototipo, es hora de realizar algunas pruebas para obtener información sobre la usabilidad del diseño. Aquí es donde validará la efectividad de los patrones de diseño junto con la funcionalidad general.

La razón por la que las pruebas son tan importantes en la fase de prototipo es que, en algunos casos, los clientes no pueden articular o predecir completamente sus pensamientos y necesidades. Las pruebas de usuario les permiten mostrar en lugar de decir. Los participantes demuestran cómo utilizarían realmente el sitio, mientras usted observa y aprende de sus acciones. Esto es útil tanto para los participantes como para usted como diseñador.

Es importante tomar notas sobre los objetivos principales de los usuarios cuando realice pruebas, para mantenerse enfocado. Después de invitar a los participantes de la prueba, coloque el diseño frente a tantos usuarios como pueda. Si las limitaciones de tiempo son estrictas, asegúrese de probar con al menos cinco usuarios.

El tema de las pruebas de usuario es un tema completo en sí mismo. Elija el método que tenga más sentido según su tiempo y presupuesto. Sería genial tener siempre el tiempo adecuado, pero esto no siempre es posible. En un apuro, las pruebas de usabilidad de "pasillo" o "estilo cafetería" pueden ser útiles (una prueba de usabilidad configurada en un área de alto tráfico peatonal, utilizando personas que pasan caminando para probar su producto). Incluso involucrar a un par de compañeros de trabajo siempre es mejor que no realizar ninguna prueba.

Lo más probable es que sus patrones de diseño no sean perfectos desde el principio. Será necesario realizar cambios y más pruebas para validar el diseño actualizado. Sin embargo, obtendrá más información de cada fase de prueba y podrá incorporar lo que ha aprendido para continuar iterando y probando hasta que se optimice el diseño.

Los patrones de diseño web garantizan una experiencia de usuario uniforme. A continuación hay enlaces útiles que brindan más información para comenzar:

• Guía completa para las pruebas de usuario
• La cirugía de cohetes de Steve Krug es fácil
• Ejemplos de guías de estilo