Clase 17 Estandares y Guidelines (MATERIAL COMPLEMENTARIO)

Vista previa del material en texto

ESTANDARES Y GUIDELINES
MATERIAL COMPLEMENTARIO
 Clase 17. DISEÑO UX/UI
Este es un material extra que no se visualiza en la clase en vivo y tiene como objetivo brindar más información para complementar las explicaciones del/a docente. 
El logo del producto debe ir en la zona superior izquierda.
Incluir una bajada que comunique la propuesta de valor del producto.
Incluir descripción breve del producto, para ampliar información.
Utilizar un “call to action” (CTA) claro y visible. Con un rápido escaneo debe percibirse la tarea primaria de la Home.
Listado de features del producto.
Usar imágenes que aporten información y no solo decorativas. 
Los elementos de navegación (links, buscador, categorías) deben ser visibles en la parte superior de la página.
PATRONES DE DISEÑO
En estos slides queremos hacer foco en la imagen y no en el contenido (texto).
Entregar mensajes de 100 caracteres
Imagen de Alto Impacto.
Logo esquina superior izquierda.
Incluir descripción breve del producto.
Utilizar un “call to action” claro y visible.
Los elementos de navegación visibles
SINERGIA ENTRE BUSCADOR Y CATEGORÍAS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
En general lo que se percibe en métricas y testeos es que si el buscador de una página no arroja buenos resultados, la próxima vez el usuario hará búsquedas directamente desde categorías o buscadores externos.
Existen varios motivos por los cuales es necesario trabajar en las categorías de un sitio:
SINERGIA ENTRE BUSCADOR Y CATEGORÍAS
Sucede que muchas veces las palabras elegidas por el usuario no son la que usa la compañía. “Estudiar” las categorías de un sitio nos ayuda a entender cómo buscarán nuestros usuarios.
1
AYUDAN A ENTENDER EL LENGUAJE DEL SITIO
Usar el buscador implica pensar qué escribir y tipear. 
Lo cual tiene un costo más pequeño que hacer una buena navegación a través de categorías.
2
MENOR COSTO DE INTERACCIÓN
Arrojar resultados precisos significa desarrollar potentes y complejos algoritmos.
3
MENOR COSTO DE DESARROLLO
Los usuarios ingresan su búsqueda de la misma forma que lo hacen en Google, ya que ese es su modelo mental. Por lo tanto esperan que nuestro buscador funcione como el de Google.
4
GOOGLE COMO PATRÓN
LEY DE FITTS
Si aumentamos el tamaño de los enlaces, debemos tener en cuenta cuál es la dirección de movimiento del cursor más probable cuando éstos se usan, ya que lo que cuenta es el recorrido útil sobre el eje de desplazamiento del cursor. Si el movimiento es predominantemente vertical, por ejemplo, será la altura del botón, y no su ancho, la medida a potenciar.
EL CONCEPTO DE “ANCHO” ES RELATIVO
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Asegurate de que las opciones que aparecen queden cerca de la posición original y que no se cambie la dirección del desplazamiento.
ATENCIÓN AL
DESPLIEGUE DE MENÚS
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
El tiempo que el cursor tarde en recorrer del punto 1 al punto 1 en el ejemplo A es mayor al tiempo que tarda el cursor del punto 1 al punto 2 en el ejemplo B.
A
B
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
VEAMOS UN EJEMPLO APLICADO
LEY DE MILLER
“Las personas pueden recordar hasta 7 elementos distintos en su memoria de trabajo”.
Ley de Miller
Miller
Usar para slides de texto con imagen.
Por eso en aplicaciones o servicios que tiene multitud de opciones, se agrupan estás para reducir la carga de memoria.
MÁS DE 7 ELEMENTOS
GENERA CONFUSIÓN
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
VEAMOS UN EJEMPLO APLICADO
EFECTO VON RESTORFF
Predice que cuando hay varios objetivos, siempre se recordará el que difiere del resto.
Efecto de posición
de una serie
Usar para slides de texto con imagen.
Las cosas distintas nos atraen y nos resultan llamativas.
EFECTO DE
AISLAMIENTO
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
VEAMOS UN EJEMPLO APLICADO
¡MUCHAS GRACIAS!
Resumen de lo visto en este material:
Estándares y buenas prácticas de diseño.
Leyes UX en el diseño de los wireframes.
Lineamientos y pautas de diseño (Guidelines).
Lineamientos de Google y Apple (Android vs IOS)
Obligatoria siempre. Completar el resumen con palabras claves de lo visto.