Clase 17 Estandares y Guidelines

Vista previa del material en texto

ESTANDARES Y GUIDELINES
 Clase 17. DISEÑO UX/UI
Esta clase contiene slides que no se muestran en la presentación. Deben mostrarse únicamente los que no están ocultos.
RECORDÁ PONER A GRABAR LA CLASE
LO MÁS RELEVANTE DE LA CLASE 17
Evaluación Heurística: Es un método de inspección de la usabilidad sin usuarios. Consiste en examinar la calidad de uso de una interfaz por parte de varios evaluadores a partir del cumplimiento de unos principios reconocidos de usabilidad: los heurísticos.
GLOSARIO:
Clase 16
10 Principios Heurísticos: Jakob Nielsen definió 10 principios de diseño basados en el usuario que nos acercan a cumplir con el concepto de Usabilidad (Facilidad de Uso).
CRONOGRAMA DEL CURSO
Clase 18
UI Kits y Moodboard
Clase 16
Evaluación Heurística
EVALUACIÓN
HEURISTICA PROPIA
ENTREGA PROYECTO 4
Clase 17
Estándares y Guidelines
WIREFRAMES Y GUIDELINES
UI KIT+MOODBOARD
& ICON DESIGN
DEFINIENDO EL MOODBOARD Y ARMANDO EL UI KITS DEL PROYECTO
GENERAR NUESTRO
ICONO DE LA APP
Comprender cuáles son los estándares y buenas prácticas de diseño.
Comprender el uso de las Leyes UX para el diseño de los wireframes de su producto digital.
Conocer los lineamientos y pautas de diseño establecidos (Guidelines).
Diferenciar los lineamientos de Google y Apple (Android vs IOS)
OBJETIVOS DE LA CLASE
No va, es para guiar el uso del plantilla.
MAPA DE CONCEPTOS CLASE 17
ITERAR
Analizar
Diseñar
Validar
Prototipar
Evaluar
EVALUACIÓN HEURÍSTICA
LEYES UX
GUÍAS DE ESTILO
¿ARRANCAMOS?
BUENAS PRÁCTICAS
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.
HOME
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.
Debe demostrar rápidamente el valor del producto.
Se estima que un usuario permanece en la home sólo 32 segundos (Nielsen) 
Además, la capacidad de lectura de un usuario es de aproximadamente 200 palabras por minuto.
Lo cual nos obliga a entregar mensajes de 100 palabras.
HOME 
Dónde se encuentran
Qué beneficios pueden obtener
Qué productos o servicios ofrecen
Opciones para obtenerlos
Concentrarse en:
Usar para slides de texto con imagen.
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 EL MATERIAL COMPLEMENTARIO ENCONTRARÁS EJEMPLOS APLICADOS DE ESTOS PATRONES WEB
“Above the fold” es el nombre de la sección de la página que es visible sin hacer scroll. Si bien los usuarios hacen scroll, destinan sólo el 20% de atencion a la lectura “below the fold”. (Nielsen)
Por eso, el contenido que responda a las preguntas más importantes tiene que ser visible sin hacer scroll.
Pero el diseño debe colaborar en que el usuario haga scroll.
¿LOS USUARIOS HACEN SCROLL?
TRÁFICO EN HOME
La tendencia demuestra que el tráfico de la Home decrece a medida que pasa mayor tiempo del lanzamiento de un producto. 
Autores como Friedman o Keen incluso hablan de la “muerte de la home”.
Sin embargo, desde el negocio, la Home sigue siendo la parte más importante del sitio. Es “nuestra cara visible”, “nuestra vidriera”.
Existen dos concepciones que llevan a sobredimensionar la importancia de la home:
Considerar a la web como un diario impreso
Considerar que la home impacta en el tráfico de todo el sitio
TRÁFICO EN HOME
Teniendo en cuenta que los usuarios acceden desde Google, cualquiera de nuestras páginas puede ser una posible Home.
Considerar un contexto y navegación consistente, y NO asumir que el usuario realizó un recorrido lineal.
No desatender o matar el diseño de la Home, sino considerarlo una página más.
Sobredimensionar el valor de la home es un signo autorreferencial, que privilegia la visión del negocio por sobre las necesidades del usuario.
BUSCADOR
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.
El buscador no soluciona todo en una página.
Es crucial construir un esquema de navegación simple e intuitivo que ayude al usuario a encontrar lo que busca.
BUSCADOR
El objetivo aquí es que vean como Mercado Libre propone otras maneras de buscar más allá del "buscador".
Lugar del buscador
En sitios transaccionales donde el buscador es fundamental, debe ser grande y situarse junto al logo de la empresa.
En el resto de los sitios, la tendencia es ubicarlo en la parte superior derecha.
1
PRINCIPIOS
Diseño y wording
Incluir un input que permita el ingreso de 30 caracteres y tenga un texto de “Buscar” o un icono de lupa.
El objetivo no es ponerse creativos sino que sea reconocido fácilmente.
2
PRINCIPIOS
Autocompletar
Sugerir opciones a medida que el usuario ingresa la búsqueda. 
Este comportamiento reduce el tiempo, la carga cognitiva del usuario y los errores al ingresar el texto, obteniendo mayor precisión en los resultados.
3
PRINCIPIOS
Resultados de búsqueda 
Deben ordenarse por relevancia según las palabras ingresadas por el usuario.
Los resultados deben ser fáciles de “escanear”
El cuadro de texto debe permanecer visible y con lo escrito por el usuario. Así podrá ir refinando su búsqueda.
De ser posible, ofrecer “búsqueda facetada”: el usuario hace una búsqueda simple y luego la va ajustando mediante filtros. (Costosa)
4
PRINCIPIOS
ENCONTRARAS INFO SOBRE SINERGIA ENTRE BUSCADOR Y CATEGORÍAS
 EN EL MATERIAL COMPLEMENTARIO
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.
LEYES APLICADAS A UX
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.
Es la recopilación de leyes o normas de diseño que los diseñadores deben tener en cuenta a la hora de pensar y mejorar la experiencia de usuario. Estas leyes no pertenecen directamente a la disciplina de UX-UI pero debemos tenerlas presentes. 
¿QUÉ SON?
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.
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.
LEY DE FITTS
MT = a + b * log2(D/W + 1)
Es un modelo del movimiento humano, que predice el tiempo necesario para moverse rápidamente desde una posición inicial hasta una zona destino final como una función de la distancia hasta el objetivo y el tamaño de éste.
Cuando esperamos que el usuario haga clic en un elemento de interacción, el tamaño del elemento y su posición con respecto al punto de partida del cursor importan.
LEY DE FITTS
“El tiempo necesario para alcanzar el objetivo es una función de la distancia y tamaño que hay que recorrer hasta él”.
Ley de Fitts
Paul Fitts, 1954, Psicólogo
Usar para slides de texto con imagen.
Las acciones más habituales o más importantes para los usuarios de una web deben estar lo más cerca posible de la posición previa del cursor y tener una superficie clickable mayor.
EL TAMAÑO Y LA POSICIÓN IMPORTA
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 A es mayor al tiempo B, El tiempo B es mayor al Tiempo CUsar 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
EN EL MATERIAL COMPLEMENTARIO ENCONTRARAS MÁS EJEMPLOS
Si ampliamos el espacio sobre el que el usuario puede hacer clic en un enlace, sus límites deben ser claramente perceptibles, ya que de lo contrario esto no servirá de nada.
SI SE LO HACEMOS MÁS FÁCIL, QUE SE NOTE
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.
No es buena idea sacrificar el tamaño y la ubicación de los enlaces por criterios meramente estéticos o de economía de espacio.
DISEÑO AL SERVICIO DE TUS USUARIOS
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
Hacer enlaces grandes ayuda, pero hacerlos “enormes” no aporta ningún beneficio adicional.
No olvides la variable “distancia”. Quizás no puedas (o no quieras) hacer más grande un objeto, pero posiblemente sí puedes ubicarlo más cerca.
APLICALO CON PRECAUCIÓ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.
¿CÓMO PODEMOS APLICARLO
EN TELÉFONOS?
LEY DE HICK
Se emplea para operaciones sencillas, no es aplicable en casos de decisiones complejas. 
El tiempo de respuesta es mayor cuando existen más estímulos donde elegir.
LEY DE HICK
LEY DE HICK
“El tiempo que se tarda en adoptar una decisión, aumenta a medida que se incrementa el número de opciones”.
Ley de Hick
William E. Hick, Psicólogo
Usar para slides de texto con imagen.
Nuestro deber es lograr que el usuario no conciba la instancia de la interfaz como una selección de opciones, aunque realmente lo sea. Debemos componer con armonía para que el usuario no quede paralizado, para minimizar su tiempo de reacción, y sobre todo, para conducirlo: o bien hacia lo que él estaba buscando, o bien hacia donde nosotros queríamos llevarlo.
MINIMIZAR SU TIEMPO DE REACCIÓ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.
La suma de las T1+T2+T3 es mayor al tiempo que tarda el Tiempo B.
VEAMOS UN EJEMPLO APLICADO
LEY DE TESLER
“Para cualquier proceso existe un nivel básico de complejidad, inherente al propio proceso.
Una vez alcanzado ese nivel mínimo no se puede simplificar más, sólo se puede mover la complejidad de un lado a otro.”
Ley de Tesler
Tesler
Usar para slides de texto con imagen.
Una vez llegado al límite de simplificación no se puede conseguir mejoras por mucho esfuerzo que se dedique, ya que aunque se crea que se ha conseguido optimizar algún aspecto de la misma, habrá algún otro que se haya visto perjudicado por esto.
TODA TAREA TIENE UNA COMPLEJIDAD
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.
Complejo por falta de reducción
Usar para slides de imagen completa.
Usar para slides de imagen completa.
Complejo por exceso de reducción
Usar para slides de imagen completa.
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
Obligatoria siempre.
Los usuarios siempre recordarán mejor el primero y el último.
Efecto de posición
de una serie
Usar para slides de texto con imagen.
Es la razón por la cual vemos que en la barra de navegación de las aplicaciones se colocan las acciones más importantes a la izquierda o a la derecha, las cuales implementan elementos como inicio o perfil teniendo en cuenta la posición en serie.
EL PRIMERO Y
EL ÚLTIMO
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
¡PARA PENSAR!
La siguiente imagen ¿A cuál de las siguientes leyes representa?
MULTIPLE CHOICE
CONTESTA LA ENCUESTA DE ZOOM
SI O NO
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break. 
Pregunta: La siguiente imagen ¿A cuál de las siguientes leyes representa? 
Opciones:
Ley de Fitts
Ley de Tesler
Ley de Miller
Ley de Kick
Efecto de posición de una serie
Efecto Von Restorff
SI O NO
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break. 
Pregunta: La siguiente imagen ¿A cuál de las siguientes leyes representa? 
Opciones:
Ley de Fitts
Ley de Tesler
Ley de Miller
Ley de Kick
Efecto de posición de una serie
Efecto Von Restorff
UI GUIDELINES
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.
Las guías de diseño son pautas o normativas generales para el diseño de interfaces. 
Estos lineamientos sirven para asegurar una coherencia visual entre la interfaz a diseñar y la plataforma en la que será implementada.
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.
Las pautas son indispensables para tomar decisiones correctas a la hora de diseñar interfaces.
Muchas veces nos indican que hacer o no hacer bajo ciertos parámetros.
Correcto
No hacerlo
Correcto
Utilice iconos que representen correcta y consistentemente la forma humano todo el tiempo.
No hacerlo
No use iconos que representen a la figura humana de manera completa o con demasiado detalle.
Correcto
La cantidad máxima de botones en el Tab-Bar es de 5 y el mínimo es de 3.
No hacerlo
En caso de no contemplar, al menos 3 botones en el tab-bar, considere usar “pestañas”.
Gracias a las nuevas tecnologías y los manuales de Apple y Google, el antiguo diseño web... 
¡tomó sentido!
VAMOS A VER CADA UNO DE ELLOS
El diseño de Material Design destaca por el uso de la profundidad, las superficies, los bordes y las sombras. 
Fue desarrollado por Google y anunciado en la conferencia Google I/O celebrada el 25 de junio de 2014.
¿CUÁNDO COMENZÓ?
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.
CARACTERÍSTICAS GENERALES
1
Uno de los elementos clave es la luz y las sombras. Una iluminación realista proporciona indicios de cómo se comportará un elemento y en qué nivel se encuentra.
LUZ Y SOMBRAS DAN
SENSACIÓN DE JERARQUÍA
2
Un objeto que parpadea significa que está llamando tu atención, un elemento que se expande es que se acaba de abrir.
EL MOVIMIENTO ES LA MEJOR FORMA DE GUIAR AL USUARIO
https://www.youtube.com/watch?v=rrT6v5sOwJg
Usar para slides de imagen completa.
MATERIAL LIGHT VS MATERIAL DARK
TIPOGRAFÍA Y TEXTO
GOOGLE MATERIAL
ICONOGRAFÍA
GOOGLE MATERIAL
Filled
Outlined
Correcto
Los iconos se aplican correctamente sobre una grilla cuadriculada.
No hacerlo
Los iconos no deben posicionarse en coordenadas fueran de la grilla cuadriculada.
Correcto
Usa un valor de trazo de linea consistente y con terminaciones rectas.
No hacerlo
No usar valores de trazo de linea diferente y con terminaciones curvas.
BOTONES
GOOGLE MATERIAL
1
2
3
Boton Flotante
El boton Flotante represente el primer nivel de acción en la pantalla.
Acción Especifica
El boton Flotantedebe realizar una acción especifica tal como crear, compartir o explorar algo.
Relevante
El boton Flotante debe ser relevante para la pantalla en donde aparezca.
COLORES
GOOGLE MATERIAL
Paleta de colores - Google Material
https://material.io/tools/color/
Correcto: Usa el color de acento para indicar o activar un destino.
No hacerlo: No uses diferentes color en los iconos, confunde al usuario. 
COMPONENTES
GOOGLE MATERIAL
App bars: TOP
Bottom Navigation
MATERIAL DESIGN TAMBIÉN MODIFICÓ SU ESTILO
Google presentó una nueva versión de Material (2018)
iOS Design
Apple creo sus primeros Guidelines en 1995 para Macintosh 
http://interface.free.fr/Archives/Apple_HIGuidelines.pdf
¿CUÁNDO COMENZÓ?
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.
CARACTERÍSTICAS GENERALES
1
El espacio negativo, el color, las fuentes, los gráficos y los elementos de la interfaz resalta sutilmente el contenido importante y transmiten interactividad.
CLARIDAD
2
Las capas visuales distintas y el movimiento realista transmiten jerarquía, imparten vitalidad y facilitan la comprensión. 
El tacto y la capacidad de detección aumentan el placer y permiten el acceso a la funcionalidad y al contenido adicional sin perder contexto. Las transiciones proporcionan una sensación de profundidad a medida que navega por el contenido.
PROFUNDIDAD
TIPOGRAFIA, TEXTO Y COLOR
HUMAN INTERFACE
ICONOGRAFIA
HUMAN INTERFACE
BOTONES
HUMAN INTERFACE
COMPONENTES
HUMAN INTERFACE
Navigation Bars
Navigation Bars
Tab Bars
Tool Bars
Action sheets
<
TENEMOS UNA SORPRESA
EN LA CARPETA DE LA CLASE: TENDRÁS LOS ELEMENTOS DE DISEÑO DE AMBOS SISTEMAS OPERATIVOS
Sistema de Diseño
Tendrás disponible en la carpeta de la clase un archivo de Figma o Adobe XD con las guías de estilo de ambos sistemas operativos. 
¿Por que lo vemos ahora? El objetivo fue que se centraran en incorporar los conceptos.
WIREFRAME Y GUIDELINES
Iterar el prototipo ajustando el diseño a las guías de estilo del sistema operativo.
	WIREFRAME Y GUIDELINES		
	Formato: Herramienta Adobe XD o Figma. Generar un nuevo archivo con el nombre “SistemaOperativo+Apellido”. Se puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o adjuntar el link directo en la entrega.
Sugerencia: activar comentarios en el archivo.		
	>> Consigna: Iterar el prototipo ajustando el diseño del wireframe a las guías de estilo del sistema operativo.
Aspectos a tener en cuenta en: IOS
- Botones:
1. Botón principal (vértices con curvas pronunciadas)
2. Botón Iconográfico
3. Botón Tipográfico
- Tipografia: San Francisco
- Iconografia de sistema: LINK
- Navegación: 
1. Navigation Bar: en aplicaciones particulares como calendario.
2. Tab Bar: navegación inferior.
3. Toolbar: en aplicaciones particulares como Safari, es parte de la app.
4. Action sheets: opciones de edición.		
	WIREFRAME Y GUIDELINES		
	Aspectos a tener en cuenta en: ANDROID
- Botones:
1. Boton flotante (elevado por sobre todo, suele ser redondo)
2. Boton contenido (rectangular con vértices con curvas poco pronunciadas)
3. Boton Tipografico
- Tipografia: Google Sans / Roboto
- Iconografia de sistema: LINK
- Navegación: 
1. App bars - TOP: siempre estructura la parte superior, siempre son de pleno de color y pueden ser más complejas si se incorpora el patrón pestañas.
2. Bottom Navigation: en aplicaciones particulares.
		
	WIREFRAME Y SISTEMA OPERATIVOS		
	Fidelidad del Prototipo:
1. Media/Alta de Contenido:
- Seguir incorporando contenidos reales al prototipo.
2. Media/Alta Visual:
- Con la definición de Guidelines el prototipo comienza a tener más definición visual y por lo tanto aumenta la fidelidad. 
3. Media de Funcionalidad:
- Se mantiene igual que la instancia anterior.
		
			
 ENCONTRAS UN EJEMPLO EN LA 
 CARPETA DE LA CLASE DE HOY 
¡IMPORTANTE!
Los desafíos tienen fecha de entrega 7 días después de finalizada la clase. Te sugerimos llevar las entregas al día. 
Usar para slides de sólo texto con el contenido más importante de la clase. En una presentación de 50 slides usar máximo 5 de estas.
¿QUERÉS SABER MAS? TE DEJAMOS BIBLIOGRAFÍA AMPLIADA DE LA CLASE 17
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.
Material Design: [https://material.io]
Human Interface: [Enlace]
Material complementario (en la carpeta de la clase de hoy)
ENLACES
Usar para que los estudiantes puedan explorar en sus casas los recursos vistos en clase: artículos, herramientas, websites, videos.
¿PREGUNTAS?
Obligatoria siempre.
¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy:
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.
OPINÁ Y VALORÁ ESTA CLASE
Obligatoria siempre.