info@innn.es +34 955 156 465

Un poco más de INNN en tu correo

Nos gusta compartir aquello que nos motiva y los trabajos de los que nos sentimos orgullosos. Si quieres, podemos enviártelos. Será poco, pero muy bueno.

Vive un Aprenday en INNN

¿Quieres venir a un Aprenday? Rellena este formulario y reserva tu plaza. ¡Te esperamos!

Plaza:

¿Podemos ayudarte con tu proyecto?

Contacta con INNN y nos pondremos de inmediato a trabajar en tu proyecto.

@alfonsocala / octubre 19, 2018

Cómo crear una web. Primero el usuario y luego todo lo demás

Parece obvio que no debería ser así, pero en demasiadas ocasiones se orilla la importancia del usuario en la génesis de un proyecto online. Cuando se piensa cómo crear una página web siempre se plantea un diseño, un mapa web que explique todos los servicios y productos de la compañía, se traza una estrategia de contenidos y se orienta a SEO. Incluso se crean los buyer persona objetivo de la web, aplicando metodologías de Inbound Marketing.  Pero en muchas ocasiones se obvia que nuestra web va a ser consumida por una persona que nos busca en Google o teclea nuestra url con unos objetivos claros y unas necesidades muy concretas.

Debemos ponernos en la piel de ese usuario desde el primer momento y preguntarnos constantemente durante el desarrollo si la estructura de navegación es la correcta y si la información importante es visible y accesible. Al fin y al cabo, crear una página web tiene un objetivo claro, ofrecer un espacio a una serie de usuarios para que lo visiten y hagan algo allí. Sea comprar un producto, visitar una galería de proyectos o buscar un número de teléfono. Por tanto, pongámoslo fácil , necesitamos asegurarnos que cumplirá su objetivo cuando visita nuestra web, sea cual sea. 

"Crear una página web tiene un objetivo claro, ofrecer un espacio a un usuario para que haga algo allí, así que pongámoslo fácil"

El proceso es laborioso y puede llegar a abrumarte pero no temas, en INNN llevamos haciéndolo desde el 2008 y como mucho se nos ha caído un poco el pelo ;).

Experiencia de usuario. Cómo crear una web. INNN
Una óptima experiencia de usuario debe ser el objetivo principal cuando nos planteamos cómo crear una web. | INNN

Sencillez y sentido común en el diseño web

Una frase que llevo escuchando desde que empecé a empujar píxeles allá por 2003 (si, ya sé que tengo más años que el hilo negro) es que un diseño web no se termina cuando se colocan todos los elementos necesarios en pantalla sino cuando, una vez colocado todo, repasamos lo hecho y quitamos todo aquello que sobra. Pues eso, sencillez al poder.

Mapa web sencillo y centrado en lo que busca el usuario

El famoso mantra de Keep it simple se aplica a diario en diseño web. No pienses en la empresa sino en el usuario, ¿le interesa la historia de tu compañía o quizás le resulta más interesante saber tus servicios y proyectos desarrollados? Crea un menú principal con pocos elementos y selecciona bien los contenidos de cada sección, agrupando aquellos que puedan convivir juntos. Al definir un mapa web siempre pienso como usuario en los menús de los restaurantes. Si abres la carta y hay tantísimas opciones que te da hasta pereza leerlo es que hay que llamar a Houston y soltar la famosa frase. Pocos elementos pero que sean “deliciosos”.

Navegación simple

La web sigue siendo joven pero ya ha madurado. Navegamos a diario por cientos de APPS y páginas webs y hay estándares muy consolidados. Estructuras mentales que funcionan de manera automática en la mente del usuario. Te pongo un par de ejemplos, al visitar la web de una empresa ¿donde suele estar su logo? Arriba y habitualmente a la izquierda ¿verdad? Y, ¿qué sucede cuando lo pulsamos? Que volvemos a la página de inicio, ¿cierto? Pues debemos aprovechar estas convenciones establecidas, y muchas más que el sentido común nos provee, para facilitarle la vida al usuario con una navegación sencilla donde se sienta cómodo, como en casa.
 

Ni John Snow ni khaleesi, el rey sigue siendo el contenido

Sea en el norte, más allá del muro o en nuestros teléfonos móviles. La web es contenido y por ello debemos ser buenos súbditos, cuidarlo y rendirle pleitesía.

El contenido lo es todo

Crear una página web es, entre otras muchas cosas, organizar contenido y mostrarlo online. Y ya sabemos que en pantalla se lee menos así que debe ser conciso, claro y legible. Hay que eliminar todo lo superfluo y poner el foco en el contenido realmente importante y en sus funcionalidades principales. Esto se traduce en espaciados más amplios, aire en los diseños para hacerlos más atractivos y facilitar su lectura así como en pocos elementos en pantalla, los justos y necesarios.

Lenguaje visual claro

Si a una navegación sencilla y un contenido bien seleccionado y legible le sumamos un sistema de diseño que, sin sobrecargar de elementos, ayude al usuario a leer mejor nuestra web estaremos recorriendo el camino correcto. Un CTA debe resaltar y tener el suficiente contraste con el resto del contenido como para no pasar desapercibido. Si llegamos a un sitio donde necesitamos que el usuario siga haciendo scroll usemos una flecha o un icono para indicarlo. Que nuestra “señalética web” no moleste pero ayude.

Jerarquía

Si todo es importante nada es importante. Por eso debemos establecer bien las jerarquías entre elementos que nos permitan destacar unos sobre otros. Usar tipografías legibles y tamaños grandes, sin miedo, para los titulares. Otros ejemplos; hacer un uso expresivo de las negritas, apoyarse en los márgenes y espacios en blanco para facilitar la lectura o seleccionar con cuidado la fuente del texto para que sea sencilla de leer. No, esa comic sans tan divertida no suele ser una buena elección.

El movimiento ayuda, let’s dance

En el proceso de crear una página web podemos apoyarnos en animaciones, microinteracciones, gifs animados y videos para hacer más atractivo nuestro contenido.  

Apoyándonos en las animaciones y microinteracciones

Si nos apoyamos en animaciones y microinteracciones hacemos más ameno el proceso: ayudamos al usuario y lo guiamos durante el viaje. Nos referimos a animaciones funcionales, no a aquellas con un mero fin estético como un slider animado o un fondo de partículas en movimiento como decoración. Este otro tipo de animaciones también son necesarias pero por otros motivos. 

Nos centramos en aquellas animaciones que ayudan a entender las transiciones entre pantallas, bloques de contenido o funcionalidades. Un ejemplo sería un botón de contacta que al pulsar directamente despliega un formulario reconvirtiéndose él mismo en el botón “Enviar”. Existe una transición entre un botón que nos debe llevar a un formulario y la transición que nos deja precisamente en ese formulario a través de una animación explicativa y perfectamente integrada en la navegación.  Material Design es un ejemplo perfecto de esto, referencia obligada.

Cómo crear una web. Animaciones e interacciones. Invision. | INNN
Un ejemplo de carga de contenidos mal animada y bien animada para móvil. Fuente: Innvision, José Torre

La importancia del vídeo

Si el contenido es el rey, el vídeo es el heredero directo del trono. No hay más que hacer una búsqueda rápida para recibir infinidad de estadísticas sobre el uso creciente e imparable del formato vídeo. En web no podía ser menos, cumpliendo un doble objetivo, estético y narrativo. 

Centrándonos en el aspecto narrativo contamos con un componente emocional indudable. En vídeo podemos contar muchas cosas con microvideos utilizando menos texto para hacerlo todo más digerible y ofreciendo un contenido mucho más cercano y una experiencia más memorable.

Resumiendo, que esto se alarga

Listo en pocas líneas las claves de lo que hemos visto:

Intenta ofrecer una experiencia web sencilla y amena.
Mantenlo simple, siempre, no lo olvides.
Cuida el contenido, hazlo legible y accesible.
Apóyate en recursos visuales, animaciones y video para ayudar al usuario en la navegación y enamorarlo.
Sencillez y sentido común.
 

Y para terminar, el negocio

O para empezar, ¿verdad?. Porque al fin y al cabo se lleva a cabo un diseño web normalmente para generar negocio. Ya sea para mejorar tu imagen de marca o vender tus productos o servicios. Y te preguntarás, ¿qué tiene que ver la usabilidad de la que estamos hablando con el negocio? Pues todo en realidad. 

Si se trata de vender, en el sentido que sea, debemos poner al usuario en primer término para que nuestra casa, nuestra web, responda a sus necesidades. Si tenemos un problema de usabilidad y nuestros usuarios no pueden finalizar el proceso de compra, no entienden la navegación o directamente abandonan nuestra web tenemos un problema serio, y es un problema de negocio, de ventas. Así que preparaos para contar con un UX designer en los comités de dirección porque su figura se hace cada día más imprescindible. Y ya es uno de los perfiles más demandados, ojo a esto.
 

Alfonso Cala

Alfonso Cala

alfonso.cala@innn.es  / 

De formación periodística, su experiencia como diseñador y maquetador online, así como sus amplios conocimientos en UX / UI, hacen de él uno de los miembros más versátiles del equipo, un ejecutivo/creativo/todoterreno a prueba de retos y transformaciones propias de nuestra profesión.

Avda. Málaga 4. Escalera D, ático. 41004, Sevilla. | +34 955 156 465 | ¿Cómo llegar a INNN?