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.

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.

¿Qué es UX research?

El término UX Research o user research, significa investigación de usuarios. Antes de terminar el desarrollo de un producto, el equipo debe llevar a cabo una serie de procesos para conseguir el éxito. Y lo más imprescindible es conocer a su audiencia potencial a través de esta investigación.

En esta búsqueda apuntaremos a todo tipo de objetivos como la edad, localización o gustos personales. Siempre pensando en personas que podrían comprar nuestro producto.

Aunque lo más importante es comprender las motivaciones del objetivo. En esta investigación buscamos entender las características y necesidades del usuario. Y lo conseguiremos empleando los distintos métodos de UX research

¿Por qué es tan importante?

Cuando realizamos un UX research, lo que se busca es mejorar la calidad de vida del usuario. Claro que no podemos olvidar que el fin último es vender nuestro artículo.

Por eso hay que pensar en el producto que al cliente le gustaría comprar. Es decir, saber de antemano qué espera el comprador final de nosotros. Esa es la principal ventaja del user research, crear productos imprescindibles para las personas indicadas.

Contar con esta información previa nos permite saber si el artículo es viable o no. También se hacen durante el proceso de desarrollo. El cliente puede guiar el siguiente paso en el diseño, o actuar como validador. Así sabemos si lo que estamos haciendo funciona.

Incluso una vez puesto en el mercado, la investigación del usuario no para. Mientras el artículo siga vivo, nunca dejaremos de optimizarlo y evolucionar constantemente.

Métodos básicos de UX research

Los tipos de UX research se pueden diferenciar en cualitativos y cuantitativos.

El método cuantitativo busca recopilar información que se puede cuantificar y procesar. Estas investigaciones se centrarán siempre en los datos y las estadísticas.

Por otro lado están las investigaciones cualitativas. En este caso queremos recoger y evaluar datos no estandarizados. Se sacan respuestas y opiniones que no se pueden medir directamente. Dependiendo del contexto, las respuestas obtenidas tendrán un valor distinto.

Si quieres un análisis en profundidad, échale un vistazo a nuestro artículo sobre los tipos de UX research. Ahora veamos los métodos más básicos para poner en práctica un user research.

Una entrevista

Es el método más usado de todos por su rapidez y simpleza. La información que buscamos obtener, tiene que estar relacionada con los objetivos y motivos del cliente que usará el artículo. Sin olvidar la situación imaginaria en la que se encontraría dicho cliente. Se puede practicar de manera presencial, o vía online con cualquier herramienta de videollamada.

Investigación en Internet

Otro de los métodos que mejores resultados ofrece. Puede combinarse con las encuestas, y trasladar el perfil antes seleccionado en la nueva búsqueda en la red. Normalmente se investiga en los principales buscadores como Google, cuáles son los temas de los que la gente habla. También se puede optar por un research en las redes sociales e investigar los gustos de nuestros usuarios.

Pruebas de usabilidad

Las pruebas de usabilidad requieren un proceso más elaborado. En ellas el participante accede a nuestro producto de forma libre y realiza una serie de tareas asignadas. Todos los movimientos que este haga en el software se quedarán registrados mediante una grabación. Luego esos datos se estudian para conseguir la solución a los problemas detectados.

Se pueden hacer en remoto, como con un moderador que guíe la prueba. Si quieres aprender a como hacerlas, no te pierdas nuestra guía actualizada.

Test de 10 segundos

Es tan fácil como parece. Solo hay que enseñarles el producto a nuestros clientes durante 10 segundos. Después se les hace una encuesta con preguntas muy básicas y que posteriormente se analizarán.

Diarios

En este método se pide a los usuarios que escriban un diario de su experiencia durante unos días o semanas. A lo largo de estos días, veremos qué es lo que pasa por la mente de nuestros compradores, y todas las acciones que realiza hasta tomar su decisión de compra.

Hay que definir anteriormente cuáles son los puntos clave que deben apuntar cada día, y que periodo del día hacerlo. Si lo hacen bien, tendremos todas los pensamientos y sensaciones que podemos trasladar a nuestro desarrollo.

Conclusión

En esta primera toma de contacto con el UX research hemos aprendido que no puede faltar en cualquier proyecto. Ya sea antes, durante o después, nuestro producto necesitará del user research para conseguir su objetivo.

Si quieres saber cuál es el user research que mejor se adapta a tu proyecto, no te pierdas nuestro siguiente artículo sobre UX research y el vídeo en nuestro canal de YouTube para completar tu conocimiento.

La entrada ¿Qué es UX research? Métodos básicos y cómo aplicarlos se publicó primero en Focux.