¿Cómo trabajamos?
Estrategia y contexto (PO)
Análisis de la competencia
Análisis de clientes
Estructura del producto / estrategia
Desarrollo de contenidos, redacción y terminología
Diseño de producto
El proceso (UX)
Elegir dirección
Hacer mapas de empatía
Determinar objetivos de usuario
Crear un flujo de usuario
Arquitectura de información y taxonomía
Wireframes y prototipos (UI)
Wireframing
Diseño de interfaz
Diseño de interacción y usabilidad
Prototipar
Ejecución y Analítica (DE)
La planificación del desarrollo
Coordinación con UI UX Designer
Coordinación con desarrolladores
Objetivos de seguimiento e integración
Análisis e iteración
Entendiendo al usuario
Para llegar a una comprensión y tomar las desiciones correctas es que debemos hacernos varias preguntas en relación a el usuario al que queremos llegar.
Atraer
¿A quienes estamos atrayendo?
¿Qué están buscando?
¿Dónde están buscando?
Clarificar
¿Qué problema estamos resolviendo?
¿Cómo lo estamos resolviendo?
¿Qué espera el usuario?
Disponibilizar
¿Dónde comenzará proceso del usuario?
¿Cómo eliminamos la fricción y obstáculos?
¿Dónde terminará el proceso del usuario?
Adaptación
¿Dónde está el usuario durante el día?
¿Cómo está accediendo al software?
¿Cómo nos acomodamos a su rutina diaria?
El factor wow
¿Qué sabemos del usuario?
¿Cómo podemos aprender de ellos?
¿Cómo podemos entregarles más de lo que esperan?
Extender
¿Qué herramientas le entregamos a los usuarios para que nos promocionen?
¿Cómo estamos obteniendo feedback de ellos?
UX es experiencia de usuario
La experiencia del usuario ocurre cuando nuestros usuarios tocan, ven, escuchan, sienten y usan aplicaciones, sitios, dispositivos, servicios, productos y sistemas.
El diseño de la experiencia del usuario se trata de cómo hacemos que estas experiencias se sientan sin esfuerzo y se adapten perfectamente a las necesidades de nuestros usuarios y logren los objetivos comerciales.
Aunque esta experiencia no depende solamente del diseño, sino que implica lo que representa una marca y lo que hace sentir a sus usuarios.
El objetivo es buscar todas las formas posibles para facilitarle la vida al usuario, y para eso que hay que tener en cuenta varios temas de la psicología.
La percepción: que nos llama la atención, cómo influyen los colores, como miramos la pantalla.
Las emociones: cómo se generan y qué implicaciones tienen.
La memoria: pensar en las limitaciones de las personas para recordar.
La mentalidad: creencias, estereotipos, su interpretación de la sociedad y de las personas que lo rodean.
La motivación: cómo generamos motivación en los usuarios.
El aprendizaje: tenemos que enseñarle los pasos que tiene que seguir para que consiga su objetivo.
UI es interfaz de usuario
La UI (por sus siglas en inglés User Interface) o en español Interfaz del Usuario, es la vista que permite a un usuario interactuar de manera efectiva con un sistema.
La interfaz de usuario o UI es el conjunto de elementos de la pantalla que permiten al usuario interactuar con una página web, es la suma de una arquitectura de información + patrones de interacción + elementos visuales.
Uno de los expertos a nivel mundial en UI es Jakob Nielsen, quien ha desarrollado una serie de mejoras en cuanto a usabilidad e interfaz en la web. Según Nielsen, los elementos más importantes de una UI son los siguientes.
Propósito del sitio: tiene que quedar claro a quién pertenece la web y qué funciones permite realizar.
Ayuda al usuario: el sistema de navegación tiene que estar a la vista y también tiene que incluir un sistema de búsqueda adicional.
Mostrar el contenido: tiene que estar explicado de manera clara y con elementos de texto que ayuden a su lectura (como títulos, negritas, etc.).
Diseño funcional: los elementos gráficos deben ir dirigidos a ayudar al usuario en encontrar lo que quiere.
Design Thinking
Design Thinking es un proceso iterativo en el que buscamos comprender al usuario, cuestionar las suposiciones y redefinir los problemas en un intento de identificar estrategias y soluciones alternativas que podrían no ser evidentes instantáneamente con nuestro nivel inicial de comprensión.
Design Thinking gira en torno a un profundo interés en desarrollar un entendimiento de las personas para quienes diseñamos los productos o servicios.
Nos ayuda a observar y desarrollar empatía con el usuario objetivo y cuestionar el problema, cuestionar los supuestos y cuestionar las implicaciones.
Empatizar: Debemos ser capaces de ponernos en la piel de las personas para generar soluciones consecuentes.
Definir: filtramos la información recopilada, y nos quedamos con lo que realmente aporta valor.
Ideamos: creamos una propuesta con el objetivo de generar varias opciones.
Prototipar: construimos un modelo “rápido” que nos ayudará a dar forma a lo que hasta ahora era una idea.
Testeamos: ahora lo probamos con la ayuda del público objetivo hacia el que se orienta la solución.
Usabilidad
La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o sistema.
Se mide estudiando la relación que se produce entre las herramientas (sistema de navegación, las funcionalidades y los contenidos) y quienes las utilizan, para determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo.
Abordar la Usabilidad implica también revisar una serie de aspectos relacionados con el uso y la manera en que las personas se relacionan con los sistemas que se les ofrecen.
Facilidad de aprendizaje: en cuánto tiempo un usuario, que nunca ha visto una interfaz, puede aprender a usarla y realizar operaciones básicas.
Facilidad y eficiencia de uso: la rapidez con que se pueden desarrollar las tareas, una vez que se ha aprendido a usar el sistema.
Facilidad de recordar cómo funciona: se refiere a la capacidad de recordar las características y forma de uso para volver a utilizarlo a futuro.
Frecuencia y gravedad de errores: plantea la ayuda que se le entrega a los usuarios cuando deban enfrentar los errores al usar el sistema.
Satisfacción subjetiva: satisfacción de los usuarios en cuanto a la facilidad y simplicidad de uso de sus pantallas.
Tips Usabilidad
Visibilidad del estado del sistema: el sistema siempre debería mantener informados a los usuarios de lo que está ocurriendo
.
Relación entre el sistema y el mundo real: el sistema debería hablar el lenguaje de los usuarios
.
Control y libertad del usuario:
a veces los usuarios
eligen funciones
por error y
necesitan una salida de emergencia
.
Consistencia y estándares: los usuarios no
deben cuestionarse si las acciones
significan lo mismo que en las convenciones establecidas.
Prevención de errores:
realizar un diseño
preventivo en la ocurrencia de problemas.
Reconocimiento antes que recuerdo: se deben hacer visibles los objetos, acciones y opciones
y ser recuperables cuando sea necesario.
Flexibilidad y eficiencia de uso:
lo accesos directos ofrecen una interacción más rápida a los usuarios expertos
.
Estética y diseño minimalista: los diálogos no deben contener información que es irrelevante o poco usada.
Ayudar a los usuarios a
diagnosticar y recuperarse de errores: los mensajes de error
deben
ser claros y simples y sugerir una solución
.
Ayuda y documentación:
es necesario ofrecer apoyo fácil de buscar y con foco en lo importante.
Accesibilidad tipografia
El tamaño de la fuente no solo debe adaptarse al tamaño de la pantalla, sino que también ha de tener en cuenta la distancia normal que hay entre esta y el usuario.
Seguramente dicha distancia será menor para la pantalla de un smartphone que para grandes monitores de un equipo de mesa. El tamaño de la fuente también depende de la resolución de la pantalla.
El interlineado debería ajustarse siempre a la pantalla, el interlineado justo para una buena legibilidad depende, entre otras cosas, de la longitud de las líneas.
El diseño de la página ha de dejar, asimismo, suficientes espacios tipográficos o áreas sin escritura en el fondo, ya que esto también repercute en la legibilidad de un texto.
No hay que olvidar, por otro lado, que el color de la fuente debería ser algo más intenso y el contraste algo más alto para una mejor visualización en pantallas pequeñas.
Los dispositivos móviles no se usan siempre en espacios cerrados, sino precisamente en movimiento y en espacios abiertos, donde no siempre se pueden controlar las condiciones atmosféricas de luz.
Accesibilidad color
La accesibilidad se trata de empatizar con el usuario, y tener una web no accesible, supone dejar de lado a casi 50 millones de habitantes de América Latina.
Existe un porcentaje de la población con problemas para percibir los colores, ya sea a la hora de diferenciar determinados colores o porque padecen alguna forma de ceguera que solo les permite percibir un espectro reducido de colores.
El contraste de luminosidad entre el color del fondo y el color del texto debe ser suficiente para garantizar una buena legibilidad del texto en situaciones desfavorables de mucha luz, pantallas con poco contraste o brillo y para personas con problemas de visión.
Las pautas de accesibilidad del contenido web establecen en su nivel AA el ratio de contraste suficientes de 4.5 para textos menores a 18 puntos y de 3 para textos mayores a 18 puntos.
Podemos decir que con mayor contraste mayor facilidad de lectura del texto, con independencia de la combinación de colores.
En la mayoría de las situaciones, lo más recomendable es texto negro sobre fondo blanco o colores muy cercanos a estos, como gris oscuro y tonos sepia.
Entendiendo al usuario
Atraer
¿A quiénes estamos atrayendo?
¿Qué están buscando?
¿Dónde están buscando?
Clarificar
¿Qué problema estamos resolviendo?
¿Cómo lo estamos resolviendo?
¿Qué espera el usuario?
Disponibilizar
¿Dónde comenzará proceso del usuario?
¿Cómo eliminamos la fricción y obstáculos?
¿Dónde terminará el proceso del usuario?
Adaptación
¿Dónde está el usuario durante el día?
¿Cómo está accediendo al software?
¿Cómo nos acomodamos a su rutina diaria?
El factor wow
¿Qué sabemos del usuario?
¿Cómo podemos aprender de ellos?
¿Cómo entregarles más de lo que esperan?
Extender
¿Qué herramientas le entregamos a los usuarios para que nos promocionen?
¿Cómo estamos obteniendo feedback de ellos?
Perfil de usuario
Definir perfiles y situaciones que se utilizarán, ayuda a que todo el equipo determine los límites de las funcionalidades y contenidos que deben implementar.
Los arquetipos de usuarios son las personas que utilizamos para entender las metas y modelos mentales.
Ponemos a las personas en escenarios y bosquejamos para encontrar el diseño de interacción adecuado.
Documentamos los cambios en nuestro diseño para comunicarlos a todos los miembros de nuestro equipo.
Por ejemplo, para un sitio que ofrezca trámites de un servicio determinado, será importante determinar quiénes son los usuarios habituales del mismo.
Si se sabe que son de la tercera edad y con limitados conocimientos sobre el uso del computador, se podrá diseñar una "persona" que sea un hombre que sólo quiere realizar el trámite en el menor número de pasos posibles, con una interfaz con la menor cantidad de elementos tecnológicos y la mayor simplicidad posible, con el fin de hacer la acción que se necesita y terminar consiguiendo un comprobante que le ayude posteriormente a demostrar que ya hizo la gestión.
| Expand | ||
|---|---|---|
| ||
Proceso
Algunos tips
|
| Expand | ||
|---|---|---|
| ||
La forma de utilizar dichos conceptos se explica de la siguiente manera: "Creamos modelos de datos y flujos de trabajo para definir los procesos de negocio. Modelamos arquetipos de usuarios que son las personas para entender sus metas y modelos mentales. Para encontrar el diseño de interacción adecuado, ponemos a las personas en escenarios y desarrollamos bosquejos gráficos que siguen los caminos ms relevantes en las interfaces. Aplicamos posprincipios de diseño y las plantillas para construir una solución. Mientras más avanzamos adquirimos más confianza en lo que desarrollamos y definimos la conducta de las funciones menos usadas y diseñamos nuestra solución con mejores niveles de fidelidad. En cada paso, documentamos los cambios en nuestro diseño de manera que podamos comunicarlos a todos los miembros de nuestro equipo de desarrollo". Esta metodología tiene un uso muy importante al momento de definir las funcionalidades de un Sitio Web, ya que al definir a los personajes que utilizarán y las situaciones en que los emplearán, será más fácil que todo el equipo de desarrollo determine los límites de las funcionalidades y contenidos que debe poner en cada pantalla. Por ejemplo, para un sitio que ofrezca trámites de un servicio determinado, será importante determinar quiénes son los usuarios habituales del mismo. Si se sabe que son de la tercera edad y con limitados conocimientos sobre el uso del computador, se podrá diseñar una "persona" que sea un hombre que sólo quiere realizar el trámite en el menor número de pasos posibles, con una interfaz con la menor cantidad de elementos tecnológicos y la mayor simplicidad posible, con el fin de hacer la acción que se necesita y terminar consiguiendo un comprobante que le ayude posteriormente a demostrar que ya hizo la gestión. Como parte del uso de esta metodología se puede bautizar a la "persona" como "Don Tito", indicar que se trata de un jubilado. Luego, se podrá definir que el escenario consistirá en que utilizará el trámite desde un infocentro donde es improbable que pueda recibir ayuda lo que determinará que la pantalla debe ser lo más simple posible y que esperará salir de allí con un documento impreso que lleve un timbre, tal como si hubiera ido a la oficina del servicio. Al conocer estos requerimientos, todo el equipo de desarrollo entenderá muy bien lo que tiene que hacer y su respuesta será diferente que si sólo se hablara del "usuario" en términos genéricos. |
¿Cómo trabajamos?
Estrategia y contexto (PO)
Análisis de la competencia
Análisis de clientes
Estructura del producto / estrategia
Desarrollo de contenidos, redacción y terminología
Diseño de producto
El proceso (UX)
Elegir dirección
Hacer mapas de empatía
Determinar objetivos de usuario
Crear un flujo de usuario
Arquitectura de información y taxonomía
Wireframes y prototipos (UI)
Wireframing
Diseño de interfaz
Diseño de interacción y usabilidad
Prototipar
Ejecución y Analítica (DE)
La planificación del desarrollo
Coordinación con UI UX Designer
Coordinación con desarrolladores
Objetivos de seguimiento e integración
Análisis e iteración
¿Qué herramientas usamos para trabajar?
Figma
Figma es un programa que ofrece todas las herramientas necesarias para diseñar un proyecto. Sobre todo es ideal para crear interfaces de usuario tanto para web como para móvil. También permite crear prototipos, generar código para el traspaso (hand-off) e ilustrar
.
Componentes
Cuando hay un elemento que se deben utilizar en varias pantallas, Figma da la oportunidad de convertirlo en un “componente” para que cualquier cambio que se aplique sobre éste, quede automáticamente actualizado en sus instancias en todas las pantallas.
Además, también permite modificar uno de los elementos específicos de una instancia, sin alterar ninguna más pero a la vez, sin romper la relación entre todas esas réplicas. Esto último, permite que siempre puedan volver a recuperar la copia original.
Plugins
Herramienta colaborativa
Pero lo más potente que tiene Figma es que permite que varias personas puedan colaborar dentro del mismo proyecto simultáneamente y a tiempo real. Además, siempre se van guardando los cambios en el archivo de forma que los usuarios siempre verán los últimos cambios sin la necesidad de estar siempre sincronizados o de enviarse documentos. En definitiva, eso ayuda a que varios usuarios puedan trabajar, por ejemplo en el diseño de una app, de forma remota y simultánea, comunicándose entre ellos y avanzando en el resultado.
Trello
Trello es una
herramienta para la organización de tareas. Es ideal para la coordinación de equipos de trabajo y se basa en la metodología Kanban, la cual propone un sistema de uso colaborativo. Para utilizar esta aplicación, ya sea en su versión de escritorio o de dispositivos inteligentes, solamente deberemos registrarnos con un correo electrónico y posteriormente ingresar a trabajar.
Trello permite crear diversos proyectos con temáticas totalmente diferentes entre sí, asociados a una misma cuenta, y trabajando con equipos diferenciados (según el contenido de cada uno de ellos).
Respecto a su funcionamiento, la distribución de pendientes se realiza en base a un tablero principal, en donde se generan diversas listas con títulos para cada etapa o ítem del proyecto.
En cada una de las listas, separadas por temática, se pueden agregar varias tarjetas (asociadas a las tareas que contiene cada uno de los ítems del proyecto).
Las tarjetas, que contienen actividades por realizar, pueden ser editadas y re-ordenadas, arrastrándolas y soltándolas con el cursor del mouse.
En las tarjetas es posible incorporar imágenes, plazos de entrega, listas de tareas, etiquetas separadas por color y comentarios asociados a cada tarea.
En palabras simples, el tablero es la página que contiene todas las listas asociadas a un proyecto en específico, que pueden ser añadidas o archivadas.
Recursos
Inspiration
Reference
Además tenemos una lista de herramientas y links a diferentes recursos, puedes acceder aquí.