Principios UX
Tannia Obregón
Platzi | clase 1
[Link]
Gestalt: es una corriente psicológica que nació en Alemania a inicios
del siglo 20, y explica principios de cómo el humano percibe su
entorno.
Principios
**Principio de semejanza: **
Tendemos a agrupar elementos que son
similares aunque no estén juntos.
Podemos relacionar forma, tamaño,
color.
Principios
**Principio de proximidad: **
Si vemos elementos alineados de forma
ordenada y en un mismo espacio, los
tendemos a ver como un grupo.
Principios
**Principio de continuidad: **
Si vemos elemenos dispuestos en línea o
curva de forma ordenada, los vamos a
ver como si estuvieran agrupados.
Relación de figura-fondo:
Tenemos una figura o el foco principal de la atención del usuario, y el fondo que lo percibimos pero no
tiene la misma jerarquía o relevancia. Nos permite mostrar diferentes planos de profundidad y ordenar
de manera jerárquica el contenido.
**Principio de cierre (o
cerramiento): **
Cuando vemos una imagen
incompleta, nuestro cerebro
automáticamente la llena. Nos
ayuda en iconografía.
Leyes del UX
Ley de Fitt:
Se parece al principio de
proximidad. El tiempo que lleva
llegar a un objetivo tiene que ver
con el tamaño y la distancia del
mismo. Por ejemplo: el boton
Enviar de un formulario debe
estar cerca de los demás
elementos, para que el usuario
sepa qué acción debe realizar.
Ley de Hick:
Cuantas más opciones tenga el
usuario, más difícil le será tomar
una decisión.
Ley de Jakob:
A los usuarios les gusta usar cosas que ya saben usar y que ya sabe como van a funcionar. Podemos lograrlo
usando mejores prácticas y estándares de la industria.
Ley de miller:
El ser humano puede recordar hasta 7 (±2) elementos en su memoria a corto plazo.
Reto:
Realiza navega sitios y descubre ejemplos de cada una de las leyes anteriores
Qué es UX
● UX: Disciplina que a través de procesos se encarga de crear un producto o servicio
que crea valor.
● Objetivo: Crear experiencias relevantes
● Productos: Fácil - Intuitivo - Valor = Usuarios felices.
● Siempre cíclico - es iterativo hasta encontrar la mejor versión del productos o servicio
● Los procesos se repiten varias veces.
● User Centric (centrados en el usuario) - Entender necesidades y problemas y como el
producto resuelve estas áreas, cómo usan nuestro producto para poder ofrecer a mejor
versión del producto
Platz | clase 2
Qué implica ser un
diseñador de
interfaces?
Platz | clase 3
Design thinking | Metodologías
Metodologías
5 Pasos
1- Empatizar: Conocer y entender las necesidades de nuestros usuarios.
2- Definir: Definir el alcance de nuestro proyecto.
3- Idear: Sacar ideas de como se puede resolver nuestro proyecto.
4- **Prototipar: ** Prototipar ya sea en papel o digital la solución de la definición e ideación de nuestro
producto.
5- **Testear: ** Probar el prototipo con nuestros usuarios para saber si nuestro producto funciona o
necesita hacerle ajustes.
Pasos de las metodologías
Pasos de las metodologías
1- Planeación: 4- Testing:
-Análisis de datos -Prueba de velocidad
-Historias de usuario -Finalizar diseño
-Flujos de usuario -Micro detalles
2- Exploración:
-Sketching
-Wireframe 5- Retroalimentación:
-IA -KPI Testing
-Prototipo -A/B Testing
3- Diseño:
-Guía de estilos
-Mockups (Regresar este ciclo para nuevas
-Hand off versiones y nuevas funciones)
Recomendaciones
● Ser diseñador es una actividad social. Es importante que te comuniques con tu equipo
de manera clara y abierta, ser flexible y empático con las necesidades del público.
● Esto es una maratón y no una carrera. Nuestro producto o solución va a sufrir cambios
● Enamorarse del problema y no de la solución. Nuestra labor está enfocada en resolver
el problema del usuario, no solamente tener un producto que sea estéticamente
agradable.
Principios básicos de
diseño
Retícula, tipografía, color
Platz | clase 5
Uso de retículas
La Retícula: Es una herramienta utilizada
en diseño gráfico para hacer composiciones
sobre todo en diseño editorial.
Importancia de la Retícula:
● Nos ayuda estructura en el diseño.
● Nos permite alinear de manera
ordenada nuestros elementos
● Nos ayuda a tener claridad y
consistencia.
● Podemos trabajar en diferentes
dispositivos.
Las columnas son las alineaciones donde van los contenidos.
Existen márgenes que es el espacio entre la columna y el resto de la página y los medianiles es el
espacio entre las columnas que nos ayudan a organizar el contenido
es importante el manejo de retucula porque permite ordenar los elementos y claridad y consistencia y
trabajar en distintos dispositivos
Web | 12 columnas
Tablet | 8 columnas
(IOS: 768px | Android: 600dps)
Móviles | 4 columnas
Diseño responsivo
Tipografías
Las familias tipográficas
permiten tener diferentes
variaciones dentro del contenido
Recomendaciones | Tipografías
[Link] máximo 3 tipografías.
2. Asegúrate que las tipografías son legibles
3. Ancho de columna correcto, ideal 66 caracteres por línea es lo adecuado.
4. Para saber el tamaño adecuado del interlineado usa la fórmula 1+20% . Ejemplo:
Si tienes una tipografía de tamaño 10 puntos el interlineado ideal sería de 12.
5. Es importante saber contrastar con colores, fondo para facilitar la lectura
Principios de usabilidad y
heurística
Para crear interfaces más intuitivas
Platzi | clase 6
1- Visibilidad del estado del sistema:
El usuario debería saber que está
pasando en cada interacción con el
producto (cargando, guardando,
errores). Debe recibir un feedback del
estado del producto.
Ejemplo si el usuario subió 1 archivo
se debe indicar si subio correctamente
o si hubo un error
2- Relación producto y mundo real:
El usuario no debería tener dudas al
momento de interactuar con el sistema, se le
debe brindar toda la información para que
pueda operar el sistema.
Ejemplo: se está usando una imagen de una
tarjeta de crédito para indicarle a los clientes
q datos deben llenar y dónde encontrarlos en
su tarjeta real
3- Control y libertad del usuario: El
usuario debe poder cancelar o salir de
un proceso y/o finalizarlo y sin
compromisos.
Consistencia
4- Consistencia: En el diseño de los
bloques visuales del flujo del
sistema, botones etc, tratar de llevar
un patrón de diseño en todos los
elementos para evitar confusiones
Prevención de errores
: Proveer instrucciones claras de lo que se espera que el
usuario realice dentro de nuestro producto.
En el ejemplo se puede ver que el usuario debe poner
una contraseña y se le indica todo lo que necesita para
que sea funcional
Ayuda a evitar la frustración de los clientes
Reconocer antes que recordar
Entregar información valiosa al usuario y además
proveer una forma en que el usuario pueda
revisar cuando la necesite sin acudir a su
memoria.
Ej: se ve el precio y producto y también el resuken
de todo lo que incluye el paquete
Flexibilidad y eficiencia de uso
Entregar una interfaz capaz de satisfacer a usuarios avanzados y no avanzados.
Permitir el uso del producto sin necesidad de conocimientos especializados.
Diseño que abarque todo tipo de usuarios
Diseño estético y minimalista
8- Diseño estético y minimalista: no saturar de contenido
al usuario, mostrar únicamente el contenido relevante
para cada vista o cada acción que el usuario ha decidido
acceder. No poner elementos que distraigan al usuario
del objetivo de la vista.
Ayudar a los usuarios a reconocer y corregir
errores
Dar información al usuario de lo que esta generando
errores o inconsistencias en el sistema.
Ej cuando estamos haciendo una busqueda y ponemos
muchos filtros es posible que no hayan resultados, en
Airbnb te hacen recomendaciones de por que esta
pasando esto y como corregirlo,
“Elimina alguno filtros o amplia tu busqueda en el
mapa”
Ayuda y documentación
Detectar las dudas más comunes de los
usuarios a la hora de usar nuestro
producto y proveer información que
pueda resolverlas de manera inmediata
Reto
Diseñar un sitio para búsqueda de apartamento para usuarios de 25 a
35 años
Platzi | clase 6
Brief
El proyecto Diseñar un sitio web donde se pueda buscar departamento en renta, de forma fácil y rápida. El objetivo Satisfacer y
mitigar los problemas que un usuario enfrenta a la hora de buscar un nuevo hogar. El producto debe mejorar la experiencia que
dan las soluciones ya existentes en el mercado. El usuario
● Personas de 25 a 35 años (millennials). ● Alto uso de tecnología e internet.
● Prefieren invertir en experiencias que en cosas tangibles.
● Prefieren conectar a través de internet que en persona.
● Tener comodidades que vayan con su estilo de vida es importante para ellos. Funcionalidades básicas
1. El usuario deberá poder realizar una búsqueda de forma rápida y eficiente.
2. El usuario deberá poder filtrar su búsqueda.
3. El usuario deberá encontrar toda la información del departamento de forma sencilla. 4. El usuario deberá poder contactar al
anunciante fácilmente. Consideraciones técnicas El producto… ● Es un sitio web. ● Se verá bien en múltiples dispositivos.
Ejemplos
Ejemplos
Ejemplos
Ejemplos
Ejemplos
