Descarga la aplicación para disfrutar aún más
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.
Compartir