ux_manu

Recuerdo aquella clase con Raquel👩‍🦰 donde nos explicaba la mejor manera de distribuir la información en el HOME de tu página web 💻. Nos puso varios ejemplos, como la portada de un periódico📰, o los planos de una casa🏠.

Sin embargo, a mí me atrajo más la comparación con una casa. Hacer esa símil entre la sala de tu casa y el SLIDER en tu página. Comparar las puertas de cada parte de la casa con esos bloque que mientras hacemos SCROLL vamos descubriendo en el HOME de la página. Y así sucesivamente.

Desde entonces así es como visualizo en mi mente cuando estoy distribuyendo el HOME, hay casas pequeñas🏡, medianas🏠, grandes🏤, de dos niveles🏘, etc.

Cada una tiene distribución diferente, pero mayormente desde que entramos podemos acceder fácilmente a ellas sin tener que pasar primero por otras. Así debe ser el HOME, permitirte “saltar” a las secciones que te interesa, ver un poco de cada una y permitirte explorarlas con un clic. Aquí les comparto la comparación de un HOME, según el tamaño de una casa.

Pensar que aquello con lo que tanto jugaba y desperdiciaba, hoy forma parte importante en la mesa de trabajo en mi oficina. Me refiero a los Post It. Esas notitas amarillas que tanto vemos en las paredes de las empresas, donde están anotadas tantas ideas y pensamientos a lapicero azul.

Pero hoy en día no vamos a las oficinas, al menos no como antes. Y las ideas escritas a puño y letra ¿dónde quedan?

Esas ideas pueden ser recolectadas aún a distancia, y esos Post It ahora son digitales, con la herramienta Miro podemos hacer esas lluvias de ideas que nos ayudaran tanto con nuestros proyectos. Denle una revisada y díganme qué les parece. https://miro.com/

Ver y escuchar. Son dos sentidos con los que se puede aprender bastante rápido siempre y cuando se muestre al interés adecuado. Imagino que han notado mi ausencia esta semana, la cual se debió a una extracción de muelas que me dejó dispuesto para trabajar. Solo podía sentarme, ver y escuchar. Y así lo hice.

Buscando en YouTube para mantener el conocimiento fresco después de haber visto muchas series y películas durante casi una semana. Encontré un canal muy bueno sobre Design Thinking. Cuenta mucho contenido interesante que podemos aplicar en cualquier proyecto digital que estemos realizando.

Se llama Design Thinking 24/7, se los recomiendo.

Un moodboard o muro de inspiración es una herramienta muy útil al momento de desarrollar el UI de cualquier WEB o Aplicación. En él se pueden colocar texturas, imágenes, colores, formas, tipografías, etc.

Aquí les comparto uno que encontré y con el que estaré realizando algunas cosas para mostrar un poco mejor su uso.

Si quieres empezar a utilizarlos como herramienta de inspiración al momento de diseñar el aspecto de tu sitio, puedes empezar por Pinterest, encontrarás mucha inspiración.

Cuando le menciono a los clientes que se debe hacer test de la aplicación con personas reales, fuera del equipo. La primera pregunta que sale es ¿Cuánto nos costará?

Sin embargo, creo que esa no es la pregunta correcta. Deberían preguntarse el costo de no hacer el test. Pues si revisamos de manera rápida existen muchas APPS y páginas que por más renovaciones que hagan no resuelven las debilidades que han presentado desde el principio, y otras ni de broma se renuevan.

Es momento de que se haga énfasis en la importancia del test y de esta forma que les comparto, pueden economizar bastante y encontrar un montón de mejoras a su producto.

Y luego nos preguntamos por qué la gente prefiere hacer una fila. La respuesta es bien sencilla. “Sus canales digitales alternos no brindan una buena experiencia”. Esa fue a la conclusión que llegué luego de haber utilizado los diferentes chats que tienen disponibles algunos bancos locales.

Los medios alternos permiten un mejor manejo del flujo de clientes a nuestros establecimientos y canaliza operaciones que los usuarios muchas veces descartan por no ir de forma presencial.

Mi mensaje: Aprovechemos estos beneficios que nos ofrecen y mejoremos las plataformas digitales. Recordemos que cada detalle cuenta.

“El diseño está en todas partes. No hay nada que uses y que no esté diseñado de cierta forma. El diseño te ayuda a completar una tarea. El tema es si está bien diseñado o no” Así empieza el capítulo 5, temporada 2 de Abstract, documental de Netflix enfocado en el diseño. De la mano de los diseñadores más prestigiosos del mundo.

Y es justo el capítulo que deben de ver si quieren entender un poco más de cómo vemos el mundo los que trabajamos con la Experiencia del Usuario. Es protagonizado por el gran Ian Spalter, se los recomiendo.

😬 Creo que es más que obvio que me gusta la serie Dark, pero me enojó mucho que no hicieran mención de uno de los Nielsen más importantes 😅, quizás porque el Nielsen a que me refiero se enfocó en evitar que el usuario al navegar o interactuar con una plataforma digital cayera en un bucle. Al contrario, con sus principios Heurísticos ayuda a cumplir un flujo de principio a fin de manera satisfactoria. 💻

Me refiero a Jakob Nielsen, quien desde sus inicios ha aportado a la usabilidad de la 📲 web, por esa razón hoy les comparto los 10 principios Heurísticos de Nielsen. Los cuales son imprescindibles al momento de desarrollar cualquier plataforma digital.

Aquí tienen lo 5 restantes. 🔚

😬 Creo que es más que obvio que me gusta la serie Dark, pero me enojó mucho que no hicieran mención de uno de los Nielsen más importantes 😅, quizás porque el Nielsen a que me refiero se enfocó en evitar que el usuario al navegar o interactuar con una plataforma digital cayera en un bucle. Al contrario, con sus principios Heurísticos ayuda a cumplir un flujo de principio a fin de manera satisfactoria. 💻

Me refiero a Jakob Nielsen, quien desde sus inicios ha aportado a la usabilidad de la 📲 web, por esa razón hoy les comparto los 10 principios Heurísticos de Nielsen. Los cuales son imprescindibles al momento de desarrollar cualquier plataforma digital.

Aquí puedes aprender 5 de ellos, el resto los encontrarás en el próximo post. 🔜

Un ma****lo es solo una herramienta, el carpintero es quien tiene la capacidad de usar el ma****lo para crear su obra. Lo mismo pasa con las herramientas de diseño, existen muchas en el mercado, pero depende del diseñador el resultado que logre con ellas.

Aquí te comparto tres de las más utilizadas por diseñadores UI, bueno, al menos deben estar entre las primeras diez. De lo que sí estoy seguro es de que te brindarán todo lo necesario para la creación de tus prototipos.

Trabajar codo a codo con diferentes equipos de desarrolladores (programadores) a lo largo de mi carrera me ha permitido valorar lo importante de tener un correcto sistema de diseño. Principalmente cuando son proyectos que llevan actualizaciones constantes. Pues resulta tedioso para ambas partes tener un diseño poco reutilizable y que todo se deba hacer desde cero.

El Diseño Atómico nos ayuda a plantear los elementos de UI básicos con los cuales el equipo de desarrollo tendría que trabajar. Obligándonos a plantear bien de inicio el “sistema de diseño”, con las tipografías, jerarquías, paleta de colores, etc. Créanme, cualquier programador con el que trabajes te lo agradecerá.

Si quieres aprender más sobre la metodología de Diseño Atómico te recomiendo el libro de Brad Frost, ‘Atomic Design’. Puedes encontrarlo en su sitio web.

Este fin de semana me di la vuelta por varios “mundos”. 🌎🌍🌏 Como muchos de mis conocidos hice un maratón de una de mis series favoritas. Dark, esa serie que trata de viajes en el 🕑 tiempo, agujeros de gusanos, mundos paralelos, etc.

Al ocupar mi tiempo en esto, me olvidé del contenido de hoy lunes. Solo tenía anotado que debía compartirles sobre “perfiles de usuario”. 👩‍🦰👨‍🦰👱‍♀️👱‍♂️

Entonces traté de unir todo lo consumido con este tema para ustedes. Y como resultado les tengo lo siguiente:

Si Winden fuera mi tienda en línea 💻, el jacket amarillo de Jonas fuera mi principal producto 🧥 y los personajes de los mundos de “Adán y Eva” mis clientes 👭👬. ¿Cómo debo definir el perfil de usuario ideal?

Hagan swipe sobre el carrusel y descubran cómo se hace un perfil de usuario para tu negocio y los hallazgos que te permite adquirir. Convirtiéndolo en una herramienta que ayude tu negocio a brindar una mejor experiencia enfocada en el perfil ideal, sin dejar de aprovechar potenciales clientes.

Si no podemos medirlo jamás sabremos si fue exitoso. Esa frase o alguna similar la he escuchado muchas veces, pero jamás supe cómo aplicarla a mi trabajo. Hasta que empecé con Design Thinking en el proceso de UX de un proyecto.

Aquí les comparto como hacer los objetivos SMART al momento de empezar a idealizar un producto digital.

📍Específicos (Specific): Deben definirse de forma detallada y concreta, no pueden dejar lugar a interpretaciones.

🌡Medibles (Measurable): Un buen objetivo debe poder medirse con facilidad. Te ayudará el marcar unos parámetros que te orienten sobre su rendimiento.

📊Alcanzables (Attainable): Los objetivos que nos marquemos deben ser alcanzables. Marcar unos objetivos poco realistas no nos servirá para nada más que para crear estrés y una sensación de frustración innecesaria.

⭐️Relevantes (Relevant): Procura que vayan vinculados a aquello que mayor relevancia puede aportar a tu empresa. Un buen objetivo de tu página web debe ir en consonancia con tus objetivos de negocio.

⏱Tiempo determinado (Time-related): Debemos marcar un marco temporal para la realización del objetivo.

Ejemplo de objetivo general y SMART.

General: Aumentar las visitas a mi sitio web.

SMART: Aumentar las visitas de nuestro sitio web en un 50% (de 2.000 a 3.000 al mes) para la apertura de nuestra nueva tienda el 31 de Mayo de 2020.

-related

Al momento de trabajar realizo estos tres tipos de wireframe, según avanzo ⏳ en el proyecto. Estos ayudan a definir mejor la página o aplicación web.

Lo-Fi Wireframe 📝
Es el wireframe básico. Con el que se inicia a dar forma a la distribución de elementos en nuestra página. Hecho a lápiz sobre papel, usando formas geométrica básicas.

Mid-Fi Wireframe ◼️⚫️
Es el segundo paso, tratar de llevar la mejor estructura a una simulación en escala de grises. Marcamos mejor los puntos de atención usando relleno en las formas.

Hi-Fi Prototype 💻
Llenamos de color el Mid-Fi. Para darle un acercamiento de cómo lucirá el producto final. Aquí se define mejor la forma en que el UI guiará al usuario.

Estos pasos no son los definitivos, ya que cada uno debe ser testeado 📈 y aprobados para asegurar un producto final de la mejor calidad. 💎

La situación actual me llevo a enamorarme de una categoría de aplicaciones que todos en algún momento hemos utilizado y en las que tenemos nuestros favoritos. Me refiero a las APPS de servicio de Delivery, las cuales nos han facilitado la vida en muchos sentidos.

Aquí les comparto mi experiencia después de que mi cumpleaños se diera dentro de toda esta situación. Y yo con ganas de celebrarlo a pesar de las dificultades y a distancia de todo el mundo, me empeñe en comprar algunas cosas (cerveza), sin embargo, las pocas horas del día disponible representaban todo un reto. Por suerte buscando en las APPS que tengo instaladas, noté una funcionalidad muy útil.

La funcionalidad de programar un pedido en un local cerrado. Así es, pude programar la entrega de mí sixpack aún estando cerrado el comercio.

Entonces vi que aquellas APPS que se preocupen por brindar un servicio a pesar del estado de apertura de un negocio, tienen probabilidades más altas de “retener” una compra y completarla.

Yo tengo un proceso que aprendí mientras estudiaba acerca del Design Thinking. Se trata del modelo de proceso de diseño Double Diamond, aquí les explico mi trabajo.

1 - Descubrir: Aprender y empatizar. Se investiga lo más posible sobre el negocio y se definen objetivos.
2 - Definir: Ganando enfoque. Creación de perfiles de usuario, así como definir el flujo a seguir.
3 - Desarrollar: Generar posibles soluciones. Se hacen los wireframes con las posibles formas de mostrar el sitio. Diseño visual y plantilla.
4 - Entregar: Refinar soluciones que funcionen. Se elige el más viable de los prototipos en gris y se llevan a un detalle final para puesta en producción.

Estos pasos no son lineales, ya que después de llegar a un punto se puede volver atrás y mejorar tantas veces como sea necesario.