¿Qué es Design Sprint?

El Design Sprint es una metodología que se encarga de desarrollar hipótesis, crear prototipos, probar y validar ideas en un proceso de 4 días. Fue ideada en la compañía de Google por Jake Knapp. Aunque se creó en 2010 no fue hasta 2016 cuando se compartió con el mundo mediante el libro del propio autor, Sprint, convertido en un bestseller. No obstante, dicha metodología fue actualizada en 2016. Combina principalmente el ágile con el design thinking y de ahí resulta el proceso válido para generar y desarrollar ideas. 

Te dejamos por aquí un post en el que te recordamos qué es el design thinking. 

Volviendo al Design Sprint, su objetivo principal es hacer más ágil el proceso de desarrollo de productos. Se basa en la idea de que cuanto más rápido se puedan generar y detectar buenas ideas, más rápido desarrollaremos el proyecto y por tanto menos tiempo y dinero gastaremos. Con esta metodología ayudaremos a los diferentes equipos a coordinarse y solucionar en conjunto las dificultades que puedan surgir. 

Su principal ventaja es que vamos a acelerar de forma considerable la toma de decisiones a la vez que reducimos el riesgo de nuestros proyectos. La meta entonces será maquetar prototipos que otorguen estabilidad dando nuevos aires a las ideas y oportunidades en la fase de diseño. 

Los resultados que obtenemos a partir del Design Sprint son concretos y medibles. A raíz de ellos vamos a poder dar una validación a la propuesta ya que lo probaremos con usuarios reales.

¿Cuándo y cómo utilizarlo?

Como ya te hemos contado, la metodología Design Sprint está pensada para durar 4 días. Sin embargo, antes de empezar debes seguir las siguientes recomendaciones que te damos: 

• – Ten claro el reto que vas a elegir y cerciórate de que es adecuado para resolver a través de esta metodología

• – Prepara un espacio adecuado para desarrollar el proyecto y selecciona un equipo que sea apto para el mismo. 

• – Dedica exclusivamente el tiempo que hayas pactado para el proyecto.

El Design Sprint es idóneo para aquellos proyectos complejos que suponen todo un desafío. Si seguimos este método vamos a aprender a poner toda la atención en lo realmente importante, dar prioridad a las ideas válidas al 100% y dejar aun lado las grandes inversiones económicas. 

La metodología en la que nos estamos centrando se puede aplicar a diferentes proyectos con características muy variadas. Por ello te queremos explicar cuáles son y cómo funciona en cada uno de ellos. ¡Allá vamos!

1. Lanzamiento de un nuevo producto o servicio. En los casos en los que estamos creando un producto o un servicio desde 0 debemos coordinar a todos los equipos y hacer que sigan la misma dirección. De esta manera el ciclo de desarrollo se hará de manera más rápida ya que contaremos con recursos para solventar los problemas que vayan surgiendo. Además, seremos capaces de validar la idea definitiva que queremos sacar adelante antes de hacer grandes inversiones de tiempo y de dinero. 

2. Hacer del proyecto algo tangible. Mediante el Design Sprint podemos materializar la idea a desarrollar y por tanto hacerla tangible. Quedará validado por usuarios que son reales y viendo el éxito tendremos el background para convencer a los posibles inversores de que nuestro producto merece la pena. 

3. Focalizarse en el proyecto. En numerosas ocasiones el equipo necesita resolver con urgencia temas que son importantes pero nunca se cuenta con suficiente tiempo para ello. Con el Design Sprint nos pondremos manos a la obra ya que priorizamos la idea sobre la que estamos trabajando y será un método infalible para conseguir los resultados que queremos. 

4. Equipo alineado y coordinado. La metodología que estamos tratando tiene una gran utilidad cuando algún miembro del equipo, los inversores o la empresa en general no es capaz de ponerse de acuerdo sobre un tema concreto y está tardando mucho en sacar adelante el proyecto por este problema. Con el Design Sprint coordinaremos el equipo y tomaremos decisiones cohesionadas.

5. Apuesta arriesgada. Cuando la empresa se está planteando hacer un proyecto que requiere una apuesta arriesgada es consciente de que requerirá un importante desembolso de dinero. Con el Design Sprint podremos tener la idea validada mucho antes de lo que estamos acostumbrados por lo que tendremos clara la decisión a tomar antes de hacer esta inversión.

Fases del Design Sprint

Ahora que ya conocemos que es el Design Sprint y en qué casos es conveniente aplicarlo, vamos a enseñarte cuáles son las fases por las que pasará el proceso. Cómo ya te hemos dicho anteriormente, necesitaremos 4 días para poder aplicarlo, aunque antes de la modificación de 2018 eran 5. A lo largo de estos días realizaremos un total de 6 fases que han sido definidas por Google. 

¿Quieres conocer cuáles son?

Fase 0: Consideraciones previas (Comprender) 

Si queremos que el Design Sprint se desarrolle de forma correcta, debemos tener claras las tareas a realizar antes de comenzar. Nos vamos a centrar principalmente en conocer el contexto que nos rodea y definir el problema. El conjunto de los miembros del equipo debe ser multidisciplinar y conocer desde el principio los objetivos planteados. Para ello podemos generar y compartir una base de datos relevante que incluya información sobre los competidores, fortalezas, debilidades…Lo idóneo es que el equipo incluya miembros de todos los departamentos. 

Una vez preparado el equipo buscamos el espacio adecuado y junto a la base de datos redactamos un documento en el que expliquemos brevemente el reto al que nos vamos a enfrentar. Así el paso inicial lo tendremos completado.

Fase 1: Investigar y Definir. 

En esta fase debemos reunir a los miembros del equipo y poder hablar de forma conjunta sobre el enfoque y el punto de vista de cada uno. Así podremos pasar a procesar los datos que tenemos y añadir más información mediante la documentación que resulte de la investigación. 

Podemos usar para ello mapas de empatía, entrevistas, encuestas, user journey o análisis DAFO. El equipo en conjunto debe evaluar lo obtenido y deben definir el contexto específico y los resultados que queremos alcanzar. 

Terminaremos esta fase eligiendo: 

• – el enfoque específico 
• – los objetivos a conseguir
• – las métricas para el Sprint

Fase 2: Boceto sobre las propuestas

En esta segunda fase el equipo se dedicará a crear un boceto sobre la solución que se propone para el problema. Cada miembro realizará un trabajo individual para que las ideas no queden influenciadas por las opiniones del resto.

Estos bocetos se hacen de forma rápida con el objetivo de transmitir una idea principal que más tarde elaboramos en profundidad. Para hacer esta tarea no se necesitan nociones de diseño ya que únicamente necesitamos papel y boli. Puedes hacer bocetos en formato digital, aquí te enseñamos cómo hacer estos wireframes.

Fase 3: Tomamos las decisiones

Es en esta fase cuando tomamos una decisión sobre la idea que finalmente vamos a sacar adelante. Nos dedicamos a debatir y seleccionar aquello que vamos a prototipar posteriormente.Lo común es poner los bocetos sobre la mesa y hacer una votación para elegir la opción que más haya gustado. 

Necesitamos dejar claro cómo la solución escogida pueda hacer frente a los objetivos que hayamos marcado. Es importante salir de esta fase teniendo un storyboard en el que definamos las pantallas que vamos a prototipar. 

Fase 4: Prototipar

Ha llegado el momento de prototipar las ideas o las soluciones que hemos fijado en la fase anterior. Aquí entra únicamente en juego el equipo de diseño. Estos se pondrán manos a la obra para hacer un diseño que cumpla con las funcionalidades que queremos para nuestro producto. 

Es crucial tener claro que el prototipo final no debe ser de alta fidelidad sino que debe explicar lo esencial del producto. En esta fase hay que definir además que les vamos a preguntar a los usuarios durante el test. Debemos concretar horarios, pruebas, guiones…Y con todo ello podremos pasar a la siguiente fase. 

Fase 5: Validar y testear con usuarios finales

Esta última fase es realmente importante ya que en ella haremos los test con los usuarios. Aquí vamos a validar y poner a prueba todo el trabajo que hemos realizado hasta ahora. Trataremos de llevar a cabo estos test para ver cómo el usuario interactúa con nuestro producto y las dudas que le surgen. 

Debemos reunir hasta 20 usuarios como máximo y 6 como mínimo. No debemos olvidarnos de grabar el test para poder chequearlo posteriormente las veces que necesitemos. Los diferentes observadores de la prueba deben estar tomando notas y registrando todo lo importante. Una vez que terminemos la prueba tendremos que generar la documentación necesaria para pasar a la fase de desarrollo. Este documento debe ser compartido con todo el equipo. Aquí incluímos las conclusiones, el prototipo funcional, un resumen del test, una hoja de ruta para poder continuar y la validación o no de las hipótesis iniciales. 

Herramientas de Design Sprint

Con todo lo que te hemos explicado claro, podemos pasar a definir cuáles son las herramientas que podemos utilizar para desarrollar nuestro proyecto de Design Sprint. 

• MIRO. Es un tablero virtual en el que plasmamos el proceso.Se trata de una pizarra colaborativa que hace que nuestros equipos estén siempre cerca y conectados. Nos permite hacer reuniones y talleres virtuales, crear y coordinar ideas, potenciar las estrategias y crear diagramas de flujo online. ¡No te la puedes perder!

• FIGMA. Se trata de una herramienta de diseño de prototipos colaborativos en tiempo real. También es un editor de gráficos vectoriales. Conecta a todos los miembros del equipo del diseño para que puedan entregar sus proyectos de forma rápida. Ejecuta y da vida a las ideas iniciales que nos surgen. Es realmente útil y nos encantaría que la probases.

• ZOOM. Es un software de videollamadas que nos pone en contacto tanto con el equipo como con los usuarios. Ofrece múltiples herramientas que agilizan el trabajo y hacen del proceso de creación del proyecto algo mucho más humano. 

• GOOGLE SHEETS. Son hojas de cálculo que podemos compartir con todo el equipo para documentar todo el proceso que seguimos. Es importante que quede todo plasmado aquí para no perder nada importante. 

Ahora que ya conoces este nuevo método de trabajo nos encantaría que nos dejases en los comentarios que te ha parecido y si lo vas a aplicar a alguno de tus proyectos. Queremos que tengas claro que aunque el Design Sprint está pensado para llevar a cabo en 4 días, puedes adaptarlo a los tiempos que vayas necesitando. 

Realizar este tipo de trabajos por lo general resulta muy motivador para el equipo y es un nexo de unión entre todos sus miembros. El éxito suele ser muy común ya que cada uno da lo mejor de sí mismo para ello. Aquí se olvida la jerarquía y los roles y se trabaja para resolver un mismo problema común. 

¡Nos vemos pronto comunidad de FOCUX! 

La entrada ¿Qué es Design Sprint? | Herramientas y Fases se publicó primero en Focux.

Si quieres conocer una forma más de atraer a los usuarios y mejorar tu producto, quédate a leernos. ¡Comenzamos! 

¿Qué son los wireframes? 

Antes de adentrarte en el mundo del wireframing debes conocer qué son exactamente los wireframes. Se trata de representaciones a modo de esquema que muestran las diferentes pantallas que componen un producto digital. La función de los mismos es plasmar de manera visual los contenidos que tendrá por ejemplo la app o página web que desarrollemos. 

Esta representación suele hacerse en escala de grises y debe mostrar las distintas funcionalidades del producto. Es cierto que los wireframes suelen desarrollarse en las primeras etapas de la creación del producto con el objetivo de poder dejar clara la estructura antes de añadir el diseño final. 

En algunas ocasiones, los wireframes son denominados también planes de pantalla. Su objetivo primordial es entender cómo quedará el producto final. Así podremos verificar cuáles son los errores o modificarlos para llegar al resultado que necesitamos. 

Estos esquemas son realmente útiles cuando comenzamos un nuevo proyecto pero más tarde podremos seguir utilizándolos cuando queramos introducir cambios. Muchas empresas los utilizan a la hora de añadir nuevas utilidades. 

Es importante recordar que son representaciones simples en las que no establecemos ni colores, ni tipografía, ni imágenes. Nos centraremos en la funcionalidad del producto digital. Una de sus ventajas es que nos permite crear numerosas versiones de un mismo sitio web o aplicación. Pero no sólo esto, hay muchas más. ¡Vamos a conocerlas!

Ventajas de elaborar wireframes para tu producto digital

El uso de wireframes supone numerosos beneficios para el proceso de elaboración y lanzamiento de tu producto digital. Desde Focux queremos contarte cuáles son todas sus ventajas para que puedas adoptarlos en tu proyecto con toda seguridad.

Rapidez y sin costes adicionales. Cómo ya te hemos contado, los wireframes son bocetos sin color, tipografía e imágenes. Al no contar con una identidad gráfica establecida, avanzaremos de manera más rápida y podremos hacer diferentes correcciones. Esto nos va a permitir elaborar múltiples versiones en poco tiempo y sin costes adicionales. De esta manera podemos decir que una de sus ventajas es el ahorro tanto de tiempo como de dinero en nuestro proyecto.

Detectar y solucionar problemas previos. Con estos sencillos esquemas podemos obtener un feedback rápido sobre los avances del proyecto. Así detectaremos los problemas o errores de usabilidad que hayan surgido y podremos resolverlos antes de desarrollar el producto final. De esta manera será más fácil comparar propuestas y funcionalidades. 

Mejoramos la satisfacción del cliente. Los wireframes facilitan la comunicación entre los desarrolladores y el cliente. Con los bocetos podremos ir adaptándonos a las peticiones del mismo y corregirlas de forma más sencilla. El cliente podrá ir definiendo sus objetivos y propuestas a medida que avanzamos en el proyecto de manera conjunta. El resultado final será mucho más satisfactorio y las correcciones más sencillas

Incorporamos nuevas herramientas. La elaboración de wireframes se puede realizar a través de diferentes métodos. Es cierto que se puede llevar a cabo de manera manual, en papel, aunque lo común hoy en día es realizarlo de forma digital. Para ello existen numerosas herramientas que podemos incorporar en nuestra empresa y que nos otorgarán todas las facilidades para trabajar. Así, aumentaremos las habilidades del equipo y su conocimiento será más valioso.

¿Qué tipos de wireframes existen?

Cómo ya te hemos contado, puedes elaborar tus wireframes de forma manual o utilizar un formato digital. Es cierto que nosotros te recomendamos combinar los dos formatos para poder conseguir un resultado más completo. Lo ideal es comenzar haciendo una idea muy básica con lápiz y papel y más tarde pasarlo al ordenador para añadir las funcionalidades.

Existen tres tipos principales de wireframes que nos gustaría enseñarte: 

Wireframes básicos. También se les conoce como wireframes de baja fidelidad. Se trata del modelo más simple de todos los que existen. Generalmente se hace a mano y no se incluyen demasiados detalles. Por lo general se realizan en blanco y negro y se anota lo básico del diseño, como su propio nombre indica.

Wireframes anotados. Es uno de los tipos intermedios. Junto a un esquema simple, añadimos anotaciones básicas y breves que se introducen generalmente en uno de los lados. Estas se van a encargar de describir los elementos del diseño. Su propósito es que expliquen las funcionalidades y objetivos de cada elemento. Junto a las anotaciones introducimos los elementos visuales de forma organizada.

Wireframes de flujo de usuario. Se usan en aquellos casos en los que las anotaciones anteriores no son suficientes para mostrar cómo el usuario se va a desplazar por la página web. Es así que necesitaremos más información. En estos wireframes podemos darle un toque interactivo e incluir una presentación con movimiento para indicar estos flujos de los usuarios.

Wireframes de alta fidelidad. Este tipo es el que más se asemeja a la versión final del producto. Para ellos es un requisito indispensable hacerlo en formato digital. Debemos mostrar con detalle todos los elementos y estructura del diseño. Podemos incluir las interacciones por ejemplo. Así quedará un esquema perfecto de cómo queremos que sea el producto.

¿Cómo elaborarlos?

Una vez que ya conoces los tipos de wireframes que existen y sus ventajas, llega la hora de elaborarlos. Antes de nada, queremos dejar por aquí uno de nuestros vídeos en el que te enseñamos cómo maquetar tu wireframe con la herramienta Adobe Xd.

En este tutorial podrás descubrir un ejemplo práctico que te servirá de referencia para aprender a usar la herramienta y aplicarlo a tu producto digital.

Y con todo esto te queremos mostrar los pasos esenciales que deberás seguir para crear tu wireframe. 

Lo primero de todo, debes pensar en el objetivo principal de tu producto y poder adaptar todo el diseño posterior a ese propósito. En este primer paso debes prestar mucha atención a la manera en la que el usuario va a interactuar y moverse por la interfaz.

Más tarde puedes continuar con una elaboración de wireframe básico o de baja fidelidad. Así, puedes dividir cada pantalla en tres partes. La primera estará formada por el encabezado, más tarde el cuerpo, y finalmente el pie de página con información no tan relevante.

Después iremos agregando elementos como pueden ser los botones, las áreas de contenido, barras de búsqueda…No debemos olvidar realizar las anotaciones pertinentes para poder contar con toda la información.

Con todo lo anterior listo, podemos continuar con el siguiente paso. Realizaremos las correcciones pertinentes y finalmente elaboramos el wireframe final en el software que hayamos elegido con todo incluído. Aquí debemos insertar todo aquello que vaya a tener la interfaz final para probar sus funcionalidades.

Herramientas para tus wireframes

La mayoría de aplicaciones o herramientas para elaborar wireframes digitales de calidad son de pago. Si bien es cierto, muchas cuentan con un periodo de prueba gratuito que puedes utilizar para corroborar que te sirve la herramienta.

El resultado que obtendrás con cada una de las que te recomendamos será muy profesional. Además, la mayoría ofrecen plantillas predeterminadas que te aligeran el trabajo y pueden servirte de inspiración para tus proyectos digitales.

SKETCH

Se trata de una herramienta visual e intuitiva. Ofrece cientos de opciones y ajustes preestablecidos que te ayudarán a ahorrar tiempo. Nos permite contar con opciones muy útiles como arrastrar y soltar, incluir comentarios colaborativos, herramientas de presentación e historiales de revisión.

El inconveniente principal de la herramienta es que solo está disponible para Mac por lo que no es accesible para todos los usuarios. No obstante, la facilidad de su uso y las numerosas opciones que ofrece la convierten en la herramienta perfecta para elaborar wireframes y obtener un resultado rápido y profesional.

ADOBE XD

Estamos ante una herramienta de diseño rápida y potente. Se trata de un software propio desarrollado por Adobe para elaborar wireframes de manera profesional. Nos permite crear prototipos interactivos, funcionales y realistas ya que podemos incluir hasta el mínimo detalle.

Cuenta con numerosas funciones de gran utilidad como es la posibilidad de simular carruseles o secciones dinámicas, integrar comandos de voz y cargar especificaciones para los desarrolladores. Además cuenta con una cuadrícula de repetición que nos permite crear bloques enteros en muy pocos segundos.

MOCKFLOW

Se trata de una aplicación que nos permite crear wireframes en la nube. Al igual que las anteriores, su sistema se basa en arrastrar y soltar y ofrece numerosas herramientas muy novedosas. Es perfecto para principiantes ya que su uso es intuitivo y no tiene demasiadas complicaciones a la hora de crear una estructura simulada de un producto digital.

Su versión de pago es muy asequible y además cuenta con una prueba gratuita para que puedas familiarizarte con la interfaz. Puedes adaptar tus diseños a varios tamaños de pantalla y exportarlos en distintos formatos. ¡Tienes que probarla!

De igual forma existe otras herramientas como Figma, Axure o Canva.

CONCLUSIÓN

Como puedes observar, crear wireframes es una de las mejores formas de poder tener éxito en el desarrollo de un proyecto. No importa la herramienta o método que uses para ello, lo importante es dominarlo con soltura y tener claras las ideas que queremos plasmar.

¿Quieres saber más sobre el proceso de diseño de una interfaz? ¡Lee nuestra guía! Y déjanos en los comentarios cual es la herramienta que más utilizas para la elaboración de wireframes.

La entrada Wireframes | Concepto, tipos y ventajas en el mundo digital se publicó primero en Focux.

Por eso en este artículo vamos a ver cómo el UX puede construir y mejorar tu ecommerce. En la guía vamos a repasar metodologías, técnicas y formas de hacer una aproximación analítica al impacto de los elementos en la pantalla, las imágenes, las opciones de pago y la redacción de contenido en un ecommerce.

Pero antes es necesario explicar los conceptos claves de un ecommerce para generar una excelente experiencia de usuario, así que vamos a verlos.

Ecommerce

El ecommerce se compone de dos elementos, el comercio y lo electrónico. Por lo que tenemos que entender muy bien que lo principal es vender, apoyándose en un canal online como es internet.

Cuando creas tu tienda online, debes asegurarte de conocer en profundidad a tus posibles clientes. Si quieres conocer más sobre esta etapa de investigación de usuario, te dejo nuestra guía UX Research para que le eches un vistazo.

Además nuestros clientes tienen que contar con todas las herramientas para comprar en nuestra página web. Por medio del UX vamos a aprender como facilitarle al usuario todas estas posibilidades.

Por último es fundamental poner atención en la post-venta, ya que la relación con el cliente no termina en el momento de pago. Hay que establecer una serie de rutas para que el usuario opte de nuevo por nuestros servicios.

¿Por qué comprar online?

Para comprender mejor las motivaciones de nuestros clientes, es necesario entender por qué las personas compramos online.

El primer motivo es por la mayor variedad de productos que encontramos en una tienda online a diferencia de una tienda física. En un comercio electrónico el catálogo es mayor.

La segunda razón son los precios, pero no solo que un producto sea más caro o más barato. En un entorno online es mucho más fácil poder buscar y comparar el mejor precio.

Y no podemos olvidar el factor de la comodidad. La compra online nos permite adquirir un producto en cualquier momento, ya estés en tu casa o en el trabajo.

¿Qué preocupa en la compra online?

A la hora de comprar un producto por internet, existen una serie de preocupaciones que los clientes suelen sufrir. La idea es que a través de la experiencia de usuario logremos paliar estas preocupaciones.

• Los gastos de envío. Es un factor clave que condiciona la compra de un producto en una tienda online. Lo mejor es mostrar esta cantidad lo antes posible en el proceso de compra. Ya que cuanto más lo retrasemos, mayor será el impacto negativo en la decisión del cliente.

• Los tiempos de entrega. En general hay que intentar que el paquete llegue lo antes posible al consumidor, porque hay que disminuir la incertidumbre lo máximo posible. Esto lo conseguimos informando en todo momento de las etapas por las que pasa el envío.

• Las devoluciones. En el canal online tenemos que aclarar en todo momento la política de devoluciones de la empresa, para que el usuario tenga acceso a la información en caso de necesitarla.

¿Por qué compramos online unos productos sí y otros no?

Para comprender cómo incide el UX en la compra online, es necesario seguir estudiando los motivos que deciden las compras de los usuarios. En este caso las razones que nos hacen decantarnos por comprar un producto online.

Una razón es que los usuarios no compran nada que sea muy caro o perecedero. Ya sea por la seguridad que nos aporta una compra en físico o por las características del producto hasta que llega el envío.

Otro aspecto a tener en cuenta es la confianza que nos transmite comprar un producto que ya hemos comprado antes. Cambiar de vendedor de un día a otro con artículos que solemos comprar es complicado.

Por último, comprar una marca que ya conocemos es un factor determinante para acelerar una compra. Por eso es imprescindible que sea visible la marca del producto en el ecommerce.

M-commerce

El m-commerce se refiere a las compras realizadas a través de dispositivos móviles. Hoy en día más de 3 mil millones de usuarios compran con su móvil, por lo que es un factor que debemos tener en cuenta

El móvil está presente en todas las fases del proceso de compra. Desde la búsqueda de información hasta el servicio post venta. Así que tenemos que considerar los dispositivos móviles cómo elementos donde enfocar nuestra estrategia UX.

Existen tres estrategias que podemos incorporar en nuestro ecommerce para adaptarlo a un m-commerce.

• Mobile-dedicated. Consiste en diseñar un sitio web exclusivo para la arquitectura de los dispositivos móviles.

• Responsive design. En este caso la idea es adaptar el sitio web del ecommerce para que se ejecute correctamente en las distintas plataformas.

• Mobile App. Diseñar una aplicación nativa donde trasladar todas las operaciones de la tienda online a los dispositivos móviles.

Perfil del comprador

Hemos visto los diversos contextos por los que un usuario realiza una compra online. Ahora vamos a analizar los diferentes perfiles de compra, porque los usuarios que llegan a nuestro ecommerce no tienen una única intención de compra. Por eso investigamos las diferentes posibilidades que nos podemos encontrar.

Foco en el producto

Estos usuarios saben exactamente lo que quieren y cómo de rápido lo quieren. Conocen dónde pueden encontrar lo que buscan, utilizando diferentes motores de búsqueda y estudiando todas las opciones.

Para estos usuarios es importante la velocidad, es decir, quieren encontrar rápido lo que quieren. Si queremos satisfacerlos, debemos cumplir una serie de claves:

• Identificar claramente cada producto.
• Ofrecer una búsqueda efectiva.
• Dejar que los usuarios regresen fácilmente a lo que han visto o comprado.
• Simplificar el checkout.

Foco en la navegación

Estos clientes no tienen prisa y toman las decisiones con calma. Cuando encuentran algo que de verdad les apasiona, lo compran. Este tipo de usuarios son ideales para nuestro ecommerce. Para atraerlos vamos a ver las medidas que podemos tomar:

• Destacar los productos nuevos, populares o en oferta.
• Añadir links relacionados y productos recomendados.
• Darle la opción de compartir la información.

Foco en la investigación

En este caso el usuario navega por objetivos, con una meta en mente fijada. Quiere conseguir información sobre el producto y el precio de lo que busca. Además tiende a comparar las características de los artículos. Unas prácticas que podemos ofrecerles a estos compradores son:

• Ofrecer descripciones detalladas.
• Enumerar y valorar las opiniones y reseñas.
• Facilitar la comparación.
• Guardar los carritos de compra.

Cazarrecompensas

Estos compradores prefieren comprar online para encontrar el mejor precio. No tienen problema en facilitarnos sus datos si así consiguen descuentos u ofertas. La manera de atrapar a estos usuarios es la siguiente:

• Listar los productos en oferta junto a su precio original.
• Listar cada producto, con los descuentos y el ahorro que consiguen.
• Facilitar el uso de cupones o aplicar el descuento directamente en el precio.

Compra ocasional

Son personas que pueden cumplir cualquiera de los anteriores perfiles que hemos visto, pero con una diferencia. Son usuarios que vienen con el objetivo de comprar algo de manera puntual en nuestro ecommerce.

Estos clientes no quieren registrarse en nuestro sitio, y probablemente abandonen el proceso de compra si tenemos muchos impedimentos. Para convencer a estos usuarios, necesitamos:

• Una navegación clara.
• Fichas de producto completas.
• Transmitir confianza con los elementos de la interfaz.
• Permitir la compra sin un proceso de registro, es decir, comprar como invitado.

Guía UX para ecommerce

Ahora que hemos visto todos los aspectos que rodean a un ecommerce, es el momento de empezar con la guía. Donde te vamos a ofrecer los mejores consejos y prácticas UX para ecommerce.

Homepage

Una homepage es la página principal, donde se presenta el sitio web al usuario. Su función es dejar claro que la web es un ecommerce. Generalmente los usuarios inician el proceso de compra en esta página, por lo que debe resolver con rapidez las posibles acciones que tome el usuario. 

Una homepage tiene que cumplir las siguientes funciones:

• Enseñar el catálogo, mostrando alguno de los productos principales que vende, y los servicios que se ofrecen.

• Permitir la compra, proporcionando acceso directo a los productos del catálogo, pasando directamente a la zona de carrito.

• Organizar la mercancía, clasificando los productos y servicios que ofrece el ecommerce. Hay que seguir una arquitectura de la información centrada en el usuario.

• Venta y entrega, con enlaces a las opciones de compra, la política de devoluciones, envíos y opciones de pago.

• Construir confianza, con accesos a los servicios de atención al cliente, la política de privacidad y la información general sobre la empresa.

Estrategia UX

Una vez vistos las principales funciones del homepage, toca repasar los requisitos recomendables para que sea eficaz en términos de experiencia de usuario.

• URL sencilla. Una URL que el usuario pueda recordar y no tenga que recurrir a motores de búsqueda. Compra dominios relacionados con el tuyo y redirígelos a tu web principal.

• Máxima simplicidad. No agobies a tus visitantes con demasiada información. Si no entienden la home por falta de claridad, se marcharán sin comprar. 

• Ser representativa del sitio web. La home tiene que permitir inmediatamente saber qué ofrece el sitio. Refleja con claridad los productos que vende la empresa, para que se pueda identificar fácilmente qué producto está en venta.

• Claridad máxima. Diseña el sitio para que usuarios ocasionales entiendan a la primera qué se venden en la tienda online. Debe ser intuitivo y de fácil aprendizaje.

• Diseño coherente. Mantener una consistencia en las interacciones del sitio. Que cuente con las mismas opciones de navegación, con menús visibles y que reflejen donde se encuentra el usuario. También tienen que indicar cómo llegar a funciones básicas del ecommerce.

• Navegación clara. Enlazar a todos los sitios de interés de la web, como la privacidad o la atención al cliente.

Catálogo

La página de catálogo muestra la lista de productos disponibles en la tienda online. Se puede utilizar directamente como portada de la homepage, pero cuando diseñamos un catálogo debemos seguir ciertas recomendaciones UX.

Cómo permitir que los usuarios accedan a las principales categorías de producto a traves de la navegación. También es una buena oportunidad para dedicar un espacio a la promoción de algunos artículos especiales, ya sean de temporada o estén en oferta. 

Las animaciones son visualmente atractivas, pero no deben excederse ya que distraen al cliente del producto que está buscando. Además es muy interesante vincular los productos a sus fichas para encontrar las especificaciones rápidamente Y si usas una global navigation, podrás mostrar todas las categorías de producto.

Clasificación

La clasificación es una tarea muy relevante dentro del proceso de trabajo. El equipo de diseño, no piensa igual que el cliente a la hora de diseñar esta clasificación.

Para conocer cómo piensa el usuario en esta clasificación, contamos con dos técnicas UX cómo el card sorting o los test de usabilidad. Estas técnicas nos permiten alinear de forma precisa la voz del usuario y tener un punto de partida para organizar el contenido según las necesidades del usuario.

Navegación

Desde el aspecto de la navegación, es necesario repasar tres elementos donde poner el foco en la experiencia de usuario.

• Migas de pan. Muestran al usuario dónde está utilizando las migas de pan, para que se sitúe en el orden jerárquico de la web.

• Navegación clara. Diseña unas rutas de navegación bien conectadas que permitan una navegación sencilla hacia ambos lados, tanto el inicio como el fin del proceso de compra.

• Nombres coherentes. Cuida el nombre de las categorías de manera que tengan sentido entre ellas por sí mismas y con el resto del sitio.

• Simplifica el camino. Con cada clic los usuarios deben acercarse a su objetivo, así que no interpongas pasos innecesarios en el proceso y procura acortar el camino hacia la compra.

Navegación mobile

Retomando con el m-commerce, es necesario entender cómo funciona el proceso de navegación en un dispositivo móvil para establecer las soluciones de experiencia de usuario.

En estos dispositivos la navegación es la forma en la que los usuarios inician el proceso de compra, por lo que es de vital importancia. Realizando diferentes pruebas de campo, como las pruebas de usabilidad, conseguimos entender cómo estructurar la información para adaptarla a la necesidad de los usuarios en móviles.

Ya que los usuarios valoran una buena navegación y clasificación de la información. Este estado óptimo de navegación lo obtenemos con recursos como el menú hamburguesa y la barra de navegación inferior.

Menú hamburguesa

Es el objeto representado por tres rayas horizontales que indican la disponibilidad de encontrar contenido una vez desplegado. Ahorran espacio en pantalla y está siendo usado incluso fuera del contexto mobile.

Aunque no es una solución para todos los ecommerce, con los test de usabilidad puedes poner a prueba si esta solución UX es adecuada en tu proyecto.

Barra de navegación inferior

La barra de navegación inferior o bottom navigation,  es una fila de botones desplegada en la parte inferior de la pantalla, estando siempre visible. Con un simple toque los usuarios pueden explorar sus opciones. 

Cuenta con un componente ergonómico muy importante, ya que permite sostener el teléfono mientras el usuario usa el pulgar. Requiere menos esfuerzo y reduce la necesidad de cambiar el método de agarre del dispositivo. Además mientras el usuario hace scroll, la navegación no se mueve.

Pestañas

Son un modelo de organización parecido a la barra de navegación, que permite la organización de contenidos por categorías. Su disposición y diseño es diferente, ya que se encuentra en la parte superior de la pantalla.

Páginas de categorías

Son las páginas que definen y presentan las categorías de productos para los usuarios. Es el paso intermedio entre elegir una categoría y ver un producto o una lista de productos. Siguiendo las siguientes recomendaciones UX optimizamos las páginas de categorías.

• No pueden generar desorden. Los usuarios quieren un orden claro que les permita elegir. Es preferible una experiencia de navegación simplificada que abrumar al cliente.

• Deben ser diferentes de la lista de productos. Puede generar confusión entre los usuarios, siendo incapaces de distinguirlas. Por lo que hay que poner especial interés en diferenciar los diseños de estos elementos.

• No mover automáticamente a los usuarios. Algunos sitios optan por llevar al usuario a una subcategoría dentro de una más grande. En este caso, el usuario no encuentra lo que estaba esperando y se siente confuso. Lo recomendable es no optar por esta práctica.

Lista de productos

A la hora de establecer una lista de productos, es necesario seguir tres fases, empezando por:

Presentar

• Cuando nombres un producto, coloca la información más relevante al principio.
• Muestra siempre el precio.
• Indica si hay otras opciones disponibles.
• Muestra la información sobre la disponibilidad del producto.
• Cuida la selección que muestras en los productos recomendados.
• Muestra bien la paginación.
• Link claro a la información adicional del producto.
• Incluye imágenes de suficiente calidad.
• Muestra las características del producto.
• Utiliza ampliaciones de imágenes.

Mostrar

• Limita las páginas de resultados a dos o tres, si es posible.
• Cuida el tiempo de carga.
• El scroll vertical se puede utilizar.
• Personalizar las opciones de visualización de resultados.
• Indica al usuario qué links ha visto y cuáles no.

Clasificar

• Indica claramente cómo están ordenados los productos: orden alfabético, precio o colores.
• Permite a los usuarios elegir su sistema de clasificación con filtros personalizados.

Página de producto

Las páginas de producto son fundamentales en el momento de tomar la decisión de compra. Por eso debemos poner especial atención y cuidarlas al detalle.

Cuando nos encontramos en una tienda física el cliente puede preguntar toda clase de información acerca de los artículos. Al pasarnos al online, esa información tiene que aparecer en la página de producto: reseñas, opiniones, imágenes de calidad y buenas descripciones nunca pueden faltar.

Si queremos optimizar el UX de la página de producto, hay una serie de requisitos a cumplir:

• Nombre de producto descriptivo.
• Imágenes reconocidas.
• Vistas ampliadas de las imágenes.
• Disponibilidad del producto.
• Precio con todos los impuestos incluidos.
• Una forma clara de añadir al carrito.
• Detalles de cada producto.

Sin olvidar que estamos tratando con un ecommerce, las páginas de producto inciden directamente en el funcionamiento de la experiencia de usuario del sitio. Y para estructurarlas adecuadamente, vamos a ver los elementos principales que la deben constituir.

Agente de ventas

La página de producto es el punto donde el cliente recoge la información sobre un producto. Cuanto mejor sea la ficha de producto y más información útil y relevante contenga, más probable será la venta y mejor la experiencia de compra del usuario.

Al situarnos en un canal online, es necesario sustituir el componente social de una tienda física, respondiendo a todas las posibles preguntas del cliente con una completa ficha de producto.

Comparación

Con las fichas de producto completamente preparadas, el cliente podrá comparar al detalle todos los productos del ecommerce. Es una acción natural del usuario realizar una comparación del mismo artículo en varias tiendas. Por eso tenemos que facilitarle todas las referencias posibles en nuestra página de producto.

Segunda opinión

El usuario quiere leer la opinión de otras personas. Incluir un apartado de comentarios es imprescindible en la página de producto. Estos testimonios pueden ser certificados, o simplemente validados por clientes registrados en la web. También se puede optar por reviews de profesionales.

Estas opiniones se tienen que mostrar de forma resumida en porciones limitadas. Y no podemos desechar las opiniones negativas, porque afectan directamente en la confianza del cliente en nuestro ecommerce.

Inicio de la compra

La decisión final de la compra de un producto, tiene su comienzo en la página de producto. Toda esa información de la que hemos hablado, tiene que estar bien configurada y visible.

Por ejemplo la opción de añadir al carrito, debe dejar claro que se ha añadido y donde podrá acceder el usuario a su pedido. Por último es recomendable elaborar un feedback adecuado y que le resulte útil al usuario.

Ficha de producto

Ya hemos revisado bastantes consejos de cómo mejorar la experiencia de usuario de las fichas de producto. Así que ahora veremos los requisitos imprescindibles que no pueden faltar en una ficha de producto.

• Escribe descripciones concisas pero completas.

• Deja espacio para mostrar algo de la descripción en la parte visible sin tener que hacer scroll.

• Fracciona la información.

• Indica claramente la información complementaria sobre el producto.

• Utiliza un PDF sólo cuando la información necesite imprimirse.

• Explica cada uno de los artículos que compongan un pack o artículo especial.

• Ofrece información consistente para que los usuarios puedan comparar.

• Utiliza el idioma de tus usuarios, pero no el lenguaje, si el tono en el que se expresan.

• Enumera la talla, peso, cantidad y cualquier otra medida relevante.

• Crea tablas y especificaciones fáciles de leer.

• Fija encabezados con los nombres de los productos cuando la ficha del producto sea muy extensa.

• Muestra con claridad las restricciones especiales en la compra de un producto.

Reviews y opiniones de usuarios

Siempre es necesario integrar reviews en las fichas de producto, porque ofrece cercanía y una sensación de transparencia con el cliente. Nos hace sentir que podemos confiar en la marca y que no buscan engañarnos.

La forma en que se muestra esta opinión debe ser atractiva, y situarse en una zona estratégica que no limite la acción. Y como ya comentamos, estas reseñas deben estar respaldadas por un perfil visible, y que no sean opiniones anónimas.

Imágenes del producto

De las imágenes también hemos hablado a lo largo de la guía, pero en esta sección establecemos las pautas necesarias para crear una imagen de producto adecuada con la UX.

• Ofrece imágenes de todos los productos.

• Procura que los objetos sean fácilmente reconocibles en las imágenes.

• Haz que las imágenes de producto sirvan para comprar, mediante un enlace.

• Cuida la calidad y el peso de la imagen.

• Muestra en la imagen lo que se incluye en la compra.

• Permite utilizar el efecto zoom en las imágenes.

• Muestra detalles adicionales de un producto mediante varias imágenes.

• Muestra las imágenes en contexto.

• Enseña las prendas de ropa sobre un modelo o maniquí.

• Implementa herramientas avanzadas para visualizar las imágenes, como cambios de color o realidad aumentada.

Precios

Sin duda uno de los elementos que pueden estancar o engrandecer un ecommerce. Por eso tenemos que ver los elementos más importantes que no pueden faltar en la sección de precios.

Principalmente se trata de mostrar los precios finales, con los costes adicionales incluidos. No esperes a la plataforma de pago para añadir los costes extras, porque el cliente quedará descontento. 

Tampoco olvides incluir un enlace a la información sobre gastos de envío y política de devoluciones. Y ofrece el precio de tu producto en todas las monedas posibles, si tu ecommerce opera en todo el mundo.

Checkout

En este paso revisamos las mejores estrategias UX para abordar la etapa final del proceso de compra.

Añadir productos al carrito

Esta acción da pie al proceso de pago, por eso es importante revisar los aspectos fundamentales a seguir.

• Claridad con los nombres del carrito y del botón comprar.
• Diferencia entre añadir al carrito y otras opciones como la lista de deseos.
• Incluye un botón de añadir al carrito o comprar en cada ficha de producto.
• Usa un botón sencillo para activar el mecanismo de compra.
• Incluye la cantidad de producto en una ficha por defecto con valor uno.
• Si hay un descuento por comprar varias unidades, debería ser visible y fácil de aplicar.
• Explica qué hacer cuando comprador y destinatario son diferentes.
• Aunque esté vacío, incluye instrucciones sobre la compra o algún otro mensaje en el carrito de compra.
• Cuando el usuario añada un producto al carrito debe recibir feedback.
• Mantén la configuración elegida por el usuario.
• Muestra al usuario qué hay en su carrito.

El carrito

De nuevo, es momento de establecer las mejores pautas sobre experiencia de usuario para optimizar nuestro carrito.

Hoy en día la práctica más usada es la de colocar el carrito en la esquina superior derecha de cada página. Cuando el usuario pose su ratón sobre el carrito, tiene que mostrar una imagen de cada producto, y la cantidad de estos. Sin olvidar todos los costes de la compra.

En el momento de pasar al carrito, ofrece la posibilidad de seguir comprando en el sitio o acceder al checkout. Así ahorramos pasos innecesarios al cliente. En términos de diseño, minimiza la letra pequeña y las instrucciones, su lugar no es el carrito.

Además tiene que ofrecer la posibilidad de aplicar descuentos automáticamente, o aplicar los que se anuncian en la web. También se debe permitir modificar en todo momento el contenido del carrito, por ejemplo con un botón de eliminar artículos.

Por último, es interesante guardar el carrito del cliente para la siguiente visita. Así cuando vuelvan tendrán la opción de retomar la compra donde la habían dejado.

Pasos y procesos del checkout

El checkout debe seguir una serie de pasos para conseguir completar correctamente su proceso. Vamos a verlos.

• Ordenar los pasos del proceso tal y como los espera el usuario
• Muestra los pasos del proceso, que es lo que hay que hacer en cada momento, y minimiza las distracciones
• Diseña botones claros en el proceso
• Justifica para que solicitas cada dato durante el proceso de compra
• Y no pidas información poco relevante, puede hacer desconfiar a los usuarios.

Formularios

Los formularios están presentes en diferentes secciones de un ecommerce. Al ser un elemento que nos relaciona directamente con el cliente, es importante conocer las mejores medidas UX para optimizar nuestros formularios.

• No solicites la misma info más de una vez.
• Utiliza etiquetas claras en cada campo de texto.
• Genera campos de textos suficientemente largos para que quepan los datos requeridos.
• Asume que los usuarios usan las teclas enter y return antes de completar el formulario, y piensa en la mejor solución posible.
• Deja que el usuario corrija sus datos en cualquier momento.
• No preselecciones opciones como si fueras el usuario, da libertad.
• Guarda todos los datos que haya introducido el usuario para que no tenga que volver a introducirlos si ocurre un error.

Registro

La obligatoriedad del registro es una cuestión muy sopesada en labores de diseño, y con mucha diversidad de opinión. Pero la conclusión aceptada por todos es que no debe ser una práctica requerida para comprar online.

Siempre debemos permitir comprar como invitado. Cuando optamos por el registro, es importante aportar unos beneficios para el usuario, e incitar al registro. Ya que el usuario está realizando un paso extra al registrarse, es importante integrarlo en el checkout de forma sencilla.

Una vez el usuario se haya registrado, se crea un espacio de login para introducir sus datos, registrarse con otra cuenta o cerrar sesión y pasar como invitado.

Gastos de envío y entrega

El momento de recibir un paquete determina la opinión del usuario sobre una marca, y es lo que recordará en futuros pedidos. Si experimenta un envío lleno de problemas, lo más seguro es que perdamos un potencial cliente.

Por eso tenemos que revisar los mejores tips para mejorar la experiencia de usuario de los envíos en un ecommerce.

• Muestra los gastos de envío tan pronto y lo más exactos posible.

• Deja que tus clientes elijan entre varios métodos de envío.

• No muestres opciones a las que no se puedan acoger.

• Informar qué empresa gestionará el envío.

• Ofrece una fecha de entrega estimada.

• Informa de la procedencia de cada artículo.

• Cobra gastos sólo una vez, aunque haya varios paquetes.

• Permite al usuario incluir instrucciones para la entrega.

• Indica la franja o las horas de entrega.

• Ofrece información completa, como localización, horario o teléfono, si se elige recogida en tienda.

Datos de pago

Con el pedido casi terminado, solo queda realizar el pago antes de finalizar el pedido. Es un momento delicado porque muchos usuarios tienen reticencias a la hora de pagar online. Así que vamos a ver los mejores consejos para cuidar esa experiencia de usuario.

• Muestra todos los costes antes de pedir la información para el pago.

• Recoge los datos de pago en la misma ventana del checkout, no en una externa.

• Informa al usuario de dónde están los datos que le pides, especialmente si son difíciles de encontrar, como el CVV.

• Permite que el usuario guarde los detalles de su tarjeta de crédito.

• Coloca el campo de texto para introducir cupones o descuentos en el lugar adecuado.

• Facilita el proceso de canje de una tarjeta regalo, y explica claramente cómo funciona para evitar errores.

• Informa del saldo que queda en la tarjeta regalo.

• Simplifica los códigos de los vales o tarjetas regalo.

Confirmar el pedido

Es un momento crítico de la experiencia global del cliente con el ecommerce. La página de resumen tiene que contener todos los detalles del pedido y debe permitir al usuario modificar cualquiera de ellos.

Por supuesto se necesita informar al usuario del momento en el qué confirma su compra. Además de ofrecer la posibilidad de cancelarlo cuando se quiera.

Una vez se haya confirmado el pedido, pasamos al ticket de compra, que debe incluir unos patrones obligatorios:

• Agradecimiento.

• Número de pedido.

• Información para el seguimiento.

• Versión imprimible.

• Botón seguir comprando.

• Botón logout.

Conclusión

Y hasta aquí llega la guía de UX para ecommerce. Hemos visto en detalle todos los elementos que conforman un comercio electrónico y cómo mejorar la experiencia de usuario en todos ellos. 

Pero el UX no termina aquí, revisa cualquier de nuestras guías sobre UX Writing o Lean UX para seguir aprendiendo y optimizando tu proyecto.  Si tienes alguna pregunta, no dudes en dejar tu comentario, estaremos encantados de ayudarte en tu proyecto.

La entrada UX para ecommerce: guía para mejorar tu tienda online se publicó primero en Focux.

En este post entenderemos qué es lo que exactamente nos llama la atención de un diseño, porque lo hace y cómo ese proceso influye en nuestra mente. ¡Allá vamos! 

¿Qué es la Teoría de la Gestalt? 

En primer lugar hemos de saber que el término Gestalt procede del alemán y significa forma, figura o patrón unificado. Por tanto, la teoría o psicología de la Gestalt surge en este mismo país, en Alemania, específicamente en Berlín. Es en 1920 cuando se inicia este movimiento que pretendía encontrar un sentido a la manera en la que nuestra mente humana organiza la percepción como un todo. Así se deja a un lado la individualidad de los elementos. 

A raíz de esta corriente mediante la que surgen los principios de Gestalt que veremos más adelante, se estudia cómo la mente configura las imágenes que percibe. Es a través de la memoria y del trabajo de los canales sensoriales. Así, nuestro cerebro simplifica lo que capta y lo organiza en imágenes complejas 

Por ejemplo, cuando percibimos el rostro de una persona conocida, damos sentido a sus rasgos o elementos faciales de forma conjunta. Percibimos todo ello como un todo completo que configura una sóla imagen en nuestro cerebro. Exactamente esto es lo que hace la teoría de la Gestalt. 

Podemos resumir todo ello en la frase que enuncia que ‘el todo es mayor que la suma de las partes’.

Te explicamos los Principios de Gestalt 

A medida que han ido pasando los años se ha ido consolidando la lista de principios que determinan cómo actúa lo que percibimos visualmente y las herramientas para ello. Es así que los diseñadores utilizan cada uno de ellos para intentar generar un mayor impacto en el usuario con sus diseños. 

Los principios que te voy a enseñar son una combinación de aquellos que propuso Wertheimer en 1923 y los de Stephen Palmer en 1999. Así mismo se incluyen propuestas de otros teóricos contemporáneos de la Gestalt. Todos y cada uno de estos ítems van a servir para mejorar la usabilidad y funcionalidad de nuestros diseños y hacerlos más atractivos. 

¡Te invito a conocerlos! 

SEMEJANZA O SIMILITUD 

Este primer principio nos indica que percibimos como mismo grupo aquellos elementos que son semejantes entre sí. Explica cómo la mente humana agrupa visualmente elementos que son similares, independientemente de su proximidad. Esta agrupación se puede dar mediante tamaño, colores, texturas, formas y orientaciones. 

Si lo aplicamos al diseño UX, podemos usar el principio de similitud para clarificar al usuario aquellos elementos dentro de nuestra interfaz que son iguales y que cumplen la misma función. El hecho de que una interfaz se componga por elementos similares va a hacer que el usuario lo perciba con coherencia y equilibrio. 

Podemos decir entonces que el principio de semejanza nos permite además generar énfasis sobre un elemento concreto. 

FIGURA Y FONDO

Intenta dar una explicación sobre qué elemento de nuestro diseño se va a percibir como una figura y cuál como el fondo. Hablamos de figura para referirnos al elemento en el que centramos la mirada y de fondo para referirnos a lo que hay detrás de esta. 
A raíz de este principio observamos la manera en la que el cerebro humano aprovecha el espacio negativo. En este punto hemos de ser conscientes de que nuestra mente no es capaz de interpretar un objeto como figura y como fondo a la vez. Dicho principio se puede aprovechar para hacer numerosos trucos visuales que pueden dar a nuestro proyecto digital un aire diferente.

PROXIMIDAD 

Dicho principio habla de la proximidad que tienen los elementos entre sí. Afirma que si estos están muy cerca, tendemos a percibirlos como un mismo grupo. También ocurre en el caso opuesto, si ponemos mucho espacio entre elementos, nuestro cerebro los percibirá como entes separados. 

Es cierto que para que nuestra mente una estos elementos, además de la proximidad, suelen tener otras características comunes como pueden ser el color, la textura, la forma o el tamaño.

DIRECCIÓN COMÚN

Esta ley afirma que aquellos elementos que se orientan en la misma dirección o flujo, se perciben como parte de un mismo grupo. El principio de dirección común se aplica con éxito a animaciones tanto en 2D como 3D. En esos casos, las figuras se mueven al mismo tiempo y consiguen centrar así nuestra atención. 

En el diseño UX no podemos pasar el principio por alto ya que si lo aplicamos con precisión podemos generar estímulos importantes en la mente del usuario. Es además una forma original de crear diseños innovadores. Se aplica en el diseño moderno por tanto para generar nuevas impresiones. 

SIMETRÍA

El principio de simetría y orden también se conoce como pragnanz. Se trata de una palabra de origen alemán que significa ‘buena figura’. Se pretende demostrar como aquellos elementos que son simétricos se perciben como una sóla figura o cómo miembros de un mismo grupo. 

Del mismo modo afirma que los elementos que se encuentran en orden van a transmitir una sintonía y equilibrio que harán que el usuario los perciba en unidad. En el ámbito del diseño se ha demostrado que la simetría favorece la armonía del usuario con la interfaz. Por lo tanto va a favorecer la usabilidad de nuestro producto, en este caso de nuestra página web.

CONTINUIDAD

La ley de la continuidad afirma que la percepción visual humana tiende a seguir un camino lineal en función de cómo están agrupados. Se crea así una única percepción cuando los elementos que vemos están alineados. Cuanto más fluido sea el segmento, más tendemos a verlo como una figura unificada. 

Este principio puede ser una herramienta de mucho valor a la hora de guiar la mirada del usuario en la dirección que nos interese. Este va a tender a seguir el camino más sencillo uniendo líneas naturales aunque realmente no estén. Un buen ejemplo de ello serían los deslizadores puestos de manera horizontal. 

CIERRE

El principio de Gestalt que hace referencia al cierre nos dice que cuando los elementos forman parte de una figura cerrada, los percibimos dentro del mismo grupo. Lanza la idea de que el cerebro humano completa las partes de un diseño que faltan para crear una imagen completa. Existen ejemplos que tradicionalmente nos dan la imagen visual de este principio como puede ser el logo de FedEx.

Si queremos aplicarlo al trabajo de diseño UX o diseño de interfaz podemos recurrir a el momento en el que se muestra parcialmente una imagen o elemento y desaparece de la pantalla para mostrar al usuario que puede deslizar hacia la izquierda o hacia la derecha para completarla. 

Otras ideas clave de los Principios de Gestalt

Ahora que ya sabes cuáles son los Principios de Gestalt y sus aplicaciones, te queremos enseñar otras ideas clave a raíz de esta teoría que puedes utilizar también para tus diseños. 

En primer lugar te hablaremos de la idea de la aparición. Esta surge en el momento en el que percibimos e interpretamos un objeto basándonos en información que teníamos previamente. Se aplica generalmente a la hora de diseñar logos. 

En este ejemplo podemos ver que percibimos el objeto de forma total como figura completa mucho antes que las formas individuales ya que se trata de una silueta que conocíamos previamente. 

Pasamos a mencionar la cosificación. Nos permite reconocer objetivos incluso cuando están incompletos, cuándo faltan partes en ellos. En este caso una vez más nuestro cerebro hace que la percepción visual se complete con imágenes que ya están en nuestra memoria y que nos permiten llenar vacíos. 

En este ejemplo se puede observar cómo somos capaces de percibir figuras geométricas aunque no estén formadas del todo.

Posteriormente encontramos la idea de la multiestabilidad. Esta se basa en el modo en el que interpretamos objetos que son ambiguos o que se componen por varios conceptos. En estos casos nuestro cerebro se encarga de buscar una certeza. 

Entre los ejemplos más conocidos encontramos una famosa ilustración desarrollada por Edgar Rubin. El psicólogo danes formó esta imagen en la que se muestran dos formas, un rostro y un jarrón. Tu percepción visual va a identificar en primer momento una de las dos figuras, y tras analizarla podrás percibir sin problema ambas.

Y por último debemos mencionar la invariabilidad. Se basa en la capacidad que tiene el ser humano de reconocer elementos sea cual sea su posición, su escala o rotación. El cerebro puede percibir objetos desde diferentes perspectivas sin importar el hecho de que tengan diferente apariencia.

Conclusión de los Principios de Gestalt

¿Estás listo para aplicar a tus diseños estos principios? Ya has podido comprobar que son realmente útiles si tienes el objetivo de diferenciarte y crear un gran impacto en los consumidores de tu producto digital. 

Aprender a aplicar estos principios pueden favorecer la experiencia que el usuario tenga dentro de tu página web. Cómo ya te hemos contado en otros posts, esto se traducirá en un aumento de las ventas y por tanto de tus beneficios. 

Un diseño dinámico y diferente que sea capaz de captar la percepción del usuario hará que aumente el tiempo de permanencia incluso si es la primera vez que visita la web. Incorporar estos principios es relativamente fácil y puedes probar con los diseños que te resulten más exitosos. 

Nos encantaría que nos dejásteis en los comentarios nuevas ideas para generar imágenes sorprendentes aplicando los Principios de Gestalt. ¡Te leemos!

La entrada Principios de Gestalt | Qué son y cómo se aplican al diseño se publicó primero en Focux.

Esta metodología UX se ha convertido recientemente en una importante herramienta. Las empresas han comenzado a utilizar el Design Thinking para innovar y crear productos de mayor valor. Hoy te contamos cómo puedes aplicarlo tú y tener éxito. ¡Comenzamos!

¿Qué es Design Thinking? Conoce la historia del concepto

¿Qué es exactamente el Design Thinking? Hablamos de una metodología de trabajo diseñada para facilitar la resolución de problemas complejos. Pretende dar solución a problemas reales de los usuarios orientándose a la acción. Se utiliza por tanto para atajar problemas de diseño y desarrollo de productos y servicios de cualquier sector.

El término Design Thinking no es algo reciente. En 1959, John E.Arnold comenzó a utilizarlo en el ámbito de la ingeniería. No sería hasta años más tarde, concretamente en 1973, cuando Robert McKim lo introdujo en uno de sus libros. Por último, se trasladó hasta la Universidad de Stanford, en los Estados Unidos. 

Sin embargo, donde tuvo una importancia crucial fue en el año 1991. En ese momento, el concepto Design Thinking fue utilizado por David M.Kelley, fundador de la compañía IDEO. Dicha empresa se encargaría de ir trabajando el concepto poco a poco. A partir de ese momento, la metodología de la que te hablamos hoy ha tenido un éxito imparable.

Su nombre se traduce por ‘la forma en la que piensan los diseñadores’. Es por ello que usa la sensibilidad del diseñador y se centra tanto en la imaginación como en la lógica. Dicha metodología introduce equipos muy motivados que ponen al ser humano como centro de su proceso. Todo ello permite construir ideas que se basan en las emociones de las personas.

¿Para qué sirve la metodología Design Thinking? 

Lo que realmente ha hecho popular este método de trabajo es el hecho de que pueda adaptarse prácticamente a cualquier sector. No sólo se emplea en el ámbito tecnológico. Son muchas las empresas de todo tipo que a día de hoy lo implementan en sus sistemas de producción. 

Hay varios puntos a través de los que podemos explicarte para qué sirve el Design Thinking. ¡Te contamos cuáles son!

• Nos permite resolver problemas de una manera basada en la creatividad y la innovación. Podemos crear ideas que nunca antes se habían implementado utilizando para ello el pensamiento de usuario. 

• Ayuda a conocer la realidad a la que nos enfrentamos en el mercado. Nos ponemos en la piel del consumidor y así logramos entender sus necesidades a resolver. 

• Establece un método de trabajo rápido y exigente. No podemos fijar plazos muy largos ya que nuestro objetivo es salir al mercado en primera posición. Es por eso que de manera dinámica debemos crear soluciones con utilidad. 

• Convierte el trabajo en equipo en camino al éxito. Para usar el Design Thinking necesitamos diferentes perfiles profesionales. Todos ellos se unen para encontrar una solución aportando visiones únicas y necesarias. 

Fases principales del Design Thinking

Existen diferentes factores que pueden influir en los pasos a seguir en este método. El estilo usado por el propio diseñador o el objetivo de nuestro producto son algunos de ellos. De hecho, hoy en día podemos encontrar diferentes variantes de Design Thinking. 

Sin embargo, todos los tipos que han adoptado la metodología se componen por 5 fases de manera principal. Estas son: 

1. Empatizar: Comprender las necesidades, las características y los problemas de los usuarios es crucial. Esto nos permite hacernos con un conocimiento necesario para hacer propias sus motivaciones. No sólo debemos implicarnos en la solución del problema sino también en el propio entorno del mismo. Para realizar con éxito esta primera fase podemos usar técnicas como entrevistas, encuestas, focus groups o pruebas etnográficas. Si realmente hemos comprendido al usuario, obtendremos un buen resultado para nuestro producto. 

2. Definir: Vamos a poner el esfuerzo en sintetizar en conocimiento que hemos generado en la fase previa. Debemos centrarlo esta vez en el producto para generar una nueva perspectiva. Cribamos la información y nos quedamos con la que realmente aporta valor. Es así que definimos el problema y basándonos en la necesidad del usuario validamos nuestros hallazgos para comprobar que estamos en el camino correcto. Esta fase va a ser la base sobre la que desarrollaremos el enfoque que queremos dar. 

3. Idear: Es aquí donde generamos la mayor cantidad de opciones o ideas creativas. No debemos quedarnos con la primera alternativa, sino que debemos favorecer nuestro pensamiento expansivo e intentar elegir ideas que aporten soluciones visionarias. Este reto es principalmente creativo pero también es crucial para el Design Thinking. Podemos decir por tanto que es uno de los momentos más importantes del proceso. 

4. Prototipar: Consiste en hacer materiales las ideas que hemos creado. Cuando hablamos de prototipo hablamos de dibujo, modelo, boceto. Es la manera tanto de definir como de transmitir el concepto de forma dinámica. En esta etapa visualizamos del todo las posibles soluciones a nuestro alcance. Justo en este punto ponemos de manifiesto aquello que debemos mejorar para obtener con éxito un buen resultado final. Hemos de tener claro que el prototipo no es la solución definitiva, sino un paso intermedio hacia ella. 
5. Probar: Es una fase empírica que pretende validar la solución escogida. Nos ayuda a identificar mejores, fallos y problemas. Es importante ya que finalmente resolverá las necesidades de nuestro público objetivo. Durante este proceso evolucionaremos la idea hasta convertirla en la solución que buscábamos.

Estas fases del proceso de Design Thinking se usan además en el diseño de interfaz. Hemos elaborado una guía para tí en la que te contamos todo lo que debes hacer para alcanzar el éxito con tu diseño. ¡No te la puedes perder! 

Elementos característicos de la metodología

La metodología que te estamos mostrando es una herramienta muy eficaz para entrar en sintonía con los consumidores. Esta se basa principalmente en 7 elementos que sustentan sus principios. Estos han sido enunciados por la Universidad de Esan, especialmente por Daniel Aguilar, uno de sus profesores. ¡Te contamos cuáles son! 

• En el fracaso está el aprendizaje. El estudio que hagamos de las ideas generadas debe concluir con una solución que sea valiosa para el producto que tenemos. 

• La importancia de prototipar. Una de las bases del Design Thinking es desarrollar los prototipos que nos van a permitir entender cómo funcionan las ideas que generamos. 

• La base es la creatividad. Cada miembro del equipo que trabaja en esta metodología puede interpretar las soluciones bajo su propio enfoque creativo.

• Nos centramos en la empatía. Esta cualidad nos lleva a entender al usuario y por tanto a encontrar soluciones que entiendan sus necesidades. 

• Pueden existir a la vez varias ideas. Este hecho es el que va a impulsar que exista un pensamiento divergente. Lo importante es que tengamos una actitud propensa a explorar opciones. 

• Optimismo por bandera. El método Design Thinking es desde su origen optimista .Es por ello que se cree que cualquier propuesta puede resolverse con éxito y cualquier problema puede ser superado. 

• Siempre se debe iterar. Es un punto realmente importante porque nos lleva a la validación final de las ideas que hemos generado en el proceso de diseño. 

¿Cómo impulsarlo en nuestro proyecto? 

Para poder obtener unos buenos resultados hacia nuestro producto debemos centrarnos, como ya sabes, en la creatividad. Si utilizamos esta perspectiva, es importante que transmitamos al equipo una buena dosis de motivación. El líder o líderes del proyecto van a tener funciones cruciales a la hora de que el equipo sea capaz de generar nuevas ideas. Pueden hacerlo real siguiendo estos pasos.

En primer lugar debemos transmitir a todo el equipo una visión unitaria. Esto se hace con el fin de que todos puedan tener una base común sobre la que trabajar. Los objetivos finales del proyecto estarán claros y desde todos los perfiles se intentará conseguir lo mismo. 

Posteriormente se debe valorar la importancia de inspirar al equipo. La metodología Design Thinking busca expandir las ideas en todas las direcciones posibles, lo cual no es una tarea sencilla. Supone asumir un desafío que tendrá como meta solucionar los problemas según van surgiendo. 

Finalmente, se debe tener en cuenta que la innovación y la creatividad son los pilares sobre los que nos asentamos. Es por ello que te queremos dar algunas técnicas para fomentar estas aptitudes. Destacamos el método SCAMPER. 

Sus siglas hacen referencia a las palabras sustituye, combina, adapta, modifica, pon en diferentes usos, elimina y reduce. Aplicando estos pasos podemos descubrir funcionalidades para nuestro producto que se traducen en nuevos objetivos. 
Así mismo podemos usar otras técnicas como los mapas mentales o el Costumer Journey. ¿Te gustaría que te contáramos en un post las mejores técnicas creativas? Puedes dejárnoslo en los comentarios.

Conclusiones del Design Thinking

Cómo habrás podido comprobar a lo largo del post, la metodología Design Thinking es realmente efectiva a la hora de generar ideas creativas. Centrarse en el usuario y en sus problemas es lo que llevará al éxito a nuestro producto. 

Este método no sólo cuenta con un perfil polivalente para cualquier sector. Además tiene un increíble potencial transformador ya que nos ayuda en las fases en las que nos cuestionamos la utilidad de lo que creamos. 

Así mismo, con este proceso puedes trabajar y potenciar otros conceptos con más profundidad. Estos pueden ser la inteligencia emocional, la motivación, el liderazgo o la gestión de equipos. Viaja por todas las fases del Design Thinking y descubre una manera nueva de conseguir retos. 

Si quieres repasar todos estos conceptos y descubrir los mejores ejemplos de Design Thinking, no te pierdas nuestro vídeo en YouTube.

Hasta aquí llega el post de hoy. Esperamos que te haya sido útil y hayas disfrutado aprendiendo con Focux. Visita nuestro blog para aprender acerca del mundo digital y todos sus entresijos. ¡Volvemos pronto!

La entrada Design Thinking | Qué es y cómo se utiliza se publicó primero en Focux.

Antes de nada, queremos recordarte la procedencia del término UI. Procede del concepto User Interface, que se traduce en Interfaz del Usuario. Este área es el que se va a encargar de guiar a los usuarios durante su navegación web y de que este tome decisiones de manera natural.

¿Suena interesante, verdad? Pues en esta guía vamos a explicarte todo lo que necesitas saber sobre el diseño de interfaz. ¡Allá vamos!

¿Cuál es el papel del diseñador de interfaz? 

En el seno del User Experience existen numerosas áreas de especialidad y una de ellas es la del diseñador de interfaz. Este será el encargado de resolver o construir de manera gráfica la interfaz mediante la que el usuario interactúa con el producto. 

Es en este punto en el que debemos tener en cuenta que el proceso de experiencia de usuario es siempre cíclico, es decir, se repite hasta encontrar su mejor versión. Por ello, el papel del diseñador de interfaz debe basarse en el concepto user centric, que pone al usuario como centro de todo. Así, el diseño de interfaces tendrá como pilar el hecho de comprender las necesidades y problemas del consumidor y adaptar el producto a ellas. 

Una de las metodologías más comunes a seguir por el diseñador de interfaz es conocida como design thinking. ¡Te explicamos en qué consiste!

¿Qué es el Design Thinking? 

Se trata de una metodología UI que facilita el diseño y desarrollo de productos, en nuestro caso digitales, y pretende resolver todos sus problemas. A la hora de crear un producto exitoso, se compone de 5 fases que conforman el camino hasta el objetivo.

Empatizar: Consiste en conocer las necesidades y problemas del usuario y adaptarnos a ellos para resolverlos. Para ello utilizaremos métodos de investigación que te explicaremos a lo largo de esta guía. 

Definir: Una vez que somos conscientes de las necesidades de nuestro target, definiremos el problema y el alcance del proyecto. Para que esta tarea sea exitosa debemos estudiar minuciosamente las necesidades de nuestros usuarios. 

Idear: En esta etapa, a partir de las necesidades de los usuarios sacaremos ideas como solución al proyecto. Este reto debe ser creativo y debemos poner a disposición todas las herramientas necesarias para ello. 

Prototipar: A partir de la idea seleccionada, en papel o en digital elaboramos una maqueta o prototipo de lo que va a ser la solución. Más tarde la validaremos y comprobaremos si realmente resuelve las necesidades del público objetivo. 

Probar: Finalmente probaremos el prototipo elegido con los usuarios finales.

Los Principios de Gestalt para el diseño de interfaces

Existen una serie de pautas de diseño a seguir con la finalidad de que los productos digitales sean intuitivos y sencillos para los usuarios que los consumen. Entre dichas pautas encontramos lo que se conoce como Principios de Gestalt. Conocerlos nos va a ayudar a captar la atención de los usuarios mejorando la funcionalidad de nuestro diseño y potenciando la creatividad. 

Es una corriente psicológica que nació en Alemania a inicios del siglo XX  y explica cómo el ser humano percibe su entorno. La propia palabra Gestalt significa patrón o forma y con su teoría se intentó demostrar cómo el cerebro simplifica y organiza las figuras complejas para poder entender mejor el mundo.

¡Vamos allá con los Principios de Gestalt!

Principio de semejanza: Explica que como humanos tenemos tendencia a unir elementos aunque no estén próximos entre sí en el caso de que encontremos alguna relación entre ellos. Esta similitud puede ser en cuanto a forma, textura, tamaño o color entre otras características. 

Principio de proximidad: Nos cuenta que tendemos a ver como un sólo grupo aquellos elementos que se alineen de forma ordenada en un mismo espacio. 

Principio de continuidad: Enuncia que los seres humanos tendemos a agrupar elementos que se disponen en línea o en curva siempre y cuando lo hagan de manera ordenada. 

Principio de cierre: Se trata de que cuándo vemos una imagen incompleta, nuestro cerebro la rellena de manera automática con el concepto iconográfico que tenga de ella. 

Relación de figura-fondo: Habla de la tendencia del ojo humano a percibir el objeto o elemento principal sin prestar atención al fondo o a aquello que le rodea. Esto ocurre porque la mente humana no es capaz de interpretar un elemento como figura y fondo al mismo tiempo. 

Principio de simetría: Explica que los elementos que cuentan con cierta simetría y orden se perciben también como un sólo grupo. 

Principio de dirección común: La última de las leyes teoriza que se perciben como parte de un grupo aquellos elementos que forman un patrón en la misma dirección. 

Además de estos, existen una serie de principios de usabilidad enunciados por Jacob Nielsen, que puedes seguir en el proceso de diseño de interfaz. Aquí te dejamos uno de nuestros post en el que te los explicamos con detalle.

Investigación inicial para el diseño de interfaz 

En todo proyecto existen una serie de pasos iniciales que se deben seguir para sacarlo adelante. En el caso del diseño de interfaz, va a ser necesario llevar a cabo una investigación inicial mediante la que obtendremos datos necesarios para llegar al éxito. Desde Focux queremos explicarte cuáles son estos pasos y cómo sacar el máximo partido de cada uno de ellos.

Entender el problema de UI que queremos solucionar 

En primer lugar debemos identificar y comprender el problema respecto al diseño que queremos solucionar. Para ello es importante conocer las diferentes técnicas eficaces que existen. 

La primera y seguramente la más conocida es la de las 5W. Consiste en preguntarse factores cruciales sobre el proyecto que responda a dónde, cómo, cuándo, quién y por qué. Indagando en estas respuestas podremos obtener datos especialmente valiosos sobre los problemas que hayan surgido. 

Otra técnica es la de los 5 why, que consiste en preguntarse el porqué de cada cuestión sacando diferentes respuestas hasta 5 veces.

Una vez que hemos encontrado la técnica correcta para nuestro caso, podemos plantear el problema real identificando cuál es el estado actual del mismo y cuál es la meta que queremos conseguir.

 Conocer los tipos de investigación 

Ser consciente de los métodos de investigación que existen para aplicar al diseño UI es crucial. Nos servirá para conocer mejor a los usuarios, obtener información y así poder probar nuestra hipótesis. 

A continuación te mostramos alguno de los tipos que puedes emplear en función de si lo quieres hacer de modo formal o informal: 

Formal: Puedes utilizar el A/B testing, Analytics, los estudios etnográficos, las pruebas con usuarios, entrevistas y encuestas. 

Informal: Entre los métodos informales destacan las pruebas remotas, el Guerrilla Testing o los bocetos y mockups. 

La información que obtenemos a raíz de la investigación puede ser de dos clases.La primera es la cuantitativa, mediante la que podemos responder a preguntas de las que obtendremos información numérica. En segundo lugar, la cualitativa, que nos permite conocer observaciones, comentarios y sensaciones de los usuarios al usar el producto. Así podemos obtener información empírica. 

Va a resultar básico en cualquier investigación contar con una buena base de ambos tipos de información.

¿Qué es el Benchmarking? 

Uno de los tipos de investigación más innovadores y utilizados es el Benchmarking. Esta técnica consiste en analizar y comparar diferentes sitios de competidores que tratan de resolver el mismo problema que nosotros. 

A la hora de seguir este método debemos entender ciertas cuestiones y preguntarnos, qué están haciendo los competidores,qué funciona y qué no o cuáles son las expectativas de los usuarios. Así mismo deberemos fijar cuáles son las oportunidades de negocio que todavía no se han atacado o los patrones de diseño de interfaz que se están haciendo desde dentro de la industria. 

El ámbito del benchmarking es realmente amplio y por ello pronto te contaremos en un post todo lo que deberías saber sobre este método y cómo llevarlo a la práctica.

Realizar encuestas y entrevistas fijando el user persona

Para indagar más sobre las características, intereses y problemas de nuestros usuarios podemos utilizar las encuestas y entrevistas. Ambas herramientas nos permiten obtener información cualitativa y cuantitativa de forma económica y rápida. 

Posteriormente deberíamos definir quién es nuestro user persona. Son representaciones de nuestro tipo de usuario más común que nos sirven para identificar para quién estamos haciendo el diseño de interfaz. 

En cuanto a las encuestas, debemos tener en cuenta varios puntos para su realización: 

1. Definir el objetivo que nos interesa conseguir. 
2. Saber a qué tipo de usuarios queremos llegar. 
3. Cuidar la estructura de la encuesta.

Una vez que hemos obtenido los resultados analizaremos los patrones e identificaremos definitivamente las necesidades del producto para ponerle valor. Para hacer las encuestas podemos usar plataformas como TypeForm o Google Forms. 

En el caso de las entrevistas, contamos también con una serie de recomendaciones a seguir:

1. Debemos tener un guión. 
2. Buen método de grabación.
3. Tomar notas durante la entrevista. 
4. Actitud abierta y empática con el usuario. 
5. Crear una sintonía emocional con él. 

Organización de la información y bocetos para el diseño de interfaz

Una vez que hemos realizado la investigación pertinente siguiendo estos pasos, pasaremos a organizar toda la información. Así realizaremos los primeros bocetos de nuestro proyecto de diseño de interfaz.

En Focux te contamos cuáles son los siguientes pasos que tienes que cumplimentar para que tu proyecto sea absolutamente perfecto. El éxito está garantizado.

Análisis de interfaces

Es importante que tengamos claro cuáles son los elementos de la interfaz para poder construirla de manera eficiente. En primer lugar debemos prestar atención a los elementos de navegación. En este aspecto las solapas tienen que estar definidas, los niveles de navegación establecidos y los menús y acciones claros. Esto debe ser así para que el usuario en todo momento pueda acceder a lo que busca. 

De igual manera, los formularios deben presentarse con claridad y el contenido debe seguir una jerarquía lógica y ordenada. Las tipografías y la iconografía deben tener sentido y sintonía con el resto de los elementos como pueden ser los botones o carruseles. 

Por último se debe prestar atención a los resúmenes, los accesos y salidas y al propio login. Todo ello se relaciona además con la arquitectura de la información. 

Arquitectura de la información 

Se trata de una disciplina que organiza el contenido y los conceptos de forma ordenada. Tiene el objetivo de que la interfaz sea sencilla de usar. En caso del User Experience, significa estructurar el contenido para que sea accesible e intuitivo. Para cumplir con ello utilizaremos:

1. Sistemas de organización: tamaños, secuencias y temas.
2. Esquemas de organización: alfabético, cronológico, por temáticas. 
3. Información que se incluye en la barra de información.
4. Navegación lateral en la que se pueden ver las categorías.

Wireframes 

Una vez que hemos analizado los elementos que componen una interfaz y como se debe estructurar la información, elaboramos un wireframe. Se trata de bocetos que nos ayudan a definir la jerarquía de nuestros productos. Puede hacerse tanto en formato físico como digital.

Así representaremos de forma esquemática y sencilla cuál va a ser la estructura y diseño de la interfaz. En ellos no usaremos ni colores, ni tipografías ni elementos gráficos. Nos centraremos únicamente en la funcionalidad del sitio y en la experiencia que el usuario tendrá dentro de él. 

Si obtamos por elaborarlos en formato digital podemos usar Mockflow.

Realiza Guerrilla Testing 

Cuando tengamos claro el boceto que queremos seguir de manera esquemática, podemos usar técnicas de investigación para comprobar si va a tener éxito. Uno de esos métodos es el de Guerrilla Testing. 

Se trata de una forma de investigación informal que nos ayuda a comprobar los diseños que tenemos en mente a través de un feedback rápido por parte de los usuarios. Por lo general se hace en un lugar público, en una cafetería o en la calle. Y el promedio de personas a las que preguntaremos es de 10. 

El tipo de respuesta que recibiremos es cualitativa y esta nos permite validar nuestras ideas tanto a través de un prototipo como del producto final. 

Los pasos a seguir son los siguientes: 

• Revisar los diseños y anotar lo que queremos modificar o solucionar. 
• Preparar una guía para poder dirigir la entrevista. 
• Llevar a alguien que se encargue de tomar notas. 
• Buscar usuarios potenciales para entrevistar.
• Revisar y analizar los hallazgos.
• Iterar y planear nuevos test tan pronto como haya algo para validar. 

Elabora un Moodboard

En este punto es exactamente donde vamos a definir el estilo visual que va a tener nuestro producto. El moodboard es una colección de referencias visuales tales como fotografías, tipografías, iconografías, capturas de pantalla o cualquier ilustración que pueda servir de inspiración visual para lo que vamos a diseñar. 

Siempre que estemos haciendo un moodboard es importante que nos concentremos en el user persona que tenemos para que todo esté alineado y todo haga sentido con ese usuario.

Podemos incluir paletas de colores, cuestiones de branding, iconografía, soluciones de interfaces, tipografía, diferentes tipos de visualización. Así mismo el estilo de fotografías que queremos utilizar y agregar imágenes de nuestros tipos de usuarios.

Diseño de interfaz definitivo

A la hora de elaborar el diseño definitivo de la interfaz, es importante hacerlo para varios dispositivos. Tenemos que diseñar para móvil, ordenador y tablet. Para cumplir esta premisa existen dos metodologías:

Diseño adaptativo: En esta parte hemos de seleccionar los tamaños definidos de cada pantalla y diseñar a la perfección para cada uno de ellos. Aunque son muchas las ventajas, también nos puede ocasionar problemas en SEO. Además, si el usuario tiene un dispositivo más grande de lo que hayamos diseñado pueden quedar huecos. 

Diseño responsivo: Cuando se hace la implementación el diseño es totalmente fluido y se adapta a cualquier tipo de dispositivo. Es cierto que el tiempo de carga es más lento pero nos ayuda a mejorar el SEO y la experiencia a los usuarios.

A partir de aquí emplearemos lo que se conoce como Design System, herramienta vital a la hora de diseñar una interfaz. 

¿Qué es Design System? 

Una forma sencilla de iniciar un proceso de diseño es mediante el Design System. Este sistema se basa principalmente en una librería en la que almacenamos una colección de componentes que podemos reutilizar rápidamente. Para ello incluímos su código. 

Esta guía va a conformar la esencia de nuestro producto y va a ayudar a que todo el equipo pueda trabajar bajo los mismos cánones. Además, se va a conseguir que todos los elementos de la interfaz guarden relación entre sí y se dé un sentido único al proyecto. 

De lo que trata el Design System es de conseguir que todo el producto guarde una coherencia. No es sólo el hecho, por ejemplo, de que todos los botones tengan el mismo estilo. Con este sistema queremos definir un lenguaje, un tono, un estilo común que reme siempre en la misma dirección. Este método además nos ayuda a ahorrar tiempo y a mejorar la colaboración entre los diseñadores. 

Una manera simple de establecer un Design System es mediante la herramienta Atomic Design. 

Siguiente paso: User Testing 

Una vez que tengamos uno o varios prototipos finales, recurriremos al User Testing. Se trata de una herramienta de investigación formal que nos permite probar diferentes tareas con usuarios finales. Se recomienda llevar a cabo estas pruebas con un mínimo de 5 usuarios para así obtener de media un 80% de los problemas de usabilidad de nuestra interfaz.

Con ello conseguiremos que el prototipo obtenido sea de alta fidelidad y podamos validar con él el producto. Para ello nos tendremos que basar en el diseño que hemos obtenido anteriormente. Definiremos las tareas y determinaremos los pasos de interacción de manera que nuestro prototipo pueda simular un producto final. 

Con todo ello definido, pasaremos a usar una herramienta de prototipado, como Marvel.

Sirve para conectar nuestras pantallas y poder agregar interacciones entre otros pasos del proceso. Este punto es realmente importante ya que lo que queremos probar es que todas las fases que hemos desarrollado estén correctas. Una vez hecha esta investigación analizaremos el resultado para poder desarrollar el producto final. 

Entregamos al departamento de desarrollo

Una parte crucial de nuestro rol como diseñadores de interfaz es colaborar con nuestro equipo de desarrollo. Es importante que nuestro trabajo sea entregable para que las tareas sean sencillas y fluidas entre todos los miembros. 

Con el diseño definitivo aprobado y listo para desarrollarlo, podemos seleccionar diferentes herramientas para tramitar estas entregas. Una de ellas es Zeplin. Nos permite coordinar el diseño con el equipo de desarrollo para trabajar en conjunto y que estos puedan implementar lo que hemos creado. 

La gran ventaja de este tipo de herramientas es que es una manera de contar con un repositorio visual de nuestro diseño, aunar todo en un mismo lugar y permitir que todas las personas del equipo podamos usar un mismo lenguaje. 

Seguimos haciendo pruebas 

Con el proyecto entregado al equipo de desarrollo y estando el producto en funcionamiento con usuarios reales, es importante continuar haciendo pruebas. El ámbito de las pruebas de usabilidad es realmente amplio y aguarda numerosas formas. 

En función de cómo sea tu proyecto, los problemas que hayan surgido o las necesidades de tus usuarios, deberás realizar las pruebas de usabilidad de diferentes maneras. 

El equipo de FOCUX ha elaborado una guía para ti en la que te explicamos paso a paso todo lo que deberías saber sobre las pruebas de usabilidad una vez que has terminado el diseño de interfaces. ¡No te lo puedes perder!

Con todo lo que te hemos contado habrás caído en la cuenta de que el proceso de diseño de la interfaz es complejo. Debes estar atento a todos sus pasos y profundizar en cada uno de ellos para caminar hacia el éxito. 

Esperamos que te haya sido útil la información. Puedes seguir consultando nuestros posts para aprender sobre usabilidad y mucho más. Y además, te invitamos a dejar en los comentarios tus impresiones sobre el proceso de diseño de interfaz. ¡Nos leemos pronto!

La entrada Diseño de interfaz | Guía 2022 de UI design se publicó primero en Focux.

Metodología Lean UX

Si queremos entender el concepto de Lean UX, primero tenemos que investigar los dos elementos que lo componen.

UX

El UX es el balance entre la empatía con las personas y la obsesión por el detalle cuando construimos un producto. En la experiencia influyen muchos aspectos, es por eso que debemos conocerlas e investigarlas.

• Necesidad del usuario
• Contexto sociocultural
• Contexto ambiental/temporal
• Performance

Dentro de esta experiencia, también se encuentra el Service Design, que se ocupa de canales presenciales ayudándonos a cumplir la promesa de la experiencia.

El UX y el Service Design se relacionan para desarrollar una experiencia completa consistente entre lo digital y lo físico. Por lo que el producto es algo tangible y el servicio es una relación.

Entonces podemos concluir entendiendo que el producto y el servicio están en vinculación continua para crear buenas experiencias gracias a la comunicación de las dos partes.

Lean

En el Lean UX conviven los conceptos de Lean y Agile. Estos nacen en contextos diferentes, donde Agile de manera evolutiva va heredando los principios de Lean.

En un principio, Lean nace a raíz de la metodología productiva Lean Manufacturing que inventó Toyota para su línea de producción automotriz y que cambió la manera hasta el momento de producir vehículos. Su objetivo era reducir el desperdicio.

El Lean Manufacturing aporta las siguientes ideas:

• Ciclos de producción mucho más cortos

• Comunicación en tiempo real

• Capacidad de respuesta rápida

Después Agile toma los principios Lean y los aplica al desarrollo de software. Agile enfatiza el producir software funcional y la eliminación de silos como medida de progreso en lugar del cumplimiento de hitos y planificaciones. Añade las siguientes mejoras:

• Equipos pequeños y autónomos

• Trabajo en base a sprints

• Retrospectivas

Con la aparición de empresas emergentes y startups, se creó el Lean Startup. El Lean Startup se enfoca en maximizar el aprendizaje y lanzar productos mínimos viables al mercado lo antes posible. Esta metodología incorpora estos principios para el desarrollo de negocios.

• Todo es una hipótesis

• Fallar rápido y barato

• Maximizar el aprendizaje

¿Qué es Lean UX? 

Al unir todos estos conceptos, se forja el Lean UX, que busca aprender lo antes posible las lecciones que nos permiten crear una experiencia de usuario óptima. El Lean UX también incluye una serie de mejoras para evolucionar el concepto.

• Equipos mejor alineados

• Visión y conocimiento de todos los stakeholders desde el principio

• Validación temprana del equipo correcto para el proyecto

• Valor agregado y métricas de éxito

Fases del Lean UX

El Lean UX abarca un ciclo de tres pasos que gira alrededor del producto.

• Investigar

• Probar

• Aprender

Lo primero es investigar, analizar y salir al entorno para sacar ideas y conclusiones, que nos ayuden a diseñar tareas y experimentos que poner a prueba. Con estas pruebas podemos prototipar en diferentes productos o elementos del mismo. Y si el artículo ya se ha lanzado se pueden testear las versiones del producto mínimo viable. 

Según los resultados que obtengamos, implementaremos ciertas mejoras y aprenderemos qué está funcionando y lo que no. Con esta información adquirida, se repite el proceso desde el principio hasta conseguir la mejor experiencia de usuario.

Ciclo de Vida del Producto y Servicios modernos

Para entender mejor estas tres fases del Lean UX, podemos observar los procesos de la vida de un producto y los servicios. Además nos ayuda a identificar mejor qué metodología se produce en cada fase. 

En la fase de Ideación, detectamos las necesidades y buscamos validar soluciones. Es cuando entra el Design Thinking y Lean Startup, que proporciona herramientas para empezar a detectar las necesidades del proyecto.

En la fase de Diseño se construye la experiencia. Aquí el Lean UX y Service Design nos ayuda a entender cómo empezar a hacer realidad la idea, y a cumplir las promesas fijadas en la etapa de investigación.

Y según avanza el desarrollo del producto, nos metemos en la fase de implementación. Ahora la metodología Agile entra en un proceso de mejora continuo de aprendizaje y prueba, que se repite  hasta conseguir el resultado óptimo que se estaba buscando.

Guía Lean UX

Ya conocemos el significado y la importancia del Lean UX; es hora de aprender a aplicarlo en tu producto o startup. Esta práctica está enfocada en un ejercicio de scope canvas.

El scope canvas mejora la alineación, comunicación y disposición a experimentar del equipo. Nos ayuda a entender lo que preocupa a nuestros usuarios y se centra en qué cosas estamos aprendiendo como equipo. Puedes descargarte la plantilla en su página web.

Es normal que cada persona entienda los problemas de los usuarios de manera diferente. Por eso practicando el Lean UX conseguiremos converger las diferentes ideas para alinear al equipo.

Propósito

El propósito es la misión que tiene el proyecto, lo que hace que valga la pena para vosotros. El propósito debe reflejar la misión de la organización y la motivación personal del equipo. Además de ser ambicioso y estimular las acciones del negocio.

Este propósito debe servir a la organización y a sus usuarios por igual, porque de nada sirve que nos motive a nosotros si a los clientes no les interesa. 

Es el momento de preguntarnos lo que nos interesa y reflexionar por qué hemos llegado hasta aquí. Tener como objetivo el dinero o ser el número uno funciona como idea de negocio, pero no como propósito. No funciona porque el propósito está enfocado a servir al usuario, y no los deseos propios.

Aquí tienes unos ejemplos de propósitos que están bien balanceados y le ofrecen un bien a la sociedad.

• “Que toda mujer se sienta hermosa” – Dove

• «Organizar la información del mundo» – Google

• «Que todo el mundo use coches eléctricos» – Tesla

Necesidades

Las necesidades se centran en los problemas y oportunidades insatisfechas que tenemos el potencial de atender. Estas necesidades pueden ser dolores, problemas que los usuarios reconocen y buscan solucionar, o motivadoras, beneficios u oportunidades que son atractivas para los usuarios.

Las necesidades serán continuamente actualizadas a medida que hablemos con usuarios reales y comprobemos nuestras hipótesis en los prototipos. Hay que evitar mezclar las necesidades con posibles soluciones. La clave es detectar oportunidades, descubriendo el valor agregado para los usuarios que ellos aún no visualizan.

Si le hubiera preguntado a la gente qué querían, me habrían dicho que un caballo más rápido.

Henry Ford

Esto es muy importante por que si lo sabes aplicar, impactará en la manera en que comunicaremos nuestra propuesta ante los consumidores potenciales. Y es de gran ayuda al momento de diseñar nuestra estrategia de Marketing para que sea lo suficientemente persuasiva.

Un buen ejercicio para aclarar estas necesidades es identificar potenciales usuarios de tu idea. Contacta y habla con ellos sobre lo que necesitan o lo que les gustaría. Así puedes descubrir sus necesidades y aplicarlas en el proyecto.

Acciones

Las acciones nos ayudan a materializar nuestras ideas a cosas concretas y objetivas para entender si estamos satisfaciendo las necesidades de nuestros usuarios de manera correcta. Responden a las acciones que esperamos que hagan nuestros usuarios.

Las acciones son concretas, objetivas y observables. Buscamos las acciones cruciales que logran tracción en el proyecto. Si no son suficientemente concretas, debemos utilizarlas para después poderlas medir, ya que nos permiten entender qué queremos que hagan los usuarios.

Las acciones surgen como respuesta a las necesidades, porque un usuario realiza una acción para satisfacer su necesidad de otra cosa. Unos ejemplos pueden ser:

• Compartir contenido con amigos y familiares.

• Comprar un producto.

• Pagar sin usar la tarjeta.

Objetivos

Los objetivos representan lo que queremos obtener como negocio, sean monetarios o funcionales. A corto plazo pensamos en objetivos que se pueden medir fácilmente, que sean cuantificables. Unos ejemplos serían:

• Aumentar conversiones de e-commerce.

• Reducir los tiempos de carga.

• Mejorar la atención al cliente.

Si pensamos a largo plazo, los objetivos son más difíciles de medir pero podemos observarlos. Cuando observamos los objetivos a largo plazo, estos empiezan a tener mayor relación con el propósito de nuestro proyecto. Por ejemplo:

• Ser el líder del sector.

• Mejorar el engagement con los clientes.

• Establecer una estructura digital de nuestra tienda física.

Las métricas nos ayudan a medir los objetivos a corto plazo y a valorar si obtenemos los retornos esperados.

Métricas

Las métricas son los indicadores medibles que nos indican si las necesidades, propósitos y objetivos tienen sentido. Tenemos que establecer qué indicadores usaremos para saber qué objetivos y acciones se cumplen.

Podemos usar métricas estándar del sector o crear nuestras propias métricas personalizadas con nuestro proyecto. Las métricas pueden ser cualitativas, que miden satisfacción, lealtad; o cualitativa, que miden ingresos o descargas.

Las métricas deben estar directamente relacionadas con el proyecto, porque sirve como medida de éxito para saber si el proyecto merece la pena.

Algunos ejemplos de métricas:

• Tiempo que se tarda en completar  la tarea.

• El NPS, que mide la lealtad de los clientes en base a las recomendaciones.

• Número de descargas del software.

• La calificación de los usuarios.

Customer Journey Map

El Customer Journey puede ser una alternativa al scope canvas, pero sobre todo lo complementa para validar las necesidades del usuario.

Un Customer Journey Map interpreta visualmente la relación de una persona con tu producto, identificando oportunidades de mejora de la experiencia. Podemos a la vez interpretar la realidad de nuestro usuario y diseñar una realidad nueva, para planificar y construir el viaje ideal de los clientes.

Para realizar un customer journey debes conocer las tres fases:

1. Construye la línea de tiempo que describe las etapas por las que pasa el cliente antes, durante y después de usar el producto.

2. Atribuye un sentimiento a cada etapa en la línea de tiempo como felicidad, decepción o sorpresa. Es aconsejable utilizar emojis para describir las sensaciones con la experiencia.

3. Finalmente narra la experiencia a otra persona para valorar si el trabajo recogido gráficamente en el Customer Journey Map se entiende y funciona.

Continuidad

La idea al finalizar el proyecto de Lean UX es darle continuidad, que su presencia sea constante a lo largo del desarrollo del producto o negocio.

A medida que avanza el proyecto las ideas se van modificando y consolidando en el canvas hasta refinar el modelo y agrupar los conceptos similares. Es recomendable digitalizar el trabajo en cada etapa para compartirlo y registrar una captura de cada parte del proceso.

Habitualmente se tiene que actualizar con la nueva información y aprendizaje, así refleja en cada momento los cambios que ha sufrido durante la evolución. Mantener visible este documento es muy útil para hacer onboarding con los nuevos miembros integrantes del equipo y que fácilmente comprendan el estado actual del proyecto.

Siempre que sea posible es recomendable hacer estas sesiones presencialmente, pero si trabajas en remoto con cualquier herramienta como miro puedes llevar a cabo la presentación.

Conclusión

Ya hemos visto que implementar el método Lean UX nos reporta enormes beneficios. No solo mejora la flexibilidad y agiliza la producción del producto, si no que también el equipo aprende los deseos del usuario y forman parte del proyecto.

Si quieres ponerlo en práctica, sigue paso a paso nuestra guía para hacer realidad tu método Lean UX. Cualquier duda o cuestión que te surja, déjala en comentarios y estaremos encantados de ayudarte. Para seguir aprendiendo sobre la experiencia de usuario, no te pierdas nuestro artículo sobre Leyes UX/UI para startups.

La entrada Lean UX | Guía 2022 + Ejemplos se publicó primero en Focux.

Las leyes están enfocadas a ayudar a las startups a entender cómo sus usuarios interactúan con el producto. También aprenderás a hacer las preguntas adecuadas a tu equipo para mejorar la interfaz y la UX.

Las 5 leyes UX UI

Leyes UX UI – Ley de Fitts

La ley de Fitts establece cómo los humanos señalan las cosas y objetos en el mundo. En otras palabras trata sobre qué tan fácil es apuntar un elemento. La fórmula de la Ley de Fitts es la siguiente:

Esta ecuación la inventó Paul Fitss, un investigador de la Fuerza Aérea de los Estados Unidos. Fitts estaba tratando de averiguar cómo diseñar las cabina de los aviones para que fueran más eficientes. Entonces realizó un experimento donde tenías que arrastrar un bolígrafo desde una placa metálica verde a una roja, cambiando el tiempo, la distancia o la medida del objetivo.

Así es como se le ocurrió que hay una relación entre la anchura de la distancia del objetivo, la distancia entre los dos elementos y el tiempo. En la fórmula encontramos estas variables.

Lo que deducimos aquí es que si quiero que el tiempo sea lo más corto posible, miramos la relación directa e inversa. La relación directa es la distancia, y la inversa es la anchura, porque cuanto mejor sea el tiempo que quiera alcanzar, menor debe ser la distancia, y mayor debe ser la anchura del objetivo que quiero ahí.

Volviendo a la fórmula, tenemos que fijarnos en un elemento esencial, el log del centro. Nos ayuda a averiguar matices para aprender a simplificar el diseño de la interfaz. El logaritmo es una forma natural de entender las matemáticas. Aplicándolo a la Ley de Fitts, nos revela que si algo es pequeño y lo hacemos un poco más grande, entonces creamos un gran cambio. Pero si hay dos elementos demasiado grandes, en términos de comprensión logarítmica, es mucho menor la diferencia.

Es decir, que si tus objetos en la interfaz ya son grandes, no tiene sentido aumentar su tamaño. Deberías centrarte en los elementos más pequeños que son los que marcan la diferencia.

Ahora que comprendemos mejor la fórmula y lo que nos quiere explicar, vamos a resumir los aspectos principales que nos brinda la Ley de Fitts.

• La distancia y el tamaño de un elemento (por ejemplo, un botón), hacen que sea más fácil o  difícil hacer clic en él.

• Los bordes son los puntos más fáciles de alcanzar en una interfaz. Según la fórmula de la Ley de Fitts, el tiempo tiende a cero en esta situación.

• La dificultad de alcanzar un botón depende de varios elementos, como la dirección de movimiento del cursor y el tamaño del objeto en función de ese desplazamiento.

• El clic derecho es muy importante porque la lista de opciones se revela justo donde el usuario ha hecho clic. Si estuviera alejado, no estaría tan implantado en la configuración básica.

Leyes UX UI – Ley de Steering

La Ley de Steering nos ayuda a crear menús más fáciles de manejar. Una de estas leyes UX fue descubierta por Steering y por Accot-Zhai. Realmente se trata de una derivación de la Ley de Fitts, y describe cómo los humanos se mueven en un túnel.

Estudia cómo alguien se mueve desde un punto de partida hasta un punto de parada, independientemente de la forma que tenga el camino. De esto dedujeron que la rapidez con la que puedes moverte por el túnel solo depende de la longitud y el ancho del túnel.

Observando la ecuación, vemos que la longitud del túnel tiene relación directa con el tiempo. Así que, cuanto menor sea la longitud del túnel, menor será el tiempo de recorrido. Además que el ancho del túnel determina lo rápido que es, por lo que cuanto mayor sea el ancho, menor será el tiempo.

Ahora si trasladamos esta información a la experiencia de usuario, podemos deducir una serie de recomendaciones que mejoran nuestra interfaz.

• Haz que los menús desplegables sean lo más cortos posible.

• Los menús con pocas opciones minimizan el tiempo y la dificultad de navegar a través del túnel estrecho. También reducen el tiempo de búsqueda visual a través de un mayor número de posibilidades.

• Evita los menús jerárquicos, especialmente los que tienen más de dos niveles de profundidad.

• Los menús jerárquicos son una interfaz difícil de diseñar correctamente debido a las restricciones de la Ley de Steering.

Leyes UX/UI – Ley de Hick

La Ley de Hick nos dice que se requiere menos tiempo para identificar objetos entre menos cantidad de opciones que existan. Hick ideó esta ley realizando un experimentó con lámparas. En el experimento pedía identificar qué lámpara estaba encendida entre cuatro opciones, y de esta manera iba cambiando el número de posibilidades.

Al final elaboró esta fórmula describiendo que la búsqueda binaria es una forma intuitiva de comprender y dividir los problemas para decidir qué es importante. Entonces lo que vemos es que el número de opciones, dependiendo de la configuración, incrementa el tiempo relativo de una manera específica.

Si lo enfocamos al mundo del diseño de interfaz, actúa principalmente en optimizar la atención de las notificaciones. 

• Optimiza la atención del usuario en las diferentes opciones.

• Ayuda a los usuarios a saber qué tiene que hacer a continuación.

• Reduce el tiempo en la toma de decisiones.

• No se utiliza para tomar decisiones complejas, sino en situaciones de fácil solución.

Leyes UX UI – Ley de Miller

La Ley de Miller trata sobre cuántos elementos puede gestionar nuestra memoria de forma sencilla. A Miller se le ocurrió que la cantidad ideal es siete, más o menos dos fragmentos. Es decir que la cantidad de fragmentos que los humanos pueden procesar de forma óptima es entre cinco y nueve.

Claro que tenemos que saber exactamente a qué se refería con esos fragmentos. Cuando las personas identificamos muchas cosas diferentes, las agrupamos en patrones. Estos patrones son los que agrupamos como fragmentos  y los procesamos como información.

En 1970, se descubrió el llamado bucle fonológico. Este bucle explica que la cantidad de sonido que podemos mantener en nuestra cabeza en un tiempo corto, es de dos segundos. Entonces el fragmento representa la información que podemos almacenar en esos dos segundos.

De ahí que Miller explique la variabilidad de los valores, y el por qué del siete más o menos dos. Por lo que si aplicamos esta ley, podemos sacar varias conclusiones.

• Los siete elementos de promedio (máximo 9 y mínimo 5) hay que conectarlos y crear patrones sencillos.

• La idea es diseñar interfaces de usuario en fragmentos o grupos de información reducidos.

• Esto permite que nuestra memoria analice y memorice mejor la información que mostramos.

Ley UX UI – Ley de la Práctica

La Ley de la práctica indica que el tiempo necesario para realizar una acción depende del número de intentos, y que cada vez que practicas algo, te vuelves más rápido.

Como diseñador de interfaz de usuario, no deberías pensar en crear algo completamente nuevo, porque lo que vas a lograr es que el usuario empiece de cero. Si los usuarios han utilizado patrones anteriormente, como ya lo han repetido muchas veces, podrán navegar mucho más rápido cuando lleguen a tu interfaz.

Otro elemento que revisa esta ley es la complejidad, porque los usuarios pueden encontrarse en diferentes niveles cuando usan la interfaz. Por lo que la interfaz debe cambiar dependiendo si los usuarios son nuevos o experimentados.

De nuevo vamos a revisar cuales son las principales recomendaciones que podemos sacar de esta ley.

• Es imprescindible colocar guías en la interfaz.

• Situar el centro de ayuda en un lugar ágil y rápido.

• Simplificar las acciones a través de iconos sencillos para el usuario.

• Establecer procesos fáciles de recordar.

Conclusión

Después de haber revisado todas las leyes, ya sabes todo lo que no puedes olvidar al iniciar tu startup o diseñar el software.

En resumen tienes que hacer más grande las zonas donde quieres que el usuario haga clic. Hacer el camino lo más amplio posible. Utilizar la menor cantidad de elementos posible. Y fragmentar los elementos en grupos y optimizarlos para su repetición.

Si te ha quedado alguna duda o tienes algo que decirnos, deja tu consulta abajo en los comentarios. No te pierdas este artículo sobre UX Writing para seguir aprendiendo como mejorar tu UX.

La entrada Leyes UX / UI para Startups se publicó primero en Focux.

¿Qué es UX Writing?

UX Writing es el diseño de las palabras que nos guían cuando interactuamos con páginas web, aplicaciones, software y otros productos y servicios digitales. Se trata de crear una realidad por medio del lenguaje, que permita navegar al usuario por tu plataforma.

El objetivo principal es ayudar a los usuarios a lograr sus metas a través del lenguaje.

¿Por qué es importante el UX Writing?

El texto es lo que da valor a nuestro servicio digital y lo que nos asegura que la interacción no sea frustrante. Cuando un usuario no entiende lo que le estamos pidiendo, sencillamente se va y abandona el sitio web. Son visitas y clientes desilusionados que difícilmente van a querer volver a vivir esa experiencia.

Por eso es tan importante trabajar el texto de nuestra interfaz. Aprender a escribir estos textos, es una habilidad esencial en tu experiencia de usuario.

Ejemplos UX Writing

Call to Action

Las llamadas a la acción son un gran ejemplo de UX Writing. La llamada a la acción tiene que ser llamativa y convencer al usuario de hacer clic, teniendo claro que es lo que va a recibir a cambio.

Formularios

Los formularios son una de las zonas principales de interacción con los clientes. Hay que dejar claro a quién se va a dirigir y la información que necesita para rellenarlo. Además si no está registrado, es una excelente oportunidad para unirse a nuestra web.

Mensaje de error

Cuando sucede un error técnico en la web, es necesario informar al usuario de lo que ha ocurrido. Nunca tienes que optar por el error 404.

Idea un mensaje original que comunique a la persona qué ha sucedido y cómo solucionarlo. Por ejemplo ofreciendo una página de Preguntas Frecuentes, o redireccionando a otro sitio de la web y así no perder la visita.

Copywriting vs UX Writing ¿En qué se diferencia?

Es muy común confundir estos dos términos, ya que ambas son técnicas muy conocidas de redacción para plataformas digitales. Aunque se asemejan en ciertos aspectos, la realidad es que tienen objetivos totalmente distintos.

El Copywriting busca vender un producto usando palabras atractivas para cautivar al cliente. En cambio el UX Writer quiere construir la mejor experiencia con el producto, por medio de un lenguaje sencillo.

El Copywriter trabaja con el departamento de Marketing. Por otro lado, el UX Writer se relaciona directamente con los diseñadores para crear soluciones a través de las palabras.

El UX Writing está enfocado en el diseño conversacional. Se centra en construir la conversación con el usuario, para entender sus necesidades. El Copywriting busca contar una historia para convencer al cliente de llevar a cabo una acción.

Por último, el Copywriter puede trabajar de forma independiente. Mientras que el UX Writer necesita de todas las ideas del departamento de investigación, y del flujo de información que los diseñadores han planteado. Así se construye el mensaje adecuado para el producto.

¿Qué es un UX Writer?

Un UX Writer es aquella persona que busca escribir y diseñar flujos de comunicación a la hora de navegar en una interfaz. Lo consigue gracias al uso de la escritura y el diseño.

A través de la escritura el UX Writer transmite la información al usuario de forma eficaz. Esto crea la interacción del cliente con el producto, dando pie a nuevos procesos. El UX Writer también cuenta con la capacidad del diseño para resolver problemas de comunicación.

Combinando las dos habilidades, el UX Writer logra transmitir la mejor experiencia al usuario con su contenido.

El contenido precede al diseño. El diseño sin contenido no es diseño, es decoración.

Jeffrey Zeldman, precursor del diseño web.

¿Qué hace un UX Writer?

El UX Writer realiza diferentes tareas en el desarrollo de la experiencia de usuario. Vamos a investigar cuáles son.

• Crear la voz de la marca, es decir, transmitir cómo se expresa y dirige a sus usuarios.

• Escribir contenido que aporte eficacia y coherencia a un servicio digital.

• Facilitar la información al usuario para que pueda conseguir sus objetivos con el producto.

• Establecer el storytelling que la marca quiere implantar en el producto.

• Colaborar con el equipo de diseño y estructurar la arquitectura de cada interfaz.

• Definir el estilo de la marca con unas pautas marcadas que se deben seguir. Este manual es el que seguirá el UX Writer cuando se produzca nuevo contenido.

¿Qué se necesita para ser UX Writer?

Un buen UX Writer necesita contar con 4 valores principales para redactar el contenido de forma eficaz.

Claridad

• Los problemas de software no son los problemas de los humanos. La comunicación se debe construir de persona a persona, y no de máquina a humano. Hay que transformar el error técnico en un lenguaje que se pueda entender.

• Cuida los verbos. Los verbos aportan la acción y le dan sentido a una oración. Le da significado a lo que tiene que hacer el usuario.

• Elimina los términos técnicos y sustitúyelos por palabras fáciles de comprender para el usuario inexperto.

• Dale contexto a tu usuario durante la ruta de navegación. Así puede entender la situación en la que se encuentra después de haber completado los primeros pasos, o se encuentre en el punto final del proceso. 

Precisión

• Asegúrate que tu mensaje sea corto pero eficiente. Es decir, prioriza el entendimiento del mensaje con las palabras necesarias. 

• Elige las palabras adecuadas para cada mensaje. No todos los tipos de palabras transmiten lo mismo, ya sean artículos, adjetivos o sustantivos. Por eso debes conocer el propósito de estas y relacionarlas con tu mensaje.

• Jerarquiza tu contenido destacando lo más importante al principio de las frases.

Utilidad

Los textos deben indicar al usuario hacia dónde deben dirigirse. Por ejemplo en un Call to Action tienes que dejar claro cuál es el siguiente a seguir. No plantees dudas, ofrece la solución que el usuario necesita.

Responsabilidad

• Recuerda decir la verdad, y no caer en mensajes engañosos que busquen atraer visitas fáciles.

• Escribe siempre pensando en la diversidad de las personas. No olvides ser inclusivo, mostrando empatía para cualquier género o condición física.

• Y por supuesto trabaja con educación y amabilidad hacia tu cliente. 

¿Cómo hacer UX Writing?

Ahora que ya sabemos su importancia, vamos a descubrir todos los pasos necesarios para crear contenido UX Writing.

Voz de marca

Es la manera en la que describimos la personalidad de la marca. Esta voz se va formando por medio de lo que decimos, cómo lo decimos y cómo se muestra. La podemos crear gracias a los siguientes recursos.

Principios de marca

Haz una lluvia de ideas. Piensa en 3 o 4 adjetivos que identifiquen a tu marca.

Imagina que registras tu marca en una app de citas. Piensa en la información que pondrías en tu perfil o que es lo que destaca por encima del resto. ¿Qué te hace interesante para las personas?

Averigua los valores que quieres transmitir, y qué imagen vas a utilizar para transmitirlos.

Filtra los aspectos negativos que no queremos representar con nuestra marca. Establece patrones extremos que te ayudarán a conseguirlos. Por ejemplo ser informal, pero no descuidado.

El tono

Una vez establecida la voz de marca, toca pensar en el tono. El tono es la forma en la que se expresa la marca. La audiencia debe reconocer nuestra marca con sólo leer nuestro contenido.

Existen diferentes tonos dependiendo de la situación. Necesitamos reconocerla y determinar las características del tono según el contexto, para que tenga coherencia con nuestra voz de marca. Con estas preguntas conseguirás adecuar el tono según el momento.

• ¿Dónde se encuentran los usuarios en el User Journey?

• ¿Qué tan experimentados son al usar la interfaz?

• ¿Cuáles son sus intenciones?

• ¿Cuál es su estado de animo?

Ahora veamos cómo podemos expresarnos según la localización del texto.

Títulos

Es el elemento que el usuario ve en primera instancia. Es recomendable ser creativo, humano y emocional con el tono del lenguaje. Los usuarios se sentirán identificados y lograrás captar su atención.

Subtítulos

El usuario quiere o espera obtener información de cuál es el producto y cómo funciona. Se recomienda ser directo e informativo. Intenta que no sea un lenguaje muy creativo, ve directo a cuál es el tema.

Cuerpo del texto

El usuario necesita conocer los beneficios y/o valores que le aportas tú al transmitirle esta información. Usa una comunicación más conversacional o agrega detalles técnicos. Tienes que contar una historia porque este es un material que justo por esas especificaciones técnicas es más difícil de consumir y necesitas que el usuario te vaya siguiendo de la mano sin que sea muy pesado.

Aspectos del producto

El usuario necesita más información que le ayude a tomar la decisión de compra. Encontrará una descripción y especificaciones del producto. Utiliza un lenguaje más preciso y frontal.

Call to Action

Estos espacios no invitan a llevar acabo una acción. Lo idea es ser directo, con textos cortos.

Escanear el contenido

Las personas no leemos los textos palabra por palabra. Todos nos saltamos parte del contenido para llegar a nuestro objetivo lo antes posible. Esto puede ser frustrante para el redactor, pero lo tenemos que voltear a nuestro favor.

Conocer las patrones de escaneo nos permitirán ir un paso por delante y aprovechar esta desventaja para optimizar el contenido.

Patrón en F

En este patrón los usuarios leen de izquierda a derecha, fijándose sólo en los extremos de la pantalla. Por lo que no es muy recomendable ya que solo destaca la información inicial y final, dejando de lado todo el grueso del contenido.

Patrón en capas 

El objetivo de este patrón es la jerarquización. Muestra diferentes capas de contenido de arriba hacia abajo, destacando primero lo importante y reduciendo el tamaño a lo secundario. Este patrón es más recomendable porque nos permite dar relevancia según nuestras preferencias.

Patrón punteado 

El punteado consiste en escanear palabras claves a lo largo de los párrafos hasta encontrar la que nos interesa. La clave del patrón es resaltar las palabras o frases con más importancia y hacer que destaquen frente al resto. Así redirigimos la búsqueda del usuario a los términos que queremos.

Patrón de compromiso

Va dedicado a los usuarios dedicados que consumen todo el contenido sin diseccionar. Es el más difícil de conseguir porque requiere de un ejercicio de confianza hacia nuestros lectores. Lo ideal es reservarlo a contenido dedicado, que los usuarios consuman asiduamente.

Content-First

Una práctica común al empezar un diseño es usar textos predefinidos que no transmiten ningún mensaje concreto. Aprovechar bases ya creadas para dar forma al diseño, pero esto es un grave error.

El Content-First trata sobre dar prioridad al contenido. El contenido debe ser lo más importante de un sitio, no se puede crear la arquitectura sin saber que mensaje se va a transmitir. Por lo que diseñar sin tener claro lo que se va a contar es erróneo.

La forma debe adaptarse al contenido, no a la inversa.

Investigación para generar valor

Como ya hemos dicho, el UX Writer tiene que estar en permanente contacto con el resto del equipo. Por eso para mejorar la experiencia de usuario es necesario participar en todos los procesos del proyecto.

Investigación

Participar en la investigación del UX Research. Ya sea tomando notas o aportando información. Aprende sobre las personas que usan tu producto y descubre cómo la gente lo percibe y reacciona en cada etapa.

UX Design

El UX Writer ayuda a definir el storytelling de la experiencia en el sitio con el wireframing. El objetivo es conseguir que el usuario llegue desde el punto A al B sin obstáculos.

UI Design

Es la parte donde más destaca el trabajo del UX Writer. Básicamente se trata de revisar el microcopy y el UI copy. Estos términos los veremos en detalle más adelante.

Lanzamiento

Lo principal es revisar y optimizar todo el trabajo realizado.

Documentación de palabras

Es el estudio de las palabras que usa el usuario. Su jerga, expresiones y formas de comunicarse. También es importante investigar a la competencia y el contenido que ofrece a los clientes.

En nuestra plantilla puedes encontrar cuatro hojas donde llevar a cabo tu investigación, y que se dividen en:

• Encuentra las palabras de tu cliente: palabras, definición e historia de las que vayamos a usar.

• Palabras que no decimos: sacar las palabras que no nos representan y sustituirlas por otras de valor.

• Análisis de la competencia: consiste en unir las palabras claves de la competencia y averiguar cuáles son las que están funcionando.

Microcopy

Es como un texto copy, pero más corto, que explica al usuario los elementos de la interfaz. Vamos a ver la mejor forma de implementarlos según la sección.

Titulares

• Reduce las palabras que no son esenciales para mejorar la capacidad de escaneo.

• Coloca las palabras clave al principio del título para captar la atención de las personas y mejorar el escaneo.

• Incluye palabras clave que aumenten la clasificación del contenido.

El asunto en correos electrónicos

• Destaca cuáles son las ventajas para el usuario.

• Otorga una solución a posibles problemas del cliente.

• Explica con claridad el contenido del correo con un lenguaje sencillo. 

Resúmenes y extractos

• Utiliza breves resúmenes del contenido para presentar a los usuarios que no quieren leer todo el texto.

• Estos extractos le dan contexto al post sin tener la necesidad de ahondar en él.

• Coloca los puntos principales del post listados en el resumen, a modo de atajo.

El slug y la URL 

• Deben aparecer las palabras clave de tu texto.

• No utilices pronombres, artículos, preposiciones ni conjunciones.

UI Copy

El UI Copy son los textos pensados para ser accionables. Aparecen en etiquetas de los menús, botones, pestañas, y todos los lugares pensados para ser clicables. Proporcionan una interacción fluida y rápida. No están compuestos de muchas palabras porque apenas ocupan espacio en la interfaz.

Consejos para redactar UI Copy:

• Escribe textos breves sin renunciar a la claridad.

• Habla sobre el estado consecuente, no el actual.

• Utilizar verbos para los comandos que inician acción o envían información.

• Cuando el comando produce un cambio en la interfaz, opta por adjetivos.

• No emplees el Ok como recurso fácil.

Shortcuts

Dentro del UI Copy, existen comandos llamados shortcuts o atajos, que ejecutan acciones rápidamente con combinaciones de teclas. Estos atajos mejoran tu UI Copy y agilizan los accesos por la interfaz. Algunos consejos que te ayudarán:

• Los atajos deben ser fáciles de aprender y memorizar.

• En las tareas que más se repiten en el sitio no anules los accesos directos ni reutilices comandos.

• Dale prioridad a los atajos relacionados con las tareas frecuentes del software.

El lenguaje de tus usuarios

Al final lo que buscamos es construir el lenguaje de nuestros usuarios. Con un lenguaje único conseguiremos llegar a ellos de forma eficaz. Piensa que el público es internacional, por lo que no abuses de expresiones demasiado localizadas. Además ten en cuenta el posicionamiento en los motores de búsqueda, no olvides utilizar términos claves.

También es importante mostrar emociones en los textos, para crear sensación de empatía en los usuarios. Por último elige adecuadamente los momentos donde usar textos básicos, y dónde recurrir a la personalización para impulsar el contenido.

Guía de estilo

Con todo el trabajo hecho, llega la hora de presentarlo con una guía de estilo.

Una guía de estilo de contenido es un documento que explica cómo se debe escribir el contenido orientado a tu usuario. Incluye reglas de gramática, puntuación, terminología, voz de marca y tono.

Al crear la guía de estilo, alineas la voz y tono en todas las secciones del producto. Esto forma un estilo característico y reconocible que recuerdan los usuarios.

Cuando creas la guía, compártela con todo tu equipo y asegúrate que todos la siguen al crear el contenido. Piensa que el UX Writer será el referente para los que usen la guía, y recurrirán a él siempre que surjan dudas.

Conclusión

A pesar de ser una disciplina relativamente nueva en el mundo del diseño, el UX Writing ya es esencial en cualquier proyecto. Si quieres que tu producto cuente con la mejor experiencia de usuario, contar con un buen UX Writer es imprescindible.

En este vídeo te explicamos cómo realizar cada una de las plantillas de la guía.

¿Te ha sorprendido todo lo que puede hacer un UX Writer? Déjanos un comentario si tienes alguna duda o quieres comentarnos tu opinión acerca del UX Writing. No olvides descargar nuestras plantillas, ¡te serán muy útiles!

La entrada UX Writing | Guía 2022 + Plantillas se publicó primero en Focux.

En nuestra guía te enseñamos paso por paso cómo hacer un UX Research, además de explicar todos los tipos que existen. Así sabrás cuál es el método que mejor se ajusta a tus artículos. Además de nuestras plantillas, contamos con un vídeo donde explicamos cómo rellenar cada una de ellas, ¡no te lo pierdas!

Paso a paso de un UX Research

Esta investigación requiere de una serie de etapas que hay que respetar para conseguir nuestro objetivo. Vamos a ver todo lo necesario para llevar a cabo una investigación de usuarios paso por paso.

Definir el Problema

Debemos tener claro el objetivo del UX Research y preguntarnos ¿Qué queremos saber sobre el usuario?

Para saberlo, tenemos que identificar cuál es el problema que se quiere resolver y qué hay que hacer para resolverlo. Con esta investigación completamos esa falta de información que necesitamos.

Una vez clara la solución que estamos buscando, seleccionamos el tipo de UX Research donde la vamos a encontrar.

Tipos de UX Research

Cuantitativa

Este tipo de investigación nos revela cuánto y qué tanto sucede un problema. Nos da la referencia matemática y estadística de cuántas veces se repite un problema. Sin embargo, no dice por qué ocurre.

Por ejemplo, en una prueba de usabilidad podemos estudiar cuántas personas son capaces de realizar una tarea con éxito.

Cualitativa

Por el contrario en las cualitativas descubrimos el qué, cómo y por qué está sucediendo el problema. Esta investigación nos ayuda a definir lo que se quiere saber de un perfil específico.

Las motivaciones, miedos e inseguridades que viven los usuarios. Relacionándolo en torno a nuestro producto, para entender a un nivel más subjetivo que es lo que esperan encontrar. Las entrevistas son un método eficaz de investigación cualitativa.

Actitudinal

Son parecidas a las cualitativas, pero aquí lo enfocamos de manera diferente. El resultado de esta investigación es la opinión de la gente a un nivel más superficial.

Es decir, queremos saber qué opinan sobre los componentes, diseño, colores, y por qué les gusta tanto. En sí lo que vamos a sacar es la satisfacción de la persona usando el producto. La mejor forma de practicarlas son las encuestas.

Conductual

Se trata de observar a las personas y ver cómo usan nuestro producto. Puede ser simplemente mirando cómo hacen tareas cotidianas como comprar o navegar en Internet. Aunque es más interesante observar cómo se desenvuelven usando nuestro producto.

Evaluando la conducta de los usuarios, entenderemos mejor cómo desarrollarlo para ellos. Con una prueba de usabilidad moderada se puede conseguir este objetivo.

Generativa

Por último, en las generativas vamos a entender las motivaciones más profundas de las personas. A través de objetos cotidianos y pruebas sencillas, observaremos cómo piensan y actúan a nivel más básico.

Nos ayuda a comprender cómo se enfrentan a los retos, y los pasos que toman hasta conseguir un resultado. El business origami es un método popular de investigación generativa.

Elegir el método de UX Research

Una vez tengamos claro qué tipo de investigación queremos, tenemos que seleccionar cómo la vamos a hacer. Por eso lo mejor es conocer todos los métodos de UX Research que existen, y elegir el qué mejor se adapte a nuestros objetivos.

Entrevistas

Si durante los pasos previos estableciste que necesitas hablar con los usuarios, la entrevista es la opción más popular. Son actitudinales y cualitativas. Medimos cómo la gente piensa y actúa bajo ciertos escenarios.

El factor clave es saber escuchar. Esta habilidad nos permite comprender el relato de las personas y entender lo que nos quieren transmitir. En nuestra plantilla tienes un modelo de entrevista que te ayudará a preparar la tuya.

Inmersión Contextual

Este método consiste en analizar el contexto que rodea a las personas. Es decir, visitar el lugar donde se desarrolla la acción del usuario. Esto lo conseguimos estableciendo el método AEIOU, o modelo para la observación de campo. Si quieres ponerlo en práctica utiliza nuestra plantilla.

Los puntos principales del AEIOU son:

• Actividades: una vez en el lugar de la investigación, describir las actividades que hacen los usuarios y cómo las hacen.

• Entorno: describir las características del entorno y cómo está formado.

• Interacciones: observar cómo se comportan las personas entre sí y las acciones que realizan para relacionarse.

• Objetos: apuntar el diferente mobiliario de la zona y observar para qué lo utilizan.

• Usuarios: fijarse en las características de las personas y cuáles son sus perfiles.

Pruebas generativas

En estas sesiones se provee al usuario de algo físico que puedan manipular con sus manos. Este método lo utilizamos para reducir la brecha entre lo que hacemos y estamos diciendo. Muchos usuarios no pueden o no saben transmitir sus sensaciones, y a través de la creatividad conseguimos promover la conversación.

Hay multitud de formas de hacerlo como recortes o juegos de roles. En nuestra plantilla encontrarás un ejercicio de la línea de tiempo, para ejecutarla con tus usuarios.

Business Origami

Uno de los tipos más famosos de investigaciones generativas es el business origami. Es una técnica para modelar experiencias complejas. Por medio de las figuras de origami, buscamos que los usuarios construyan una historia. Para eso les pedimos que usen tarjetas llamadas Tokens para que nos cuenten esa historia.

Te ofrecemos unos modelos de tokens para que puedas llevar a cabos tus sesiones de business origami.

Kano Análisis

Es una forma de realizar encuestas. Nos ayuda a determinar qué funcionalidades son las más importantes al momento de desarrollar un producto. Evalúa la posible satisfacción puede tener esa funcionalidad si la incluimos en el producto.

Tiene una dimensión cuantitativa y actitudinal porque está midiendo preferencias. Utiliza nuestra plantilla para confeccionar tus propias encuestas.

Card Sorting

Tiene una dimensión cualitativa y cuantitativa. Nos ayuda a ver cómo las personas organizan conceptos. Les ofrecemos una serie de cartas para que las organicen. De esta forma podemos ver las rutas de pensamiento que siguen al realizar una acción.

Si quieres llevar a cabo este método te dejamos unos ejemplos para que crees tus propias cartas.

Estudios de Atractividad

Determina qué tan atractivo es un diseño para los usuarios. Es cuantitativo pero actitudinal porque solo estás midiendo la percepción subjetiva que tienen las personas con respecto a una interfaz.

Esto lo logramos entregando al participante un set de cartas y conceptos que usará para describir qué es lo que le hace sentir el producto. También se puede realizar de manera más sencilla con una encuesta. En la página de attrakdiff podrás fabricar tus propias encuestas y medir los resultados.

Evaluación Heurística

Nos ayuda a determinar qué tan fácil es utilizar un producto a partir de ciertos principios. Es cuantitativo y actitudinal. No requiere de usuarios para ponerlo en práctica. Son los mismos desarrolladores o expertos del equipo los que evalúan el producto a través de los principios establecidos. En esta plantilla podrás llevar a cabo tu evaluación.

Estos principios heurísticos son:

1. Los usuarios no trabajarán más de lo necesario.
2. Limitaciones para procesar información
3. Tendencia a cometer errores
4. La memoria es complicada
5. Somos sociables por naturaleza
6. La atención es limitada
7. Deseo innato de buscar más información
8. Operamos bajo procesos inconscientes
9. Operamos bajo varios modelos mentales
10. Mejor respuesta a sistemas visuales claros

Encuestas

Otro de los métodos más usados son las encuestas. Básicamente consisten en hacer preguntas a usuarios para evaluar un objetivo. Este método nos proporciona una estadística confiable donde tomar decisiones.

Existen muchas páginas de creación de formularios. Por ejemplo, en Google Forms puedes realizar las tuyas en pocos pasos.

Primer Clic

Nos aporta confianza estadística respecto a donde la gente hace clic por primera vez en una interfaz. Es conductual porque estamos observando a la gente utilizar una interfaz.

Esta prueba nos va indicar si el usuario tiene probabilidades de encontrar lo que anda buscando. Con la herramienta optimalworkshop puedes aprender a utilizar este método.

Pruebas de Usabilidad

Consiste en observar a las personas usar el producto. Es recomendable que se haga en el contexto donde el usuario lo utiliza diariamente. La prueba de usabilidad, mide acciones, no mide la opinión de la gente. Es conductual.

La podemos realizar en cualquier etapa y nivel de fidelidad. Si quieres aprender cómo realizarlas paso por paso, revisa nuestra guía actualizada sobre pruebas de usabilidad.

Listar todos los elementos que necesitamos

Establecer un listado con todos los elementos que necesitaremos durante la investigación. Depende de la metodología que uses, pero aquí te dejamos una checklist común:

• Guía de tareas que los usuarios deben completar.

• Guion de la conversación que vas a mantener con los participantes.

• Preparar el prototipo o software que las personas vayan a utilizar.

• Elige a uno o más user researchers para que tomen nota y observen durante las pruebas.

• Recompensa a los usuarios con algo significativo, como un descuento o una tarjeta regalo.

• Tener las plantillas hechas para recoger y estudiar los resultados obtenidos.

Definir las Métricas del UX Research

Las métricas sirven para medir los resultados que hemos obtenido y sacar una conclusión. Estas varían según el método elegido, por eso es importante escoger cuáles son las que más nos interesan.

Métricas de usabilidad

Miden aspectos como la velocidad de carga de una web, el tiempo que los usuarios tardan en realizar una tarea, la localización de los click, etc.

Estas métricas indican la eficacia y rapidez con la que los participantes usan el producto. Por ejemplo nos ayudan a descubrir problemas con los tiempos de carga en la página web. También sirven para detectar las zonas calientes del menú para saber donde hay que enfocar los recursos.

Métricas de engagement

Este tipo de métricas nos indican el interés que tiene el usuario hacia nuestra marca o producto. Podemos averiguar si conseguimos enganchar eficazmente a nuestro público

Un posible ejemplo sería evaluar el conocimiento que tiene el participante sobre nosotros. Ya sea con encuestas que nos indiquen cómo nos han conocido o cuáles son las redes donde nos siguen. Incluso se pueden medir datos más avanzados como el porcentaje de rebote.

Métricas de éxito

Es la forma más sencilla de medir los objetivos. Directamente se calcula el número de veces que la tarea se ha completado con éxito.

Ya sean pruebas básicas como una encuesta o algo más subjetivo como una entrevista. Es necesario conocer cuáles son las preguntas que han tenido respuesta y los ejercicios que se han completado. Así aprenderemos las que funcionan y cuáles necesitamos modificar.

Reclutar usuarios

Define un perfil proto-persona

No olvidemos que el resultado que logremos de esta investigación es conocer en profundidad las motivaciones y deseos de nuestro usuario. Por eso en este perfil creamos una hipótesis de cómo sería, antes de conseguir la imagen definitiva de nuestro cliente ideal.

Para hacerlo vamos a seguir estos pasos. En nuestra plantilla encontrarás el cuadro para que puedas redactar tu propio caso.

Hechos

Son situaciones o estados que nuestros cliente puede cumplir, y está relacionado con las características del producto. Por ejemplo, situarlos en edad adolescente, donde vayan al instituto y no cuenten con responsabilidades.

Problemas

Complicaciones que pensamos estas personas pueden padecer, y nuestro producto puede solucionarlas. Un ejemplo válido sería la gente que no tiene vehículos disponibles, y necesitan de un medio externo para moverse de un sitio a otro.

Comportamientos

Aquí hablamos de acciones que sabemos que los usuarios hacen. Piensa en una persona que trabaje todo el día fuera y apenas esté en casa. Como ejemplo se nos puede ocurrir que no dispone del tiempo suficiente para cocinar o limpiar su hogar, y necesita soluciones rápidas o ayuda externa para hacerlo.

Necesidades y objetivos

Por último nos fijamos en qué es lo que necesita el cliente y lo que quiere lograr. Si unos padres coinciden en los horarios de trabajo y no pueden recoger a sus hijos. Una necesidad sería encontrar a un cuidador que se ocupe de los niños.

Consejos para el reclutamiento

• No reclutes por zonas demográficas. Esto limita las opciones y no garantiza los mejores resultados.

• Busca perfiles extremos, que no se parecen nada entre sí para obtener mayor variedad de resultados.

• Utilizar filtros precisos que vayan al detalle.

• Diferencia bien los usuarios reales y los usuarios potenciales.

• Con el reclutamiento tipo guerrilla, puedes encontrar a las personas que cumplan con los criterios que ya definiste.

• Utiliza el método de auto-inscripción para pruebas online que requieran un mayor volumen de respuestas.

• Ofrece un incentivo para atraer a más participantes.

• Prepárate para lo inesperado y recluta más personas de las que necesites, porque lo normal es que algunas no acudan a la reunión.

Preparar espacio

Según realicemos la prueba de forma presencial u online necesitaremos diferentes requisitos.

Presencial

Escogemos una sala espaciosa y tranquila, donde nadie nos moleste mientras se hace la investigación. Si tu equipo de trabajo cuenta con unas grandes instalaciones puedes optar por una de las oficinas. También se puede optar por un lugar que elija el usuario.

Al final lo importante es contar con todos los elementos necesarios para llevar a cabo los ejercicios.

Online

En este caso debemos elegir una herramienta de streaming que dominemos. Esta plataforma nos debe permitir compartir pantalla y los documentos necesarios para la investigación.

Si optamos por una encuesta o formulario sin moderación, simplemente compartiremos los programas por medio de un enlace.

Durante la sesión

Ahora es el momento de recuperar el listado que hemos creado anteriormente, y comprobar que no se nos olvide nada para empezar las pruebas.

En el caso de que sea presencial, ten en cuenta tu actitud. Compórtate de forma amable y tranquila, transmitiendo en todo momento una sensación de comodidad al participante. Crea un ambiente donde la persona se sienta relajada y complete los ejercicios de la forma más óptima.

Compilar observaciones

Después de completar la sesión de UX Research, es necesario revisar los resultados obtenidos. Vuelve a leer las anotaciones y repasa las grabaciones en busca de posibles detalles que se hayan pasado.

No olvides ordenar las respuestas según los ejercicios realizados y los perfiles de los usuarios. Una vez hecho podemos pasar al análisis de resultados.

Analizar resultados

Para analizar los resultados utilizamos las métricas que hemos establecido en los pasos iniciales de la investigación. Es crucial elegir cuáles son las que necesitamos según el rumbo que haya tomado el UX Research.

Para finalizar recopilamos todo este análisis y lo trasladamos a un reporte que finalice la investigación.

Reportar los resultados del UX Research

Con el análisis hecho, es hora de reportar las conclusiones extraídas. Vamos a ver las diferentes maneras de hacerlo.

Reporte completo

Este reporte debe incluir objetivos, participantes, descripción de la secuencia, resultados, etc. Absolutamente todo. Lo que se ha trabajado en cada parte de la investigación se encuentra aquí.

Además de servir como presentación, se puede tomar como referencia para la preparación de posteriores reportes.

Resumen Ejecutivo

En este caso no necesitamos ser tan detallistas. Este resumen está formado por los problemas detectados, las conclusiones que hemos sacado y las recomendaciones que el equipo tiene que aportar.

Diseño Anotado

Es el reporte más adecuado para compartir los resultados con los desarrolladores, porque vemos de manera más concreta los problemas. Incluye las anotaciones de lo observado en el estudio, pero de forma directa. Es decir, se muestran capturas e imágenes concretas de los problemas del producto

Presentaciones visuales

Se trata de una presentación clásica de diapositivas a modo de resumen. Es una forma accesible y visualmente atractiva de presentar los resultados a los diferentes equipos que forman una empresa. Así se entiende mejor y transmitimos las conclusiones más fácilmente para todos.

Diagrama de afinidad

El objetivo es ordenar los insights del UX Research, agrupar esas ideas y encontrar un denominador común en lo que la gente dijo. Se puede realizar de manera física o digital. En nuestro template puedes crear tu propio diagrama.

Lo que buscamos es ver los elementos para crear patrones según los relatos del usuario. El diagrama de afinidad lo estructuramos a través de los siguientes elementos:

• Observaciones: es lo más determinante que dijo nuestro usuario

• Juicios: es la valoración del problema. Lo que nosotros creemos que está sucediendo respecto a esa observación.

• Valores: la situación ideal donde pensamos encontrarnos cuando no existan problemas.

Creación de una user persona

Cuando hemos terminado todos los pasos, ya podemos crear la user persona que estábamos buscando como objetivo de la investigación.

La creación de la user persona nos ayuda a definir el usuario en el que nos vamos a enfocar en el desarrollo del producto. Con la investigación hecha, usaremos las conclusiones para confeccionar este perfil.

Los gustos, motivaciones, preferencias, acciones, frustraciones, etc. Nos han permitido entender mejor quién es nuestro usuario y cómo llegar a él realmente. En esta última plantilla puedes confeccionar cada aspecto del user persona y establecer en un documento cómo debe ser ese usuario ideal.

Conclusión

La investigación de usuarios es un proceso complejo que requiere un gran trabajo detrás. Pero cuando hayas terminado descubrirás que los logros obtenidos habrán merecido la pena el esfuerzo.

Siguiendo nuestra guía no tendrás ningún problema a la hora de realizar tu investigación. No olvides que también puedes ver toda esta información y mucho más en nuestra serie de vídeos sobre UX Research.

Si tienes alguna pregunta, no dudes en dejar tu comentario. Y no olvides descargar las plantillas, te serán muy útiles.

La entrada UX Research | Guía 2022 + Plantillas se publicó primero en Focux.