05 Diseño funcional de layout
05.01 Patrón Z, patrón F y jerarquía visual
El utilizar una app o website puede sentirse como una experiencia diferente cada vez, pero de hecho la manera en la que la gente observa cada diseño es muy predecible.
Patrón Z
Comencemos con el diseño más aburrido imaginable. Una página de puro texto. Sin encabezado, sin imágenes, sin saltos o comillas. Solo texto, en columnas de esquina a esquina.
En un diseño como este (que espero nunca crees) los usuarios generalmente lo “escanearán” en un patrón Z (aburrido…zzzzzzz).
La principal razón por la que hablamos de principios de diseño fue para que nunca hagas esto.
Si agregamos un encabezado (peso visual) creamos una sola línea que seguir (tensión lineal) y usamos secciones pequeñas (repetición) podemos acercarnos al famoso patrón en F.
Estos diagramas coloridos muestran el resultado de registrar el movimiento de los ojos de usuarios. Esto muestra en dónde se fija la mirada de la gente, mientras más ven algo, más “caliente” se ve en el mapa.
Layouts similares = resultados similares
El patrón en F hizo que los fundadores de Nielsen Norman Group fueran muy famosos hace tiempo y aunque no han hecho nada “innovador” recientemente, siguen publicando mucho contenido valioso.
El patrón en F funciona así:
- Comienza en la esquina superior izquierda, como en el patrón Z.
- Lee la primer línea de texto
- Escanea rápidamente hacia abajo, en la columna izquierda, hasta encontrar algo interesante.
- Lee la cosa interesante más cuidadosamente.
- Continúa escaneando hacia abajo.
Repetir este método es lo que hace que el mapa de calor parezca una F o una E.
¿Por qué es importante?
Puede que notes que unas partes llaman más la atención “naturalmente” que otras. Estos son puntos fuertes y débiles en tu layout.
Un botón en la esquina superior izquierda recibirá más clics que un botón en la esquina derecha, que recibirá más clics que un botón abajo a la izquierda que recibirá más clics que un botón abajo a la derecha. Y todos esos recibirán más clics que botones aleatoriamente colocados en el centro (a menos que hagas algo al respecto).
Es importante saber que por cada bloque de contenido y cada columna tiene su propio patrón en F, no es una sola F por página, aunque eso es una conversación un poco más avanzada.
Jerarquía visual
Cuando utilizas tipografía consistentemente para indicar la importancia del texto y ciertos colores para destacar botones y cuando das más peso visual a cosas que importan, construyes una “jerarquía visual”, o sea un diseño que puede ser fácilmente escaneado. Nuestros ojos brincan entre cosas importantes en vez de leer como robots.
Algunos diseñadores piensan que la jerarquía es buena porque se ve mejor, la verdad es que se siente mejor, porque es más fácil de escanear.
05.02 Navegando vs buscando vs descubriendo
Estas palabras pueden tener diferentes significados, así que para fines de esta lección:
Navegando: Cuando vas a una tienda y miras todos los anaqueles y aparadores para “darte ideas” (y termines comprando un montón de cosas que no necesitas, de todas formas).
Buscando: Cuando vas a una tienda buscando esa prenda específica que combine con tu sombrero ridículo.
Descubriendo: Cuando encuentras la prenda que quieres pero también terminas comprando esos tenis maravillosos que complementan el atuendo, como si en realidad necesitas alguna de esas cosas en tu vida.
Navegando:
Cuando visitas una tienda en línea solo porque sus productos se ven atractivos o estás siguiendo la moda o estás soñando con el día en el que tu vida finalmente esté completa gracias a esa bolsa de $20,000 estás “navegando”.
Un usuario navegando verá rápida y superficialmente tu contenido, una por una, empezando por la esquina superior izquierda. Se puede brincar algunas pero está bien, las fotos que llamen la atención recibirán atención extra (tal vez hasta un clic).
Para diseñar para este comportamiento, haz que el escanear sea fácil y mantén el contenido fácil y visual. Enfócate en aspectos emocionales. Por ejemplo, si es “estilo”, utiliza fotos, si es “poder” (motores, cosas rudas) entonces utiliza etiquetas claras. Si son nombres de marcas, muestra los logos, si es “calidad de mano de obra” muestra los detalles en acercamiento, etc.
Búsqueda:
Cuando alguien está intentando encontrar algo que tiene en mente, parece que está navegando pero los estudios de trackeo visual muestran otro comportamiento: están cazando.
Un usuario buscando ignorará muchos productos y fotos. Organización en tu layout permite que busquen sistemáticamente en las opciones, porque no quieren perder ninguna.
Un layout tipo Pinterest funciona en contra de ellos porque es aleatorio y confuso, aunque un filtro generalmente ayuda.
Para diseñar para búsqueda: Enfócate en atributos. Si quieren una esposa rusa por encargo con cabello café y ojos azules, se detendrán en cada foto que tenga esas características, las rubias solo estorban.
Destaca los atributos que sean más importante para la mayoría de los usuarios y nada más. Ignora las ideas que tengas sobre lo que se ve saturado. Si la información es útil, no es saturación. Esto no es una galería de arte.
Cuando el usuario encuentra lo que necesita, hará clic para más información (o para comprar). El nombre y fotos de la rusa, así como opiniones de los viejitos pervertidos que la conocen pueden ser puntos atractivos, pero su talla de zapatos o su pasión por los waffles no tanto.
Descubrimiento:
Bien, digamos que tus usuarios no están encontrando tu maravillosa colección de figuritas antiguas, pero crees que se venderían muy bien si las encontraran ¿Cómo fomentas descubrimiento?
La manera en que la gente cree descubrir cosas nuevas es probablemente lo opuesto a la verdadera manera en la que descubren cosas nuevas. Bienvenido al loco mundo del UX.
Hay dos errores que probablemente estás cometiendo.
- Lo podrás en el menú principal o crearás “banners” para promoverlo.
- Esperas que tus clientes más leales lo encuentren primero, porque están más familiarizados con tu diseño actual.
Ambos están equivocados.
- Los usuarios solo miran en el menú si están buscando algo, así de simple. Nadie “descubre” en un menú. Y los banners no sirven porque… pues los banners no sirven ¿Alguna vez has hecho clic en uno?
- Un usuario más experimentado tiende a explorar menos. En la vida real, solo los novatos exploran aplicaciones para encontrar lo que pueden hacer. Usuarios expertos saben lo que quieren y cómo conseguirlo, así que ¿Para qué explorar?
“Si te gustó esto te encantará aquello”
En vez de depender de que los usuarios encuentren cosas nuevas, déjalos encontrar lo que ya están buscando, pon cosas nuevas ahí (y hazlo relevante) para que puedan “descubrirlo”. Puede que se sienta como que lo estás ocultando, pero en realidad lo estás haciendo tan visible como es posible a la gente correcta.
En un sitio como Reddit, la gente viene por el contenido más votado, no por contenido nuevo, pero si nadie vota contenido nuevo no hay contenido más votado. Así que Reddit pone algunos contenidos nuevos, de categorías que te gustan, en el contenido más votado para hacerlo más visible. Y así continúa el ciclo de la vida.
Mientras más conoces a los usuarios, más sabes qué diseño implementar. ¡Haz tu condenada investigación!
05.03 Estructura de página
Aunque parezca atractivo el diseñar tus wireframes página por página, no lo hagas. Este es un caso de “mide dos veces, corta una sola”.
Como regla general, deberías hacer tus wireframes como se hacen los tatuajes. Primero haces las partes grandes y luego los detalles. En estos casos, los elementos grandes son los que aparecen en todas las páginas, cómo tu navegación y tus “footers”.
Footers:
Un footer es una lista de links estáticos que son muy generales y muy insignificantes para estar en la navegación principal. Algunos sitios tienen footers muy bonitos, que está bien, pero si los usuarios necesitan esos enlaces para que el sitio funcione, el footer es el lugar equivocado para ello.
Pregúntate: ¿Va a haber alguna página con scroll infinito? Si la respuesta es si, asegúrate que el footer se pueda consultar de otra manera, si el selector de idioma está en el footer y se escapa cada que trato de cambiarlo, jódete.
Navegación:
Los menús vienen en dos variedades. Menú principal y menú secundario (sub menú).
Menú principal — Si hiciste correctamente tu arquitectura de información, entonces ya sabes que va en el menú principal. Es el primer nivel de enlaces en tu mapa de sitio (debajo del home).
El orden de los elementos del menú, de izquierda a derecha o arriba hacia abajo debe ser del más al menos popular (medido por interés del usuario, no tu preferencia personal).
Si este es un nuevo menú, trata de tomar la mejor decisión con la información que tienes e intenta que sea un menú fácil de acomodar más tarde (dile a tus desarrolladores). Cuando recibas más tráfico puedes validar si el acomodo es el correcto.
Menú secundario — El sub-menú es una lista de páginas “debajo” de la página en la que está el usuario en tu mapa de sitio… hiciste un mapa de sitio ¿Verdad? Bien, me preocupé por un segundo.
El punto principal es que el menú secundario debe estar en el mismo lugar siempre, aunque los enlaces cambien. Así los usuarios aprenderán rápidamente cómo encontrarlo.
Sub-menús grandes nunca son una buena idea.
Siempre me sorprende cuando alguien trata de sugerir que un menú gigante es buena idea. Eso solo significa que la arquitectura de información es terrible. Es un diseño producto de flojera. Haz algo mejor.
Los menús son como ligar. Si necesitas más de 7 u 8 opciones, es momento de romper algunos corazones, aunque sea el tuyo.
05.04 El salto de página, imágenes y encabezados
El “salto” o “fold”
Uno de los mitos favoritos de los diseñadores “old school” es el del salto o fold. Es la parte del sitio que permanece visible antes de que el usuario haga scroll.
Todo por encima del salto recibirá máxima visibilidad, sin embargo estudios demuestran que 60 a 80% de los usuarios harán scroll para ver si hay contenido importante debajo del salto.
Lo que está encima del salto debe informar a los usuarios de lo que hay debajo del salto. Si los usuarios no saben que hay ahí debajo, puede que no estén tan interesados en averiguarlo.
Cuidado: Es muy común ahora utilizar imágenes de fondo gigantes en la parte superior de la página. Si parece que el sitio acaba en el salto, puede que la gente se vaya en vez de hacer scroll. Si necesitas agregar una gráfica que dice “haz scroll” tu diseño es malo.
Imágenes:
Muchos diseñadores tratan las imágenes como si no fueran funcionales, pero las imágenes pueden ayudar a dirigir los ojos de los usuarios a contenido importante para ellos.
Imágenes de gente, específicamente, llaman más la atención que otras cosas en tu layout.
Como una guía general, mientras más emoción haya en tus imágenes, más atención llamarán.
Protip: Para imágenes de gente, intenta que los ojos del sujeto vean en la dirección que quieres que vean los usuarios. Es increíble la diferencia que eso hace.
Encabezados:
Además de fotos de gente, nuestros ojos suelen buscar la pieza de texto más grande y contrastante en un layout. Cuando agregues un encabezado a tu diseño, estás escogiendo en dónde quieres que la gente comience a escanear.
Es importante que tu encabezado esté alineado con tu contenido más importante debajo de él. Si ese contenido no es importante, pero llama mucho la atención (alejándola de otro contenido más importante) los usuarios buscarán otro punto en dónde enfocarse después de leer los encabezados.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
05.05 El eje de la interacción
El eje de interacción es un borde imaginario que tus ojos siguen naturalmente. Mientras algo está más cerca al eje, es más visible para el usuario.
La idea es engañosamente simple.
La atención humana es muy limitada. Sólo nos podemos enfocar en una cosa a la vez, como en una ardilla, o bubis, o lo que está pasando en la tele. Así que mientras nos fijamos en un bloque de contenido, todos los demás bloques son invisibles.
Encuentra los bordes
En cada diseño, utilizarás todos los principios visuales que aprendiste en este curso. Cuando des un paso atrás y veas tu layout verás que hay algunas líneas o bloques.
Puede que estén alineados al borde del texto o de tus imágenes, o un grupo de cosas en conjunto.
Cada una de esas líneas es un eje de interacción, tus ojos seguirán ese eje hasta ser interrumpidos o el eje termine.
La atención de tu usuario casi siempre está enfocada en un eje de interacción, y cuando deje de enfocarse ahí brincará al siguiente eje de interacción.
Entonces:
Si quieres que la gente haga clic en algo, ponlo en (o cerca) de un eje de interacción. Si no quieres que le hagan clic, ponlo en otra parte.
Mientras algo esté más lejos de un eje de interacción, menos gente lo verá, y si no lo ves, no puedes hacer clic.
¡Listo!
05.06 Formularios
Formularios es algo que vas a hacer muy frecuentemente, en términos de usabilidad. Causan confusión, errores, pérdida de interacción y son una de las partes más importantes de tu sitio.
Si no son una de las partes más importantes de tu diseño ¿Para qué estás utilizando un formulario? ¿Acaso no leíste que causa confusión, errores y pérdida de interacción?
Una página larga o muchas páginas cortas
El error más común que hacen los diseñadores en formularios es no saber que tan largo es demasiado largo.
La regla general es hacer los formularios tan cortos como sean posible, pero no tengas miedo de dividirlo en páginas si es necesario o quieres dividir la información en pasos, en caso de que el usuario abandone el formulario a la mitad.
Lo importante es hacer que se sientan simples, que las preguntas estén relacionadas. Elimina preguntas que no necesitas realmente y usa tantas páginas como necesites, no más y no menos.
Tipos de entrada
El propósito de un formulario es recibir datos o información de los usuarios. Hay una serie de maneras en que la puedes juntar información, ya sea en un campo de texto estándar o un slider super customizado, deberías escoger el tipo de entrada que te dé mejor calidad de respuestas.
- Aquí hay una lista de tipos de entrada estándares
- Aquí hay una lista con tipos de entrada nuevos para HTML5
- Aquí hay una lista con tipos de cabras
Digamos que queremos que un usuario seleccione su tipo de cabra favorito. Check boxes o Radio Buttons son dos maneras de elegir de una lista, sin embargo Check boxes permite escoger más de uno pero Radio Buttons solo permite escoger una opción.
Si quieres una respuesta más completa, elige Check boxes, si quieres una respuesta mejor pensada, elige Radio buttons.
Etiquetas e instrucciones.
Hablaremos de cómo escribir etiquetas más adelante, pero por ahora hablemos de la función.
Cuando estás etiquetando tus tipos de entrada (inputs) ¿Cómo va a saber el usuario qué hacer con ellos?. Se breve, claro, legible y ponlos cerca a la entrada que están etiquetando. A largo plazo, buenas etiquetas resolverán 99% de tus problemas.
A veces se requieren instrucciones para casos poco convencionales o complicados. En ese caso puede ser útil agregar un poco más de explicación, si son solo unas palabras, ponlas en un texto claro cerca del input, si es más texto ponlo a un costado de la forma en vez de dentro de ella, así no interrumpe el flujo de lectura del usuario.
Recomiendo ampliamente el libro de Web Form Design de Luke W.
Previniendo y manejando errores
Cuando se trata de formularios, los errores son una realidad. Es nuestro trabajo evitarlos tanto como sea posible y manejar el resto con gracia.
Puedes evitar errores agregando inteligencia a los campos. Por ejemplo si el campo de texto es para teléfono, hazlo inteligente para manejar “(000)000.0000” o “ooo ooo oooo” o “ooooooooo” o “ooo.ooo.oooo”. Habla con tus developers.
Dar a los usuarios un ejemplo del input que esperas también puede reducir errores, puede ser directamente en el campo de texto o, por ejemplo, parte de tus instrucciones.
Cuando un usuario se salta una pregunta o comete un error, debes avisarles para que lo corrijan. Si es una pregunta que puedes verificar, puedes mostrar una palomita o un tache para indicar si está correcto o incorrecto. Se llama “inline error handling” o manejo de errores en línea.
Campos de contraseña pueden tener el método inline para indicar si un password es fuerte o débil, pero no uses inline error handling si no puedes verificar el input del usuario, como cuando la gente ingresa su nombre (hay nombres muy atípicos y no es su culpa).
Cuando el usuario selecciona “siguiente” o “hecho” puedes verificar la forma por errores o respuestas faltantes. Si hay un problema hazlo muy obvio, visualmente, de cuáles son los errores y por qué están mal.
Protip: asegúrate que el usuario pueda ver el error en el final de la forma. Si tienen que hacer scroll hacia arriba para ver que pasó, probablemente no lo hagan.
Velocidad vs Errores
Esto es un poco avanzado, pero muy útil.
¿Estás haciendo preguntas fáciles como “cuál es tu nombre” o difíciles como “cuál es tu tipo de tapete persa favorito”?
Para preguntas comunes, un formulario con etiquetas alineadas a la izquierda y encima del input ayudará a que los usuarios lo resuelvan rápidamente (por el eje de interacción).
Para preguntas poco comunes, un formulario con etiquetas a la izquierda del input (en la misma fila) detendrá a los usuarios un poco, pero creará menos errores.
Para la mayoría de los formularios, pon el botón de “completar” a la izquierda, en el eje de interacción.
Si el formulario es muy importante o puede tener consecuencias graves, ponlo del lado derecho, así la gente va a buscarlo en vez de hacer clic por instinto.
Phew… Este si es un capítulo largo.
05.07 Textos — Call to action, instrucciones, etiquetas
Hay cuatro tipos de textos en los que un UX Designer puede dar sugerencias sobre qué palabras utilizar con los usuarios. De otra manera es buena idea dejar que quién hace el contenido, haga lo que le venga en gana:
- Call to action
- Instrucciones
- Etiquetas
- Texto persuasivo
Call to action
Un “CTA” es un encabezado o texto cerca de un botón que le dice a la gente qué hacer: “Baja nuestra app ahora”, “Contrata el servicio premium, gratis” y es realmente sorprendente los resultados que puede dar un buen texto.
La fórmula para un buen CTA es:
- Verbo + beneficio + urgencia
Verbo — Lo que hay que hacer
Beneficio — Lo que recibirán (si no queda claro con el verbo)
Urgencia — Son palabras como “ahora” o “aquí” o “gratis”, según la situación.
Instrucciones:
Si no es 100% obvio que el usuario debería hacer algo (y a veces aunque lo sea) lo correcto es ayudar. Como vimos en formularios, a veces las instrucciones son una parte importante de los mismos.
Las instrucciones deben ser breves, literales y directas. Sin términos “de industria”, sin chistes, sin sarcasmo. No seas suave y no seas chorero.
Di exactamente que hay que hacer, usa palabras y frases simples. Escribe como si fueran niños inteligentes o alguien que está aprendiendo un idioma. No, no estúpidos, la idea es que seas claro.
Etiquetas:
Puede ser muy tentador utilizar etiquetas “inteligentes” o únicas, pero resístela. Usa la versión más básica, común y sencilla que puedas imaginar. Si tu etiqueta tiene más de un tipo de respuesta, no es suficientemente clara.
Las etiquetas también aplican a los botones, que es algo que muchos diseñadores pasan por alto. Si te brincas el encabezado y las instrucciones ¿Se entiende que hacen los botones? Si no, ponles mejores etiquetas.
Por cierto:
Este es uno de esos momentos en los que UX se puede volver un tema político. Si tienes un director creativo o un editor viendo tu texto y diciendo que “le falta más punch” es importante que digas que no.
Si es necesario, demuéstrales con un test A/B, pero nunca cedas cuando se trata de texto vital para la experiencia práctica y funcional. A veces lo único que necesita el usuario es algo simple y claro, no algo increíble y divertido.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
05.08 Botones primarios y secundarios
En los botones de este ejemplo (no les hagas clic) podemos ver que por lo general sólo necesitas dos tipos de botones, porque la mayoría de las acciones de los usuarios caen en dos categorías:
- Acciones primarias, relevantes a los objetivos
- Acciones secundarias que no lo son.
Botones primarios:
Algunas acciones disponibles al usuario son productivas, como registrarse, comprar, enviar información, guardar, enviar, compartir, etc. Producen cosas que no existían antes, estas son acciones primarias y acciones que queremos que el usuario haga tan frecuentemente como sea posible.
Botones que ejecutan tareas primarias, botones primarios, deben ser tan visibles como sea posible. Hacemos eso aplicando los principios que ya aprendimos.
- Estilo primario — Alto contraste con respecto al fondo
- Posición en layout — Sobre o cerca del eje de interacción, para verlos primero, por reflejo.
Botones secundarios
Algunas acciones disponibles al usuario son contra productivas. Cancelar, brincar, resetear, declinar, etc. Estas eliminan o evitan que se creen cosas nuevas. Esas son acciones secundarias o acciones que no queremos que el usuario haga, pero damos la opción por principio de usabilidad.
Estos botones deben ser menos visibles, para evitar que sean seleccionados por accidente.
- Estilo secundario — Contraste bajo con respecto al fondo.
- Posición en layout — Lejos del eje de interacción, así que los usuarios solo lo verán si lo están buscando.
Importancia es una GRAN excepción
A veces las acciones contra intuitivas son importantes, como borrar tu cuenta.
Esas acciones deben tener un estilo primario pero en una posición secundaria. La razón es que queremos que el usuario la encuentre, pero que piense antes de seleccionarla.
También es buena idea ponerle un color que contraste con la importancia de la acción (rojo, amarillo, etc.)
Botones especiales
En algunos casos tendrás un tipo de acción que es única a tu sitio o app, que requiere atención especial. Diseña un botón especial para eso, para que destaque de los demás (rompiendo patrones).
El botón de “agregar a la canasta” de Amazon o el botón de “Pin it” de Pinterest o el botón de “Like” de Facebook, todos pasaron por este tratamiento (más o menos).
