Krypton Solid

La última tecnología en raciones de 5 minutos

Cómo utilizar los patrones de diseño de la interfaz de usuario

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).
clicky

En el ejemplo anterior vemos Clicky Media utilizando dos patrones de diseño muy populares en la actualidad:

  1. 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.
  2. 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.
CONTENIDO RELACIONADO  Las nuevas tarifas económicas básicas de United Airlines prohíben el equipaje de mano

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:

  1. 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.
  2. 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).
  3. 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.
  4. 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.

CONTENIDO RELACIONADO  Microsoft "lo dice todo" dice poco

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.

wordpress

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.

CONTENIDO RELACIONADO  SWAP es un shooter de arena en primera persona sin armas.

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.

migas de pan

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!

github

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.

Deja un comentario

También te puede interesar...

Lugares de compras designados como ciber centros

Cuando piensa en los centros cibernéticos, donde las empresas con el estado de Multimedia Super Corridor (MSC) pueden establecer oficinas, normalmente no pensaría en centros comerciales, pero dos de esos lugares han recibido este estado.

Don Dodge responde al cuestionario de Proust

Don Dodge es un tipo de desarrollo empresarial y evangelista de Microsoft, además de uno respetado. blogger de tecnología . ¿Dispositivo al que nunca renunciarías? Mi teléfono Motorola Q. Es mi teléfono, mi correo electrónico,

El software antivirus tapa los agujeros de gusano

Security Network Associates presentó el lunes un nuevo software antivirus, diseñado para prevenir que «una onza de prevención vale una libra de cura». El nuevo programa, llamado ThreatScan, está diseñado para agregar una herramienta proactiva

Abogado del diablo: secretos de compra en eBay

Es más fácil de lo que piensas … Con la información personal almacenada en los discos duros de las computadoras de tan fácil acceso, parece que nuestros procedimientos de seguridad no están a la altura

Cómo conducir UX con AJAX

Cómo conducir UX con AJAX Dado que el uso de Internet móvil eclipsa la navegación web basada en escritorio, es más importante que nunca que los sitios web se creen con énfasis en cargas rápidas

Definición de base de efectivo

¿Qué significa la base de efectivo? La base de efectivo se refiere a un método de contabilidad importante que reconoce los ingresos y los gastos cuando se recibe o se paga efectivo. Esto contrasta con

Dirección de Internet empresarial IPv4

¿Quiere comprar un bloque de direcciones de Internet IPv4? Adrex puede ayudar. Todos sabemos que nos quedamos sin IPv4, el antiguo Protocolo de Internet (IP), direcciones). Si trabaja en redes, sabe que debe comenzar a

Cómo funciona invertir en una propiedad llave en mano.

En el mercado inmobiliario existen muchas oportunidades de inversión. Dependiendo de la calificación, capital, ubicación y/o intereses del inversionista, pueden estar disponibles varias opciones. Invertir en bienes inmuebles públicos vs. Privado es a menudo un

APN, Pollenizer entintan el nuevo negocio social

en breve La editorial australiana APN y la incubadora de empresas emergentes Pollenizer han firmado un acuerdo para que los dos trabajen en un nuevo servicio de redes sociales llamado Friendorse. APN ha tomado una