Fase 2. Diseño
En la fase 1 obtuvimos:
Necesidades de negocio
Necesidades de usuarios
Entendimiento del problema
Lista de tareas a realizar
Storyboarding
Prototyping
Interactions
Design evaluation
Ahora nos enfocaremos en:
Storyboarding:
Representación gráfica de la secuencia cronológica de la historia escena por escena que nos ayudan a entender como se desarrolla una acción.
Sketch baja fidelidad:
Boceto rápido, tambien llamado wireframe, de la propuesta que entendemos como posible solución para hacer la idea más tangible.
Prototipo:
Simulación o versión muestra del producto final que sirve para evaluar ideas antes del desarrollo y lanzamiento del producto.
Antes de esto debemos...
Saber como organizar la información
Para organizar la información de forma lógica y funcional, tenemos que entender la arquitectura de información.
Arquitectura de información
La arquitectura de la información es el proceso de categorizar y organizar la información para crear estructura y significado.
Importante:
- Reducir la carga cognitiva para los usuarios, es decir, IU más comprensible
- Reducir clicks o tiempo para encontrar las cosas, navegación clara
- Información relevante dependiendo el contexto, jerarquización lógica de datos
Desde la perspectiva de la experiencia del usuario, esto significa comprender cómo piensan los usuarios, qué problemas están tratando de resolver y luego presentar la información de una manera lógica que tenga sentido dentro de este contexto.
1. Utiliza el template de arquitectura de información de Figma y organiza la infomación siguiendo el ejemplo
2. Exporta la imagen de la AI y súbelo a la carpeta [ ai ] del proyecto-app
Ejercicio - Arquitectura de información
Siguiente paso: User flow
TODO:
* Arquitectura de información
* User flow
Hasta ahora tenemos:
Siguiente: Prototipo
Accesibilidad
La accesibilidad web es la práctica inclusiva de garantizar que no haya barreras que impidan la interacción o el acceso a sitios web para cualquier persona, incluso para personas con discapacidades físicas, situacionales o para aquellos con restricciones socioeconómicas (ancho de banda y velocidad).
Cuando los sitios se diseñan y desarrollan correctamente, la información y la funcionalidad es igual para cualquiera y garantizamos que nuestro contenido llegue a un mayor número de usuarios.
Web Content Accessibility Guidelines (WCAG)
Las reglas de accesibilidad al contenido web (WCAG) se desarrollan a través de un proceso de cooperación con individuos y organizaciones de todo el mundo (W3C), con el objetivo de proporcionar un estándar de accesibilidad del contenido web que satisfaga las necesidades de individuos, organizaciones y gobiernos a nivel internacional.
Usabilidad
La usabilidad web es el grado de facilidad de uso que tiene una página web para los visitantes que entran e interactúan con ella.
Una web con una buena usabilidad es aquella que permite a los usuarios una interacción sencilla, intuitiva, agradable y segura.
¿Por qué es importante la accesibilidad y la usabilidad web?
Accesibilidad significa que todas las personas pueden percibir, comprender, navegar e interactuar con la información electrónica y ser miembros activos y contribuyentes del mundo digital.
Las discapacidades visuales, auditivas, físicas, del habla, cognitivas y neurológicas se deben tener en cuenta al implementar medidas de accesibilidad.
Si mejoramos la usabilidad, podemos lograr una mayor comunicación y feedback con el usuario, aumentar la duración que ellos invierten en nuestro contenido y facilitar que se familiaricen con su manejo, si este es fácil e intuitivo.
¿Cómo podemos hacer una página, diseño o contenido accesible?
Accesibilidad
La accesibilidad web es la práctica inclusiva de garantizar que no haya barreras que impidan la interacción o el acceso a sitios web para cualquier persona, incluso para personas con discapacidades físicas, situacionales o para aquellos con restricciones socioeconómicas (ancho de banda y velocidad).
Importante:
- Verificar el contraste de colores de textos con fuentes tipográficas con herramientas que nos permitan cumplir con el estándar de accesibilidad web.
- Tamaño de fuentes tipográficas legibles en cualquier dispositivo y espacio blanco.
Cuando los sitios se diseñan y desarrollan correctamente, la información y la funcionalidad es igual para cualquiera y garantizamos que nuestro contenido llegue a un mayor número de usuarios.
¿Cómo?
Herramientas:
Herramientas útiles para medir el contraste entre elementos y tamaño de fuentes tipográficas.
Ejercicio:
- Van a utilizar las herramientas vistas en el slide anterior y comprobar si existe algún problema de accesibilidad de los mencionados previamente.
1. Identificar
- Sugerir una solución utilizando las herramientas presentadas previamente.
2. Solucionar
Usabilidad
La usabilidad web es el grado de facilidad de uso que tiene una página web para los visitantes que entran e interactúan con ella.
Una web con una buena usabilidad es aquella que permite a los usuarios una interacción sencilla, intuitiva, agradable y segura.
Importante:
- Estructura lógica de contenido, textos claros y acciones claras.
¿Cómo?
Otras herramientas:
Herramientas útiles para identificar problemas de usabilidad:
TODO:
Van a utilizar las herramientas vistas previamente para verificar algún problema de accesibilidad y usabilidad en su diseño (proyecto App CENTRO) referente a contraste, tipografía, estructura de lógica de información, espaciado para implementar los cambios.
Documentar sus cambios en (branch: proyecto-app) en un folder llamado a11 y el documento accesibilidad.md
Design UX Tips al trabajar en Figma
* Agrupar elementos dentro de su contenedor/componente
* Utilizar vectores para tener mas control sobre el diseño final
* Utilizar AutoLayout para alinear elementos y no perder la composición
* Ignorar las limitantes de resizing utilizando la tecla command
* Utiliza el formato predeterminado utilizando la guía de estilos
* Utiliza gifs para las animaciones complejas/personalizadas
* Utiliza los componentes y variantes DRY
* Utiliza corner radius, drop shadow para mejorar el UI
* Utiliza prototype para crear interacciones, flujos y efectos de scrolling
* Agrupa elementos de acuerdo a su composición (Frame o Group)
* Utiliza el panel de Layers para copiar y pegar elementos
Motion Design & UX
Motion Design ayuda a mejorar la usabilidad de cualquier interfaz de usuario a través del comportamiento (animación) de elementos.
El movimiento y la animación pueden ser útiles y comunicativos, si se usan con moderación como forma de retroalimentación sutil a través de microinteracciones.
Una ventaja del movimiento de la interfaz de usuario es que atrae la atención del usuario y es muy funcional para indicar acciones que debe tomar el usuario.