# data[].attributes.attachment_link.provider_name
Hola, Soy Alfonso Yeste, UX researcher y CRO

# data[].attributes.attachment_link.readable_text
Alfonso Yeste - UX RESEARCH - 4 minuto(s) de lectura

¿Qué es un card sorting?

El Card Sorting es una técnica de clasificación que se basa en la observación de cómo los usuarios agrupan y relacionan entre sí un número predeterminado de tarjetas marcadas con diferentes categorías temáticas de la página web o aplicación.

Si estás leyendo esto, seguramente es porque estás en esa fase de descubrimiento de las diferentes técnicas que existen en UX (cuantitativas, cualitativas), si quieres saber más sobre las técnicas que hay aquí tienes un post dónde hablo de ello. Yo también estuve ahí, igual que tú, en esos momentos de duda y que te asaltan un montón de preguntas sobre qué hace y cómo hacerlo. El UX es muy amplio, las agencias que son "puras" de Experiencia de Usuario tienen especialistas para cada área de trabajo, UX research, UX design, UI design etc... Vamos al grano, te voy a intentar dar en 4 minutos exactos una explicación y unas pautas para que sepas hacer tu primer Card Sorting.
El coste es entre medio - bajo

Se detecta aproximadamente el 60% de los problemas de la arquitectura de la Información

¿Por dónde empiezo?

1. Define tus objetivos (siempre, siempre tienes que marcarte unos objetivos)

2. Selección de la herramienta que vas a utilizar

3. Preparación de los contenidos (tarjetas, encuesta pre y post)

4. Selección de usuarios (perfil socio-demográfico)

5. Activamos el Card Sorting

6. Informe ejecutivo con las conclusiones del estudio y propuesta de mejoras

TIPOS DE CARD SORTING

En un card sorting abierto, los participantes deciden las tarjetas que encabezan cada grupo y el número de grupos. Esto ayuda no sólo a revelar la forma en que mentalmente clasifican las tarjetas, sino también a conocer los términos que utilizan para las categorías.

Se descubren patrones de cómo los participantes clasifican los contenidos(mapa mental) Se generan ideas para organizar la información dentro de la web/app

En un card sorting cerrado, los participantes cuentan con un conjunto predeterminado de categorías. A continuación, asignan las tarjetas para estas categorías fijas. Esto ayuda a revelar el grado en que los participantes están de acuerdo en qué tarjetas pertenecen a cada categoría.
Aquí se estudia si un determinado conjunto de nombres de categoría ofrece una forma efectiva de organizar una colección dada de contenido.
Básicamente es un card sorting híbrido que permite crear nuevas tarjetas además de las que ya tienes. La ventaja es que se descubren nuevos elementos que no teníamos anteriormente. El inconveniente es que impacta en el análisis estadístico de los datos.

Herramientas para hacer un card sorting

Yo te recomiendo 2, la aplicación Miró dónde puedes realizar un card sorting, sin apenas coste, te dejo un ejemplo de lo que hice yo hace poco:

O bien usar una herramienta específica para estos casos optimal workshop , que no solo sirve para card sorting, también para tree testing, encuestas, test de clics etc.. Ejemplo de la herramienta
4. Selección de usuarios
Parte muy importante, porque en UX estamos trabajando incluyendo la "voz del usuario" por lo tanto tienes que tener muy en cuenta que los usuarios que reclutes sean los más fines posibles al "target" de tu cliente.

¿Cuántos usuarios necesito para hacer un card sorting?

Depende :-D, pero yo no he hecho ninguno por debajo de 50 participantes, ni tampoco lo recomendaría, leerás post que indican 5 o 6 usuarios, en mi opinión profesional y para que exista una significancia estadística, no bajaría de esa cifra, te puedo asegurar que yo he hecho alguno con más de 100 o 150 usuarios.
Truco: ¡antes de lanzar el estudio haz un test hombre de dios! ¿Datos cualitativos o cuantitativos?
Es una técnica de inspección y como tal se acerca más hacia el lado cuantitativo, porque se obtienen %, ratios, números, estadística pura y dura, pero... depende (como siempre) porque si lo haces presencial (complicado hacerlo ahora mismo) puedes recoger información de los usuarios, y esto es muy valioso. Si es en remoto, te permite recoger datos cuantitativos, pero te ahorra tiempo y dinero. También puedes hacer una pequeña encuesta pre test y post test.
Truco: recuerda dejar instrucciones a los participantes si lo haces en remoto (para que no se pierdan)

Ejemplo de dendograma de Optimal Workshop una vez finalizado el estudio

6.Informe ejecutivo y conclusiones

Un informe de un card sorting te puede llevar mucho rato, si utilizas la herramienta/s tipo optimal workshop, la información que te puede llegar a dar es abrumadora, es necesario ordenarla, bajarla a un documento y luego proyectar los resultados para entenderlos tu y luego explicarle al cliente lo que ha ocurrido y sacar unas conclusiones que aporten valor.
Truco: te recomiendo que pese a realizar un informe completo (para eso te contratan) también hagas un informe ejecutivo de 1 slide o 2 cómo máximo dónde expongas las conclusiones. Al final tu cliente es eso lo que quiere.
Un saludo.

# data[].attributes.attachment_link.title
Card Sorting, técnica de UX para categorizar los contenidos de una web o app

# data[].attributes.attachment_link.description
Alfonso Yeste - UX RESEARCH - 4 minuto(s) de lectura El Card Sorting es una técnica de clasificación que se basa en la observación de cómo los usuarios agrupan y relacionan entre sí un número predeterminado de tarjetas marcadas con diferentes categorías temáticas de la página web o aplicación.

# data[].attributes.attachment_link.readable_text
Última actualización 23 de Febrero del 2022 Tiempo de lectura: Léelo en 7 min.

Si alguna vez te has preguntado qué es UX o UI y por qué deberían convertirse en dos herramientas importantes en tu know how como profesional, en esta guía te traemos las respuestas necesarias.

Ya sea si estás algo cansado de escuchar ambos términos en el trabajo o si es la primera vez que te enteras, te revelaremos los secretos tras esta práctica multidisciplinaria.

¡Acompáñanos!
¿Te interesa este artículo? Te encantará nuestro MicroDegree en UX/UI para Diseño de Productos
¿Qué es la UX y la UI?

Probablemente, hayas oído hablar indistintamente sobre qué es UX y qué es UI. Pero, ¿qué son realmente UX y UI? Estas dos carreras han existido durante décadas, siendo definidas por la industria tecnológica como diseño UX y UI.

Por un lado, el diseño UX significa "diseño de experiencia de usuario" y, por otro lado, el diseño UI se refiere a "diseño de interfaz de usuario". Ambos conceptos son esenciales para el desarrollo de un producto y están estrechamente relacionados.

Sin embargo, a pesar de tener un vínculo tan cercano, son bastante diferentes por las funciones de cada disciplina, y abarcan aspectos muy distintos en el proceso de desarrollo de productos y de la disciplina del diseño web. Por eso, antes de enseñarte las diferencias básicas entre UX y UI, vamos a ver primero lo que significa cada uno por separado.

¿Qué es UX o diseño de experiencia de usuario?

¿Qué significa UX? UX son las siglas de User Experience, y, para dar crédito a las clases de inglés, su traducción significa Experiencia Usuaria o Experiencia del Usuario.

Desde hace algunos años, se ha difundido erróneamente la idea de que el término tiene origen en el plano digital, algo que la industria tecnológica ha sabido alimentar con muchos tipos de contenidos.

En la actualidad, la definición de UX consiste en lo que una persona piensa, siente o percibe al momento de interactuar con un producto o servicio.

Dicha experiencia se mide de acuerdo a factores como la utilidad o la usabilidad y estos serán determinantes para el nivel de satisfacción de los clientes.

Pero antes de profundizar qué es UX, conozcamos su historia, que, seguramente, te sorprenderá.

Imagen: Unsplash

¿Para qué sirve la Experiencia del Usuario?

El uso de la palabra "diseño" al lado de UX hace referencia al tipo de trabajo que se hace en esta disciplina. No se trata del diseño gráfico en sí, sino de usar un conjunto de habilidades diferentes entre sí para "diseñar" una nueva experiencia del usuario de alguna interfaz que contempla 3 aspectos principales:

La usabilidad: es la funcionalidad misma, la que permite que un producto cumpla el objetivo para el que fue creado sin problemas.

Accesibilidad: se refiere a qué tan fácil resulta para el usuario entender el producto.

La Interacción entre usuario y producto: esto viene desde los tiempos de la Revolución Industrial y va desde lo técnico a lo más emocional, sobre cómo el usuario percibe el producto.

Además, el UX Design, como actividad en nuestros días, abarca diferentes prácticas para cumplir con los 3 aspectos anteriormente mencionados basándose en los siguientes puntos:

La investigación del usuario.

Las pruebas de usabilidad.

Arquitectura de la información.

Diseño de la interacción.

Estrategia del contenido.

Diseño visual.

Recolección de datos (análisis de indicadores).

Imagen: Unsplash

Cada aspecto requiere de un nivel de especialización elevado, por lo que un UX Designer es una persona de muchas cualidades. No por nada se considera que los mejores UX Designers son personas de conocimiento multidisciplinario.

Es importante saber si la experiencia que tuvo el usuario con tu producto o servicio fue intuitiva, cercana, torpe o confusa y también si navegar por la app o página web fue una experiencia complicada, lógica o arbitraria.

El UX está determinado por lo fácil o difícil que es para el usuario interactuar con los elementos de la interfaz de usuario que los diseñadores UI han creado.

¿Qué es UI o un diseño de interfaz de usuario?

Luego de saber qué es UX, es hora de conocer la definición de UI, su complemento.

El diseño de interfaz de usuario es lo que se usa para interactuar con un producto o servicio, mientras que el UX se preocupa por cómo se siente esa interacción.

Este diseño de interfaz, o también llamado la ingeniería de la interfaz, es utilizado para las aplicaciones, software, sitios web y smartphones con un enfoque en la experiencia de usuario e interacción.
Sus componentes principales son:
Imagen: Graphic Mint

Entonces, cuando hablamos del diseño gráfico de una aplicación, estamos hablando de su interfaz que incluye los botones, los textos, las imágenes, los controles, los campos de entrada de texto y todos los elementos que hacen posible la interacción del usuario.

¿Cuál es la diferencia entre el diseño UX y UI?

El UX/UI son dos disciplinas muy diferentes que funcionan en armonía. El diseño UI y el diseño UX implican habilidades distintas, pero son una parte integral del éxito de un proyecto digital.

Un diseño hermoso no puede tener una interfaz torpe y confusa para navegar, y una buena experiencia de usuario puede verse afectada por un mal diseño de la interfaz visual que convierte la experiencia de la aplicación en algo desagradable.

Los diseños UX y UI deben deben ejecutarse sin problemas y estar siempre alineados con las expectativas de los usuarios para crear una excelente interfaz / experiencia de usuario. Y cuando están alineados, ¡los resultados pueden ser asombrosos!

¿Cómo se complementa el diseño UX con el diseño UI?

Después de haber visto qué es UX y UI y sus diferencias, probablemente querrás saber ahora cómo ambas profesiones pueden trabajar juntas. ¿Será que una es más importante que la otra? La verdad es que tanto el diseño UX como el diseño UI son esenciales para desarrollar un producto.

Mientras que los diseñadores de UX se encargan de los aspectos técnicos de un sitio web o una aplicación, los diseñadores de UI se ocupan del aspecto visual y las partes de diseño gráfico de la construcción del producto.

Acerca de la forma como el diseño UX y el diseño UI se complementan y por qué es importante que ambas disciplinas vayan de la mano, el diseñador y mentor del programa Google Developer Experts en Product Design, Pol Celsi, y profesor del curso de Fundamentos de UX & UI de Crehana, nos comparte lo siguiente:

Imagen: crehana.com

Por ejemplo, digamos que alguien contrata tus servicios como diseñador UX porque el cliente desea optimizar el diseño UX de su sitio web o de una aplicación. ¿Cómo podrías ayudarlo? Determinando las características de la aplicación y la forma en que debe ser el recorrido del usuario. Para optimizar la experiencia del usuario, no debes enfocarte solamente en el aspecto visual, sino también en los textos, en las animaciones, etc.
"¿Por qué es importante que UX y UI trabajen juntos? No sé si es la pregunta correcta. Nosotros (los diseñadores) tenemos que entender que en el mercado de hoy en día no hay diferencia entre UX y UI. Tal vez pueda diferenciarse lo que es el trabajo de la especialidad de Research, la especialidad de Contenido y Diseño, en nuestro caso. Nosotros como diseñadores tenemos que entender que tenemos que trabajar con estas especialidades sumadas a la de Desarrollo, al comercial, por ejemplo; y entender que nosotros somos facilitadores. Nosotros vamos a ser los responsables dentro de UX de ese entregable. El trabajo de Research, el trabajo de Contenido va a estar plasmado en una interfaz. Y es ahí donde nosotros tenemos que hacer la diferencia. A través de la moderación a través de la validación con usuarios acerca de la usabilidad. A través del entendimiento total de ese producto o servicio".
¿Cómo elegir entre la profesión de diseño UX y UI?

Para terminar de despejar cualquier duda sobre qué es UX/UI y cuál es la diferencia entre UI y UX, hemos preparado esta sección para que sepas diferentes aspectos de cada una con más detalle. Saber hacia qué área inclinarte en tu profesión es sumamente importante, aunque algunos consideren que ambas disciplinas son iguales o que ambas son diferentes.

¿Qué hace un UX designer?

Ahora que ya conoces qué es UX, ¿sabes a qué se dedican los que practican esta profesión? Los UX designer o diseñadores UX están a cargo de determinar cómo funciona la interfaz de usuario, de definir su estructura y su funcionalidad.

Del mismo modo, se preocupan también por el UX user y UX service de una aplicación o sitio web, y es por ese motivo que muchas personas confunden la diferencia con los UI designer, que son los creadores de los diferentes tipos de interfaces. Si aún no conoces las diferencias, no te preocupes, pues más adelante te explicaremos más sobre este tema.

Si funciona bien, el usuario tendrá una buena experiencia, pero si la navegación es complicada o poco intuitiva, es probable que la experiencia del usuario sea pésima. Por tal motivo, el trabajo de los user experience designers es trabajar para evitar el último escenario.

Imagen: Unsplash

En resumen, son responsables del diseño de experiencia de usuario de cualquier plataforma virtual, velando por un buen UX usability (usabilidad), contenido UX (diseño de concepto) y funcionamiento de las interfaces del diseño web.

Investigar para el UX design

La investigación para el UX design se centra en las expectativas del usuario. Todas las experiencias e interacciones que los usuarios han tenido con cada aplicación han ayudado a establecer las expectativas sobre cómo se supone que funcionan y deberían funcionar las interfaces.

Si un diseñador UX no está familiarizado con lo que quiere el usuario, podría diseñar una interacción de interfaz que quizás pueda parecer lógica, pero rompería con las necesidades y expectativas del consumidor. Es por eso que la investigación es algo muy importante dentro del proceso de creación.

A los usuarios no les gusta cuando el diseño del menú y/o el diseño de experiencia se comporta de manera muy diferente de lo que esperaban y esto podría resultar en un comportamiento negativo que afecta a la relación que tiene con la marca.

Generar una experiencia positiva en UX

Un buen diseño UX crea una web y una experiencia positiva para los usuarios al comprender y satisfacer sus necesidades.

Pero no solo es la funcionalidad, la que hace que el usuario se sienta positivo cuando usa el producto o servicio, sino también porque los hace sentir confiables, generadores de conversaciones, alentadores, con personalidad, utilitario (fácil y rápido de usar) y con contenido compartible. Definitivamente todos los productos o servicios que son exitosos en los canales digitales es porque tienen UX en su alma.

Por tal motivo, es importante que te animes a explorar diferentes programas de UX para iniciarte como diseñador web si tu objetivo es brindar experiencias enriquecedoras a los usuarios a través de la navegación en línea.

"La mayoría de las personas comete el error de pensar que el diseño es lo que "luce" o "lo que se puede ver". La gente piensa que los diseñadores reciben una caja y les dicen: "¡Que se vea bien!" Eso no es lo que pensamos que es el diseño. No es solo lo que parece y se siente. El diseño es cómo funciona " - Iain Heath, Senior Experience Designer at Sainsbury's.

Imagen: Unsplash

Consejos para convertirte en un experto en Diseño UX

Ahora que ya sabes qué es UX, entrar en el mundo del UX Design requiere de muchas habilidades, pero eso no quiere decir que esté limitado a solo unos cuantos. Con los conocimientos que ya tengas, es suficiente para seguir el camino del aprendizaje hasta tener la experiencia suficiente.

Después de todo, la Experiencia de Usuario tiene una base intuitiva que, si eres buen observador, podrás desarrollar.

1. Aprende siempre

El aprendizaje de UX podrás tenerlo de 2 maneras: con cursos o investigando de manera autodidacta. Sea cual sea el camino que elijas, lo importante es no dejar de seguir aprendiendo, pues el UX se aplica con la combinación de diferentes conocimientos (multidisciplinarios) que requieren que vayas en una sola dirección.

Por ejemplo, aprende cómo aplicar un buen diseño UX a un flujo de compra con este video y conoce cómo aplicar un buen diseño UX a un flujo de compra junto a Carlos Pariente. Conoce los tips:

1. Diferencias culturales.

2. Dejar navegar con tranquilidad.

3. No pedir registro desde el principio.

4. Agregar promociones o contadores de tiempo para incentivar compra.

5. Botones de acciones claros.

6. Sugerir recomendaciones. ¡Listo! Prepárate para comenzar a crear un buen UX.

2. Sé empático

Si eres capaz de ponerte en los zapatos del prójimo y entender cómo puede sentirse una persona frente a alguna complicación, ya tienes parte del camino recorrido.

Si no es tu caso, puedes renunciar a los deseos de ser UX Designer o volver sobre el primer punto "Aprende Siempre" y darte a la tarea de desarrollar empatía. No es imposible, solo debes dejar de lado el ego y enfocarte más en lo que te rodea.

3. Conoce las herramientas

Una vez que ya hayas aprendido sobre una disciplina, dedica tiempo a dominar las herramientas que harán tu trabajo de UX Designer más fácil como Sketch.

4. Adquiere experiencia

No esperes a ser contratado por una gran empresa para comenzar a tener proyectos de UX en tu portafolio. Con un gran poder viene una gran responsabilidad, y con las habilidades que vayas adquiriendo el único responsable de darle vida a tu carrera serás tú. Empieza por pequeño, crea proyectos para amigos, familiares o para ti mismo. Hazlos como si fuese un trabajo destinado para un público masivo y coloca el boceto en tu portafolio, junto con los pasos y metodología empleada.

¿Cuánto gana un diseñador UX?

Según Glassdoor, una plataforma que permite a los usuarios enviar y ver salarios de forma anónima, un UX design en México tiene un sueldo base promedio de $26,000 al mes. En Perú, un UX design puede tener un sueldo de aproximadamente S/. 2,553 al mes, según información de Indeed.

Mientras que el sueldo de un UX design en Argentina puede variar de entre $40,000 y $120,000 de acuerdo al sitio Encuestas IT. Estos números, por supuesto, dependen de la experiencia del UX design. Si cuenta con experiencia, su sueldo puede estar por encima de los $90,000. En España, un UX Design puede llegar a ganar €25,449 al año, según Indeed.

Sin embargo, ten en cuenta que esta profesión puedes ejercerla de manera particular, es decir, puedes convertirte en Diseñador UX o Diseñador UI freelance y prestar tus servicios por un proyecto determinado.

¿Tienes dudas sobre cómo cobrar siendo freelance? No te preocupes, pues con este formato de cotización para freelancers tendrás una idea sobre cuánto cobrar por diseñar una interfaz y ofrecer tus servicios de manera efectiva.

¿Qué hace un UI?

El trabajo de un diseñador de interfaz de usuario (UI designer), es de diseñar todas las pantallas a través de las cuales se moverá un usuario y crear los elementos visuales con características interactivas que faciliten ese movimiento.

El diseñador UI no solo es una persona creativa, sino que también tiene el rol de colocarse en el lugar del usuario, anticipando lo que esta persona puede esperar en cada etapa de la navegación.

La función de un diseñador UI es decidir cómo se verá la plataforma online, escoger esquemas de colores y formas de botones, así como elegir las medidas y fuentes para los textos. Es por eso que su rol fundamental es crear la apariencia idónea en la interfaz de usuario para una mejor interacción y una óptima navegación.

Genera un producto web UI para usuarios

En una Web UI es importante centrarnos en el aspecto humano (usuario), por lo tanto, el diseñador trabajará pensando siempre en el comportamiento e interacción del ser humano con las plataformas digitales.

El diseñador de la interfaz de usuario es fundamental para desarrollar esas actividades y deben utilizar herramientas como patrones, espacios y colores para guiar al usuario.

La palabra clave es "intuitivo". Es importante asegurar que la interfaz de la aplicación sea atractiva, visualmente estimulante y tenga el diseño apropiado para que coincida con el propósito y personalidad de la aplicación.

Si se logra eso, nos aseguramos también que cada elemento visual se sienta unido y sea estéticamente atractivo para el usuario, ya que él es el centro de esta experiencia.

Imagen: Unsplash

Comunica visualmente de acuerdo a las reglas del UI

La comunicación visual de UI se centra en la experiencia visual del usuario. Esto se determina en la forma de interacción entre un usuario y la interfaz, esto ya sea en una aplicación, página web o videojuego.

Se trata de cómo el usuario navega de A a B a través de los diferentes puntos de contacto visuales, mediante botones o deslizando las imágenes. Se debe diseñar cualquier tipo de elemento visual, incluyendo el diseño de pantalla, transiciones, animaciones de interfaz y cada micro interacción.

Investiga para el proceso de diseño UI

Los diseñadores UI tienen que asegurarse de que el lenguaje visual que elijan se ajuste a la clase de aplicación que están trabajando. Con la investigación, podrían predecir las expectativas del usuario. Es importante hacer un research sobre cómo se han desarrollado otras aplicaciones dependiendo de la categoría de cada marca.

Hay muchas lecciones de diseño que se pueden aprender del trabajo que otros diseñadores uI han realizado. La estética que eligen depende de ellos, pero siempre hay reglas básicas o la necesidad de ajustarse a las expectativas del usuario.

Consejos para el diseño de interfaz

Hay puntos importantes que debes tener en cuenta al momento de diseñar una interfaz:

Siempre recuerda que los usuarios son personas con necesidades, por lo que te recomendamos seguir estas pautas:

Hacer que los botones y otros elementos comunes funcionen de manera predecible.

Mantener una alta capacidad de descubrimiento.

Mantener las interfaces simples.

Respetar los ojos y la atención de los usuarios con relación al diseño.

Intenta minimizar el número de acciones para realizar tareas.

Mantener la consistencia de la marca a través de la navegación.

Imagen: Creative Market

¿Cómo trabajar en UX y UI?

Para trabajar como UX y UI no es necesario estudiar una carrera de diseño. Algunos UX y UI siguieron las carreras de ciencias de la computación o desarrollo web y en el camino descubrieron el UX design y UI.

También están los que estudiaron arquitectura o psicología, carreras que parecen no tener nada que ver con UX y UI, pero que, en realidad, sí están conectadas.

Esto quiere decir que, si estudias ciencias de la computación, diseño o incluso psicología, luego puedes especializarte en esta carrera.

Capacítate. Toma cursos de UX y UI, inscríbete en workshops y conferencias, lee libros y artículos sobre experiencia del usuario y diseño de interfaz, estudia casos de éxito de UX y UI. Sigue a los profesionales que hablan de UX y UI.

Aprende a usar las herramientas UX y UI adecuadas. En el siguiente punto encontrarás algunas de ellas.

Gana experiencia en UX y UI. Si recién estás comenzando, puedes armar un proyecto propio. También puedes empezar un proyecto para un amigo. De esta manera, aplicarás todo lo aprendido a un producto o servicio real.

Con dichas experiencias, la siguiente recomendación es crear tu portafolio. Es importante que conozcas páginas web para crear un portafolio profesional y empezar a exhibir tu talento en diferentes medios.

Participa de la comunidad de UX y UI. Puedes seguir grupos en LinkedIn o Facebook, inscribirte a eventos, seguir canales de YouTube de UX designers, escribir artículos en Medium, etc.

Sé curioso y un eterno aprendiz. Para ser un UX o UI, es necesario ser alguien con ganas de aprender, investigar y probar.

¿Cómo optimizar el diseño UX de un sitio web o una aplicación?

Como ya estás lo suficientemente informado sobre qué es UX/UI hasta este punto, probablemente ahora tienes curiosidad en saber cómo se optimiza la experiencia del usuario en un sitio web o en una aplicación. Vamos a resumirlo en tres simples pasos para que te des una idea. Lo primero que debes saber es que no es necesario enfocarse solamente en el aspecto del diseño gráfico, en la redacción y otros factores no menos importantes del diseño UX.

Lo que hay que hacer es concentrarse primero en los usuarios (Por eso, en la sigla UX, aparece la "U" de primero). Piensa en que vas a darle a los usuarios lo que buscan y de la mejor manera posible. Y esto lo lograrás de varias maneras que te explicamos a continuación.

1. Pon atención a los fallos de UX en tu sitio web
Entonces, ¿cómo trabajar en UX y UI?
En primer lugar, asegúrate de que tu sitio web sigue los principios básicos del diseño UX. Antes que nada, tú mismo eres un usuario, por lo que muchos elementos de rendimiento son estándar y no necesitan que hagas un estudio complejo y profundo para evaluarlos.

Por ejemplo, ¿has oído acerca de la ergonomía de diseño web? Pues bien, a través de un análisis de accesibilidad, puedes identificar importantes oportunidades de mejora como el tiempo de carga, la compatibilidad de los navegadores, la coherencia de los colores, etc.

Ahora que tienes claro qué es UX/UI, puedes intentar identificar tú mismo los fallos de UX de un sitio con nuestro formato de checklist en Excel para descargar gratis.

2. Inspecciona los principios básicos de UX

En el siguiente paso para optimizar el diseño de UX de tu sitio web es necesario aplicar los principios básicos de UX:

Si después de haber inspeccionado estos principios UX, determinas que el sitio necesita una gran cantidad de cuestiones básicas que optimizar, entonces debes tomar la decisión de llevar a cabo una revisión completa de UX del sitio.

3. Haz una investigación de usuarios

Qué bien que no te quedaste solo con la duda de saber qué es UX, sino también te interesaste en aprender cómo optimizar el diseño UX de un sitio web o una aplicación. En este último paso, te darás cuenta de que hay muchas áreas en las que necesitarás analizar estadísticas para establecer una estrategia eficaz de optimización de la UX.

Para esclarecer lo que buscan los usuarios de tu sitio o de tu aplicación, y lo que mejor funcionará para tu UI, debes poner en marcha varias estrategias:

Mapa de calor (heatmap): esta herramienta te permite grabar a los usuarios por la interfaz de usuario o UI para ver por dónde navegan y en qué elementos hacen clic.

Pruebas A/B: son una técnica que te permite probar dos variaciones de una misma página para ver cuál tiene mejores "leads". Cuando pruebas diferentes estructuras, textos o funcionalidades, puedes comparar la efectividad de las características entre ellos.

Encuestas: otra alternativa de optimización de diseño de UX de un sitio es entrevistar a los usuarios para hacerles preguntas sobre el diseño UI y sus productos. De este modo, verás qué obstáculos e impedimentos encuentran los usuarios para después tomar decisiones sobre ellos.

Pruebas de usuario: las pruebas de usuario te permitirán ver directamente cómo se comportan los usuarios en un escenario determinado con respecto a la UI. Este es, sin duda, uno de los métodos más eficaces para optimizar el diseño UX de un sitio.

¿Qué tal te parecieron estas estrategias para mejorar la experiencia de usuario de un sitio o una aplicación? Por ejemplo, la experiencia del usuario (UX) en aplicaciones como Google es muy personalizada. Google te sugiere viajes teniendo en cuenta la ubicación.

Según el lugar donde te encuentres, el buscador nos sugiere posibles destinos, restaurantes cercanos y vuelos desde nuestra ciudad. Esta personalización agrega comodidad, facilidad de uso y claridad a la UX. Ahora, sigamos aprendiendo. ¿Qué tal si a continuación te enteras de la historia del UX design? ¡Seguimos!

¿Cuál es el origen del diseño UX?

Para ir a la verdadera raíz de lo que es el UX, debemos retroceder años atrás hasta la Revolución Industrial. Gracias a los avances tecnológicos del siglo XIX y XX, cuando los hombres de negocios veían la manera de mejorar sus procesos de trabajo para optimizar el tiempo de producción, aparecen los primeros esbozos del UX en el mundo.

Casos reconocidos son los de Frederick Winslow Taylor y Henry Ford. En aquellos años, ya existía una preocupación constante por investigar el proceso de producción y cómo éste se relacionaba directamente a la interacción de los trabajadores y sus elementos de trabajo.

La práctica de investigar para encontrar soluciones en un entorno de producción fue perfeccionándose hasta adquirir una metodología que se aplicaba en base a experiencias previas (como la de Ford) y adaptándolas a nuevas situaciones.

Donald Norman, una autoridad en los estudios relacionados al campo de las experiencias cognitivas y productos tecnológicos, tuvo el cargo de Arquitecto de Experiencia de Usuario en los laboratorios de Apple.

Desde entonces, el término no ha dejado de expandirse hacia diferentes ramas de la tecnología.

¿Cuáles son las metodologías UX/UI más comunes?

Para saber qué es UX y conocer sus principales componentes, debes saber que existen diferentes metodologías UX que se basan en una variedad de procesos, métodos y prácticas que buscan las mejores maneras de satisfacer a los usuarios.

A continuación, te presentamos algunas de ellas:

Metodología Lean

De acuerdo con Oreilly, la metodología de la UX clásica se centra en requisitos y entregables. Por otra parte, la metodología Lean UX, de Jeff Gothelf, propone operar el UX en un entorno ágil; es decir, acelerando los procesos de diseño en función a los usuarios.

El origen de Lean UX proviene de Lean Manufacturing, un método implementado por Toyota que buscaba reducir el tiempo de planificación y producción de sus autos. ¿Qué es lo que hizo Toyota? Invitó a sus clientes a participar de los procesos de producción, poniéndole especial atención a sus opiniones y comentarios.

¿Qué logró Totoya con esta decisión?

Su objetivo se centró en seguir los requerimientos de los usuarios eliminando los desperdicios que no sean útiles para ellos, logrando que el proceso de producción sea más ágil y se alcancen los objetivos en un periodo más corto.

Imagen: Unsplash

Diseño centrado en el ser humano

En el UX, el diseño centrado en el ser humano, comprende al usuario final mediante la construcción de empatía a través de la investigación y experiencia del usuario. Comprende también los objetivos de la marca mediante el conocimiento del valor para el negocio.

Así como para el usuario comprender la tecnología es fundamental, ya que puede utilizarla y aprovecharla al máximo, también es importante para el negocio centrarse en conocer a sus usuarios y clientes.

Esta acción genera una relación de valor, haciendo más eficiente y efectiva la experiencia con el fin de lograr que tenga un sentido para sus usuarios finales.

El UX es fundamental para la cadena de valor de un producto o el journey de un usuario, pues asegura que en cada etapa en la que se involucren demandas y soluciones, brinden beneficios para el negocio y los consumidores acompañándolos en el proceso de entrada y salida.

Design Sprint

Es una metodología UX puesta en práctica oficialmente y a escala por Jake Knapp y Google Ventures. El design sprint (o sprint de diseño en español) es similar al método UX clásico, pero en realidad es mucho más rápido y efectivo.

¿Qué es un sprint? Según Google Ventures, "el sprint es un proceso de cinco días para responder preguntas comerciales críticas mediante el diseño, la creación de prototipos y la prueba de ideas con los clientes".

En suma, un sprint te permite obtener datos claros de un prototipo realista en un periodo de tiempo muy breve, sin necesidad de construirlo y lanzarlo.

Imagen: GV Design

¿Cómo hacer un design sprint?

Sigue estos pasos que propone Google Ventures a lo largo de tu semana y empieza con tu estrategia UX hoy mismo:

El lunes: mapea el problema y elige un lugar clave para concentrarte.

El martes: esboza las soluciones de la competencia en papel.

El miércoles: toma decisiones difíciles y convierte tus ideas en hipótesis comprobables.

El jueves: elabora un prototipo de alta fidelidad.

Y el viernes: prueba ese prototipo con usuarios reales.

Metodología de doble diamante

Esta técnica fue creada en 2004 por el Design Council de Reino Unido. Este tipo de diseño UX cuenta con una gran ventaja ya que puede realizarse tanto por expertos en la temática como por novatos que recién comienzan. El objetivo principal de esta metodología de diseño UX es resolver problemas complejos mediante la respuesta a necesidades concretas.

¿Por qué razón se llama doble diamante? El diagrama que representa esta manera de emplear el diseño UX está justamente representado por dos gráficos en forma de diamantes.

Este diagrama cuenta con cuatro fases específicas. Las dos primeras se encargan de la definición del problema y las hipótesis de sus posibles respuestas. Por su parte, las segundas definen de manera concreta cuál será la solución y la implementan mediante un nuevo diseño UX. La cuatro fases de esta metodología son:

Fuente: Kushki

Metodología agile

Esta metodología nace en Estados Unidos en el año 2001 y se basa en el planeamiento de los pasos a seguir pero con la posibilidad de tomar las mejores alternativas disponibles llegado el momento. Los cuatros valores que cualquier proyecto de diseño UX debe seguir si quiere contar con este método son:

Se implementa en cinco etapas principales:

Diagnóstico: involucra la participación tanto de los diseñadores, como del cliente y los desarrolladores . Se basa en el análisis de los requerimientos y una lluvia de ideas por parte de los creativos.

Diseño: incluye la documentación del diseño y el prototipado del sitio web o la app.

Desarrollo: es la construcción, las pruebas, la revisión y la clarificación. Se entiende como un proceso iterativo que va y vuelve sobre posibles ideas.

Aseguramiento de Calidad: en varias pruebas y testeos, se produce la identificación y la resolución de defectos.

Puesta en producción y venta.

Tendencias, cursos y herramientas de UX/UI

Como te has dado cuenta, aunque UI y UX son dos aspectos diferentes en el diseño web, funcionan de la mano. Mientras que la UI se enfoca en el diseño de un sitio web y cómo los usuarios interactúan con él, UX se centra en la experiencia que tienen los internautas a medida que usan sus productos o servicios. Dicho esto, veamos cuáles son las últimas tendencias, cursos y herramientas de UX y UI.

¿Cuáles son las últimas tendencias de UX/UI?

El 2020 fue el año donde el UX se concentró en la investigación y comprensión de los usuarios. Ahora, el 2021 exige que el UX Designer trabaje de la mano de las áreas de marketing y desarrollo del producto.

Como afirmamos, el UX Designer es un profesional multidisciplinario que se relaciona con otras áreas. Si lo haces, podrás comprender más a tus usuarios. Asimismo, conocer los comportamientos y reacciones del target permite que puedas transferir las emociones de la marca de manera más profesional.

De este modo, el UX 2021 tiene como objetivo generar experiencias únicas aprovechando el contenido comercial de la empresa. Llegar a este punto de investigación de mercado te aproxima a generar clientes satisfechos.

¿Qué tendencias trae este UX/UI 2021? El protagonista será el espacio vacío. Ya lo sabes, si tienes productos visuales muy cargados, los usuarios se confunden y distraen en lugar de concentrarse en algo específico.

Debido a lo anterior, a continuación te presentamos 3 tendencias en UX que debes tener en tu radar si tienes la intención de lanzar un sitio web para tu marca o tu idea de emprendimiento.

Minimalismo

Como lo comentamos anteriormente, una de las tendencias en experiencias de usuario consiste en los espacios vacíos.

El minimalismo ha tenido un importante protagonismo durante los últimos años no solamente en el diseño web, sino también en el diseño de aplicaciones e, incluso, el diseño de videojuegos.

Por tal motivo, diseñar una página web que contenga pocos elementos y que no sature la vista de los espectadores, será de gran importancia para motivarlos a continuar navegando.

Quizás, el ejemplo más claro sobre diseño web minimalista lo podemos identificar en Apple, pues cada elemento de su página oficial tiene un espacio adecuado y una proporción que genera comodidad visual.

Imagen: Apple

Interfaces interactivas

Imagina entrar a una página web y notar que, mientras navegas en ella, puedes interactuar con los elementos en pantalla como si fuera un videojuego. Las tendencias en UX y UI tienen la intención de involucrar directamente a los usuarios e incentivar su participación a través de dinámicas dentro de sus interfaces.

Aunque ese tipo de diseño de interfaz requiere un mayor nivel de complejidad, te aseguramos que causarán un impacto positivo en los internautas. Un buen ejemplo es la página web de Prometheus, una empresa de sostenibilidad ambiental cuya experiencia de navegación es un viaje visual que cuenta una historia a través de animaciones dinámicas.

A este proceso se le conoce como brand story y es importante que, además de utilizarlo como contenido para redes sociales, contemples la posibilidad de contar historias con el diseño de interfaz.

Para ello, puedes utilizar esta guía para armar un brand story y cautivar a los usuarios a través de narrativas innovadoras que dejen una huella imborrable en sus memorias.

Imagen: Prometheus

Interfaces con movimiento

Cada vez que ingresamos a un sitio web es habitual hacer scroll con nuestro mouse y notar que el desplazamiento se lleva a cabo de manera vertical. Esto no es ninguna sorpresa, pues así funcionan la mayoría de las páginas. Sin embargo, piensa en una interfaz en la que, al querer desplazarte hacia alguna dirección, descubras que todo cambia de color y de posición.

Esta tendencia en diseño de interfaces y experiencia de usuario consiste en diseñar páginas web con elementos en movimiento. No nos referimos a videos o personajes animados en el home de una página, sino a un diseño de interfaz que cambie de aspecto al pulsar algún botón para mostrarte nueva información.

Esto motivará enormemente a que los usuarios conserven su interés por navegar en la página y quieran explorar hasta el último rincón de ella. Te recomendamos entrar al sitio web de waaark. un estudio creativo que aplica al pie de la letra lo anteriormente mencionado.

Imagen: waaark

Los mejores cursos para aprender UX/UI

Ya estás casi listo para crear tu primer diseño UX. ¿Sientes que te falta un poco de entrenamiento? Revisa nuestros cursos online y elige el más adecuado para tus necesidades.

Curso online de Fundamentos de UX & UI

Si recién te inicias en el mundo del UX y el UI, este curso introductorio es ideal para ti. Además de aprender la importancia del diseño de experiencia de usuario, en las clases de fundamentos de UX/UI verás las siguientes actividades:

Curso online de Diseño Web Freelance

¿Te gustaría comenzar a profesionalizarte en el diseño UX y ser tu propio jefe? Te recomendamos nuestro curso online de Diseñador Web Freelance en donde aprenderás las mejores prácticas de una especialista independiente. Para sacarle el mayor provecho a este curso necesitarás:

Un dominio y hosting propio para practicar lo que aprendas. Si bien este paso es completamente opcional, todo diseñador UX trabaja en base a un producto digital y tenerlo a mano te será super útil.

Un archivo de Google Docs para plasmar todas tus ideas y no perder tus avances.

Algún software de diseño que te permita maquetar el contenido del sitio.

Además de conocer los fundamentos del diseño UX, en este curso verás cómo crear tu propio negocio freelance, cómo conseguir tus primeros clientes y cómo gestionar tu trabajo diario.

Curso online de Fundamentos del diseño de interfaces

Una vez que ya conoces qué es el diseño UX y en qué se diferencia del UI, es momento de comenzar a diseñar tus propias interfaces. En el curso online de fundamentos del diseño de interfaces aprenderás cómo evaluar la interacción de un usuario con la UI y cómo su experiencia con el diseño de interfaz.

Mediante ejemplos prácticos, podrás analizar los diversos tipos de arquetipos de interfaces y cómo el usuario se comporta ante ese diseño de UI. De esta manera, comprenderás cómo evaluar los distintos escenarios que pueden darse y cómo aprovecharlas o proponer mejoras en el diseño de la interfaz de usuario.

Asimismo, verás la importancia de pensar el diseño UI desde el uso del móvil y cómo modificar los aspectos de una interfaz en caso de que se diseñe para una aplicación. Por otra parte, obtendrás conocimientos básicos en el funcionamiento de Sketch, Figma y Adobe XD, las herramientas de diseño de interfaz más usadas.

Herramientas gratuitas y de pago para UX/UI

Ya hablamos de las diferentes metodologías de diseño UX y la importancia del prototipado en cada una de ellas. Aquí te dejamos una serie de herramientas gratuitas que te serán muy útiles a la hora de crear tus propios diseños.

1. Justinmind

Esta herramienta de prototipado de interfaces de páginas web y aplicaciones se encuentra disponible para sistemas operativos Windows, Mac, iOS y Android. Si bien su versión de pago no es muy costosa, con su versión gratuita podrás hacer mucho más de lo que te imaginas. Cuenta con dos paneles principales que te permitirán desarrollar tus diseños UX.

Por su parte, en los paneles dinámicos podrás colocar los elementos que quieras en cada área y así simular botones, cambio de pestaña y otros contenidos. En la sección de eventos podrás indicar acciones sobre los eventos que recién creaste.

2. Invision

Si recién estás comenzando, esta herramienta es ideal para que practiques tus primeros diseños UX. Con su versión de prueba podrás crear hasta cinco proyectos de principio a fin y comenzar a crear desde el momento cero. ¿Lo mejor de Invision? Es sumamente intuitiva y también profesional: ¡puedes sincronizarla con Illustrator y Photoshop!

3. Moqups

Esta herramienta se encuentra en la web permite la creación de Wireframes, maquetas, diagramas y prototipos colaborando en tiempo real con el resto de tu equipo de diseño UX. Si bien puedes crear tu cuenta de manera gratuita, para aprovechar todas sus bondades será mejor que te suscribas a algunas de sus opciones de pago.

Una gran ventaja de esta herramienta es que cuenta con componentes ya diseñados que te permitirán hacer tu boceto del producto UX más rápido. Además, no debes instalarla en tu ordenador, por lo cual no te ocupa espacio.

Fuente: Pexels

¿Aún quieres conocer más herramientas para diseñar UX? Revisa nuestra nota en donde te contamos cuáles son los mejores programas para UX que todo diseñador de interfaces debe conocer..

4. UXPin

Es una herramienta para UX design ideal para la creación de prototipos interactivos, sistemas de diseño y documentación.

UXPin te ofrece una experiencia más realista por medio de interacciones animadas para experimentar tu producto como si fuera real.

Algunas de sus funciones incluyen: variables, interacciones condicionales, expresiones, estados interactivos, generador de datos, etc. Con UXPin podrás pasar de lo-fi a hi-fi en segundos utilizando elementos personalizables prefabricados de su bibliotecas de interfaz de usuario o elementos importados de tu propia biblioteca de Sketch.

Su editor moderno e intuitivo hace que la curva de aprendizaje de UXPin sea sencilla, por lo que no se requiere una capacitación extensa para comenzar a diseñar en UXPin.

Todo lo creado en UXPin se basa en código html, css y js, es decir, la misma tecnología con la que trabajan los desarrolladores, por lo que tu código siempre coincidirá con tu diseño.

Imagen: UxPin

5. Clicktale

Es una herramienta para UX design muy útil, pues analiza el comportamiento de los visitantes de páginas web con mapas térmicos. Clicktale transforma todas las interacciones de los clientes en información y visualizaciones para optimizar estratégicamente tu sitio y obtener el máximo ROI. (Retorno sobre inversión).

También te permite idear y ejecutar pruebas A/B y multivariables basadas en datos inteligentes impulsados por el comportamiento de los usuarios.
Una herramienta de prototipos para UX Design
Con Clicktale podrás recrear patrones de comportamiento de navegación in-page, analizar tiempos de llenado y grabar las sesiones de los usuarios de manera anónima.

Imagen: Increnta

6. Smartlook

Esta herramienta registra a los usuarios en sitios web y aplicaciones móviles con funciones que te permiten encontrar información útil, incluso, en miles de grabaciones durante poco tiempo. Esto la convierte en una de las herramientas para UX Design más atractivas.

Gracias a sus tablas de retención, puedes descubrir patrones en el comportamiento del usuario e identificar cuándo tienen dificultades para adoptar nuevas funciones. Las tablas de retención son la mejor manera de acelerar la reducción de pérdidas y concentrarse en ayudar a sus usuarios actuales.

Con Smartlook, podrás crear funnels a partir de cualquier evento y ver las estadísticas del funnel inmediatamente después de configurarlo, las grabaciones también están disponibles de inmediato. Incluso podrás ver a las personas que abandonaron el funnel o tienen dudas sobre un campo de formulario.

Imagen: Smartlook
Una herramienta de análisis para UX Design
7. Adobe Target

Es una herramienta que forma parte de Adobe Marketing Cloud. Se presenta como una solución que cuenta con todo lo necesario para "adaptar y personalizar la experiencia de los clientes a fin de maximizar los ingresos de los sitios web y móviles, aplicaciones, medios sociales y otros canales digitales".

Dentro de sus funciones, Adobe Target te permite hacer pruebas A/B y multivariable en cualquier canal y en todo momento. Su automatización por IA a escala te ayudará a realizar pruebas personalizadas por cada visitante.

Imagen: Pinterest

8. UsabilityHub
Una herramienta de grabación de sesiones para UX Design
Se trata de una plataforma de investigación de usuarios remotos que te permite tomar mejores decisiones de diseño en base a validaciones (sin mucho esfuerzo) con usuarios reales.

Con UsabilityHub podrás hacer pruebas de interfaces, flujos de interacción, iconografía, etc. Sus funciones están pensadas para ayudarte a crear experiencias intuitivas y agradables para los usuarios.

Si eres un analista de marketing digital, UsabilityHub te proporcionará las herramientas para ajustar las páginas de destino, mensajes y todo lo que ayude a optimizar las tasas de conversión en campañas de marketing.

También, es una plataforma muy útil para Product Managers, pues facilita la toma de decisiones. Así, podrás asegurarte de ofrecer las funciones adecuadas a los usuarios adecuados.

Imagen: Usabilty Hub
Una herramienta UX Design para hacer pruebas A/B
Ahora que ya sabes qué es UX y qué es UI, ¿estás listo para comenzar tu aventura por el diseño web? Como pudiste notarlo a lo largo de esta nota, estas disciplinas son cada vez más necesarias para las marcas que quieran brindar experiencias enriquecedoras.

Además, internet está lleno de herramientas con los que podrás aprender sobre este tema, pero recuerda que en Crehana encontrarás los mejores cursos de Desarrollo web que te prepararán para afrontar el contexto laboral con el mayor profesionalismo posible.

Para finalizar, te invitamos a revisar nuestra guía sobre usabilidad web para que termines de complementar todo lo aprendido durante esta nota y comiences a diseñar interfaces inolvidables para tu audiencia.
Una herramienta para UX Design usada por Google y Amazon ¡Nos leemos luego!

# data[].attributes.attachment_link.description
Última actualización 23 de Febrero del 2022 Tiempo de lectura: Léelo en 7 min. Si alguna vez te has preguntado qué es UX o UI y por qué deberían convertirse en dos herramientas importantes en tu know how como profesional, en esta guía te traemos las respuestas necesarias.

# data[].attributes.attachment_link.readable_text
Can I make edits to a logo after purchasing it?

You can make a lot of minor edits (font, shape, color, etc.) to your logo. You can also download it as many times as you need. If you have an Unlimited plan or a Privilege plan, there are no restrictions: you can modify your logo design as many times as you like.

Is it really free to use?

You can create and modify a logo as much as you like entirely for free. You'll never have to pay to use the logo maker tool. All templates, icons and shapes are available for free for every user. When you're satisfied with your logo, choose the perfect package for your needs.

Do I need any experience in graphic design?

FreeLogoDesign logo maker is an intuitive tool, easy to use for everyone. Choose elements and drag-and-drop them anywhere you want on your canvas. Edit the text, color or shape of any element in your project. The only limit is your creativity.

What's included in the Basic package?

Our Basic package includes a high-definition image, ready to be used for web or print. You'll also get the SVG vector file of your logo and a PDF file. You can also decide to complete your package with add-ons, like business card templates, social media files, and a brand guide for an extra.

I don't know where to start. Are there any templates or examples I can start working with?

FreeLogoDesign offers a library of thousands of logo templates to browse through. Once you've chosen your favorite template, add one of thousands of icons available to customize your logo.

Where can I get inspiration to help me create my logo?

Read our blog articles and get inspired by our many posts on logo design and creation. Read tips and tricks to facilitate your logo creation or learn more about the rich history of famous logos.

How can I make a unique logo for free?

We believe it is possible to create a unique logo for free using our logo maker. First, you need to have an idea of the general style of your logo. Then, browse our logo templates and choose your favorite. To make it unique, customize every visual component: icons, fonts, colors, text, etc.

Are there any good free logo makers?

FreeLogoDesign is a free logo maker used every day by thousands of people around the world. As its name suggests, you can create and download a logo for free. This is the perfect way to try our tool to create all components of your brand identity.

How to make a business logo?

All businesses and companies need a logo. Therefore, where to start? First, we believe you should analyze your products and target clientele. It will help you create the perfect logo. Then, find your business name and note down logo styles you like.

# data[].attributes.attachment_link.title
Free Logo Maker | Create Your Own Logo | Free Logo Design

# data[].attributes.attachment_link.description
Try our free logo maker. Trusted by 30M+ businesses, our online logo generator makes it easy to find the best logo for your business. Make your logo now!

# data[].attributes.attachment_link.title
Freepik: Descarga gratis vídeos, vectores, fotos y PSD

# data[].attributes.attachment_link.description
Millones de recursos gráficos gratis ✓ Vídeos ✓ Vectores ✓ Fotos ✓ PSD ✓ Iconos. Todo lo que necesitas para tus proyectos creativos. #freepik

# data[].attributes.attachment_link.title
Free Vector Illustrations and Clipart Images

# data[].attributes.attachment_link.description
Explore a beautiful library of royalty-free clipart illustrations in PNG, SVG formats. Free vector, 3d, animated illustrations for commercial use.

# data[].attributes.attachment_link.readable_text
Crea y personaliza fácilmente ilustraciones creadas por artistas de todo el mundo. Pruébalo, es divertido.

¿Cómo funciona?

1. Elige un estilo

Elige una colección de varios estilos y temas creados por artistas de todo el mundo.

2. Personaliza el arte

Juega con las variaciones hasta que crees el arte que cuenta tu historia.

3. Úsalo en tu diseño

Descarga un PNG o SVG de tu creación y utilízalo en tu propio diseño.

Lo que la gente está diciendo

Ilustraciones de artistas de todo el mundo

Desbloquea tu creatividad

¡Creemos tu primera ilustración!

# data[].attributes.attachment_link.description
Con Blush puedes fácilmente añadir ilustraciones gratuitas a tus diseños. Juega con gráficas totalmente personalizables creadas por artistas de todo el mundo.

# data[].attributes.attachment_link.readable_text
Color

Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. Look to the system's color scheme for guidance when picking app tint colors that look great individually and in combination, on both light and dark backgrounds.

Use color judiciously for communication. The power of color to call attention to important information is heightened when used sparingly. For example, a red triangle that warns people of a critical problem becomes less effective when red is used elsewhere in an app for noncritical reasons.

Use complementary colors throughout your app. The colors in your app should work well together, not conflict or distract. If pastels are essential to your app's style, for example, use a coordinating set of pastels.

In general, choose a limited color palette that coordinates with your app logo. Subtle use of color is a great way to communicate your brand.

Consider choosing a tint color to indicate interactivity throughout your app. In Notes, interactive elements are yellow. In Calendar, interactive elements are red. If you define a tint color that denotes interactivity, make sure other colors don't compete with it.

Provide two versions of your tint color to make sure it looks good in both light and dark modes. When you use a system color for your tint color, you get automatic support for high contrast.

Avoid using the same color for interactive and noninteractive elements. If interactive and noninteractive elements have the same color, it's hard for people to know where to tap.

Consider how artwork and translucency affect nearby colors. Variations in artwork sometimes warrant changes to nearby colors in order to maintain visual continuity and prevent interface elements from becoming overpowering or underwhelming. Maps, for example, displays a light color scheme when using map mode but switches to a dark color scheme when satellite mode is activated. Colors can also appear different when placed behind a translucent element, or when applied to a translucent element, such as a toolbar.

Test your app's color scheme under a variety of lighting conditions. Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. Colors you see on your computer won't always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colors appear. If necessary, adjust colors to provide the best possible viewing experience in the majority of use cases.

Consider how the True Tone display affects color. The True Tone display uses ambient light sensors to automatically adjust the white point of the display to adapt to the lighting conditions of the current environment. Apps that focus primarily on reading, photos, video, and gaming can strengthen or weaken this effect by specifying a white point adaptivity style. For developer guidance, see UIWhitePointAdaptivityStyle.

Consider how your use of color might be perceived in other countries and cultures. In some cultures, for example, red communicates danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.

Avoid using colors that make it hard for people to perceive content in your app. For example, colorblind people might not be able to distinguish some color combinations, and insufficient contrast can cause icons and text to blend with the background and make content hard to read. For guidance, see Color and Contrast.

System Colors

iOS offers a range of system colors that automatically adapt to vibrancy and changes in accessibility settings like Increase Contrast and Reduce Transparency. The system colors look great individually and in combination, on both light and dark backgrounds, and in both light and dark modes.

Don't hard-code system color values in your app. The color values provided below are intended for reference during your app design process. The actual color values may fluctuate from release to release, based on a variety of environmental variables. Always use the API to apply system colors; for developer guidance, see UIColor.

iOS 13 also introduces a range of six opaque gray colors you can use in rare cases where translucency doesn't work well. For example, intersecting or overlapping elements - such as lines or bars in a grid - look better with opacity. In general, use the semantically defined system colors for UI elements.

Dynamic System Colors

In addition to tint colors, iOS also provides semantically defined system colors that automatically adapt to both light and dark modes. A semantic color conveys its purpose rather than its appearance or color values. For example, iOS defines colors for use in background areas and for foreground content, such as labels, separators, and fill.

iOS defines two sets of background colors - system and grouped - each of which contains primary, secondary, and tertiary variants that help you convey a hierarchy of information. In general, use the grouped set of background colors when you have a grouped table view; otherwise, use the system set of background colors. For developer guidance, see UI Element Colors.

With both sets of background colors, you generally use the variants to indicate hierarchy in the following ways:

Primary for the overall view

Secondary for grouping content or elements within the overall view

Tertiary for grouping content or elements within secondary elements

For foreground content, iOS defines the following colors:

Don't redefine the semantic meanings of dynamic system colors. To give people a consistent experience and ensure that your interface looks great in all contexts, use dynamic system colors as intended.

Don't try to replicate dynamic system colors. Dynamic system colors may fluctuate from release to release, based on a variety of environmental variables. Instead of trying to create custom colors that match the system colors, use the dynamic system colors.

Color Management

# data[].attributes.attachment_link.title
Color - Visual Design - iOS - Human Interface Guidelines - Apple Developer

# data[].attributes.attachment_link.description
Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. Look to the system's color scheme for guidance when picking app tint colors that look great individually and in combination, on both light and dark backgrounds.

# data[].attributes.attachment_link.description
Create and share color palettes for your UI, and measure the accessibility of any color combination.

# data[].attributes.attachment_link.description
Design with 15,00 Pantone® colors. Convert Hex, CMYK, and RGB to Pantone codes. Create and Save custom palettes. Sign up for Free.

# data[].attributes.attachment_link.title
Coolors - The super fast color palettes generator!

# data[].attributes.attachment_link.description
Generate or browse beautiful color combinations for your designs.

# data[].attributes.body
Android UI Kit

# data[].attributes.attachment_link.title
Figma - Material 2 Design Kit | Customize and Create Material Design's Baseline Design Kit provides all you need to create beauti...

# data[].attributes.attachment_link.description
Figma Community file - Customize and Create Material Design's Baseline Design Kit provides all you need to create beautiful apps, complete with components and theming guidance. Suggestions and/or feedback? Ping us @materialdesign on Twitter. Changelog 10.27.21 This kit is no longer updated by the Material Design team...

# data[].attributes.body
Componentes de Andriod

# data[].attributes.attachment_link.description
Build beautiful, usable products faster. Material Design is an adaptable system-backed by open-source code-that helps teams build high quality digital experiences.

# data[].attributes.body
Componentes de iOS

# data[].attributes.attachment_link.readable_text
Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the API Index for a complete list of each component and sub-component.

# data[].attributes.attachment_link.title
UI Components | User Interface Application Building Components

# data[].attributes.attachment_link.description
Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the API Index for a complete list of each component and sub-component.

# data[].attributes.attachment_link.title
Human Interface Guidelines | Apple Developer Documentation

# data[].attributes.attachment_link.description
The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.

# data[].attributes.attachment_link.description
Guidance for designing ethically humane digital products and services through patterns focused on user well-being.

# data[].attributes.attachment_link.description
Laws of UX is a collection of best practices that designers can consider when building user interfaces.

# data[].attributes.attachment_link.readable_text
Once you've got a basic understanding of what usability is, you need a firm grasp on how to measure it in your own designs. How do you know if your products are actually usable? Here, we'll share eleven ways to measure the usability of your products.

At first glance, "usability" may seem too vague or subjective to ever really know if your products are usable. But whether you're designing a login screen, a search experience, or anything else you can imagine, usability is essential!

This is why there are measures (known as heuristics) to help you understand how usable your products really are. Taken on their own, these heuristics are useful guides. Combined with usability testing, however, these heuristics have the power to (re)shape your designs and result in products that are more usable to more people-and more likely to succeed!

In this guide, we'll cover Jakob Nielsen's 10 fundamental usability heuristics, and go beyond these to offer up an eleventh that is critical to a truly usable product.

Here's what we'll cover:

1. Visibility of system status

2. Match between system and the real world

3. User control and freedom

4. Consistency and standards

5. Error prevention

6. Recognition rather than recall

7. Flexibility and efficiency of use

8. Aesthetic and minimalist design

9. Help users recognize, diagnose, and recover from errors

10. Help and documentation

11. BONUS: Accessibility and inclusion

12. Wrapping it up

1. Visibility of system status

This heuristic is all about communication. Make your products communicative and transparent about what they're doing and the status of the users' request or action. Make the system status clear to your user. This is especially critical in moments when the user has just submitted information or taken an action that they expect to result in something significant-like a transfer of money, the movement of a collection of files from point A to point B, a successful download or upload of content, etc.

Here's a quick example within the Music app on an iPhone. A user owns an album but wants to download it from the cloud.

When you download a file, it's common to see a progress indicator (perhaps one that includes time remaining) along with an icon, color indicator (usually something green), and/or a simple animation of the file "landing" on your hard drive. These are elements that make the system status visible to you.

When you book a flight or complete some other kind of purchase online, you've just handed over some pretty sensitive information (bank or card info). When you click that button to complete the purchase, you probably want to be met with more than a static screen. If the successful purchase isn't immediately confirmed, it's nice to know that at least your click was effective in initiating the process and how long you'll need to wait. This is where many products give users a loading page that indicates that the requested action is in process.

So how can you create better visibility of system status for your users? It's usually a good idea to go beyond simply adding a spinning wheel or a slow-loading progress bar (on their own, these can actually make the waiting worse).

While you probably don't want to let your users in on every aspect of what's going on behind the scenes, identify where the process is at and how much longer it will be-with as much specificity as possible.

2. Match between system and the real world

This heuristic ties into the fundamental UX concept of mental models. Your digital products need to work in ways that are congruent with users' other, dominant ways of understanding the world. Not only should you look at, and in many ways cooperate with, the ways in which your users' other digital experiences work, but you should also find ways to link their experience of your product to their non-digital realities.

By way of a very clear example, look at the trash bin on your computer. It's a trash can image that displays full when you've tossed files and empty when you've permanently deleted those files. This is a very user-friendly way of visualizing the process of deleting files-by utilizing something we can all relate to: taking out the trash.

Even the use of folder icons for those places where we can stash multiple files is a digital approximation of a real world object common to most office or school environments. We understand the concept of a folder and it provides a helpful visual representation for the process of organizing the content of our computers.

Amazon's Kindle is a fantastic example of this heuristic. An e-reader is, to some extent, a replacement for bound and published, paper books and periodicals, and the device uses language and images that are congruent with that mental model. The content you purchase is stored in your "library" where the content itself is displayed, visually, as a collection of book covers.

As you're reading, you can highlight text very much like you would if you were highlighting text in an actual book-with your fingertip as the highlighting instrument.

How can you make your digital products match the non-digital world?

First, look at other digital products. A lot of the work in this area has already been done, meaning that you can simply take care to keep your designs reasonably close to these existing mental models.

If you're designing a product that doesn't already have these mental models to rely on, look at the basic functions you need the code to create visual representations of. What are some non-digital metaphors you would use to explain that function to someone new to your product? That can be a good place to start.

3. User control and freedom
Wait. Where did the file go? Oh...no. Did I delete it?!
We've all had that moment. Having the ability (built into the system) to go back and undo an action or edit information is critical to good usability. Google Drive does a great job of this when it tells us an action has been completed and gives an option to undo the action, in case it was accidental.

But this heuristic doesn't only apply to lost files. Let's say you're shopping for jogging pants on Amazon and put a pair in your shopping cart (heuristic #2 at work there) to return to later.

A couple days later, you've got time to look around again, but you've forgotten that you put a pair in your cart already. You shop around the site, only to land on the same pair again (they just look that comfy). So you put them in your cart. Before you checkout, you survey the items in your cart and realize you were about to buy two pairs. Oops!

Conversely, maybe you've already got one pair of these pants and you decide you want to buy ten more.

Whatever the case may be, Amazon makes it easy for you to adjust the quantity before you complete the purchase.

Look for points along the user journey where mistakes are more likely to be made or when users are most likely to want to edit information, and find ways to make that task as easy and simple as possible.

4. Consistency and standards

This heuristic is all about Jakob's Law: "Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."

Your users don't want your product to function in surprise ways at every turn. In fact, they may not want any surprises at all! Unless you're designing a very specific kind of product, they haven't come to your product to solve a riddle. They just want to get something done. It's important that you make it easy for users to learn how your product works-and even easier to remember after they've gone away for a while.

The fastest way to accomplish this is by adhering to the ways most other products accomplish common tasks. And the best way to discover these commonalities is by conducting a competitive UX analysis. This process will help you to find what competing products are doing and what you might be able to improve on.

If you've got a revolutionary new way to do onboarding or login for your snazzy new mobile app, take some time to consider how users are accustomed to app onboarding and account login. If your new idea departs too far from what they're used to, it could be off-putting. If users have to remember how to login to their account every time, they might just stop trying.

Remember: Your ultimate goal is consistency and usability over novelty and surprise. Sometimes really outstanding usability (paired with some great microcopy and other enhancements) is just the surprise your users are looking for.

5. Error prevention

If you've ever filled out a poorly designed form and been met with an error message for an incorrect address or phone number, you've got first-hand experience in the importance of this heuristic. Directly related to the heuristic of user control and freedom (in terms of providing a way to undo an action or edit information), this heuristic focuses on catching errors before they happen.

By way of example, when creating an account on the Epicurious app, if a user re-types the password incorrectly, they 1) aren't notified about the error until after they click to submit, 2) have no way to see what they typed in order to locate the typo and correct it. So they have to type it all in again and hope for the best.

If you've ever sent that mortifying, accidental "reply all" email to colleagues or family members, you'll certainly appreciate that Gmail allows you to decide whether "reply all" is the default for your inbox or if you want to take extra steps to respond to the entire group.

Errors with some products (Epicurious onboarding, for example) are less dire than with others-if you're designing something for airline pilots to use in flight or for medical personnel to track patient treatment, for example. But no matter the scale of the error or how dire the consequences, if you don't prevent them before they happen, the consequences are less than desirable (at best).

So consider: What errors are your users likely to encounter? How might you take steps to prevent these errors before they take place?

Start by looking for errors that would have more critical consequences (like booking the wrong flight dates or shutting down an important program), and work your way down to those smaller errors that prove to be simply irritating (these are still important to pay attention to as they increase friction and user frustration with your product).

You don't want to overdo it with endless dialog boxes, asking users if they're sure they want to do X. This can be as frustrating as the errors themselves and make users feel like you don't trust them to do anything on their own. But here are a few ideas for how to prevent errors:

Change the color of the button to make it stand out

Give users options in search boxes to help them select the correct search query the first time around rather than finding the correct combination of words on the tenth iteration

Make forms more forgiving or provide appropriate constraints to show users what kind of information you need

6. Recognition rather than recall

Simply put: don't make your users work harder than they need to! Give them cues and reminders that help them complete tasks, rather than placing the burden of remembering on them. Your designs should always promote recognition over recall.

Recall is the process of remembering where you left off, who you spoke to last, how to go about this or that process. Recognition is the process of picking up cues that allow you to move forward in appropriate ways. Recognition is far and away the easier option because your brain can work in the moment rather than digging through memory to find your solution.

You can promote recognition over recall both by staying as close to your users' mental models for how they should go about a given process, and by ensuring you're organizing and presenting information in ways that make sense to them (this is where some good tree testing and card sorting will come in handy- two fundamental forms of usability testing).

Let's take an example many readers will relate to.

You realize you need to call a customer service line. This will strike fear and dread into the hearts of some, depending on whose customer service line we're talking about, but sometimes it just has to be done. Whether it's your bank, Amazon, a bureaucratic office, or that random store that was selling sweaters or boots on Instagram, you go into the process just hoping that they've made themselves easy to contact.

You go to their website and you look for a familiar cue-one that fits your mental model for how a lot of places provide a way to reach them: "Contact us" (or something along those lines). If all goes well, you find that button, click it, and see a list of numbers or means of reaching out to the correct team or department.

But what if you don't find that cue? Most of us have had the experience of looking all over a website, trying different links, or even hunting through microscopic copy at the bottom of the page to find any shred of copy that might indicate a means of contacting them.

If you've been on this particular journey with the same website before, the process relies heavily on your memory of how you finally figured it out last time. And if the last time wasn't in your recent past-well, good luck.

Recognition over recall. Make sure your navigation is clear, precise, and as simple as possible; provide visual cues; remind them when something time-sensitive needs to be done; alert them when you've made changes to a screen or a process.

7. Flexibility and efficiency of use

If you've ever used a keyboard shortcut to accomplish something on your computer system, in Photoshop, or anywhere else in your digital world, you know the importance of this heuristic. But even if technology is a mystery to you and you've never used a keyboard shortcut in your life, flexibility and efficiency of use is a critical measure of usability.

Here's an example from Figma. When you first join the platform, you're given a brief tour that introduces you to the key features and function of the platform. Then you dive in.

If you're just getting started, you might click on the grid icon and the click to create a frame. If you've used the program for a while, you might just tap "F" on your keyboard to accomplish the same thing.

If you've ever tried to use your bank's mobile app to transfer money, you've probably experienced a really great or really terrible example of this heuristic. The banking app N26, for example, makes it easy to see who you've sent money to in the past, or to set up a new recipient. If you had to set it up each time, you'd have to dig up bank details and input the information again every time.

8. Aesthetic and minimalist design

This heuristic is all about information hierarchy. A simple 5-second eye test can reveal a lot about the priorities your actual design is communicating. Show the screen you're designing to someone who hasn't seen it yet. Give them five second to look at it and then take it away and ask what the screen is about, what it's for, or what primary action you want users to take here. Chances are, you'll find at least some small ways to improve your designs-to simplify them, and to give priority to the primary goals of that page. After all, simplicity is often key to good UX design.

Let's have a look at a stunning example of this usability measure. Try the 5-second eye test on these two images-the GoDaddy homepage in 2015 versus that same page in 2020.

Here's the homepage on April 16, 2015. Bear in mind that this was only five years ago. If you'd like to really go back in time, have a look at WaybackMachine's calendar of GoDaddy updates (or try it for any site you're curious about).

The primary goals of the page are relatively clear, and the design is much improved from GoDaddy's early days, but most of the elements carry a similar visual weight, causing them to compete for attention. Have a look at the same page on April 16, 2020:

The design is much more minimalist, with clearer emphasis placed on the few things that GoDaddy really wants visitors to see and act on.

As you improve the aesthetic and minimalist design of your products, remember that you need to:

Place a visual emphasis on the 1-3 things that are most important for users who will see this particular page or screen. And be clear on the hierarchy-run tests to make sure what you think stands out does indeed stand out.

Keep the most important things "above the fold"-where users won't have to swipe or scroll to see it.

Do not underestimate the power of where you place different elements and the size and color of those elements.

9. Help users recognize, diagnose, and recover from errors

We've already talked about error prevention-but your designs won't be very usable if you count on these efforts from keeping any error from ever occurring and don't design for when errors do occur. Because, despite our best efforts, errors happen.

Think about the last time you encountered an error message that was some string of language that made absolutely no sense to you, with nothing but an "OK" button to click on. Or when you think an error of some kind has occurred, but you're left with no clue other than a screen that is eerily still-even though you've clicked to initiate the action. Thankfully, these scenarios play out less and less often in the design world.

It's a sign of great design when an error does occur and the system handles it in a user-centric way. If a user makes an incorrect attempt to login to their N26 bank account using touch ID, they're met with an error message that accomplishes three things:

1. It alerts them that there has been an error

2. It tells them what the error is

3. It gives options for how to correct the error

Users are prompted to "try again," with concise instructions for how to do so, and an alternate means of logging in ("enter password").

If users enter too many filters to a flight search on Google Flights, they're met with a message that tells them there's been an error, indicates why, and provides a fix. Users might click to clear all filters, or they might look to the search options at the top of the screen and modify their search terms from there.

10. Help and documentation

App onboarding pages or walkthroughs, chatbots, popovers, tooltips, videos, and more. These are all means of providing guidance to your users if they hit some kind of block in completing whatever they've come to your product for.

Providing clear, concise, and relevant documentation that is easy to access and understand is key to your product's usability. This is an important and integral part of your product-not an optional "extra."

If users are at a point of needing or asking for help, they're not in a position to work hard or fight for that information. Do usability testing on your solutions here to make sure that you're providing help in the best possible ways.

Asana does a great job of providing help tips that are relevant, easy to access, and even easier to understand. A quick scan of the homepage (post-login), and it's easy to spot the question mark icon.

Click on that icon, and you'll find a menu with a list of options, each of which will take you to a specific section of their help page (nicely named "Asana Guide"), which is itself organized in ways that allow users to tailor their learning to their needs and preferences. If you click on "Help with features," for example, you'll be taken to this page:

You can learn about the primary navigational features, go to the top of the page to search for other help options, or navigate to new topics in the tree menu along the left side of the screen.

If you type something into the search bar, the system will guess, based on what you're typing in, what specific help you're looking for.

If, however, you type something in that the system doesn't recognize or that doesn't match the title or tags, you'll find yourself on a page similar to a Google search containing a list of articles that might, hopefully, meet your needs. So as great as the help is, it relies to some degree on the user adapting to the system. This is relatively common in help indexes like this.

This is why providing help earlier and along the way can be helpful, through intuitive and responsive onboarding and tooltips. While you don't want to go overboard and make your helpfulness a nuisance to your users, you do want to make their going to a help page something of a last resort.

As you seek to provide help and documentation to your users, make sure

It's easy for users to search for or access your help features-the closer the help is located to the point of confusion or the gap in knowledge, the better (as long as users don't spend more time hashing through tooltips than they do actually accomplishing their task!)

Any help you provide is specifically relevant to the task users are trying to complete

Your guidance gives users concrete steps they can carry out (and provide links and shortcuts when they're relevant)

11. BONUS: Accessibility and inclusion

Imagine that you've designed what you believe is the most perfectly usable product in the world.

Now imagine that a user approaches your product-but they've experienced vision loss, hearing loss, or limited use of their body in any capacity. Perhaps they are a person who identifies as a gender that's different from the one tied to their sex assigned at birth. Perhaps they are not white, middle-class, or native English speaking. Perhaps there are simply aspects of their life, identity, or experience that sets them outside of the statistical majority of the expected users for your product.

Attention to accessibility and inclusion will help you ensure that you haven't essentially put a locked gate on that whole experience or set it up as Kat Holmes might call an elementary school playground where some kids are excluded for arbitrary reasons.

While Nielsen's 10 core measures of usability certainly contribute to the accessibility and inclusion of the products and experiences you design, they do not ensure that there are not fundamental barriers users might encounter that prevent them from using your product and enjoying that experience just as much as the next user.

If you haven't tended well to your image titles, alt text, and captions, your product is not entirely usable.

If you haven't been mindful of the language you use in anchor text, the kinds of people who are represented in your images and icons, the assumptions that your color choices might make about your users (ie, "it's an app for women, so it's pink"), and how you talk about people and the options you give users to represent themselves in forms, it's likely that you're unintentionally excluding people from the full and delightful experience you've designed.

The aim of designing for accessibility is to ensure that users are not excluded on the basis of their abilities-whether physical, emotional, or cognitive. Close to accessible design is inclusive design, which really just takes the goals of accessibility and applies them to people of various cultural backgrounds, ethnicities, body types, and gender identities.

It is the work of intentionally including these other needs so that we don't risk unintentionally excluding people based on these other needs (to paraphrase Kat Homes).

If you'd like to learn more about accessibility and inclusion, check out these resources:

12. Wrapping it up

There you have it. Nielsen's 10 usability heuristics-plus one! Whether you're simply reviewing your deigns, preparing for usability testing, or conducting a UX audit, these should be helpful in guiding your observations.

Really, the most important thing you can do as you go about your work as a UX designer is to test, test, test the usability of your products. These heuristics are simply helpful guides in helping you see ways to improve your designs and avoid usability pitfalls.

To learn more about UX design, check out these articles:

This article is part of:

Emerson is a New Mexican transplant to Berlin. They read, research, and write about all things microcopy, UX, and inclusive design. When they're not writing, they're tucked away in some corner of Berlin with a beverage, a book, and their guardian cat Clementine.

# data[].attributes.attachment_link.title
11 Usability Heuristics for UX Designers (with Examples!)

# data[].attributes.attachment_link.description
Once you've got a basic understanding of what usability is, you need a firm grasp on how to measure it in your own designs. How do you know if your products are actually usable? Here, we'll share eleven ways to measure the usability of your products.

# data[].attributes.attachment_link.readable_text
3D Devil Emoji - Winful

The UX field was born on the desire to improve the experiences and interactions that people have with products and services. But what happens when designers use those powers for evil? When designers use UX to cause users to take specific actions maliciously, these are what's called dark UX.

The definition of dark UX, according to Harry Brignull, the UX practitioner who coined the term is:

"A user interface that has been carefully crafted to trick users into doing things..they are not mistakes, they are carefully crafted with a solid understanding of human psychology, and they do not have the user's interests in mind."

Dark UX is when designers create an experience that pushes users in a direction that benefits the interests of the company rather than the user.

This list is comprised of dark patterns from Harry Brignull's writing and academic research. The text below is quoted from Brignull's Typology.

"You set out to do one thing, but a different, undesirable thing happens instead."

It's free; we just need your credit card and social security number first.

"Adverts that are disguised as other kinds of content or navigation, in order to get you to click on them."

So there aren't singles in my area waiting to meet me?

"The design purposefully focuses your attention on one thing in order to distract your attention from another."

Look here, now click there, and check this box - and boom! You've just sold your soul to the devil.

"The product asks for your email or social media permissions under the pretense it will be used for a desirable outcome (e.g. finding friends), but then spams all your contacts in a message that claims to be from you."

No wonder I have no friends.

"You get to the last step of a checkout process, only to discover some unexpected charges have appeared, e.g. delivery charges, tax, etc."

The price seems to keep going up as I progress through the checkout process...hmm.

"You respond to a question, which, when glanced upon quickly appears to ask one thing, but if read carefully, asks another thing entirely."

If you're not paying attention, the devil can trick you into opting into his dreaded email newsletter that's impossible to unsubscribe from.

"Making the user feel guilty for not selecting the suggested option. Generally, the company in question uses copywriting to shame the user for not selecting the company's desired choice."

If you don't do what we want you to do, then you suck.

"The design makes it very easy for you to get into a certain situation but then makes it hard for you to get out of it (e.g. subscription)."

You can check out any time you like, but you can never leave!

"This bamboozles users into believing an item is in high demand which puts them under pressure to make a quick buying decision. Users feel that if they don't make a decision soon then they will lose out on this novel opportunity."

If it's so popular, then why do you show me an Instagram ad for it every day?

"You attempt to purchase something, but somewhere in the purchasing journey, the site sneaks an additional item into your basket, often through the use of an opt-out radio button or checkbox on a prior page."

Stay focused, or you may unwittingly hand over the rights to your firstborn.

👋 Let's be friends! Follow me on Twitter and Dribbble and connect with me on LinkedIn. Don't forget to follow me here on Medium as well for more design-related content.

More by me...

# data[].attributes.attachment_link.description
The UX field was born on the desire to improve the experiences and interactions that people have with products and services. But what happens when designers use those powers for evil? When designers use UX to cause users to take specific actions maliciously, these are what's called dark UX.

# data[].attributes.attachment_link.readable_text
What's your instinctive approach to decision making? If you're naturally optimistic, then chances are you don't always consider the potential downsides to a decision. Similarly, if you're very cautious, you might not focus on opportunities that could open up.

Whatever your gut tells you, the best decisions usually come after you've explored several ways of viewing a problem.

However, it's easy to feel confused if you try to consider multiple angles at once. And things can get even more complicated - even combative - if your whole team weighs in with different points of view.

"Six Thinking Hats" is a way of investigating an issue from a variety of perspectives, but in a clear, conflict-free way. It can be used by individuals or groups to move outside habitual ways of thinking, try out different approaches, and then think constructively about how to move forward.

In this article, we'll explain the principles behind the Six Thinking Hats technique and examine how it could improve decision making for you and your team.

Who Invented "Six Thinking Hats"?

The Six Thinking Hats approach was created by Edward de Bono, a Maltese physician, psychologist and philosopher. He used it in his work advising government agencies, but he also wanted it to be a practical tool for everyday problem solving. It first appeared in his 1985 book of the same name, which has since been revised several times. [1]

De Bono - who died in 2021 - was also the inventor of "lateral thinking," a method of solving problems indirectly, often in creative and surprising ways. Similarly, Six Thinking Hats is a way to understand and explore different types of thinking.

Six Thinking Hats for Decision Making

The Six Thinking Hats technique gets you to look at a problem in six different ways. It takes you and your team beyond any instinctive positions, so that you explore a range of perspectives. That way, you can carefully consider each one, without having to argue your case or make snap decisions about what's "right" or "wrong."

By the time you've tried out all six hats, you should have a rich collection of insights that will help you to decide your next steps.

Here's what each of the Six Thinking Hats represents:

Blue Hat: "the Conductor's Hat"

When you or your team are in blue hat mode, you focus on controlling your thinking and managing the decision-making process. You have an agenda, ask for summaries, and reach conclusions.

Green Hat: "the Creative Hat"

The green hat represents creative thinking. When you're "wearing" this hat, you explore a range of ideas and possible ways forward.

Red Hat: "the Hat for the Heart"

This hat represents feelings and instincts. When you're engaged in this type of thinking, you can express your feelings without having to justify them logically.

Yellow Hat: "the Optimist's Hat"

With yellow hat thinking, you look at issues in the most positive light possible. You accentuate the benefits and the added value that could come from your ideas.

Black Hat: "the Judge's Hat"

This hat is about being cautious and assessing risks. You employ critical judgment and explain exactly why you have concerns.

Tip

The black hat is one of the most powerful hats, but it's often overused. Make sure that you and your team can justify any critical or cautionary comments, so that this mode of thinking doesn't dominate your decision making.

White Hat: "the Factual Hat"

The white hat represents information gathering. Think about the knowledge and insights that you've collected already - but also the information you're missing, and where you can go to get it.
Reproduced with the permission of Penguin Random House U.K and the trademark and copyright holder deBono.com. To find out how to use the Six Thinking Hats®️ in teams please contact https://www.debono.com/
Note:

Some colors have cultural implications, so you may have to pick new colors for one or more of your hats. In China, for example, a green hat can mean an unfaithful spouse. And you might decide to change the black hat to grey, so as not to associate black with faultfinding.

It's fine to use any colors that are appropriate for you and your team - just as long as all six are different, and you stick with the same colors each time you use this technique.

Tip

There are several other decision-making techniques that explore problems from different angles.

The Reframing Matrix encourages you to try out a range of perspectives when you're designing a product or service. What are the key considerations from a marketing perspective, say, or from the point of view of your manufacturing team?

Constructive Controversy involves pitting different approaches against each other. This means that it's more combative than Six Thinking Hats. But it can also generate energy, help people to reconsider their positions, and result in well-tested decisions.

And Empathy Mapping is a useful tool when you want to understand the perspectives of key stakeholders, in order to incorporate them in your plans.

The Benefits of Six Thinking Hats

As well as improving the quality of your decisions, the Six Thinking Hats technique has some other benefits to offer:

More organized thinking. You can be confident that you've considered every angle, and it helps you to weigh up the information you obtain efficiently and accurately.

Improved creativity. It gets you to step away from your default positions and approaches. And comparing or combining different perspectives can sometimes spark novel thoughts.

Better thinking skills. It's a great way to strengthen important skills such as curiosity and critical thinking.

Stronger interpersonal skills. It encourages you to practice listening, questioning and answering. So it can also make you more persuasive, better at spotting when others need support, and more confident to resolve conflicts when they arise.

Greater inclusivity in teams. It requires people to set aside any preconceptions and to focus on seeing things from the same perspective for a while. Debate still happens, but it's based on shared understanding - which can help everyone to feel included.

Note:

It's important to remember that some members of your team might find some types of thinking challenging - possibly due to neurodivergence - and need reassurance or support. However, they may also excel while wearing particular hats! So use this technique as a chance to play to everyone's strengths.

Key Points

De Bono's Six Thinking Hats is a powerful technique for looking at decision making from different perspectives.

It involves six distinct types of thinking, which you can do on your own or with your team. Each thinking style is represented by a different hat:

Blue Hat: organization and planning

Green Hat: creative thinking

Red Hat: feelings and instincts

Yellow Hat: benefits and values

Black Hat: risk assessment

White Hat: information gathering

By "wearing" each of the Six Thinking Hats in turn, you can gain a rich understanding of the issues you face - and the best ways forward. You also encourage everyone to be fully involved in the decision-making process.

# data[].attributes.attachment_link.title
Six Thinking Hats®: Looking at a Decision in Different Ways

# data[].attributes.attachment_link.description
What's your instinctive approach to decision making? If you're naturally optimistic, then chances are you don't always consider the potential downsides to a decision. Similarly, if you're very cautious, you might not focus on opportunities that could open up. Whatever your gut tells you, the best decisions usually come after you've explored several ways of viewing a problem.

# data[].attributes.attachment_link.title
Mobbin - The world’s largest mobile & web app design reference library

# data[].attributes.attachment_link.description
Save hours of UI & UX research with our library of 100,000+ fully searchable mobile & web app screenshots.

# data[].attributes.attachment_link.description
Build beautiful, usable products faster. Material Design is an adaptable system-backed by open-source code-that helps teams build high quality digital experiences.

# data[].attributes.attachment_link.title
Human Interface Guidelines | Apple Developer Documentation

# data[].attributes.attachment_link.description
The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.

# data[].attributes.attachment_link.authors[].name
Mark Otto, Jacob Thornton, and Bootstrap contributors

# data[].attributes.attachment_link.description
Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.

# data[].attributes.attachment_link.description
Build beautiful, usable products faster. Material Design is an adaptable system-backed by open-source code-that helps teams build high quality digital experiences.

# data[].attributes.attachment_link.readable_text
Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the API Index for a complete list of each component and sub-component.

# data[].attributes.attachment_link.title
UI Components | User Interface Application Building Components

# data[].attributes.attachment_link.description
Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the API Index for a complete list of each component and sub-component.

# data[].attributes.attachment_link.readable_text
A wireframe for mobile apps is a schematic blueprint that enables designers or product teams to easily explore, iterate, test, and finalize their design ideas before they move to the development stage. Different designers create a wireframe and translate into a high-fidelity prototype in a different way.

In this article, we'll walk you through the basics of mobile app wireframes and learn how to wireframe a mobile app from scratch.

What is a mobile app wireframe?

A mobile app wireframe is a skeletal blueprint that presents the main structures, flows, layouts, and UI content of a mobile app. It is a visual presentation of a mobile app using gray lines, boxes, shapes, colors, and placeholders, which makes it easy for designers, developers, and product teams to discuss macro design ideas without worrying about the cost.

Here is a mobile app wireframe example:

1). What a good mobile app wireframe should include

An effective mobile app wireframe includes:

All key pages such as Home, Login, Start, and Contact.

All key elements and CTA buttons

All key UI content

All key UI interactions

All key user flows

Key navigation systems

Main structures, layouts, and grids

This does not mean that you have to show them all the time. You should learn to highlight some important elements or content by wisely omitting some of them.

2). Low-fidelity wireframe vs high-fidelity wireframe

When it comes to mobile app wireframes, people often talk about design fidelity levels and divide mobile app wireframes into two types: high-fidelity wireframes and low-fidelity wireframes.

These are the differences between the low-fi and high-fi wireframes:

A low-fidelity wireframe is a static model that includes the most basic content and layout of a mobile app. It is often used to map out the shell of mobile apps, its screens, and basic information architecture. Sometimes, to save time, it can be directly presented using pen and paper.

A high-fidelity wireframe is a wireframe that presents more UI details, visuals, and interactions of the final mobile app. It is often created using a digital wireframing tool and sometimes includes simple interactions, enabling designers to click and interact with pages or elements for communicating and testing their ideas.

In short, high-fidelity and low-fidelity wireframes showcase different levels of details and functionality and should be used at different stages of app wireframing for designers to better communicate with each other.

You can also check more details about why and when to use high-fidelity or low-fidelity wireframes.

3). Wireframes vs mockups vs prototypes

While designing a mobile app, UI/UX design beginners confuse three terms: wireframes, mockups, and prototypes.

These are the differences between the three terms:

A wireframe is a basic and low-fidelity presentation of how a mobile app will look like. It outlines the main structures and layout.

A mockup is a static high-fidelity design diagram that shows nearly all possible UI details and visuals. It is a nearly completed presentation of the final product, except that it does not have any interactions.

A prototype is an interactive mockup that is very close to the final product with rich UI details, interactions, animations, and transitions. It behaves just like the final product and enables you to find all the possible issues that the final product may encounter in the future.

A wireframe, mockup, and prototype are mobile app models with different UI details and visuals. They are used at different stages of mobile app design for designers to better communicate and collaborate with other designers, developers, and other team members.

The process used for designing a mobile app is depicted below:

You can check more differences here: Wireframe vs Mockup vs Prototype, What's the Difference?

Why do you need a mobile app wireframe?

A good mobile app wireframe helps you visualize design ideas quickly and presents many UI details. So, it helps you:

Check how your final product will look like and iterate it quickly

See whether your product can meet the needs of users

Test the user flows of your product early on

Communicate and collaborate better with other designers and developers

Find potential issues and fasten the decision-making process

Save time and minimize cost as much as possible

In short, an effective mobile app wireframe can not only allow you to evaluate your design ideas early on, but also helps developers understand your design better. It helps streamline your entire design process.

What should you do before wireframing a mobile app?

Mobile app wireframing is one of the essential steps for creating a successful product. To hasten your design workflow, before starting to create a mobile wireframe, you should do the following:

Search for inspiration

If you are a beginner, you may not have a clear idea about everything in the beginning while working on a mobile app wireframe. To fix this, you may search related design resources on the internet, see others' work and use them as inspiration. Wireframe examples and templates are good resources that you can browse for inspiration.

Didn't find the desired information online? Skip to the "Best Free Mobile Wireframe Resources" section at the end of this article.

Map out all key pages and user flows

After viewing others' work, some ideas about how to wireframe your project may flash in your mind. Write them down and try to map out all the necessary key pages and user flows on a paper quickly.

A clear map presenting all key pages and user flows can guide you and your team to complete your project methodically and effortlessly.

Choose the right wireframing tools

If you are working alone, pen and paper is often the fastest option for wireframing a mobile app. However, if you are working with a team, a digital wireframing tool that enables you to collaborate and share designs is more suitable.

How to make a wireframe for mobile app step by step?

Step 1. User and market research

No matter what type of mobile app you are trying to create, the starting point of wireframing is often conducting user and market research.
User research
While doing user research, you should take your time to define and analyze your target audience carefully. This is the only way you can learn about their pain points and needs clearly to create a mobile app that can really help customers. Also, do not forget to create user personas for later use and analysis.
Market research
While doing market research, you are supposed to analyze the market and competitors and create a market report to know what challenges and opportunities you and your team may face in the near future.

Note that there are many skills and strategies that you can learn from competitors to enhance your product's UX.

Step 2. Sketch your wireframe

After deciding what kind of mobile wireframe you are going to create based on user and market research, the next step is to sketch your wireframe.

These are the points that you should keep in mind:
Choose the way that suits you best
To record all the ideas flashing in your mind as quickly as possible, you can sketch all details using a pen and paper or draw everything using a digital tool. Just choose a way that suits you best.
Ignore the wireframe quality - a low-fi wireframe is OK
In order to visualize as many ideas as possible, it is advisable to not pay much attention to wireframe quality. A low-fidelity wireframe draft that presents content priorities, interaction details, and user flows, etc, is good enough to make yourself understood within your team.

Want to learn more tips? 10 practical tips on sketching your wireframes can help fasten your design process.

Step 3. Add more details and create hi-fi wireframes

After discussing the macro levels of a mobile app via a low-fidelity wireframe, you can move to the next step: add more details and create high-fidelity wireframes.

At this stage, you should remember several tips:
Add more details for better presentation
To make your ideas clear, you are supposed to add more details. Try to add details as you usually do: from top-to-bottom and left-to-right.

Of course, a wireframe is only a blueprint, not the final product. So, there is no need to add every possible detail. You should only add the details that can present your ideas and user flows well.
Don't forget interactions
To better present the user flows that users often follow on your mobile app to achieve their goals, you may add simple interactions to make them easier to understand.

Do not forget interactions to present your design ideas more vividly and intuitively.
Make a wireframe checklist
To avoid forgetting something important, you may make a wireframe checklist in advance to improve work efficiency.

Step 4. Iterate wireframe with your team

Discuss the wireframe details with your team and try to iterate it as many times as you can. A high-quality wireframe helps save a lot of time and effort when you move to the stage of mockup and prototype design.

Step 5. Test

After you've completed all the previous steps, the last step is to test your design, including testing the visuals, the user flows, and the interactions. You and your team members need to test every detail as if you are the end-users. You can also invite real users to see whether the wireframe meets their needs.

Tips and tricks for making a better mobile app wireframe

1). Put yourself in users' shoes

A good wireframe helps you create a solid foundation for the final mobile app. To build a product that can really solve users' pain points, you should put yourself in the users' shoes, design, and think from their viewpoint from the very beginning. If possible, you should let real users participate in the wireframing stage.

2). Consider more mobile platforms and devices

To build a user-friendly mobile app, while wireframing, you should consider many mobile platforms, such as Android and iOS, and many devices, like common tablets, iPads, iPhones, and other mobile phones, so that your app can perfectly fit screens of different sizes, the responsive design would be the best.

3). Keep your design consistent all the time

Design consistency is an important rule that you should follow to keep your team focused on the design itself, without being distracted by any mistakes or confusion. All elements, including colors, fonts, spacing, buttons, images and the like, should be consistent across every version and wireframe that you created.

4). Collaborate with your team and keep testing

To make a successful mobile app, team collaboration is essential these days. So, once you've created or updated a version, you should discuss and iterate it with your product team. Their ideas can help you improve it quickly. During the process, testing should also not be ignored.

5). Get feedback timely

Obtaining timely feedback from other designers, developers, customers, clients, and stakeholders is another reason for creating a wireframe. So, after completing your mobile app wireframe, you should remember to share it with your users and get their feedback.

These 10 do's and don'ts of wireframing can help you save a lot of time and avoid common mistakes.

Best free mobile app wireframe resources you should check-in 2020

1). 30 Best Free Sketch App Resources - UI Kits, Wireframes, Plugins

30 best free sketch app resources list 30 of the best and latest mobile app design resources, including UI kits, wireframes, and plugins. Most wireframe templates are free, downloadable, and work well on the Sketch app.

2).16 Excellent Free-to-Use iPhone Wireframe Templates

16 iPhone wireframe templates list 16 of the best free wireframe templates for iPhone devices. They are good tools to create an iPhone wireframe quickly.

3).19 Best Free Sketch Wireframe Kit Resources

19 best wireframe kit resource introduces 19 of the best free Sketch wireframe kits that can help you wireframe a mobile app from start to finish. Most kit resources are highly customizable, enabling you to create your own wireframe with simple clicks.

4). 50 Free Wireframe Templates for Mobile, Web and UX Design

50 free wireframe templates list 50 of the best free wireframe templates and UI kits. Many wireframe types such as Material Design, iOS, Web design, and UX design are included. You can freely download any of them based on your needs.

5). 40 Best Mobile App and Website Wireframe Examples For Inspiration

40 best mobile app wireframe examples list 40 examples of both mobile and website projects. No matter whether you are working on a mobile or website project, this collection can surely help you.

Wrap Up

The ultimate goal of mobile app wireframing is to outline the main structure and content of your app so that you and your team can follow the guide to make your desired app smoothly. It is an essential tool for you to communicate and collaborate better with your design team and development team.

We hope that these explanations, examples, templates, tools, and other information for mobile wireframing can help you create your mobile app wireframe with ease.

# data[].attributes.attachment_link.title
A Complete Beginner's Guide to Mobile App Wireframing

# data[].attributes.attachment_link.description
A wireframe for mobile apps is a schematic blueprint that enables designers or product teams to easily explore, iterate, test, and finalize their design ideas before they move to the development stage. Different designers create a wireframe and translate into a high-fidelity prototype in a different way.

# data[].attributes.attachment_link.readable_text
Wireframing is an essential step in the design process. It helps you to better understand what's going on and what the team should be focused on in your design project.

Used in the design process of software and websites, a prototype, or a visual guide presents the relationship between webpage elements, and helps the designer to find mistakes or omissions in the layout.

Wireframes in design outline the idea before sending it to production. Creating a wireframe can cut costs and efforts of a design team and make the product development process faster. It makes it easy to suggest UX/UI improvements and engage the whole team for product success.

The fastest way to create wireframes online is to use a tool or a platform that allows you to drag and drop your blocks or graphics to your frame on canvas and then share it with the team. With our software, you'll be able to customize your wireframe with your own graphics from our ready templates.

But to help you gather inspiration on what your wireframe should look like, we've compiled 30 wireframe examples. Let's dig in.

Table of Contents

Wireframe Examples of Top Global Websites

Designers use wireframes to create basic UI/UX design. Wireframes of the first iteration are typically low fidelity, black and white - representations of a website or application screen. They can also have two contrasting colors of the brand palette.

We'd like to show you some wireframe examples from well-known companies to see a visualization of a website's structure and the relationships between certain pages.

The wireframes in this list are used to sketch out the content, functionality and information architecture of a website already built. They help you visualize how this site can look and behave on a page-by-page basis.

1. Twitter - High-Fidelity Mobile App Wireframe

Displaying user feed and communication, this high-fidelity Twitter wireframe is simple and straightforward. It shows how a Twitter profile page looks to users and how they interact with their feed and other users.

The user profile page includes a combined feed of both author's tweets and followers, as well as the information about the account owner and interactions with other users. Having covered the main features of this app, the wireframe also covers the communication between users via mentions and replies, and shows the feed and the trending topics.

2. YouTube - Mid-Fidelity Website Wireframe

YouTube is the second most visited site in the world and one of the most important platforms for marketing your business. The medium-fidelity video platform wireframe example outlines the main elements of the page and uses branded colors for calls-to-action (CTAs).

In this wireframe, we can see content grouped by categories while channels that the user subscribed to are displayed on the left. Videos are displayed in a grid format with author information and ratings listed below the video.

3. Airbnb - Low-Fidelity Website Wireframe

This example shows the low-fidelity wireframe of the Airbnb vacation rental business web pages, including the main page, search and calendar.

Not aiming to be pixel perfect, this design highlights the main elements of a landing page such as the buttons, navigation bar, search box, calendar and registration form, presenting a sketch of core app functionality.

4. Facebook - Mid-Fidelity Website Wireframe

Our next example is the medium-fidelity wireframe of the Facebook social network user page UI in branded colors.

This wireframe displays a user page with a profile picture, cover photo, and user chats. We can clearly see the feed and "About" section as well as the gallery placeholder. Elements and buttons are already aligned and we only need to add graphics here to show the full page functionality.

5. Instagram - High-Fidelity Mobile App Wireframe

In our next example, we're looking at the high-fidelity UI wireframe for Instagram's app. This wireframe depicts the design of stories and how people are sharing their photos here.

We also learn about story posting and feed elements, such as the description text, likes, and comments.

The wireframe mirrors the original app including the graphics, so we can clearly see the final version of the platform. It will be useful for someone who decided to create an application with similar functionality.

Types of Wireframes

Whereas high-quality, high-fidelity wireframes look impressive, they render a final view of the product as it is, in full scale and capacity. Advanced high fidelity wireframes do not have "lorem ipsum" text or grey blocks; instead, they are colorful and contain all fonts, colors and branding elements of the final design.

Medium-fidelity wireframes can provide more effective and accurate product feedback and help your team discuss and approve creative UI/UX ideas. Responsive, interactive wireframes show users a basic thing that they want to build, and accelerate the design process greatly.

Hand drawn wireframes belong to the low-fidelity type. These prototypes can even be computer generated or done in a program like PowerPoint or Keynote, for user feedback of the team's creative processes.

Minimalistic and easily customizable, low-fidelity wireframes can include a user scenario, user behavior flow, or various mind maps of user interaction. Predefined visuals in online wireframing tools can be used to amend later to allow the designer control the functionality and effectiveness of the UI.

How to Create a Wireframe

We're finally at the most exciting parts of our journey - creating your own wireframes. As one of the first steps in creating a website or application, the prototype helps to understand how a website will look and how it will function.

The basic principles of creating wireframes are:

Research and draw your idea on paper to keep things simple; any mistake on this stage wouldn't be critical. In your design process, non-effective features will gradually be revealed and you will be able to eliminate them before production begins.

Don't skip this step as right now it gives you power to control the outcome of your design and change it drastically in case of unpredicted functionality change.

Prior to getting to complex design tools, make a simple sketch in any of the simple design programs. Rather than drawing by hand, rough digital drawing allows project testing with different devices, resolutions, and browsers.

Discuss the sketch with your colleagues and play different scenarios on the use of the system, including both users who may be dealing with this type of software the first time, and engineers or team leads. You'll be surprised at how great ideas can be often found by people outside the team.

You might want to check the interaction sequence at this stage as well. What if a client tells you to change all the systems? Keep in mind the amount of effort it would take to add given functionality after the development completion.

If the customer wants adding a new section or functionality to your design, make a rough sketch of the landing page or a required block redesign. Offer several solutions as people like to choose to solve their problems by themselves.

You can use one of Visme templates and change the layout, color or overall design so you could get the approval of your C-level management.

Stakeholders don't like their team wasting time on wrong solutions so manage your time wisely and revise the project at starting stages, not directly before the implementation.

Here is a checklist of what you should keep in mind before creating your first wireframe:

Wireframe goal: What are you trying to show and what is the desired result?

List of CTA buttons, functionality and configuration controls

Industry of the website/app: More whitespace to art projects doesn't mean that banking applications or dashboards would need the same.

Follow this structure to get success with your wireframe and don't miss any important details while you're creating it. Always put ideas before perfection - you will have plenty of time for that.

In mobile application design, you will need to download the latest Apple iPhone design wireframe to align your wireframe to.

Buy licensed images or choose free ones without attribution if you are planning to turn your sketch into a high fidelity wireframe and use it for commercial purposes later.

For the website wireframe design, use ready solutions that are easy to customize. Check all CTA blocks and website structure to make all future pages convenient to reach via menu or footer.

Designing a dashboard wireframe is both complicated but fun. Complex functionality under the hood of your software will limit designer creativity but boost imagination.

When your prototype is the final version that will be reviewed in the team and presented to the management, take a minute to check whether it corresponds to key business and product objectives.

Will people be encouraged to buy or engage with the software?

After creating a rough sketch you may go on to the next phase and create a mid- or high-fidelity prototype to deliver on screen. Perform usability tests before sending your wireframe to production.

Ensure your wireframe is positioned correctly and is intuitively understandable to most people. And be prepared to move forward and run it live.

30 Wireframe Examples for Businesses

We took our 30 favorite prototypes, from ecommerce to healthcare food, mobile banking and video streaming applications, and now are sharing it with you. See what you can learn from these examples when it's time to create your own.

Mobile Lo-Fi UX Wireframe Example

This simplistic but very alluring low fidelity wireframe in blue palette is slick and gracious and can be used for audio player tracking application, weather tracking application, or e-commerce website.

In the first row of the prototype we can see the numerous blocks that can be used either for text or to insert graphics.

The wireframe displays main components of the ecommerce website: product, category and cart. User flow shows the cart but is not focused on it.

Visitors should be able to view the product in detail before adding the product to their cart. Once visitors add the product to the cart, they will be able to review all the details about the product, select a payment method and make a purchase.

Mobile UI Design Wireframe Example

This calm, pastel mobile UI by Frida Larios displays a full-scale wireframe design for a B2B2X consumer marketplace, focusing on the user facing logic and experience. This marketplace will enable buyers to transact with each other in a secure fashion and earn gifts for brand loyalty.

At the first glance, the marketplace looks like an e-commerce site with the usual features such as product listings, search, etc. However, on closer inspection you can spot some differences.

For instance, the user interface is not a simple profile, but user interaction is enabled, and reviews and bonuses encourage customers to be more active in the system.

Game Website Wireframe Example

Minimalistic black and white game website wireframe is an individual project by Adrian B and it consists of several basic blueprints that show the website map and how users can interact with elements.

Offering a selection of assets from Community to Downloads and Media resources, the website is aimed at actively engaging users with entertainment content.

This site would be geared towards desktop and mobile users, and has a cart where buyers can checkout after adding Subscriptions to it. Instead, there is a 'Prices and Offers' section on the top left corner which enables users to find items.

Mobile App Wireframe Example

Increasing traffic for small businesses can be tricky, and this black and white wireframe for an online store is a great example of the opportunity for business owners to increase their audience.

Most popular e-commerce platforms like Shopify, WooCommerce and others are complicated to set up and use, and they require a lot of time and effort from web developers to get everything to work.

The author of this wireframe follows best practices for UI design in online shopping and offers a simple store layout for e-commerce with customer registration and verification capability, gifts, cards, and deals promotion. Slick and clean goods gallery is easy to scroll or view in detail.

Low Fidelity Wireframe Example

Most important components of this working example of an animal shelter adoption services website wireframe are the navigation menu, illustration block, and logo.

Communicating the structure of a website, before any visual design is added, this wireframe will allow the business owner to get feedback from the users on the functionality and usability of the website, prior to the development stage.

The platform is set to provide the resources and information for people who want to adopt animals. Custom user interface grants a unique user experience, and the structure of the wireframe is based on a concept that represents the standard workflow of an adoption service.

School Website Wireframe Example

Created for a school website - an essential tool for communicating with students, parents and staff members and keeping everyone up to date on events - this wireframe by Thallysson Makcyel is lean and calm.

As teachers are increasingly using school websites to stay in contact with students, digital transformation for the education industry has become more important. Special sections on the school website contain information about all of their students and learning progress.

Project Management Dashboard Wireframe Example

Project development is vital for engineering teams, and this wireframe offers establishing effective and productive workflow within an engineering department.

The interface of this application looks simple, clear and intuitive. At the forefront we can see the most important repetitive elements, task list and team list.

Visual hierarchy makes blocks with greater importance more noticeable, and the dashboard menu is convenient and comprehensive, including all control elements that users want to access.

From teams list to tasks priority, calendar, messaging and projects, this solution includes everything needed for an agile team success.

Early Design Phase Wireframe Example

High-quality, responsive ecommerce product website is one of the key elements of success for sales. This neat, uncluttered wireframe by Joseph Smith consists of desktop and mobile retail shop prototypes.

With a different background, home page and product page here undergo A/B testing to gain insights into what produces more conversions. The design of this wireframe follows the best practices of creating the ecommerce pages that convert.

App UX Wireframe Example

View this wishlist mobile application wireframe to get inspired for your own project.

The author, Nermine Ezzeldin, created this prototype for a viral viral marketing website where potential customers are encouraged to create an online wish list of products they would want to buy in the future.

Wishlist websites are typically developed in collaboration with a business partner (e.g. a retailer or a list of retailers) who offer the customer the ability to purchase items directly from their wish list when they become available.

You can save favorite items or add your interests in this app; on top of that, search function enables users to browse other users' lists or search for items based on keywords.

Service Website Wireframe Example

This conservative and solid retail store wireframe charms with its simplicity and convenience of use, regardless of your experience in the UX design. Check out this wireframe that presents the overall information about the store, products and conditions of sale.

Specific in details, this prototype offers multiple additional services to the customer, such as installation of the product or choosing service locations. Use the online calculator on your website to gain customer trust, and add reviews and open contact form as in this website wireframe.

Gallery Wireframe Example

Get inspired by this incredibly crisp and fresh wireframe for brand images and brand guidelines by Piotr Kaźmierczak. This type of database contains a large amount of brand assets and enables users to search and locate the required graphics faster.

Employees can browse through this gallery and choose the required content. The navigation is similar to popular social platforms such as Pinterest or Flickr. You can manage all company content assets in the admin configuration page, which is linked to central identity and authorization service. The user will be able to track their downloaded assets, manage their account and request missing content via contact forms.

Enjoy its clean and minimalistic look, simple icons and mobile friendly look - this wireframe is perfectly fit for the mobile requirements as well as superb desktop experience.

CRM Wireframe Example

Monochromatic, muffled colors distinguish this beautiful CRM dashboard wireframe from other prototypes. Learn about the functionality of this wireframe and build your own CRM tool that will outperform competitors.

Deals and support core functionality of the wireframe is highlighted and shown in detail; this system allows you to automate deals tracking, reach outs, and communication with the existing customers.

Widely used as business processes management tools, CRM platforms have an outstanding array of use and cover a great chunk of company activity.

From messaging to tracking deals or importing contacts and scheduling calls - this basic structure of the dashboard will let sales teams spend less time on routine reporting and workflow.

Marketplace Wireframe Example

#EXPLORATION wireframe can be used for SaaS marketplace as a showroom of vendors and the interactive gallery of goods or services. Including both company pages and general blocks, the wireframe has comprehensive navigation and clean layout.

Use enough whitespace and big titles to make your SaaS marketplace wireframe look modern and sleek. Combine muffled, natural colors with eye-catching accents to make your wireframe pop, and double check font styles of all the elements for perfect impression.

Responsive Wireframe Example

If you want to create a wireframe for the website that sells , you need to make your page relevant to your audience. It's easy to keep the information straightforward and clear with the wireframe like this simple responsive wireframe example.

Most important elements of the page are aligned for desktop, tablet and mobile layout to enable scanning for users interested in purchase of the product or service. You can help shoppers or prospective partners make the decision by including longer descriptions and visual blocks.

With this type of template, customers can quickly learn what they are buying and why. Simplicity and top quality graphics are among key influential factors that affect the purchase decision.

App Wireframe Example

Based on comprehensive research, the UX case study provided can help you learn how to create the wireframe design for the car renting platform to reduce ownership cost for car owners, find vehicles in a few clicks, transfer payments for the service, and have comfortable rides.

You can learn about basic features of car rental applications, such as payment operations flow, trips and history tracking, booking details, customer verification, filter and sorts, finding rides and home screens.

Nonprofit Website Wireframe Example

Companies or nonprofits focused on decreasing carbon footprint , environmental action or working on a green energy project, may find it interesting to view this wireframe by Adam Kalin.

The wireframe shares a vision of the community focused on environmental goals of minimizing climate change and working towards better, greener solutions for society. Aside from ecology initiatives, the website wireframe displays a hub to track important climate change updates for businesses and their operational flow.

Featuring multiple block types such as a blog, list of features, CTAs and main page block banner, the wireframe diverse components and elements set the bar high for UI of environmental community project wireframes.

Delivery App Wireframe Example

This gorgeously detailed wireframe is designed to help home cooks to reach a larger audience and grow their business. You can power up your local business community with this kind of application and help customers to find multiple home cooked food options.

Applications and services of this type formalize the ecosystem of vendors, connecting customers directly to the service provider and guaranteeing the service quality. Professional cooks can also use this platform to manage business efficiently and constantly expand the client database.

Communication between various business operation process participants is key to successful market development. Payment, delivery, packaging and online ordering systems have also been covered in this wireframe, and you can explore all design stages from research and lo-fi to high fidelity graphics.

Mobile Wireframe Example

Eliminating paperwork is one of the main things that Logistics mobile apps can do. It integrates the workflow to receive multiple benefits for employees, supply companies, and clients - and this Mobile wireframe design is the perfect example of automating logistics delivery flow.

This wireframe example highlights Sea Freight with Client Order list that gives instant access to all deliveries of this client to managers and Administrators of the application. Logistics company staff can schedule delivery, predict transport expenses, and optimize resource spending.

Agriculture App Wireframe Example

Automating agriculture deals is the main function of this mobile application, providing the ability for both customer sides to view Banking information of the yield dealer, warehouse operations status, full deal tracking such as package type and delivery vehicle details. The wireframe displays full flow of the deal closing within the app.

Climate resilient agriculture is vital for today's economy, leading to immense climate change improvements via smart agriculture practices. Multi-language capabilities of the application shown in the wireframe enable easy scaling and implementation of the solution across multiple organizations, private farmers, and market vendors.

Ecommerce Website Wireframe Example

Solid, comprehensive interface of this e-commerce website wireframe looks robust and trustworthy due to placing partner brands as one of the central blocks.

Focusing on most popular goods and benefits for the customer, the wireframe has the potential capabilities to increase engagement and sales based on personal recommendations.

To have a successful business, you need not only to get a store up and running, but build up positive experience for clients and brands. This e-commerce website wireframe fully meets the expectations of the viewer and allows vendors to create their own portfolios, galleries of goods, and track their page performance.

Ecommerce App Wireframe Example

If you want to build an ecommerce mobile app , take a look at this fantastic lo-fi wireframe by Valeriia Babina. Friendly login and registration page combines well with detailed layout of the checkout process.

You can use a similar kind of the web application wireframe to sell any kinds of goods, including products, services, or downloadable platforms. Adjust your wireframe to work with all kinds of payment systems to suit the needs of clients.

Calendar Wireframe Example

This great looking dashboard calendar wireframe by Bix Bytes Design Lab fits the audience of big software development, HR or sales teams, and displays the right kind of data for every purpose.

Lovely, bold color palette is fresh and eye-catching, with the background created in perfect harmony of grey and navy blue.

Create a similar wireframe for your calendar, event planner, or HR application and save costs of hiring the whole designer team to bring your vision to life.

Video Streaming Website Wireframe Example

Statista reveals that revenue in v ideo streaming is projected to reach $82.431 million in 2022. Booming development of video streaming services increases demand for website and content development for this industry.

Empathy Designs created this simple, lean layout to showcase their application for video streaming websites. Featuring online web streaming, it enables you to watch videos across the world, including news feeds or tutorials, as well as video content management.

Neat and clean UI of this wireframe makes it easy to navigate and customize with new feature updates. This type of wireframe can help users save time while searching for online streaming videos.

IT Website Wireframe Example

An awesome fit for an IT company providing their services around their product or platform, this wireframe by Alex Lauderdale is upbeat and well composed. You can use the inspiration from this template to create your own website wireframe for consulting companies or service providers.

This lo-fi wireframe can be used to show how brokers, vendors and IT partners can collaborate with the company, and it could be essential for stakeholder communications.

Showing basic visual representation of what the product is, the wireframe also highlights how the clients or partners can interact with the platform, and layout framing for several core pages such as Partners section, Platform section and Company Introduction block.

Impressed? Create your own wireframe with similar vibes but your unique style and show the functionality of your dream project to your friends, colleagues, or teammates.

Great elements alignment and vivid color schemes of this wireframe create a feeling that the product is trustworthy and professional. Definitely a good choice of layout and element placement!

Customizable Mobile App Wireframe Example

Soothing blue palette of this mobile components library by Vijay Verma looks inviting and professional. Wireframe kit of this kind can be used for a social media platform with user chats, content search, and calendar.

This mobile application can help people connect and communicate with one another, and it contains a vast choice of building blocks to customize your design. It also promises to make it easy to share content with your friends on social media sites and communicate with them via different apps, including Facebook.

The wireframe includes ready to use screens, standard icons, examples of the flowchart. Easy to create new components are simple and clean, with dark theme support.

User Profile Wireframe Example

Pixsellz created the wireframe representing the part of CRM software holding information about the company's customers, their needs and requirements, and their history of contact with the company.

If you want to build a software product to track client interactions and provide them with additional services, you can use this wireframe for inspiration.

Managing sales activities requires analytics, data security, and reporting features of the product. Seamless leads management requires rich feature sets for sales teams as well as research and marketing automation capabilities.

High-Fidelity App Wireframe Example

The QuitCarbon mobile application is designed to help smokers quit smoking - it's like having a personal trainer in your pocket.

Track your daily habits and get motivated by this beautiful app in a green palette. Keep away from smoking and maintain a healthy way of living daily while getting amazing rewards and working towards your health goals.

You can also view your carbon footprint chart, health status diagrams, and wallet with saved costs for the amount of days you quit your smoking habit.

Healthy Eating App Wireframe Example

Use this wireframe application to generate ideas for your health care project associated with food or vitals tracking. Enable users to learn the information about their health status and improve their daily habits and style of living.

This stunning digital health application looks trustful and reliable, while its dominating white color is in perfect contrast to bright, flashy graphics.

Blood Donation App Wireframe Example

The red palette immediately draws attention to this healthcare application wireframe. To connect users with a network of people who want to help save lives, the application will require personal information such as blood type, medical history, and donor card scan.

The prototype of this medical iOS mobile app can potentially make the blood donor signup process easier, more convenient and efficient, and let people send out an alert to family and friends when they're in need of blood.

With this mobile iOS application, users can sign up for their blood donor registry, track donations, store all medical information, consult a doctor and more.

Banking App Wireframe Example

As a rule, banks don't offer specialized products or services for people with disabilities, but they can offer greater accessibility if they make an effort.

This is where this financial application comes in. The product will allow users to log in via ID, finger print, face recognition or voice, which might be useful when applying for payments or performing routine banking operations.

Booking App Wireframe Example

Use this impressive wireframe project by Bartek Rybak as an idea for your application of online movie tickets booking. You can choose the movie you like and not be limited by the movie cinema brands.

The wireframe focuses on the user's interest for certain movies instead of pinning choices by location. You can get information of all repertoires of local cinemas and purchase your ticket based on the information filtered from movie screenings.

This is also a great example of what a wireframe looks like versus a high-fidelity prototype. Use a wireframe to plan out your design before it becomes a prototype and then a live product.

Create Your Own Wireframe

A wireframe is a digital summary of your future website content in the form monochromatic or minimalistic design. Used both for mobile Android or iOS applications, desktop software or custom dashboards, wireframes can be an integral part of the software development process.

Building wireframes for your project can cut costs and eliminate time-consuming design work of applying client edits before they even happen.

But there's bad news, too. If you want to create your design quickly, you'll have to learn the design tools from scratch. And it can be quite challenging for the beginners. You may need to spend hours and hours of work just to learn basic functionality of most digital content creation tools on the market.

Luckily, Visme can help you create wireframes more easily by providing ready out-of-the-box templates. You can then edit your work in minutes, and download or share your project online.

# data[].attributes.attachment_link.title
30 UI & UX Wireframe Examples for Businesses in 2022

# data[].attributes.attachment_link.description
Wireframing is an essential step in the design process. It helps you to better understand what's going on and what the team should be focused on in your design project. Used in the design process of software and websites, a prototype, or a visual guide presents the relationship between webpage elements, and helps the designer to find mistakes or omissions in the layout.

# data[].attributes.attachment_link.readable_text
What's the difference between low fidelity and high fidelity wireframes? Exploring the prototyping fidelity spectrum in the web and mobile design process

The fidelity spectrum for wireframes and prototypes is vast. The UX design workflow will typically include paper sketches, basic low fidelity wireframes and/or high fidelity, interactive wireframes or prototypes.

With smart technology thriving in the digital sphere, high fidelity wireframes offer designers powerful visual and interactive attributes to bring their designs to life. But this doesn't mean that paper is dead. Low fidelity wireframes remain a quick, effective and practical design route - and this whimsical video shows us why paper should never be neglected 😉

So, is there an ideal way to use a website wireframe in the UX design process? In this post we'll discuss the difference between low fidelity and high fidelity wireframes and why a combination of both can improve your UI/UX design.

What are low fidelity wireframes?

There are a few ways to include low fidelity wireframes in the UX design process. Some designers will start by sketching out their web or mobile interface's screens on paper - these sketches are often referred to as paper wireframes. They are typically concept sketches, a set of drawings or storyboard, representing the skeleton of the interface.

The next level up is a low fidelity wireframe. Low fidelity wireframes include the most basic content and visuals and are usually static (not interactive). They are often used to help map out the shell of the interface, its screens and basic information architecture.

These wireframes are created using publishing software, such as the Microsoft Office suite, or a wireframe tool, such as Justinmind. Low-fidelity wireframes usually serve as a checkpoint for the product team and stakeholders at the beginning of the design process. They help teams visualize and test early concepts, requirements and design assumptions at the beginning of a web design project.

Whilst some designers will move on to a digital wireframe after sketching, others prefer to kick off with one directly. And as sketching UI kits become more readily available, we may see more designers scrapping the paper wireframe phase.

What are high fidelity wireframes?

Medium to high fidelity wireframes or prototypes are more complete representations of the end product than low fidelity wireframes. Many are clickable and respond to the user's actions, mimicking authentic interface interaction.

Their aesthetics and content are more precise than lower down the fidelity spectrum, as designers concentrate on refining the graphics, spacing and UI layout. Information architecture also plays a role in this phase.

High-fidelity wireframes are often built in the advanced stages of the design process to communicate design decisions to the development team prior to coding the final product.

Additionally, they help validate complex interactions during user testing. These wireframes provide test participants with realistic representations of what the product will look and feel like, as well as how it will respond to them.

Designers usually use different tools for depending on what kind of wireframe they want to build - ranging from low to medium to high fidelity. Some tools, Justinmind included, allow designers to build from the bottom up, starting with a basic design and refining it as the design process moves forward.

With Justinmind, you can create low-fidelity wireframes before building up to high-fidelity interactive and animated prototypes. By designing and simulating scenarios in your interactive prototypes, you can ensure your team and stakeholders understand the flow of information to fairly validate your designs.

Low fidelity vs high fidelity wireframes - when should you use them?

When to use low fidelity wireframes

Low fidelity wireframes are easy and quick to create and adjust with each design iteration. They can also be easily discarded, and built up from scratch without overly disrupting the design process. Here are some examples of web and mobile wireframes to browse.

Low fidelity wireframes are also a great resource for bringing the team together on a web project. Before investing time, resources and money on a complex high fidelity wireframe, stakeholders, designers and developers need to agree on the essential components and functionality to avoid rework later on.

But when you need to gather feedback and user validation, find and fix problems in your interface and simulate system responses, low fidelity wireframes just won't cut it. This is where high-fidelity wireframes are more appropriate.

When to use high fidelity wireframes

There are three main advantages of using high fidelity wireframes in the UX design process:

Impressive interactivity: High fidelity wireframes should be used when you need to test specific UI components and interactions within a screen or between multiple screens. Wireframes with high fidelity interactivity have fast system response times. During user testing, the user reactions measured will be much more accurate than with low fidelity wireframes.

Realistic aesthetics: High fidelity wireframes usually look much like the final product. This means that during testing, participant behavior is likely to be more realistic (as if they were engaging with a real UI). This will provide more accurate feedback and a more complete user experience can then be designed.

Lower human error rate: With clickable wireframes, interactions are built in. This means that there is less room for human error in user testing, as the test doesn't rely on manual input from test moderators. Such errors can have a negative impact on a test, and may make it impossible to test specific interactions accurately.

Low fidelity vs high fidelity wireframes: the takeaway

The most important difference between low fidelity and high fidelity wireframes is how they contribute to the overall user experience. Low fidelity wireframes can be an excellent way of visualizing requirements and getting everyone on the same page early on.

High fidelity wireframes will make sure that your design decisions are communicated to the team building the end product and that target users are accounted for.

However both low fidelity wireframes and high fidelity wireframes are fundamental phases in the web design process. Without basic wireframes, you are putting your team at risk of repetition and misunderstandings. Without clickable wireframes, user testing won't be accurate and your user experience may suffer. Be smart and include both in your design process.

# data[].attributes.attachment_link.title
Low fidelity vs high fidelity wireframes: what's the difference?

# data[].attributes.attachment_link.description
What's the difference between low fidelity and high fidelity wireframes? Exploring the prototyping fidelity spectrum in the web and mobile design process The fidelity spectrum for wireframes and prototypes is vast. The UX design workflow will typically include paper sketches, basic low fidelity wireframes and/or high fidelity, interactive wireframes or prototypes.

# data[].attributes.attachment_link.readable_text
If you're new to the UI/UX design field, you may not know the term 'wireframe'. But wireframes are an integral part of the product design process, so let's dive in and discover - what is a wireframe?

In this blog post, we'll explain what exactly wireframes are, why they're needed, when you can use them and the different kinds that exist.

What is a wireframe?

Starting with the main question, what exactly are wireframes? In a broad sense, a wireframe is a blueprint or schematic that helps communicate the structure of your app or website to the relevant stakeholders.

Essentially - wireframes are basic design layouts of your product. Wireframes present the key information that you want to display on the page. They also give a clear sign of what your app or website page structure is going to look like. And finally, wireframes give basic information about specific elements in your user interface and your user flow, and even highlight different UI functionality.

You can use wireframes to show you product's design in different fidelities. You can see how the design evolves between each stage.

Why do you need wireframes?

Before your team writes any code or allocates heavy resources to build a project, it's important that everyone aligns on what they're building. Using a wireframe helps everyone understand and communicate/explain what you're trying to achieve. By framing your design concept in a minimalistic structural design, you can to make quick adjustments. Plus, you can give everyone an idea of how your future design will look. Best of all, it means you can share your ideas early, without worrying about more complex design elements like colors, shading or intricate menus.

When should you use wireframes?

The main purpose of wireframes is to share basic but key information about the product's design. So the earlier you can integrate wireframes in the process the better. Wireframes should be quick, simple, and compatible with a lot of alterations.

Typically, you should consider creating wireframes in the discovery stage of the product cycle. Designers use wireframes to work with stakeholders to identify business requirements, figure out the scope of the product and more.

Wireframe fidelities

Wireframes aren't all created equal. Even though they all serve the same purpose, wireframes vary based on the level of fidelity that you design them with. So let's take a look at your different options.

Low-fidelity

Typically, you should consider creating wireframes in the discovery stage of the product cycle. They communicate very basic page structure and don't take into account details such as grid, scale or accuracy.

A low-fidelity wireframe of a Travel app idea. They're quick sketches that you can create with pencil and paper.

You can design low-fidelity wireframes using pen and paper or sketching apps. They're great for sharing on-the-spot ideas with basic shapes, images and content. They're especially useful in stakeholder meetings to help everyone agree on a certain direction for what the product would look like. Plus, they're also very handy for designers that want to have different options to show. And of course, because each one is basic, the design team can test ideas without wasting time creating pixel-perfect mockups.

Medium-fidelity

The most popular option for wireframes is medium-fidelity. They add a more accurate structure and design layout than low-fidelity ones. Medium-fidelity wireframes still avoid detailed elements such as color, UX copy, images and typography. However, they do offer more distinct features and more detail in each component.

A medium-fidelity wireframe for the same Travel app. They show more details and you can design them in wireframing tools like Sketch.

Another key difference is that you design medium-fidelity wireframes using a digital wireframing tool like Sketch - although you should still use them early in the product's lifecycle to help shape the final result. By using a wireframing tool you can alter font weights and grey shades to give a little more detail to your design.

High-fidelity

Finally, high-fidelity wireframes - also known as mockups or prototypes in some cases - take details to the next level. Instead of having placeholder text and images, they feature more detailed and relevant components.

A high-fidelity wireframe of our Travel app idea. You'll need a wireframing tool like Sketch to create these, and they add a lot more detail to your concept.

Reserved for the later stages of a product's design cycle, they help designers and stakeholders break down more complex ideas. If you're designing a menu system, interactive map, or you want to go the extra mile and provide a more detailed mockup of your product, a high-fidelity wireframe is for you. And, just like with medium-fidelity, a digital design tool like Sketch can help you create one with ease.

Now you have an understanding of what wireframes are. They are important tools to use in your product design journey, and will make your design process even more efficient.

# data[].attributes.attachment_link.description
If you're new to the UI/UX design field, you may not know the term 'wireframe'. But wireframes are an integral part of the product design process, so let's dive in and discover - what is a wireframe? In this blog post, we'll explain what exactly wireframes are, why they're needed, when you can use them and the different kinds that exist.

# data[].attributes.attachment_link.readable_text
Si trabajas en el mundo del diseño UX/UI o perteneces a entornos de desarrollo, tendrás muy claro qué son los wireframes, pero probablemente cada vez que comienzas un proyecto con un nuevo cliente tengas que invertir tiempo en explicarle qué son los wireframes, para qué sirven y que ventajas aportan antes de comenzar a dar vida a un diseño.

¿Qué es un wireframe?

Un wireframe es una representación esquemática de cada una de las pantallas más significativas que van a componer un producto digital, su función es dar la posibilidad de visualizar cómo se van a distribuir los contenidos dentro de la misma. Se utilizan para el diseño de cualquier tipo de interfaz digital (web, móvil, etc.) cuando se trata de un wireframe para AR/VR se denomina sceneframe.

Ejemplos wireframes
Existen tres niveles de wireframes:
Realizados a mano, bocetos

Low fidelity

Creados con alguna herramienta digital tipo Axure, Balsamiq, Whimsical, Miro, etc.

High fidelity

Creados con herramientas de diseño de interfaces como Figma, Sketch o Adobe XD.

El diseño de wireframes es la manera más efectiva de conectar la arquitectura de la información (AI) con el diseño del producto. Con ellos podemos traducir la estructura de un mapa de contenidos y transformarla en la emoción que sentirá el usuario al utilizar la plataforma que se está diseñando.

Visualmente son muy simples, exclusivamente líneas y cajas. Su finalidad no es mostrar el diseño final del producto, por lo tanto, carecen de color, de imágenes y no siguen la identidad visual de la marca para la que se van a desarrollar.

Todos los elementos gráficos y de sistema se muestran esquemáticamente.

Siempre que sea posible, los contenidos que se muestran son reales para poder facilitar el cálculo del espacio necesario de cada uno de los elementos cuando se pase a la fase de diseño del look and feel.

Lo ideal es que vayan acompañados de explicaciones que justifiquen las decisiones tomadas para el diseño de los mismos y permitir, en la plataforma en la que se compartan, un espacio todas las partes implicadas puedan comentar estas decisiones y aprobarlas si fuera el caso.

En los wireframes también se puede y se deben establecer las microinteracciones y transiciones que sea necesario incorporar al diseño y que pueden mejorar la experiencia de usuario, los wireframes con interacción se denominan prototipo. En este artículo de torresburriel está explicad de una manera muy clara la diferencia entre wireframe y prototipo.

¿Para qué sirve un wireframe?

La principal finalidad del wireframe es permitir la visualización de los contenidos que aparecerán en cada pantalla y reflejar las funcionalidades que estarán presentes.

Establecen la jerarquía de la información y sirven como herramienta de comunicación entre desarrollo, diseño y cliente.

Para garantizar el éxito del proceso de diseño en general, la estrategia y los contenidos deben estar bien definidos antes de comenzar a diseñar los wireframes.

¿Qué ventajas aporta realizar wireframes antes de aterrizar en el diseño de la capa visual?

Se reducen los tiempos de trabajo y los costes. Al carecer de color, tipografía, imágenes, es decir, una identidad gráfica concreta, se avanza a mayor velocidad ya que las correcciones se basan exclusivamente en los contenidos y la funcionalidad, evitándose las discusiones sobre aspectos gráficos.

Permiten al cliente expresar lo que quiere y definir sus objetivos.

A través de ellos se establece una comunicación fluida entre el equipo de diseño y desarrollo con el cliente.

Permiten visualizar interacciones y flujos.

Se pueden detectar en los inicios del proyecto posibles problemas de usabilidad e interacción que a medida que el proyecto avanza son más difíciles y costosos de solucionar.

En resumen...

Utilizar wireframes en la etapa inicial de diseño de un proyecto, nos permite tener una perspectiva basada únicamente en el contenido, sin detenernos en discusiones sobre el diseño, ahorrando tiempo y pudiendo iterar de manera temprana. Esto ayuda a que el proyecto no se retrase por falta de definición y a que el resultado sea lo más cercano posible a lo que el cliente esperaba.

# data[].attributes.attachment_link.title
¿Qué son los wireframes? | Explicación para no diseñadores

# data[].attributes.attachment_link.description
Si trabajas en el mundo del diseño UX/UI o perteneces a entornos de desarrollo, tendrás muy claro qué son los wireframes, pero probablemente cada vez que comienzas un proyecto con un nuevo cliente tengas que invertir tiempo en explicarle qué son los wireframes, para qué sirven y que ventajas aportan antes de comenzar a dar vida a un diseño.

# data[].attributes.attachment_link.readable_text
My experience in driving remote crazy 8’s in a distributed team (design sprint core method).

Image by Google

What in the world is crazy 8’s?

I believe most of us have already heard about the word “crazy 8's”. If you are a designer in the term of software development, you might be familiar with it. Even if you haven’t heard about it, now I’m assuming that you hear it. So, what in the world is crazy 8's? It is simply a method where you are pleased to draw something roughly (sometimes it’s a weird idea) on a piece of A4 paper folded into 8 rectangles. Is it as simple as that? Yes, it is!

But now I’m gonna take the definition of crazy 8’s to the higher level. “Crazy 8’s is a core Design Sprint method. It is a fast sketching exercise that challenges people to sketch eight distinct ideas in eight minutes. The goal is to push beyond your first idea, frequently the least innovative, and to generate a wide variety of solutions to your challenge.” — Collected by Google

Pre-requisite:

You have to have a problem. The problem is the reason behind your challenge.

The goal:

To interprete an idea and to generate a solution to your challenge.

The deliverable:

8 distinct ideas into a form of text, images or illustrations.

How to do this?

Okay now it comes to the excitement — nope I mean the implementation. Well, let me take a case study of mine. Recently, I was assigned to revamp the corporate website of a company where I currently work. Why do we need to revamp the website? The answer is because the website doesn't visually “look” good. Uhm, it is too biased and subjective. Indeed, so then we need to observe the core problem. Thanks to my sales team and my CTO who already observed the problem of our existing website. So we ended up faster in defining the challenge.

How might we emphasize the scability, data-driven information and our core product obviously to our website, so that the customer will simply respond with this kind of impression: “Oh so this product is about tools to build chat feature” ,“Oh then if I want to have chat feature, someday I will just use this” and “I know that I can connect my own chatbot to this chat engine.”

Well, now we have the challenge. Next we need to generate a wide variety of solutions (the goal) to our challenge. I decided to invite the team for a crazy 8’s session the day after tomorrow. The problem is we’re not in the same location. I currently work remotely from home, my CTO is currently in another city and my sales team is based in Jakarta. We are a distributed team! So, we decided to do this remotely. I felt awesome and the whole team also responded with the same excitement. Let’s do this!

To be concerned

Before we decided to drive a crazy 8’s session, we have to rest in the same camp. We are supposed to have the same mindset about the scope, the problem and the challenge. It’s a must.

Choose a doable date and time for us to have the session. Y’all can arrange it on Google Calender.

The equipments

Stable Internet Connection
Make sure y’all have a stable internet connection. When we talk about remote environment, we’ll surely talk about internet connection. We all know that.

Kiwari Web Chat (Powered by Qiscus Chat SDK)
On a daily basis, we communicate each other within this platform.

Google Meet
We’re gonna e-meet each other on Google Meet. Y’all can also use Hangout or Skype.

Sketch App
I’m not a fan of Sketch but I admit to appreciate its integration with Invision Freehand. I created 3 A4 artboards in Sketch and integrated it with Invision Freehand in a single click*. This also helps me not to draw the artboards manually in Freehand.

Invision Freehand
Thanks to InVision for creating this tool. It’s basically a paint app with collaboration feature.

Getting Started

Note: This is not a fixed pattern for you to follow but let me give you at least the blueprint of how did I do this with my team.

1. Prepare The Ground
Before we started the session, I created the required artboards in my Sketch App then imported it to Invision Freehand. *This can be done in a single click but if this is the first time you use Freehand, you’ll be required to install Craft Plugin Manager.

2. Quick Brief
I did a quick brief of what are we going to do within the next an hour. Quick brief also helped us to guide the whole team to be in the same thinking of what are we going to solve (the challenges).

3. Crazy 8’s Session
Then we started the session and it took up to 30 minutes for us to finish it. This probably longer than the normal timing. I decided to take 30 minutes since we needed a warming up and hopefully we were able generate more ideas not in a hurry.

4. Ideas Presentation
Each member is required to present their ideations briefly. (8 minutes)

5. Voting
We ended up the session with voting. We chose some best ideations that we thought we could continue working on it. (5 minutes)

My CTO presenting his ideations

Voting Result

What’s next?

We’ve come up with a cool variety of ideations. However, generating ideas is not the final step. It’s only the beginning. We shall continue working on sorting the similar ideas into a group of category. People usually called it “Affinity Mapping”. This mapping helps us to define the Information Architecture of the corporate website. Then we would rely on the IA to continue working on wireframing and the rest. (I’m gonna write the complete design process later)

The Take Away

Design process is supposed to be adaptive, iterative, collaborative and innovative. Driving a crazy 8’s is a crucial stage in defining the solutions of our existing problem as a part of the design process. The session was fun, excited and generated positive feedbacks from the intended team. Yet this excitement would probably means nothing unless it generates an expected outcome from the users. Thus, it’s not only a designer’s responsibility to produce a user-centered output but also the whole team’s.

––––
By Boby Haryanto
bobyharyanto.co

# data[].attributes.attachment_link.readable_text
A common question students ask me when learning about interaction design is: what's the difference between task flows and user flows?

While every designer seems to have a slightly different understanding of the two concepts, this is an effort to offer one perspective on the distinction.

Both task flows and user flows are deliverables that are generally useful within the interaction design phase of UX design processes, wherein we map out the structure, hierarchy...

# data[].attributes.attachment_link.title
UX task flows versus user flows, as demonstrated by pancakes

# data[].attributes.attachment_link.description
A common question students ask me when learning about interaction design is: what's the difference between task flows and user flows? While every designer seems to have a slightly different understanding of the two concepts, this is an effort to offer one perspective on the distinction.

# data[].attributes.attachment_link.readable_text
What is a storyboard and why should I create one?

A storyboard is the perfect way to plan your video, animation or presentation. Milanote lets you quickly map out the visuals, narration and sequence of each scene in a fun and flexible way. In minutes you can bring your story to life, re-arrange frames as it evolves, then share it with your team and move into production.

Bring your story to life

Milanote's infinite canvas is the perfect place to plan your story. Add and organize images, videos, notes and diagrams like never before.

Learn how to make a storyboard

In this video you'll learn how to begin your storyboard, improve your process and organise a storyboard for presentation.

Creative professionals from these companies create storyboards in Milanote

# data[].attributes.attachment_link.title
Free Online Storyboard Creator - Milanote

# data[].attributes.attachment_link.description
A storyboard is the perfect way to plan your video, animation or presentation. Milanote lets you quickly map out the visuals, narration and sequence of each scene in a fun and flexible way. In minutes you can bring your story to life, re-arrange frames as it evolves, then share it with your team and move into production.

# data[].attributes.attachment_link.readable_text
Listado

Compatible con los sistemas de gestión de aprendizaje populares como Google Classroom, Clever, Canvas, ClassLink y Schoology, Storyboard That hace que la organización de sus estudiantes, clases y tareas sea muy sencilla. Además, compartir tareas con los estudiantes y hacer un seguimiento de su progreso es tan fácil como hacer clic en un botón.

Colaboración en Tiempo Real

Saber trabajar juntos es una parte importante de la educación de un niño. ¡A los estudiantes les encantará trabajar en parejas y en pequeños grupos en el mismo guión gráfico!

¿Quiere que sus estudiantes agreguen escritura a sus guiones gráficos? Tenemos toneladas de opciones para voz y texto.

La prueba gratuita del creador de guiones gráficos para profesores te permite probar todas las funciones premium durante dos semanas. Miles de actividades copiables, hojas de trabajo y carteles son suyos para usar y guardar en su biblioteca de guiones gráficos. A los educadores les encanta Storyboard That porque ayuda a los estudiantes a procesar y comprender la información de una manera profunda y significativa. Cuando los estudiantes hacen un guión gráfico, participan activamente en el proceso de aprendizaje y pueden establecer conexiones entre el texto y sus propias vidas.

Los guiones gráficos también promueven el pensamiento de alto nivel al alentar a los estudiantes a sintetizar información y pensar críticamente sobre lo que han leído. Finalmente, los guiones gráficos son una excelente manera de evaluar la comprensión de los estudiantes porque brindan una representación visual del aprendizaje de los estudiantes.

Storyboard That es la herramienta perfecta para nuevos planes de lecciones y actividades porque es muy fácil de usar y extremadamente versátil. Con Storyboard That, puede crear una amplia variedad de guiones gráficos, como la historia desde la perspectiva del personaje principal o el punto de vista de cualquier otro personaje.

Al combinar el creador de guiones gráficos con sus planes de lecciones, puede cumplir con el plan de estudios y los estándares requeridos, mientras se asegura de que sus estudiantes se involucren y se entusiasmen por aprender. ¡Otra ventaja adicional es que nuestros planes de lecciones prefabricados están alineados con el Common Core!

# data[].attributes.attachment_link.title
Software Gratuito de Creación de Guiones Gráficos - Creador de Guiones Gráficos en Línea | StoryboardThat

# data[].attributes.attachment_link.description
¡Cree guiones gráficos con nuestro software gratuito de guiones gráficos! ✩ ¡A los cineastas, maestros, estudiantes y empresas les encanta usar ❰ Storyboard That ❱ para guiones gráficos y cómics en línea!

# data[].attributes.attachment_link.readable_text
How much to build an MVP (minimum viable product)?

Do you have an amazing idea for an app or software but don’t know where to start? Would you like to find out how much it would cost to build a prototype?

We have created this handy cost calculator just for you. Find out how much your prototype will cost in 2 mins.
Let's get started

# data[].attributes.attachment_link.description
A handy calculator which allows you to grab an MVP (minmal viable product) estimation for your next great idea.

# data[].attributes.attachment_link.readable_text
Insight

Coach Takeshi’s Insights (Top)

Mental Model Dōjō

The Reflective Leader and Learning Organization Guide

The Lean & Agile Practitioner

Search Post

Our Work

Main Themes

More Themes

Individual Coaching / Executive Coaching

Events

About

About Us

Join Our Tribe

About Coach Takeshi

Privacy Policy

Terms and Conditions

Coaching Consent Form

Ask

Search

Insight

Coach Takeshi’s Insights (Top)

Mental Model Dōjō

The Reflective Leader and Learning Organization Guide

The Lean & Agile Practitioner

Search Post

Our Work

Main Themes

More Themes

Individual Coaching / Executive Coaching

Events

About

About Us

Join Our Tribe

About Coach Takeshi

Privacy Policy

Terms and Conditions

Coaching Consent Form

Ask

Search

Two versions of Design Thinking POV (Point of View) Statement templates.

Download PDF version with editable text boxes here: DT POV Templates

Recent Posts

# data[].attributes.attachment_link.title
Two Templates for Design Thinking POV (Point of View) Statements

# data[].attributes.attachment_link.description
Two versions of Design Thinking POV (Point of View) Statement templates. PDF version with editable text boxes available here as well.

# data[].attributes.attachment_link.readable_text
¿Qué es una historia?
Las historias son una herramienta poderosa en el diseño de la experiencia del usuario. Pueden ayudarte a comprender mejor a las personas y sus experiencias, comunicar lo que ha aprendido, lo que ha vivido, lo que hemos descubierto y utilizar esa comprensión para crear mejores productos.
¿Qué pueden hacer las historias?
Las historias tienen muchos usos en el diseño de la experiencia del usuario y pueden integrarse en su propio proceso.

Pueden describir un contexto o situación, como historias que forman parte de personas, lugares u objetos.

Pueden ser el punto de partida para una discusión de diseño, explorar un nuevo concepto de diseño o describir un nuevo diseño.

Todos contamos historias y las contamos todo el tiempo. Es una de las formas más naturales de compartir información, y es tan antigua como la raza humana.

Este artículo trata sobre cómo usar una habilidad que ya posee de una manera nueva: en el campo del diseño de experiencia de usuario (UX).

"El limón de Troya" Temporada 6 Episodio 24 - Los Simpson

La dualidad de la historias Pongo este ejemplo de Los Simpson nos muestra cómo las historias, motivan y modifican nuestro comportamiento. El limonero en Springfield ha sido un estandarte durante muchísimo tiempo, es algo que genera identidad y los viejos cuentan su historia con orgullo, algo que Shelbyville (el pueblo de a lado) sabe y como consecuencia, se genera un conflicto entre los dos pueblos a partir de su robo. Los niños crean este conflicto y los adultos lo "resuelven". Al final el limonero regresa a Springfield (o lo que queda de él), por su parte la gente de Shelbyville tiene que conformarse con un árbol de betabel (ya sé que el betabel es un tubérculo jaja, pero vamos, sigan con la historia). Ambos viejos, uno de un pueblo y otro de otro cuentan la historia no como pasó, sino conviene a las siguientes generaciones creando perpetuidad en la historia. Las historias en el diseño de experiencia
Como parte del diseño de la experiencia del usuario, las historias sirven para fundamentar su trabajo en un contexto real entendiendo de por medio que en cada historia existe otra y que todas las historias se perciben de manera distinta dependiendo de nuestra historia, nuestro contexto, raíces, cultura.

Nos permiten mostrar un concepto de diseño o un nuevo producto en acción, o conectar una nueva idea a la chispa inicial. Pero lo más importante, nos ayudan a mantener a las personas en el centro de tu trabajo, realmente trabajar con, por y para ellas. Independientemente de cómo comience un proyecto, al final será utilizado por personas. Las historias son una forma de conectar lo que sabes sobre esas personas (tus usuarios) con el proceso de diseño, incluso si no siempre pueden ser parte de tu equipo.

Las historias se pueden usar de muchas maneras en cualquier proceso de experiencia del usuario:
* Nos ayudan a recopilar (y compartir) información sobre usuarios, tareas y objetivos.
* Ponen una cara humana en los datos analíticos, cuantitativos y cualitativos.
* Pueden generar nuevos conceptos de diseño y fomentar la colaboración, co-creación y la innovación.
* Son una forma de compartir ideas y crear un sentido de historia y propósito compartidos.
* Nos ayudan a entender el mundo al darnos una idea de las personas que no son como nosotros.
* Incluso pueden persuadir a otros del valor de nuestra contribución.
¿Para qué me sirve el Storytelling?
Nos hace mejores oyentes, por lo que tiene las palabras de los usuarios para contar sus historias
* Nos hace un mejor observador, para que pueda incluir el contexto real de uso en sus historias
* Un narrador ético, que sabe cómo elaborar historias (como personas) que son arquetípicamente verdaderas, incluso si son compuestos
* Un diseñador innovador, que usa historias para ayudar a los equipos a ver problemas y soluciones de nuevas maneras
* Convertirte en una persona a la que la gente le gusta escuchar porque sus historias son interesantes y significativas para tus proyectos.

La mayoría, aunque no todas, las historias en el diseño de la experiencia del usuario comienzan con realmente escuchar a otra gente. Cuando se toma el tiempo de escuchar y observar a personas reales, podemos obtener más oportunidades de lo mas importante: Entender y empatizar.

Te sorprenderá encontrar cuantas historias existen a tu alrededor. Y cuando escuches profundamente, las historias que encuentre tendrán más resonancia y serán más útiles como parte de tu proceso de diseño. Pueden ir más allá de simples anécdotas para expresar aspectos importantes de comportamiento, objetivos o cultura, puedes obtener insights y hallazgos valiosos a lo largo del proceso, tal vez tu enfoque, las herramientas, incluso la comprensión del problema.
Cuando tuve la fortuna de hacer diseño de servicios en un hogar para ancianos el problema inicial del cliente era: ¿cómo puedo hacer más rentable para el negocio la estancia de un adulto mayor pero al mismo tiempo, cómo puedo generar bienestar, tranquilidad y plenitud en las personas? Partamos de la premisa de que es imposible llegar a una solución sin el entendimiento del problema, ¿cómo podemos pensar y sentir como una persona mayor de 60 años, cuando nuestra movilidad, salud mental, emocional y física son totalmente distintas? Llegar al entendimiento llevó en este caso 3 meses. Aurora, una mujer de 68 años al que sus familiares la visitaban una vez al mes, la entrevisté numerosas veces, cada entrevista más larga, más profunda, más difícil, más demoledora. Entendí que no hay una metodología que te enseñe a través de la entrevista y de la escucha a resolver problemas tan complejos como la soledad de una persona y de la incertidumbre hacia lo que viene. Puedes tratar de subsanarla de alguna manera pero jamás puedes acertar sin escuchar historias, si, logramos cambios positivos en al asilo pero siempre pensé que al final de escuchar la vida de Aurora pude entender que mi solución se quedó corta y que en realidad el problema era totalmente distinto. Aurora no hacía entrevistas, contaba historias y estas historias contenían múltiples insights que nos hizo dar cuenta de la complejidad del problema y de lo poco que podíamos hacer mejorando un proceso que en realidad no lo era. Si, mejoramos algunos aspectos, co-creamos procesos, medimos experiencias pero no resolvimos el problema core.
Hay una razón más para usar historias en el diseño de la experiencia del usuario. Es, simplemente, porque el poder de las historias nos permite ver el mundo a través de una nueva lente. Una de las cosas más difíciles de hacer es comprender una tarea, contexto o experiencia como lo hace otra persona.
Podemos ver el problema de diseño desde esa nueva perspectiva, estamos a medio camino de encontrar una solución. Puede ser una idea nueva, grande e innovadora, o un pequeño ajuste que cambia una experiencia de mala a buena. Escuchar realmente es el comienzo de comprender realmente a las personas que usan los productos, herramientas y servicios en los que trabajamos. Y ese es el comienzo de crear una excelente experiencia de usuario...o de darnos cuenta de que el problema es totalmente distinto y que las historias nos ayudan a reformularlo, entenderlo y sobre todo, resolverlo.

# data[].attributes.attachment_link.title
Storytelling: La importancia de saber contar historias en UX

# data[].attributes.attachment_link.description
¿Qué es una historia? Las historias son una herramienta poderosa en el diseño de la experiencia del usuario. Pueden ayudarte a comprender mejor a las personas y sus experiencias, comunicar lo que ha aprendido, lo que ha vivido, lo que hemos descubierto y utilizar esa comprensión para crear mejores productos.

# data[].attributes.attachment_link.readable_text
Hablemos de UX research. ¿Eso qué es lo que es? Pues a grosso modo es la investigación centrada en el usuario. Es así como muy amplio, pero en este artículo quiero hablar de una de las técnicas que se usan: las entrevistas cualitativas.

Yes. Pero no soy ninguna experta así que voy a hablar de mi experiencia personal. (Aviso: este post está lleno de Gif's).

La definición, sacada de Designpedia, dice:

La entrevista cualitativa es un encuentro cara a cara entre la persona que entrevista y el entrevistado, el cual debe ser el usuario final. El objetivo es tener más datos sobre el usuario, conocerlo mejor, saber sus impresiones y preferencias sobre el tema de estudio.

Vale, entonces básicamente es sentarte con una persona y preguntarle cosas. Pero ¿qué cosas? Pues, como todo en la vida, depende del proyecto. Pero nunca, JAMÁS, pedimos al usuario que nos diga lo que quiere. Lo que hacemos es preguntar cómo es su experiencia hoy en día en X producto o servicio para identificar las necesidades que podemos cubrir con el futuro diseño.

¿Por qué no les preguntamos lo que quieren directamente? Porque si lo hacemos tendremos cosas tan maravillosas como el coche de Homer Simpson:

Ponme tres de estos por favor.

O, como dijo Henry Ford:

"Si le hubiera preguntado a la gente qué quería, habrían dicho caballos más rápidos".

Eso es así. La tarea del entrevistado es decirnos cómo hacen o usan X cosa (con sus cosas buenas y sus cosas malas) y la nuestra es buscar soluciones para mejorar su experiencia. Fin.

Hay mil artículos y libros que explican cómo hacer una entrevista en condiciones (por ejemplo, el libro de Interviewing Users de Steve Portigal, que es facilico de leer, aunque tengas un inglés flojete), así que no me voy a enrollar en tecnicismos... vamos a lo que realmente importa en este artículo, mi experiencia personal.

Antes de empezar, preparamos los scripts

Hay que hacer los scripts de las entrevistas. ¿Qué es un script? La forma moderna y molona de decir 'guión de preguntas' (ya sabemos que la moda es decirlo todo en inglés).

Lo primero que hacemos para hacer este script, es determinar el objetivo de las entrevistas, es decir qué preguntas necesitamos responder. Y esto no es: "quiero saber cómo es mi usuario", no, esto es demasiado amplio. Es más tirando a un: "quiero entender cómo buscan y reservan piso mis usuarios", ahí, a machete, que no hay tiempo, así podemos poner foco en las preguntas que realmente nos importan.

Después tenemos que definir a nuestros posibles usuarios para saber cuántos scripts hacer. Normalmente se hace uno por perfil, aunque a veces las cosas se complican y hay que hacer pequeños puzzles, o monstruos (true story).

Por ejemplo, para una app de alquiler de viviendas online, hay varios perfiles: familias con o sin hijos, parejas, grupos de amigos, personas que quieren vivir solas, gente que busca compartir piso,...

Cada perfil es distinto y busca cosas diferentes, así que se le hace la misma entrevista a cada usuario del mismo perfil (la teoría dice que se deben hacer un mínimo de 3 entrevistas por perfil, siendo lo ideal 5 por perfil) para poder buscar los patrones y ver si alguno de los perfiles se fusionan porque sus comportamientos son similares.

Muy bien, ya tenemos dos cosas hechas, el objetivo definido y los perfiles. Ahora toca preparar la batalla de preguntas. Yo los suelo estructurar así:

Introducción: nos presentamos y explicamos al usuario por qué se le entrevista y qué queremos conseguir.

Wrap up: le pedimos al usuario que se presente y nos hable un poco de él, así vamos dejando que el usuario se sienta cómodo.

Preguntas específicas del proyecto: es la sección más amplia donde buscamos las motivaciones y las frustraciones de los usuarios e intentamos entender su contexto, se suelen dividir por bloques de información.

Cierre: dejamos que el usuario nos pregunte si tiene dudas, le agradecemos su tiempo y nos despedimos. Chao pescao.

Recordatorio: Nunca preguntar directamente qué quiere el usuario o cómo solucionaría el problema. Siempre hacemos preguntas abiertas para que el usuario se suelte y podamos indagar en sus respuestas. Y, sobre todo, tenemos que escuchar más que hablar,

A ver, que esto no es un guión del que jamás te puedas salir porque sino viene un ser primigenio a por ti, no. Cada usuario es un mundo y muchas veces responden a las preguntas antes de plantearlas, sólo es un guión del que partir, pero una entrevista es más una conversación que un interrogatorio.

Hasta aquí todo perfecto. Pero defines los perfiles y te das cuenta de que tienes un montón y, si multiplicamos el número de perfiles por el número de usuarios por perfil, te encuentras con que tienes que hacer entre 20 y 30 entrevistas (depende de si haces 3 o 5 por perfil) y, ay amigo, no hay tiempo para todas... pues ale, tiras del mínimo posible y cruzas los dedos porque tengas usuarios de los buenos, de los que responden con calidad (que los hay que tienes que sacarles las palabras con sacacorchos o que no paran de hablar pero realmente no dicen nada).

Ya tenemos lo necesario para empezar con nuestras entrevistas: guión y usuarios agendados. Antes de empezar con los usuarios reales lo ideal es hacer una entrevista piloto con la que ver si entra en el tiempo y esas cosas. Pero eso es la teoría, que es preciosa. La realidad es que a veces no hay tiempo y al final vas modificando y adaptando el script a medida que vas haciendo entrevistas y te das cuenta de que hay cosas mejorables.

Las entrevistas duran en torno a una hora y se suele hacer entre dos personas, el moderador (el que hace las preguntas) y el observador (el que se deja la mano tomando notas). A ver, que no cunda el pánico, que las entrevistas se suelen grabar, así que si no da tiempo a tomar todas las notas, se escucha y completa. Es cierto que cuanto mejor se tomen las notas en la entrevista, menos curro tienes que hacer luego. Si te toca la entrevista sin observador, pues más curro luego, porque el moderador tiene que escuchar con atención y dirigir la conversación.

No hay mejor manera de entender las motivaciones, los deseos y las frustraciones de los usuarios que hablando directamente con ellos.

En una entrevista hay que hacer sentir cómodo al entrevistado y fijarse en su lenguaje corporal, siempre mantener el contacto visual y sonreír. Sonreír mucho y asentir, que se note que estás escuchando y valorando su opinión.

¿Qué me he encontrado yo?

Bueno, yo he hecho los dos roles, moderar y observar. Hay gente que es muy concisa con las respuestas, pero los hay que les tienes que dejar dar vueltas y vueltas hasta llegar a lo que realmente importa. Necesitan su tiempo y nunca hay que meterles prisa ni presionarles.

Mi peor entrevista fue una en la que yo tenía que hacer de moderadora. Era por videoconferencia y nos habían dicho que el entrevistado hablaba castellano, hasta aquí todo correcto. Pero cuando nos conectamos, resulta que el señor sólo hablaba inglés y me entró el pánico, porque mi nivel de inglés no es para moderar una entrevista... Suerte que mi compañera, que iba a tomar notas, era bilingüe, así que nos cambiamos los roles y ya está. O no, porque al señor no se le oía bien ¡y no le entendía nada! Tomé notas como pude y luego confiamos en que la grabación se oyera bien para poder escucharlo con calma, pero no fue así, se oía fatal. Estas cosas pasan. Al final lo sacamos, pero con sudor y lágrimas.

Ya hemos terminado todas las entrevistas, ¿y ahora qué? ¡Toca sintetizar!

Dependiendo de cuanto tiempo haya entre una entrevista y otra, lo ideal es ir haciendo las bajadas según terminas cada entrevista, que la tienes fresca (llamamos 'bajada de entrevista' a procesar y aterrizar la entrevista). Pero a veces son muy seguidas y hay que hacerlas todas al final. Sea como sea, el proceso de bajada de una entrevista es tedioso pero a mí es de las partes que más me gustan.

Para hacerla cogemos las notas que hemos tomado en cada una de las entrevistas, las completamos con lo que falte del audio que hemos grabado (nunca lo hacemos de memoria, que nos puede traicionar) y nos ponemos a sacar lo más importante, lo realmente relevante para nosotros y lo ponemos en post its. Vamos, eliminamos la paja.

Lo primero que ponemos es un resumen de quién es y a qué se dedica la persona a la que hemos entrevistado, para no perder su contexto.

Por cada post it ponemos una idea autoexplicativa. Esto significa que no ponemos tal cual lo que ha dicho el usuario (a no ser que sea un verbatim potente, entonces tal cual va al post it) sino que resumimos un concepto o idea de tal manera que si movemos ese post it (que lo haremos cuando empecemos a buscar patrones) entendamos a que se refiere.

Recordad que hemos hecho la misma entrevista a todos los usuarios por perfil, así que todas las ideas responden a lo mismo. Normalmente ponemos un post it inicial (diferenciado del resto, ya sea por color o con algún tipo de marca que haga que se distinga del resto, por ejemplo, un recuadro) con el título del bloque de preguntas a los que hacen referencia y luego todas las respuestas.

Todo esto por cada entrevista que hayamos hecho... esto significa miles y miles de post its y mucho espacio para ponerlos... Si, como una habitación entera durante varios días... así que, depende de lo grande que sea la empresa, igual nos tenemos que "pegar" por monopolizar la sala. Para minimizar el tiempo de ocupación de una sala, lo mejor es usar flipcharts (son como post its gigantes, la típica pizarra de papel pero que tiene adhesivo en la parte superior de la trasera)para poner cada una de las entrevistas, así podemos apilar unas encima de otras mientras hacemos las bajadas y ocupar menos espacio. Pero cuando terminemos de bajar todas las entrevistas, toca desplegarlas y buscar patrones y ahí sí que necesitamos todo el espacio posible el tiempo necesario.

Una de las paredes de una sala con todas las bajadas de las entrevistas para un proyecto.

Ahora sí, toca el momento de locura y angustia pensando ¿qué hacemos con todo esto? Es un momento de agobio momentáneo en el que no sabes qué hacer con toda la información y piensas que nunca acabará.

Pero tranquilos, que todo pasa y, además, es uno de los momentos más bonitos de este proceso, cuando todo empieza a tomar forma.

Nos encerramos en la sala y empezamos a mirar transversalmente los bloques de información de cada entrevista, marcando con pegatinas, esas redonditas de colores, los datos más importantes y desechando lo que no haga falta. Ahora ya estamos listos para agrupar por afinidad los datos similares.

Poco a poco va desapareciendo esa sensación de agobio, cuando la pared se va vaciando y notas que todo tiene su sitio. Vas creando grupos (a veces se fusionan entre ellos) y cuando hemos terminado de agruparlo todo, que suena sencillo pero de verdad que lleva su tiempo, estamos listos para buscar patrones, generar insights y sacar las conclusiones de las entrevistas.

Una vez terminado esto, falta crear el informe con todas las conclusiones, donde tenemos que explicar lo que hemos descubierto, acompañado de los verbatims (siempre anónimos) que respalden nuestros insights y los gráficos necesarios para que se entienda de forma clara y sencilla.

Luego ya toca seguir trabajando, creando Personas, mapas de empatía, journeys,... con los que seguiremos trabajando e ideando para mejorar el producto X.

Esto es, en resumen, lo que quería contaros hoy, como he hecho hasta ahora las entrevistas a usuarios. Sé que me queda mucho por aprender y, seguramente, todo sea muy mejorable, pero me encanta esta parte de la fase de investigación y me apetecía escribir sobre ello :)

Y poco más, si queréis preguntar, aportar o darme feedback de este post puedes localizarme en Twitter o LinkedIn o escribiendo a maitea83@gmail.com.

# data[].attributes.attachment_link.description
Hablemos de UX research. ¿Eso qué es lo que es? Pues a grosso modo es la investigación centrada en el usuario. Es así como muy amplio, pero en este artículo quiero hablar de una de las técnicas que se usan: las entrevistas cualitativas. Yes.

# data[].attributes.attachment_link.readable_text
"Investigación cualitativa" es usada para explorar razones, opiniones y motivaciones de usuarios--construir una guía de entrevista es un paso crucial en este proceso. En este tutorial nos aseguraremos de que estás preparado viendo cómo construír tal guía.

Tus Metas

Antes de conducir una entrevista deberías apuntar a planear tanto qué vas a decir y cómo preguntarás tus preguntas. Tu meta es construir un a compenetración con la persona con la que estás hablando, haciéndolo sentir cómodo, mientras que eres consciente de que probablemente tienen poco tiempo. Lo específico será en donde tienes las visiones principales y esas son generalmente encuadradas alrededor de frustraciones, motivaciones e interacciones.

Tus guías de entrevista también serán contextuales para quienes entrevistes; es bueno tocar una mezcla de expertos de dominio o industria, pero también tus usuarios meta.

Identificando a Tus Entrevistados

Grupo de Usuario Meta

Como todos los profesionales UX te dirán: tu no eres tu usuario. Necesitas aprender de la gente para la que estarás diseñando. Es importanate considerar al usuario primario y también cualquier usuario secundario en la comunidad extendida. En mi experiencia, también puede ser valioso hablar con usuarios que tienen percepciones extremas del mundo.

Expertos e Interesados de la Industria

Es importante que identifiques a los expertos de dominio en el campo. Estos individuos probablemente tendrán poco tiempo, especialmente si buscas obtener ideas de ejecutivos o gente que tiene posiciones altas. Por lo tanto, una vez que sepas a con quién buscas hablar, es importante tener tanta disponibilidad como sea posible. Una llamada en conferencia o de Skype puede funcionar bien cuando se hace investigación con este grupo de gente.

Saber Con Cuánta Gente Hablar

Grupo de Usuario Meta

Si estás comenzando desde cero podrías necesitar hablar con hasta ocho individuos. Si tienes buenas bases e investigación existente yo recomendaría considerar alrededor de tres personas.

Expertos de la Industria e Interesados

Los expertos están menos disponibles, pero recomendaría hablar con al menos un interesado de la industria. Si eres nuevo en el sector, busca más; tal vez tres personas.

Registrando Resultados

Hay muchas herramientas para ayudar con entrevistas de usuarios, pero Screencastify es grandioso para registrar tu pantalla y audio. Puedes usar esto para reproducir entrevistas y pruebas, ya sea que las conduzcas en persona o remotamente. También capturará el audio del micrófono de tu laptop. Es una herramienta gratuita con una versión premium por $24 (al momento de la redacción).

Tu Guía de Entrevista

En las etapas tempranas del proceso de diseño, cuando creas una guía de entrevista, aterriza tus ideas rápida y crudamente en papel de formato grande.

Estructura las cosas anotando preguntas amplias y después más específicas según avanzas. Comienza dividiendo tus hojas de papel en dos columnas grandes. Ahora, has una lluvia de ideas para preguntas generales en la izquierda, considerando por qué y cómo los datos resultantes podrían ser aplicados en tu proyecto de diseño. Esto te ayudará a enfocarte en frustraciones, motivaciones e interacciones clave que pueden ser sintetizadas en notas post-it.

Planeando tus Preguntas Amplias

Cuando juntas tus preguntas amplias se sensible acerca de preguntar cualquier cosa que sea inecesaria o discorde, tales como "¿cuántos años tienes?". Estas buscando obtener realmente alguna información de alto nivel para tu artefacto persona, aprender más sobre el antecedente de la persona y construír un poco de compenetración.

Entender el ambiente de una persona, por ejemplo, traerá vida a la historia. Con esto en mente, podrías preguntar algo como: "describe tu última cena familiar". ¿Quién estaba ahí? ¿En dónde tuvo lugar?

Planeando Tus Preguntas Específicas

Piensa acerca de preguntas que puedan ayudarte a entender las motivaciones, frustaciones e interacciones de la persona:

Motivaciones

¿Qué les importa a tus usuarios? ¿Qué los motiva? Presta atención al tono. No es solo lo que dicen, sino cómo lo dicen. Es posible distinguir los diferentes niveles de pasión y emoción detrás de cada declaración. Lee su lenguaje corporal; ¿sus brazos están retraídos cuando te responden, están sonriendo? Esto te dará pautas sobre como sondear más adelante.

Observa el lenguaje corporal

Es importante diferenciar entre metas y motivaciones. La meta de un usuario será el punto final de un estado deseado, lo que el negocio facilita, ¿pero qué los motiva a alcanzar ese punto? ¿Es culpa? ¿Motivadores financieros quizá? ¿Una necesidad de impresionar? Pensando sobre estos motivadores y encuadrando tus preguntas de esta manera te ayudará a identificar motivaciones.

Frustraciones

¿Qué frustra a tus usuarios? ¿Qué necesidades tienen que no están siendo satisfechas? Tus preguntas deberían ser encuadradas en la mejor manera para abordar cada punto de contacto a lo largo del viaje del cliente.

Piensa sobre lo que los frustra no solo desde una perspectiva digital, sino también no digital. La experiencia de usuario es todo. Por ejemplo, desde el momento en que el cliente entra a una tienda y habla con el personal, hasta el empaquetado del producto, cómo es cuando llevan el producto a cada y lo abren por primera vez. Todos los detalles.

Concentrate en cada punto del viaje y cénsalos para responder más específicamente. Necesitas evitar ponerlos en "modo solución". Algunos entrevistadores son buenos en este respecto, otros son "solucionadores de problemas" y puede ser difícil hacerlos responder de una manera que de hecho te ayude. La mejor manera es reconocer lo que dicen, expresar tus expectativas por adelantado, después filtrar soluciones y retener puntos de dolor específicos.

Interacciones

¿Qué es interesante acerca de la manera en que tus usuarios interactuan con su ambiente? Esta es probablemente el área más importante de tu investigación.

1. Piensa sobre el problema del negocio y una interacción típica entre negocio y usuario. Podrías querer delinear los diferentes puntos de contacto a lo largo del viaje primero y después afinar algún punto en específico.

2. Aprende como hacen su trabajo, o cualquier tarea que pueda ser. Tener una perspectiva holística te dará una mejor idea del contexto de por qué toman ciertos caminos.

3. Crea un flujo de tarea, una serie de pasos y puntos de decisión a lo largo del camino. No tienes realmente que pensar sobre si estos son perfectamente precisos, solo estás aprendiendo efectivamente el dominio.

Comparte Con Interesados

Una vez que has terminado el primer paso de tu guía de entrevista, agenda una reunión con tu equipo y otros interesados clave. Comparte tus preguntas. Podrías incluso decidir mandarlas a tu cliente.

Obtén retroalimentación; ve qué tiene sentido y necesita hacerse. Ellos podrían tener algunas ideas para preguntas adicionales que hacer.

Conclusión

Tu guía de entrevista es efectivamente un plan de ataque. Tu aproximación será una combinación de balancear los resultados deseados, pero también pensar tus habilidades suaves y construir una compenetración con tu entrevistado, de manera que pueden sentirse cómodos y abrirse a tí.

La siguiente parte estará dirigida a cosas específicas--como una regla general es bueno enfocarse en:

Esto te proporcionará la información cualitativa la cuál puedes sintetizar en un diagráma de afinidad en la siguiente fase de tu Investigación UX.

# data[].attributes.attachment_link.title
Investigación UX: Cómo Construir una Guía de Entrevista

# data[].attributes.attachment_link.description
"Investigación cualitativa" es usada para explorar razones, opiniones y motivaciones de usuarios--construir una guía de entrevista es un paso crucial en este proceso. En este tutorial nos aseguraremos de que estás preparado viendo cómo construír tal guía. Antes de conducir una entrevista deberías apuntar a planear tanto qué vas a decir y cómo preguntarás tus preguntas.

# data[].attributes.attachment_link.title
Beautiful Free Images & Pictures | Unsplash

# data[].attributes.attachment_link.description
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

# data[].attributes.attachment_link.readable_text
Antes del inicio del diseño de producto, es muy relevante conocer bien los requisitos de los usuarios. Tener en cuenta las necesidades de usuarios puede ayudar a decidir cómo será el producto que pueda satisfacer a los requisitos convencionales de usuarios de diferentes campos, edades y con contextos desiguales, mientras tanto decidir la dirección del diseño. Crear Personas es una manera buena para lograr este objetivo. El pionero en el desarrollo de software Alan Cooper había creado la primera Persona con sus colegas en los años 80. En este artículo, vamos a hablar de la creación de Personas a través de 7 apartados.

Persona se refiere a uno o unos personajes ficticios creados con motivo de representar a los usuarios posibles de un producto a través de una buena cantidad de investigaciones cualitativas y cuantitativas. Persona nos contesta la pregunta "¿Para quién diseñamos?" Es una herramienta poderosa basada en conclusiones de investigaciones en ayudar la creación de funciones de producto optimizando la investigación de UX. No sólo representa a algún usuario concreto sino al conjunto de ellos, se puede entender como el personaje típico de la conducta, la actitud, las habilidades y los contextos de todos los usuarios potenciales.

Datos numerosos son bastante difíciles de manejar, especialmente cuando hace falta prestar atención a los datos durante todo el proceso del diseño. Por lo tanto, Persona será un objeto relativamente más realista, aunque no es una persona de verdad, es la imagen más típica de muchas personas reales, y puede recordarnos de la necesidad de usuarios. Por eso puede facilitar el proceso de desarrollo.

Personas pueden clasificarse en 2 tipos en general: Persona de Mercado (Marketing Persona) y Persona de Diseño (Design Persona).

1. Las Personas de Mercado son personajes típicos de los clientes de un producto o de una empresa, ellos tienen similitudes en la preferencia de compra, las relaciones sociales, el modo de consumo y las edades. Las Personas ayudan a la empresa a determinar cómo serán sus clientes posibles y cómo serán los que puedan ser sus clientes;

2. Personas de Diseño (Como Usuario Persona y UX Persona) se refieren a los representantes de usuarios de algún producto o servicio que tienen puntos similares en las costumbres de uso, los requisitos de producto, la preferencia y las metas. Pueden describir el porqué de las necesidades de los usuarios potenciales y ayudar a los diseñadores a poner a los usuarios en el primer lugar de su diseño, además, hacer los productos conformar los requisitos de usuarios.

1. Examen de los entendimientos sobre los usuarios: Cuando más les conoce el grupo de diseño a sus usuarios, más conforman las necesidades de usuarios sus productos.

2. Usuarios centrados: Personas dejan las metas y los requisitos de usuarios: el eje de los trabajos del grupo de diseño, con lo cual saldrá la primera versión del producto con más usabilidad.

3. Poder de evitar el conflicto: Con Personas, el grupo de diseño puede adaptar sus decisiones para que convengan a las situaciones de mutaciones o conflicto de diseño.

4. Control de la dirección: Las Personas pueden ayudar al grupo a desarrollar las funciones realmente más útiles en lugar de diseñar funciones que nunca se usarán. Y evitan la situación usual en que los desarrolladores malentienden lo que quieren los usuarios porque lo que dicen y lo que hacen los usuarios pueden ser diferentes.

5. Predicción de la conducta de usuarios: Aprovechando de las Personas se puede predecir las necesidades, la conducta y las reacciones posibles de los usuarios, por eso pueden reducir el uso del examen de usabilidad.

6. Control de jerarquía en el diseño: Personas ayudan al grupo de diseño a centrarse en el elemento más importante del diseño.

7. Ahorramiento de tiempo: Crear Persona es una manera de sustituir unos métodos tradicionales de la investigación de requisitos de usuarios.

Normalmente se crean Personas antes de la etapa del diseño de User Journey y User Flow, los cuales también necesitan usar los datos usados en la creación de Persona. Y una Persona bien diseñada puede facilitar y perfeccionar directamente el resultado del diseño de User Journey y User Flow.

1. Determinar el método de investigación

El primer paso es aclarar quiénes son los usuarios potenciales, lo que debemos hacer no es imaginar las imágenes de los usuarios de la nada sino hacer investigaciones y entrevistas con multitud de diferentes campos, edades, niveles educativos, géneros, etc. Se puede usar una técnica llamada Grupo de Discusión de las investigaciones de ciencias sociales: Dividir a los entrevistados en grupos pequeños de entre 6 y 12 miembros y dejarles hablar libremente sobre los temas ofrecidos por los organizadores, y los cuales anotan las palabras e ideas concretas de los entrevistados sin interrumpir sus discursos, después guardar las notas con los datos personales. Mientras tanto también se necesitan las informaciones de las investigaciones cuantitativas como el apoyo de datos.

2. Encontrar usuarios

El grupo de diseño o de producto pueden lanzar preguntas o dar temas que puedan ayudar la determinación de los usuarios en las entrevistas. Con el trabajo hecho en la parte anterior, hay que analizar los datos obtenidos en búsqueda de quiénes son los usuarios potenciales y cuántos son ellos.

3. Propuesta de hipótesis

Esta parte se dedica a encontrar las diferencias entre todos los usuarios potenciales basando en las conclusiones de investigaciones. Es necesario hacer hipótesis del porqué de la existencia de las igualdades entre los usuarios después de anotarlas. Con lo cual puede salir una imagen abstracta de un cierto tipo de los usuarios potenciales.

4. Verificaciones

Trabajos requeridos: Encontrar qué le gustaría y no a Persona, los requisitos interiores de Persona, cómo sería la situación en que Persona usaría el producto, etc.

5. Similitudes de clientes

Con clasificación de las informaciones logradas a través de las partes anteriores, el grupo de diseño ya cuanta con el poder de examinar si los miembros han encontrado correctamente las etiquetas de usuarios. Y con una base de datos más pequeña, pueden observar si hay otro tipo de usuarios potenciales y sus requisitos.

Pregunta: ¿Tiene la misma importancia la base de datos menor?

6. La creación de datos de Persona

Como lo mencionado en el comienzo de este artículo, Persona es un modelo concreto de la imagen típica de los clientes potenciales, necesitamos añadirle más descripciones para enriquecer la imagen de la Persona. Las descripciones se hacen basadas en los datos logrados, al mismo tiempo tenemos que suponer más informaciones personales tales como la identidad, el sexo, su trabajo y las costumbres cotidianas que pueden influir el uso de producto. Así con todo el proceso, al final la Persona puede participarse en el proceso del diseño y con su existencia el grupo puede lanzar preguntas más cercanas a las ideas de usuarios como ¿Qué opinaría la Persona sobre...?" y "¿Qué pensaría sobre esta función?"

7. Diseño de escenarios de uso

Al finalizar el establecimiento de una Persona, nos hace falta diseñar unos escenarios en que la Persona tiene la necesidad de usar el producto para crear un ambiente con más verosimilitud.

Una buena Persona puede ofrecer su ayuda al grupo en el diseño rápido del prototipo de producto con UX bueno. Además, con el establecimiento de Persona, el grupo puede reaccionar con más rapidez a los cambios de los requisitos de usuarios. Una herramienta de prototipo rápida y fácil de usar deja la posibilidad al grupo de diseño crear una interfaz de usuario sobresaliente, mientras Persona dirige al grupo a optimizar la UX de su producto a lo largo del desarrollo. Por eso la combinación de ambas partes puede promover extremamente el diseño de producto y esta función será sostenible. Sin embargo, la creación de una buena Persona no es simple, sus características son:

1. reflejar suficientemente los datos y las conclusiones de investigaciones;

2. mostrar el estado actual de los entrevistados en lugar de su expectación al futuro;

3. ser más realista que idealista;

4. proponer un reto al grupo (pero no es imposible);

5. ayudar al grupo a entender a los usuarios mejor.

Las Personas también tiene sus límites, por ejemplo, por su característica de ser creada según las necesidades de usuarios, no puede reflejar la calidad atractiva de los usuarios, y cuando no sean suficientemente típicos los datos de Persona, pueden desviar la dirección del diseño. Esto es el punto que merece mucha atención al crear Persona.

Al final, no sólo hay una resolución para el diseño de producto, crear Persona es una de ellas, si el grupo necesita y decide crear su propia Persona, tiene que pensarse bien cómo obtener una imagen más típica y verosímil de los usuarios y dejarle participar en todo el desarrollo. Además, acumular más conocimientos sobre la psicología de los usuarios también es una de las facultades de los diseñadores. A través de este artículo, los lectores podréis entender bien cómo crear Personas e integrar esta manera en vuestros trabajos en el futuro para mejorar la UX de los productos.

# data[].attributes.attachment_link.title
Qué Son y Cómo Crear UX Personas: Guía Para Todo lo que Deseabas Saber

# data[].attributes.attachment_link.description
Antes del inicio del diseño de producto, es muy relevante conocer bien los requisitos de los usuarios. Tener en cuenta las necesidades de usuarios puede ayudar a decidir cómo será el producto que pueda satisfacer a los requisitos convencionales de usuarios de diferentes campos, edades y con contextos desiguales, mientras tanto decidir la dirección del diseño.

# data[].attributes.attachment_link.readable_text
Photo Credit: Elfia Haarzuilen

“Give a man a mask and he will show his true face.” ~ Oscar Wilde

The word persona comes from the Latin word for mask. Originally used to describe a role or character played by an actor, it is thought to derive from the word personage meaning “to sound through.” During the Gilded Age (nope, but it sounds good), actors would project their voice through the mouthpiece of an acoustic theatre mask allowing for increased energy and presence on large outdoor stages.

In modern usage, and as it’s applied in UX practice, the persona continues to be a mouthpiece for the user. The ‘stage’ is becoming increasingly larger, and the chatter more difficult to hear over. The level of competition in the market demands building better products for the everyday user. As the signal-to-noise ratio continues to rise, it’s more important than ever to refine the usability and functionality of digital material.

Although many masks are used to conceal and cloak, the UX Persona is intended to shed light on what users want in a product or service. Personas are a representation of the goals and behaviors of prospective users and they help guide our decisions and push the organization of the system we’re building to be as approachable as possible. A deep understanding of users is fundamental to creating a stellar product.

There are tons of articles on creating personas based on collected information and ethnographic research. I recommend searching the web and your favorite bookstore for some. But for now, let’s talk about the proto-persona:

The Cult of Personality

“The value of a prototype is in the education it gives you, not in the code itself.” ~ Amari Cooper

One hundred billion dollars

Unlike the standard persona, proto-personas are based on the assumptions of the stakeholders, and further checked against actual data. They are a collection of heuristics, market research, and intuition presenting an opportunity to articulate the target audience, their needs, and behaviors. We rely on proto-personas to ensure alignment amongst our client stakeholders. They ultimately represent what we think our users are like.

This type of persona should not be replacement for a proper persona study, but should be used in conjunction with one. The proto-persona should serve as a benchmark in the UX process that produces a solid artifact to measure collected research against.

When I first decided to try a proto-persona exercise with a client, I loosely followed two resources I found on the interwebs; Smashing Magazine’s “Using Proto-Personas for Executive Alignment” and Christopher Daniel’s (Adobe) deck on “Developing Provisional Personas”. The Smashing article does a great job at framing the exercise and explaining its usefulness and purpose, while the presentation deck provides a nice overall format for the workshop. This workshop should be completed in the stakeholder interview phase of discovery.

For my latest project, an enterprise video management solution, my presentation and workshop outline looked like this:

1. Define the proto-persona.

2. Clarify purpose of the workshop.

3. Brainstorming exercises:

Identification + Segmentation: Name all the people that use or may use the platform and generally group them together.

Demographics + Environment: Assign attributes for each group as defined by the stakeholders.

Needs + Goals: Define haves, needs, and wants for each group.

Pain Points: Specify common difficulties and frustrations for each group.

Consolidation: Arrange and finalize the groups and subgroups. Name each final group.

4. Spectrum profiling: Identify common or dominant characteristics for each group and describe what makes them different.

5. Identify Attributes: Pick 5–7 attributes that are important and place each group on the spectrum.

You can download a copy of my Keynote presentation template here.

Creating proto-persona cards

Once the workshop is over you should have collected and organized enough Post-It notes to create the proto-persona cards. In general, these cards should contain the following tidbits of information:

1. Name

2. Biography (based on wants, needs, etc.)

3. Demographic information

4. Attribution scale

proto-persona cards

Again, there are tons of articles and online resources for creating persona cards. Find one that works for you and continue to improve upon it. Once the user research is completed, I create a second set of persona cards based on the findings. These two sets of cards can be compared to find similarities and differences between what was originally thought to be true and what insight was gained from the user interviews.

Involvement + Buy in

“People who get involved with the success of something have to be given at least some share of that success.” ~ Michael Ironside

Honestly, I was surprised at the positive response we received. Executives are typically not too keen on brainstorming sessions, especially those that involve Post-It notes and Sharpies! It was clear that they had definite ideas of who they thought their users were and they wanted to have those notions captured. Once they understood what we were trying to accomplish and that the upcoming research would support or refute our assumptions, they saw value in the exercise.

I’ve seen many UX folks present personas at design reviews and meet-ups. Most of these are proto-personas disguised as full personas. It’s important to understand the difference and to use each tool where appropriate. The best case scenario is to have the time and budget to produce both. If that’s not an option, try a proto-persona workshop to promote client understanding and involvement.

Thanks to katie biscuits for her decisive editing and narrative wizardry! :)

Follow me on Twitter, Instagram, and Medium @uxdharma and look for more discussions on UX Design, Eastern Philosophy and how their powerful combination unlocks the secrets to UXD success.l1a

# data[].attributes.attachment_link.description
"Give a man a mask and he will show his true face." ~ Oscar Wilde The word persona comes from the Latin word for mask. Originally used to describe a role or character played by an actor, it is thought to derive from the word personage meaning "to sound through."

# data[].attributes.attachment_link.title
Sprint - El método para resolver problemas y testear - Jake Knapp.pdf

# data[].attributes.headline
Cómo Llevar a Cabo una Investigación Eficaz de UX

# data[].attributes.subject
Cómo Llevar a Cabo una Investigación Eficaz de UX

# data[].attributes.attachment_link.readable_text
Un cambio en el mercado tectónico hace que la Edad del vendedor de 10.000 años de edad sea reemplazada por la Edad del Vendedor. Los especialistas en experiencia de usuario (UX) lideran el cargo en el diseño de sitios web y aplicaciones móviles centrados en el cliente. Dado que UX se ha convertido en una parte integral del diseño de productos digitales, se está produciendo un cambio de paradigma en la investigación del usuario y sus técnicas.

Hoy en día, las empresas modernas deben pasar de los viejos métodos de publicidad que gritan consignas trilladas en grandes letras en negrita, como “Prueba X. Somos los mejores!” o se arriesgan a quedarse atrás.

El problema obvio con este enfoque obsoleto y lento es que hay demasiados productos comparables en el mercado que también dicen ser “los mejores” en sus respectivas categorías de productos.

Para sobrevivir en un mundo sobresaturado por la competencia, las empresas deben invertir en el desarrollo de sus sitios web, aplicaciones, servicios y otros puntos de contacto con los clientes en torno a una experiencia de usuario global. Y la mejor manera de evaluar la experiencia del usuario potencial es haciendo una investigación del usuario.

El caso de la investigación de usuario efectiva y de bajo costo

Hay muchos métodos para llevar a cabo una investigación de la experiencia del usuario; sin embargo, muchos de estos métodos consumen muchos recursos y pueden ser lentos. En otras palabras, tienden a ser costosos y tardan un tiempo en implementarse. No tienen que ser — hay muchas maneras simples y de bajo costo de hacer una investigación de la experiencia del usuario.

Para las empresas que operan con un presupuesto limitado, empujar hacia afuera un producto que funcione puede ser más importante que la investigación UX. Sin embargo, eso podría ser un error fatal. No tomarse el tiempo para hacer ** al menos algunos ** estudios de usuarios que informan el diseño del producto pueden tener un efecto devastador y perjudicial sobre el éxito de ese producto.

Sin dinero = sin investigación? No es verdad. Los diseñadores pueden emplear múltiples métodos rentables para llevar a cabo una investigación de la experiencia del usuario.

¿Por qué la investigación UX es tan importante?

A pesar de carecer de los recursos financieros necesarios para llevar a cabo una investigación exhaustiva de la experiencia del usuario, la investigación de UX es imprescindible, incluso para las pequeñas empresas y las nuevas empresas. Uno podría plantear el argumento de que es aún más importante para estos pequeños actores, ya que necesitan encontrar formas innovadoras de nivelar el campo de juego, permitiéndoles seguir siendo competitivos frente a la fuerte competencia de las compañías más grandes.

Aquí hay algunos métodos que lo ayudarán a realizar investigaciones de usuarios con un presupuesto.

Escritorio de Investigación

En los viejos tiempos, con el fin de llevar a cabo una investigación adecuada del usuario, las empresas tenían que ir al campo con equipos de trabajadores para recopilar datos. En estos días, hay todo un mundo de información de investigación al alcance de la mano a través de la web. Para obtener una ventaja en la investigación de usuarios, puedes eludir la investigación tradicional de usuarios principales y emplear investigación de usuarios secundarios.

Se puede realizar una gran cantidad de investigaciones de UX desde la oficina. Use métodos de investigación secundarios para su ventaja.

La psicología de las interacciones del usuario con las computadoras y el contenido digital es un campo de estudio en crecimiento Con un poco de creatividad, es posible encontrar buena información sobre el comportamiento del usuario y la toma de decisiones de una muestra representativa de industrias.

El punto clave aquí es que no debe limitar la investigación UX sobre el comportamiento del usuario a su industria específica. Los datos de navegación recopilados por otras industrias pueden responder algunas de las preguntas que tiene sobre su público y ayudarlo a desarrollar las personas de su producto.

Prueba de usabilidad

La investigación cualitativa de UX implica pruebas de usabilidad, invitando a los usuarios a probar sus prototipos de productos. Esta es una de las pruebas más comunes llevadas a cabo por compañías que realizan investigaciones de UX.

Hoy en día, las pruebas de usabilidad son casi un requisito para diseñadores web y diseñadores de aplicaciones móviles. Implica ver a los usuarios navegar por sus aplicaciones y registrar sus reacciones y declaraciones como datos sin procesar para que el equipo de diseño los analice. Las grandes empresas pueden gastar cientos de miles de dólares en pruebas de usabilidad, pero el proceso no tiene que ser muy costoso para producir resultados útiles.

Las pruebas de usabilidad no tienen por qué ser una tarea costosa y complicada que involucre laboratorios de usabilidad con muchos participantes. Especialmente en el caso de startups y MVP, las elaboradas pruebas de usabilidad pueden ser un desperdicio de recursos. De hecho, las pruebas con tan solo cinco personas te permitirán encontrar casi tantos problemas de usabilidad como lo haría con un grupo más grande de participantes en la prueba.

Las pruebas de usabilidad y A/B se pueden realizar con un presupuesto ajustado.

El libro de Steve Krug Rocket Surgery Made Easy es un libro de cocina simple, directo y directo para probar el diseño del producto en cualquier etapa — a partir de un boceto en una servilleta para un sitio web o aplicación móvil totalmente funcional. Ofrece una gran comprensión de los puntos más finos de las pruebas de usabilidad.

A/B Prototipos de prueba

Las pruebas A/ B implican mostrar a los usuarios dos prototipos ligeramente diferentes y solicitar comentarios. Pídales a los usuarios una lista de pros y contras para ambos prototipos y para medir la experiencia general. Después de haber seleccionado un prototipo como preferencia, pregúnteles acerca de los aspectos adicionales de su producto que cree que podrían beneficiarse de la investigación adicional del usuario.

Los diseñadores de UX tomarán estos datos y perfeccionarán prototipos para eliminar fallas de diseño o usarán estos pros y contras para crear un nuevo prototipo híbrido para otra ronda de pruebas de usuario. El Manual de pruebas de usabilidad hace un excelente trabajo al analizar pruebas de usabilidad y pruebas A/B.

Encuestas y cuestionarios en línea

Otro método de investigación de UX económico, comúnmente utilizado por grandes y pequeñas empresas por igual, implica cuestionarios en línea. Es bastante simple difundir cuestionarios a cientos o incluso a miles de participantes con solo un clic de un botón. Sin embargo, una cantidad significativa de tiempo debe dedicarse a preparar encuestas, publicarlas y, en última instancia, analizar los hallazgos.

Los cuestionarios en línea son herramientas baratas y extremadamente útiles para la investigación de la experiencia del usuario. Pero es mejor no exagerar (desde QuestionPro).

Hay una variedad de increíbles herramientas de cuestionarios y encuestas en línea disponibles. Wufoo, Typeform y Formularios de Google son herramientas efectivas para aquellos que recién están comenzando. Aquí hay algunos consejos iniciales para encuestas de investigación de usuarios.

Usa redes sociales, plataformas de redes en línea y listas de correo electrónico para reclutar a los encuestados para tus cuestionarios; para eliminar a los participantes inapropiados, asegúrate de escribir buenas preguntas de selección. Recuerda que el objetivo de la encuesta es profundizar en la psicología del usuario. ¿Cómo están buscando información? ¿Qué tipo de información consideran relevante y útil?

Las preguntas correctas descubrirán las necesidades, deseos y puntos débiles de sus clientes. Es importante recordar que el valor y la calidad de los resultados generados por los cuestionarios y las encuestas en línea varían según el tipo de preguntas y la calidad de la orientación de la audiencia.

Es por eso que es fundamental desarrollar un conjunto de preguntas de evaluación bien pensadas y analizar adecuadamente los datos una vez que se recopilen. Tenga en cuenta que muchos usuarios ignoran dichas encuestas, por lo que no espera una tasa de respuesta enorme.

Guerilla UX Research

Investigación UX de Guerilla (una frase popularizada por Steve Blank ) es esencialmente una palabra de moda para la investigación de campo de bajo costo, aunque hay algunas diferencias entre los dos. Independientemente de esto, el punto es: las empresas a veces necesitan respuestas con poca antelación.

Si bien las encuestas son útiles, la forma más rápida de obtener información específica es llevar sus preguntas directamente a las personas que probablemente usarán su producto. Para encontrar los mejores datos para sus esfuerzos de investigación de UX, diríjase a las áreas en las que a su audiencia particular le gusta congregarse. Ve a lugares donde tu audiencia tenga tiempo para ayudarte, como en un café, un parque o un lugar de deportes.

La investigación de la guerrilla no tiene que costar mucho en absoluto, siempre que tengas tiempo de sobra y no te importe acercarte a la gente para obtener comentarios.

Este tipo de búsqueda de usuarios puede ser divertido e informativo, y las personas suelen estar felices de compartir sus experiencias tecnológicas con profesionales que están en condiciones de mejorarlas. También puedes usar este método para probar tus prototipos en el campo. Simplemente toma tus prototipos en tu computadora portátil, teléfono inteligente o tableta y solicita comentarios u opiniones.

A menudo, acercarse a las personas y pedirles su tiempo y opinión sobre un prototipo de producto a cambio de un café y un refrigerio funciona muy bien. En el trabajo, puedes preguntarle a “personas normales” que pueden representar a la base de usuarios del producto, como personas que no son diseñadores, personas que no son producto y personas que no son ingenieros, para que le den su opinión sobre un diseño.

Te sorprenderán los problemas de usabilidad que extraños señalan. También es importante tener en cuenta que es probable que obtengas datos de personas que de otra manera no estarían interesadas en su producto. Esto no es algo malo. Por el contrario, expandir tu grupo demográfico objetivo y obtener comentarios de usuarios ocasionales puede resultar bastante útil. Como no viste el producto desde su perspectiva, podrías señalar algunos problemas que nunca pensaste. No ignores a estas personas aparentemente indiferentes; pueden proporcionar comentarios útiles y ayudar a que su producto sea más atractivo para otros usuarios ocasionales.

Grupos de enfoque

Los grupos focales son una discusión de investigación moderada sobre la experiencia del usuario con un grupo de futuros usuarios representativos, lo que le permite conocer las actitudes, las ideas y los deseos de los usuarios. Nuevamente, no tiene que costar mucho. Reúna a los usuarios en un entorno informal para analizar sus productos y servicios. Los investigadores de usuarios han usado este método durante eones, pero han sido criticados por la propensión de los grupos focales a alentar el “pensamiento grupal” e ignorar las necesidades no satisfechas.

Los grupos focales y las entrevistas remotas le permiten obtener información del usuario específica y detallada y recibir comentarios valiosos.

Consulta este artículo del Nielsen Norman Group sobre cómo utilizar de manera efectiva grupos focales para la investigación de UX.

Debes tomarte tu tiempo y asegurarte de que tu grupo demográfico sea diverso. Prepárate para la reunión, identifica las áreas clave que te gustaría discutir y asegúrate de contar con los recursos adecuados y la información de antecedentes para que puedas responder a cualquier pregunta que tu grupo pueda dirigirle.

¿Cómo puedes reclutar participantes para la investigación de UX a bajo costo? Este informe gratuito de 190 páginas del Nielsen Norman Group le brinda 234 pautas sobre cómo configurar y administrar un programa de reclutamiento. También ofrece consejos sobre cuándo subcontratar a una agencia de reclutamiento y cuándo utilizar el reclutamiento interno.

Entrevistas a usuarios remotos

Las entrevistas con los usuarios pueden ser difíciles de programar, y muchos investigadores de UX pierden participantes debido a conflictos de programación.

Afortunadamente, hoy en día podemos usar herramientas en línea como Doodle para sincronizar horarios y Zoom, Google Hangouts o Skype para realizar entrevistas remotas. Esto reduce drásticamente el tiempo que lleva organizar múltiples entrevistas en persona.

Las entrevistas remotas no te darán el volumen de datos que otros tipos de métodos de investigación de los usuarios, pero pueden ser útiles en términos de descubrir los principales problemas de usabilidad y analizar varias reacciones a ellos.

La ventaja obvia de las entrevistas individuales es que puede centrarse en ciertos problemas y obtener información detallada y comentarios específicos. Esto puede ser problemático cuando se trata con grupos de personas en grupos focales. Además, en uno a uno, también elimina el riesgo de “pensamiento grupal”, un síndrome de grupos focales como se mencionó anteriormente.

Muchos métodos de investigación cuantitativa pueden incluirse en esta categoría. Si trabaja con un presupuesto ajustado, use herramientas gratuitas como Google Analytics como punto de partida para la recopilación de datos cuantitativos.

De forma alternativa, herramientas simples, gratuitas o de bajo costo como Hotjar están disponibles para recopilar información de productos específicos de los usuarios. El Hotjar Basic gratuito tiene mapas de calor que representan visualmente los clics, las pulsaciones y el comportamiento de desplazamiento del usuario; grabaciones: observe a los visitantes reales en su sitio mientras hacen clic, tocan, mueven el cursor y navegan por las páginas; y embudos de conversión: identifique en qué página y en qué paso la mayoría de los visitantes abandonan su sitio.

Muchas herramientas analíticas son de uso gratuito y pueden ser un activo vital en la investigación de usuarios.

Las herramientas de análisis suelen responder preguntas como:

¿Cuánto tardan los usuarios en completar una tarea?

¿Dónde hacen clic? (mapas de calor y clics)

¿Qué tan lejos se desplazan en las páginas? (scrollmaps)

¿Qué características son más populares?

¿Qué caminos suele tomar la gente?

¿Cuándo se van? (tasas de rebote)

Una vez que tenga los datos brutos, asegúrese de vincularlos con una investigación cualitativa real del usuario para obtener información. Planifique con anticipación y asegúrese de recopilar datos brutos útiles y adecuadamente estructurados que puedan analizarse con el mínimo esfuerzo posible.

Investigación del usuario con un presupuesto: el dinero no es todo

Llevar a cabo una investigación útil de la experiencia del usuario no tiene que costar mucho dinero o tomar mucho tiempo. Al utilizar el poder de las herramientas digitales, los métodos de investigación económicos y la estrecha observación de las interacciones con los clientes, una empresa puede obtener los datos sin procesar y los conocimientos que necesita para mejorar la experiencia del usuario para su audiencia sin romper el presupuesto. La investigación de UX es un proceso invaluable que puede tener un gran impacto en el éxito del producto y, en última instancia, en las ventas y los ingresos de la compañía.

Esto nos lleva al aspecto financiero de la investigación del usuario. ¿Cuánto vale realmente? ¿Cuál es el ROI de la investigación UX? ¿Cómo convence a sus clientes de que lo necesitan, incluso si creen que no pueden pagarlo? ¿Cómo puede competir con grandes compañías y sus recursos humanos y financieros aparentemente ilimitados?

No hay una respuesta única para todas estas preguntas. Todo depende del tipo de producto en el que esté trabajando, el público objetivo y las necesidades del cliente. Sin embargo, esto no significa que no pueda hacer nada para promover la investigación de UX de presupuesto. Simplemente significa que debe simplificar el proceso de investigación, lo que lo hace rentable y rentable. Tienes que hacer más con menos.

Comunicar el valor de la investigación del usuario a sus clientes es otro paso vital en este proceso. Como [diseñador de UX] (https://www.toptal.com/designers/ux), si estás tratando con clientes que no creen que puedan permitirse una investigación adecuada de UX, asume la responsabilidad de cambiar de opinión. Trata de no tirar los números, no hagas promesas de ROI que no puedas cumplir, y no les digas que obtendrán una excelente experiencia en UX por un costo muy bajo. Sea realista y directo, defiende tu posición y enfatiza los méritos de su enfoque de bajo costo.

Llevar a cabo investigaciones UX con un presupuesto limitado generalmente significa que no obtendrá todos los datos que necesita, y sus esfuerzos pueden parecer inútiles frente a la abrumadora competencia de las empresas que pueden permitirse gastar mucho dinero en investigación — recuerde, no estás tratando de competir con ellos.

La alternativa para llevar a cabo la investigación del usuario del presupuesto no es investigar en absoluto y basar las decisiones críticas de diseño en suposiciones, mejores prácticas o conjeturas fundamentadas. ¿Línea de fondo? Incluso una cantidad limitada de investigación de usuarios rentable reduce fácilmente estas pobres opciones.

# data[].attributes.attachment_link.title
Guía: Cómo Llevar a Cabo una Investigación Eficaz de UX

# data[].attributes.attachment_link.description
La investigación efectiva del usuario no tiene que costar una fortuna. De hecho, hay muchos métodos de bajo costo disponibles para los diseñadores, todo lo cual pondrá a un diseñador en camino a diseñar mejores productos.

# data[].attributes.attachment_link.title
Guia Completa Design Thinking - Coder House.pdf

# data[].attributes.attachment_link.title
Sprint - El método para resolver problemas y testear - Jake Knapp.pdf

# data[].attributes.attachment_link.description
Search for the latest Design Council news and articles on a range of design topics.

# data[].attributes.attachment_link.title
Scrum Guide 2020 - Ken Schwaber & Jeff Sutherland.pdf

# data[].attributes.body
Google trends

# data[].attributes.attachment_link.description
Log in with Google, your Whimsical account login, or reset your password.

# data[].attributes.attachment_link.title
What is User Centered Design? — updated 2023

# data[].attributes.attachment_link.description
What is User Centered Design? User-centered design (UCD) is an iterative design process in which designers focus on the users and their needs in each phase of the design process. In UCD, des…

# data[].attributes.attachment_link.readable_text
To be a UX designer you need to be optimistic about coming up with new solutions to a problem. I think that the big challenge is to believe that it's even doable. And the larger the challenge, the more essential optimism is to drive you forwards.

Have you heard of user-centric design as a problem-solving method? User-centered design (UCD) is an optimistic approach to invent new solutions. It starts with human beings and ends with the answers that are tailored to their individual needs. When you understand the people you are trying to reach, and then design from their perspective, you come up with unusual answers. UCD is both how you are thinking and what you are doing. It is all about building a deep empathy with the individuals you're designing for. Generating heaps of ideas and building a bunch of prototypes. Sharing what you've got created with the people you're designing for. Failing and trying again. And finally putting your innovative solution out in the world.

Get impressed by the international INDEX:Award: "Design to Improve Life" in Copenhagen, Denmark. It is the world's most sponsored design award within the humanitarian field. The prototype of effective plastic water filter, LIFESTRAW (Denmark), which costs $3 to produce won an award. The designers of this project didn't challenge the standard of potable water or the privatization of water. They just proposed a solution for a selected time and area.

Dr. Donald Norman, a cognitive science researcher was the first to explain the importance of user-centered design. He said that design decisions should be based on the needs and wants of users. The value system of user-centered design contains:

· empathy,

· optimism,

· iteration,

· creative confidence,

· belief in making,

· embracing ambiguity,

· learning from failure.

User-centered design creates a unique chance to design together with communities. User-centered designers deeply understand the folks they're trying to serve. They create lots of ideas and make innovative new products rooted in people's actual needs.

To design in a user-centric way identify the people who will use the product, what they'll use it for, and the conditions under which they will use it. Observe people's lives, hear their hopes and needs, and get smart about your challenge.

User-centered design provides a common language for scientists, stakeholders and end users. For example, Lunar Rover Mission of NASA integrated user-centered design techniques. NASA also benefits from user interviews, user observations in context, and wireframing.

User-centered design process goes through six phases:

* Specify the use context and users' needs;

* Specify business requirements;

* Build design solutions from rough concept to finished design;

* Evaluate designs with usability testing;

* Implementation - develop and deliver the product;

* Deployment - the final product is evaluated, as consumer needs change.

What is special regarding UCD is that it is scientific and above all values experiment, iteration, learning from failure and research. For instance user research is all about talking with people about their challenges, goals, and limitations. However there will be moments where you'll need more context, history, or data than a man-on-the-street style interview can offer.

Speak with folks you're designing for directly through personal, group or expert interviews. There's no better way to perceive their hopes, desires, and aspirations. Write down the feedback you hear and use this chance to ask more questions and push your ideas further.

Responsive principles of user-centered design:

· clear understanding of the users, tasks and environments;

· evaluation-driven design;

· considering the general consumer experience;

· involving the client within the design process.

User-centered design has a human bias in its DNA. By beginning with humans, their hopes, fears, and needs, the designers tend to discover what's most desirable. But that's only one lens through which we glance at our solutions. Once the designers have determined the solutions for the target community, it is time for technical expertise. Also, they need to figure out the way to make the solution financially viable. Finding balance is completely crucial to designing solutions that are successful and sustainable.

When the goal is to get impactful solutions out into the world, you can't live in abstractions. You have to make the solutions that are desirable, workable, and viable.

A great example of a UCD website is Carters.com - a website to shop for children's clothing. On the site, navigation helps the user promptly reach the desired section by specifying a child's age (for example, Shoes: New Born - 3 year). At the same time, this navigation helps new customers by quickly directing them to the desired section.

Instacart.com is a perfect showcase of adapting a website for the people with visual impairments. There is high contrast version of the website. Designers thought about the users and introduced the small details that improve the UX. For example, when a user clicks Add a product to the delivery list, he or she can immediately select the quantity in the interface. Also, the user always sees the number of already selected goods.

In addition to convenient navigation, the Yelp service for online reservation visually displays the number of free tables at the restaurant you choose. The map with its location always remains visible for the convenience of users. The button "Start order" allows the possibility to start the order with one click.

Trello may be a good example of UX design - it doesn't have a lot of useless features. Everything on the home screen is easy to grasp and works exactly the way it ought to. There is no confusion over the way how to move tasks from one board to another. The interface design is intuitive and people using the app for the first time don't have any hassle navigating the various pages.

Anyone who has used Duolingo understands the simplicity of the app. By finishing one task or a game, you'll be able to move on to the more advanced categories. Incorporating the addictiveness of a mobile gambling app and using it to teach the users new languages is a brilliant idea. And the amazing UX is what keeps people coming back again and again.

With their recently added ability to book a room instantly, having a clean-cut mobile presence has become a necessity for Airbnb. Just like their innovative website, their mobile app is uncomplicated, smooth, and easy. The users put in where they want to stay, what dates, and how many guests they're going to have. And in the twinkling of an eye, they get a range of homes that meet their needs, right at their fingertips.

User-centered designers test, fail and try once more. This method combines analysis, interviews, generative strategies, and tools like group action. UCD, for the most part, develops an understanding of the user's desires through the inclusion of users at all stages of the designing and testing. We rely on feedback from everybody in the group. Iteration keeps design process responsive.

UCD influences the ultimate success of the product release. Microsoft is one of the best examples of benefiting user-centered design. For a long time, it was a technology-driven organization. Now, the corporation has changed its strategy to be user-centered. They have adopted an authentic design development process that focuses on users.

Their UX had become more and more advanced, and this was negative for the users. So, Microsoft decided that user-centered design should be a part and parcel of their code. This software giant found hope in team-building and a creative development process. The user-centered design resulted in business success. Both the business and user goals were successfully developed by working with end users.

In user-centered design, you have to be comfortable with the idea of failure and celebrate the learning which it brings. You try something out, maybe pushing too far, or you want to learn from an experiment. And your half-baked idea didn't quite work out how you expected. But in some ways, the learning that came from that unexpected failure was more valuable than the success might have been.

When it comes to implementation, that's when you don't want quite as much failure to happen. Because the process starts getting more expensive. You'll be putting all your effort into making something. But even then you need to be constantly experimenting and refining. So with user-centered design even in case of failure you continue to prototype and improve your UX. With user-centered design, you will not have avoidable rework or even worse a big failure right at the end. Because UCD identifies problems before they emerge.

# data[].attributes.attachment_link.title
User-Centered Design: Process and Benefits

# data[].attributes.attachment_link.description
To be a UX designer you need to be optimistic about coming up with new solutions to a problem. I think that the big challenge is to believe that it's even doable. And the larger the challenge, the more essential optimism is to drive you forwards.

# data[].attributes.attachment_link.readable_text
You don't have permission to access "http://www.adobe.com/la/products/xd.html" on this server.
Reference #18.36462317.1654687718.ff5fd87

# data[].attributes.attachment_link.title
Adobe XD | Herramienta rápida y poderosa de diseño y colaboración de experiencias e interfaces de usuario

# data[].attributes.attachment_link.description
Adobe XD es una solución rápida y poderosa de diseño de experiencias e interfaces de usuario para sitios web, aplicaciones y mucho más. Diseña, crea mallas metálicas, animaciones y prototipos, colabora y comparte: todo en un único lugar.

# data[].attributes.attachment_link.description
Cursos online en VIVO de Programación Web, Diseño UX, Marketing Digital y mucho más. ¡Estudiá en Coderhouse y capacitate con profesores expertos!