Curso express de UX — 31 conceptos fundamentales

Adrian Solca
Jun 8, 2016 · 61 min read

Fuente: UX Crash Course: 31 Fundamentals — The Hipper Element.
Autor: Joel Marsh
http://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals

Este curso está diseñado para tomar 31 lecciones en 31 días.

Indice

(Usa Ctrl+F o ⌘+F para saltar a la sección que quieras.)

01. Introducción
01.01 Qué es UX
01.02 Objetivos del usuario y objetivos del negocio
01.03 Los 5 ingredientes básicos de UX

02. Cómo entender a los usuarios
02.01 ¿Qué es investigación de usuarios?
02.02 ¿Cómo hacer preguntas a la gente?
02.03 Creando perfiles de usuarios
02.04 Diseñando para dispositivos
02.05 Patrones de diseño

03 Arquitectura de información
03.01 ¿Qué es arquitectura de información?
03.02 Historias de Usuario y Tipos de Arquitectura de Información
03.03 ¿Qué es un wireframe?

04 Principios de diseño visual
04.01 Peso visual: Contraste, profundidad y tamaño.
04.02 Color
04.03 Repetición y rompiendo patrones
04.04 Tensión lineal y tensión de borde
04.05 Alineación y proximidad

05 Diseño funcional de layout
05.01 Patrón Z, patrón F y jerarquía visual
05.02 Navegando vs buscando vs descubriendo
05.03 Estructura de página
05.04 El salto de página, imágenes y encabezados
05.05 El eje de la interacción
05.06 Formularios
05.07 Textos — Call to action, instrucciones, etiquetas
05.08 Botones primarios y secundarios

06 Psicología de usuario
06 01 Condicionamiento
06.02 Persuasión
06.03 Cómo la experiencia cambia la experiencia

07 Diseñando con data
07.01 ¿Qué es data?
07.02 Estadísticas agregadas
07.03 Tipos de gráficas
07.03 A/B Testing

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

01. Introducción

01.01 ¿Qué es UX?

Todo tiene una experiencia de uso. Nuestro trabajo no es crear la experiencia, nuestro trabajo es hacerla buena.

¿Y qué es hacer una “buena” experiencia?

Es común pensar que una buena experiencia es aquella que hace a los usuarios felices. No es verdad. Si felicidad fuera nuestro objetivo podríamos solo poner gatitos, halagos e irnos a casa pero (aunque no es el peor futuro que puedo imaginar) tu jefe probablemente no estará muy satisfecho con el resultado.

El objetivo de un diseñador de experiencia de usuario es ser efectivo.

La experiencia de un usuario solo es la punta del iceberg:

Mucha gente cree que “UX” significa la experiencia de un usuario en particular, pero en realidad hace referencia al proceso de diseñar dicha experiencia.

La experiencia de un individuo es la opinión consciente y subjetiva de tu aplicación o sitio. La retroalimentación es importante (a veces) pero un Diseñador de Experiencia tiene que hacer mucho más que eso.

“Haciendo” UX:

Diseño de Experiencia de Usuario (UXD) involucra un proceso similar al proceso científico: investigamos para entender a los usuarios, desarrollamos ideas para resolver necesidades de los usuarios (y las necesidades del negocio), construimos y medimos esas soluciones en el mundo real para ver si funcionan.

Aprenderás todo esto en los próximos 30 puntos, aunque si lo prefieres, poner gatitos en tu sitio siempre es una opción.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

01.02 Objetivos del usuario y objetivos del negocio

Objetivos del usuario

Los usuarios siempre quieren algo, porque son personas y las personas siempre quieren algo. No importa si es conseguir pareja en un sitio de citas, buscar pandas que estornudan en YouTube o acosar a sus ex novios en Facebook, ellos quieren algo. También, a veces, quieren hacer cosas productivas (dicen).

Objetivos de negocio

Cada organización tiene una razón para crear una app en primer lugar. Normalmente es dinero, pero puede ser reconocimiento de marca, crecer una comunidad, etc.

El objetivo específico, de acuerdo al tipo de negocio es muy importante. Si quieres espacios para mostrar anuncios requiere una estrategia de UX muy diferente a la que si quieres vender productos o promoverte en Redes Sociales.

Todas estas cosas normalmente se llaman “métricas” o “KPIs” para los que les gustan los negocios.

Alineando los objetivos

La verdadera prueba de un Diseñador de UX es qué tan bien puedes alinear esos objetivos para que el negocio se beneficie de que el usuario logre su propósito (no al revés).

YouTube hace dinero vendiendo anuncios, y los usuarios quieren ver videos. Así que colocar anuncios en esos videos (o en la página) hace sentido. Pero más que eso, facilitar la búsqueda de videos o mostrar videos similares fomenta que los usuarios consuman más, lo que genera más dinero para YouTube.

Si los objetivos no están alineados entonces los usuarios consiguen lo que quieren sin apoyar al negocio (muchos usuarios, poco éxito) o de plano, los usuarios no obtienen lo que necesitan (cero usuarios, sin éxito). Si YouTube te pusiera anuncios de 60 segundos por cada 30 segundos de video sufrirían una muerte lenta y dolorosa, nadie tiene tiempo para eso. Pero unos instantes de anuncios es un precio accesible para ver a esos maravillosos pandas estornudando.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

01.03 Los 5 ingredientes básicos de UX

Cada uno de estos 5 ingredientes podría tener una guía por si mismos, así que por tiempo los vamos a sobre simplificar. Esto es un curso express, no Wikipedia.

  1. Psicología

La mente del usuario es compleja. Tú deberías saberlo, en teoría tienes una mente propia. Los UXers trabajamos con pensamientos y emociones subjetivas muy seguido, y estos pueden alterar tus resultados. El diseñador generalmente debe ignorar su propia psicología y pues, es difícil. Pregúntate:

¿Cuál es la motivación del usuario para estar aquí?

¿Cómo lo hace sentir?

¿Cuanto trabajo tiene que hacer el usuario para obtener lo que quieren?

¿Qué hábitos se crean si hacen esto una y otra vez?

¿Qué pueden esperar cuando hacen clic aquí?

¿Estás asumiendo que saben algo que aún no aprenden?

¿Es algo que quieran hacer de nuevo? ¿Qué tan seguido? ¿Por qué?

¿Estás pensando en las necesidades del usuario o las tuyas?

¿Cómo estás recompensando buen comportamiento?

2. Usabilidad

Si la psicología del usuario es “subconsciente”, la usabilidad es casi completamente consciente. Tú sabes cuando algo es confuso. Hay casos cuando es más divertido si algo es difícil (cómo en un juego) pero para todo lo demás, queremos que sea tan sencillo como para que una concursante de concurso de belleza pueda utilizarlo. Pregúntate:

¿Podrías resolver esta tarea con menos actividad del usuario?

¿Hay errores que puedas prevenir? (Tip: si, si hay)

¿Estás siendo claro y directo o estás intentando ser demasiado “listo”?

¿Es fácil de encontrar (bueno), difícil de pasarlo por alto (mejor) o subconscientemente esperado (lo mejor)?

¿Estás trabajando con asumpciones del usuario o en contra de ellas?

¿Has proporcionado todo lo que el usuario necesita saber?

¿Podrías resolver esto con una solución más “común”?

¿Estás basando tus decisiones en tu propia lógica o en la intuición de tu usuario? ¿Cómo sabes?

Si el usuario no lee las letras chiquitas ¿Esto aún hace sentido?

3. Diseño

Cómo Diseñador de UX, tu definición de “diseño” será mucho menos artística que la de otros diseñadores. Si “te gusta” es irrelevante. En UX es cómo funciona y si puedes comprobarlo. No es una cuestión de estilo. Pregúntate:

¿Los usuarios piensan que se ve bien? ¿Confían en él de inmediato?

¿Comunica el propósito y la función sin necesidad de palabras?

¿Representa a la marca? ¿Todo se siente parte del mismo sitio?

¿El diseño lleva los ojos del usuario a los lugares correctos? ¿Cómo sabes?

¿Los colores, formas y tipografías ayudan a que la gente encuentre lo que necesita y mejora la usabilidad de los detalles?

¿Las cosas que puedes hacer clic se ven diferentes a las que no puedes hacer clic?

4. Redacción

Hay una enorme diferencia entre escribir textos de “marca” (copy) y escribir textos de UX. El copy de marca apoya el lenguaje de la empresa. El copy de UX logra un objetivo de la manera más directa y simple posible. Pregúntate:

¿Esto suena ‘seguro’ y le dice al usuario qué hacer?

¿Motiva a que el usuario complete su objetivo? ¿Es lo que queremos?

¿Es el texto más grande el más importante? ¿Por qué no?

¿Informa al usuario o asumimos que él ya sabe de qué se trata?

¿Reduce la ansiedad?

¿Es claro, directo, simple y funcional?

5. Análisis

En mi opinión, el punto más flaco de muchos diseñadores es el análisis. Pero es algo que podemos resolver. El análisis es lo que principalmente separa a diseño de UX de otros tipos de diseño y que te hace extremadamente valioso. Literalmente paga ser bueno en ello. Pregúntate:

¿Estás utilizando data para demostrar que estás en lo correcto o para aprender la verdad?

¿Estás buscando opiniones subjetivas o hechos objetivos?

¿Tienes suficiente información que pueda darte ese tipo de respuestas?

¿Sabes por qué los usuarios hacen lo que hacen o estás interpretando su comportamiento?

¿Estás buscando números absolutos o mejoras relativas?

¿Cómo vas a medir esto? ¿Estás midiendo las cosas correctas?

¿Estás buscando resultados negativos también? ¿Por qué no?

¿Cómo puedes usar este análisis para hacer mejoras?

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

02. Cómo entender a los usuarios

02.01 ¿Qué es investigación de usuarios?

Diferentes personas piensan que la investigación de usuarios sucede en diferentes momentos del proceso. Algunos dicen que es lo primero, otro que primero hay que hacer bocetos y luego los pruebas, algunos dicen que debes probar cuando ya tengas algo hecho.

Todos tienen razón. Nunca hay un mal momento para hacer investigación con usuarios. Hazlo temprano, hazlo seguido.

La pregunta importante no es ¿Cuándo?. Es ¿Qué?. ¿Qué estás intentando aprender de tus usuarios?

Hay dos tipos de información que puedes obtener de investigación que involucra personas: subjetiva y objetiva.

Investigación subjetiva.

La palabra “subjetivo” significa que es una opinión, memoria o impresión de algo. La sensación que te provoca. La emoción que genera. La expectativa que crea. No es un hecho absoluto.

¿Cuál es tu color favorito?

¿Confías en esta compañía?

¿Mi trasero se ve grande en estos pantalones?

No hay respuesta correcta.

Para obtener información subjetiva, le haces preguntas a la gente.

Investigación objetiva.

La palabra “objetivo” significa que es un “hecho”. Algo es verdad, es algo que puedes probar. Tu opinión no lo cambia no importando cuánto quieras hacerlo.

¿Cuánto tiempo utilizaste la aplicación?

¿Dónde encontraste la liga a nuestro sitio?

¿Cuántas personas visitaron el sitio hoy?

Si la gente tuviera memoria perfecta y nunca mintieran (especialmente a ellos mismos) podríamos preguntarles estas cosas, si encuentras a alguien así, avísame.

Información objetiva viene de medidas y estadísticas, pero el que puedas contar algo no lo hace objetivo.

Por ejemplo, si 102 personas dicen que algo es bueno y 50 dicen que es malo, la única información objetiva que tienes es la cantidad de personas que votaron. Si es bueno o malo sigue siendo subjetivo.

Tamaño de la muestra

Cómo regla general, más gente crea información más confiable, aunque sea subjetiva. Una opinión podría estar completamente equivocada, pero cuando un millón de personas están de acuerdo, es una buena representación de una creencia popular (aunque podría seguir siendo falsa, objetivamente). Así que junta tanta información como te sea posible durante tu investigación.

Mucha información subjetiva puede ser… casi objetiva.

Si le pides a muchas personas que adivinen la respuesta a algo objetivo (cómo el número de frijolitos en un frasco) el promedio de la respuesta puede ser algo parecido a una respuesta real y objetiva.

Pero la sabiduría de la multitud sobre algo subjetivo también puede causar problemas y terminar eligiendo a Enrique Peña Nieto (George W. Bush en el texto original). Así que, pues, ten cuidado.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

02.02 ¿Cómo hacer preguntas a la gente?

Hay 3 tipos básicos de preguntas:

Preguntas abiertas — ¿Cómo me describirías? — Esto permite una gran variedad de respuestas y funciona bien cuando quieres recibir toda la retroalimentación que puedas recibir.

Preguntas cargadas — ¿Cuáles son mis atributos más sexys? — Esto limita el tipo de respuestas que pueden dar. Mi ejemplo se limita a atributos “sexys” que pueden hasta no existir. Cuidado porque este tipo de preguntas puede excluir respuestas útiles.

Preguntas cerradas / directas — ¿Qué es más sexy, mis rodillas o mis codos? — Este tipo de respuesta ofrece una opción. Si o no. Esto o aquello. Recuerda que si las opciones son estúpidas, los resultados serán estúpidos.

Algunos ejemplos de investigación subjetiva:

Entrevistas — Consigue a alguien y hazle una serie de preguntas, uno a uno.

Observación — Dale una tarea o instrucción a un usuario y mira cómo utilizan tu diseño, sin ayuda. Después puedes hacerles preguntas.

Focus Groups — Junta a mucha gente en un cuarto y pide que discutan tus preguntas. Ten cuidado, gente “segura” puede persuadir a otros en el grupo y un montón de gente aleatoria es un ejemplo poco confiable para todo, por eso la mayoría de nosotros prefiere inmolarse a hacer un focus group.

Encuestas — Un formulario que mucha gente contesta en papel o en línea. El elemento “anónimo” de estas es muy útil.

Tarjetas — Cada persona obtiene un grupo de ideas o categorías (en tarjetas o post-its) y las acomoda en grupos que le hacen sentido. Después de mucha gente hace esto te puedes dar una idea de cómo se debe ver tu menú de navegación (No uses a colegas para esto, usa usuarios reales).

Google — Es increíble la cantidad de opiniones que puedes encontrar en línea, gratis, ahora.

Tip del traductor: En lo personal, yo utilizo Reddit y me incluyo en tantos grupos de Facebook cómo me sea posible. El objetivo es exponerte a tantas maneras de percibir el mundo como sea posible.

Importante:

Pregunta las mismas preguntas, de la misma manera, a todos.

Evita interpretar preguntas o sugerir respuestas

La gente puede mentir por pena o si buscan tu aprobación con alguna respuesta.

Toma notas y graba la entrevista, no dependas de tu memoria nunca,.

No comas nieve amarilla.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

02.03 Creando perfiles de usuarios

Primero que nada, tenemos que definir lo que los perfiles o “personas” NO son:

  • Arquetipos de personalidad
  • Demográficos
  • Personajes en tu “Historia de marca”
  • Estereotipos basados en tu experiencia
  • Superficiales o unidimensionales
  • Conceptos
  • Predicciones

Entonces ¿Qué si es una persona o perfil de usuario?

Describe los objetivos, expectativas, motivaciones y comportamiento de gente real. ¿Para qué visitan tu sitio? ¿Qué están buscando? ¿Qué los pone nerviosos?, etc.

Toda la información que necesitas debe estar en tu investigación y datos. Si no puedes respaldar algo con datos o investigación estás inventando y pues, así no.

Perfil incorrecto:

Persona A es una mujer de edad 35 a 45 años con ingreso arriba del promedio y bien educada. Tiene al menos un hijo y al menos un auto. Sale frecuentemente, le preocupa su vida profesional y suele ser racional.

¿Por qué es incorrecto?

Seguramente esto es útil para algún publicista (a ellos les gusta creer que sí) pero en UX esto es inútil ¿Por qué? Porque no te permite discriminar ninguna idea ¿Qué necesita una mujer de 35 a 45? Podría ser lo que sea.

Perfil correcto:

Persona A es una gerente experimentada, interesada en una o dos áreas de especialidad. Visitan seguido el sitio pero siempre tienen prisa, así que se dedican a “coleccionar” contenido para leer los fines de semana. Suelen ser muy activos en Redes Sociales, principalmente en Twitter y LinkedIn. Se consideran líderes de opinión, así que la imagen pública es importante.

¿Por qué es correcto?

Este perfil tiene mucha información útil. Sabes que el contenido emocional no será popular, que la curaduría es importante y tienes ideas de qué categorías de contenido generar. Sabes que necesita ser fácil de compartir y solo en algunas redes será relevante. También puedes deducir que no es buena idea hacer una campaña en Facebook porque estos usuarios no lo utilizan y que E-mails con contenidos agregados serán mejores que notificaciones frecuentes porque estas personas tienen poco tiempo.

Piensa en usuarios “ideales”. Muchos de ellos.

Cuando piensas en atributos, piensa en la versión más valiosa de los usuarios en la vida real. No estás intentando mantener su comportamiento actual, sino intentando ayudarlos a convertirse en la versión “ideal” de ellos mismos.

También recuerda que no todos los usuarios son iguales. Probablemente tendrás diferentes grupos de comportamiento y todos merecen un buen perfil.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

02.04 Diseñando para dispositivos

Paso 1: ¿Cómo le gusta que lo toquen? ( ͡º ͜ʖ ͡º) — ¿Dedo? ¿Mouse? No voy a profundizar en esto ahora porque ya he hablado de esto en otro artículo.

Paso 2: Empieza en pequeño — Mucha gente piensa que “mobile first” se debe a la popularidad de los dispositivos móviles. Si, pero no. Si diseñas para la pantalla más pequeña primero, te podrás enfocar en contenido y funcionalidad clave. Eso genera apps más simples y bellas. Si lo haces en la otra dirección es como intentar meter un bombón en una alcancía, que no es ni simple, ni bello.

Paso 3: ¿Qué poderes especiales tiene este dispositivo? — Los dispositivos móviles van con nosotros a todas partes así que (oh sorpresa) pasamos más tiempo en ellos y la ubicación se vuelve un factor determinante. También son pequeños así que poder mover el dispositivo es una ventaja. Las laptops, por el otro lado, no viajan tan cómodamente pero son más poderosas, tienen pantallas más grandes y teclados que permiten interacciones más avanzadas. No te preocupes tanto por la consistencia, diferentes dispositivos requieren diferentes ideas, a veces.

Paso 4: Considera el software — Mac vs PC es más que una campaña de anuncios. Es importante leer las guías de usabilidad antes de comenzar. iOS o Windows se ven diferentes en cada versión, así que puede que tengas que escoger qué versiones soportar y cuáles ignorar. Cada vez que agregas una opción se multiplica la carga de trabajo, desarrollo y mantenimiento a futuro, así que ten cuidado.

Paso 5: Se responsivo — ¿Es un proyecto web? ¿Soporta diferentes tipos de teléfonos? ¿Qué tal si Apple saca un nuevo teléfono que es un poco diferente? En el internet moderno, todo funciona en todos los dispositivos así que asegúrate que lo que tu hagas se pueda estirar y adaptar al dispositivo que prefieras usar.

Paso 6: Piensa en más de una pantalla a la vez — Este es un poco avanzado, pero creo que estás listo para el. ¿Puedes utilizar tu teléfono y televisión a la vez? Como un control remoto para la televisión. ¿Puedes hacer que un grupo de teléfonos controlen un juego en una tablet en el mismo cuarto? ¿Qué tal si estás en dos dispositivos y puedes “pasar” información de uno a otro? ¿Eso causará problemas? Piénsalo.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

02.05 Patrones de diseño

Un diseño no necesariamente es bueno por ser común. Para ser un buen patrón de diseño, tiene que ser una solución común y usable.

Algunas ideas de diseño se vuelven populares porque permiten que diseñadores flojos ignoren una funcionalidad retadora. Es como poner una bolsa en la cabeza de alguien feo.

Por ejemplo, el botón de “hamburguesa” de Facebook, que representan un menú escondido en muchas aplicaciones móviles, ha estado comenzando a aparecer en muchos websites de pantalla completa que tienen mucho espacio para un menú. Es común porque esconder el menú es más fácil que diseñar uno bonito, pero no porque los resultados sean mejores.

En la vida real, muchos usuarios no notan menús ocultos en absoluto y abandonan el sitio o se pierden.

Eso es malo

Y flojo.

“Don’t do it bitch” — Jesse Pinkman

Ahora, hay cientos de patrones de diseño que cambian todo el tiempo conforme los dispositivos y tecnologías cambian, así que es difícil hacer una lista, pero aquí hay algunas ligas para explorar:

GoodUI — Una lista de ideas simples e ilustradas que son, generalmente, buenas para implementar o probar mientras diseñas.

PatternTap — Una librería de ejemplos creados por la comunidad de todas las partes que podrías necesitar para un website. Algunos son buenos, otros malos, pero ver ejemplos te dará una idea de qué es común y qué no.

The Anatomy of a Perfect Landing Page — Este artículo no es muy nuevo, pero aún es válido. Seguir esto te ayudará a crear rápidamente una página genérica pero efectiva para usuarios que te encuentran vía búsqueda. Si te gusta, te recomiendo el blog de Unbounce.

Mobile-Patterns — Similar a PatternTap, esta no es una lista de diseños perfectos, pero es bueno para obtener inspiración de que es “común”.

Timoa en Pinterest — Una colección de elementos de UI, organizados por funcionalidad.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

03 Arquitectura de información

03.01 ¿Qué es arquitectura de información?

Si la idea de crear “estructuras” en “información” es un concepto completamente foráneo para ti, esta liga puede ayudarte: Entendiendo Arquitectura de Información

Arquitectura de información (AI) puede ser muy simple en un proyecto pequeño e increíblemente compleja en proyectos más grandes. AI es invisible, para trabajar con ella necesitamos dibujar un mapa de sitio. Aquí un ejemplo:

Este ejemplo muestra un sitio con 6 páginas. Una página de inicio, dos secciones en el menú principal y 3 sub secciones. Las líneas indican qué páginas están conectadas por navegación (menús y botones).

Nota: Un millón de usuarios no equivalen a un millón de páginas de perfil. Tienes una página de perfil que despliega la información de cualquier usuario.

Cuando las páginas se organizan de esta manera, como un árbol genealógico, se llama “diagrama de jerarquía” o “diagrama de árbol”. La mayoría de sitios y apps se organizan de esta manera (aunque no es la única).

No hay reglas para dibujar mapas de sitio, pero si algunas sugerencias generales:

  • No porque sea simple quiere decir que hace sentido
  • Mantenlo limpio y usable
  • Dibujamos de arriba hacia abajo, no de izquierda a derecha
  • No hagas un documento “bonito”. Es un documento técnico, no un desfile de modas.

Largo o ancho. No ambos.

Generalmente tu mapa será “ancho” (flat) que incluye más secciones en el menú y menos contenidos dentro o tu mapa será “largo” (deep), con menos menús pero más contenidos dentro de cada uno.

Nota como las estructuras ilustradas son la misma cantidad de páginas pero acomodadas de diferente manera.

Sitios con muchos productos, como el sitio de Wal-Mart, generalmente tienen una arquitectura “larga” o los menús serían absurdos. Páginas como YouTube que solo lidia con videos generalmente son más “anchos”. Si tu sitio es largo y ancho, eso es malo. Necesitas simplificar tus objetivos o diseñar una buena búsqueda como una funcionalidad base.

Mito: A veces la gente dice que todo tiene que estar “a 3 clics de distancia”. Eso probablemente es porque aprendieron de UX en los 90’s y no han aprendido nada nuevo desde entonces. Enfócate en el usuario, asegúrate que sepan dónde están y a dónde pueden ir, todo el tiempo. Si tu navegación es fácil de entender, el número de clics es irrelevante.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

03.02 Historias de Usuario y Tipos de Arquitectura de Información

Una “historia de usuario” (flujo de navegación) describe un flujo posible que un usuario podría tomar en tu sitio o aplicación. Debe ser breve, pero completo. Necesitas muchas historias (o flujos) para describir tu diseño completo.

Un flujo para Google.com puede verse así:

  • El usuario llega a la página principal de búsqueda.
  • El usuario puede hacer cualquier búsqueda y enviarla con su teclado o mouse.
  • La siguiente página muestra la lista de resultados, con los más relevantes hasta arriba.
  • El usuario puede hacer clic para ir al sitio que desee, o puede navegar más páginas de resultados hasta encontrar algo que considere útil.

Obviamente este flujo está simplificado, pero esa es la idea.

Nada en la historia dice específicamente como resolver algo con diseño, solo que es posible. El propósito de la historia es describir flujos, secuencias de opciones, no la interfaz final.

Si el flujo es simple y efectivo, estás haciendo un buen trabajo (hasta ahora)

Los jefes a veces piensan que las historias de los usuarios son una manera de solicitar UX a un diseñador, pero eso es absolutamente equivocado ¿Por qué? Porque una historia es básicamente una lista de funciones y eso tiene un efecto dramático en el diseño de la solución final. El diseñador de UX escribe las historias para comunicárselas a su equipo, no al revés. Es cómo decirle a Bob Ross qué colores utilizar.

Entonces, ahora que sabes escribir historias, necesitamos volver a la Arquitectura de Información. La estructura en tu página determina el número de pasos en la historia del usuario. Y para estructurar tus páginas necesitas escoger algún tipo de arquitectura con cual trabajar (o varias, pero mantengamos esto simple).

Tipos de arquitecturas incluyen:

  • Categorías
  • Tareas
  • Búsqueda
  • Tiempo
  • Gente

Va la descripción de cada una:

Categorías:

Cuando piensas en una tienda como H&M seguramente te imaginas su menú como una lista de categorías (hombres, mujeres, niños, ofertas, etc.). Tipos de contenido. Cuando haces clic en cada categoría esperas ver contenido que aplique a esa categoría.

Este es el tipo de Arquitectura de Información más común. Sin embargo, en industrias como banca o químicos o juguetes para adultos (me han contado) las categorías pueden ser más complejas, entonces tus usuarios pueden no tener una idea clara de que esperar ver dentro de cada categoría. Si quieres comprar un juguete sexual ¿Esperas encontrarlo en la categoría de “opera con baterías” o “brilla en la oscuridad”? La vida es difícil a veces.

Tareas:

Otra manera de organizar tu aplicación o sitio es según los objetivos que el usuario quiere cumplir. Si eres un banco, seguramente una estructura como “Ahorra, Préstamos, Inversiones, Ayuda, Abrir una cuenta” puede hacer un menú más simple. Si el usuario sabe lo que quiere, esta es una excelente manera de estructurar el diseño. Pero ten cuidado, los usuarios no siempre saben lo suficiente como para escoger su propia aventura.

Piénsalo, un sitio estructurado en categorías y otro en tareas pueden ser muy diferentes. Es una decisión importante.

Búsqueda:

Si tu sitio es muy complejo, o si está lleno de contenido generado por usuarios, una arquitectura basada en búsqueda puede ser útil, cómo en YouTube. Si YouTube tuviera categorías sería muy difícil de usar y costaría mucho trabajo mantener esas categorías correctamente.

Tiempo:

Si estás comenzando en UX, esto puede sonar un poco raro. Puedes diseñar una Arquitectura de Información que cambie con el tiempo. La versión más sencilla es tu correo, en dónde los mensajes llegan en el orden en el que se envían, ese es un diseño “basado en tiempo”. En un sitio con páginas de “Popular ahora” o “Contenido nuevo” como Reddit o tu Feed de Noticias en Facebook también son ejemplos de diseño basado en tiempo.

Gente:

Facebook (o cualquier otra Red Social) usa una arquitectura basada en gente. Todas las páginas están diseñadas alrededor de a quién le pertenece la información y las relaciones entre ellas. Cuando estás en el perfil de un usuario, Facebook te muestra fotos, amigos, lugares o contenido relacionado a esa persona.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

03.03 ¿Qué es un wireframe?

Un Wireframe es documento técnico. Lineas, cajas, etiquetas, tal vez un par de colores. Eso es todo.

Los wireframes se comparan frecuentemente con “planos” porque cumplen el mismo propósito.

Un plano le dice a los constructores cómo ejecutar el plan del arquitecto. No les dice qué color de tapiz colocar o qué tipo de muebles comprar. Los planos son documentos serios, no son sugerencias o “una idea” o un “diagrama rápido”.

Todos tus garabatos durante juntas de trabajo son útiles, pero no son wireframes, son ideas para wireframes que harás después.

Un wireframe puede que tome una hora en hacerse, pero puede tomar semanas o meses en planearse. Es importante que tus colegas y clientes entiendan eso. So un diseñador de interfaz (UI) no puede usar tu “wireframe” entonces no es un “wireframe”, es un dibujo. Sigue trabajando.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

04 Principios de diseño visual

04.01 Peso visual: Contraste, profundidad y tamaño.

La idea de peso visual es muy intuitiva. Algunas cosas se ven más “pesadas” que otras en un layout, llaman más tu atención. Eso es importante como UX Designer.

Nuestro trabajo es ayudar a que los usuarios noten las cosas que importan y eso es tan importante como no distraerlos de sus objetivos.

Añadiendo peso visual a algunas partes de tu diseño puedes incrementar la probabilidad de que un usuario lo note y puedas cambiar la dirección en la que se mueven sus ojos.

Recuerda: el peso visual es relativo. Todos los principios de diseño visual se tratan de comparar un elemento del diseño con los que lo rodean.

Sin más preámbulo, les presentamos a los patitos de hule, las estrellas de este curso express:

El pato del centro atrae más tu atención. El contraste afecta el peso visual.

Contraste:

La diferencia entre cosas claras y cosas oscuras se llama contraste. Mientras algo claro sea más diferente de algo oscuro, mayor es el contraste.

En UX, quieres darle a cosas importantes mayor contraste, como el pato del centro. En caso de una imagen clara, el pato oscuro destaca más, si fuera una imagen oscura un pato claro destacaría más. Si los patos fueran botones, la gente vería más el botón oscuro sobre botones que se ven iguales.

El pato del centro llama más la atención. Diferencia en profundidad y tamaño afecta el peso visual.

Profundidad y tamaño

En el mundo real, notamos cosas más cerca de nosotros sobre cosas más distantes.

En el mundo digital, cosas más grandes dan la impresión de estar más cerca, como el pato del centro; y algo que es más pequeño parece estar más lejos (cómo el patito borroso del fondo).

Si estos patos fueran todos del mismo tamaño, probablemente los verías de izquierda a derecha (asumiendo que lees en esa dirección).

Si usas efectos de difuminado (blur) o sombreado hace que la percepción de profundidad sea más real. El tamaño ayuda a crear esta ilusión aunque tu diseño sea “plano”.

Cómo regla, quieres que las cosas importantes sean más grandes que las que no son tan importantes. Esto crea una “jerarquía” visual en la página que la hace más fácil de leer rápidamente (escanear) y te ayuda a escoger lo que quieres que el usuario note primero.

Por eso “hacer el logo más grande” está mal, a menos que quieras que tus usuarios vean el logo de la página que están visitando en vez de comprar algo.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

04.02 Color

¿Qué pato se ve frío? ¿O cálido? El color tiene significado.
¿Qué pato se ve más cerca? El color puede acercar o alejar objetos.

Cómo diseñadores de UX generalmente hacemos wireframes en blanco y negro, y eso es bueno. Nos enfocamos en la función mientras que los diseñadores gráficos o de interfaz se fijan en el estilo.

Sin embargo, a veces el color es forma. Cómo en un semáforo o el sabor de una paleta que debe coincidir con su color… ya sabes, cosas importantes.

Significado:

En la primer imagen vemos tres patos: azul, amarillo y rojo. Qué bonitos :3

Estos patos tienen diferentes tonalidades y es fácil identificar lo que cada pato “significa”. Si los patos fueran botones, podrían ser “confirmar”, “cancelar” y “borrar” o si fueran indicadores de gasolina “lleno”, “medio lleno” y “vacío”. Si fueran una estufa podría ser “frío”, “tibio” o “caliente”. Los patos son iguales pero los colores cambian el significado.

Si no necesitas indicar algo así, deja que el diseñador escoja los colores, pero si es importante, es fundamental ponerlo en tus wireframes.

Avanzar o retroceder.

Otro punto a considerar es que los colores pueden ser “silenciosos” o “escandalosos”.

En la segunda imagen aparece un pato rojo con dos azules. El rojo da la impresión de estar más cerca ¿No? Pues no, no lo está. Algo como un botón de “comprar” debe tener un color que lo haga brincar de la pantalla, más gente hará clic en un botón que “brinque”

Por el otro lado, a veces queremos que algunas cosas queden detrás, que sean visibles pero no distraigan, como los dos patos azules. Pues hacer que “retrocedan”. Esto es bueno para algo como un menú que siempre está en pantalla. Si es algo que siempre te está “gritando” es innecesario y roba foco de cosas más importantes.

Mantén tus wireframe simples.

Wireframes coloridos estorban para explicar detalles funcionales. Usa colores en dónde es importante pero no los hagas en azul y no los hagas bonitos para tus clientes, solo generan más confusión (“No, el sitio no será azul”)

Combinando principios visuales.

Los colores juegan también con el concepto de peso visual. Algo grande se nota más, pero algo grande y rojo no puede pasar desapercibido. Marca tus mensajes de error y etiquetas en rojo con alto contraste o si solo estás haciendo una confirmación, algo pequeño y en verde puede quedar perfecto.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

04.03 Repetición y rompiendo patrones

Los cerebros humanos tenemos un talento particular para identificar patrones y secuencias. Cuando algo sucede repetidamente en la naturaleza lo notamos rápidamente. No solo lo notamos, sino que también pensamos diferente sobre esas cosas.

En la primer imagen no vemos 5 patos individuales, vemos una fila de patos. Son un grupo o una secuencia. Seguramente los viste e izquierda a derecha porque así es como estamos acostumbrados a leer.

Si esa fila de patos fuera un menú o una lista pensaríamos lo mismo. Puedes esperar que más gente haga clic en la primer opción, en la izquierda, que en la de hasta la derecha.

Rompiendo un patrón

En la segunda imagen vemos 5 guapos patitos, pero el de en medio ha decidido hacerse solista. Le llamaremos Beyoncé.

Eso cambia todo.

Ahora vemos una fila de cuatro envidiosos patitos y Beyoncé está sola, en el reflector, viéndose bien. Es difícil no fijarse en Beyoncé aunque los cinco patitos sean igualmente fabulosos.

Ahora, si eso fuera un menú, la opción del centro recibiría muchos más clics que las otras, porque nuestros ojos se fijan en ella. Esos clics serían robados de opciones del lado izquierdo, así que el lado izquierdo no sería tan popular cómo antes, aunque seguramente seguirá siendo más popular que las opciones del lado derecho.

Conocimiento es poder.

Puede que esto suene obvio, pero cuando aplicas este principio a tus diseños (o a tus pasos de baile) puede hacer que la gente note botones importantes (o estrellas de pop).

Ten cuidado: romper patrones también puede distraer de cosas importantes. Antes de romper un patrón, primero tienes que crearlo.

Combinando principios:

Para hacer un patrón o secuencia, mantén el peso visual y el color consistentes. Los ojos comenzarán de un lado y terminarán del otro, siguiendo el patrón.

Para romper el patrón, solo cambia el lugar dónde quieres que se fijen. Haz que el botón de “Regístrate” para que sea de otro color, tamaño, forma o estilo y mira como suben tus clics.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

04.04 Tensión lineal y tensión de borde

¿Estás cansado de los patitos? Obviamente no. Eso pensé.

Tensión visual es un concepto que suena básico pero te sorprenderá lo útil que puede llegar a ser. Nuestros cerebros son demasiado buenos identificando patrones que no existen, como diseñador eso es algo que puedes aprovechar.

Ves una línea de patos con un hueco en medio ¿Por qué no simplemente ves 8 patos?

Tensión lineal:

En esta imagen no ves 8 patos individuales, ves una línea de patos que se interrumpe. Ves una línea, esa es tensión lineal, la percepción de un “camino” en dónde no existe tal.

Nuestros ojos siguen el camino. Esto es súper útil.

Si rompes esa línea, como en cualquier camino, el hueco llama más la atención.

¿Ves 12 patos o una caja hecha de patos? Eso es tensión de borde.

Tensión de borde:

Hasta ahora hemos asumido que solo hay una línea, pero ¿Qué pasa cuando creamos tensión lineal usando más de una línea?

El resultado pueden ser figuras.

En esta segunda imagen, he acomodado los patos para que parezcan ser las esquinas de una caja. Podrías ver 12 patos o cuatro grupos de 3 patos, pero tu mente quiere ver una caja, así que eso hace.

Además, podríamos poner cosas dentro dela caja (¡más patos!) o en los espacios entre las esquinas, similar a la tensión lineal, la tensión de borde genera atención en los huecos.

En términos de layout esta puede ser una excelente manera de llamar la atención en algo pequeño, cómo una etiqueta. O puedes crear caminos visuales que lleven al botón que quieres que la gente vea. Anuncios clásicos usan frecuentemente esta técnica.

Convenientemente, hace sentir que un layout es más simple o más “cohesivo” porque el camino o la caja es un solo objeto para tu mente, mientras que 12 patos individuales son demasiado increíbles para ser asimilados.

Combinando tus principios.

En estos ejemplos he dejado huecos de “tensión” en blanco, pero no es necesario que sea así. Puede usar color para simular un camino como un gradiente en una lista de elementos. O puedes agregar peso visual a un grupo de elementos por medio de tratarlos como una sola figura en vez de figuras separadas. Es una excelente manera de dirigir la mirada de los usuarios sin agregar más contenido a tu layout.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

04.05 Alineación y proximidad

Alineación:

En la primer imagen podemos ver 6 guapos patitos, pero también los vemos relacionados por que están alineados.

Vemos dos filas.

El pato de la izquierda y el de la derecha parecen estar separados. Los dos patos del centro se ven “organizados”. Todos los patos parecen estar yendo en la misma dirección. Si piensas en movimiento, el pato de la izquierda parece que se está quedando atrás y el de la derecha que va al frente.

Los 6 patos son iguales, es la alineación la que genera esa percepción.

Botones con funciones similares pueden estar alineados y diferentes contenidos de nivel pueden estar alineados. La información puede ser una tabla con filas y columnas y esto te puede ayudar a crear significados complejos.

Proximidad:

La cercanía o distancia entre dos objetos crean una sensación de que esos objetos están relacionados. Esa distancia se llama “proximidad”.

En la segunda imagen vemos 6 patos idénticos, que no están alineados pero que definitivamente forman dos grupos. Los patos en cada grupo se ven “juntos” como un grupo o familia. Lo único que está creando esa percepción es la proximidad.

En tus diseños, tu puedes poner elementos relacionados más cerca y elementos no relacionados más separados.

Por ejemplo, un encabezado, un bloque de texto un botón, todo relacionado a una acción (cómo una compra o una descarga) se diseñan en “paquete”. Eso permite al usuario entender que todo está relacionado.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

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.

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

Botón primario — Alto contraste, en el eje. Botón secundario — Bajo contraste, fuera del eje.

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).

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

06 Psicología de usuario

06 01 Condicionamiento

¿Qué es condicionamiento?

No tiene nada que ver con cuánto puedes correr, pero tiene que ver con todas tus expectativas y lo que quieres.

Si has escuchado del perro de Pavlov, que salivaba cada que escuchaba una campana, entonces estás familiarizado con el término de “condicionamiento” en un contexto científico.

De hecho, si tienes un perro, seguramente has aplicado condicionamiento antes, cuando le enseñaste a sentarse, ir al baño, declarar impuestos, etc.

Con gente funciona igual.

Condicionamiento es un principio elemental en el que los animales (incluyendo los humanos) harán algo si son premiados y lo evitarán si son castigados.

Puede que sea obvio, pero 99% de los diseñadores que he conocido lo ignoran en sus diseños, aunque es la única manera de hacer que tus diseños sean adictivos.

Premios y castigos son emociones, no cosas.

Cuando hablamos de premiar a la gente, 9 de 10 personas pensarán que es darles la oportunidad de ganar un iPhone o boletos para el cine o cualquier otra tarugada.

Estamos hablando de millones de personas aquí, por favor.

Las mejores recompensas son gratis, porque son emociones, no cosas aleatorias.

Imagina que te ponemos en un escenario y le decimos a 50mil personas que eres el mejor amigo que una persona podría desear y que el mundo es un lugar mejor porque tu estás en él.

¿Querrías vivir esa emoción más de una vez? Seguramente.

Ahora imagina que te ponemos en un escenario y te decimos que tus amigos y familiares te han votado el “más incompetente”.

¿Querrías revivirlo? No creo.

Obviamente son casos extremos (a menos que te dediques a hacer Realities en televisión) pero podrás darte cuenta que no te dimos o quitamos algo, es cuestión de percepción. Las emociones que esas percepciones crean pueden ser muy intensas.

Creando un ciclo de retroalimentación

¿Cómo aplicar condicionamiento en tus diseños?

El chiste es crear un círculo de emociones y comportamiento que nunca termine, así tu diseño se vuelve infinitamente satisfactorio. El modelo básico es:

  • Motivación > acción > retroalimentación > motivación

Por ejemplo, digamos que tienes una foto linda de tu bebé. Estás motivado a ponerla en Facebook para que otros vean a tu bebé, así que tomas una acción y la publicas.

Facebook diseñó un flujo para que tu tomes esa acción.

Luego hay retroalimentación por medio de likes y comentarios, tal vez hasta te manden un mail.

Facebook diseño una manera de recibir ese Feedback también, que crea motivación para tomar otra foto y repetirlo.

Ese círculo continuará hasta que la gente deje de dar atención o seas castigado con gente que está harta de ver fotos de tu horrible chamaco todo el tiempo.

Hipotéticamente, claro.

El truco — Si diseñas una funcionalidad que hace sentir bien a la gente, volverán para sentirse bien de nuevo. Si esa funcionalidad cumple tus objetivos de negocio, tienes un producto exitoso entre manos.

Cuidado con los castigos — El usuario intentará evitar castigos, así que diseña tu producto para eso. No hagas sentir mal a tus usuarios de manera activa, esa es garantía de que los perderás. El caso ideal es cuando no hacer algo que los hace sentir bien reduce el número de puntos, atención o productividad que quieren.

Por ejemplo, con un famoso juego de granja, que permanecerá sin nombre, en dónde tu granja crecía con el tiempo que invertías en el juego (premio) pero si dejabas de jugar mucho tiempo tus cultivos morían (castigo) pero también podías pagar para acelerar las cosas y tener nuevas cosas para tu granja (premio).

Así es como haces un juego multimillonario.

Cuidado con tu propio condicionamiento.

El condicionamiento aplica a todos, en todas partes. Todos estamos condicionados de diferentes maneras, por eso tu tienes un color favorito o por qué prefieres ciertos estilos de arte o por qué eres adicto al chocolate.

No asumas que todos están condicionados igual a ti.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

06.02 Persuasión

La persuasión es compleja. Tengo un libro llamado “The Composite Persuasion” con 270 páginas específicamente sobre cómo hacer cosas persuasivas y eso es solo un curso express.

Esta lección se complementa con la lección sobre cómo escribir textos, porque te ayudará a escribir artículos y textos más largos y persuasivos.

Dos ideas:

  • La persuasión tiene 8 ingredientes universales — Son efectivas cuando se hacen en orden, porque se complementan.
  • La gente es motivada por 14 cosas — Explicaré las 4 más comunes para experiencias digitales.

La fórmula de la persuasión.

Después de comparar 40 diferentes tipos gente persuasiva, encontré que comparten 8 elementos en común:

  • Antes de la interacción

Credibilidad — Sin confianza, todo lo demás es irrelevante. Idealmente debes construir tu credibilidad de verdad, sin embargo, lo importante es comunicarte con otros de manera valiosa. En UX esto aplica desde branding confiable hasta transparencia en tus precios y testimoniales de tus clientes. No digas ser valioso, demuéstralo.

Conoce a tu audiencia — En UX, eso significa que hagas tu investigación para entender a quién estás persuadiendo y qué les importa.

  • Durante la interacción

Abre y desarma — Tienes que atacar el interés del usuario de inmediato, y luego eliminar las posibles objeciones que pueda tener. En UX esto puede ser un gran encabezado encima del fold. Si el precio es importante, por ejemplo, esa debe ser la primer información que el usuario puede ver. No asumas que seguirá más adelante para encontrarlo

Crea empatía — Es la emoción que siente alguien cuando tiene la impresión de tener algo en común con alguien más. En UX puedes lograr esto utilizando lenguaje familiar, mostrando que el usuario tiene algo en común con tus clientes actuales o describiendo al protagonista de tus artículos de una manera que el lector pueda empatizar.

Aislar — Cuando un usuario ha llegado hasta aquí, su interés es claro, así que quieres eliminar cualquier información que distraiga. En UX eso significa eliminar el menú o los banners durante un proceso de compra para que nada distraiga al usuario del proceso.

Convencer — Para persuasiones más complejas puede que requieras de “oleadas” de información para elevar al cliente de los detalles más generales a los particulares, para que entiendan paso a paso. Hay muchas maneras de hacerlo, las pre concepciones cognitivas generalmente ayudan a mostrar la información de una manera que la haga más digerible y amigable.

Cierra el trato — Pide un compromiso y no lo hagas más complicado. En UX esto es un botón de “publicar” o de “confirmar compra” o “compartir”.

  • Después de la interacción

Resumen con beneficio — No dejes que la persuasión desaparezca, eso hace sentir a la gente como que solo te interesa cuando tú quieres algo. En UX puede ser un simple email recordándoles todo lo que pueden hacer con su nuevo producto o sugerencias de más artículos o retroalimentación de cuantas personas vieron o interactuaron con su publicación

Motivaciones universales

Si sigues utilizando la escala jerárquica de Maslow de necesidades humanas (necesidades fisiológicas > seguridad > aceptación social > autoestima > realización), seguramente eres de marketing. Los psicólogos dejaron atrás este diagrama hace ya mucho.

Hay 14 cosas que todos los humanos siempre estarán motivados a ganar o proteger: Evitar la muerte, evitar dolor, aire, agua, comida, homeostasis (funciones corporales), sueño, sexo, amor, protección de los hijos, estatus, afiliación, justicia y entendimiento de todas las anteriores.

Todas estas motivaciones tienen una audiencia y detonan respuestas emocionales en diferentes niveles, pero en el Internet, estatus, afiliación, justicia y entendimiento son particularmente útiles porque son sólo ideas. Son ilimitadas así que puedes crearlas de nada, gratis.

Estatus — Es el ingrediente principal en “gamification”. Básicamente es la manera de medirte con respecto a otros. Cuando diseñas un sistema de puntos y trofeos, o símbolos de poder y apreciación, controlas la percepción de estatus de tus usuarios. Pueden ser medallas, likes o niveles en Candy Crush. Los usuarios se sentirán motivados a sentirse superior a los demás. Y si vinculas esa satisfacción a tus objetivos de negocio, literalmente obtienes dinero por nada más que emociones.

Afiliación — Si eres fan de un equipo de fútbol o una banda o si te sientes orgullos de pertenecer a una organización o a un grupo de intereses especiales, eso es afiliación. La razón por la que la gente se une a grupos de Facebook o hacen un test para saber qué personaje son de Gray Anatomy es porque están motivados a pertenecer a algo. Diseña un lugar en dónde la gente pertenezca y mira como tus usuarios se identifican con grupos a categorías.

Justicia — Es la idea de igualdad o “recibir lo que mereces”, ya sea recompensa o castigo. Es por eso que aplaudimos cuando alguien finalmente recibe el reconocimiento que se merece por su excepcional talento y por qué nos encanta ver cuando arrestan a Justin Beiber. Diseña de manera que los que pasan desapercibidos brillen o para que la comunidad encuentre el mal y lo destruya.

Entendimiento — La gente es motivada por el deseo de aprender más (y a veces sienten que merecen saber más) sobre lo que sea que involucre grandes dosis de motivaciones descritas con anterioridad. Aunque es un elemento mucho más práctico. Si tratas de cambiar algo que la gente tomó tiempo en aprender, como el diseño de tu interfaz, la gente no estará contenta ¿Recuerdas las quejas cada que Facebook (o Instagram) tienen un rediseño? Exacto.

Protip: Dinero no está en la lista. Eso es porque el dinero no es un motivador. Si lo fuera, te motivaría tener dinero aunque no pudieras gastarlo. Sin embargo, te motiva el estatus que ese dinero genera, aún cuando básicamente sea un sistema de puntos sin valor en el mundo.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

06.03 Cómo la experiencia cambia la experiencia

Los usuarios expertos son la minoría.

Estadísticamente hablando, es imposible que los usuarios avanzados sean la mayoría de la gente que utiliza tu diseño, por más que quieras creer que es así.

A menos que tu producto o servicio sea altamente técnico, la mayoría de los usuarios serán personas normales con otras cosas que hacer, sin ser genios, expertos en tecnología como tú y tus colegas.

Verdad dura. Si quieres millones de usuarios felices, diseña para los idiotas distraídos, no los genios obsesionados.

Oculto vs Visible: La paradoja de la elección

En la mayoría de los proyectos tendrás que elegir que tan “limpio” quieres que se vea tu diseño.

Los diseñadores generalmente ocultan todo, porque se ve mejor.

Los no diseñadores quieren todas sus opciones favoritas disponibles todo el tiempo (con opciones diferentes para cada quién).

Entonces ¿Cómo eliges?

Opciones visibles siempre serán más utilizadas y fáciles de descubrir que opciones ocultas. Recordamos que existen cada que las vemos.

Sin embargo, la “paradoja de la elección” dice: Mientras más opciones hay, es menos probable que elijas alguna. Así que si quieres saturar a los usuarios normales con muchas opciones, solo harás que salgan corriendo pegando de gritos.

Asegúrate de que los principiantes puedan encontrar funciones fundamentales fácilmente. Idealmente sin hacer clic. Dale a los usuarios avanzados acceso fácil a funciones avanzadas, aunque no sean visibles todo el tiempo.

Protip: ¿Escondiste 20 opciones de “Social Share” detrás de un botón de compartir? ¿Te gusta lo limpio que se ve? Desafortunadamente no has simplificado nada, solo haz hecho más complejo el proceso de compartir, porque hay demasiadas opciones. Eso es contra-intuitivo. Escoge algunas opciones y hazlas visibles todo el tiempo. Me puedes agradecer después.

Reconocimiento vs memoria

¿Cuántos iconos puedes recordar en este momento? ¿Cuántos podrías reconocer si te diera una lista?

Si eres un humano normal, la segunda opción daría más resultados que la primera.

Si diseñas una interface para que la gente pregunte algo, cómo un motor de búsqueda, solo utilizarán opciones que la gente recuerde, lo que significa que con el tiempo utilizarán cada vez menos opciones, no más y más.

Si tus usuarios tienen que lidiar con mucha información, dales sugerencias o categorías u otro tipo de ayuda para recordarles qué o dónde buscar.

El aprendizaje es lento, los hábitos son rápidos.

“Onboarding” es una palabra para describir las lecciones, paso a paso, necesarias para introducir a un usuario a una nueva interfaz. Ayuda a encontrar funciones principales fácilmente y ayuda a evitar confusión.

Sin embargo ¿Qué pasa cuando el usuario ha utilizado tu interfaz durante 2 años?

Los hábitos se crean rápidamente en la mente de los usuarios, así que debes diseñar una manera rápida de hacer tareas clave, aunque puede que no sean obvias. Usuarios avanzados pueden aprender cómo realizarlas a cambio de mayor productividad. Por ejemplo, atajos de teclado, opciones de clic derecho, funcionalidad de Twitter como cuando escribes “.@”, etc.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

07 Diseñando con data

07.01 ¿Qué es data?

La data es objetiva

En una de las primeras lecciones aprendimos de investigación de usuarios.

Data es diferente

Data mide comportamiento de usuarios, qué hacen, cuántas veces lo hacen, cuánto tiempo tomó, etc.

Es recolectada por una computadora, así que no puede ser influenciada por usuarios, tiene métricas bien definidas y hay poco margen de error. Puede medir millones de personas sin que a ti te cueste más esfuerzo y puede decirte cosas como el navegador que usan tus usuarios o el país en el que viven.

La data nunca miente. Eso es ciencia.

Pero tampoco te dice nada de contexto, así que ten cuidado. Desafortunadamente nosotros tenemos que interpretar los datos y es ahí en dónde suceden errores.

Data está hecha de gente

Tendrás la tentación de tratar a la data cómo “solo números” que significan lo que tu quieres que signifiquen. Recuerda que esos números representan las acciones de gente real con vidas complicadas.

No reduzcas millones de personas a un simple número y esperes que sea confiable en cualquier situación.

También puede que tengas la tentación de buscar números que “prueben” que tienes la razón. No lo hagas y no dejes que nadie te pida hacerlo.

Más data es mejor data

Si mides los clics de 5 personas, puede que todos estén borrachos, y no tienes manera de saber. Si mides los clics de 5 millones de personas es menos probable que todas estén borrachos, a menos que sea toda la gente que está en Cancún durante Spring Break

Mientras más importante sea la decisión que estás tomando con data, más data necesitas para decidir. Una vez que la data hable, ha hablado.

Algunas maneras de juntar data de usuarios

Hay casi tantas maneras de obtener data objetiva de usuarios como de obtener investigación subjetiva de usuarios.

Analytics — Google y otras compañías ofrecen maneras gratuitas de rastrear lo que tus usuarios hacen de manera anónima. Básicamente cada que carga tu página o alguien hace clic en algo, tu sabrás. Puedes crear tus medidas personalizadas y el cielo es el límite.

A/B Testing — Diseña dos versiones de lo mismo y lanza las dos. Así podrás saber cual funciona mejor porque podrás probar con gente real, en tiempo real. El software también te permite saber cuándo detenerte porque en cierto punto, más gente ya no hará mucha diferencia.

Eye-tracking — Esto se hace en un laboratorio, pero el usuario no puede controlarlo, así que yo lo considero objetivo. Software y equipo especial se usan para medir en dónde observan los usuarios para saber cómo utilizan tu diseño y saber si los haz guiado bien o no.

ClickTale — Este es un ejemplo del uso que le puedes dar a mapas de calor para clics, scroll y flujos. ClickTale te permite grabar una interfaz de manera anónima mientras los usuarios la utilizan en tiempo real. Su input está oculto pero puedes ver dónde hacen clic, a dónde va su mouse, cuanto scroll hacen y cuantas páginas ven mientras se mueven dentro del diseño. Muy útil.

Historiales de búsqueda — Mucha gente no sabe que el campo de búsqueda en tu sitio puede guardar cada palabra que buscan. Si la gente lo está buscando, quiere decir que no pueden encontrarlo, así que esos historiales son muy valiosos para mejorar la información de tu arquitectura y layouts.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

07.02 Estadísticas agregadas

Hay 7 estadísticas básicas que necesitas entender si quieres hacer algo con tu sitio. No solo por lo que miden, sino por lo que significan.

Los números no son ni buenos ni malos. 1 millón de usuarios es solo bueno si son más que los del mes pasado. Si eres Facebook y este mes tuviste un millón de usuarios, estás en problemas.

Antes que analices cualquier cosa, tómate un minuto para pensar lo que quieres lograr con tu sitio y date cuenta lo que los números te dicen sobre cierto comportamiento.

1 y 2) Sessions (Total visits) y Users (Unique visits)

Esto puede que te sorprenda pero Total Visits mide el número de veces que tu sitio ha sido visitado, en total.

Unique visits es diferente. Si yo visito tu sitio 50 veces, son un solo visitante único y técnicamente cuenta como dispositivo, no como gente.

¿Qué significan? Comparando estos números puedes saber si tu tráfico es:

  • De alta calidad — Total es mucho más alto que Uniques
  • De alta cantidad — Total es el mismo que Uniques y Uniques es más alto que el mes pasado
  • Ambas — Uniques es más alto que el mes pasado y Total es mucho más alto que Uniques
  • Ninguna — Uniques son menos que el mes pasado y Total es el mismo que Uniques.

Uniques es una representación ‘auténtica’ de tu tráfico, pero es preferible tener 1,000 usuarios que visiten cada mes que 10,000 personas que te visitan una vez. Claro, si un usuario visita mi sitio 1,000,000 de veces, eso tampoco es útil (seguro necesita ayuda).

3) Pageviews

Un pageview es contado cada que cualquier visitante carga una página.

¿Qué significa? Puedes pensar en pageviews como un indicador general de tráfico, porque describe el total del contenido que está siendo consumido e ignora otros factores.

Si tu sitio corre banners, este es un número importante.

Si tu sitio es orientado a contenido, como de noticias, tener muchas pageviews es tu objetivo más importante.

4) Páginas por visita (Pages-per-visit)

Es el número promedio de páginas que cada visitante ve, cada que visita. Puedes pensar que es el número de “clics” que cada usuario hace (aunque no es técnicamente cierto).

¿Qué significa? Si tu sitio está más orientado a cumplir objetivos o interacciones sociales, entonces las páginas por visita puede que sea una métrica más útil que pageviews.

Por el otro lado, si eres Google Search, quieres que este número sea lo más bajo posible, porque quieres que los usuarios encuentren los mejores resultados en la primer página.

5) Tiempo por visita (Time-per-visit)

Este mide cuanto tiempo dura cada visita. Puede ser importante comparar tiempo por visita y páginas por visita.

¿Qué significa? En un mundo ideal, los sitios de contenido quieren que sus usuarios consuman todo el contenido y lean muchos artículos. Eso sería un tiempo largo de visita y un alto número de páginas por visita.

Si la gente ve muchas páginas por visita pero no pasa mucho tiempo por visita, tal vez están buscando algo y no encontrándolo (eso es malo) o completando tareas rápido (eso es bueno). Depende.

Si el tiempo por visita es alto, pero las páginas por visita son bajas, tu navegación puede ser poco funcional (malo) o que los artículos son largos y los usuarios los leen por completo (bueno). Depende.

Si ambos tiempo y páginas por visita son bajos, entonces todo está mal, a menos de que el propósito de tu sitio sea entrar y salir rápido, como Google.

6) Bounce Rate (Tasa de rebote)

Mide el número de gente que solo ve una página sin hacer clic en nada.

¿Qué significa? Normalmente pensamos que es como si la gente le estuviera diciendo “no” a tu sitio, pero hay excepciones.

Los blogs tienen una tasa de rebote más alta, porque están diseñados para que veas una página. O ves una lista de posts recientes o viniste por un sólo post.

La estructura del sitio y la fuente de tu tráfico puede tener un enorme peso en la tasa de rebote, así que aunque se ve simple, puede ser un indicador muy complejo.

7) New vs Return visitors (Visitantes nuevos vs usuarios que regresan)

Si una persona (de hecho un dispositivo) ha estado en tu sitio antes, están regresando. Si no, son nuevos.

¿Qué significa? Visitantes que regresan saben más de de tu sitio, así que rebotan menos y ven más páginas. Si están regresando es por que les gusta algo de ti y también pasan más tiempo en el sitio.

Sin embargo, visitantes nuevos también son buenos porque significa que nuestro sitio está siendo visto por más gente.

Lo importante es la tasa de nuevos vs usuarios que regresan. Si no tienes usuarios que regresan, tu sitio es nuevo o terrible, porque nadie quiere volver. Si solo tienes usuarios que regresan, puede que sean leales pero tu sitio está muriendo, porque nadie nuevo lo está encontrando.

En general, mientras más maduro es un sitio, más usuarios van a regresar a él, como porcentaje, porque es difícil cambiar esa proporción sin campañas de búsqueda o de anuncios.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

07.03 Tipos de gráficas

Hay dos tipos de gráficas que generalmente se utilizan para comportamiento humano: Tráfico y Comportamiento estructurado.

Nota: Usaremos una gráfica de barras en estos ejemplos porque son más rápidas. Tus analytics pueden usar otro tipo de gráficas. No te preocupes, todas básicamente hacen lo mismo, por eso estamos aprendiendo formas, no estilos.

Gráficas de tráfico

Estas gráficas muestran el número de personas que hicieron algo en una escala de tiempo. Cómo el número de visitantes en un día. Eso se llama “tráfico”.

El tráfico siempre se mueve, porque cosas aleatorias suceden en el mundo todos los días, aún cuando tu sitio no cambie.

Por eso no podemos asumir que un cambio pequeño en tráfico fue causa de un cambio en función o diseño.

Si podrías caminar sobre tu gráfica y muestra un incremento constante (o caída) entonces es probable que la tendencia siga, a menos que hagas algo al respecto.

Un pico aparece cuando corres una campaña o hay un problema técnico en una página. O tal vez se hizo pública tu Sex Tape. Los picos o las caídas súbitas son algo que debes investigar porque, mientras que es tentador disfrutar del incremento, siempre hay una razón detrás del pico, a veces bueno, a veces malo.

Cuando los patrones se repiten es señal de un sitio maduro (o aburrido). Sitos populares en “horas de oficina” tienen tráfico durante la semana. Si los usuarios son niños probablemente visiten más en fines de semana.

Si es un patrón saludable vendrá también con un leve incremento. Si ves un patrón super predecible y además tiendes a la baja, tus usuarios pueden estar muriendo de aburrimiento ¡Haz algo!

Gráficas de comportamiento estructuradas

El otro gran tipo de gráficas muestras lo que la gente está haciendo. La fecha u hora en la que visitan no es relevante y puedes influenciar este comportamiento con tu arquitectura de información.

Si tu gráfica muestra una rampa, significa que más gente hace clic al primer elemento que al segundo. Cada que haya un orden visual, como en un menú o una secuencia natural, veremos una gráfica así (Exponential / Long Tail).

La lista de “Mejores páginas” generalmente se ve así, porque no puedes visitar la página dos sin ver la página uno primero. La vista detallada de tiempo por visita o páginas por visita también se ve así, porque pasar más de 10 segundos en un sitio es imposible.

La gráfica de “Exponential with unexpected order” (Exponencial con orden inesperado) es más interesante. Si tu data se ve como que tiene todas las piezas pero están en el orden incorrecto, significa que los usuarios tienen prioridades diferentes a las que tu pensabas, están viendo lo segundo antes de ver lo primero ¡Locos!

Intenta cambiar tu diseño o arquitectura para que se alinee con lo que la data te está diciendo. No trates de cambiar a los usuarios, a ellos eso no les gusta.

“Exponential with power users” (Exponencial con usuarios avanzados) es muy similar a la primera, en forma de rampa, pero alguien podría pensar que la gráfica está embarazada. Así se ve cuando tienes un grupo de gente que es leal, activa o pasa mucho tiempo en sitio. Están haciendo más que el usuario promedio, así que causan un incremento.

Encuentra qué los motiva y haz más de eso.

Un incremento grande entre dos barras generalmente representan un problema para los usuarios.

Quieres que la rampa de tus páginas sea una pendiente suave y continua. Si tiene caídas graves, esos son problemas. Si el home es confuso puede que tengas una gráfica así, porque pocos pasan a la segunda página.

A/B Testing es una excelente manera de encontrar el problema, si es que no es obvio.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

07.03 A/B Testing

Imaginemos.

Imagina que quieres hacer una página para vender zapatos y, por supuesto, quieres vender tantos zapatos como sea posible ¿Cómo lo harías?

  • ¿Un video de zapatos?
  • ¿Una lista de detalles antes de que compren?
  • ¿El logo de la marca de zapatos?
  • ¿Garantía de devolución?

¿Cómo escoges? Si tu primer respuesta fue “preguntemos a los usuarios”, no es mala idea, pero muchas de esas respuestas serían subjetivas. Preguntarle cosas así a la gente solo confirma que gente diferente quiere cosas diferentes. ¿Cómo puedes decidir de cosas subjetivas?

La respuesta

Diseña todo, luego lanza todas tus opciones al mismo tiempo con A/B Testing

¿Qué es A/B Testing?

Es una manera de preguntarle a millones de usuarios reales cuál opción es mejor. Diseñas todo lo que quieres comparar y las lanzas todas.

Los tests se aseguran de que cada usuario solo vea una opción, luego, cuando mucha gente ha visto tu test, puedes ver que versión generó más clics. El test también puede medir el nivel de confianza estadístico, así que también sabrás cuando tienes un resultado real (no lo acabes antes de tiempo)

Puedes hacer 2 versiones o 20. Recuerda que solo parte de tu tráfico puede ver cada una. Mientras más versiones estés probando, más tráfico necesitas.

Detalles:

  1. A/B Testing generalmente es gratis, además del tiempo que toma diseñar e implementar diferentes páginas para probar, aunque los resultados son sumamente valiosos y aún cuando este test llegara a costar, lo vale.
  2. No es lo mismo lanzar una página nueva y luego ver si funciona mejor que la página vieja. La única manera de comprobar si es mejor es corriendo ambas al mismo tiempo, usando un número similar de usuarios para ambas.
  3. Un test es más confiable si solo cambias un detalle. Si ambas páginas son iguales pero la única diferencia es si el enlace es azul, esta bien. Si tienen diferentes menús no tendrás manera de saber si la diferencia es por el color o por el menú.
  4. Probar dos páginas completamente diferentes, como un home vs un checkout es completamente inútil. Así no se hace A/B Testing.

Listo. Esas son las 31 lecciones. Ahora ya eres un Design Thinker bien formado y si practicas todo lo que has aprendido verás que tus habilidades tendrán una muy alta demanda en la industria de la tecnología.

Adrian Solca

Written by

User Experience Architect / Curador @UXMexico /#UX / adriansolca.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade