Diseñando interfaces “intuitivas” mediante Patrones de Diseño
Hace dos semanas tuve el gusto de ser invitada por los chicos de IXDA La Plata para hablar en su ciclo 2018 de Taller UX sobre uno de los temas que me apasiona, patrones de diseño, asi que acá va el resumen de lo que fue mi taller.
Comencemos por saber que los patrones de diseño viven en el ámbito de diseño de interacción, por ello no está de más recordar su definición:
“El diseño de interacción es el arte de facilitar las interacciones entre las personas mediante productos y servicios.”
Dan Saffer — Designing for Interaction
A los largo de mi carrera como uxer, recibí muchas veces de parte de los stakeholders el siguiente pedido:
Eugenia, queremos que nos diseñes un “sitio” intuitivo
Este pedido siempre me llevó a preguntarme, ¿qué es la intuición?; según wikipedia, la intuición es:
La habilidad para conocer, comprender o percibir algo de manera clara e inmediata, sin la intervención de la razón.
Entonces comencé a preguntarme cómo es posible diseñar la interfaz de un producto digital que pueda ser comprendido de forma inmediata por nuestros usuarios sin la intervención de la razón, sería algo así cómo utilizar un producto digital por medio del instinto.
El hecho es que el ser humano viene equipado al mundo con instintos muy primitivos: el instinto de respirar, llorar para comunicarse, succionar y regular la temperatura, pero de utilizar productos digitales ¡nada!.
Sin embargo cuando usamos un producto digital muchas veces tenemos la certeza que este es una interfaz “intuitiva”, esto me llevó a preguntarme de donde viene entonces la intuición.
La respuesta es simple la intuición en el uso de productos digitales es experiencia previa y aprendizaje
INTUICION = APRENDIZAJE
¿Cómo logramos que nuestros usuarios utilicen nuestros productos sin razonar?
Aquí es donde entra en juego el tema que nos compete en esta nota, ¡Patrones de Diseño! ya que su uso nos permitirá reducir la carga cognitiva del usuario al usar nuestra interfaz, generado la ilusión de “intuición” y por ende aumentando la usabilidad y mejorando la experiencia de uso.
Como se define un patrón de diseño según wikipedia:
Son la base para la búsqueda de soluciones a problemas comunes en el desarrollo de software y otros ámbitos referentes al diseño de interacción o interfaces.
En mi opinión personal:
En un producto digital los patrones de diseño permiten que ocurra la magia.
Cómo identificamos un patrón
Para que una solución sea considerada un patrón debe poseer ciertas características:
- Se debe haber comprobado su efectividad resolviendo problemas similares en ocasiones anteriores.
- Debe ser reutilizable, lo que significa que es aplicable a diferentes problemas de diseño en distintas circunstancias.
En nuestro afán por ser creativos e innovadores muchas veces buscamos nuevas soluciones a problemas para los cuales ya existe una solución, es decir un patrón, de esta forma forzamos a nuestros usuarios a volver a aprender algo que ya habían aprendido. El costo de aprendizaje no es gratuito y de esta forma obligamos a nuestros usuarios a pagarlo nuevamente. En síntesis el mundo de diseño de interacción se trata de no reinventar la rueda.
Existe una frase muy representativa de Jacob Nielsen respecto de este tema que dice:
Los usuarios pasan la mayor parte de su tiempo en otros sitios. Esto significa que ellos prefieren que tu sitio funcione igual que los sitios que ya conocen.
Jacob Nielsen — NNGroup
Es notable cuando realizamos pruebas con usuarios de nuestro sitio con usuarios que nunca compraron o navegaron en él, algunos usuarios resuelven las tareas de forma “intuitiva” esto se debe a que ya navegaron otros sitios que utilizaban los mismos patrones de diseño y por ende ya pagaron el costo de aprendizaje de la interfaz y como dijimos al principio, la intuición, no es otra cosa que aprendizaje.
Algunos ejemplos de patrones de diseño
Tanto es el valor que tienen los patrones de diseño que poseen su propio nombre y hay muchos sitios web que se dedican por completo a hablar sobre ellos, mi favorito es http://ui-patterns.com/patterns. En este sitio podemos encontrar una gran galería de ejemplos de patrones de diseño clasificados por temas según su función.
El sitio web también nos brinda un detalle de cada patrón donde cuenta qué problema resuelve, un ejemplo de la solución y los casos de uso donde este patrón puede ser utilizado, para evitar caer en el error de hacer mal uso de un patrón de diseño, es decir utilizarlo para resolver un problema para el cual no fue creado.
Otros sitios donde podemos obtener ejemplos de patrones de diseño
http://ui-patterns.com/patterns
http://patternry.com/patterns/
http://zurb.com/patterntap
http://www.welie.com/patterns/index.php
https://developer.yahoo.com/ypatterns/
http://www.web-patterns.net/
http://www.smileycat.com/category/elements-of-design/
http://unitid.nl/androidpatterns/
https://developer.android.com/design/patterns/new.html
Patrones de diseño en dispositivos móviles
Si hay algo importante en el diseño de aplicaciones móviles es el uso correcto de patrones de diseño. Cada sistema operativo posee sus propios patrones de diseño, es algo bastante común ver aplicaciones que utilizan de forma incorrecta estos patrones, esa es una de las principales razones por lo cual resultan poco usables y con una pobre experiencia de uso.
Material design
Hace algún tiempo Google lanzo su propia biblioteca de patrones de diseño a la cual llamo Material Design, la que utiliza en el diseño de casi todos sus productos y sobre todo en la aplicaciones nativas para Android.
Conoce más sobre material design en https://material.io
Sistema visual de IOS
Por su parte Apple tiene su propio sistemas visual y de patrones de diseño para el desarrollo de las aplicaciones nativas para IOS, el mismo cambia de tanto en tanto junto con las versiones del sistema operativo.
Los patrones de diseño como aliados de la consistencia
Sabemos que una de las reglas de oro de Nielsen es la heurística nº 4: Consistencia y estándares, los que trabajamos en empresas de producto sabemos lo importante es cumplir con esta heurística, los patrones de diseño cumplen un rol esencial en esta difícil tarea.
Es común que las empresas desarrollen su propio “Design System” en el cual detallan los patrones de diseño que se van a utilizar en el desarrollo de las distintas piezas de un producto digital.
¿Cómo nace un patrón?
Una pregunta que siempre me hacen cuando hablo sobre patrones de diseño es: ¿Cómo nace un patrón? ¿Patrón se nace o se hace? ¿Quién paga el costo de la innovación?. Mi respuesta siempre es la misma: “Dejamos que los referentes de la industria paguen la fiesta”
Las grandes empresas y líderes de las distintas categorías como ser, Google, Apple, Amazon, Spotify, Netflix, Ebay y Booking entre otras son quienes hoy marcan las tendencias de mercado, los referentes de cada segmento y líderes de la industria van marcando el camino y el resto de los mortales los tomamos como referentes. ¿Entonces nos copiamos de ellos? ¡NO! aprovechamos el aprendizaje que las personas obtienen en sus productos para que cuando utilicen los nuestros los encuentre “intuitivos”.
Esplendor y decadencia de un patrón de diseño
El contexto “historico” es muy importante para los patrones de diseño, algunos de ellos nacen, tienen su momento de gloria y luego caen en decadencia, otros en cambio superan las barreras del tiempo aunque se transforman durante el proceso, por ejemplo el caso del antiguo pop up hoy reconvertido en el famoso modal.
Esto se debe a que los patrones son funcionales al contexto donde van a ser empleados y a las posibilidades y tendencias tecnológicas del momento.
En sintesis…
Los patrones de diseño nos ayudan a aumentar la usabilidad de nuestro producto digital debido a que son soluciones ya conocidas por los usuarios, reducen la curva de aprendizaje que el usuario atravesará cuando intente resolver una tarea en nuestro producto, esto genera esa sensación en la personas de “producto intuitivo”, así que ahora ya sabemos el secreto de la magia, si queremos diseñar interfaces intuitivas ¡tenemos que usar patrones de diseño!
Link a la presentación del taller de Ixda La Plata : https://bit.ly/2YpmkKm
