En UX, cuanto más rápido mejor

Que quede claro, el usuario no tiene ninguna intención de leer y únicamente se dedica a escanear la web en busca de algo interesante. Si pasados tan solo unos segundos no lo encuentra, abandona. En la mayoría de los casos tendremos una única oportunidad de captar su atención haciendo que se sienta realmente interesado por lo que ve. No conviene desperdiciarla.

Aquí van una serie de consejos que seguramente ayudarán a que las interfaces de usuario que crees a partir de ahora estén centradas en fijar y mantener el foco en lo que realmente es importante.

1. Inspiración

Existen numerosas páginas web donde encontrar ejemplos gráficos y funcionales. Tan solo hay que conocerlas e identificar cual es la que se ajusta mejor a lo que planteamos. Buenos ejemplos serían los siguientes sitios:

En Awwwards por ejemplo, podemos encontrar valoraciones de todo tipo; diseño, usabilidad, creatividad y contenido. Esto es algo que nos abre las puertas a ver qué posibilidades reales tenemos de conseguir que el boceto que preparamos sea el adecuado.

2. Bocetear

No tengas miedo a coger el lápiz y el papel. Puede que si no estás acostumbrado a hacerlo normalmente se te haga pesado y costoso pero en seguida te darás cuenta de que la agilidad es mucho mayor. Después de todo, es más fácil poner a prueba un concepto en un boceto que en un formato digital. Incluso puedes preparar varios diferentes y decidir entre el equipo cuál es el más adecuado para el tipo de proyecto y el target al cual va dirigido.

3. Mobile first

Es muy común esperar a que el cliente valide la versión desktop para posteriormente dejarnos los cuernos haciendo aparecer de una forma u otra todos los elementos en las versiones reducidas. En cambio, si empezamos preparando las versiones más reducidas, podremos considerar los elementos esenciales primero y todo lo que deberemos hacer será añadir componentes o secciones a medida que crezca la pantalla. Mucho más fácil. ¿Obvio, no?

4. Trabaja con un grid

Cada vez es más recomendable trabajar con uno de ellos. Permiten medir con precisión los diseños siguiendo alineaciones, espacios y determinar una buena jerarquía de contenidos. De ésta forma estamos dotando de mayor coherencia a nuestro diseño y facilitando la comprensión. Si trabajas con Bootstrap, tienes a tu disposición las plantillas en psd para los tres breakpoints por defecto (1170px, 970 píxeles, 750px), además de dos grids para móviles (480px, 320px).

5. Elementos UI e Iconos

Crear individualmente cada botón, icono o gráfico puede llevarnos mucho tiempo. Que sean de alta calidad y atractivos ni te digo… Entonces, ¿por qué no le sacamos partido a los kits que tenemos a nuestra disposición en internet? Hay muchos y son gratuitos. Estos kits están normalmente en formato PSD y distribuidos en capas para facilitar la personalización, el color o la temática que necesitemos.

6. Fotografías

En ocasiones, entramos en una web donde nos explican algo con muchísimo detalle pero no hay nada más claro y directo que mostrarlo a través de una buena fotografía de calidad. Una imagen vale más que mil palabras. ¿Estás de acuerdo? ¡Ponlo en práctica!

Show your support

Clapping shows how much you appreciated Xavi Puig’s story.