UX y Arquitectura de la información Ma. Luisa Santos

1. Presentación

Presentación Nuestra experta María Luisa Santos Es Licenciada en Comunicación Audiovisual (1993), Especialista en Diseño de Productos Multimedia (1996) y Doctora en Comunicación (2003), con una tesis doctoral sobre Usabilidad en el diseño de materiales educativos online. Trabaja como consultora de Negocio online y UX en Biko desde 2006, donde también ha sido Project Manager de proyectos web, eCommerce y apps móviles. Anteriormente desempeñó el mismo puesto en Imascé (2002-2004) y como freelance.

También imparte clases como profesora asociada en la Facultad de Comunicación de la Universidad de Navarra (desde 1998) y en diversos cursos de Posgrado relacionados con el diseño y desarrollo de proyectos de comunicación en Internet. “Mi trabajo consiste en dar forma a los proyectos online desde el inicio hasta su construcción y lanzamiento. Ayudo a definir los objetivos de cliente y usuario, los contenidos, servicios y funcionalidades a incluir, la arquitectura de información que dará estructura al site, portal o aplicación, y la interacción que llevarán a cabo los usuarios. Para ello, hago diagramas, esbozos, prototipos, copys... y siempre trabajo mano a mano con el cliente y con el equipo de desarrollo.”

2. Introducción

Introducción Internet se ha convertido en un medio imprescindible de comunicación, marketing y negocio para las empresas. Diseñar portales web, medios online, sites de ecommerce o aplicaciones móviles, es un reto para los profesionales de la comunicación, ya que cada vez resulta más difícil diferenciarse y destacar entre la competencia. Una buena experiencia de usuario (UX) puede marcar la diferencia y lograr que nuestros usuarios disfruten, repitan y se conviertan en prescriptores del site, portal o aplicación que hemos diseñado. Además, una UX bien resuelta conseguirá una mejora sustancial en los ratios de conversión online para nuestros clientes. Este curso ofrece una visión completa de los procesos y herramientas involucrados en el diseño de UX, desde la conceptualización inicial hasta la construcción y puesta en marcha, pasando por los distintas fases de investigación, definición, prototipado y testeo.

El Diseño de la Experiencia de Usuario (UX) a veces se confunde con el Diseño de Interfaces (UI) o con el Diseño de Interacción (IxD) e incluso el Diseño de la Arquitectura de Información (IA). Sin embargo, no son sinónimos. Los tres últimos forman parte del Diseño de la Experiencia del Usuario, que es un concepto más amplio. Ver artículo UI, UX, IxD: ¿Cuál es la diferencia?

Objetivos Al finalizar este curso, serás capaz de:

• Conceptualizar proyectos de comunicación digital de forma ágil mediante dinámicas de design thinking. • Realizar investigación cualitativa con usuarios y plantear el diseño de experiencias y servicios online centrados en los usuarios.

• Definir arquitecturas de navegación acordes a los objetivos del proyecto y las expectativas y necesidades de los usuarios.

• Esbozar mockups o prototipos de las pantallas del proyecto mediante distintas técnicas de prototipado. • Realizar diferentes tipos de tests para validar la arquitectura, el prototipado y el diseño.

3. Definiendo el proyecto con metodologías ágiles

El objetivo principal: la conversión Cuando diseñamos experiencias de usuario para sitios web o aplicaciones, perseguimos un objetivo principal: la conversión Hablamos de conversión cuando el usuario lleva a cabo una acción que nos genera algún tipo de rentabilidad o beneficio. La medición del ratio de conversión es clave para saber si un diseño de experiencia de usuario es adecuado. Y para saber dónde está fallando, resulta muy útil analizar los embudos de conversión con herramientas de analíticas.

Las herramientas de analíticas web permiten identificar las pantallas que debe ir pasando un usuario hasta lograr que convierta. El seguimiento de la navegación del usuario por esas pantallas y el control de dónde se para y ya no continúa, es lo que conocemos como “embudo de conversión” o “Funnel”.

Tipos de conversión

Ingresos directos Generados por ventas online, tanto de productos, como de servicios y/o suscripciones. La monetización es directa, puesto que la conversión implica un pago online.

Ingresos indirectos Los beneficios son una consecuencia de la mejora en los servicios prestados online, que podrá generar un ahorro en costes en servicios prestados físicamente, en la mejora de ciertos procesos, en la reducción de tiempos o recursos, etc.

Registros, suscripciones y leads El beneficio se deriva de la obtención de datos de contacto del usuario, como el nombre, el email, el teléfono, etc. que introduce cuando se registra o realiza una suscripción. Es lo que se conoce como leads que se aprovecharán posteriormente en campañas de marketing online.

El requerimiento básico: la usabilidad Usabilidad se define como “la capacidad de un sistema o producto para ser utilizado de forma sencilla y eficaz por el usuario al que va dirigido, en la ejecución de tareas específicas, en el marco de un contexto determinado”. Jakob Nielsen (1993) Es decir, un sitio web puede ser muy usable para la ejecución de ciertas tareas y poco usable para otras. Por ejemplo, puede ser muy usable para explorar sus contenidos (browsing) y muy poco usable si lo que se quiere es realizar una búsqueda (searching). Esto es así porque la usabilidad depende directamente de la tarea a realizar por el usuario y del contexto en que éste la realiza: ¿qué conocimiento previo tiene?, ¿con qué frecuencia realiza esa misma tarea?, ¿requiere algún dispositivo especial para ejecutar la tarea?, etc. Para Nielsen, un producto considerado usable debe tener 5 características o atributos. Estos atributos, definidos por Nielsen en 1993, aún siguen vigentes y podemos aplicarlos al diseño de webs y aplicaciones. Estos son: 

Fácil de aprender



Preventivo de errores



Eficaz en su utilización



Agradable de utilizar



Sencillo de recordar

No obstante, en 1998 Ben Schneiderman sumó a los principios de la usabilidad de Nielsen uno más: la velocidad de utilización, esto es, el tiempo que tarda un usuario en realizar una actividad específica, una vez que ya conoce el funcionamiento del sistema.

El requerimiento básico: la usabilidad Fácil de aprender El usuario no necesita estudiar ningún manual complejo y largo para poder interactuar y llevar a cabo sus objetivos. De forma intuitiva y casi sin darse cuenta, va aprendiendo a usarlo conforme lo va utilizando.

Utilización eficaz El diseño del producto permite llevar a cabo fácilmente y con rapidez las tareas para las que ha sido concebido, como por ejemplo, reservar un viaje, hacer la compra online en el súper, leer las noticias del día, comunicarse con los amigos y compartir con ellos fotos y vídeos, etc.

Sencillo de recordar Si el usuario accede al sitio web o aplicación con poca frecuencia, de una vez a otra debe resultarle sencillo recordar cómo se usaba, sin tener que volver a aprender su manejo cada vez.

Errores limitados El diseño anticipa los posibles errores que el usuario puede llegar a cometer y los previene aportando información que le ayudan a no cometerlos, por ejemplo indicando qué campos son obligatorios en un formulario para evitar que el usuario envíe el formulario sin hablerlos rellenado.

Agradable de utilizar La sensación para el usuario debe ser grata, positiva, que le dé ganas de repetir y/o de recomendarlo a otras personas. Sin embargo, éste es un factor más subjetivo y por tanto, más difícil de medir.

5 principios básicos de usabilidad 1. SIMPLICIDAD Facilita la percepción de los elementos en pantalla Genera sensación de calma y orden ¿Cómo conseguirlo?:  Uso de espacios en blanco.

 Paleta limitada de colores.  Legibilidad del texto: fuentes espaciados, interlineados.  Elementos gráficos sutiles.  Contenidos: sólo los que el usuario necesita en cada momento.  Trocear las tareas en pasos para simplificar las pantallas.

5 principios básicos de usabilidad 2. CONSISTENCIA Ayuda al usuario a comprender el significado de los elementos en pantalla. Le permite predecir cuál es su funcionalidad ¿Cómo conseguirlo?:  Consistencia con los elementos propios del soporte y sistema operativo (Desktop: Win, Mac, Linux; Mobile: Android, iOS, Win8 o Win Phone).  Consistencia estética: colores, iconografía, ubicación de elementos en pantalla, estilo visual, imagen de marca corporativa.  Consistencia funcional: un mismo elemento siempre debe funcionar de la misma manera y elementos con funciones similares deben tener un aspecto similar.

5 principios básicos de usabilidad 3. CONTRASTE Ayuda al usuario a diferenciar visualmente Le permite discriminar lo importante de lo que no en cada pantalla

¿Cómo conseguirlo?:

Contraste de tamaño y color para destacar lo más importante (ej. call to action vs. acción secundaria). Contraste de aspecto para indicar diferente funcionalidad. Capas visuales y movimientos o transiciones para diferenciar pantallas entre sí (distintas tareas, procesos, contenidos…)

5 principios básicos de usabilidad 4. FEEDBACK Ofrece al usuario información de lo que ocurrirá tras una interacción suya Favorece la predicción y la sensación de confianza ¿Cómo conseguirlo?:  Marcando visualmente los elementos de pantalla cuando el usuario pasa por encima con el ratón, los toca o los selecciona, arrastra, etc.  Indicando el progreso de una tarea, los pasos que faltan hasta su finalización, el tiempo que queda mientras el sistema ejecuta un proceso  Informando cuándo un proceso ha finalizado, cuál ha sido el resultado y, si es posible, ofreciendo la opción de “deshacer”.

5 principios básicos de usabilidad 5. EFICACIA Minimiza los movimientos del ojo y del puntero por la pantalla (o de los dedos en caso de dispositivos móviles). Facilita la ejecución de tareas agilizando los pasos a dar ¿Cómo conseguirlo?:

 Diseñando flujos de navegación que sigan la lógica mental y las expectativas del usuario Agrupando en pantalla aquellos elementos que guardan relación entre sí y que el usuario necesita ver juntos para establecer relaciones  Ubicando en pantalla los elementos allí donde faciliten el proceso, teniendo en cuenta los movimientos del ojo y la posición del cursor o los dedos sobre el dispositivo

Los ingredientes del éxito El diseño de UX debe hacerse teniendo en cuenta en primer lugar las necesidades del usuario. Esto es lo que se conoce como Diseño Centrado en el usuario (User Centered Design).

Pero al mismo tiempo, es fundamental conocer y contemplar los requerimientos del cliente: qué objetivos tiene, qué condicionantes (técnicos, de plazo o de presupuesto, de recursos para el mantenimiento...), qué expectativas, etc. Conjugar las soluciones dadas a los problemas y necesidades de los usuarios, con la visión de negocio del cliente, es la clave para acertar. Si además lo hacemos con técnicas propias de las metodologías ágiles de desarrollo de software, será más fácil alcanzar el éxito. Cuando hablamos de metodologías ágiles, nos referimos a método que permite incorporar cambios en el desarrollo de software con rapidez y en cualquier fase del proyecto. Se basa en que los requerimientos de los proyectos son cambiantes, y las soluciones también deben evolucionar a la par. Para ello, propone hacer desarrollo iterativo e incremental. Ver más

Metodologías ágiles y filosofía lean

La filosofía lean tiene sus orígenes en las técnicas de "producción limpia" implantadas en los años 80 por los fabricantes de coches japoneses, en concreto por la marca Toyota. Estas técnicas ponían el foco en las necesidades y demandas del consumidor final. Y consideraban un "desperdicio" cualquier gasto de recursos que no estuviera dirigido a la creación de valor para este consumidor. Mediante controles de calidad a lo largo del proceso de producción, identificaban errores o problemas lo antes posible, para solucionarlos inmediatamente y asegurarse así de no invertir esfuerzo improductivo alguno.

Metodologías ágiles y filosofía lean Agile y Lean Software Development En los años 90 comienza a gestarse el concepto de “Desarrollo ágil” de software y en 2001 se publica el Agile Manifesto, (concretando sus ideas básicas, muy alineadas con la filosofía lean). En 2003 se publica el libro Lean Software Development. An agite toolkit de Mary y Tom Poppendieck, que aplica ya de forma específica la filosofía lean al mundo de la programación. Agile y Lean, sin ser exactamente sinónimos, comienzan a usarse de forma habitual para designar metodologías de desarrollo basadas en el trabajo de equipos multidisciplinares autónomos, el enfoque en la creación de valor para el cliente, la reducción del “desperdicio” (todo lo que no aporta valor al cliente) y la evolución permanente como respuesta ante el cambio de requerimientos de los proyectos.

Lean Start ups En 2008 Eric Ries publica el libro The Lean Startup, en el que aplica la filosofía lean al mundo de la creación de empresas y productos de alta tecnología, acuñando el término Lean Startup para definir un proceso ágil basado en iteraciones que se repiten y cuyo esquema es: lanzar-testear-cambiar, lo que permite conocer antes las demandas de los clientes, adaptarse a ellas y tener éxito sin requerir una inversión inicial enorme. Muchas de las ideas y formas de trabajo aportadas por Ries son de aplicación al desarrollo de proyectos online, tanto si se trata de webs o apps de empresas de nueva creación, como si se trata de renovación o rediseño de webs o apps de empresas ya establecidas. Lean UX La aplicación de los principios del desarrollo ágil de software y de la filosofía lean al diseño de UX es lo que conocemos como Lean UX. El término ha cobrado relevancia a partir de la publicación en 2013 del libro de Jeff Gothelf Lean UX. Applying Lean Principles to Improve User Experience . Lean UX se basa en utilizar técnicas ágiles para testear lo antes posible las ideas y planteamientos de diseño, validarlas con usuarios reales e ir ajustando el diseño de forma continuada en base a lo que se aprende en los tests realizados.

Lean UX: el proceso de trabajo A continuación, revisaremos en qué consiste el proceso de trabajo bajo la filosofía Lean UX Implica trabajar en ciclos o iteraciones en las que se sigue un proceso con 3 pasos: piensa, construye y revisa. El proceso se divide en tres fases que se repiten a lo largo del proyecto cada vez que tengamos que diseñar una funcionalidad o servicio.  La fase de Ideación requiere investigar y pensar soluciones.  En la fase de Construcción elaboramos diagramas, mockups, prototipos, incluso html navegable.  Y en la fase de Revisión testeamos cómo funciona cada una. En cada fase podemos utilizar distintas técnicas, que iremos viendo a lo largo del curso. > Manifiesto Lean UX

Lean UX: el proceso de trabajo Requiere trabajar de forma colaborativa con el cliente y con el equipo de desarrollo del proyecto.

El cliente debe participar en sesiones de trabajo destinadas, no sólo a trasladar requerimientos al equipo, sino también a analizarlos, generar nuevas ideas, definir soluciones y validar propuestas. En esas sesiones deben participar todos los miembros del equipo con perfiles distintos: consultores de negocio, especialistas en UX, diseñadores gráficos y programadores.

Lean UX: el proceso de trabajo Exige “salir del edificio” para investigar y testar con usuarios reales las ideas, los mockups y los prototipos navegables o funcionales. El diseño centrado en usuario no sería tal si no empezamos por investigar qué problemas tienen nuestros usuarios que se verán solucionados con el producto que vamos a diseñar. Además, cada solución que planteemos a nivel mockup o prototipado, también debemos testarla con usuarios, para introducir las modificaciones necesarias cuanto antes en el proyecto.

> Conocer más sobre Lean UX

Acotando el proyecto: Agile Inception Antes de empezar a trabajar, conviene ponerse de acuerdo en lo que va a ser el proyecto: alcanzar una visión compartida. Por ejemplo: Si me cruzo contigo en un ascensor, ¿sabrías explicarme en un minuto en qué consiste tu proyecto?¿Tenemos claro quién es nuestro público objetivo y qué necesita exactamente?¿Sabemos cómo vamos a satisfacer las necesidades de nuestros usuarios y en qué orden?¿Tenemos claro qué NO es este proyecto? En definitiva, ¿tenemos el mismo proyecto en la cabeza? La visión compartida antes de empezar un proyecto es clave para su éxito. Agile Inception (también conocida como Inception Deck o simplemente Inception, es una dinámica definida por vez primera en el Libro The Agile Samurai (2010) , que propone 10 preguntas y sus correspondientes 10 técnicas para responderlas) Es una sesión de trabajo colaborativo con cliente y todo el equipo, guiada y apoyada en distintas técnicas de design thinking (traducido como Pensamiento visual, “Design Thinking es un enfoque para la innovación centrado en las personas, que utiliza herramientas de diseño para integrar las necesidades de las personas, las posibilidades de la tecnología, y los requerimientos para el éxito del negocio“. Definición de Tim Brown, presidente y CEO de IDEO) El desing thinking nos permite:

 Entender los objetivos del proyecto y priorizarlos.  Definir el alcance y el tono del proyecto  Identificar a los usuarios, sus necesidades y escenarios de uso  Obtener esa visión compartida para diseñar un proyecto alineado con las expectativas del cliente, de los usuarios y del equipo. A continuación veremos algunas de esas técnicas.

Acotando el proyecto: Agile Inception Elevator Pitch o Discurso del ascensor Resumir el producto, objetivo y público en algo tan corto como para poder contárselo a alguien en un ascensor.

Acotando el proyecto: Agile Inception Definición de Objetivos para nuestro cliente y para nuestros usuarios.

Y no nos olvidemos de las vías de monetización: ¿qué acciones del usuario generarán ingresos?

Acotando el proyecto: Agile Inception Valores diferenciales respecto de la competencia

Definiendo Personajes y sus características

Acotando el proyecto: Agile Inception Acotando los escenarios de uso del producto por los usuarios

Acotando el proyecto: Agile Inception Diseña la caja de tu producto para priorizar y destacar lo más importante

Personifica las cualidades de tu producto: ¿Quién las representa mejor?

Acotando el proyecto: Agile Inception Qué es / Qué no es este producto. Aclaremos el alcance.

Tecnología móvil y UX En el Inception deberíamos obtener también una visión compartida sobre las soluciones de movilidad más adecuadas para el proyecto, ya que éstas condicionarán el diseño de la experiencia del usuario.

Principalmente deberíamos acotar si el proyecto va a ser:

Una web responsive Hoy en día el acceso a la Web desde dispositivos móviles supone en torno al 50% del total de los accesos, por lo que al diseñar una web, no debemos olvidarnos de que ésta deberá verse correctamente en smartphones y tabletas. Para ello, la mejor opción es que lleve una plantilla de tipo responsive, que se adapte a los distintos tamaños y resoluciones de pantalla de los diferentes dispositivos.

Tecnología móvil y UX Una web + un portal móvil Otra solución posible es generar una web que no sea responsive necesariamente, y un portal móvil adicional en el que se incluyan sólo aquellos contenidos que los usuarios vayan a usar con más frecuencia en escenarios de uso en movilidad. Esto supone la definición de dos proyectos, que compartirán ciertos elementos de arquitectura de información, maquetación y grafismo, pero no serán idénticos.

Una web y/o una app móvil Si además de querer favorecer el acceso en movilidad, queremos permitir al usuario aprovechar las funcionalidades propias del dispositivo (cámara, acelerómetro, GPS, etc.), entonces convendrá hacer una aplicación móvil, además o en vez de una web. Los principios y procesos del diseño de UX para apps son los mismos, pero las soluciones de diseño y programación son específicas, sobre todo si tenemos en cuenta que las aplicaciones pueden correr sobre dispositivos tan diversos como un móvil, un smartwatch, una pulsera de fitness o las Google Glass.

Experiencia de usuario omnicanal Los usuarios hoy día interactúan con nuestro servicio o marca, no sólo por medio de distintos dispositivos, sino también de distintos canales: canal físico (tiendas, stands en ferias, kioscos, correo postal o paquetería, material impreso…), canal online (webs, apps, email, redes...), canal telefónico (llamadas, mensajería, chats...). Es importante que desde el principio diseñemos la UX buscando lograr que los distintos canales generen una experiencia integrada de relación con la marca, una experiencia omnicanal.

Fuente: Digital Response

Experiencia de usuario omnicanal Evolución hasta llegar a la estrategia omnicanal: Multicanal: hasta aproximadamente 2008 las marcas ofrecían a los usuarios experiencias completamente diferenciadas en cada uno de sus canales, sin relación entre sí. No había una estrategia integrada. Cada canal era gestionado por un equipo o departamento ajeno al resto, que funcionaba como un silo aislado. Y la experiencia del cliente podía ser radicalmente distinta dependiendo del canal con el que se relacionara. Cross Channel: en la segunda mitad de los años 2000 las compañías logran que sus distintos departamentos se coordinen para ofrecer a los usuarios una experiencia de la marca coherente, homogénea entre los distintos canales. Sin embargo, para el cliente, la relación con cada canal seguía siendo independiente, no había un flujo natural de un canal a otro. Aunque la marca le "hablara" de forma integrada, el cliente tenía distintas expectativas u objetivos y realizaba distintas tareas en cada uno de los canales. Omnicanal: a partir de 2013-2014 podemos hablar ya de omnicanalidad, cuando las marcas ofrecen a los usuarios una experiencia global que integra los distintos canales en función de lo que el usuario necesita en cada momento y contexto. Un cliente puede comenzar una tarea en un canal, retomarla y terminarla en otro, fluyendo entre ambos canales sin percibir saltos o discontinuidades en su experiencia.

Ideas Clave  El objetivo del diseño de UX es satisfacer las necesidades de los usuarios y lograr la conversión, esto es, obtener beneficios gracias a las acciones de los usuarios.  El diseño de UX debe buscar siempre lograr el mayor grado de usabilidad, respetando 5 principios: simplicidad, consistencia, contraste, feedback y eficacia.  Conjugando el diseño de UX con la visión de negocio del cliente y con las metodologías ágiles será más fácil lograr el éxito de un proyecto.

 El proceso de trabajo de Lean UX se basa en iteraciones en las que se repite el proceso de pensar, construir y revisar; se realiza trabajo colaborativo con el cliente y el equipo de desarrollo; y se testea y corrige el producto permanentemente.  Para arrancar un proyecto y partir todos de la misma visión compartida, podemos realizar un Agile Inception y utilizar distintas técnicas de Design Thinking que nos ayudarán a acotar el alcance, objetivos, valor diferencial, usuarios, etc. del proyecto.  Un aspecto clave al arranque del proyecto es consensuar cuál será el soporte más adecuado: web, portal móvil o app.  El diseño de UX debe contemplar los distintos canales en los que interactúa el usuario, definiendo una estrategia multicanal o, si el proyecto lo permite, omnicanal.

4. Conociendo a nuestros usuarios

Diseño centrado en el usuario La clave para acertar en el diseño de UX es lograr resolver las necesidades de nuestros usuarios. Para ello es fundamental conocer:  quiénes son esos usuarios  cómo son y cómo se comportan habitualmente  qué necesidades tienen respecto de esos comportamientos  y cuáles de esas necesidades pueden ser resueltas gracias a nuestro proyecto. No olvidemos además que el diseño de UX no se ciñe sólo a diseñar interfaces para pantallas, sino que incluye el diseño de experiencias completas de uso que exceden al entorno online y se completan en el mundo físico. Ver ejemplos en la siguiente página.

Lo que debemos conocer de nuestros usuarios: Contexto socio económico Edad, género (si es relevante), estado civil, si tienen hijos o no y de qué edades, nivel de estudios, profesión, nivel de vida y de consumo, etc. Comportamientos Costumbres, hábitos de vida, aficiones (y pasiones), tecnología de la que disponen (ordenador, tableta, smartphone, otros dispositivos), familiaridad y actitud que tienen con ella, disponibilidad de tiempo, etc. Necesidades En relación con nuestro proyecto, como por ejemplo: alquilar su vivienda, conseguir un billete de avión muy barato, perder peso, aprender sobre una materia, asesorarse sobre un tema… A veces los usuarios son muy conscientes de sus propias necesidades, pero a veces no lo son tanto y somos nosotros quienes tenemos que descubrirlas.

Diseño centrado en el usuario Algunos ejemplos de sites o apps de salud y deporte donde se aprecia el diseño de experiencias completas La app Nike+ Running, primero para iPod, luego para iPhone y ahora también para Sportwatch, fue pionera en el ámbito del deporte y la salud al crear una experiencia mixta que conecta el mundo físico con el mundo online. La app permite establecer retos personales de carrera, monitorizarlos y compartirlos con otros corredores.

En esa misma línea han surgido muchas otras apps, como la exitosa multiplataforma Runtastic u otras relacionadas con el proceso de embarazo (Ver selección de apps de embarazo 2014 por Healthline) o de dietas y pérdida de peso (Ver selección de apps de pérdida de peso 2014 por Healthline)

Definición de personajes y escenarios

Cuando empezamos un proyecto es probable que todavía no tengamos a mano usuarios reales para poder realizar entrevistas, tests o pruebas con ellos. En este caso, y también en el Agile Inception inicial, podemos emplear la técnica de definición de personajes y escenarios, que se basa en la creación del concepto “persona” frente al concepto “usuario” (definido por Alan Cooper) . La definición de personajes y escenarios será más rica y completa si la realizamos una vez hayamos obtenido datos mediante otras técnicas como encuestas, entrevistas, focus groups, analíticas, etc. Pero podemos hacerla al inicio, basándonos en el conocimiento de los potenciales usuarios que tengamos. Por eso es conveniente trabajar esta técnica durante el Agile Inception, ya que en ese momento estarán presentes todas las personas involucradas en el proyecto y que pueden aportar su conocimiento sobre los usuarios objetivo.

Definición de personajes y escenarios

Un personaje es la descripción de una persona concreta, real, con nombre, edad, estado civil y familiar, profesión, con sus comportamientos y necesidades concretas, sus miedos, preocupaciones y frustraciones, e incluso una fotografía o dibujo que lo represente. Los escenarios son las descripciones del contexto y situaciones de uso del producto por los personajes, en la ejecución de una tarea concreta.

Definición de personajes y escenarios Tipos de personajes Normalmente definimos entre 3 y 6 personajes. Y elegimos cuáles son nuestros personajes primario, secundario y secundario crítico. Los personajes primarios son aquellos que necesitan de un mecanismo de interacción propio y único que no serviría para otro personaje. Los secundarios son aquellos que podrían usar una interfaz diseñada para otra persona, para el personaje primario. Y los secundarios críticos son aquellos que tienen alguna particularidad que exige diseñar a su medida algún proceso o funcionalidad específico. > Definiendo personas en 10 pasos > Ejemplos de fichas de personajes

Tipos de escenarios  Escenarios de alta frecuencia. Describen acciones y tareas muy frecuentes, por lo que requieren de un aprendizaje inicial que el usuario ya no necesitará más adelante. En cambio, el usuario demandará atajos y la personalización del sitio a sus necesidades concretas para facilitarle la ejecución de estas tareas.  Escenarios de acciones necesarias. Se refieren acciones que, aunque no se realizan frecuentemente, deben ser obligatoriamente completadas cada cierto tiempo. Por la menor frecuencia de estas acciones y su importancia, su diseño especialmente usable será siempre crítico  Escenarios de acciones marginales: describen acciones y tareas empleadas una sola vez o con la mínima frecuencia. Puesto que se van a emplear tan poco, no conviene invertir excesivos recursos en su diseño y se recomienda ceñirse a estándares ya conocidos por el usuario, bien en nuestro sitio/app, bien en otros que habitualmente utilice.

Encuestas individuales a usuarios Si tenemos acceso a usuarios potenciales de nuestro producto, podemos investigar sus objetivos y necesidades mediante encuestas, entrevistas y “Grupos dirigidos” o Focus Groups. Las encuestas son series limitadas de preguntas con respuestas abiertas o cerradas (sí/no, a/b/c). Se pueden realizar presencialmente, por teléfono u online. Las encuestas presenciales tienen un coste mayor (en tiempo y desplazamientos) que las encuestas online. Además, tienen el riesgo de que la presencia del entrevistador sesgue los resultados. Por ello, cada vez es más frecuente la realización de encuestas online, para lo cual existen multitud de herramientas gratuitas o de pago que pueden emplearse. Permiten recoger información de forma estructurada y realizar un tratamiento posterior de los datos obtenidos.

Esto es especialmente útil si la muestra de encuestados es amplia. Pero incluso si la muestra es pequeña (menor de 10 usuarios), la encuesta permite obtener información concreta y manejable de cara a tomar decisiones de diseño.

Encuestas individuales a usuarios

Encuestas individuales a usuarios Las claves para obtener resultados fiables son:

1.Disponer de una muestra representativa de usuarios. Aunque no sea muy grande, la muestra debe incluir personas que se asemejen o puedan llegar a ser nuestros usuarios potenciales.

2. Formular las preguntas de forma clara y comprensible, para que permitan obtener la información deseada sin sesgar las respuestas.

> 10 herramientas útiles para realizar encuestas online

Entrevistas y Grupos dirigidos Las entrevistas individuales y los Grupos dirigidos (Focus Groups) son técnicas guiadas de investigación cualitativa, no tan estructuradas como las encuestas. Ambas nos permiten obtener información sobre los comportamientos, necesidades, expectativas, metas e intereses de los usuarios, de una forma abierta y receptiva a lo que pueda surgir durante la sesión.

 Utilizamos las entrevistas individuales cuando preferimos que cada usuario entrevistado no se vea “contaminado” por las opiniones de los demás.  Y realizamos Focus Groups cuando buscamos que la interacción entre los usuarios dé lugar a nuevas ideas, o a un debate sobre los servicios o funcionalidades que estemos barajando incluir en nuestro diseño.

Entrevistas y Grupos dirigidos Para realizar una entrevista individual debemos elaborar previamente un guión con las preguntas a plantear a nuestro interlocutor. Estas preguntas serán de respuesta abierta. Podemos ilustrar algunas preguntas con ejemplos visuales y mostrarlos impresos o, mejor aún, en el dispositivo para el que estemos diseñando (ordenador, tablet, smartphone). Así podremos obtener un conocimiento más específico del usuario. La duración de la entrevista puede oscilar entre 30 y 90 minutos, aunque en torno a 45 minutos suele ser suficiente. La entrevista como herramienta de análisis de usuarios El Grupo dirigido también exige elaborar un guión previo de preguntas y temas a plantear. El moderador debe ceñirse al guión en la medida de lo posible, siempre dejando margen para que puedan aflorar las nuevas ideas. Es muy útil que, además del moderador, haya un segundo consultor de UX tomando notas para recoger la información generada durante la sesión. El número adecuado de participantes en un Focus Group es de entre 5 y 10 personas.

Tests de usuarios “de guerrilla” Cuando estamos rediseñado un sitio web, aplicación o sistema, este tipo de test es de gran utilidad para conocer los puntos fuertes y los aspectos a mejorar. Se trata de una prueba de usabilidad que consiste en la observación y análisis del usuario, llevando a cabo tareas concretas en un contexto real de uso (a ser posible en su propio dispositivo y en las condiciones habituales en las que lo emplea). El test de usuarios nos permite obtener información cuantitativa (Nº de aciertos, intentos y/o errores, tiempo en completar las tareas), pero sobre todo, información cualitativa (Lenguaje verbal y no verbal, estado de ánimo, dificultades encontradas, éxitos logrados, etc.) Para un “test de guerrilla” es recomendable que haya 2 observadores expertos en UX y seguir los siguientes pasos. Para realizar un test de usuarios formal y con validez estadística necesitaríamos un laboratorio adecuado, con cámara de vídeo o grabadora de audio (para grabar todas las verbalizaciones del usuario), software para grabar la navegación del usuario y las interacciones en pantalla, software de eyetracking para registrar dónde mira el usuario en cada momento, así como una muestra amplia y representativa de participantes. Esto puede resultar complejo y caro de conseguir para determinados proyectos.

En esos casos, otra forma más económica y asequible es realizar pruebas informales o tests de 'guerrilla'. En este caso basta con reclutar una muestra de 4-8 participantes, ya que en la mayoría de casos este número es suficiente para detectar los principales problemas de usabilidad, aunque los resultados no tengan validez estadística.

Tests de usuarios “de guerrilla” Fases para elaborar un test de guerrilla

Preparación 

Definir qué elementos queremos evaluar: arquitectura de información, páginas determinadas, procesos, copys, un formulario, etc.



Establecer las tareas que pediremos realizar a los usuarios y que nos permitirán evaluar la usabilidad de esos elementos.



Redactar el enunciado de las tareas para el test.



Preparar los cuestionarios previo y posterior a la prueba.

Presentación  Explicar al usuario en qué consiste la prueba y cuánto durará aproximadamente

 Hacer hincapié en que no se le está evaluando a él/ella, sino al sistema, sitio web o aplicación  Emplazarle a realizar cada tarea verbalizando todo lo que pueda sobre el proceso que haya seguido (dudas, sensaciones, etc.)

Tests de usuarios “de guerrilla” Fases para elaborar un test de guerrilla Cuestionario pre Antes de comenzar las pruebas, realizar un breve cuestionario que nos permita tener información de contexto de cada usuario:  Nombre y datos personales que consideremos necesarios 

Conocimiento y frecuencia de uso del sistema



Tareas más habituales y necesidades más frecuentes y/o importantes

Pruebas Para cada una de las tareas que queremos que el usuario lleve a cabo: 

leer el enunciado de la misma



entregarlo impreso al usuario para que lo tenga delante mientras realiza el test.

 Si durante la ejecución de la tarea se despista o se “pierde”, no ayuadrle a resolver la tarea para no sesgar el resultado del test.  Y si deja de verbalizar, animarle a retomar e ir contándonos porqué lleva a cabo la tarea cómo lo está haciendo.

Cierre Para finalizar, agradecer al usuario su participación en el test y dedicar unos minutos a comentar con él la experiencia. Lo ideal es obtener un resumen de lo más reseñable para el usuario en cuanto a éxitos o fracasos obtenidos en la ejecución de las tareas.

Herramientas de feedback Estas herramientas se emplean para conocer las opiniones y comentarios de los usuarios directamente mientras navegan el sitio web o la app. Nos permiten detectar elementos críticos, puntos en los que el usuario se “atasca” o que no acaba de comprender bien. También nos pueden aportar información sobre el estado de ánimo del usuario, si se ha sentido o no satisfecho durante la navegación. Dentro de las herramientas de feedback podemos diferenciar dos tipos:



Las de uso individual, en las que cada usuario nos ofrece su feedback de forma independiente al de los demás



Las de uso social, en las que distintos usuarios proponen ideas de mejora y el resto de la comunidad las vota u ofrece su opinión y comentarios, para así disponer de un feedback colectivo.

A continuación conoceremos algunas de ellas:

Herramientas de feedback Feedbackify Mediante una pestaña ubicada en el lateral, los usuarios pueden indicar problemas encontrados, realizar sugerencias, aportar elogios o hacer otro tipo de comentarios, en cualquier momento sobre cualquiera de las pantallas del sitio web. Medallia (antiguo Kampyle) También integra una pestaña permanente en pantalla para abrir una ventana en la que el usuario puede ofrecer feedback de distinto tipo y precategorizado, tal y como deseemos. Bugmuncher Tiene el valor añadido de que permite al usuario marcar zonas de la pantalla para referirse a ellas en sus comentarios. En lugar de describir dónde ha encontrado un problema, el usuario puede ilustrarlo. Jotform Wishbox En este caso además de marcar zonas en la pantalla con distintas formas y colores, el usuario puede incluir sus propios comentarios sobre la misma pantalla. Uservoice Uservoice nació como herramienta de feedback en la que los usuarios proponían ideas y los demás usuarios las votaban y comentaban, de forma que las más votadas subían a las primeras posiciones del ranking de sugerencias. En la actualidad complementa esa funcionalidad con muchas otras que hacen de la herramienta un completo servicio de Atención al Cliente. Get Satisfaction Es una herramienta encaminada a crear comunidades de usuarios (clientes, seguidores o fans de una marca), que además de ofrecer su feedback a la propia marca, valoren y comenten las ideas de los demás y se den apoyo entre ellos, aportando conocimiento a otros usuarios.

Grabación en remoto y mapas de calor Estas herramientas se emplean para registrar lo que hace el usuario en el sitio web o en la app, grabando los movimientos del cursor por la pantalla, los clics realizados (o los gestos en los dispositivos móviles), el descenso con la barra de scroll y en algunos casos, grabando incluso al propio usuario. Nos permiten obtener una información similar a la que nos aportan los tests de usuario, con la ventaja de que podemos ampliar mucho la muestra de participantes y realizar un análisis cuantitativo de los datos obtenidos, ya que la información se captura automáticamente y queda estructurada por la herramienta.

En los dispositivos móviles con interfaz táctil no disponemos de ratón, por tanto no se pueden contabilizar “clics”. En cambio, se pueden registrar y contabilizar los gestos que el usuario puede realizar con uno o varios dedos sobre la pantalla: tocar, arrastrar, pellizcar, lanzar… Algunos gestos y su funcionalidad son comunes entre distintos Sistemas Operativos, pero otros son propios de cada sistema.

> Ver referencia: Touch Gesture Reference Guide por Craig Villamor, Dan Willis, and Luke Wroblewski

Grabación en remoto y mapas de calor CrazyEgg A partir de los clics realizados por los usuarios, la herramienta genera mapas de calor y mapas estilo confetti (punto a punto por cada clic). También ofrece mapas de scroll (para conocer hasta dónde descienden con el scroll los usuarios) y permite realizar el seguimiento por separado de clics en desktop y dispositivos móviles. ClickTale Además de registrar los clics y ofrecer mapas de calor y mapas de scroll, también genera vídeos con el registro de los movimientos del cursor por la pantalla, e incluye analíticas integradas con embudos de conversión. Lucky Orange Al igual que ClickTale, esta herramienta permite generar mapas de clics en formato heatmap, (mapa de calor) y grabar la interacción de los visitantes en pantalla, generando vídeos en los que se muestran los desplazamientos del cursor y los clics realizados. Usability Tools Añade a la grabación de la actividad del usuario la posibilidad de crear filtros y segmentos de usuarios, así como una presentación de los resultados adicional en formato timeline. Silverback Herramienta exclusiva para Apple que permite capturar la actividad del usuario, grabar en vídeo su rostro y en audio su voz, para generar un vídeo con los resultados.

Analíticas: tráfico y consumo de contenidos En la actualidad, el uso mayoritario es el de las herramientas de Tags, que ofrecen informes gráficos muy completos sobre los usuarios que acceden al site y sobre su navegación allí, y que además pueden personalizarse a la medida de nuestros KPIs. Esta información es de gran utilidad para el diseño de UX, aunque su interpretación no siempre es sencilla. Las causas por las que una página de un sitio web no es muy consultada pueden ser diversas: • la información que incluye no es de utilidad para los usuarios • la información es útil pero no está bien presentada, resulta poco clara, es difícil de comprender o poco atractiva • la información es útil y clara, pero la página no es fácil de encontrar en el sitio web (por su ubicación en la arquitectura, por su denominación y/o porque no está bien optimizada para los buscadores) • la información es clara y útil y no es difícil encontrar la página, pero hay otros contenidos que están mucho más visibles y priorizados, por lo que los usuarios rara vez acceden a ésta. La labor del consultor / diseñador de UX es encontrar la razón principal, para poder actuar sobre ella, y para descubrirla, es muy útil complementar el estudio de las analíticas de tráfico con análisis de clics en pantalla y/o con pruebas de tipo cualitativo, como encuestas, entrevistas o tests de usuario de guerrilla.

KPIs Key Performance Indicators son los Indicadores clave de rendimiento, esto es, los parámetros a tener en cuenta para valorar si el sitio web o la aplicación está funcionando como deseamos, logrando los objetivos establecidos para el negocio. La definición de KPIs y su seguimiento mediante unos cuadros de mando, es la base sobre la que debemos basar el trabajo de análisis de tráfico y consumo de contenidos.

Analíticas: tráfico y consumo de contenidos Las herramientas de analítica para medir tráfico y consumo de contenidos son de dos tipos:  Logs Registran peticiones de páginas al servidor donde se aloja el sitio web.  Tags Mediante un código insertado en cada una de las páginas del sitio, registran descargas de páginas en el navegador del usuario.

Algunos ejemplos de este tipo de herramientas son: • • • • • •

Google Analytics: gratuita y la más extendida. Tiene versión para apps (Mobile Web Analytics Tool) Piwik: requiere descarga e instalación MixPanel: tanto para web y como para apps móviles Flurry: sólo para apps móviles en cualquier Sistema Operativo Apple App Analytics: sólo para apps iOS AT Internet Analytics Suite: recolecta y agrega datos de distintas fuentes en una misma plataforma.

Analicemos a continuación, qué tipo de datos podemos medir:

Analíticas: tráfico y consumo de contenidos Métricas de Tráfico Número de usuarios que acceden a nuestro sitio web, diferenciando usuarios nuevos y recurrentes Visitas realizadas por ellos: número total, frecuencia (diaria, semanal, mensual), duración, visitas promedio por cada usuario. Origen de esas visitas: países o regiones de las que proceden y sitios web desde los que acceden (buscadores y sitios que nos enlazan)  Tecnología mediante la que acceden: dispositivos (ordenadores, tabletas, móviles), navegadores, tamaños y resolución de sus pantallas.

Analíticas: tráfico y consumo de contenidos Métricas de navegación y consumo de contenidos  Páginas vistas: número de páginas totales y por usuario, tiempo de permanencia en la página  Páginas de entrada y páginas de salida, tasa de rebote (usuarios que acceden a un página del site y se marchan sin haber navegado ninguna otra)

 Rutas de navegación: trayectos seguidos por los usuarios en su navegación por el site  Eventos sobre contenidos en distintos formatos, como descargas de documentos, reproducciones de un vídeo o audio, clics en objetos flash o ajax  Búsquedas: palabras clave empleadas en buscadores para acceder al sitio web y búsquedas realizadas dentro del propio sitio

Analíticas: tráfico y consumo de contenidos Métricas de conversión 

Objetivos monetizados: visitas a determinadas páginas, número de contactos generados, reservas o compras realizadas, registros de usuarios en el sitio web, suscripciones a newsletter o a determinados servicios.



Participación social: comentarios y/o votaciones efectuadas, número de veces que se comparte un contenido en redes sociales y redes en las que más se comparte (twitter, facebook, google+…)

 Abandono de procesos: número de veces que un proceso es comenzado y abandonado sin terminarlo, páginas en las que es abandonado (embudos)

Analíticas: tráfico y consumo de contenidos Métricas en aplicaciones móviles  Adquisición: impacto de las distintas fuentes que traen usuarios a las stores que se descargan la app. Y versiones de la app más descargadas.  Retención: usuarios activos a 1-7-30 días y 3 meses de la descarga, así como número de sesiones (veces que abren y utilizan la app) al día/semana/mes, duración de las sesiones yl número de usuarios que desinstalan la app.  Comportamiento: pantallas vistas, tiempo por pantalla, número de pantallas por sesión...  Monetización: conversiones que generan algún tipo de beneficio económico (publicidad, compra de productos, compra de módulos o contenidos in-app, suscripciones de pago).

Mapas mentales, de Efecto y de Impacto Mind maps, Effect maps e Impact maps Estos tres tipos de mapas son técnicas similares entre sí que nos sirven para:  conocer a nuestros usuarios, sistematizando sus objetivos y necesidades  empezar a esbozar la arquitectura del sitio que estamos diseñando  no perder de vista los objetivos de negocio del proyecto.

Todos ellos suelen elaborarse visualmente en forma de mapa, representando con líneas las relaciones entre objetivos de negocio, usuarios, necesidades y funcionalidades asociadas.

Copyright de Gojko Adzic-

Mapas mentales, de Efecto y de Impacto Mapas mentales

Los Mapas mentales tradicionalmente empleados en el diseño de UX tratan de casar los objetivos y necesidades de los usuarios con los contenidos, servicios y funcionalidades a integrar en el proyecto. > Ver más información (en inglés) >50 herramientas para crear mapas mentales

Mapas de Efecto

Los Mapas de Efecto aportan un aspecto adicional: parten de los objetivos de negocio para establecer las relaciones entre usuarios y contenidos, servicios y funcionalidades a integrar. > Ver más información (en inglés)

Mapas de Impacto Los Mapas de Impacto introducen otro factor: además de partir del objetivo de negocio y los objetivos de los usuarios, establecen los comportamientos que deberán llevar a cabo los usuarios para lograr los objetivos de negocio. Es decir, estos mapas introducen ya el concepto de “objetivos medibles”, conversión y KPIs. > Ver más información (en inglés)

Ideas Clave  El diseño de UX se basa en el conocimiento profundo de los usuarios, su contexto socio cultural, económico y tecnológico, sus hábitos, comportamientos, necesidades, objetivos y expectativas. Para conocerlos, podemos emplear distintas técnicas.  Las técnicas de investigación y análisis cualitativo nos permiten obtener insights valiosos sobre los usuarios, aunque no datos estadísticos. Incluimos en ellas la definición de personajes y escenarios, encuestas, entrevistas, grupos dirigidos y mapas mentales, de efecto o de impacto.  Las técnicas de investigación y análisis cuantitativo, como los mapas de calor y las analíticas de tráfico y consumo de contenidos, nos aportan datos estadísticos muy completos, pero que también debemos interpretar apoyándonos en otras técnicas  Las técnicas mixtas como los tests de usuario, las herramientas de feedback y las grabaciones en remoto, nos aportan una visión de conjunto que tiene en cuenta los factores cuanti y cualitativos.

 La clave está en escoger las herramientas más adecuadas en cada caso, en función del tipo de proyecto, la disponibilidad de usuarios reales para testar (su número y ubicación), el plazo y el presupuesto.

5. Definiendo la Arquitectura de Información

¿Qué es la Arquitectura de Información? Information Architecture – IA En la comunicación online, la información no se organiza necesariamente de forma lineal como sucede en un libro, un periódico, un programa de radio o una película. La información en soportes digitales se divide en bloques (páginas o pantallas), cada una con sentido en sí misma. Y se establecen enlaces entre las distintas páginas para permitir a los usuarios la navegación de unas a otras.

La estructura resultante de navegación es lo que se conoce como Arquitectura de Información. Y ésta se plasma en el llamado “Diagrama de navegación” o “árbol de contenidos”, que ilustra las páginas o pantallas del sitio y los enlaces entre ellas. Existen muchos tipos de estructuras de navegación, aunque la mayoría de los sitios web o aplicaciones responden a estructuras mixtas en las que se combinan varios de estos tipos. A continuación, revisaremos algunos de ellos:

¿Qué es la Arquitectura de Información? 1. Lineal

2. Lineal ramificada

3.

Lineal ramificada en bucles

¿Qué es la Arquitectura de Información?

4. Concéntrica

5. Paralela

¿Qué es la Arquitectura de Información?

6. Jerárquica

7. Jerárquica lineal

¿Qué es la Arquitectura de Información?

8. Jerárquica en red

9. Reticular

¿Qué es la Arquitectura de Información?

10. Mixta

Distintos conceptos de “arquitectura”

Cuando estamos diseñando y construyendo un sitio web o aplicación online, la Arquitectura de la Información alude a la forma en que se divide el proyecto en páginas o pantallas y al modo en qué el usuario puede navegar de unas a otras. Esto es lo que se refleja en el diagrama de navegación.

Distintos conceptos de “arquitectura” Otro concepto es el de la “arquitectura de componentes”, que se refiere a las relaciones entre las distintas piezas de software que interactúan en el proyecto, como por ejemplo, las páginas generadas con un gestor de contenidos, el catálogo de fichas de producto, el indexador y buscador, el módulo de integración con un servicio externo o una red social. etc. En muchos proyectos, por tanto, también manejaremos un diagrama de componentes.

Distintos conceptos de “arquitectura” En el ámbito del hardware también se habla de “arquitectura de sistemas” o entornos, para referirse a los elementos de hardware (máquinas, servidores) que se emplearán para el proyecto. El diagrama de entornos refleja así las máquinas a incorporar para el desarrollo, pruebas o preproducción y publicación definitiva del proyecto.

Pasos para definir la AI: 1. Inventario Inventario de contenidos y funcionalidades El primer paso consiste en identificar todo aquello que queremos incluir en el proyecto, partiendo del contenido (Información en cualquier formato -textos, fotos, vídeos, animaciones, gráficos, podcasts, documentos para descarga, etc.) y las funcionalidades que queremos ofrecer (Servicios de utilidad para los usuarios que les apoyan en su navegación y en la consecución de sus objetivos –búsquedas, filtrado, envío de formularios, generación de contenido, subida o descarga de archivos, etc.). Para decidir qué incluir, nos basamos en la investigación y el conocimiento que hayamos obtenido sobre los usuarios, pero también sobre el sitio web o app actual (si se trata de un rediseño), en las demandas o expectativas del cliente que encarga el proyecto y en lo que está ofreciendo la competencia (benchmarking) y, cómo no, en el plazo y el presupuesto. En cuanto al benchmarking… En cualquier proyecto de comunicación online, un paso imprescindible es estudiar lo que está haciendo la competencia. Si vamos a diseñar la web de una compañía de seguros, querremos saber qué están ofreciendo otras empresas de seguros y cómo lo están haciendo. Pero la competencia muchas veces no viene del mismo sector. Si estamos diseñando la web de un campo de golf en el que ofrecen información sobre torneos de golf y en el que también venden material para practicar este deporte (bastones, pelotas, calzado, etc.), nuestra competencia no se ceñirá a otros campos de golf, sino que incluirá cualquier otro sitio web que ofrezca información sobre torneos (ej. Prensa deportiva online como el Marca), y que venda material deportivo para jugar al golf (ej. tiendas online de deportes como Decathlon). Por eso, debemos fijarnos también en ellos, incluso si lo están ofreciendo en mercados distintos al nuestro, como el americano. Y debemos descubrir qué están ofreciendo a los usuarios y qué otros contenidos, servicios o funcionalidades no están aportando y podrían ser nuestro valor diferencial, si lo incluimos en el proyecto.

Pasos para definir la AI: 1. Inventario Inventario de contenidos y funcionalidades El inventario puede hacerse con diferentes herramientas. Si el sitio o la aplicación no es muy grande, bastará con una simple lista en un documento de texto, o unas cuantas tarjetas de papel o cartulina, que luego podremos agrupar moviéndolas sobre una mesa para ir esbozando la arquitectura.

Ver fuente: Card Sort en Gamestorming (en inglés)

Pasos para definir la AI: 1. Inventario Si usamos el formato de trabajo de muchas de las metodologías ágiles, podemos realizar un inventario utilizando postits de distintos colores y tamaños. Se trata de una versión de las tarjetas que pueden ser pegadas, despegadas y vueltas a pegar, sobre cualquier superficie (mesas, paredes, armarios, pizarra blanca…), lo que resulta muy cómodo para establecer relaciones y grupos con ellos.

Pasos para definir la AI: 1. Inventario Si se trata de un portal web con un tamaño considerable, como por ejemplo el portal de una administración pública, una revista o medio de comunicación o la web de un banco con su banca electrónica, suele ser más cómodo realizar el inventario en un documento de tipo hoja de cálculo (como Excel o Gdrive). Esta resulta más manejable y también permite mover las filas para agrupar posteriormente unos items con otros de cara a ir armando la arquitectura.

Pasos para definir la AI: 1. Inventario Una de las técnicas que más ayuda a inventariar nuevos contenidos y funcionalidades a incluir en el proyecto es el Customer Journey Map. Se trata de un mapa que muestra los puntos de contacto del cliente (touch points) con un producto, servicio, marca u organización, a lo largo del tiempo. Se enfoca en los factores emocionales (cómo se siente el usuario en cada punto de contacto) para identificar los puntos de dolor y los momentos críticos del proceso. Y sirve para definir los contenidos, servicios o funcionalidades que ayudarán al usuario en cada momento. Más sobre el Customer Journey Map

Pasos para definir la AI: 2. Agrupación Ordenación y agrupación de items El segundo paso consiste en establecer relaciones entre los items inventariados, para decidir cuáles se deben agrupar en la arquitectura dentro de las distintas secciones o menús, y también dentro de cada página. La clave es descubrir dónde esperan los usuarios encontrar los items cuando navegan persiguiendo un objetivo.

Analicemos un ejemplo En una tienda online de muebles y productos para el hogar, ¿cómo preferirán los usuarios navegar para encontrar los productos que buscan?..  … ¿querrán un acceso por tipos de muebles (camas, mesas, sillas, armarios…),  …por uso y funciones (descansar, trabajar, cocinar…),  …por habitación (dormitorio, salón, despacho, cocina…),

 … por un buscador,  …o por todas esas formas? Puedes ver una buena solución en Ikea.

Pasos para definir la AI: 2. Agrupación La agrupación de los items puede hacerse con diferentes técnicas, aunque todas ellas reciben la denominación de “Card Sorting” (significa “ordenación de tarjetas” en inglés). Si hemos empleado tarjetas, podemos colocarlas sobre una mesa y pedir a nuestros usuarios que las ordenen y agrupen según lo que para ellos tenga sentido. Es sorprendente ver cómo a veces su esquema mental difiere completamente del que tiene el cliente que encarga el proyecto. Y por supuesto, siempre que podamos, ¡haremos caso de los usuarios! • •

La técnica del Card Sorting Los pasos del Card Sorting

Ver fuente imagen

Pasos para definir la AI: 2. Agrupación Si hemos realizado el inventario con postits de colores, la realización del cardsorting será similar a la de las tarjetas. La ventaja es que no necesitamos recogerlos cada vez que terminamos de trabajar. Podemos dejarlos a la vista (pegados en la pared, dónde no molestan), para reflexionar sobre las agrupaciones hechas e ir evolucionando la arquitectura iterativamente, conforme avanza el proyecto. En todo caso, se recomienda hacer fotos de las agrupaciones establecidas, antes de moverlas de nuevo, para disponer de un historial de versiones de la arquitectura.

Pasos para definir la AI: 2. Agrupación

Los inventarios en formato hoja de cálculo son más complejos de organizar, pero si estamos diseñando un portal que tiene 300 o 400 pantallas, a veces es la única forma de hacerlo. En estos casos, la recomendación para el cardsorting es hacer primero un cardsorting de alto nivel, sólo sobre servicios completos o procesos amplios, y en segundo lugar, hacer cardsorting interno para cada uno de ellos.

Pasos para definir la AI: 2. Agrupación También podemos recurrir a herramientas online como Optimal Sort o UserZoom de Xperience Consulting, lo que resulta especialmente útil en los proyectos muy grandes.

Estas herramientas ofrecen varias ventajas: además de que podemos contar con la participación de múltiples usuarios geográficamente dispersos y que realizan la prueba simultáneamente. La herramienta permite hacer tests cerrados (con las categorías previamente establecidas) o abiertos (categorías creadas por los usuarios), guardan toda la información y generan informes completos que ayudan a interpretar los resultados.

Pasos para definir la AI: 2. Agrupación

Pasos para definir la AI: 2. Agrupación

Pasos para definir la AI: 3. Diagrama Elaboración del diagrama de navegación El tercer paso consiste en ilustrar en un diagrama las relaciones y agrupaciones establecidas entre los contenidos y funcionalidades del proyecto, así como entre ellos y otros sites externos (como las páginas en redes sociales). El diagrama nos debe permitir identificar las categorías o secciones que aparecerán en el sistema de navegación, compuesto por menús, barras y pestañas de navegación.

Diferencia entre proyectos grandes y pequeños

En proyectos pequeños, el diagrama de navegación no suele variar mucho desde que se define en el arranque, hasta que se termina de construir el proyecto. En cambio, en proyectos grandes construidos con metodologías ágiles, el diagrama es un documento “vivo” que va evolucionando para ir afinando conforme vamos construyendo el proyecto.

Pasos para definir la AI: 3. Diagrama Para elaborar el diagrama recomendamos utilizar herramientas de mapas mentales o herramientas de dibujo, incluso podemos emplear programas como Powerpoint para generar el diagrama, como en el ejemplo.

Pasos para definir la AI: 3. Diagrama Las herramientas de mapas mentales son más versátiles para luego ir evolucionando el diagrama con agilidad. Existen numerosas herramientas para crear mapas mentales, pero mi favorita es Xmind , gratuita y disponible para Windows, Mac y Linux.

Pasos para definir la AI: 3. Diagrama Una herramienta muy útil que no debemos pasar por alto es la clásica pizarra blanca de rotuladores, en la que podemos trabajar en equipo, aportando ideas de forma colaborativa. Dado su tamaño, nos permite empezar a esbozar lo que incluirán las pantallas en la arquitectura, a modo de sketching o prototipo de alto nivel.

Tipos de proyectos según su AI Página única o One page Son webs en las que todo el contenido y funcionalidad está en una única página. Puede tratarse de una landing page de producto u orientada a la conversión (obtención de suscripciones o leads). Suele seguir una estructura preestablecida en la que se insertan los bloques de información, promoción y llamada a la acción. Ver ejemplos

Tipos de proyectos según su AI Página única larga También se usa en sitios web corporativos, de presentación de una empresa y sus servicios, o de una iniciativa o proyecto. En este caso suelen presentarse a modo de “long page” o página larga, subdividida en bloques del tamaño aproximado de lo que cabe en pantalla. El usuario accede a los bloques, bien desplazándose hacia abajo con la barra de scroll, bien navegando los enlaces del menú o barra superior. El diseño de la arquitectura consiste en este caso en establecer los bloques a incluir y su orden.

Ver ejemplo

Tipos de proyectos según su AI Apps de página única En las aplicaciones o Apps, también nos encontramos con proyectos que se resuelven en una única pantalla, centralizando en ella una sola actividad o tarea, que su utilidad principal.

Tipos de proyectos según su AI Estructura plana Se trata de webs o apps que tienen una página de inicio o homepage y un único nivel de navegación más, con varias secciones. El usuario sólo puede navegar desde la home a esas secciones de primer nivel, navegar entre ellas o de vuelta a la home. Es una estructura muy sencilla que, al no tener profundidad, simplifica mucho la navegación. Es la estructura típica de los blogs o de algunas redes sociales como Instagram o Twitter.

Tipos de proyectos según su AI Estructura jerárquica Es la estructura más habitual en proyectos que superan las 8-10 páginas que puede tener un sitio sencillo. La jerarquía se establece en forma de secciones principales (pantallas de primer nivel), que contienen secciones secundarias (categorías o subsecciones de las anteriores, con varios niveles a su vez) y finalmente páginas detalle de contenido (en modo consulta -sólo consumo de información- o edición -modificación de datos).

Tipos de proyectos según su AI Estructura adecuada a la experiencia En este caso, la arquitectura se adecúa al flujo de navegación del usuario, organizándose en parte de forma lineal, en parte de forma jerárquica, como sucede por ejemplo en este curso de Internet Academi que estás realizando. Esto es muy habitual en webs o aplicaciones de creatividad, que en realidad son herramientas que permiten diseñar o generar contenido.

Arquitectura de Información y SEO Al trabajar la arquitectura de información, debemos tener en cuenta también el SEO, la optimización del posicionamiento en buscadores, ya que están intrínsecamente relacionados. La AI puede ayudar a los robots indexadores a acceder a las páginas. La denominación de las secciones o categorías del menú y los nombres de los productos en eCommerce, deben formar las llamadas “pretty URLs”, ya que éstas contribuyen a una mejor indexación del sitio web por los buscadores. Es importante que todos los enlaces del menú, de las “migas de pan” y del pie de página puedan ser rastreados por los buscadores, por lo que los nombres que escojamos para ellos serán relevantes en el posicionamiento para esos términos en concreto. Pretty URLS Son “direcciones amigables” de las páginas de nuestro sitio o portal. Son amigables si son relativamente cortas, no incluyen parámetros (como por ejemplo ref=nb_sb_noss?__mk_es_ES&url=search-alias%3Daps&field-keywords=ux+ia), son fáciles de entender y significativas para el usuario, lo que implica que también los buscadores podrán indexar esas páginas asociándolas con dichos términos. Por ejemplo: • URL no amigable: www.dominio.com/seccionH/producto176g5kj21&color32 • URL amigable: www.dominio.com/muebles/jardin/silla-madera-pino-azul

Las migas de pan (llamadas breadcrumbs en inglés o “hilo de Ariadna” en francés), sirven para que el usuario sepa dónde se encuentra en la arquitectura de navegación y pueda ir dando pasos hacia atrás en dicha arquitectura (no necesariamente en su secuencia de navegación, que sería el equivalente al botón “back” del navegador).

Las migas de pan se suelen colocar en la zona superior de la página, cerca del título de la misma. Y consisten en una línea que incluye una secuencia de enlaces de este modo: Tienda Kindle > eBooks Kindle > Literatura y ficción

Arquitectura de Información y SEO Otros factores que se trabajan a nivel de arquitectura y SEO son los Metatags, correspondientes a cada página: Titulo de página Cada página debe tener su propio título (metatag “title” en el código), diferente del de las demás, y que aluda a sus contenidos. Estos títulos no deben exceder de 65-68 caracteres y deben incluir aquellos términos que se hayan definido como relevantes para el SEO. Descripción Cada página debe tener asimismo su propia descripción (metatag “description” en el código), que también explicar los contenidos o servicios ofrecidos en ella, utilizando los términos definidos como relevantes para SEO, y no excediendo en este caso de los 165-170 caracteres. Palabras clave A pesar de que las palabras clave (metatag “keyword ” en el código) ya no tienen la relevancia que tenían antiguamente, porque los robots (y particularmente Google) realizan un análisis semántico de los términos incluidos en el propio contenido que tiene más peso a la hora de posicionar las páginas, no dejan de ser importantes. Cada página debe incluir en torno a 5-10 keywords que estén optimizadas específicamente para sus contenidos.

> Ver Beginners Guide to SEO

Arquitectura de Información y SEO

Ideas Clave  La información en medios digitales no es lineal: se divide en páginas o pantallas entre las que el usuario puede navegar. El diseño de la estructura en que se organiza es lo que llamamos "Arquitectura de Información" (AI).  El primer paso para definir la AI es realizar el inventario de contenidos y funcionalidades a integrar, partiendo de los requerimientos del cliente, el actual sitio web o app (si es un rediseño), la investigación realizada con usuarios, un benchmarking de la competencia y/o un Customer Journey Map.  El segundo paso es la agrupación de los contenidos y funcionalidades en categorías, que constituirán las secciones del sitio web o app. Para ello podemos emplear distintas variantes de la técnica de card sorting.  El tercer paso es la generación del diagrama de navegación, para lo cual es muy útil emplear herramientas de generación de mapas conceptuales.  Las arquitecturas de información que predominan en la actualidad son las de página única, las estructuras planas y las estructuras jerárquicas, con distintos niveles de profundidad.

 Un aspecto clave que debemos tener en cuenta al diseñar la AI es el SEO, haciendo hincapié en las "pretty URLs" y la definición de metatags específicos de título, descripción y palabras clave, para cada página del sitio web.

6. Diseño UX en pantalla: el prototipado

Prototipado: distintas técnicas En el contexto de la UX, el prototipado consiste en elaborar los primeros modelos de las pantallas que compondrán el proyecto web o la aplicación a construir. Los prototipos ofrecen una representación visual de la interfaz gráfica de usuario antes incluso de que el grafismo como tal esté definido, lo que permite al equipo técnico avanzar en algunos procesos del desarrollo. El hecho de que no incluyan diseño gráfico es importante, porque así podemos centrarnos en el contenido, su organización y distribución, la interacción del usuario y la funcionalidad de los elementos, sin perder el foco. El testeo de prototipos en etapas tempranas del desarrollo ayuda además a identificar problemas de usabilidad, sin necesidad de haber escrito una sola línea de código, lo que reduce costes y posibles problemas posteriores.

“Prototipos” Un prototipo se define como “un modelo (representación, demostración o simulación), fácilmente ampliable y modificable de un sistema planificado, probablemente incluyendo su interfaz y su funcionalidad de entradas y salidas”.

Prototipado: distintas técnicas Los prototipos pueden contener más o menos detalle (alto o bajo nivel) y pueden realizarse en distintos soportes. El primer esbozo del prototipo es lo que denominamos “sketching”, que puede hacerse en papel o pizarra. En equipos ágiles de desarrollo de software se trabaja el sketching en pizarra, de forma colaborativa con todos los perfiles del equipo. La presencia de los distintos miembros del equipo y el debate y conversación que se genera en torno al sketching, permiten que el prototipo no tenga un alto nivel de detalle.

Prototipado: distintas técnicas

Para afinar el sketching en pizarra, podemos realizar prototipos con “papel y lápiz” y aportar así un nivel de detalle mayor, ya que los rotuladores de pizarra blanca no permiten una finura de trazo suficiente para determinados elementos. Hablamos entonces de la creación de “mockups en papel”, que pueden usarse tanto para definir las pantallas, como para hacer tests de usuario y validación de los procesos diseñados.

Prototipado: distintas técnicas

Un nivel mayor de detalle se logra con la creación de mockups en soporte digital, para lo que disponemos de numerosas herramientas, como Omnigraflle, Just in Mind, Balsamiq, Moqups, etc. Los mockups digitales nos permiten reutilizar con facilidad elementos o bloques prototipados, para así avanzar más rápido. Y también podemos publicarlos online para realizar tests con usuarios, o montar simulaciones de procesos de navegación enlazando unos con otros (“mockups navegables”).

Prototipado: distintas técnicas El prototipo más fiel a lo que sería el producto final construido consiste en generar las pantallas en html navegable (a poder ser con el diseño gráfico definitivo), incluyendo en ellas todos los elementos visuales e interacciones posibles, aunque la funcionalidad no sea completa (si lo fuera, estaríamos hablando ya del producto final). Este caso es viable si se cuenta con un equipo integrado de distintos perfiles entre los que se incluye el consultor UX, el diseñador gráfico y el programador front-end (o “maquetador html”).

Maquetación: rejillas y estructura La maquetación, esto es, la distribución de los elementos en pantalla, incide en varios aspectos:  la importancia relativa de cada elemento respecto del resto  las relaciones que se establecen entre los elementos

 la comprensión de las opciones de interacción que tiene el usuario. Para abordar la maquetación es fundamental decidir qué estructura de base tendrán las páginas del sitio web o las pantallas de la app:  ¿Dividiremos el espacio en columnas?

 ¿Cuántas columnas habrá?  ¿Serán siempre las mismas o variarán en función del tipo de página? Lo habitual es escoger una rejilla de maquetación que nos permita jugar con distintas opciones de columnas en pantalla para los diferentes tipos de páginas que tendremos.

Maquetación: rejillas y estructura

Utilizar más de 4 columnas no es frecuente, ya que los elementos quedan muy apretados y sin espacio. En tabletas pequeñas (o tableta en vertical), usar más de 2 columnas no es apropiado, y en móviles no conviene usar más de 1. Mi recomendación es utilizar una rejilla de base de 12, que es divisible entre 1, 2, 3 y 4 columnas, quedando siempre el espacio dividido de forma armónica.

Maquetación: rejillas y estructura También debemos pensar en aportar profundidad a las páginas. Para ello podemos emplear recursos como capas, transparencias y/o superposiciones, que permiten posicionar unos elementos encima de otros y ayudan a estructurar visualmente las pantallas y sus relaciones.

Maquetación: rejillas y estructura Las capas o paneles pueden aparecer y desaparecer mediante transiciones, animaciones, movimientos o desplazamientos.

Esto otorga dinamismo al diseño, siempre que no se abuse en exceso. En las apps móviles es muy frecuente su uso, pero también en los proyectos tipo “long page” hechos con Parallax

Ver ejemplos de páginas con efecto Parallax

Maquetación: rejillas y estructura Otro elemento que añade riqueza a la maquetación de las páginas es la presentación de contenidos en ventanas o vistas superpuestas, (llamadas modales, overlay o popups), que sacan al usuario de la tarea en la que estaba para obligarle a tomar una opción (Alertas), o bien para llevar a cabo otra tarea.

Maquetación: rejillas y estructura Algunas recomendaciones generales para la maquetación:  Colocar primero los contenidos y funcionalidades más importantes  Utilizar el tamaño de los elementos para destacar los más importantes  Utilizar la alineación para favorecer el escaneado visual y la comprensión de las relaciones entre elementos  Aprovechar el espacio completo de la pantalla  Jugar con la maquetación multipanel que divide la pantalla en paneles (ej. listado en uno y detalle del contenido en el otro).

Diseño responsivo El diseño responsivo (responsive design) es una forma de construir las páginas que permite adaptar la presentación visual de los elementos, al tamaño del dispositivo en el que se visualizan.

Cada vez contamos con un mayor número de dispositivos (Ordenadores de escritorio, portátiles, tabletas, smartphones, phablets, todo tipo de wearables como relojes, pulseras, gafas de realidad aumentada o realidad virtual, smart TVs... ) que tienen distintos tamaños de pantalla y resoluciones (resolución es el número de pixels en pantalla dividido por el tamaño de la misma. La unidad de medida estándar para la resolución son los“puntos por pulgada” (dots per inch = dpi)). El diseño responsivo ayuda a que las páginas se vean correctamente y mantengan una armonía de diseño en el mayor número posible de dispositivos. Cuando se hace diseño responsivo, es necesario definir la forma en que los elementos se adaptarán a cada tamaño de pantalla, empezando siempre el prototipado por las pantallas más pequeñas. Esto es lo que se conoce como mobile first.

Mobile first El término, popularizado por el libro Mobile first de Luke Wroblewski emplaza a los diseñadores a aplicar los principios de diseño para dispositivos móviles en primer lugar y luego adaptar ese diseño a pantallas de mayor tamaño, ya que así es más fácil acertar que empezando por el diseño para pantallas de escritorio (desktop).

Elementos del sistema de navegación El sistema de navegación está compuesto por todos aquellos elementos que se presentan en pantalla de forma estable y consistente, y que permiten al usuario navegar de unas páginas o secciones a otras. Un sistema de navegación coherente contribuye a que el usuario se haga una idea o esquema mental de la arquitectura del sitio web. También le ayuda a saber dónde se encuentra y a dónde puede navegar desde ahí.

Elementos del sistema de navegación El sistema de navegación está formado por: Menús Los menús de navegación ofrecen acceso a las secciones del sitio web. Pueden mostrar sólo el primer nivel de navegación -las secciones principales-, o también mostrar niveles adicionales, permitiendo un acceso directo a páginas situadas a mayor profundidad en la arquitectura. En el menú podemos incluir texto, texto más iconografía e incluso varios textos (principal y de apoyo). Puede estar siempre a la vista u ocultarse y desplegarse al clicar en el icono del menú o en alguna zona de la pantalla. Se utiliza cuando tenemos un número amplio de opciones de navegación (más de 6- 7).

Barras de navegación Las barras de navegación cumplen la misma función que los menús, pero tienen un formato horizontal, lo que limita el número de categorías que pueden contener (No se recomienda el uso de barras de navegación cuando hay seis o más categorías principales o si, habiendo cinco o menos, prevemos que pueden aumentar en el futuro). Los segundos niveles de navegación se pueden desplegar debajo, también en una segunda barra horizontal, pero es más frecuente que se muestren desplegados en vertical. Su ventaja es que dejan todo el espacio de la pantalla, de lado a lado, para incorporar contenido.

Elementos del sistema de navegación Pestañas Las pestañas (tabs) son similares a las barras: tienen formato horizontal y también podemos emplear en ellas texto y/o iconografía. Pero se ubican en la zona del contenido de la pantalla, por lo que suelen emplearse para ofrecer navegación entre categorías (no más de 4-5)dentro de una misma sección, o para navegación en niveles más profundos. En las apps móviles el uso de pestañas es un estándar, tanto en la franja superior de la pantalla como en la inferior. En móvil pueden ser “pestañas fijas”, o “pestañas con scroll”:  Pestañas fijas Al seleccionarlas generan un desplazamiento horizontal entre pantallas.  Pestañas con scroll Se ubican en una barra que tiene desplazamiento para dar cabida a un número mayor de pestañas.

Solapas Es otro elemento de navegación semejante a las pestañas, aunque de mayor tamaño y que sirve al tiempo como elemento de navegación y titulo de la página en la que se está. Son adecuadas si vamos a ofrecer una navegación entre un máximo de 2-4 categorías y el usuario va a necesitar pasar de una a otra con frecuencia. Con el uso de los dispositivos móviles, cada vez se están popularizando más, porque al igual que las pestañas, dejan toda la anchura de la pantalla para ubicar el contenido.

Contenidos en formato texto y “copys”

El texto que aparece en pantalla es clave para la experiencia de usuario. En el diseño de UX debemos definir QUÉ textos se incluirán (particularmente los “copys”, es decir, aquellos referidos a títulos, subtítulos, frases comerciales o tipo eslogan, llamadas a la acción, ayudas, etc.), y CÓMO serán. Forma y contenido son igualmente importantes. Consulta el Libro “Escribir para la Web” de Guillermo Franco” o un resumen en formato presentación.

Contenidos en formato texto y “copys” El contenido = el “Qué” Siempre, lo más importante primero. Concéntrate en lo que le importa al usuario, sus necesidades de cada momento, sus posibles problemas/dificultades y las soluciones. Por ejemplo: en las frases, señalar primero el objetivo y luego la acción: “Para ganar el premio, envía tu foto” (y no al revés) Evita ser redundante y escribe sólo lo que el usuario necesita saber en cada momento. Redacta los textos dirigiéndote al usuario (“tus documentos”, “selecciona una opción”) o en infinitivo (“guardar”, “enviar”). Si hay un problema, no transmitas al usuario que ha sido por su culpa: ofrece instrucciones claras para que pueda solucionarlo.

No olvides la relevancia de los textos para el SEO.

Contenidos en formato texto y “copys” La forma = el “CÓMO” Textos breves y concisos, palabras y frases cortas. Textos sencillos y claros, nada de jerga técnica o términos complejos o sofisticados. Algo que todo el mundo pueda entender Tono informal y amigable, pero sin pasarse de familiar Corrección gramatical, sintáctica y ortográfica (aunque podemos obviar algunos signos de puntuación…) Verbos y enunciados en positivo, siempre mejor que en negativo.

Nunca textos en mayúsculas para el desarrollo del contenido (sólo en títulos o controles).

Contenidos en formato texto y “copys” La forma visual = “Las FUENTES”  El criterio para la elección de fuentes siempre debe ser la legibilidad. La legibilidad se logra gracias al diseño de la fuente elegida, al contraste con el color de fondo y al tamaño.  Si se usan tamaños fijos, mejor mayores de 12px. En títulos y controles es habitual un tamaño de 16-18px.

 Pero es más recomendable usar fuentes dinámicas, que se adaptan al espacio (a la longitud de línea e interlineado), a los estilos preparados (nota al pie, titular, cuerpo…) y a la elección de tamaño por parte del usuario.  Al adaptar el tamaño de fuente, a veces también hay que adaptar la maquetación, por ejemplo: de dos columnas a una.

 Mejor usar sólo 1-2 tipos de fuente, con variación de tamaños y estilos.

> Ver más información

Contenidos en formatos audiovisuales Si el texto y los copys son claves para la experiencia del usuario, no lo es menos el contenido audiovisual, compuesto por imágenes, audio, vídeo, iconografía y animaciones.

Imágenes 

Son imprescindibles en webs y apps, no sólo por su función “decorativa”, sino también por su función “informativa” en muchos casos.

 Pueden ser de distinto tipo: fotografías, ilustración (dibujo) y gráficos.  Los formatos permitidos son jpg, png o gif. Es importante que los archivos de imágenes no pesen mucho para no ralentizar la descarga de las páginas.  Es importante prepararlas a distintas resoluciones para que se vean bien en todos los dispositivos y tamaños de pantalla, particularmente en los móviles.

Contenidos en formatos audiovisuales

Audios y vídeos No todas las webs o apps incluyen audio y/o vídeo. Es importante que su uso esté justificado, ya que ocupa espacio y consume ancho de banda (particularmente el vídeo). Si se incluye, hay que definir dónde se alojará: si se servirá en streaming desde el mismo servidor del proyecto o desde uno externo tipo SoundCloud para audio o YouTube o Vimeo para vídeo. En apps también hay que decidir si el audio o vídeo se reproducirá incrustado dentro de la propia app o se abrirá en un reproductor del dispositivo.

Contenidos en formatos audiovisuales Iconografía Los iconos pueden emplearse para identificar secciones y/o pantallas en la navegación, así como acciones y herramientas en una tarea o funcionalidad. Siempre se recomienda que sean claros y comprensibles, con pocos detalles para facilitar su percepción (y mejor si les acompaña una etiqueta de texto). Los distintos Sistemas Operativos ofrecen iconos estandarizados para determinadas funciones comunes: editar, crear nuevo, eliminar, buscar, compartir… También se pueden personalizar gráficamente con el estilo y/o color corporativos (aunque mejor respetando el concepto).

Contenidos en formatos audiovisuales Iconos de aplicaciones móviles  El icono de la app o “launcher icon” es clave para la descarga por parte de los usuarios: incide mucho en la imagen de la marca, transmite información sobre la app y conecta emocionalmente con ellos. Busca que sea único, atractivo, memorable y limpio. Un exceso de detalles, puede emborronarlo a tamaño pequeño. Debe probarse para verse bien a distintos tamaños y sobre fondos distintos (cada usuario tiene su propio fondo de pantalla).

Contenidos en formatos audiovisuales Animaciones Influyen en el rendimiento, así que debes usarlas únicamente para: Comunicar un estado o cambio de estado. Aumentar la sensación de manipulación directa. Ayudar al usuario a visualizar el resultado de sus acciones (feedback). Generar una experiencia inmersiva en apps, tipo juegos.

En dispositivos móviles, úsalas de forma coherente con las animaciones propias del Sistema Operativo (transiciones entre vistas, al cambiar orientación del dispositivo…)

Listados y contenidos estructurados La forma en la que se estructura u organiza el contenido en cada página también es un punto fundamental a tener en cuenta en el diseño de la experiencia del usuario. Veamos qué alternativas tenemos en este caso:

Listados típicos de contenidos En los listados podemos mostrar información variada: icono o foto, título o nombre, subtítulo, llamada a la acción, etc. El listado puede ser simple o estar dividido en bloques o grupos, por ejemplo, una lista de gastos agrupados por fecha. Puede tener subniveles, es decir, listados dentro de items del propio listado. Siempre es conveniente usar divisores o separadores para facilitar el escaneado visual de los items de un listado.

Listados y contenidos estructurados Listados en modo mosaico  Es una alternativa visual al listado tradicional

 Es apropiada para aquellos contenidos que se representan bien a partir de imágenes  Puede incluir sólo imágenes, o también imagen y etiqueta de texto o pie de foto.  Este formato se ha extendido tanto que encontramos incluso listados en mosaico que incluyen sólo textos.  Pueden tener scoll horizontal y/o vertical

Listados y contenidos estructurados Listados en formato mapa Para los contenidos cuya geolocalización es relevante, disponemos de listados en formato mapa, en el que se geolocalizan los elementos del listado. Es muy típico en webs o aplicaciones de turismo, hoteles, restaurantes, cines o teatros, etc. El mapa debe permitir hacer zoom (acercar y alejar) para facilitar la visualización Los items marcados en el mapa normalmente sólo muestran su nombre. Y al clicar/seleccionar cada uno, podrá mostrar una información más completa junto con el enlace para abrir la página de detalle correspondiente.

Listados y contenidos estructurados Listados en modo tabla Ciertos contenidos requieren mostrarse en formato tabla, para permitir una comparación cómoda entre los datos ubicados en las mismas filas o columnas. Esto sucede casi siempre que presentamos datos numéricos o magnitudes, como por ejemplo en una clasificación de un torneo de fútbol, en las herramientas de analíticas o en un portal de bolsa dónde nos muestran las cotizaciones de los valores. En estos casos la alineación de los datos de cada elemento es fundamental, aunque no es necesario que la tabla tenga bordes o aspecto clásico de tabla.

Controles: CTAs y formularios Los elementos con los que el usuario puede interactuar son los botones para las llamadas a la acción (CTA = Call to Action en inglés) y los formularios.

Los botones se usan para: Generar acciones orientadas a la conversión. Tomar decisiones relevantes para los objetivos del usuario (Aceptar, Enviar, Comprar, Guardar..)

El texto de los botones debe comunicar claramente la acción que tendrá lugar al pulsarlo. Cuando hay más de uno, su ubicación debe dejar suficiente espacio entre ellos. Y no se recomienda nunca ubicar juntos dos botones de CTA principal. Veamos ahora los distintos controles que pueden incluir los formularios

Controles: CTAs y formularios Campos de texto Se trata de espacios donde el usuario puede introducir textos mediante el teclado y pueden presentarse en alguna de estas formas:  Una línea de texto  Un párrafo de texto -ampliable o no por el usuario Texto sólo numérico  Texto sólo de email Conviene definir qué validaciones habrá que programar en cada campo. Por ejemplo, que el nº de teléfono incluya sólo números o que el formato del email sea correcto.

Selectores de opciones Existen distintos tipos: 1. Multiselectores o checkboxes, que permiten la slección múltiple de items. 2. Selectores excluyentes o radio buttons, que permiten la selección de un único item entre varios. 3. Listas desplegables, también llamadas Combo box, Pulldown menu o Dropdown list, normalmente de selección excluyente, pero no siempre. 4. Manejadores o sliders, para seleccionar un valor o un rango de valores en una escala continua. 5. Selector numérico o picker, para moverse por una lista de números y escoger uno o bien escribir la cifra en el campo de texto. 6. Selector de fecha/hora o date picker, para seleccionar esto precisamente, una fecha y/o una hora.

Controles: CTAs y formularios Ayudas y tooltips En algunos momentos el usuario puede tener dudas que le bloqueen en su avance por el proceso o tarea que está intentando realizar. En estos casos, está en nuestra mano ayudarle a resolver sus dudas antes de que abandone el proceso y, por lo tanto, perdamos la conversión deseada. Entre las ayudas que podemos ofrecerle están:  Textos y explicaciones de apoyo, junto a los campos que debe rellenar o a los selectores que debe usar.  Globos de ayuda o tooltips , que aparecen al colocarse encima o clicar en determinados elementos (textos o iconos).  Visitas guiadas en formato animación o vídeo.

CTA principal y secundario Como hemos visto, la llamada a la acción principal o Call to Action se coloca normalmente en un botón, ya que debe verse y pulsarse fácilmente, pero debemos pensar en una llamada a la acción secundaria, por si el usuario no tiene claro que quiere pulsar en la principal.

En ese caso, podemos facilitar la navegación al usuario si le ofrecemos una alternativa, por ejemplo: frente a “continuar” un proceso, la llamada secundaria podría ser “cancelar” o “volver atrás” en el proceso.

Aspectos gráficos Existen ciertos factores puramente gráficos que no se representan en los prototipos, pero que inciden de forma muy directa en la UX. Se trata del uso del color, del estilo visual y de la presencia de la marca en el diseño. Veamos en qué consiste cada uno:

Uso del color  Es importante usarlo con criterios informativos, no sólo decorativos, para:  crear relaciones (por similitud o por contraste)  otorgar relevancia  indicar estados o interactividad

 ofrecer feedback  Se recomienda crear una paleta con un número de colores limitados que encajen bien entre sí y trabajar basándose en ella.  Hay que favorecer la legibilidad de los elementos en pantalla con un contraste suficiente de color, por lo menos 50% de contraste entre colores adyacentes que deban diferenciarse.  No olvidar los simbolismos culturales asociados al color y tener en cuenta a los daltónicos, ya que no diferencian bien rojo y verde.

Aspectos gráficos Estilo visual El estilo visual está condicionado por tres factores:



La imagen corporativa de la propia marca



Las tendencias o moda imperante en cada momento



Los gustos y estilo del propio diseñador

 En los últimos años se ha impuesto un estilo de diseño muy limpio y minimalista, sin sombreados, brillos, volúmenes. Es el llamado “ diseño plano” o “flat design”, en contraposición al diseño realista. Aunque cada uno tiene sus defensores… (Ver batalla Flat vs. Realism)”  Sin embargo, en el mundo online hay cabida para todo tipo de estilos y diseños, siempre que se hagan teniendo en mente al usuario al que van dirigidos. Así, podemos encontrarnos diseños con elementos muy clásicos, diseños súper coloridos (y no sólo para niños),retro, naturales, etc.

Aspectos gráficos Imagen corporativa de la marca Cualquier diseño debe tener como referencia la imagen corporativa de la marca, tanto si ya existe y está reflejada en un manual de identidad corporativa, como si no existe y hay que crearla a la vez que se hace el diseño del sitio web o app. En cualquier caso, aquí van una serie de recomendaciones:  Integrar la marca de forma no intrusiva (discreta, sutil, no protagonista)  El contenido y la funcionalidad son prioritarios: la imagen de marca no debe destacar por encima de ellos.  Los colores corporativos deben usarse, pero sin abusar, con elegancia.  En diseños para desktop, el logo de la marca se suele incluir en todas las pantallas, pero en apps para móvil y/o tableta, no es necesario. La gente entra en la app habiéndola visto en el market y habiéndola descargado: ya sabe de quién es.

Ideas Clave  Existen distintas técnicas para realizar el prototipado: papel, pizarra, prototipo digital y prototipo navegable. Cada técnica es más apropiada para un tipo de proyecto concreto.  La maquetación de las páginas debe hacerse con criterios de UX (no sólo de estética), y apoyarse en la elección de una rejilla de base que sea versátil.  El diseño responsivo se adecua a los distintos tamaños y resoluciones de pantalla, por lo que se ve correctamente en los distintos dispositivos.  Los elementos principales del sistema de navegación son los menús, barras, pestañas y solapas.  Los contenidos a definir e integrar en los proyectos incluyen texto, imágenes, audio, vídeo, iconografía y animaciones. El texto es clave para facilitar una buena UX.  Podemos optar por distintas formas de presentar listas de contenidos: listados típicos, en formato mosaico, geolocalizados en un mapa o en formato tabla.  Los elementos con los que el usuario interactúa son los botones para las llamadas a la acción (Call to Action o CTA) y los formularios, que pueden incluir distintos tipos de elementos: campos de texto, selectores, ayudas y llamadas a la acción..  Los aspectos puramente gráficos (color, estilo y presencia de la marca), también inciden en la UX.

7. Testando AI, prototipos, contenidos y diseño

Test de árbol: probando la arquitectura El test de árbol nos permite comprobar si la arquitectura de información que hemos diseñado es adecuada para el esquema mental de nuestros usuarios.

El test se puede hacer presencial o en remoto, y consiste en cargar el árbol de contenidos en una herramienta específica, y pedirles a los usuarios que naveguen para encontrar determinados elementos de dicho contenido. Herramientas específicas: Contamos con diversas herramientas para hacer test de árbol, como por ejemplo:  TreeJack de OptimalWorkshop  UserZoom  C-Inspector

La herramienta sólo muestra en pantalla los menús de navegación. De este modo el usuario navega por los menús sin distraerse con contenidos de las páginas. A continuación vamos a analizar las distintas fases para llevar a cabo un test de árbol:

> Ver más información

Test de árbol: probando la arquitectura Preparación  Definir qué trayectos de navegación o qué contenidos y ubicaciones en la AI queremos comprobar.  Establecer las preguntas que realizaremos a los usuarios y que nos permitirán evaluar la ubicación de esos contenidos en la AI.

 Preparar los cuestionarios previo y posterior a la prueba (si los vamos a incluir).  Cargar la información en la herramienta que vayamos a emplear: mapa de contenidos, preguntas para los usuarios y cuestionarios pre/post (si procede).

Presentación  Explicar al usuario en qué consiste la prueba y cuánto durará (es una prueba breve, cada pregunta suele llevar entre 30 y 180 segundos).  Hacer hincapié en que no se le está evaluando a él, sino al diseño de la AI.  Indicarle qué debe hacer para empezar.  Si nos parece relevante, solicitar información de contexto del usuario (datos personales y experiencia de uso en sitios web o apps similares).  Si el test no se realiza en presencia de un evaluador, la presentación deberá facilitarse al usuario antes, bien por email, bien mediante unas instrucciones en la propia herramienta, bien de forma mixta: mail + instrucciones.

Test de árbol: probando la arquitectura Desarrollo del test  Para cada una de las preguntas el usuario:  leerá el enunciado de la misma  navegará por los menús hasta indicar que ha encontrado lo que buscaba (o que no lo ha encontrado)  pasará a la siguiente pregunta  Una vez finalizado, si hemos planteado algún cuestionario post-test, lo completará y dará el test por terminado.  En ese momento agradecemos al usuario su participación en el test y dedicaremos unos minutos a comentar con él la experiencia para obtener sus impresiones “en caliente”.

Análisis de resultados  Una vez tengamos una muestra suficiente de usuarios que hayan realizado el test, podemos analizar los resultados.  Las herramientas para este tipo de pruebas ofrecen informes en varios formatos que nos ayudan a realizar un buen análisis. Aunque no olvidemos que no se trata tanto de obtener datos estadísticos (si la muestra es pequeña), como “insights” o conocimiento del comportamiento de los usuarios en relación con la AI.

Ejemplo Test de árbol Paso 1

Paso 2

Paso 3

Test de árbol: probando la arquitectura Paso 4

Test de árbol: probando la arquitectura Paso 5

Test de árbol: probando la arquitectura Paso 6

Test de clic: probando los prototipos El test de clic (o de “primer clic”) consiste en mostrar a nuestros usuarios el prototipo de una página, plantearle una pregunta del tipo “Dónde harías clic si quisieras hacer…” y registrar dónde hace clic y cuánto tiempo tarda en hacerlo. El test puede hacerse sobre prototipos en papel, prototipos digitales e incluso páginas diseñadas. En estos dos últimos casos, utilizaremos herramientas específicas para este tipo de test. Herramientas específicas: Para realizar este tipo de test contamos con herramientas como:  Chalkmark de Optimal Workshop  The ClickTest de Usability Hub  Verify  UserZoom

Recordemos que en LeanUX, lo que nos interesa es testar los prototipos antes de escribir el código y construir las páginas. A continuación vamos a analizar las distintas fases para llevar a cabo un Test de Clic.

> Ver vídeo

Test de clic: probando los prototipos Preparación  Definir qué páginas y qué elementos en ellas queremos testar.

 Establecer las preguntas que realizaremos a los usuarios y que nos permitirán valorar la UX de esos elementos/páginas.  Preparar los cuestionarios previo y posterior a la prueba (si los vamos a incluir).  Cargar la información en la herramienta que vayamos a emplear: prototipos, preguntas para los usuarios y cuestionarios pre/post (si procede).

Presentación  Explicar al usuario en qué consiste la prueba, cómo funciona y cuánto durará (dependerá del número de páginas a testar, pero no suele durar más de 10-20 minutos)  Hacer hincapié en que no se le está evaluando a él, sino al diseño de las páginas

 Si nos parece relevante, solicitar información de contexto de cada usuario (datos personales y experiencia de uso en sitios web o apps similares)  Si el test se realiza en presencia de un evaluador, puede aprovecharse para pedir al usuario que verbalice sus pensamientos, expectativas, dudas, etc. como en los tests de guerrilla.

Test de clic: probando los prototipos Desarrollo del test  El usuario leerá el enunciado de la primera pregunta (o se la leeremos nosotros si es un test de mockups en papel).  Observará la imagen y señalará dónde haría clic.  Pasará a la siguiente pregunta y repetirá el proceso hasta terminar.  Una vez finalizado, si hemos planteado algún cuestionario post-test, lo completará y dará el test por terminado.  En ese momento agradecemos al usuario su participación en el test y dedicaremos unos minutos a comentar con él la experiencia, para obtener sus impresiones “en caliente”.

Análisis de resultados Si hemos realizado el test sobre mockups en papel, no tendremos informes automáticos, por lo que debemos tomar nota de todas nuestras conclusiones como observadores en cuanto terminemos el test. Si hemos realizado el test con herramientas digitales, además de nuestras notas podremos contar con informes posteriores que mostrarán exactamente dónde han hecho clic los usuarios y cuánto tiempo han tardado. Estos informes nos ayudarán a realizar un mejor análisismás cuantitativo que cualitativo, en el que podemos conocer qué elementos se ven más, tienen más peso, pasan más desapercibidos, se entienden, no se entienden bien, etc.

Test de 5 segundos: probando los contenidos Este test consiste en mostrar al usuario el diseño de una página durante 5 segundos. Es mejor testar con una imagen de la página y no con la página real porque, en la página real, el usuario puede navegar por los enlaces y no ver la página ni siquiera 5 segundos. Otra razón es que la página real puede tardar más de 5 segundos en cargarse o ciertos elementos pueden no llegar a cargarse en el navegador, por lo que no tenemos el mismo control que si mostramos directamente una imagen. Después, cuando ya no la está viendo, se le plantean unas preguntas y para conocer qué es lo que más recuerda, lo que más le ha llamado la atención, gustado o disgustado. Se utiliza para obtener información cualitativa y cuantitativa sobre la primera impresión que genera una página en los usuarios, para conocer qué es lo que perciben con más rapidez y facilidad. Es útil para testar sobre todo los contenidos y los mensajes, pero también el diseño gráfico y la maquetación.

Test de 5 segundos: Características Páginas a testar Es muy interesante hacer test de 5 segundos en las páginas de inicio o homepage, ya que ahí es crítico que los usuarios entiendan en menos de 5 segundos qué ofrece el sitio web y si es de su interés o no. Pero también es habitual testar las páginas de aterrizaje (landing pages), las páginas de producto, las de contacto, o cualquier otra que tenga una tasa alta de entradas (usuarios que acceden por ella al sitio web) o una tasa alta de rebote (usuarios que una vez que acceden a la página, se van, no navegan a ninguna otra página del sitio web). Tipos de preguntas Lo importante para definir las preguntas es conocer bien el propósito de la página: cuál es su principal objetivo, y cuál es la conversión esperada. Basándonos en esto, podemos realizar preguntas de muchos tipos: referidas a contenidos concretos (por ejemplo: ¿qué servicio ofrece esta compañía? ¿qué producto se vende en esta página?) , relacionadas con aspectos estéticos o emocionales (¿qué adjetivos asociarías a esta página? De 0 a 5, ¿cómo puntuarías la profesionalidad de la compañía?) o también podemos poner al usuario en contexto (por ejemplo: Quieres realizar una donación a esta ONG. Una vez mostrada la página, se le podría preguntar ¿Qué tipos de donaciones puedes realizar? ¿Puedes realizar la donación online?) y luego hacerle las preguntas. Proceso y herramientas Al igual que el test de clic, podemos realizar el test de 5 segundos con imágenes de las páginas impresas en papel o utilizando herramientas digitales para realizar los tests online. En ambos casos, el test es relativamente rápido: entre explicar al usuario en qué consiste, mostrarle la imagen y realizar las preguntas, no suele pasar de 10-15 minutos. Podemos emplear herramientas como Fivesecondtest de Usability Hub o Screenshot Timeout Testing y obtendremos los resultados del test de forma estructurada e incluso, según el tipo de preguntas que hayamos realizado, a modo de informe.

Test A/B: probando el diseño El test A/B permite probar dos versiones de una misma página para saber cuál de ellas logra una mayor conversión.

Este test también se denomina “split testing” porque divide a los usuarios aleatoriamente en dos grupos, a cada uno de los cuales les muestra una versión distinta de la página, utilizando un software específico para ello. Las distintas versiones de la página deben servirse durante el mismo periodo de tiempo, porque si se hace sucesivamente (primero una versión y días después la otra), las fechas podrían alterar el resultado. Al ratio de conversión le afectan múltiples factores: la estación del año, el día de la semana, ciertas noticias, la situación económica, la situación de nuestros competidores, las fuentes del tráfico, etc.

Más información: •A Roadmap to becoming am A/B Testing Expert •Test A/B: Claves y herramientas

Test A/B: Carcaterísticas Variaciones Las variaciones entre las páginas pueden incluir elementos de diseño, cambios de maquetación, textos o copys en cualquier elemento, imágenes, etc. Aunque se recomienda que no haya demasiados cambios, porque si no, es difícil saber cuál es el factor que ha influido más en modificar el ratio de conversión. Algunos tests no se ciñen a dos versiones, sino que incluyen 3 y hasta 4 (A/B/C/D).

Duración La duración del test dependerá de la muestra de usuarios que consideremos necesaria para decidir qué versión de la página es la que finalmente mantenemos. Si nuestro sitio web tiene mucho tráfico, podremos hacer un test A/B en pocos días. Pero si tiene escaso tráfico, podríamos necesitar un mes. No se recomienda una duración mayor de 6 semanas. Si para entonces no hay una versión claramente “ganadora”, es mejor modificar el test (o elegir la página que más nos guste).

Herramientas Es necesario escoger una herramienta que permita dividir a los usuarios en varios grupos para mostrarles las distintas versiones de las páginas. Normalmente dividiremos 50-50%, 33-33-33% o 25-25-25-25%. Pero en algunos casos necesitaremos servir la versión alternativa a un porcentaje menor, si el cambio es muy radical o algo invasivo y lo queremos probar primero con una muestra pequeña. En ese caso podríamos servir una versión, por ejemplo al 10% de los usuarios. La herramienta más habitual para realizar tests A/B es Google Analytics Content Experiments (antigua Google Website Optimizer). Pero contamos con muchas otras como Optimizely, Visual Website Optimizer, Convert y más.

Ideas Clave

 Lean UX exige testar con usuarios cuanto antes la Arquitectura de Información, los prototipos y los diseños del proyecto a construir.

 El test de árbol nos permite conocer el grado en que la AI diseñada se adecua a los modelos mentales de los usuarios.  El test de primer clic nos ayuda a saber si los usuarios comprenden los elementos de las páginas y su funcionalidad.  El test de 5 segundos nos sirve para conocer la primera impresión que causa una página y los contenidos que en ella destacan más y se recuerdan mejor.  Y el test A/B nos permite comparar dos versiones de una misma página para ver cuál genera una mayor conversión.