Diseo de Interfaces de Usuarios

IU a la fama o la vergenza?

Diseo de Interfaces Profesor:

de Usuarios
Diaz Muante Jorge
Ciclo 2017-1

Prototipos

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 lpiz y papel, herramientas de diagramacin y
diseo grfico, herramientas de desarrollo, vdeo,
etc.
Se llegar al prototipo final a partir de varias
interacciones prototipado evaluacin.

Prototipeo Ventajas y Desventajas

Al principio del Diseo
Representaciones diferentes
de tormentas de ideas
Escoger una representacion
Estilo de interfaz Ordinario
Analisis de Tareas y Rediseo
Interfaz afinado, diseo de pantallas
Evaluacin Heursticas y rediseo
de usar Prototipeo
Ventajas:
Prototipos en Papel Tranquilidad del Usuario.
(Baja fidelidad) Reduccin del Costo de Desarrollo e implementacin.
Establece una mejor comunicacin con los usuarios.
Reduce el Tiempo requerido.
Mejora la calidad del producto final.
Prototipos de mediana
No se necesita muchos elementos.
Fidelidad

Pruebas de Usabilidad y Rediseo 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 diseo
Se requiere total participacin de parte del usuario.

Diaz Muante Jorge 1

Diseo de Interfaces de Usuarios

PROTOTIPOS DE BAJA FIDELIDAD.

Basados en papel

Un papel borrador de cmo ver, percibir la funcionalidad

Sketches

Dibujo de la apariencia externa del sistema futuro

Enfocar la progresin del dilogo

Historietas (storyboards)

Una secuencia de partes importantes.

Originalmente parte de una pelcula, usado para dar una idea de la escena.

Foto de un punto particular de la interaccin de la interfaz.

Usuarios pueden evaluar rapidamente la direccin de la interfaz es correcta.

Prototipo de papel Escenarios

Los prototipos resuelven tareas determinadas planteadas en un

Este tipo de prototipo se basa en la utilizacin de
papel, tijeras, lpiz o instrumentos que se puedan
utilizar para describir un diseo en un papel
Este sistema nos permite una gran velocidad y
flexibilidad
escenario.
Escenario:
Un escenario es una historia de una interaccin que realiza un
personaje en un entorno determinado para resolver una tarea.
Nos permite definir y desarrollar conocimientos sobre el entorno del
usuario y su entorno de trabajo.
Es importante pensar en varios escenarios para reflejar las distintas
situaciones y puntos de vista.
Cumplen una funcin mltiple:
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.

Ejemplo de escenario Escenarios

El alumno Juan de los Palotes desea ver consultar la nota de las asignaturas de
Teleinformtica y de Transmisin de datos.
Los escenarios presentan distintos elementos:
La FISI est en un edificio alejado del SUM (notas de los cursos), por lo que decide
conectarse por medio de su dispositivo movil a travs de la red Wifi de la
Un decorado.
universidad. El ambiente donde est la PC con la consulta de notas con el
Existe una aplicacin cliente que lee las notas de la base de datos de la universidad
por la red Wifi que precisa introducir su codigo de alumno (xxxx@unmsm.edu.pe) y
alumno situado delante.
su contrasea (abcedf). El alumno nunca se acuerda si tiene una f final o no y Uno o ms actores o agentes.
decide probar primero con abced. La contrasea es errnea y necesita introducirla
de nuevo. El alumno que busca sus notas.
Una vez identificado correctamente le aparece una lista con todas las cursos en
las que est matriculado y debe seleccionar alguno de las que quiere comprobar (la Metas u objetivos.
205) por lo que la marca y pulsa el botn Aceptar. La pantalla muestra el curso, y
comprueba que todava no est la nota del ltimo examen que hizo. Cambios que los agentes esperan conseguir dentro del decorado.
Como recuerda que la siguiente nota es Transmisin de Datos, decide ir al
siguiente curso con el botn Siguiente, en lugar de volver a la pantalla de los cursos.
La consulta de las notas de todas los cursos en las que est
Por ltimo cierra la aplicacin cliente.
matriculado.
Una trama.
Las acciones que realiza el agente como consecuencia de
su actividad mental: planes, evaluacin del comportamiento
del escenario, etc.

Diaz Muante Jorge 2

Diseo de Interfaces de Usuarios
Escenarios ..
Permiten explicitar el uso del sistema.
Orienta el anlisis y el diseo del sistema.
Modificar el foco de atencin hacia las personas y las
tareas que realizan en la aplicacin.
Representacin de escenarios.
De forma narrativa.
Mediante un diagrama de flujo.
Mediante historieta o storyboard.
Vdeos.
Prototipo de papel cmo se hace
Para poder simular las diferentes interacciones que
vamos a realizar con el sistema, realizaremos una
hoja para cada uno de los diferentes escenarios que
vamos a tener como resultado de las diferentes
interacciones que podemos realizar
Apilaremos estas hojas que nos permitirn simular
la aplicacin
Representacin de escenarios .. En forma de historieta
Historieta o Storyboard.
Un guin en forma de vietas que refleje la interaccin y el
recorrido de las distintas pantallas.
Es una narracin grfica de una historia en cuadros
consecutivos.
Reflejan la navegacin entre las distintas pantallas
realizadas por interacciones de los usuarios.
Diaz Muante Jorge
Representacin de un escenario en forma narrativa
Ejemplo de escenario.
El alumno X est dentro de la Universidad y desea conocer
todas las notas de los cursos en las que est matriculado en
la PC que para tal efecto est alojada en uno de los edificios
de l a facultad.
Para ello, se dirige a la PC e introduce su cdigo de matricula
en la pantalla de entrada a la aplicacin. X est despistado y
se equivoca al introducir el nmero, por lo que la aplicacin
le advierte y le invita a introducir el cdigo de matricula de
nuevo.
Una vez se ha identificado de forma adecuada se muestra la
pantalla con las notas.
Despus se va, dejando la pantalla con sus notas.
Prototipo de papel cmo se usa
Para utilizar el prototipo de papel nos situaremos en
un escenario de uso de futuro en el que el diseador
acta como coordinador
El prototipo ser analizado por un posible usuario e
intentar realizar algunas de las tareas que se
pretende disear
En voz alta se irn realizando las interacciones y le
iremos cambiando las hojas de papel en funcin de
las interacciones que vaya realizando
Historietas (storyboards)
3
Diseo de Interfaces de Usuarios

Ejemplo Sketches Historieta de la maquina BART

Historietas (storyboards)
Ejemplo de escenario

El alumno Juan de los Palotes desea ver consultar la nota de las asignaturas de
Teleinformtica y de Transmisin de datos.
La FISI est en un edificio alejado del SUM (notas de los cursos), por lo que decide
conectarse por medio de su dispositivo movil a travs de la red Wifi de la
universidad.
Existe una aplicacin cliente que lee las notas de la base de datos de la universidad
por la red Wifi que precisa introducir su codigo de alumno (xxxx@unmsm.edu.pe) y
su contrasea (abcedf). El alumno nunca se acuerda si tiene una f final o no y
decide probar primero con abced. La contrasea es errnea y necesita introducirla
de nuevo.
Una vez identificado correctamente le aparece una lista con todas las cursos en
las que est matriculado y debe seleccionar alguno de las que quiere comprobar (la
205) por lo que la marca y pulsa el botn Aceptar. La pantalla muestra el curso, y
comprueba que todava no est la nota del ltimo examen que hizo.
Como recuerda que la siguiente nota es Transmisin de Datos, decide ir al
siguiente curso con el botn Siguiente, en lugar de volver a la pantalla de los cursos.
Por ltimo cierra la aplicacin cliente.

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 interaccin
preparados.

Diaz Muante Jorge 4

Diseo de Interfaces de Usuarios
Evaluacion del prototipo ..
Es necesario pensar en todas las tareas que el
usuario deber realizar.
1. Introducir una identificacin errnea.
2. Salir de la pantalla de error.
3. Seleccionar la asignatura de Teleinformtica de la
pantalla de asignaturas.
4. Desde la pantalla con los datos de la asignatura de
Teleinformtica ir a la asignatura de Transmisin de datos.
a. Volviendo a la pantalla de asignaturas.
b. Mediante el botn Siguiente.
5. Salir de la aplicacin.
Evaluacion del prototipo
Ejemplo
Presentacin.
Usted desea consultar sus notas de Teleinformtica y
Transmisin de datos mediante una PDA conectada a la
red Wifi de la Universidad.
Su nombre de usuario es bertin.osborne y su contrasea es
abcde.
Diaz Muante Jorge
Evaluacion del prototipo
El facilitador o gua explica al usuario el cometido del test.
Una a una, le explica al usuario las tareas que debe realizar.
El usuario interacta con la interfaz (sealando con el dedo,
escribiendo los datos de entrada, explicando con palabras su
interaccin).
Uno o ms componentes del equipo irn modificando los
elementos que indique al usuario, simulando las reacciones
del computador a las interacciones del usuario.
Uno o ms componentes del equipo actan como
observadores anotando las incidencias o, mejor an,
filmando la prueba.
Ver pdf prototyping for Tiny Fingers
Evaluacin del prototipo
Ejemplo ..
Perdn, me equivoqu, su contrasea es abcdef.
5
Diseo de Interfaces de Usuarios

Ejemplo .. PROTOTIPOS DE FIDELIDAD MEDIA

Ahora desea ver la nota de Transmisin de datos (esa Desde este punto se emplea la computadora entre otras herramientas de
asignatura est situada a continuacin de Teleinformtica) diseo para simular la mayor parte de las caractersticas deseadas.
Brinda un pequeo escenario de Prueba.
Se puede probar errores de diseo.

Ejemplo Adicionar una conducta...

Transforma en ..... Hasta llegar a prototipo de alta fidelidad

Diaz Muante Jorge 6

Diseo de Interfaces de Usuarios

Eleccion del tipo de prototipado

Prototipos de Alta Fidelidad

Fidelidad Apariencia Uso ptimo Limitaciones

Permiten Iteracin.
baja Aspecto tosco, muy Fases tempranas de diseo, Utilidad limitada una vez realizada
esquemtico y aproximado. conceptualizacin de la la captura de requisitos,

Revisiones Constantes. Poca o nula interactividad aplicacin limitaciones en el test de

usabilidad
mediana Diseo y evaluacin ms Costo mucho menor No comunican el aspecto y
Mayor Precisin. interactiva, e incluye comparado con los de alta comportamiento final del producto,
navegacin, funcionalidad, fidelidad. El detalle es al tiempo que tienen una utilidad
contenido, diseo y suficiente para la prueba de limitada como documento de
Percepcin del Acabado. terminologa usabilidad y sirve como especificaciones.
referencia a las
especificaciones funcionales
Requiere ms tiempo. del sistema.
Alta Herramienta de marketing, o Alto grado de funcionalidad, Caro de desarrollar. Se tarda
de aprendizaje. Simula muy completamente interactivo, mucho tiempo en su construccin.
Se necesita menor creatividad.
bien las tcnicas de define el aspecto y
interaccin comportamiento del producto

Simula el Producto Final. final

Diaz Muante Jorge 7