Cómo usar patrones de diseño de 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, los mejores de estos se elevan por encima del ruido, se identifican a sí mismos y se refinan hasta que alcanzan el estado de un patrón de diseño.
No me gustaría llamar a una paternidad de diseño una tendencia en el diseño web, los patrones de diseño parecen ser más sobre mirar cómo se clasifican los diseños comunes en retrospectiva, en lugar de forjar un nuevo territorio o mirar hacia dónde van las cosas.
¿Cómo debe 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? Volvemos 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 para usar un patrón de diseño incluyen:
- mostrando a los principiantes cómo usar 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 opciones desconocidas;
- reduciendo el flujo de trabajo de tiempo y costos necesarios para llevar a cabo tareas específicas;
- evitar el tiempo perdido en construir algo que se haya construido antes;
- dando al usuario una experiencia con la que está familiarizado y con la experiencia (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 completamente a los dispositivos móviles.
- Parallax Scrolling: un patrón de diseño único que permite el 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.
Aunque tanto el menú de 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 tener en cuenta al evaluar un patrón de diseño y adaptarlo a sus propias necesidades:
- Resumen del problema: ¿qué problema del usuario estás resolviendo? Manténgase enfocado y formémoslo 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), obtener entradas del usuario, tratar datos e integraciones con otros servicios o aplicaciones, y mostrar información y contenido (incluidos los valores predeterminados).
- Ejemplo: genial, ¿puedes mostrarme? A veces, una captura de pantalla o 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 usarse este patrón (no)? Algunas cosas para detallar incluyen arquitectura del producto, diseño de la interfaz, dispositivo (s), lenguaje de programación, ausencia o existencia de otros patrones de diseño, tipo de usuario y casos de uso primarios.
Se requiere práctica y disciplina para pensar en los patrones de esta manera si aún no lo has hecho. Tómese el tiempo para responder estas preguntas cuando diseñe su producto, ya que podría ayudarlo a ahorrar mucho tiempo en la refactorización cuando los usuarios y el equipo soliciten detalles similares.
El aumento de kits de herramientas de interfaz de usuario
Los patrones de diseño de la interfaz de usuario siempre han tratado de facilitar que el usuario navegue 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 información.
En los últimos años, hemos visto un crecimiento enorme en el mercado de herramientas de interfaz de usuario. Un juego de herramientas de interfaz de usuario se puede entender simplemente como un conjunto de widgets que le permiten crear una aplicación totalmente gráfica desde cero. Twitter Bootstrap es un ejemplo perfecto de una herramienta de interfaz de usuario exitosa. En estos días, una gran proporción de diseñadores web dependerá de las características de Bootstrap para facilitar su propio flujo de trabajo. En cierto sentido, ¡no hay necesidad de reinventar la rueda!
3 patrones de diseño de la interfaz de usuario para recordar
En resumen, los patrones de diseño son soluciones a problemas recurrentes. Al utilizar patrones, podemos superar problemas simples de la interfaz de usuario. Si prestamos mucha atención, notamos que los patrones nos rodean. No hay nada de especial en ese diseño específico, ¡es la forma en que se aplicó lo que te entusiasma!
Llamadas a la acción de Crystal Clear
Los formularios web más simples (y también los más comunes) generalmente tienen solo un botón accionable: en este caso, 'Crear sitio web'. Es bastante auto explicativo, que es el punto.
¿Cuánto más fácil podría ser, verdad? Siempre opta por la opción fácil, no reinventes 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 rutas de exploración comienzan con la página de inicio y finalizan con la página que se está viendo actualmente.
En este ejemplo por 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 combinarlos, se convierte en una experiencia de navegación muy agradable.
El registro debe ser fácil
A menos que hayas vivido bajo una roca, estarás al tanto del registro social. El registro en un sitio web es algo común que hacer, por lo que debe hacerse 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 principal, 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 posibilidad de registrarse mientras viaja y el proceso tarda menos de un minuto en completarse. Recibirá un correo electrónico para verificar su cuenta, pero eso es algo a lo que estamos acostumbrados de todos modos.
Ultimas palabras
Creé sitios web durante más de ocho años y durante esos ocho años me di cuenta de que la simplicidad es la clave de muchos problemas de diseño.
Llegué a la conclusión de que el desorden en el diseño, repleto de elementos y formas innecesarios, es la experiencia más frustrante que puede encontrar en la web. Sí, el diseño es exactamente cómo funciona algo, ¿por qué no hacer que funcione correctamente? La interfaz de usuario (UI) es increíblemente importante para el éxito de su empresa o empresa.
La mejor manera de asegurarse de que está diseñando sitios exitosos es aprender y utilizar patrones de diseño existentes.