Patrones de diseño de interfaz

Los patrones de diseño de interfaz son soluciones recurrentes que resuelven problemas comunes de diseño, son puntos de referencia estándar para el diseñador.

Para que una solución sea considerada un patrón debe poseer ciertas características. Una de ellas es que debe haber comprobado su efectividad resolviendo problemas similares en ocasiones anteriores. Otra es que debe ser reutilizable, lo que significa que es aplicable a diferentes problemas de diseño en distintas circunstancias.

Utilizar patrones no es una obligación, es aconsejable únicamente en el caso de tener el mismo problema que ha sido resuelto mediante un patrón, siempre teniendo en cuenta que en un caso particular puede no ser aplicable. Sin embargo en muchas ocasiones el reconocimiento de patrones de diseño por parte del usuario es una manera de facilitar el uso de un sistema, una aplicación que resulta familiar es más probable que sea usada como lo dice  La Ley Jakob para la experiencia de usuario.

Para ponerlo más claro, les dejo los siguientes ejemplos:

Drag and drop

Se utiliza cuando se permite que los usuarios realicen tareas más complejas mediante la manipulación directa. Es una manera de seleccionar, la restricción es que resulta útil para pocos items.

Es conceptualmente similar al mundo físico proporcionando un nivel de manipulación directa que pocos métodos pueden igualar. Se ve como una de las maneras más efectivas de reorganizar elementos de una lista, mover objetos de un lugar a otro o incluso subir archivos.

drag-and-drop-cover1

Wizard

Se usa para dividir una tarea compleja en una secuencia de pasos sucesivos para simplificarla. Cada paso representa un espacio mental separado, más fácil de tratar solo que como un todo. Los pasos necesarios para realizar una meta pueden variar dependiendo de la información introducida en etapas anteriores.

Cuando los usuarios se ven obligados a seguir un conjunto de pasos predefinidos, es menos probable que pierdan aspectos importantes de un proceso y, por lo tanto, cometan menos errores. Los wizard se utilizan frecuentemente para el usuario inexperto. Por esta razón este deberá ser diseñado para completarse sin entrenamiento previo.

wizard 1
www.http://ui-patterns.com/

Pestañas de Navegación

Se utiliza cuando hay entre dos y nueve secciones de contenido que necesitan un modo de navegación plano y cuando los nombres de las secciones son relativamente cortos. Este patrón se deriva de la idea de carpetas en un archivador y, por tanto, son familiares para el usuario final.

Las pestañas de navegación proporcionan una indicación visual clara de qué contenido se puede encontrar en un sitio web y sitúa la ubicación actual en contexto resaltándola.

tabbed navigation
Dashboard for streaming Control Panel por 

Notificaciones

es utilizado cuando desee llamar la atención sobre actualizaciones o mensajes relevantes. Notifica a los usuarios sobre las actualizaciones importantes mientras se centran en otros lugares.

notifications.png
Notifications Dropdown por Zeki en Dribbble

Medidor de seguridad para contraseñas

Al mostrar un medidor de fuerza de contraseña junto al campo de contraseña, el usuario se ve obligado a considerar el uso de una contraseña con una resistencia adecuada. Al poner un nivel mínimo de fuerza de contraseña, puede incluso utilizar el medidor de fuerza de contraseña para forzar una mayor seguridad a su sitio web.

strength-meters
https://css-tricks.com

 

¿Qué te pareció el artículo? ¿Cuál es la opinión acerca de los patrones de diseño? Si tienes dudas o comentarios no dudes en compartirlos.
Fuentes:

  1. https://www.theodo.fr/blog/2017/04/adding-drag-drop-to-your-web-app-the-simple-way-demos/
  2. http://ui-patterns.com/patterns
  3. https://css-tricks.com/password-strength-meter/
  4. https://es.wikipedia.org/wiki/Patr%C3%B3n_de_dise%C3%B1o