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. Un patrón de diseño resulta ser una solución a un problema de diseño.

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

Guía rápida de diseño de interfaz para NO diseñadores.

Aprender diseño visual lleva tiempo y práctica pero afortunadamente existen tips que pueden hacerlo más fácil y dan buenos resultados. Si no eres diseñador de interfaces pero te toca hacerlo en tu trabajo, abajo te dejo algunas recomendaciones que pueden servirte.

Alinea los elementos de la interfaz.

La desalineación de los elementos de una interfaz (imágenes, bloques de texto, videos, botones, etc) hace que una pantalla sea vea desorganizada y que las personas no sepan qué hacer.

Usa una cuadricula como referencia, la alineación de los objetos va a mejorar mucho el diseño y hacerlo más organizado visualmente.

Screen Shot 2017-09-01 at 11.51.57 AM
Fuente: https://developer.apple.com/design/tips/

Usa suficiente contraste.

Usa colores que brinden suficiente contraste en el fondo y el texto para no dificultar la vista. Fondos blancos y textos negros son la mejor opción. Evita el amarillo, verde y grises muy claros.

Screen Shot 2017-09-01 at 11.58.09 AM
Fuente: https://developer.apple.com/design/tips/

Menos es más.

Como lo dijo el Arquitecto Mies van der Rohe: menos es más, esto significa “reducir algo a lo mínimo, a los elementos esenciales que componen la cosa. Todo lo demás disturba.”

Trata de ser minimalista a la hora de diseñar, los sitios simples con poca saturación de colores, imágenes, animaciones, etc. se ven actuales. Si le sumas una buena alineación a este punto el producto va a ser un diseño más organizado.

simple design.jpg
Fuente: Pinterest.

Primero lo importante.

Muestra el contenido importante primero y hazlo resaltar, la función modular del sistema deberá estar a la mano siempre. A esto se le llama jerarquía visual y es importante en diseño web para priorizar el contenido mediante el diseño.

Screen Shot 2017-09-01 at 12.11.41 PM
Fuente: https://developer.apple.com/design/tips/

Tamaño del texto e interlineado.

Usa tamaños de textos que sean legibles, aumenta el tamaño del texto para que sea fácil de leer y usa interlineados que le den espacio al texto.

Screen Shot 2017-09-01 at 12.16.33 PM
Fuente: https://developer.apple.com/design/tips/
Screen Shot 2017-09-01 at 12.18.11 PM
Fuente: https://developer.apple.com/design/tips/

Usa paletas de colores ya definidas.

El buen manejo del color es un arte que no todos dominamos. En este caso, busca paletas de color ya definidas o puedes ayudarte de Adobe KulerColor Tool de Material Design.

Screen Shot 2017-09-01 at 12.35.08 PM

Screen Shot 2017-09-01 at 12.36.27 PM

Aprovecha las convenciones visuales.

Usar patrones que los usuarios identifican y saben usar es la manera de facilitar el uso de una aplicación. Las convenciones son eso, patrones aprendidos por los usuarios. Por ejemplo cuando al dar click al logo en una web te dirige al Home, el color azul de un link, el ícono de carrito para la cesta de compra en un e-commerce, el hover de un botón, etc.

Aprovecha los conocimientos de los usuarios y no trates de innovar cuando no es necesario. Los usuarios buscan familiaridad en los sitios que usan.

Sigue las guías de diseño de Apple o Google.

Google Material Design y Apple Human Interface Guidelines son guías donde se establecen las mejores prácticas de diseño de interfaces y experiencias, son súper útiles y tienen recursos gráficos como íconos, colores, guías de diseño, etc.

 

Con esta sencilla guía notarás cambios en las interfaces que diseñes pero sé persistente, aprender a diseñar lleva práctica y tiempo.

¿Qué te pareció el artículo? ¿Lo encontraste útil? Si tienes dudas o comentarios no dudes en compartirlo.

Fuentes:

  1. https://developer.apple.com/design/tips/

Freebie: Kit de elementos UI para móvil en Sketch.

La entrada de hoy es para compartir con ustedes un librería con componentes para interfaces móviles para Sketch. Esta colección fue creada por mi y está libre de derechos para usarse en cualquier sitio. ¡Disfrútenla!

Descárgalo aquí.

Si te gustó este freebie ¡compártelo!

¿Qué son las heurísticas de Nielsen?

En 1995 Jakob Nielsen una de las figuras más respetadas de la usabilidad desarrolló las 10 heurísticas para el diseño de interfaces de usuario, principios a los que llegó después de evaluar 249 problemas de usabilidad.

“Una heurística es un conjunto de reglas metodológicas no necesariamente formalizadas, que sugieren o establecen cómo proceder y qué problemas evitar a la hora de generar soluciones y elaborar hipótesis.”

Actualmente estas heurísticas sirven para realizar evaluaciones a sistemas o productos digitales para encontrar errores de usabilidad y para crear productos que sean entendibles para un determinado grupo de usuarios.

1. Visibilidad del estado del sistema: El sistema siempre debería mantener informados a los usuarios de lo que está ocurriendo, a través de retroalimentación apropiada dentro de un tiempo razonable.
error-509
2.  Relación entre el sistema y el mundo real: El sistema debería hablar el lenguaje del usuario mediante palabras, frases y conceptos que le sean familiares más que con términos relacionados con el sistema. Sigue las convenciones del mundo real para que la información aparezca en un orden natural y lógico.

shopping-cart-19

3. Control y libertad del usuario: Hay ocasiones en que el usuario elegirá las funciones del sistema por error y necesitará una “salida de emergencia” claramente marcada para dejar el estado no deseado al que accedió, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer.

modal_small

4. Consistencia y estándares: El usuario no debería cuestionarse si acciones, situaciones o palabras diferentes significan la misma cosa; sigue las convenciones establecidas.

screen-shot-2017-02-23-at-3-19-23-pm

screen-shot-2017-02-23-at-3-18-41-pm

5. Prevención de errores: Mucho mejor que un buen diseño de mensajes de error es realizar un diseño cuidadoso que prevenga la ocurrencia de problemas.

1-owgg_c9twciu1xufw1cg2g

6. Reconocimiento antes que recuerdo: Se deben hacer visibles los objetos, acciones y opciones así el usuario no tendrá que recordar la información que se le da en una parte del proceso para seguir adelante. Las instrucciones para el uso del sistema deben estar a la vista o ser fácilmente recuperables cuando sea necesario.

screen-shot-2017-02-23-at-3-33-10-pm

7. Flexibilidad y eficiencia de uso: La presencia de aceleradores que no son vistos por los usuarios novatos, puede ofrecer una interacción más rápida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que el usuario adapte el sistema para usos frecuentes.

zerolag-com-photoshop_shortcuts-infographic

8. Estética y diseño minimalista: Los diálogos no deben contener información que es irrelevante o poco usada. Cada unidad extra de información en un diálogo compite con las unidades de información relevante y disminuye su visibilidad relativa.

screen-shot-2017-02-23-at-3-37-55-pm

9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: Los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solución constructiva al problema.

mailchimp

10. Ayuda y documentación: Incluso en los casos en que el sistema pueda ser usado sin documentación, podría ser necesario ofrecer ayuda y documentación. Dicha información debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa.

screen-shot-2017-02-23-at-3-42-10-pm

 

¿Qué opinas de estos principios? ¿Encontraste el artículo útil? Si tienes dudas o comentarios no dudes en compartirlos.

¡Regístrate para recibir por email más artículos interesantes!

Fuentes:

  1. https://www.nngroup.com/articles/ten-usability-heuristics/
  2. http://www.uxabilidad.com/usabilidad/10-heuristicas-o-principios-basicos-de-usabilidad.html
  3. http://www.zerolag.com/infographics/adobe-photoshop-cs6-shortcuts-cheatsheet/
  4. http://www.material.io
  5. http://www.dropbox.com
  6. http://www.ebay.com
  7. http://www.amazon.com