Diseño UX: que los visitantes encuentren lo que buscan y actúen

La mayoría de las discusiones sobre diseño son, en realidad, preguntas sin resolver sobre el objetivo. Antes de que surja un solo boceto, debería poder responder por escrito a estas cinco preguntas. Si alguna respuesta cuesta, ese es el verdadero encargo de trabajo.

Primero: ¿qué debe haber hecho un visitante después de su visita? Indique exactamente una acción principal, por ejemplo «solicitar una primera consulta», «llamar» o «descargar una oferta». Quien menciona tres objetivos igual de importantes no tiene ninguno. Las acciones secundarias pueden existir, pero reciben menos peso.

Segundo: ¿quién viene y con qué motivo? Describa en una frase a dos o tres visitantes típicos, por ejemplo: «Una administradora de fincas busca con rapidez una empresa para una tubería rota» y «Un promotor compara con calma tres proveedores de instalaciones». Ambos necesitan entradas distintas.

Tercero: ¿en qué dispositivo y en qué situación? ¿En el móvil, de camino, o en el ordenador de la oficina? ¿Con prisa o para curiosear? Eso determina si arriba va el botón de teléfono o la descripción detallada de los servicios.

Cuarto: ¿qué debe creer el visitante antes de actuar? Que usted sabe hacer lo que ofrece, que es localizable y que no hay condiciones ocultas. Cada una de estas convicciones necesita una prueba en la página, por ejemplo un informe concreto de un proyecto, una dirección con número de teléfono o una descripción clara del proceso.

Quinto: ¿qué impide a los visitantes actuar? La incertidumbre sobre los costes, el miedo a la presión de venta, un formulario que pide demasiado. Anote los tres mayores obstáculos. Un buen diseño los va despejando uno tras otro.

No todas las páginas tienen el mismo objetivo. Con las preguntas siguientes se define cómo se estructura cada página. Recórralas para cada página y anote el resultado.

1. ¿El visitante llega con una pregunta concreta (por ejemplo, desde una búsqueda)? Sí: empiece con la respuesta en dos o tres frases y después los detalles. No: pase a la pregunta 2.
2. ¿La página es un distribuidor (página de inicio, resumen de servicios)? Sí: pocos caminos claros con denominaciones elocuentes, sin texto largo. No: pase a la pregunta 3.
3. ¿Aquí debe tomarse una decisión (consulta, compra, cita)? Sí: beneficio, prueba, proceso y acción, en este orden; sin distracciones por enlaces a otras páginas. No: pase a la pregunta 4.
4. ¿La página sirve para orientar (quiénes somos, proceso, datos)? Sí: resumen arriba, profundización debajo y, al final, un enlace a la siguiente acción.
5. ¿Se sorprendería un visitante al aterrizar aquí? Si es así, falta una frase que explique dónde está y cómo seguir.

El resultado suele ser desalentador: muchas páginas no tienen un objetivo reconocible. Entonces conviene preguntarse si la página debería eliminarse, fusionarse o reorientarse.

En las pantallas rara vez se lee palabra por palabra. La vista salta de encabezado en encabezado, se detiene en cifras, listas y texto en negrita, y solo profundiza donde supone que está la respuesta. El diseño puede favorecerlo o dificultarlo.

Longitud de línea: las líneas demasiado largas cansan, porque la vista tiene que buscar el comienzo de la línea siguiente. Como regla general, valen unos 60 a 80 caracteres por línea. En monitores grandes eso significa que el texto no ocupa todo el ancho, sino una columna de anchura limitada.

Párrafos: un párrafo lleva una idea. Quien mete cinco ideas en un párrafo dificulta la búsqueda de una información concreta. De tres a cinco líneas en el móvil es un buen tamaño.

Subtítulos: son señales de orientación. Funcionan bien los encabezados que contienen una afirmación («Esto no supone costes de mantenimiento») y son débiles las etiquetas («Más información»).

Listas y tablas: las enumeraciones sirven para puntos del mismo rango, las listas numeradas para procesos y las tablas para comparaciones con varias características. Una tabla de tres columnas sustituye a menudo a tres párrafos de texto corrido cuando los visitantes quieren comparar.

Resaltados: la negrita solo funciona si aparece con poca frecuencia. Marque términos clave, no frases enteras. El subrayado se reserva a los enlaces, para que nadie haga clic por error en un texto que no lo es.

Contraste y tamaño: el texto gris claro sobre blanco parece elegante, pero a muchas personas les resulta difícil de leer. El tamaño de letra del texto corrido debe poder leerse en el móvil sin hacer zoom. Más información en Accesibilidad.

Una pequeña empresa de jardinería (totalmente inventada) tiene un sitio web con siete páginas. La página de inicio empieza con «Bienvenidos a Grünwerk», debajo tres fotos en un carrusel y luego un texto sobre la fundación. El menú contiene Inicio, Quiénes somos, Servicios, Galería, Novedades, Socios, Contacto, Aviso legal. El formulario de contacto tiene diez campos obligatorios. Quien quiere llamar solo encuentra el número en el aviso legal.

Observación con cinco personas de prueba

• Las cinco buscan el número de teléfono y lo encuentran después de más de un minuto.
• Tres no entienden en la página de inicio si la empresa atiende jardines particulares o recintos de empresas.
• Dos abren la galería, encuentran allí doce imágenes sin descripción y vuelven atrás.
• Todas se topan en el móvil con campos demasiado pequeños en el formulario.

Qué se cambia

1. El encabezado pasa a ser «Creación y mantenimiento de jardines para hogares particulares de la región». Debajo hay dos botones: «Solicitar llamada» y «Llamar».
2. El carrusel deja paso a una imagen con una breve descripción de un proyecto real.
3. El menú tiene cinco puntos: Servicios, Proyectos, Proceso, Quiénes somos, Contacto. «Novedades» y «Socios» pasan al pie de página.
4. La galería se convierte en «Proyectos»: por proyecto, tres imágenes (antes, durante, después) con dos frases: cuál era la tarea y qué se hizo.
5. El formulario tiene tres campos y debajo figura la indicación «Nos pondremos en contacto con usted en un día laborable».

Si los cambios funcionan, se comprueba después con nuevas personas de prueba: ¿encuentran ahora el número en menos de diez segundos? ¿Entiende todo el mundo para quién trabaja la empresa? Solo la observación lo demuestra. Una mejora es una suposición hasta que alguien ajeno al equipo la confirma.

El diseño no se puede valorar solo por intuición. No necesita grandes herramientas, pero sí unas cuantas cifras fijas que comparar antes y después de un cambio.

Consultas por periodo: cuente las consultas por formulario, las llamadas y los correos durante al menos cuatro semanas antes y después de un cambio. Siempre hay fluctuaciones; fíjese en patrones a lo largo de varias semanas, no en días sueltos.

Recorridos hacia la página de contacto: con una estadística respetuosa con la privacidad verá cuántos visitantes llegan a la página de contacto y cuántos de ellos envían el formulario. Si baja el primer valor, el problema es la guía; si baja el segundo, es el formulario.

Preguntas por teléfono: anote durante dos semanas lo que preguntan quienes llaman. Todo lo que debería figurar en la página pero se pregunta, tiene que subir al principio.

Observación con personas de prueba: repita, tras cambios importantes, la prueba de tareas de la autoevaluación. Cuesta media hora y aporta indicios que ninguna estadística muestra.

Cautela con las conclusiones: la estación del año, la publicidad, el tiempo o los acontecimientos del sector modifican el número de visitas. Por eso, si es posible, cambie una cosa tras otra, para que quede claro qué ha surtido efecto. Quien cambia diez cosas a la vez no aprende nada sobre cada una de ellas.