Como diseñadores, cuando creamos un sito web es importante evaluar la usabilidad de este, tenemos el deber de comprobar mediante diferentes métodos si nuestro producto es entendible por nuestros usuarios, de lo contrario este podría fracasar al no poder ser usable.

A lo largo del post mediante el análisis de la web de IKEA veremos cómo el diseño influencia en la experiencia que el usuario tiene al navegar por la web tanto las que resultan buenas prácticas como malas.

Existen varios métodos para llevar esto a cabo y uno de los más importantes es la evaluación heurística. Este método no implica la participación de posibles usuarios por lo que es un buen método para empezar a comprobar la usabilidad de tu prototipo. Se rige por los 10 principios de Jakob Nielsen, investigador de la interacción humano-computadora.

• Visibilidad del estado del sistema.
• Adecuación entre el sistema y el mundo real.
• Libertad y control por parte de la persona usuaria.
• Consistencia y estándares.
• Prevención de errores.
• Reconocimiento antes que recuerdo.
• Flexibilidad y eficiencia en el uso.
• Diseño estético y minimalista.
• Ayuda a reconocer, diagnosticar errores y recuperarse.
• Ayuda y documentación.

El usuario ha de estar informado sobre lo que ocurre en el sistema en todo momento, Esto se realiza por medio de un constante feedback. Veremos unos ejemplos de cómo la página nos ofrece información o no del lugar en el que nos encontramos dentro de ella.

Mala práctica: El menú superior se divide en diferentes categoría, pero no ofrece ninguna información              sobre en que sección nos encontramos. Además este                                                                                                              desaparece cuando hacemos scroll.

Buena práctica: Por el contrario, dentro de las novedades nos encontramos con un nuevo tipo de menú que proporciona la información de                                                                                                                  manera distintiva y se mantiene                                                                                                                      en el header durante toda la página.

Para ayudar a identificar diferentes elementos estos han de hablar en el lenguaje del usuario con conceptos que sean familiares y reconocibles para él. Esta información ha de presentarse de forma natural y lógica. Veremos este principio a través de la utilización de iconos.

Buena práctica: Muchos de los elementos que utiliza son los que podemos encontrar en cualquier otra interfaz web y, estos, son la representación gráfica de sus homónimos fuera de la interfaz.

Mala práctica: La web utiliza para su menú desplegable con icono      de hamburguesa. Es cierto que cómo los anteriores es fácilmente encontrarle en muchas otras páginas pero está demostrado que el usuario todavía  no esta tan familiarizado con él y muchas veces                            no es consciente de su uso.

                                                            El usuario ha de poder controlar diversos aspectos del sistema, sin esto se sentiría impotente ante el modelo y puede llevar a ocasionar fallos. La acciones que este realiza, especialmente las que puedan ser críticas, han de poder resolverse. Veremos cómo funcionan los controles para acciones rápidas sobre productos.

Buena práctica: Al querer guardar un producto en favoritos pulsarás sobre el corazón. Este se mantiene pulsado haciendo saber al usuario que ya lo ha seleccionado y permite también deseleccionar esta opción fácil y rápidamente.

Mala práctica: La opción de añadir al carrito, sin embargo, produce una animación cuando se selecciona pero vuelve a su estado inicial. Esto puede producir que el usuario la reseleccione múltiples veces.

Seguir unas normas y convecciones lógicas a lo largo de tu página es importante porque esto ayudara al usuario a entender y a relacionar elementos en nuestro sitio, por ejemplo, si vemos elementos que son similares tenderemos a pensar que son de la misma categoría, al igual que si su forma o posición es parecida.

Buena práctica: La mayoría de los elementos de las distintas categorías que crea IKEA en su página tienen un estilo similar, pondremos un ejemplo de los muchos que nos podremos encontrar. Esto nos hace pensar que estos elementos contienen todos el mismo tipo de información.

Mala práctica: En la esquina inferior de la izquierda aparece generalmente una flecha que te ayuda a volver a subir al principio de la página pero, en algunas páginas este botón cambia levemente y su función es la de descargar contenido. Por la similitud de los              iconos y su exacta posición el usuario                                                                                                              tenderá a equivocarse.

Antes de que el usuario cometa un error, aunque este pueda ser reversible es mejor evitar que ocurra. Para ello se pueden implementar medidas que intenten evitar que esto pase.

Buena práctica: Como todos sabemos los nombres de los productos de IKEA no son fáciles de recordar por tanto serán difíciles de buscar en su página. Para ello se implementa en el buscador una función de autocompletar que además muestre una imagen del producto, ya que los nombres de por si solos no son muy explicatorios.

Mala práctica: Al abrir el portal de la web nos encontramos con una sección a la que es prácticamente imposible volver. Si un usuario avanza a la tienda no hay forma fácil de que pueda volver a visitar la página anterior.

Como diseñadores hemos de reducir la carga que la memoria del usuario soporta para que su experiencia sea más simple y eficaz. Hemos de mantener a la vista ciertas opciones o acciones para no entorpecer la experiencia y que el usuario no se sienta perdido o frustrado.

Buena práctica: Para facilitar encontrar un producto la web se divide en sin fin de secciones y para que el usuario sepa siempre donde se encuentra se incorpora una barra que recuerda no solo la sección si no el recorrido que ha realizado hasta ella por si en algún momento quiere volver hacia atrás pero no hasta el principio.

Mala práctica: La mala práctica se encuentra también en esta misma barra ya que, pese a ser de mucha ayuda esta desaparece en cuanto se hace scroll hacia abajo por la página dejándonos a ciegas.

El diseño y la estética están muy relacionados y no soló influye en la experiencia visual que el usuario pueda tener, estos van mucho más allá dado que una buena composición influye en la que el usuario se relaciona con la interfaz. Tiene que ver con la accesibilidad y la usabilidad, conservar una apariencia minimalista ayuda a eliminar los componentes que no ofrecen información alguna, los pesos, tamaños y espacios en blanco dan jerarquía al contenido ayudando al usuario a identificar más rápidamente lo que busca.

Buena práctica:  Prácticamente toda la web tiene un diseño y una estética consistentes, no presenta apenas ruido, mostrando solo los elementos necesarios y con una relación entre sus componentes que amplifica el affordance de estos. Todo esto evita que el usuario se sienta confuso y pueda identificar y centrarse fácilmente en las interacciones                                                                                                        que realiza.

Mala práctica: Por ponerle alunga pega a la web, la sección de muestra de productos en novedades pierde el equilibro entre sus componentes, el no alinear los componentes de estos, dando una sensación de desorden y haciendo el producto menos atractivo al cliente.

Habíamos hablado antes de la importancia de prevenir errores por parte del usuario, igual de importante que esto es ayudar al usuario una vez los ha cometido, identificando el error para que pueda reconocerlo, aportar un feedback que ayude a entender por qué este ha sucedido y proporcionar una a ayuda para solucionar este.

Buena práctica: Habíamos visto que buscar un producto por su nombre puede ser complicado y confundirse escribiendo es muy sencillo, por eso cuándo buscar algo con algún error el buscador te  ofrecerá los productos que creen que has intentado buscar, te informa del error y te avisa que mostrará productos que creen que intentabas encontrar.

Mala práctica: Para una mala práctica pondremos el ejemplo anterior del icono del carrito de la cesta, al no recordar que el usuario ya ha realizado una acción este puede cometer el fallo de volver a realizarla sin querer. La web no ofrece ningún feedback sobre si este elemento ya había sido añadido a la cesta aunque si ofrece una opción de recuperación si es que el usuario es consciente de su fallo.

Pese a que todos los anteriores principio ayudan a mejorar la comprensión del sitio una web ha de ofrecer e incluir acceso a una sección de ayuda y documentación ya que pese a todo el usuario puede tener dudas. Muchas veces se recoge información que por temas de diseño no se suelen incluir en las páginas principales y ayuda a eliminar la carga.

Buena práctica: Ikea incluye en el bottom de su página una sección de ayuda dividida en múltiples categorías para que el usuario acceda al área en cuestión, haciéndola así mucho más accesible.

Una vez hemos completado nuestra evaluación hemos de analizar la gravedad de los problemas presentados. Para medir esta gravedad nos ayudamos de tres parámetros, la frecuencia con la que ocurre este problema, el impacto que tiene este problema sobre las decisiones que tome el usuario y si este puede resolverlo fácilmente y la persistencia del problema, es decir, este consigue resolverse o se repite continuamente.

Analizaremos la gravedad de los problemas cualitativamente, empezando por aquellos que necesitan resolverse con la mayor urgencia y terminando con aquellos a los que prestaremos atención únicamente cuando hayamos solucionado los más graves.

Es el error al que mayor atención hay que prestarle ya que es el que mayor conflicto crea a la hora de utilizar los servicios prestados. Recordamos que hablamos del problema de la interacción de añadir un artículo a la cesta. Estando el portal destinado a la compra de productos la frecuencia con la que se puede repetir este error es altísima y el impacto de este error puede ser crítico, ya que si el usuario no revisa bien la cesta antes de la facturación podría acabar comprando de más. Este problema persiste en todas las secciones y todos los objetos que presenta y siendo una web con un volumen tan alto de compras debería notificar de una manera más correcta esta acción.

Solución: Mantener al final de la animación el tick que confirmaba la acción de compra y, para ocasiones en las que se quiera comprar repetidamente un producto, cambiar este por el número de artículos que quiere.

No mantener una buena consistencia también puede llevar a provocar errores y el lo que más debemos evitar al crear nuestro sitio. Habíamos visto como el botón de descarga esta situado justo donde típicamente hay un botón para volver arriba de la página y estos tienen unos colores y forma muy similares. También habría que apuntar que el proceso de descarga no lleva doble confirmación por lo que si lo pulsas esta comenzará automáticamente aunque se deba de un fallo.

Solución: Se debería cambiar, primero de todo la posición, el aspecto puede conservarse para mantener una relación en los elementos interactivos pero el lugar en el que se coloca lleva inequívocamente al fallo por lo que se debería, como mínimo, reubicar.

Ikea posee un portal con infinidad de páginas dentro de ella para agrupar las categorías y así disponer la información sobre sus productos más accesible y fácilmente encontrarle, pero como dijimos esto puede hacer que el usuario acabe perdido y desorientado dentro de la web. Se incorporaba una barra que iba mostrando las categorías por las que habíamos pasado, permitiéndonos ubicarnos con ella pero esta desaparecía según hacía scroll por lo que el usuario quedaba a ciegas. Se repite con frecuencia aunque el impacto que este tiene no es muy alto y depende del manejo que el usuario tenga este puede ser más o menos fácil de resolver.

Solución: Mantener esta barra siempre en la parte superior de la página de manera que este visible en todo momento para ser operada por el usuario.

Por último, se deberá poner cuidado en la elaboración del sitio, la disposición y alineamiento de los elementos, el peso y equilibrar el espacio en blanco. Un fallo en la consistencia del diseño afectará a la visión global que tenemos del sitio y no queremos que este transmita desorden ni inestabilidad como pasaba en la sección de novedades.

Solución: Poner atención por el detalle y cuidar todos los elementos de la web.

La perspectiva de género y la inclusión son grandes puntos que tenemos que tener en cuenta a la hora de diseñar. Como bien sabemos, en la mayoría de los aspectos, incluido el de la tecnología, diversas minorías se encuentran excluidas y es nuestro trabajo contribuir a reducir esta desigualdad y no promoverla con prácticas erróneas en el diseño. Volviendo a IKEA, su web presenta un muy buen ejemplo de estas prácticas.

Si nos fijamos en el diseño, este no se ajusta a ningún tipo de estereotipos, está diseñado en un corte muy minimalista con tonos y tipografías muy neutras. El lenguaje que se presenta durante toda su página es inclusivo, dirigiéndose de esta manera a cualquier género con el que se identifique el usuario. Además, al entrar en la web te el código postal, de esta manera, entre otras cosas, puede ajustar el idioma de procedencia del usuario lo que es una gran facilidad para una empresa internacional como esta.

En resumen la web de Ikea cumple con los principios y ofrece unos buenos mecanismos que favorecen la usabilidad de sus usuarios, haciendo de la experiencia de estos más satisfactoria.