UX y UI son vitales en el diseño de una página web. Cada vez que se acomete un proyecto de creación web, todo buen diseñador debe adoptar simultáneamente dos puntos de vista diferentes: la perspectiva de la máquina, el código y el algoritmo y la óptica del usuario, cliente, internauta o visitante ocasional de un sitio web empresarial o un blog personal. Vamos a desgranar el esqueleto de un buen diseño web.
Acceso rápido:
El punto de vista del diseñador – máquina se denomina UI, por User Interface, y el del diseñador-usuario UX, User Experience.
¿Que es UI y UX?
Aunque seguro que ya lo sabes, conviene recordar aquí que una interfaz es una conexión funcional y física que pone en contacto dos sistemas o dos mecanismos o dos dispositivos operativamente independientes entre sí. ¿Qué permite la interfaz, entonces? Un intercambio recíproco de información. Ni más ni menos.
El diseño UI se expresa en lenguajes abstractos y técnicos, por ejemplo, jQuery. YUI, CSS o HTML (hay más posibilidades, por supuesto).
Por su parte el UX design se refiere a la navegabilidad o usabilidad de una página web, esto es, se refiere a la experiencia de un internauta concreto. ¿Satisface al usuario? ¿Se entienden máquina y ser humano? ¿Hablan bien entre ellos? ¿Fluye la conversación? ¿Es útil el algoritmo para aportar soluciones prácticas?
El texto que sigue intentará dar respuesta a estos interrogantes que debe responder todo diseño web bien pensado y estructurado.
¿Útil o bello?
El trabajo del diseñador web fluctúa entre la utilidad práctica y el éxtasis de la belleza estética. Una web ha de servir para dar soluciones a problemas de gestión de la información pragmáticos, pero a la vez debe conformar una experiencia placentera o amable al cliente o potencial cliente de la website. Si esa tensión entre utilidad y belleza se decanta clamorosamente hacia una de las dos partes, el diseñador habrá fracasado en su misión. El equilibrio entre ambos factores es el idealweb máximo de un excelente diseño web.
Investigación más empatía
Todo proyecto de diseño web debe comenzar por conocer profundamente el target al que se dirige, las necesidades reales de su público-objetivo y las conductas psicológicas y los comportamientos de compra que conforman su modo de ser. Lo cual quiere decir que el profesional del diseño web debe ponerse antes de empezar a escribir código y pensar en algoritmos complejos en la piel del potencial cliente o consumidor. Esa empatía conseguirá que la experiencia de usuario quede integrada con normalidad en el plan de ataque hacia una website plenamente navegable y atractiva para sus visitantes.
Un diseño web que no piense en el usuario está condenado a desaparecer a cortísimo plazo o a languidecer sin pena ni gloria en el inmenso océano de internet.
Design Thinking
Este proceso dinámico suele denominarse académicamente design thinking, teniendo como objetivo final la creación de servicios y productos nuevos o innovadores a partir del target estudiado.
La secuencia completa de este itinerario comprendería las siguientes fases o etapas: saber cómo piensa el público-objetivo, definir estrategias comerciales y de marketing, un momento crucial llamado tormenta de ideas, proponer y configurar prototipos y, por último, recabar y analizar la información directa obtenida de los propios consumidores para modificar el producto provisional, dejarlo como está o rechazarlo por completo. Si el prototipo es rechazado, la secuencia retorna al principio y si solo es modificado se vuelve a sondear al target hasta que los ajustes definitivos desembocan en un lanzamiento final al mercado del producto o servicio que haya superado todos los tests de calidad preliminares.
Factor UX
En resumidas cuentas, un diseño web que respete el factor UX de experiencia de usuario debe solventar dos problemas distintos:
- Accesibilidad. Debe ser navegable tanto por principiantes como por personas con conocimientos avanzados de informática. Es aconsejable pensar también en visitantes invidentes (ofrecer información en podscats), clientes con discapacidades auditivas (textos significativos para explicar el contenido audiovisual) y en individuos con daltonismo (en este sentido serán de gran ayuda las aplicaciones Material Design y Adobe Color).
- Usabilidad. El visitante debe sentirse cómodo en nuestra web. La navegación ha de ser intuitiva: fuera complejidades, todo sencillo y fácil de usar. Todo puede aprenderse con rapidez.
Ordenar la información pensando en el cliente
Es fundamental adoptar el punto de vista del potencial cliente para que encuentre a la primera lo que anda buscando. Para ello es necesario trabajar algunas nociones sobre arquitectura de los datos y de la información.
- Card sorting. ¿Cómo organizaría la web mi cliente-tipo? La respuesta y su implementación técnica nos permitirá facilitar la búsqueda de los visitantes.
- Sitemaps. ¿En qué quiero yo que se fije mi cliente? Cuando me responda satisfactoriamente es la hora de diseñar, organizar y ordenar los espacios de mi website a través de menús, itinerarios de navegación sutilmente sugeridos y jerarquías lógicas de los contenidos.
- Wireframes. Todos estos conceptos teóricos hay que plasmarlos en plantillas, maquetas o bocetos todavía provisionales. Ya tenemos una visión que enlaza ideas con UX mediante botones, textos, vídeos, imágenes y formularios. Ya podemos tomar una decisión definitiva.
Acciones y reacciones UI
Una vez que nos hemos embebido de empatía por el usuario es el instante look and feel, el momento UI de diseñar en la práctica la web que nos hemos propuesto. Algunos consejos breves y concisos para que los metas en tu alforja (no ocupan casi espacio y pueden acompañarte sin provocar ruidos molestos).
- Diseña sin que los contenidos (botones, textos, imágenes, enlaces internos y links externos…) entre en colisión y compitan entre ellos hasta aniquilarse mutuamente. Juega con tamaños y colores. Diferencia con resaltados distintos entre lo imprescindible, lo importante, lo secundario y lo accesorio. De esta manera, el visitante no se sentirá abrumado en tu web o blog.
- Haz tu diseño pensando en que la navegación sea una experiencia placentera, dinámica e intuitiva. Si todo fluye, todo va bien.
- No grites, modérate, ofrece tranquilidad, equilibrio y sosiego, es decir, no tires de letras mayúsculas para llamar la atención del potencial cliente. Dicho a lo bruto, no seas un energúmeno. Baja el tono de tu voz. Sé educado.
- Piensa al detalle en la interacción con los visitantes de tu web. Cada causa nos lleva a un efecto. ¿Qué hace el usuario ante un popup emergente, un banner deslizante o un zoom impactante?
- Que tu web o blog sea completamente responsive, esto es, apto para todas las pantallas, ordenadores tradicionales, portátiles, tablets y teléfonos móviles.
Ahora ya sabes resolver algunos asuntos importantes para diseñador tu página web, si tienes en cuenta ambas perspectivas, UI y UX, tu diseño web habrá dado en el clavo. Si quieres saber más, necesitas un diseñador profesional, una empresa de diseño o diseñadores web en Madrid revisa ideaWeb seguro que somos tus profesionales para crear la web de tu empresa o proyecto.