# Ingeniería de Software ## Prototipado Created by <i class="fab fa-telegram"></i> [edme88]("https://t.me/edme88") --- ## Interfaz de Usuario Es el medio con que el usuario puede comunicarse con una máquina, equipo, computadora o dispositivo, y comprende todos los puntos de contacto entre el usuario y el equipo. Incluyen elementos como menús, ventanas, contenido gráfico, cursor, etc. --- ## Proceso de Diseño de Interfaz de Usuario Proceso iterativo donde los usuarios interactúan con los diseñadores y prototipados de la interfaz para decidir las características, organización, apariencia y funcionamiento de la interfaz de usurio del sistema. --- ## Proceso de Diseño de Interfaz de Usuario  --- ## Tipos de Prototipo <!-- .slide: style="font-size: 0.85em" --> * Baja Fidelidad: Conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas en aspectos generales, sin entrar en detalle. * Sketch * Wireframe * StoryBoard * Alta Fidelidad: Se representan aspectos más precisos. Sirven para detallar el proceso interactivo de una o varias tareas. * Mockup * Prototipo --- ## Tipos de Diseño * Sketch * Thumbnail Sketches * Wireframe * StoryBoard * Mockup * Prototipo --- ## Sketch  --- ## Sketch * Es un bosquejo o dibujo rápido e informal * No tiene muchos detalles * Guía general que reproduce un concepto o idea de un proyecto de una manera sencilla * Se realiza a mano con lápiz y borrador --- ## Thumbnail Sketches Secuencia de Sketchs que muestran cómo se realiza una tarea.  --- ## Ejercicio: Sketch <!-- .slide: data-background="images/interfazUsuario/sketch-fondo.jpg" style="font-size: 0.85em" --> Realice Sketchs formando un 'Thumbnail Skeths' de la interfaz de usuario de los sistemas en papel. Debe tener en cuenta: * ¿Qué opciones debe ofrecer al usuario? * ¿Qué campos hay para ingresar datos? * Sistemas similares ¿Qué opciones ofrecen? * ¿Qué acciones le permiten al usuario realizar? * Mensajes de Error --- ## Wireframe  --- ## Wireframe * Es una representación estática en baja calidad de un diseño * Esta representación muestra: * Principales grupos de contenido * Estructura de la información * Descripción y visualización básica del usuario * Interacción de la interfaz * Representación de cada parte importante del producto final * El entregable es una imagen --- ## StoryBoard o WireFlows <!-- .slide: style="font-size: 0.75em" --> Secuencia de wireframes que muestran cómo se realiza una tarea.  --- ## Mockup  --- ## Mockup  --- ## Mockup * Representación estática de un diseño en calidad media o alta * Representa la estructura de la información * Visualiza el contenido * Demuestra las funcionalidades básicas de una manera estática * El entregable es una imagen. --- ## Prototipo  --- ## Prototipo * La calidad pueda variar entre media y alta * Representación navegable del producto final * Simula la interacción interfaz de usuario * Permitir que el usuario: * Experimente interactuando con la interfaz y contenido del proyecto * Pruebe las principales interacciones de una manera similar al producto final * El entregable es un HTML, PPT, Animación o formato navegable. --- <!-- .slide: style="font-size: 0.85em" --> ## Utilización de Técnicas de Diseño #### Ventajas: * Definir funcionalidades del proyecto * Mejora la comunicación entre el equipo de desarrollo y los usuarios * Definir el recorrido del usuario (work flow) * Permite mostrar al usuario el sistema y recibir un feedback temprano * Método intuitivo para identificar características y requerimientos * Mejoran la calidad y la completitud de las especificaciones funcionales del sistema. --- ## Ventajas del Pre-Diseño * El equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual. * El cliente ve y comprende cómo será la aplicación, mucho mejor que si se ofrece descrita en un documento. * Evita malentendidos entre el equipo de desarrollo y el cliente. * Ayuda a especificar los requerimientos y a detectar inconsistencias o falta de funcionalidad. * Complemento para el análisis. --- ## Ventajas del Pre-Diseño * Se puede modificar el diseño con facilidad y rapidez. * Se evitan modificaciones posteriores mucho más costosas cuando la aplicación ya está implementada. * Se reduce costo y tiempo. --- ## Ventajas del Pre-Diseño * Permite realizar pruebas de usabilidad, como test con usuarios, en etapas tempranas del proyecto. * Se detectan y solucionan los problemas antes de comenzar su implementación. * El resultado son aplicaciones web más fáciles de entender, de usar y se ajustan mejor a las necesidades de los usuarios. --- ## Proceso de Prototipado de la IU 1. **Prototipo en papel:** Maquetas de los diseños de pantalla 2. **Prototipo Automatizado:** Permite al usuario realizar pruebas y simulación --- ## Comparación  --- ## Antes de dibujar... * Realizar entrevistas con el cliente y el equipo de desarrollo para definir los requisitos, los objetivos y el público objetivo. * Analizar la web actual (si existe): problemas de usabilidad y accesibilidad, estadísticas de acceso, test con usuarios y encuestas. * Benchmarking, estudio comparativo de la competencia. * Definir de la arquitectura de informacón y mapa web. --- ## Evaluación de la Interfaz Proceso de evaluar la forma en que se utiliza una interfaz y verificar que cumple los requerimientos del usuario. Es parte del proceso de verificación y validación de los sistemas software. --- ## Evaluación de la Interfaz  --- ## Información en un wireframe <!-- .slide: style="font-size: 0.90em" --> * **Inventario de contenido:** Contenido que debe estar presente en cada página * **Elementos de la página:** Cabeceras, enlaces, listas, imágenes, formularios, etc. * **Etiquetado:** De vínculos, títulos, etc. * **Layout:** Ubicación, colocación y agrupación de los elementos de la página cabeceras, pies, navegación, áreas de contenido, titulares, etc.) * **Comportamiento:** Notas asociadas a los elementos para indicar cómo se deben mostrar o el comportamiento funcional cuando se activa. --- ## Ejemplo de wireframe  --- ## Ejercicio: Wireframe <!-- .slide: style="font-size: 0.80em" --> Emplee algún programa para confeccionar Wireframes ó y generar un wireflow para los sistemas de la GTP. [](https://www.figma.com/) [](https://www.adobe.com/la/products/xd/pricing/individual.html) [](https://moqups.com/) [](https://ninjamock.com/Designer/NewWorkplace/WebProject/napkin/0/Page1) [](https://pencil.evolus.vn/)  --- #### Errores comunes al crear un Wireframe para nuestro proyecto web * No indicar campos obligatorios * No describir el flow normal (que botón o link me lleva a donde) * Texto que indique cuál es la finalidad de la página * No especificar mensajes de error --- <!-- .slide: data-background="images/interfazUsuario/prototipado-de-paginas-web.jpg" --> <h3 style="text-shadow: -1px -1px 1px #73a4f6, 1px 1px 1px #000, -1px 1px 1px #c1ebeb, 1px -1px 1px #000;"> “Es mejor diseñar la experiencia del usuario que rectificarla.”</h3> --- ## ¿Dudas, Preguntas, Comentarios?