Introducción a los Patrones de diseño. ¿Qué hacer y qué no hacer?
Soy Hernan Lucio, UX Mobile Designer en Mercado Libre y Profesor UX en Coderhouse Argentina.
La idea de este post es abordar algunas de las herramientas que tenemos a la hora de diseñar nuestro sitio o aplicación mobile.
Existe una situación que se repite: tenés todo preparado, la Mac, el Sketch, algunos referentes visuales y tu idea. Sin embargo, te sentás frente a la computadora y la pantalla en blanco te espanta. No sabes por dónde comenzar.
No desesperes. Esta es una sensación muy común cuando nos sentamos a diseñar. Afortunadamente, existen algunos recursos y herramientas para enfrentarlo.
Cuando comenzamos un proceso de diseño estamos buscando alguna solución a un problema existente. Ahora bien, como todos sabemos, en la búsqueda de una solución podemos recurrir a la “rueda” o podemos “re-inventarla”. Todo dependerá de la complejidad del problema, pero como diseñador puedo decir que más de una vez las soluciones se encuentran utilizando “la rueda ya inventada”.
En otras palabras, frente a un problema de diseño, podemos recurrir a los “patrones de diseño de interacción”.
Pero ¿qué son?. Tal vez nunca hayas escuchado hablar de ellos, sin embargo, como usuario de sitios o aplicaciones mobile los utilizas todos los días sin darte cuenta.
Origen
Su origen poco tiene que ver con las apps o los sitios web, ni siquiera con el diseño gráfico. Los patrones de diseño son un concepto de la Arquitectura
creados por el Arq. Christopher Alexander frente al desafío de la construcción urbanística. Según el autor:
“Cada Patrón describe un problema que ocurre una y otra vez en nuestro ambiente, y luego describe el núcleo de la solución a ese problema, de forma tal que esa solución puede ser usada un millón de veces, sin hacerlo de la misma manera dos veces.”
Entonces, un patrón de diseño de interacción es una solución que da respuesta a problemas comunes de diseño. Utilizarlos no solo agiliza el proceso de diseño, también, asegura que el usuario de nuestra aplicación pueda sentirse más cómodo ya que estará familiarizado con otros patrones de diseño similares.
Una solución es considerada “patrón de diseño” si la misma comprueba su efectividad y reutilizamiento. Es decir, demuestra que ha resuelto problemas similares, y que dicha solución puede ser aplicada en diferentes problemas de diseño.
Objetivos de los patrones de diseño
- Evitar la búsqueda de soluciones a problemas solucionados anteriormente.
- Brindar un catálogo de elementos reutilizables.
- Estandarizar el modo en que se realiza el diseño.
- Facilitar el aprendizaje de las nuevas generaciones de diseñadores.
- Estipular un vocabulario común entre diseñadores.
Otro aspecto no menor es que el uso de patrones no es obligatorio. Pero es de vital importancia conocerlos para tenerlos en nuestra “caja de herramientas” y utilizarlos siempre que sea necesarios.
Antes de aplicarlos, es importante tener en cuenta el tipo de problema a resolver, su contexto de uso y su relación con otros patrones. Aplicar un patrón de forma aislada o forzar su utilización es tan grave como no utilizarlos.
Dicho esto, podemos comenzar a hacer nuestro recorrido por algunos de los patrones de diseño de interacción más comunes:
Pestañas
Este patrón es de utilidad cuando queremos mostrar contenido agrupado ya que permite encontrar información sin cambiar la vista actual dividiendo así los datos en diferentes secciones.
Es importante remarcar que las pestañas sólo se aplican cuando el contenido a mostrar posee el mismo nivel jerárquico entre las diferentes pestañas. De lo contrario, no deberíamos utilizar este patrón.
Por otro lado, el patrón de diseño indica que es necesario destacar la pestaña seleccionada, manteniendo así el orden y la ubicación inicial.
Pro
- La distribución de datos entre diferentes secciones es lineal.
- Como su origen proviene de las interfaces web, los usuarios probablemente estén familiarizados desde el principio con ellas.
Contra
- Ocupa mucho espacio en la zona superior de la pantalla. Disminuyendo asi la zona para el contenido.
- Cuando se utilizan más de 3 pestañas, queda poco espacio para agregarles etiquetas a cada una.
Compartir
Probablemente sea una de las acciones que más hayas utilizado en tu teléfono a partir del fuerte empuje de las redes sociales.
Pro
- Es un mecanismo estándar en todos los teléfonos, de manera que los usuarios lo pueden aprender y reconocer fácilmente.
- Es directo y sencillo de utilizar.
- Las opciones a compartir se actualizan automáticamente según las aplicaciones que tengamos instaladas.
Contra
- La lista de servicios para compartir no es muy inteligente. Las aplicaciones no aparecen en orden de mayor relevancia.
- La lista de servicios puede hacerse más larga de lo que el usuario realmente necesita.
Cuadro de diálogo
Un cuadro de diálogo es una una pequeña ventana que aparece al frente de la actividad actual de una aplicación, cambiando así el foco del usuario.
Los cuadros de diálogo informan sobre situaciones críticas ya que requieren que el usuario tome una decisión. Esto podrá hacerse mediante botones o una lista de elementos seleccionables.
Mientras los diálogos estén visibles en la pantalla, no es posible realizar otra acción. Es por eso que es recomendable limitar su uso para mensajes importantes.
Pro
- El usuario no puede saltearse el cuadro de diálogo, por lo que es una buena manera de evitar que el usuario cometa errores. Ej: eliminar un dato por accidente.
Contra
- Significa un paso adicional en la adopción de una acción.
Listas
Las listas son una manera simple y directa de mostrar tantos items como sean necesarios. De esta manera permite acceder a mayor información al tocar cada uno de los items desplegados. También pueden mostrar tanto texto como imágenes, pero es importante jerarquizar el contenido según la lista que estemos diseñando. Por ejemplo, en una lista de artistas de música, será más importante su fotografía y nombre, que la cantidad de canciones que tenemos en nuestro teléfono.
Adicionalmente, cuando la lista posea muchos elementos, podrá agregarse un sistema de índice.
Pro
- Es una manera sencilla de proporcionar navegación.
Contra
- Cuando la lista es demasiado extensa el usuario puede perder el sentido de la visión general.
Hasta acá, hicimos un repaso de algunos de los patrones de diseño de interacción de aplicaciones de teléfono.
¿Cuántos de estos patrones ya conocías?. Si te interesa aprender más te recomiendo que investigues las Guías oficiales de iOS y Android.
Antipatrones
Así como hablamos de los patrones de diseño, existen también los “Antipatrones”. Como su nombre lo indica, es un patrón que conduce a una mala solución frente a un problema determinado. Conocerlos es útil para saber por qué camino no debemos transitar cuando estamos en búsqueda de una solución.
Un diseñador evitará los antipatrones siempre que sea posible. Algunos ejemplos a continuación:
NBC News
Analicemos esta aplicación. ¿Qué patrones crees que se han roto? ¿Cuáles serían sus antipatrones?
Miremos el menu. Su ubicación no es la estándar. El patrón de diseño dirá que su posición deberá ser arriba a la izquierda.
¿Y el icono? ¿Alguna vez viste ese icono para un menú?. Este icono también rompe las reglas. Por lo general el icono del menú se indica mediante tres líneas horizontales.
Por otro lado, una vez abierto el menú, el texto aparece rotado. Haciendo que su lectura sea muy extraña. Una simple lista alineada a la izquierda tomaría menos tiempo para leer por el usuario.
Miremos otro ejemplo:
Una de las diferencias entre una buena experiencia de usuario y una mala es la eficiencia. Es decir, permitirle al usuario ser productivo con el menor esfuerzo posible.
En este ejemplo, podemos ver como Facebook introduce la interacción del arrastre de usuarios (drag & drop) para poder cerrar una ventana de chat. El problema es que no tiene en cuenta el esfuerzo extra que requiere por los usuarios. ¡Otro antipatrón!.
Jamie Oliver’s Recipes
Como vimos al principio del post, el patrón de diseño de “Diálogo” es recomendable cuando tenemos que frenar una acción del usuario por alguna situación crítica. Pero ¿qué pasa cuando los utilizamos en situaciones que no lo ameritan? esto es lo que hace la aplicación “Jamie Oliver’s Recipes”.
Esta aplicación utiliza un cuadro de diálogo por cada acción que emprende el usuario, duplicando así el gesto sobre el teléfono y el proceso cognitivo del mismo.
Un buen uso del diálogo sería utilizarlo cuando tenemos que eliminar algo de manera definitiva, ya que esto previene la eliminación de algún dato por error. Pero en el caso de agregar algo a la lista de shopping, el uso del diálogo es totalmente innecesario. ¡Antipatrón!.
Conclusión
El conocimiento de patrones y antipatrones es fundamental a la hora de encarar un proyecto de diseño. Utilizar sitios web, apps, entender cómo funcionan y cómo solucionaron sus problemas nos nutre y nos ayuda a encarar nuestros proyectos de diseño con mejores herramientas.
Ahora, nunca más vas a arrancar un diseño sin saber por dónde empezar. Si tenés un problema de diseño, seguro haya un patrón que pueda ayudarte :)
Por último te dejo algunas librerías de patrones muy útiles. Yo las utilizo a diario en mis proyectos:
¿Que te pareció este post?. Si querés saber más sobre Diseño de Experiencia de Usuario seguime en Twitter ;)
