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