fbpx Skip to content

C√≥mo a√Īadir innovaci√≥n a los patrones de dise√Īo de la interfaz de usuario

Los investigadores han sabido durante alg√ļn tiempo que el comportamiento humano ocurre en patrones. En lugar de buscar nuevas formas de interactuar con la tecnolog√≠a, los seres humanos optan por lo familiar.

La evidencia para apoyar el amor de la gente por los patrones es abundante. El arquitecto Christopher Alexander reconoci√≥ y escribi√≥ extensamente sobre los patrones de dise√Īo ya en la d√©cada de 1960.

Más recientemente, Charles Duhigg examinó cómo la mayoría de nuestras vidas cotidianas son el producto de nuestros hábitos, lo que se corresponde muy bien con el trabajo de Nir Eyal sobre los productos para la formación de hábitos.

Dada la influencia de los patrones sobre el comportamiento humano, no es de extra√Īar que el uso de patrones de dise√Īo establecidos en su trabajo pueda ser beneficioso.

Pero la repetici√≥n tambi√©n puede ser el enemigo de la innovaci√≥n. ¬ŅC√≥mo puedes dise√Īar algo nuevo para tu audiencia si s√≥lo te concentras en lo que ha pasado antes?

Si desea aprender c√≥mo utilizar los patrones de dise√Īo y a√ļn as√≠ crear ideas originales para satisfacer las necesidades de sus usuarios finales, siga leyendo.

Lo bueno y lo malo de los patrones de dise√Īo

Por definici√≥n, los patrones de dise√Īo son soluciones establecidas a problemas recurrentes. As√≠ que para casi cualquier dise√Īador de interfaces de usuario, los patrones establecidos pueden ser tremendamente √ļtiles.

Por ejemplo, el posicionamiento de la llamada a la acci√≥n de inicio de sesi√≥n en la esquina superior derecha de la navegaci√≥n es un patr√≥n cl√°sico de dise√Īo de la interfaz de usuario. La gente sabe que debe buscar en esa √°rea de una interfaz, porque han utilizado el mismo comportamiento para iniciar sesi√≥n o comprobar su perfil durante a√Īos.

Puede ver el patrón en uso en el sitio de la Interaction Design Foundation:

…y en LinkedIn:

…y el New York Times:

Como he destacado antes, la gente disfruta de lo familiar. Cuando una interfaz se ajusta a las expectativas del usuario, reduce la carga cognitiva, ahorra tiempo al usuario y hace que el software sea m√°s intuitivo. Eso es lo que da a estas convenciones un poder duradero.

Adem√°s, los patrones tienen una serie de ventajas para su proceso de dise√Īo.

Utilizar un patrón de interfaz de usuario le ahorra tiempo

Como no tiene que dise√Īar una interfaz desde cero, podr√° pasar m√°s r√°pidamente a probar e iterar su dise√Īo.

Estará construyendo sobre una solución que ha funcionado en el pasado

Al igual que los cient√≠ficos que se paran sobre los hombros de los gigantes, usted se parar√° sobre los hombros de, bueno, los dise√Īadores que resolvieron desaf√≠os similares para su audiencia.

Pero es importante recordar que los patrones son s√≥lo un punto de partida. Son modelos para su dise√Īo, no soluciones completas a los problemas de sus usuarios.

La dependencia excesiva de los patrones de dise√Īo de la interfaz de usuario puede conducir f√°cilmente a un dise√Īo poco investigado

Es decir, en lugar de descubrir una soluci√≥n que sea √≥ptima para sus usuarios, podr√≠a conformarse con lo que ya est√° hecho en un patr√≥n de dise√Īo.

Una falta de innovaci√≥n, es decir, no adaptar la experiencia para resolver los desaf√≠os √ļnicos de sus usuarios, dejar√° su sitio web o producto como una colecci√≥n de plantillas.

Elija el patrón correcto

Antes de empezar a personalizar los patrones, aseg√ļrese de seleccionar el patr√≥n correcto para el trabajo.

S√≠, los patrones de dise√Īo suelen ser soluciones fiables a problemas recurrentes, pero si no se elige el correcto, el dise√Īo puede reducir la claridad para la audiencia.

Hay una soluci√≥n simple. Hay varios repositorios que ofrecen ejemplos de patrones de dise√Īo importantes. Por ejemplo, ui-patterns.com organiza los patrones de la interfaz por categor√≠a, proporciona ejemplos y explica la l√≥gica de cada soluci√≥n.

Nota al margen: si va a trabajar en el mismo proyecto (o en la misma empresa) en un futuro previsible, es aconsejable que empiece a crear su propia biblioteca de patrones.

C√≥mo innovar para su p√ļblico

Una vez que tenga sus patrones en su lugar, es hora de pasar del patr√≥n de dise√Īo de vainilla a una interfaz optimizada para ayudar a su audiencia a lograr sus objetivos.

Para ser claros, la innovaci√≥n en este contexto a menudo implica cambios espec√≠ficos en algunas partes de la interfaz. El dise√Īo fundamental todav√≠a se ajusta a un patr√≥n, pero se agregan nuevas ideas para ayudar a sus usuarios a comprender mejor la interfaz, satisfacer sus necesidades y lograr sus objetivos.

El físico austriaco Erwin Schrodinger articuló mejor el desafío cuando dijo:

La tarea es, no tanto ver lo que nadie ha visto todavía; sino pensar lo que nadie ha pensado todavía, en lo que todo el mundo ve.

Por supuesto, para hacer esto, usted debe entender profundamente las necesidades de su audiencia.

Utilizamos una serie de t√©cnicas que nos ayudan a construir una empat√≠a m√°s profunda con la audiencia e identificar la funcionalidad original o los elementos de la interfaz de usuario que deben a√Īadirse a un patr√≥n.

Aquí están dos de nuestras técnicas favoritas:

Modelos mentales

Un modelo mental se refiere a una creencia establecida que alguien tiene acerca de cómo debe verse o funcionar un sistema. Estos principios se manifiestan cuando la gente encuentra algo difícil de usar porque la interfaz no funciona como ya han decidido.

A menudo, existe una gran disparidad entre la forma en que los dise√Īadores perciben un producto o sitio web y la forma en que los usuarios perciben la misma experiencia. Esta es una discrepancia que es un camino com√ļn hacia un dise√Īo deficiente.

Snapchat aprendi√≥ por las malas cuando el redise√Īo de su 2018 no se ajustaba al modelo mental que sus usuarios hab√≠an establecido basado en el viejo dise√Īo.

Naturalmente, la investigación es la mejor manera de descubrir lo que está en la mente de sus usuarios.

Las pruebas de usabilidad, en las que las personas verbalizan lo que piensan mientras interact√ļan con su sitio, pueden ser un m√©todo excelente para descubrir el modelo mental de alguien sobre c√≥mo esperan que funcione su sitio.

Del mismo modo, la clasificación de tarjetas, en la que los tipos de datos de los grupos de usuarios se basan en categorías, puede ayudarle a comprender en qué parte de la interfaz la gente espera encontrar contenido.

Por ejemplo, Lyft utiliz√≥ los modelos mentales de las personas para dise√Īar su interfaz de usuario.

Sus usuarios ya estaban familiarizados con interfaces de navegación como Google Maps, por lo que Lyft reflejó esa convención e innovó en función de las necesidades de la audiencia, como la visualización de la ubicación de los conductores antes y durante el viaje.

Mapas de empatía

Un mapa de empatía es un método de investigación cualitativa que visualiza las necesidades y acciones específicas de sus usuarios.

Utilizando datos recopilados a partir de entrevistas con usuarios, encuestas y estudios de campo, los mapas de empatía suelen categorizar las necesidades de los usuarios en cuatro secciones: Dice, Piensa, Hace, y Siente.

Sintetizar la investigación de esta manera es un método excelente para descubrir conflictos entre los cuadrantes Рpor ejemplo, lo que sienten los usuarios frente a lo que hacen.

Estos conflictos le ayudar√°n a identificar qu√© elementos destacar en el dise√Īo de su interfaz de usuario en funci√≥n de la fricci√≥n o los vac√≠os descubiertos en el mapa de empat√≠a.

Este conocimiento es √ļtil en cualquier circunstancia, pero particularmente cuando se dise√Īa UX empresarial, donde hay muchas restricciones ambientales y prioridades conflictivas.

A principios de este a√Īo, utilizamos mapas de empat√≠a para innovar en el dise√Īo de una aplicaci√≥n de gesti√≥n de flotas para una empresa de transporte mar√≠timo. (S√≠, era tan complejo como suena.)

Despu√©s de realizar nuestra investigaci√≥n, el mapa de empat√≠a revel√≥ cu√°nto tiempo necesitaban los capitanes de l√≠nea para observar el r√≠o. As√≠ que nuestros dise√Īadores sab√≠an que nuestra aplicaci√≥n s√≥lo tendr√≠a una cantidad muy limitada de su atenci√≥n.

Al hacer referencia a lo que los capitanes de l√≠nea estaban viendo frente a lo que estaban pensando, nuestro equipo de dise√Īo intuy√≥ que la interfaz ten√≠a que tener CTAs muy grandes en la parte superior de la pantalla para que la carga cognitiva del usuario fuera lo m√°s peque√Īa posible.

El dise√Īo fue tan popular que los capitanes de los lances aplaudieron cuando presentamos el dise√Īo para la nueva aplicaci√≥n.

Puede que no suene pionero, pero esas peque√Īas innovaciones de dise√Īo optimizaron totalmente la forma en que funcionaban.

Conclusión

A la gente le gusta lo que le es familiar, pero tambi√©n codicia lo que es excepcionalmente √ļtil.

Para a√Īadir innovaciones que cierren la brecha, es mejor empezar con un patr√≥n de dise√Īo y dejar que su usuario le gu√≠e hacia las innovaciones que mejor preparar√°n a su audiencia para completar sus objetivos.

Captura de pantalla de Lyft a través del usuario de flickr Buster Benson.