La interfaz gráfica (UI) y la usabilidad (UX) son las dos grandes puertas de entrada a los contenidos de tu web.

Aparte de nuestro trabajo habitual con el marketing online, en estos días en Evoluciona hemos andado liados dando unas ponencias a emprendedores sobre el diseño de interfaces gráficas de usuario. Es decir, la forma en que distribuimos la información y facilitamos el acceso a ella en una web. Una buena ejecución va mucho más allá del aspecto visual: es la diferencia que hay entre una experiencia de uso satisfactoria u otra frustrante. O lo que viene a ser lo mismo: entre la conversión o el temido rebote. Antes de ser ovacionado por su charla, Miguel Ángel Salcedo, nuestro director creativo, tuvo la oportunidad de definir una serie de claves para afrontar con garantía todos los pasos en el diseño web y el desarrollo web. No es lo mismo que verle en acción, pero hemos querido resumir los principales puntos de su master class.

Consideraciones básica para la UI y UX

  1. El diseño no empieza por fijar el apartado gráfico, sino que consiste fundamentalmente en ponerle nombre y apellidos a tu usuario. ¿Por qué te ha visitado Juan Gómez Martínez? ¿Es un experto en su campo o simplemente alguien que está curioseando? ¿Qué es lo que busca? ¿Qué te gustaría que encontrara de forma prioritaria?
  2. Una vez que hemos retratado a nuestro amigo Juan, debemos pensar en la forma más cómoda y directa en que puede acceder a los contenidos de la página. Es lo que llamamos “arquitectura de la información”. Esta es la médula espinal de la web y lo que garantizará la lógica interna de cada sección y subsección.
  3. Ahora llegamos a los contenidos. ¿De qué materiales gráficos disponemos? ¿Qué extensión tienen los textos y qué aspectos abordan? Naturalmente, se trata de la parte más importante de la web y conviene dedicarle el máximo tiempo posible.

Luego llega la interfaz de usuario propiamente dicha. Debemos prestar especial atención a las siguientes cuestiones:

  1. Wireframe. Si en la primera fase fijamos adecuadamente las jerarquías de los contenidos, la estructura de los elementos debería inferirse con mayor facilidad. Estamos ante el esqueleto de los diversos elementos (páginas, conceptos, etc.) y la forma en que fluye la navegación. Basta con poner recuadros planos (en gris, por ejemplo) allá donde irían las fotos y un solo tipo de letra con los títulos y subtítulos.
  1. Mock Up. El equivalente a ver la primera ecografía del bebé. Aquí establecemos los diseños de cada pantalla, con sus imágenes, colores y tipografías. Aún no tenemos ninguna funcionalidad, sino que nos limitaremos a fijar el “look & feel” de la página a través de programas como Sketch o Adobe XD, que toman el relevo a Photoshop e Illustrator, en el montaje propiamente dicho del site, y dejan a éstos su verdadera misión: diseños, efectos e ilustraciones vectoriales de alto nivel.
  2. Prototipado. Por fin, llega el momento de simular la usabilidad de la página. Ahora las imágenes están conectadas entre sí y podemos comprobar la forma en que responde el flujo de navegación. En esta fase suelen detectarse inconsistencias que, en una primera representación abstracta, quizá habían pasado desapercibidas. Para trabajar el prototipado se suelen utilizar los programas Marvel e inVision.
National Geographic
National Geographic

Naturalmente, luego habría que rematar la parte de los contenidos con todo lo referente al SEO y el posicionamiento de la página, pero eso ya es otra historia. En Evoluciona llevamos años desarrollando diseños de interacción para proyectos de Microsoft, BBVA, National Geographic Channel, ACCIONA o Teka entre otros. Y ver cómo cobra vida y sentido una nueva web sigue motivándonos como la primera vez.

Si quieres recibir más contenidos como estos, no dudes en suscribirte a nuestra newsletter.