¡No me hagan pensar! (el uso de convenciones en el diseño web)

Adrián Somoza • 12 de Diciembre del 2013 • Buenos Aires, ARG.

Innovar es bueno, incluso en ocasiones necesario; pero todo tiene su lugar. Es importante saber cuándo romper las convenciones, pero para eso tenemos que primero entender cuándo no romperlas.

“No me hagan pensar” (“Don’t Make Me Think” de Steve Krug) es el título de uno de los libros que más ha influenciado y moldeado la manera en que diseño para la web. Fue el libro que me ayudó a salir de ese estado de inocencia en el que creía que diseñar páginas web era fácil y que ya estaba listo para innovar, sin haber hecho una sola página web en mi vida (gracias Steve). Al respecto, hay una regla que el autor propone:

“Innova cuando sabes que tienes una mejor idea (y todo aquel a quien se la muestras dice “Wow!”), pero sino toma ventaja de las convenciones”. Steve Krug
Frustrated.

Dibujo por Ryan Ashburn en Dribbble

Lo que Steve me hizo ver con esa regla es que la innovación efectiva viene luego de conocer en profundidad las convenciones al punto de poder crear una capaz de reemplazar a las precedentes.

Espero poder generar en este post, en mayor o menor efecto, ese “despertar” que generó en mí el leer este libro; manos a la obra.

Convenciones: ¿qué son y para qué sirven?

Las convenciones existen para simplificarnos la vida. Son una serie de normas o reglas a las que convenimos atenernos para poder interactuar y comunicar de forma más rápida y efectiva.

El lenguaje es un ejemplo. ¿Qué ocurre cuando se encuentran dos personas que hablan idiomas distintos? La comunicación es lenta y frustrante, y no pasa mucho tiempo hasta que se muda de un lenguaje verbal a uno corporal. ¿Por qué? Porque sea que esté en Argentina, en Estados Unidos o en China, si apunto en una dirección con mi dedo índice, estoy diciendo “allá”; es una convención.

Otro ejemplo es el sentido de circulación. El mapa de abajo muestra qué sentido de circulación utiliza cada país: los países en rojo tienen circulación por derecha y los azules por izquierda. Esta convención es una excelente manera de ordenar el tráfico. ¿Qué pasaría si cada individuo pudiera decidir por dónde circular? Probablemente las ciudades serían un caos y habría un porcentaje de accidentes notablemente mayores. No es casualidad que gran porcentaje de los accidentes automovilísticos ocurren cuando uno o ambos conductores rompen una convención (como la prioridad de paso).

Mapa mundial del sentido de circulación provisto por Wikipedia.

Mapa mundial del sentido de circulación provisto por Wikipedia. Los países en rojo tienen circulación por derecha y los azules por izquierda.

El uso de convenciones en el diseño web

Hay una larga lista de convenciones en el diseño web: el logo arriba y a la izquierda (lo primero que queremos que vea el usuario), el menú en un margen del sitio (generalmente arriba), el nombre de los ítems de un menú (inicio, servicios, acerca de, contacto); la lista es muy extensa. Estas convenciones nos permiten comunicar de forma rápida y efectiva mensajes tan cruciales para la experiencia del usuario como “este es el menú”.

Las estadísticas muestran que los usuarios abandonan un sitio en un promedio de 10 a 20 segundos. Sería inocente diseñar pensando que nuestros usuarios no se van a comportar de esa manera. Como diseñadores, tenemos que abrazar esa realidad y hacerla parte de nuestro diseño. Si tengo 15 segundos de atención de un usuario, no quiero que los desperdicie intentando encontrar el menú de navegación. Al contrario: quiero que encuentre el menú lo antes posible, liberándole el camino para poder navegar el contenido de mi sitio. Puesto en otras palabras: no quiero “hacer pensar” a mi usuario innecesariamente. Steve Krug dice:

“No importa cuántos clicks tenga que hacer, siempre que cada click sea una decisión intuitiva e inequívoca”. Steve Krug

El uso apropiado de convenciones, entonces, es uno de los ingredientes más importantes para realizar un sitio que tenga una buena experiencia de usuario (léase que sea intuitivo y fácil de usar). Y la clave está en “no hacer pensar” al usuario dentro de lo posible, porque con tan pocos segundos de atención, queremos que la persona se sienta lo más a gusto posible navegando nuestro sitio y que sea capaz de encontrar lo que está buscando lo más rápido posible. Para eso tenemos que entender que hay momentos en los que es bueno ser predecible. Si la mayoría de mis usuarios espera que el menú esté arriba a la derecha, situarlo arriba a la derecha es “no hacerlos pensar”.

Lápiz usando laptop.

Dibujo por Martin Azambuja en Dribbble

Innovar no es mala palabra

Con esto no estoy diciendo que todas las páginas deberían ser iguales. Hay lugares donde es muy seguro (y recomendable) innovar y lugares donde no. Por ejemplo, es una convención que la pantalla inicial de un sitio tenga un diseño visual atractivo. Ahora bien, el contenido de ese diseño visual puede variar mucho yendo desde fotografías de gran tamaño con tipografías impactantes, hasta ilustraciones atractivas acompañadas de colores sólidos.

Lápiz usando laptop.

Como regla general, queremos que el contenido de nuestra página sea único. La razón es que el contenido es lo que realmente importa, por lo que la persona ingresó a nuestro sitio en primer lugar.

Fijense en los dos sitios de arriba: las decisiones estructurales como la ubicación de la navegación y del logo son objetivamente las mismas, pero sin embargo cada uno tiene una personalidad distinta. El tono de las palabras, el logo, las fotos, los colores y las tipografías son algunos ejemplos de elementos donde podemos y deberíamos innovar.

Yendo a un ejemplo concreto: ¿conviene tener un logo que nos diferencie? Sí. Lo que no es recomendable es situar ese logo al final del sitio y que el usuario tenga que hacer scrolling para descubrirlo (arriesgándonos a que nunca lo descubra).

Conclusión

Como diseñadores web, las convenciones deberían ser nuestras mejores amigas. El desafío que nos queda es el de utilizarlas inteligentemente para mejorar la experiencia de usuario (UX) de nuestras interfaces, realizando sitios que sean intuitivos y fáciles de usar.

comments powered by Disqus

Para enterarte cuándo posteo en este blog, seguime en Facebook o en Twitter.

Hablemos

Manufacturado en Buenos Aires.