Patrones de diseño a aplicar a el e-commerce

Recuerda que cuando se habla de optimizar una aplicación para un servicio, la palabra optimizar no puede ser general.

Tiene que tener en cuenta, el publico objetivo, el genero, la edad, el extracto social, el nivel cultural, y la experiencia o no con tecnología.

Es imposible optimizar una pagina para todo publico.

Hoy en día ya no es suficiente con hacer una página web única, con un gran diseño, con un contenido de gran calidad o que sea simplemente responsive.

En general hay una gran confusión entre diseño, bonito, buen gusto y funcionalidad , el buen gusto de los diseñadores que tienden confundir bonito , agradable con experiencia de usuario y funcionalidad generan serios conflictos entre los ingenieros, los creativos , los diseñadores y los usuarios.

A pesar de que el UX (User Experience) y UI (User Interface) tienen nombres parecidos son completamente diferentes. Mientras que uno hace referencia a la experiencia y sensación del usuario, el otro está dirigido hacia un lado más racional de la navegación. Y ambos son ajenos a bonito.

Los usuarios cada vez dedican menos tiempo a "pelearse" con una página web o una app, por lo que debemos conseguir que se sientan cómodos desde el primer momento en que interactúan con nuestra aplicación.

Habitualmente toda la responsabilidad de la experiencia de usuario recae, como puede parecer normal, en el diseñador o experto en UX. En mi opinión, este es uno de los grandes errores que hace que conseguir una página web con una gran experiencia sea muy difícil de lograr. Esto, sobre todo, sucede en equipos más pequeños donde muchos miembros de una misma compañía intervienen generando contenido, creando nuevas secciones, escribiendo entradas del blog, subiendo imágenes, etc.

Por este motivo es conveniente que todas las personas que intervienen en la creación y posterior gestión de la página web tengan unas nociones básicas de UX. Conocer algunos consejos será de gran utilidad en su día a día para mantener una buena experiencia de usuario.

Este artículo va dirigido precisamente a ese perfil profesional que, de alguna manera, puede (sin saberlo) comprometer en algún momento la experiencia de usuario de una página y que podría evitarse con 10 sencillos consejos.

1. Conoce la pirámide de Maslow

En la década de 1950, el psicólogo humanista Abraham Maslow elaboró una teoría en la que plasmaba en forma de pirámide las necesidades humanas. Esta pirámide, que lleva de nombre su apellido, constaba de cinco niveles que, comenzando desde la base, quedarían en este orden: fisiología, seguridad, afiliación, reconocimiento y autorrealización.

Partiendo de esta idea, Aarron Walter, en su libro Designing for emotion, extrapola la pirámide de Maslow al campo de UX en una pirámide de cuatro niveles que corresponden a las emociones que experimenta un usuario durante el uso de una aplicación, que en el caso de este artículo sería para una página web.

Cuando no se tiene mucha experiencia en el campo del UX, tener presente esta pirámide puede ayudarnos a priorizar qué acciones hemos de realizar para ir mejorando nuestra página.

Los cuatro niveles de esta pirámide son los siguientes:

1. Funcional: la base de la pirámide, y lo que consideraríamos lo más básico, es que la página web funcione. Por ejemplo, si queremos crear un blog, significaría que se  pueda acceder desde un navegador mediante una dirección URL que funcione y que tenga el aspecto de un blog.

2. Fiable: el segundo nivel de la pirámide constaría en asegurarnos de que nuestra página web sea fiable, es decir, que no tengamos caídas de servidor, que los enlaces funcionen, que se pueda navegar con normalidad, etc.

3. Usable: si hemos logrado los dos primeros niveles de la pirámide, ya estamos preparados para comenzar a trabajar con el fin de que nuestra página web sea usable. Es decir, que un usuario pueda utilizarla fácilmente de forma natural y sin complicaciones extras.

4. Placentero: en el último nivel de la pirámide, se busca es que la experiencia de usuario sea tan excelente e innovadora que resulte incluso placentera.

2. Ten presentes las leyes de la Gestalt

El psicólogo Max Wertheimer estableció la leyes de la Gestalt en su estudio de la psicología de la Gestalt, en que analiza la percepción de las formas. De este trabajo de Wertheimer podemos extrapolar estas reglas muy útiles para el UX que aprendí en el libro Diseño de Experiencia de Usuario (UX) de Juan Manuel Carraro y Yanina Duarte.

Aunque las reglas que se listan a continuación son mucho más útiles en el momento de diseñar, tenerlas presentes en todo momento puede ayudarnos a ver cosas que hasta ahora no estábamos haciendo bien o prevenir errores en el futuro.

• Ley de proximidad: elementos que están aislados pero próximos entre sí tienden a ser percibidos como grupos.

• Ley de similitud: aquellos elementos con características visuales similares tienden a ser agrupados perceptiblemente.

• Ley de cierre: nuestra mente tiende a completar las formas que están incompletas.

• Ley de simetría: las formas que son simétricas suelen ser percibidas con más dificultad y/o como formas incompletas.

• Ley de continuidad: la atención visual sigue de forma instintiva la dirección espacial de los elementos.

• Ley de región común: los elementos que están dentro de una misma región cerrada se perciben como un mismo grupo.

• Ley de conexión: los elementos que utilizan otros elementos como líneas para conectarse visualmente se perciben como una misma unidad.

• Ley de relación figura/fondo: nuestra mente determina instintivamente si un objeto actúa como figura o como fondo pero nunca lo procesa como ambos al mismo tiempo.

3. Utiliza bien el color

Cuando pienso en el color que se aplica a una página web, veo dos objetivos que estos han de cumplir:

• Por un lado, los colores han de transmitir adecuadamente la imagen de marca y la de la empresa que hay detrás. Es decir, nuestra página web ha de ser única y reconocible.

• Por otro lado, hemos de pensar que nuestra página web se trata de una aplicación, o sea, que los usuarios han de interactuar con ella. El color, empleado correctamente, se puede convertir en un buen aliado para orientar y facilitar esta tarea.

Así pues, hay que encontrar ese equilibrio en que, sin perder la identidad de marca, se han de utilizar el mínimo de colores posibles para que no haya una despiadada batalla entre ellos, ya que con ello únicamente conseguiremos que cada color pierda importancia individual.

Hay que tener en mente que no por emplear más colores nuestra página web será más llamativa o atractiva al ojo humano.

Utiliza el mínimo de colores posible ( principio de flag design)

Es básico hacer una selección austera de colores en la que determinemos uno que llame especialmente la atención dentro de la paleta. El uso de dos colores sería la solución ideal. Si, por ejemplo, se utiliza un negro y un naranja, podemos emplear este segundo solo para dar estilo a botones y/o enlaces y, así, conseguir destacar estos elementos.

Tres o incluso cuatro colores podrían estar dentro de lo óptimo si se hace correctamente. Si empleamos más colores y no se hace correctamente, podemos conseguir una página web difícil de interpretar y que los elementos realmente importantes no resalten sobre el resto.

Usa el color para destacar lo importante

Se considera buena práctica utilizar el mismo color y estilo para los enlaces de una página web. De esta manera, el usuario puede identificar qué elementos son enlaces rápidamente, ya que todos cumplen la misma norma.

Hay que tener esta ley siempre presente, si bien sobre el papel parece una regla muy acertada; lo cierto es que en pocas ocasiones puede respetarse por completo. Un claro ejemplo de que esta ley no siempre se puede emplear es cuando el diseño web nos impide, por ejemplo, que los enlaces del menú puedan mantener ese color en una cabecera corporativa.

Por otro lado, en ocasiones queremos que el botón de un call-to-action (CTA) destaque, además de con el resto del contenido de la página, con el de los enlaces. Es por eso que reservar un color para esta clase de elementos es un buen recurso.