Cómo utilizar los patrones de diseño de la interfaz de usuario
Los patrones de diseño son soluciones óptimas para problemas de diseño comunes. A medida que los problemas comunes se lanzan alrededor de una comunidad y se resuelven, a menudo surgen soluciones comunes. Eventualmente, lo mejor de estos se eleva por encima del estruendo, se identifica a sí mismo y se refina hasta que alcanza el estado de un patrón de diseño.
No llamaría a un patrón de diseño una tendencia en el diseño web, los patrones de diseño parecen tener más que ver con observar cómo se clasifican los diseños comunes en retrospectiva, en lugar de forjar un nuevo territorio o mirar hacia dónde se dirigen las cosas.
¿Cómo debería abordar los patrones de diseño de la interfaz de usuario?
Usamos patrones de diseño todo el tiempo, si no está familiarizado con ellos, probablemente no se haya dado cuenta de que están a su alrededor.
¿Qué pasa con el ejemplo clásico de tener demasiado contenido para mostrar en una página? Dirigimos nuestra atención a ‘Tabs’, un patrón de diseño que nos permite servir todo el contenido que queremos, sin hacer que el usuario desaparezca en un mar de enlaces.
Los beneficios típicos de usar un patrón de diseño incluyen:
- mostrar a los principiantes cómo utilizar las mejores prácticas en diseño web;
- aprender a adaptarse a la comprensión colectiva de los diseñadores;
- permitiendo una mejor comunicación, reduciendo el riesgo asociado con elecciones desconocidas;
- reducir el flujo de trabajo de tiempo y costos necesarios para realizar tareas específicas;
- evitar perder el tiempo en la construcción de algo que se ha construido antes;
- Brindar al usuario una experiencia con la que está familiarizado y experimentado (la naturaleza de los patrones de diseño).
En el ejemplo anterior vemos Clicky Media utilizando dos patrones de diseño muy populares en la actualidad:
- Navicon, un símbolo universal para el menú, también conocido como navegación del sitio, se está volviendo cada vez más popular en el diseño web moderno, pero ya se ha adaptado por completo a los dispositivos móviles.
- Parallax Scrolling: un patrón de diseño único que permite un sitio web de una sola página, con un mecanismo de desplazamiento fácil de usar, pero también incluye una lista de sprites de fondo que le dan a la página una sensación viva.
A pesar de que tanto el menú Navicon como el menú general en la parte superior de la página comparten opciones similares (sería muy molesto incluir todos los enlaces en la misma barra de encabezado), queda claro que las pequeñas elecciones pueden marcar una gran diferencia.
Esto es lo que debe pensar al evaluar un patrón de diseño y adaptarlo a sus propias necesidades:
- Resumen del problema: ¿Qué problema de usuario estás resolviendo? Manténgase enfocado y exprese como una historia de usuario, en una sola oración.
- Solución: ¿Cómo han resuelto otros este problema? Algunas cosas para detallar incluyen la navegación del usuario (incluidos los accesos directos), la obtención de entradas del usuario, el manejo de datos y las integraciones con otros servicios o aplicaciones, y la visualización de información y contenido (incluidos los valores predeterminados).
- Ejemplo: genial, ¿puedes mostrarme? A veces, una captura de pantalla o una maqueta es suficiente; otras veces, los flujos de usuario y / o notas adicionales son necesarios para comunicar claramente el patrón.
- Uso: ¿Cuándo debería (no) usarse este patrón? Algunas cosas para detallar incluyen la arquitectura del producto, el diseño de la interfaz, los dispositivos, el lenguaje de programación, la ausencia o existencia de otros patrones de diseño, el tipo de usuario y los casos de uso principales.
Se necesita práctica y disciplina para pensar en patrones de esta manera si aún no lo ha estado haciendo. Tómese el tiempo para responder estas preguntas al diseñar su producto porque podría ayudarlo a ahorrar mucho tiempo en la refactorización en el futuro cuando sus usuarios y su equipo soliciten detalles similares.
El auge de los kits de herramientas de la interfaz de usuario
Los patrones de diseño de la interfaz de usuario siempre han tenido como objetivo facilitar al usuario la navegación por su sitio web, aplicación o sistema. Si el usuario aprende a enviar un comentario por primera vez, es probable que sepa instantáneamente cómo enviarle un correo electrónico mediante el formulario de contacto, es el mismo concepto repetitivo de entrada de información.
En los últimos años, hemos visto un enorme crecimiento en el mercado de kits de herramientas de interfaz de usuario. Un conjunto de herramientas de interfaz de usuario puede entenderse simplemente como un conjunto de widgets que le permiten crear una aplicación completamente gráfica desde cero. Twitter Bootstrap es un ejemplo perfecto de un conjunto de herramientas de interfaz de usuario exitoso. En estos días, una gran proporción de diseñadores web dependerá de las funciones de Bootstrap para facilitar su propio flujo de trabajo. En cierto sentido, ¡no es necesario reinventar la rueda!
3 patrones de diseño de interfaz de usuario para recordar
En resumen, los patrones de diseño son soluciones a problemas recurrentes. Al utilizar patrones, podemos superar problemas sencillos de la interfaz de usuario. Si prestamos mucha atención, notamos que los patrones están a nuestro alrededor. No hay nada especial en ese diseño específico, ¡es la forma en que se ha aplicado lo que te entusiasma!
Llamados a la acción cristalinos
Los formularios web más simples (y también los más comunes) generalmente tendrán un solo botón accionable: en este caso, ‘Crear sitio web’. Es bastante autoexplicativo, de eso se trata.
¿Cuánto más fácil podría ser, verdad? Opte siempre por la opción fácil, no reinvente la rueda solo para destacar entre la multitud.
Pan rallado al rescate
Las rutas de navegación muestran la ruta desde la página principal del sitio hasta la ubicación actual del usuario en la jerarquía de páginas del sitio web. Son una forma de navegación secundaria que ayuda a los usuarios a comprender la jerarquía y la estructura del sitio web. Las migas de pan comienzan con la página de inicio y terminan con la página que se está viendo actualmente.
En este ejemplo de Fares Farhan, vemos cómo utiliza dos patrones de diseño de interfaz de usuario al mismo tiempo. Primero, tiene el patrón de pestañas en la parte superior y, en segundo lugar, el patrón de navegación de migas de pan en la parte inferior. Al haberlos combinado, ofrece una experiencia de navegación muy agradable.
El registro debería ser fácil
A menos que haya estado viviendo bajo una roca, estará al tanto del registro social. El registro en un sitio web es algo común, por lo que debe ser lo más fácil y agradable posible.
Esta es una de mis páginas de registro favoritas en este momento. Es el GitHub página de inicio, y como puede ver en la captura de pantalla, todo lo que representa la empresa se presenta en menos de cien palabras. También tiene la capacidad de registrarse sobre la marcha, y el proceso tarda menos de un minuto en completarse. Recibirás un correo electrónico para verificar tu cuenta, ¡pero eso es algo a lo que estamos acostumbrados de todos modos!
Ultimas palabras
He creado sitios web durante más de ocho años y durante esos ocho años me he dado cuenta de que la simplicidad es la clave de muchos problemas de diseño.
He llegado a la conclusión de que el desorden en el diseño, inflado con elementos y formularios innecesarios es la experiencia más frustrante que puede encontrar en la web. Sí, el diseño es exactamente como funciona algo, así que ¿por qué no hacerlo funcionar correctamente? La interfaz de usuario (UI) es increíblemente importante para el éxito de su negocio o empresa.
La mejor manera de asegurarse de que está diseñando sitios exitosos es aprender de los patrones de diseño existentes y utilizarlos.
