C5 prototipo diu_mododecompatibilidad_

362 views
279 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
362
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

C5 prototipo diu_mododecompatibilidad_

  1. 1. Diseño de Interfaces de Usuarios IU a la fama o la vergüenza? Diseño de Interfaces Profesor: de Usuarios Diaz Muñante Jorge Ciclo 2012-1 Prototipos ¿Qué paso en las ultimas elecciones presidenciales? ¿Que es un prototipo? Documento que simula el aspecto y/o el funcionamiento del sistema final. Proporciona las primeras versiones de los componentes del sistema realizados simplemente con lápiz y papel, herramientas de diagramación y diseño gráfico, herramientas de desarrollo, vídeo, etc. Se llegará al prototipo final a partir de varias interacciones prototipado evaluación. ¿Qué Características Presenta? ¿Por qué es útil? El prototipo es un modelo funcional. Permite brindar al usuario un enfoque claro de cómo va a funcionar el sistema y con que herramientas va a contar. Los prototipos son creados en forma rápida. Los prototipos solo poseen las características más Puede utilizarse para realizar pruebas y Realimentacion. importantes del diseño y algunas otras sobre las cuales se desean hacer pruebas especiales. Permiten detectar fallas antes de realizar el codigo. Los prototipos van evolucionando conforme se desarrolla el sistema, es decir, es un proceso iterativo. Al ser funcional puede estar operativo mientras se termina. Los prototipos tienen un bajo costo de desarrollo. Los Prototipos Generan ideas nuevas sobre el producto. Los prototipos no terminan siendo el producto final. Permiten ahorrar tiempo y dinero. Nos permite corregir, anexar o modificar el diseño.Diaz Muñante Jorge 1
  2. 2. Diseño de Interfaces de Usuarios Prototipeo Ventajas y Desventajas de usar Prototipeo Al principio del Diseño Ventajas: Representaciones diferentes Prototipos en Papel – Tranquilidad del Usuario. de tormentas de ideas (Baja fidelidad) – Reducción del Costo de Desarrollo e implementación. Escoger una representacion – Establece una mejor comunicación con los usuarios. Estilo de interfaz Ordinario Analisis de Tareas y Rediseño – Reduce el Tiempo requerido. – Mejora la calidad del producto final. Interfaz afinado, diseño de pantallas Prototipos de mediana – No se necesita muchos elementos. Evaluación Heurísticas y rediseño Fidelidad Pruebas de Usabilidad y Rediseño Prototipos de alta fidelidad Desventajas: – Empleo de recursos de un producto que no será el final. Pruebas Limitadas en el campo Sistemas trabajando – Debido al tiempo empleado puede reducirse las capacidades del producto. Pruebas Alfa y Betas – El cliente puede sentirse satisfecho y no realizar el producto final. Al final del diseño – Se requiere total participación de parte del usuario. FIDELIDAD EN PROTOTIPEO PROTOTIPOS DE BAJA FIDELIDAD Se dice Fidelidad al nivel de detalle que presenta el nEste tipo de prototipos son hechos en papel, que prototipo. muestran la apariencia, el sentido y la funcionalidad Existen 3 tipos y son: de la interfaz del Usuario. Además tiene como característica el ser rápidas y de menor costo. – Alta Fidelidad: Los Prototipos se parecen al producto final. – Fidelidad Media: Permiten refinar el diseño. – Baja Fidelidad: Se desarrolla con escasos detalles. PROTOTIPOS DE BAJA FIDELIDAD. PROTOTIPOS DE BAJA FIDELIDAD. Permite hacer una representación de las tormentas de ideas. n Basados en papel Permite apreciar las reacciones de los usuarios. n Un papel borrador de cómo ver, percibir la funcionalidad No se necesita mucho tiempo y no se requiere un equipo n Sketches costoso. n Dibujo de la apariencia externa del sistema futuro Usan limitadas características. n Enfocar la progresión del diálogo Permite mejorar la calidad del producto n Historietas (storyboards) Todas las interacciones pueden ser simuladas. n Una secuencia de partes importantes. Se necesita de al menos una persona que conozca n Originalmente parte de una película, usado para dar una idea de la escena. concienzudamente el producto. n Foto de un punto particular de la interacción de la interfaz. n Usuarios pueden evaluar rapidamente la dirección de la interfaz es correcta.Diaz Muñante Jorge 2
  3. 3. Diseño de Interfaces de Usuarios Prototipo de papel Prototipo de papel – cómo se hace Este tipo de prototipo se basa en la utilización de Para poder simular las diferentes interacciones que papel, tijeras, lápiz o instrumentos que se puedan vamos a realizar con el sistema, realizaremos una utilizar para describir un diseño en un papel hoja para cada uno de los diferentes escenarios que Este sistema nos permite una gran velocidad y vamos a tener como resultado de las diferentes flexibilidad interacciones que podemos realizar Apilaremos estas hojas que nos permitirán simular la aplicación Prototipo de papel – cómo se usa Evaluación del prototipo Para utilizar el prototipo de papel nos situaremos en un escenario de uso de futuro en el que el diseñador actúa como coordinador El prototipo será analizado por un posible usuario e intentará realizar algunas de las tareas que se pretende diseñar En voz alta se irán realizando las interacciones y le iremos cambiando las hojas de papel en función de las interacciones que vaya realizando Prototipo de papel – ventajas Escenarios El coste es muy reducido, necesitando únicamente los Los prototipos resuelven tareas determinadas planteadas en un escenario. recursos humanos dedicados a la realización del prototipo Escenario: Los cambios se pueden realizar muy rápidamente y sobre la – Un escenario es una historia de una interacción que realiza un marcha. Si el diseño no funciona se pueden reescribir las personaje en un entorno determinado para resolver una tarea. hojas erróneas o rediseñarlas y volver a probar la tarea a Nos permite definir y desarrollar conocimientos sobre el entorno del realizar usuario y su entorno de trabajo. Es importante pensar en varios escenarios para reflejar las distintas Los usuarios o los actores se sienten más cómodos para situaciones y puntos de vista. poder realizar críticas al diseño debido a la sencillez del Cumplen una función múltiple: mismo por lo que no se sienten cohibidos a dar sus opiniones – Describir el mundo del usuario tal y como existe ahora para conocer mejor su forma de trabajo: escenario de tareas. – Describe el mundo del usuario en un futuro cuando trabaje con el sistema interactivo: escenario de futuro.Diaz Muñante Jorge 3
  4. 4. Diseño de Interfaces de Usuarios Escenarios … Escenarios … Ejemplo de escenario. Los escenarios presentan distintos elementos: El alumno X está dentro de la Universidad y desea conocer – Un decorado. todas las notas de los cursos en las que está matriculado en • El ambiente donde está la PC con la consulta de notas con el la PC que para tal efecto está alojada en uno de los edificios alumno situado delante. de l a facultad. – Uno o más actores o agentes. Para ello, se dirige a la PC e introduce su código de matricula • El alumno que busca sus notas. en la pantalla de entrada a la aplicación. X está despistado y se equivoca al introducir el número, por lo que la aplicación – Metas u objetivos. le advierte y le invita a introducir el código de matricula de • Cambios que los agentes esperan conseguir dentro del decorado. nuevo. • La consulta de las notas de todas los cursos en las que está Una vez se ha identificado de forma adecuada se muestra la matriculado. pantalla con las notas. – Una trama. Después se va, dejando la pantalla con sus notas. – Las acciones que realiza el agente como consecuencia de su actividad mental: planes, evaluación del comportamiento del escenario, etc. Escenarios .. Representación de escenarios Permiten explicitar el uso del sistema. Storyboard. Orienta el análisis y el diseño del sistema. – Un guión en forma de viñetas que refleje la interacción y el recorrido de las distintas pantallas. – Modificar el foco de atención hacia las personas y las tareas que realizan en la aplicación. – Es una narración gráfica de una historia en cuadros consecutivos. Representación de escenarios. – Reflejan la navegación entre las distintas pantallas – De forma narrativa. realizadas por interacciones de los usuarios. – Mediante un diagrama de flujo. – Mediante storyboard. – Vídeos. Ejemplo Sketches Historietas (storyboards)Diaz Muñante Jorge 4
  5. 5. Diseño de Interfaces de Usuarios Historietas (storyboards) Ejemplo Adicionar una conducta... Transforma en ..... Ejemplo. Sketch a historieta Ejemplo. Sketch a historieta Directorio Telefonico Directorio Telefonico Apellidos : _______________ Apellidos : ______________ Primer Nombre : _______________ Primer Nombre : ______________ Sketch historieta Telefono : _______________ Telefono : ______________ Realizar la llamada Ayuda Realizar la llamada Ayuda Ayuda ----)Diaz Muñante Jorge 5
  6. 6. Diseño de Interfaces de Usuarios Ejemplo. Sketch a historieta Ejemplo. Sketch a historieta Ayuda Directorio Telefonico Usted puede ingresar el nombre de la Apellidos : _____________ persona o su numero. Luego accionar Primer Nombre : Claudia historieta historieta el boton para realizar la llamada Telefono : _____________ Retornar Realizar la llamada Ayuda Llamar por nombre Establecer conexion Ejemplo. Sketch a historieta Ejemplo. Sketch a historieta Directorio Telefonico Directorio Telefonico Apellidos: Sharoon ... Apellidos: Sharoon ... Marcando Conectado Primer Nombre Primer Nombre historieta historieta Telefono Telefono Cancel Cancelar Cancel Levantar Realizar la llamada Ayuda Realizar la llamada Ayuda En progreso Llamada completada Representacion de escenarios .. Ejemplo de escenario El alumno Juan de los Palotes desea ver consultar la nota de las asignaturas de Teleinformática y de Transmisión de datos. Bertín está en un edificio alejado de la máquina para las notas, por lo que decide conectarse por medio de su PDA con PocketPc a través de la red Wifi de la universidad. Existe una aplicación cliente que lee las notas de la base de datos de la universidad por la red Wifi que precisa introducir su número de identificación (bertin.osborne) y su contraseña (abcedf). El alumno nunca se acuerda si tiene una f final o no y decide probar primero con abced. La contraseña es errónea y necesita introducirla de nuevo. Una vez identificado correctamente le aparece una lista con todas las asignaturas en las que está matriculado y debe seleccionar alguna de las que quiere comprobar (la 205) por lo que la marca y pulsa el botón Aceptar. La pantalla muestra la asignatura, y comprueba que todavía no está la nota del último examen que hizo de la asignatura. Como recuerda que la siguiente nota de la sita es Transmisión de Datos, decide ir a la siguiente asignatura con el botón Siguiente, en lugar de volver a la pantalla de las asignaturas. Por último cierra la aplicación cliente.Diaz Muñante Jorge 6
  7. 7. Diseño de Interfaces de Usuarios Ejemplo de escenario .. Evaluacion del prototipo Se debe preparar el material con todas las pantallas con los elementos fijos apilados y los elementos de la interfaz que se utilizan para la interacción preparados. Evaluacion del prototipo .. Evaluacion del prototipo … Es necesario pensar en todas las tareas que el El facilitador o guía explica al usuario el cometido del test. usuario deberá realizar. Una a una, le explica al usuario las tareas que debe realizar. – 1. Introducir una identificación errónea. El usuario interactúa con la interfaz (señalando con el dedo, – 2. Salir de la pantalla de error. escribiendo los datos de entrada, explicando con palabras su interacción). – 3. Seleccionar la asignatura de Teleinformática de la pantalla de asignaturas. Uno o más componentes del equipo irán modificando los elementos que indique al usuario, simulando las reacciones – 4. Desde la pantalla con los datos de la asignatura de del computador a las interacciones del usuario. Teleinformática ir a la asignatura de Transmisión de datos. Uno o más componentes del equipo actúan como • a. Volviendo a la pantalla de asignaturas. observadores anotando las incidencias o, mejor aún, • b. Mediante el botón “Siguiente”. filmando la prueba. – 5. Salir de la aplicación. Ejemplo Ejemplo .. Presentación. Perdón, me equivoqué, su contraseña es abcdef. – Usted desea consultar sus notas de Teleinformática y Transmisión de datos mediante una PDA conectada a la red Wifi de la Universidad. Su nombre de usuario es bertin.osborne y su contraseña es abcde.Diaz Muñante Jorge 7
  8. 8. Diseño de Interfaces de Usuarios Ejemplo .. PROTOTIPOS DE FIDELIDAD MEDIA Ahora desea ver la nota de Transmisión de datos (esa n Desde este punto se emplea la computadora entre otras herramientas de asignatura está situada a continuación de Teleinformática) diseño para simular la mayor parte de las características deseadas. n Brinda un pequeño escenario de Prueba. n Se puede probar errores de diseño. Eleccion del tipo de prototipado Prototipos de Alta Fidelidad Fidelidad Apariencia Uso óptimo Limitaciones Permiten Iteración. baja Aspecto tosco, muy Fases tempranas de diseño, Utilidad limitada una vez realizada esquemático y aproximado. conceptualización de la la captura de requisitos, Poca o nula interactividad aplicación limitaciones en el test de Revisiones Constantes. usabilidad mediana Diseño y evaluación más Costo mucho menor No comunican el aspecto y interactiva, e incluye comparado con los de alta comportamiento final del producto, Mayor Precisión. navegación, funcionalidad, fidelidad. El detalle es al tiempo que tienen una utilidad contenido, diseño y suficiente para la prueba de limitada como documento de terminología usabilidad y sirve como especificaciones. referencia a las Percepción del Acabado. especificaciones funcionales del sistema. Alta Herramienta de marketing, o Alto grado de funcionalidad, Caro de desarrollar. Se tarda Requiere más tiempo. de aprendizaje. Simula muy completamente interactivo, mucho tiempo en su construcción. bien las técnicas de define el aspecto y interacción comportamiento del producto final Se necesita menor creatividad.Diaz Muñante Jorge 8

×