DISEÑO UX
¿Cómo arrancamos un
proyecto de diseño UX/UI?
Primero hay que saber:
1. ¿Qué es UX y UI? ¿En qué se diferencian?
2. A qué llamamos Usabilidad.
3. ¿Cómo es el proceso de diseño y sus etapas?
UX UI
User Experience
User Interface
o Experiencia de
Visual Design
Usuario
1. UX y UI
Es necesario tener en claro ambos conceptos a la hora de empezar.
El ux, va a estar presente en todo el desarrollo del diseño, desde el inicio,
desde que se piensa y analiza el proyecto, hasta el final del proyecto,
testeando y haciendo pruebas de usabilidad.
El diseño UI, comienza en una segunda etapa y va a incorporar al UX, todos
los elementos visuales y gráficos. Podemos decir que el diseño UX,
se mantiene constante en el proceso de diseño.
UX constante
Producto final
UX UI
Entregable
User Experience
User Interface
o Experiencia de
Visual Design
Usuario
UX
Podríamos decir, que la experiencia de usuario es el halo que
rodea a una marca.
El diseño UX, abarca otros aspectos en los que el diseño de Interfaces no
se centra, como usabilidad, entrevistas, recopilación de información
sobre el producto, estudio de la interacción con el usuario, presentación..
¿Pero qué significa
UX?
¿Pero qué significa
UX?
User experience o Experiencia de Usuario, es toda la experiencia y toda la
percepción del usuario con respecto a un producto.
De las 5 preguntas fundamentales, (wiki 5w):
Es el ¿Cuándo?, durante, mientras, es el momento y tiempo en que un
usuario usa, siente y experimenta el producto.
UX
Aspectos y disciplinas
que abarca:
Usabilidad
User research
DCU
Arquitectura de la info.
Factores humanos
Branding
Visual design
Diseño industrial
Diseño de interacción
Su objetivo:
The Definition of User Experience por Jakob Nielsen y Don Norman
● Satisfacer las necesidades exactas del usuario. Que el usuario tenga
una buena experiencia.
● No hacer pensar al usuario, que le sea fácil usar aquel producto.
● La verdadera experiencia de usuario va más allá de darle a éstos lo
que dicen que quieren, o proporcionarles las mejoras que necesitan.
¿Cómo nace el término UX?
Definición de Don Norman (1998) wiki
“Inventé el término porque pensé que el diseño de
interfaces humanas (UI) y la usabilidad abarcaban
demasiado poco; yo quería cubrir todos los aspectos
de la experiencia de las personas con un sistema,
incluido el diseño industrial, gráfico, de interfaces, la
interacción física y manual”
Pade del ux y creador del
término. Libros:
[Link]
video [Link]
Aspectos y técnicas:
Se piensa idea producto, Análisis
del producto y del usuario, DCU,
userflows, Mapa de sitios,
Arquitectura de la información,
Benchmarking y Análisis de
competencia, Estructura, UX
Navegación, Diseño
sketches/wireframes, prototipos,
test de usabilidad.
UX no es lo mismo que UI
Experiencia total del usuario (UX) es distinto a diseño de la
interfaz de usuario (UI).
“Aunque UX emerja de disciplinas de diseño, no es una disciplina de diseño”
Peter Merholz, UX Week 2012
UX
Abarca más campos
y disciplinas de estudio,
Basándose en obtener una
buena experiencia de usuario
y su objeto de estudio principal
es el USUARIO.
[Link]
UX UX (es) UI (es)
Field research Tema de investigación Tema de investigación
Face to face interviewing Entrevista cara a cara Entrevista cara a cara
Creation of user tests Creación de pruebas de usuario Creación de pruebas de usuario
Gathering and organizing statistics Recopilación y organización de estadísticas Recopilación y organización de estadísticas
Creating personas Creación de personas Creación de personas
Product design Diseño de producto Diseño de producto
Feature writing Escritura de funciones Escritura de funciones
Requirement writing Requisito escrito Requisito escrito
Graphic arts Artes gráficas Artes gráficas
Interaction design Diseño de interacción Diseño de interacción
Information architecture Arquitectura informacional Arquitectura informacional
Usability Usabilidad Usabilidad
Prototyping Prototipos Prototipos
Interface layout Diseño de interfaz Diseño de interfaz
Interface design Diseño de interfaz Diseño de interfaz
Visual design Diseño visual Diseño visual
Taxonomy creation Creación taxonómica Creación taxonómica
Terminology creation Creación de terminología Creación de terminología
Copywriting Redacción de textos Redacción de textos
Presenting and speaking Presentando y hablando Presentando y hablando
Working tightly with programmers Trabajando estrechamente con los program. Trabajando estrechamente con los
Brainstorm coordination Brainstorm coordinación programadores
Brainstorm coordinación
UX constante Tipografía,
volumen, paleta,
interfaz gráfica,
realización de
mockups.
Etapa de análisis
producto y
Usuario. Diseño Producto final
de estructura, UX UI
Entregable
navegación.
EJ: UX # UI: Acción Pelar Manzana
EJ: UX # UI Pelar Manzana
● Ej acción pelar manzana: UX es el momento en que pelamos el cuchillo, si
nos resulta cómodo, fácil o encontramos algún problema.
● UI: Es el objeto o forma en que accedemos a la experiencia (osea el medio) .
Por lo tanto UI se refiere a la creación de la interfaz, ya sea gráfica o
desarrollada con diversas tecnologías. Mientras que UX, se concentra en
ponerse en los zapatos del usuario y verificar la usabilidad de tal o cual
producto: diseño web, app, etc.
Resumen UX:
● UX son todas las interacciones y experiencia que una persona tiene
con un producto en cierto tiempo.
● La idea es mejorar una experiencia, en los puntos que el contacto
tiene interacción.
● Objetivo satisfacer las necesidades exactas del usuario.
● CONSISTENCIA en todos los pasos.
● La experiencia de usuario, no se añade a un producto, sino uno piensa
y toma decisiones en crear una UX ÓPTIMA.
● UX “Es ponerse en los zapatos del usuario”
2. ¿Y a qué llamamos
Usabilidad?
¿Y a qué llamamos
Usabilidad?
“Facilidad de Uso”.
“...Es la facilidad con que las personas pueden utilizar una herramienta
particular o cualquier otro objeto fabricado por humanos con el fin de
alcanzar un objetivo concreto”. (wiki)
¿Y a qué llamamos
Usabilidad?
Jakob Nielsen, considerado el padre de la Usabilidad, la
definió como el atributo de calidad que mide lo fáciles de
usar que son las interfaces web.
Es decir un sitio web usable es aquel en el que los usuarios
pueden interactuar de la forma más fácil, cómoda, segura e
inteligentemente posible.
Finalidad:
● En el caso de un sitio web/app, es lograr que el usuario encuentre lo que busca en el menor
tiempo posible.
● Lógicamente es imposible crear un sitio web ciento por ciento perfecto, no se puede
agradar al mismo tiempo a millones de usuarios, sin embargo, los diseñadores deben
tratar de mostrar todos los elementos de una manera clara y concisa, minimizando el
número de clics y de scroll.
● Lo importante en este caso es que el usuario no se deje dominar por el sitio, es decir que
sea él mismo que tome el control de la navegación por medio de un aprendizaje sencillo.
Finalidad: SteveKrug: Don't make me think.
Us. Puede ser medida:
En base a 3 variables:
● Efectividad: Mide la cantidad de tareas que un usuario puede realizar sin
ayuda externa
● Eficiencia: Mide el costo para realizar una tarea.
● Satisfacción: es una variable cualitativa.
Entonces UX es diferente
a Usabilidad.
● UX # Usabilidad: de facilidad de uso. De acuerdo con la definición de Usabilidad,
este es un atributo de calidad de la interfaz de usuario, cubriendo si el sistema
es fácil de aprender, eficaz de utilizar, agradable, y así sucesivamente. Una vez
más, esto es muy importante, y de nuevo, el UX es un concepto aún más
amplio.
● Usabilidad, no es en si la experiencia sino, si es fácil de usar o no.
● Ergonomía, influye en la usabilidad. Tablets, iphones, y sus medidas.
Experiencias
diseñadas y experiencias accidentales
Experiencias
diseñadas y experiencias accidentales
UI
User interface design.
Es la interfaz del usuario, es lo que define la parte visible de una app, web, o
un software.
Consta de la incorporación de la paleta de colores, imágenes, iconos,
botones, tipografía, patrones de diseño, presencia de marca.
Es el estilo visual del diseño UX , que pensamos previamente.
wiki
¿Qué definimos en UI?
- Creamos la interfaz gráfica.
- Incorporamos paleta, tipografía, elementos visuales, iconografía etc.
- Consistencia visual en todos los pasos.
- Hacemos reconocible y pregnante el producto con su propio diseño.
- Tenemos el producto diseñado como sería en la realidad.
UI
3.¿Cómo es el proceso
de diseño UX y UI?
Ej: tinder
1. Primero:
Pensamos producto a desarrollar.
2. Pensamos el perfil de usuario:
persona (DCU).
4. Pensamos el camino, pasos que el
usuario va a tomar en el producto:
Userflows, diagramas, mapas de sitio (AI)
5. Analizamos el Benchmarking. Su
competencia:
7. Se comienza con la estructura y primeros
sketches baja calidad.
7. Se comienza con la estructura y primeros
sketches baja calidad.
8. Wireframes, sketches en alta.
9. Se arma los primeros prototipos, sketches
navegables.
10. Se piensan los test/pruebas de
usabilidad:Sacamos resultados y volvemos a
evaluar el diseño UX.
11. Se piensa el diseño ui, para incorporar al
UX.
12. Una vez validado el diseño UI, se realiza un
prototipo con bocetos navegables.
13. Se arman los mockups: Bocetos reales de como
sería la aplicación.
Y por último...
Una vez con los diseños UI, se pasan a programación.
Luego se realizarán nuevos test de usabilidad, para ver
resultados más reales.
Lista de sitios responsive y buen Ux
It Turismo
[Link] [Link]
[Link] [Link]
[Link]
e-comerce [Link]
[Link]
[Link] Dating
[Link] [Link]
[Link] [Link]
[Link]
[Link] email mkt:
[Link]
[Link]
[Link]
