Internet ha cambiado mucho en los últimos años. Las webs ya no son bloques de texto con imágenes en baja resolución y gifs para darles un poco de vidilla. La red se ha convertido en el principal campo de batalla para muchos negocios, algo que ha llevado a una explosión de creatividad en muchos negocios. También ha aumentado tremendamente la competencia y el conocimiento de unos usuarios que, si no se sienten cómodos en una web, tardan apenas una media de dos segundos en marcharse para no volver. Por eso hoy os queremos hablar de algunas de las claves del UI design.

El diseño de interfaz (UI por sus siglas en inglés, user interface) es mucho más que el diseño gráfico. Consiste en diseñar la experiencia que van a tener los usuarios al entrar en tu página, y eso incluye desde la estética hasta diseñar el camino que deben seguir desde que entran hasta alcanzan el propósito con el que te visitan (desde realizar una compra a conseguir información de un producto).

UI design: las claves

Consistencia

Nada frustra más a un usuario que una web que no se comporta como espera. Si un botón amarillo sirve para avanzar a la siguiente página, en otro punto de la web no puede servir para volver a la anterior. Un diseño consistente facilita a tus usuarios aprender a usar tu sitio, incluso en distintas plataformas (web o aplicación móvil, por ejemplo). La consistencia te ayudará a mejorar los tiempos de aprendizaje y a disminuir la confusión de los usuarios nuevos.

Gradientes y profundidad

Una de las formas más habituales para guiar a un usuario a través de una web son las gradientes de color y las sombras para crear una sensación de profundidad que indique con qué elementos se puede interactuar y con cuáles no, una técnica popularizada especialmente por el Material Design de Google. Son elementos muy sutiles y elegantes, pero han demostrado ser muy efectivos.

Animaciones con propósito

Otro elemento recurrente para guiar al usuario son las animaciones. Nos hemos acostumbrado a verlas en casi cada web, pero lejos han quedado aquellas páginas de finales de los 90 donde todo eran gifs sin sentido, como la web de Homer Simpson. Antes de introducir una animación “porque sí” plantéate qué objetivo tienes y cómo ayudará al usuario a cumplir su objetivo.

Fuentes y tamaños fáciles de leer

En los últimos años hemos visto como el tamaño de la letra en las páginas web, especialmente en las cabeceras, ha ido creciendo notablemente, y esta tendencia al gigantismo va a permanecer en los próximos años. La letra pequeña es uno de los primeros elementos que espantan a un usuario. Aunque una tipografía de 14 o 16 puntos pueda parecer grande en un primer momento, pero es muy agradable para el ojo y se adapta perfectamente a la pantalla de los móviles.

Interfaz de voz

Siri, Google Assistant o Alexa nos están acostumbrando a interactuar con máquinas a través de la voz, y las páginas web deben adaptarse a esta tendencia. Introducir en tu página un elemento que permita a los usuarios realizar consultas concretas y recibir la información que buscan de forma sencilla, en pequeños trozos, puede ser una forma muy elegante solucionarles su probema sin abrumarles.

Interacción invisible

Un elemento muy vinculado a la consistencia de una web. Los usuarios se están acostumbrando cada vez más a que moverse en una página web sea algo casi imperceptible, sin grandes tiempos de carga ni elementos que interrumpan o ofrezcan cambios radicales. Pero eso no solo se aplica a moverse dentro de una web, sino también a hacerlo desde dispositivos distintos. El usuario quiere la misma experiencia si entra en tu página desde un ordenador o desde un móvil. Por eso es importante tener unas guías de diseño que se apliquen a todas las partes de la web y en todos sus formatos.

Formularios inteligentes

Seguro que alguna vez has puesto los ojos en blanco al encontrarte un formulario aparentemente infinito en el que te piden hasta tu grupo sanguíneo aunque tú lo único que quieres comprar es un par de calcetines. Los formularios son aburridos y, especialmente en móviles, muy tediosos. Pide únicamente la información que necesites en cada momento. Además, es importante que el formulario sea inteligente y capaz de detectar cuándo el usuario ha cometido un error, especialmente en teléfonos móviles donde es muy fácil cometer fallos tipográficos.

Transmitir seguridad y confianza

Raro es cuando pasa una semana sin leer alguna noticia de un filtrado o robo de datos. Aunque la gente ha perdido ese miedo general a comprar por Internet que había hace no tanto, sigue siendo muy recelosa de dar sus datos -especialmente datos de pago- a páginas web que no tienen un aspecto fiable. No solo es obligatorio tener cifrado HTTPS y SSL, también debes ocuparte de que tu web transmita en su diseño esa seguridad.

Personalizable

Vivimos en la época del big data y de los algoritmos. Una web que no se adapta a su usuario es ya una web antigua. Y no hace falta ser Amazon para poder personalizar una web al usuario. Cosas tan sencillas como registrar su procedencia para adaptar el idioma y la moneda es un pequeño detalle que se agradece. Con las cookies puedes mantener el contenido en el carrito durante días. Si, además, tu web permite registrarse y hacer login, las posibilidades de personalización se disparan.

Evolución

La época en la que diseñabas una página web y podías olvidarte de ella durante unos años ha pasado. Hoy la web es mucho más dinámica y en unos meses un diseño o tecnología puede empezar a quedarse atrasado. No es necesario que cada medio año hagas una web nueva, pero sí introducir pequeños cambios y añadidos que hagan que tu web no huela a naftalina solo unos meses después de lanzarla.

¡Esperamos que esta entrada os haya servido mejor para entender qué es el diseño de interfaz! ¡Hasta la próxima!

Foto 1: proyecto searcha
Foto 2: proyecto dothegap