4ta Entrega de Proyecto Final

Vista previa del material en texto

RÚBRICA DE EVALUACIÓN DE ENTREGAS DEL PROYECTO FINAL
Diseño UX/UI Online
Una rúbrica es un conjunto de criterios y normas que sirven para evaluar el nivel de desempeño en una tarea. Es una herramienta de calificación que simplifica la tarea de corrección y permite lograr una evaluación más objetiva y transparente tanto para el evaluador como el evaluado.
Adicionalmente, la rúbrica ayuda a igualar y alinear los criterios de evaluación entre los diferentes docentes y tutores.
En resumen, la rúbrica:
1. Define los criterios de evaluación de cada entrega de proyecto final.
2. Describe y detalla los puntos clave que debe tener cada entrega.
3. Facilita y transparenta la corrección de cada trabajo. 
4TA ENTREGA DEL PROYECTO FINAL
Componentes:
1. Wireframe/Prototipado de media fidelidad
2. Conclusiones de las pruebas de usabilidad
Objetivos Generales:
Integrar todos los desafíos entregables del proyecto. 
Chequear y revisar el proyecto.
Generar, en forma de presentación, el detalle de los desafíos anteriores.
Objetivos Específicos:
Presentar el prototipo en fidelidad media visual, contenido y funcionalidad. El objetivo es poder recorrer el prototipo completo y completar la tarea principal propuesta en el userflow. 
Evidenciar lo importante de completar un ciclo de DCU (Analizar, Diseñar y Evaluar).
Se debe entregar:
URL al Figma o Adobe XD con el Prototipo funcional. El prototipo debe evidenciar correctamente la incorporación de grilla y atomic design.
Incluir los resultados más relevantes de las Pruebas de Usabilidad.
RÚBRICAS DE EVALUACIÓN
4TA ENTREGA DEL PROYECTO FINAL
	Desafío: Prototipo de Baja Fidelidad
	Criterios (además de los de la clase pasada, se agregan algunos más)
	Bajo
Falta más profundización. Es confuso.
	Correcto
Acorde pero con errores puntuales.
	Óptimo
Es claro y pertinente.
	Resolución general del prototipo (usabilidad)
	-El prototipo es confuso. 
-No se observa un salto cualitativo en la iteración del prototipo. Esto se debe a que no se ha realizado la evaluación heurística, las pruebas de usabilidad en busca de conclusiones para mejorar el prototipo. 
-Los patrones de diseño se deben ajustar también. 
-La cantidad de pantallas son escasas y quedan algunos recorridos sin desarrollar.
	-El prototipo es correcto. 
-Si bien hay un salto en la iteración del prototipo aún existen temas particulares que se deben revisar. -Esto se debe a que la evaluación heurística y las pruebas de usabilidad no tienen conclusiones claras, posiblemente se deban ajustar también los patrones de diseño.
- La cantidad de pantallas no son suficientes para comprender el recorrido de los usuarios por la interfaz.
	- El prototipo es claro. 
- Se observa un salto cualitativo en la iteración a partir de las conclusiones de la evaluación heurística, las pruebas de usabilidad, de los patrones de diseño y de la especificidad del sistema operativo. 
- La cantidad de pantallas son suficientes para comprender el recorrido de los usuarios por la interfaz.
	Sistema de Grilla
	El sistema de grilla presenta inconvenientes graves, lo que genera que los componentes no se puedan organizar y alinear en columnas de manera correcta. Esto se debe a que la mayoría de los siguientes ítems no está siendo tenido en cuenta:
1. Componentes: o exceden el límite de la columna o no llegan a los márgenes del mismo. 
2. Calles: Las calles entre columnas es mayor al ancho de margen izquierdo y derecho.
3. Separación Vertical: No se tienen presente la separación mínima entre componentes de 11 para IOS y 8 para Android.
4. Margen Izquierdo y Derecho Mínimo: No se respetan los mínimos de márgenes izquierdo y derecho de 16 para Android y 18 para IOS.
5. Jerarquías: No se observa claramente las jerarquías definidas por la cantidad de módulos ocupados.
	El sistema de grilla aún presenta algunos inconvenientes, si bien la cantidad de columnas es correcta se observa alguno de los siguientes problemas:
1. Componentes: o exceden el límite de la columna o no llegan a los márgenes del mismo. 
2. Separación Vertical: No se tienen presente la separación mínima entre componentes de 11 para IOS y 8 para Android.
3. Margen Izquierdo y Derecho Mínimo: algunos componentes no respetan los mínimos de márgenes izquierdo y derecho de 16 para Android y 18 para IOS.
	Se aplica de manera correcta el sistema de grilla elegido. El mismo permite que cada uno de los componentes se organice y alinea a las columnas. Esto se debe a que se tiene presente cada uno de los siguientes puntos:
1. Componentes: ocupan el ancho correspondiente a las columnas y no usan los espacios de margen izquierdo y derecho.
2. Calles: es menor al ancho de margen izquierdo y derecho.
3. Separación Vertical: se tienen presente la separación vertical mínima entre componentes de 11 para IOS y 8 para Android.
4. Margen Izquierdo y Derecho Mínimo: se respetan los mínimos de márgenes izquierdo y derecho de 16 para Android y 18 para IOS.
5. Jerarquías: se observa claramente las jerarquías definidas por la cantidad de módulos ocupados.
	Patrones de Diseño y Sistema Operativo
	Los patrones de diseño presentan problemas al no usar correctamente en patrón en relación al sistema operativo. Esto se debe a que 2 de los 6 ítem son respetados, teniendo que ajustar los otros 4:
1. TAB BAR:
	Android
	IOS
	
	
2. PESTAÑAS:
	Android
	IOS
	
	
3. BOTONES:
	Android
	IOS
	
	
4. BACK:
	Android
	
	IOS
	
5. ESTRUCTURA:
	Android
	IOS
	
	
6. NOTIFICACIONES:
	Android
	IOS
	
	
	Los patrones de diseño aún se deben ajustar. Esto se debe a que 4 de los 6 ítem son respetados, teniendo que ajustar los otros 2:
1. TAB BAR: confunde Android con IOS.
	Android
	IOS
	
	
2. PESTAÑAS: confunde Android con IOS.
	Android
	IOS
	
	
3. BOTONES: confunde Android con IOS.
	Android
	IOS
	
	
4. BACK: confunde Android con IOS.
	Android
	
	IOS
	
5. ESTRUCTURA: confunde Android con IOS.
	Android
	IOS
	
	
6. NOTIFICACIONES: confunde Android con IOS.
	Android
	IOS
	
	
	Los patrones de diseño son claros y acordes al sistema operativo elegido, ya que respeta los 6 puntos que se enuncian a continuación.
1. TAB BAR:
	Android
	IOS
	
	
2. PESTAÑAS:
	Android
	IOS
	
	
3. BOTONES:
	Android
	IOS
	
	
4. BACK:
	Android
	
	IOS
	
5. ESTRUCTURA:
	Android
	IOS
	
	
6. NOTIFICACIONES:
	Android
	IOS
	
	
	Organización de layers y espacio de trabajo
	El archivo de Figma o Adobe XD tiene los siguientes problemas:
1. Cada uno de los frames NO tiene un nombre que lo identifica.
2. En los casos donde es una secuencia de pantallas las pantallas no están numeradas (ej: onboarding 1 - onboarding 2).
3. Cada uno de los componentes NO tiene un nombre que lo identifica
4. Los componentes NO están organizados en los layers correspondientes. 
	El archivo de Figma o Adobe XD presenta más de uno de los siguiente problemas: 
1. Cada uno de los frames NO tiene un nombre que lo identifica.
2. En los casos donde es una secuencia de pantallas las pantallas no están numeradas (ej: onboarding 1 - onboarding 2).
3. Cada uno de los componentes NO tiene un nombre que lo identifica
4. Los componentes NO están organizados en los layers correspondientes. 
	El archivo de Figma o Adobe XD es correcto ya que:
1. Cada uno de los frames tiene un nombre que lo identifica.
2. En los casos donde es una secuencia de pantallas cada una está numerada (ej: onboarding 1 - onboarding 2).
3. Cada uno de los componentes tiene un nombre que lo identifica.
4. Los componentes están organizados en los layers correspondientes. 
	Componentes de interacción: botones, inputs (formulario o carga de información)
	El prototipo presente problemas en el uso de los componentes de interacción ya que presenta varios de los siguientes problemas:
1. Los botones e inputs tienen el área mínima necesaria para poder interactuar (44 en IOS - 46 en Android).
2. Se aplican los conceptos de Atomic design en cada uno de los componentes de interacción (el botón está compuesto por un título y un contenedor,el mismo se agrupa para generar el botón, por último este componente se relaciona con otros).
	El prototipo aún debe mejorar ya que alguno de los siguientes puntos no están siendo correctamente utilizados: 
1. Los botones e inputs tienen el área mínima necesaria para poder interactuar (44 en IOS - 46 en Android).
2. Se aplican los conceptos de Atomic design en cada uno de los componentes de interacción (el botón está compuesto por un título y un contenedor, el mismo se agrupa para generar el botón, por último este componente se relaciona con otros).
	El prototipo es correcto ya que: 
1. Los botones e inputs tienen el área mínima necesaria para poder interactuar (44 en IOS - 46 en Android).
2. Se aplican los conceptos de Atomic design en cada uno de los componentes de interacción (el botón está compuesto por un título y un contenedor, el mismo se agrupa para generar el botón, por último este componente se relaciona con otros).
	Componentes de contenido: títulos, párrafos, tarjetas
	El prototipo presente problemas en el uso de los componentes de interacción ya que presenta varios de los siguientes problemas:
1. Los títulos NO tienen contenido real y relacionado con el proyecto.
2. No hay párrafos compuestos por el uso del “lorem ipsum”. 
3. NO se aplican los conceptos de Atomic design en cada uno de los componentes de contenido (las tarjetas están compuestas por la relación entre un título y un párrafo de texto, en algunos casos se incorpora el componente botón).
	El prototipo aún debe mejorar ya que alguno de los siguientes puntos no están siendo correctamente utilizados: 
1. Los títulos tienen contenido real y relacionado con el proyecto.
2. Los párrafos están compuestos por el uso del “lorem ipsum”. 
3. Se aplican los conceptos de Atomic design en cada uno de los componentes de contenido (las tarjetas están compuestas por la relación entre un título y un párrafo de texto, en algunos casos se incorpora el componente botón).
	El prototipo es correcto ya que:
1. Los títulos tienen contenido real y relacionado con el proyecto.
2. Los párrafos están compuestos por el uso del “lorem ipsum”. 
3. Se aplican los conceptos de Atomic design en cada uno de los componentes de contenido (las tarjetas están compuestas por la relación entre un título y un párrafo de texto, en algunos casos se incorpora el componente botón).
	Componentes de navegación:
tab-bar
	El prototipo presente problemas en el uso de los componentes de interacción ya que presenta varios de los siguientes problemas:
1. El tab-bar NO cumple con el mínimo de tres y el máximo de 5 elementos de acceso rápido. 
2. NO tienen el área mínima necesaria para poder interactuar (44 en IOS - 46 en Android).
3. NO se incorpora la palabra correspondiente al icono por accesibilidad.
	El prototipo aún debe mejorar ya que alguno de los siguientes puntos no están siendo correctamente utilizados: 
1. El tab-bar cumple con el mínimo de tres y el máximo de 5 elementos de acceso rápido. 
2. Tienen el área mínima necesaria para poder interactuar (44 en IOS - 46 en Android).
3. Se incorpora la palabra correspondiente al icono por accesibilidad.
	El prototipo es correcto ya que:
1. El tab-bar cumple con el mínimo de tres y el máximo de 5 elementos de acceso rápido. 
2. Tienen el área mínima necesaria para poder interactuar (44 en IOS - 46 en Android).
3. Se incorpora la palabra correspondiente al icono por accesibilidad.
	Componentes visuales: iconos
	El prototipo presente problemas en el uso de los componentes de interacción ya que presenta varios de los siguientes problemas:
1. Los iconos utilizados NO corresponden al sistema operativo elegido.
2. Los iconos NO son claros y NO son de fácil entendimiento.
3. No tienen el área mínima necesaria para poder interactuar (44 en IOS - 46 en Android). 
	El prototipo aún debe mejorar ya que alguno de los siguientes puntos no están siendo correctamente utilizados: 
1. Los iconos utilizados corresponden al sistema operativo elegido.
2. Los iconos son claros y de fácil entendimiento.
3. Tienen el área mínima necesaria para poder interactuar (44 en IOS - 46 en Android). 
	El prototipo es correcto ya que:
1. Los iconos utilizados corresponden al sistema operativo elegido.
2. Los iconos son claros y de fácil entendimiento.
3. Tienen el área mínima necesaria para poder interactuar (44 en IOS - 46 en Android). 
	Desafío: Conclusiones de las pruebas de usabilidad
	Criterios 
	Bajo
Falta más profundización. Es confuso.
	Correcto
Acorde pero con errores puntuales.
	Óptimo
Es claro y pertinente.
	Evidencia de errores
	· Poco o nulo registro de evidencias claras de aquellas tareas que fueron realizadas correctamente de aquellas en contraposición de aquellas que no. 
· Poco o nulo registro de errores durante la prueba de usabilidad
· No acompaña o registra el análisis de lo anteriormente nombrado en conjunto de un apoyo del wireframe en donde se producen los errores. Tampoco estos aparecen por separado.
	· Poco a medio registro de evidencias claras de aquellas tareas que fueron realizadas correctamente en contraposición de aquellas que no. (ideal marcar con un color como se mostró en la clase).
· Poco a medio registro de errores durante la prueba de usabilidad
· Acompaña o registra el análisis de lo anteriormente nombrado en conjunto del apoyo de algunos wireframes en donde se producen los errores. Tampoco estos aparecen por separado
	· Alto grado de registro de evidencias claras de aquellas tareas que fueron realizadas correctamente en contraposición de aquellas que no. (ideal marcar con un color como se mostró en la clase).
· Alto grado de registro de errores durante la prueba de usabilidad
· Acompaña o registra el análisis de lo anteriormente nombrado en conjunto del apoyo de varios wireframes en donde se producen los errores. Tampoco estos aparecen por separado
	Propuestas de mejora
	· Al no mostrar evidencias claras, tampoco presenta propuestas de mejoras que ofrezcan solución a dichos problemas.
	· Presenta algunas propuestas de mejora. Pero no logra evidenciar del todo en qué consisten.
· Algunas propuestas no están tan relacionadas con las evidencias, debería reformular.
· No llega a mostrar del todo, o muestra muy poco, un wireframe terminado con la mejora que se necesitaba realizar.
	· De acuerdo a las evidencias, presenta mejoras que atienden a solucionar los inconvenientes de forma clara.
· Muestra a través de la utilización de Wireframes, como se vería reflejada esa mejora.