1. ITESM - Campus Qro.
Fernando Centurión A00886846
Diego Huerta A00888423
Amet Ramos A00888718
Ricardo Meléndez A00889255
Interacción Humano Computadora
12 de Octubre del 2010
Eduardo Rosado

2. Segunda Entrega Parcial
Diseño de las Componentes del Sistema Interactivo
1.- Análisis de tareas
Para empezar el diseño de nuestro sistema interactivo primero se realizo
un análisis e investigación de productos ya existentes que se relacionan con
nuestro proyecto, el objetivo fue detectar áreas de oportunidad y que cosas no
nos podían faltar dentro de nuestro sistema interactivo. Para el análisis de
tareas usamos la como técnica principal la Grabación de Video, elegimos la
grabación de video por que ofrece varías ventajas, dentro de ellas esta el
hecho de tener un video que muestra como el usuario usa las aplicaciones,
ofreciendo la oportunidad de analizarlo varías veces. Por otro lado también
usamos la técnica de Think aloud que implico estar con los usuarios en el
momento en que ellos utilizaban las herramientas, al mismo tiempo en que
usaban las herramientas se realizaron preguntas sobre la actividad que
realizaban en ese momento.
La herramientas que se analizaron y la justificación de su elección para
apoyarnos en nuestro proyecto fueron las siguientes:
1. Tablet Digital
 La elección de la tablet fue por que ofrece la misma posibilidad
de pintar con una pluma y al mismo tiempo refleja las acciones
sobre un monitor digital. Recordemos que nuestro producto ofrece
la misma opción de pintar con una pluma digital que refleja las
acciones con el apoyo de un proyector.
2. Tablet Digital Con Monitor
 Uno de los objetivos de nuestro proyecto es que el usuario pueda
pintar directamente sobre la imagen, es decir pintar donde está
viendo. A diferencia de la tablet digital en esta ocasión fue una
tablet con monito, lo cual permite al usuario pintar directo sobre la
superficie digital.
3. iPad
 Dentro de las posibilidades que ofrece nuestro producto es que es
portátil, como muchos sabemos el iPad es un producto
revolucionario que ofrece un monitor tactil que es portátil gracias
a sus dimensiones. Dentro del iPas existen aplicaciones que
permiten dibujar con el dedo, es por este motivo que también se
realizo el análisis con el iPad.
4. Dibujo Tradicional Sobre Papel
 Una de las funciones principales de nuestro producto es el dibujo
digital, para lograr transportar la experiencia de lo tradicional a lo
digital es necesario estudiar las raíces para ver cuales son las
propiedades que caracterizan la experiencia, es por esto que
también se estudio gente dibujando sobre papel, con un lápiz de
carbón.
5. PhotoShop (Adobe)

3.  Es el programa que se usa principalmente en computadoras para
lo que es manipulación y creación de imágenes, elegimos analizar
este programa debido a que muestra herramientas parecidas a
las que buscamos aplicar, como son las brochas, las capas,
borrador, back, etc.
6. Sketch Book Pro (Autodesk)
 Se puede decir que este programa es lo más parecido a nuestro
sistema interactivo en cuestión de experiencia, el programa se
puede utilizar para computadoras y para aparatos móviles como
son iPods y iPads, en esta ocasión lo usamos con el iPad, que
genera una experiencia muy similar de esta pintando sobre un
canvas blanco y tener al alcance las herramientas principales,
goma, lápices, capas, etc.
Los resultados obtenidos después del análisis fueron positivos, a
continuación se muestran las ventajas y desventajas que se observaron para
cada uno de los sistemas interactivos, también se muestran los pasos
necesario para realizar estas tareas. Cabe mencionar que las personas que
analizamos fueron estudiantes de la carrera de animación y Arte Digital, al igual
que gente de Comunicación, ya que son las personas que utilizan las
herramientas digitales para pintar y diseñar con precisión.
Tablet Digital
VENTAJAS DESVENTAJAS
Ofrece un espacio amplio para dibujar,
en ocasiones el espacio es mayor al que
ofrece el monitor de la computadora.
Los usuarios mencionaban que si sería
más cómodo poder dibujar directamente
sobre lo que se está viendo.
Facilita el trabajo al momento de
dibujar, gracias al parecido que ofrece
con el método tradicional de tener una
pluma en lugar de dibujar con un Mouse.
La calibración de la pluma o siempre
era exacta, esto hacia que el usuario
dibujara con la pluma desfasada.
Ofrece la opción de detectar la presión de
la pluma.
A pesar de que la tablet tiene botones,
lo usuarios casi no los ocupan, solo lo
usan para el Scholl y click derecho. El
motivo es que están acostumbras a
seleccionar las otras opciones
manualmente.
Era incomodo para los usuario tener
que seleccionar las opciones del menú
con la pluma, en ocasiones cambiaban a
un Mouse para realizar esta actividad.
No es portátil.

4. Tablet digital con monitor
VENTAJAS DESVENTAJAS
Ofrece la posibilidad de dibujar
digitalmente sobre la superficie que estas
viendo.
Los usuarios mencionaron como
desventaja la falta de textura al momento
de pintar, debido a que es una pantalla
digital no ofrece la textura de papel.
Es más simple seleccionar los menús
debido a que los ves directo en la pantalla
táctil y no debes de estar calculando la
ubicación en otra superficie.
El precio, su valor se duplica
comparado con una tablet digital sin
monitor.
Ofrece mayor precisión que una tablet
sin monitor.
El cableado que utiliza es demasiado;
corriente, monitor, usb y regulador.
Detecta inclinación y presión de la pluma. No es portátil.
No se siente textura al momento de
dibujar.
iPad
VENTAJAS DESVENTAJAS
Es Portatil y ofrece la capacidad de
llevarla a donde quieras y poder pintar lo
que encuentres en cualquier lugar.
El precio, debido a que es nueva
tecnología el precio es elevado.
Por el tamaño ofrece una gran similitud a
la de estar dibujando sobre una hoja.
El dedo no es la mejor herramienta
para realizar dibujos con precisión, debido
al grosor puede ser difícil dibujar la línea
donde quieres.
La selección de menús y shortcuts es
muy fácil, ya que la seleccionas
directamente con el dedo.
Si se acaba la pila debes estar conectado
a un cable muy corto que puede
incomodar el trabajo.
Las etapas desde que lo prendes hasta
que puedes empezar a dibujar son muy
cortas, no pasa más de un minuto y ya
puedes estar dibujando.
Ofrece la capacidad de guardar
información, al igual que importar
información previamente guardad al
canvas donde se esta trabajando como
pueden ser fotografías.

5. Dibujo Tradicional
VENTAJAS DESVENTAJAS
Puedes tener todas las herramientas
de trabajo a la mano; Lápices, borradores,
colores, plumones, etc.
Si quieres modificar un dibujo existente
o duplicarlo, lo debes volver a pintar.
Puedes acomodar el cuaderno de una
forma que se facilite el trazo para ciertas
líneas.
Si estas pintando con plumones no
existe forma de poder regresarte.
La goma esta del lado inverso al lápiz. Después de un tiempo el papel se
puede deteriorar.
La textura del papel ayuda a tener una
mejor precisión en los trazos con el lápiz.
Photoshop
Observaciones
La herramienta que más se usaba al momento de dibujar fue la brocha, en dado
caso que fuera necesaria una línea con mayor precisión se utilizo la pluma.
La goma era usada constante mente para hacer correcciones pequeñas o borrar en
grandes cantidad. Sería muy útil para el usuario tener un shortcut para intercambiar de
la brocha a la goma sin necesidad de picar el icono. (Sin tomar en cuenta el teclado)
El usuario también hacia un constante uso de la herramienta para cambiar el
tamaño de la brocha, sería útil tener a la mano un Scholl para facilitar este trabajo.
Tomando en cuenta todas la herramientas con las que cuenta la aplicación, es muy
fácil poder encontrarlas gracias al acomodo de sus menús y a la posibilidad de poder
modificar tu espacio de trabajo para tener a la mano solo que realmente necesitas y
quitar las aplicaciones que no vas usar.
El hecho de que te permita guardar un historial hace que la coerción de errores sea
muy sencilla, incluso muestra un menú con tus acciones para poder regresar hasta el
punto donde se cometio el error.
Sketch Book Pro
Observaciones
El programa esta diseñado especialmente para el uso de tablets y a pesar de que
es más simple que PhotoShop ofrece una amplia gama de posibilidades para dibujar.
Una de sus grandes ventajas es que ofrece la capacidad de poder girar y acomodar
el canvas en cualquier posición (360º) para que le sea más fácil al usuario dibujar
ciertos trazos.
Debido a que esta diseñado para tablets, el programa ofrece una serie de short cuts
que cuenta solo con las herramientas necesarias para dibbujar: Layer, Brush Type,
Size, Color, Save, New.
El manejo de las capas es algo complicado debido a que los shortcuts están tan
abreviados que en ciertas ocasiones no sabes cual es el botón que buscas, ni donde
está.

6. Después de realizar y analizar toda la documentación de tareas con la
ayuda de video y fotos, realizamos un diagrama de flujo general que representa
los pasos principales que se llevan acabo al usar las aplicaciones que se
analizaron anteriormente.
Preparación del area de trabajo
La preparación consiste básicamente en la organización del área de trabajo.
Esta étapa implica ubicar las herramientas en sus lugares. Las herramientas se
ubican alrededor de l área de trabajo. Los lápices, colores y plumones se pueden
guardar en uno o varios estuches o tenerlos afuera. Esta preferencia depende del
usuario.
Uso de la Herramienta
El uso de las herramientas es la acción de dibujar en sí. En esta etapa, el
usuario usa y cambia las diferentes herramientas con las que cuenta para obtener
diferentes effectos y/o tonos. La duración de esta etapa puede alargarse tanto
como el usuario lo quiera.
Fin del Dibujo
La tercera y última etapa del modelo de dibujo propuesto en este proyecto
cumple la función de nombrar y guardar (o no) el dibujo. Esta etapa será
representada en el juego al darle la oportunidad al usuario de guardar su creación.
Preparación del area de trabajo
Arreglar el cuaderno, prender el dispositivo, abrir el
programa, etc.
Uso de la
Herramienta
Empezar a dibujar
Dibujo finalizado
Intercambio de
herramientas
Goma, Lapiz, Plumon,
Tamaño, Capas, etc.

7. ¿Cómo relacionar este proceso con las actividades en Olin?
Olin cumplirá las funciones de enseñarle al usuario a mejorar sus habilidades de
dibujo A TRAVÉS del desarrollo de sus habilidades psicomotrices. La mejora de las
habilidades de dibujo se concentrará en la segunda étapa del proceso previamente
descrito.
Actividades concretas:
Actividades relacionadas a trazo: Estas actividades le pedirán al usuario
trazar diferentes figuras con el fin de acostumbrar al usuario a este tipo de
acciones. Ejemplo: Pedir al usario que trace una línea recta por encima de una
sombra.
Actividades de habilidad psicomotriz: Estas actividades le pedirán al
usuario llevar a cabo movimientos que generalmente no hace. Ejemplo:
Movimiento circular a la derecha y luego a la izquierda.
Actividades de uso de herramientas: En estas actividades, el usuario
aprenderá a cambiar correctamente de herramientas. Es decir, ¿cuándo debe usar
un plumón?¿con qué lápiz obtiene un mejor trazo para un determinado boceto?.
Ejemplo: Obtener un circulo verde utilizando sólo los colores primarios y
delinearlo usando un plumón de grosor 1.
2.- Aplicación de los principios de diseño
El correcto uso de los principios de diseño en cualquier proyecto provee
de ciertas ventajas ya que el usuario tiene una mejor experiencia de uso
cuando el producto fue diseñado correctamente. Para el proyecto Olin se
analizarán e implementarán algunos de estos principios de diseño. Además, se
tratarán de atacar las desventajas que algunos de estos principios tienen.
A continuación, se describe brevemente la implementación de estos principios
de diseño en el proyecto, así como las razones para no usar algunos.
Uso de llenado de formas:
En Olin, se le pedirán algunos datos al usuario para crear su perfil. Para
obtener estos datos, se hará uso de llenado de formas. Para mejorar la
interacción con el usuario, se llevarán a cabo ciertas modificaciones al estilo de
llenado de formas tradicional con el fin de eliminar ciertas desventajas
presentes. Algunas desventajas del llenado de formas que se atacarán son las
siguientes:
 Requieren un área importante de la pantalla .En Olin, el usuario no
necesita aportar mucha información personal, algunos de los campos
necesarios son: nombre, edad, email, contraseña, etc. Por esta razón, la

8. forma utilizada para obtener estos datos del usuario es de un tamaño
notablemente menor al de otras formas.
 Las formas extensas desalientan al usuario. Por las mismas razones
expresadas en el punto anterior, las formas en Olin serán muy breves
con lo cual debería ser suficiente para eliminar por completo a esta
desventaja.
 Detección de errores se difiere hasta el envío de la forma. El llenado de
cada campo en las formas de Olin debería proporcionar información
instantáneamente conforme se va llenando. Por ejemplo, cada vez que
el usuario introduce un nombre de usuario, el sistema checa si éste está
disponible. (Como lo hace Gmail). Por otro lado, si al ingresar la
contraseña y la confirmación de la contraseña, los campos no coinciden,
se le hará saber inmediatamente al usuario con un mensaje.
La ventana de login como un llenado de forma esencial.
Como muchos de los desarrolladores saben, la pantalla o ventana de
login es una de las partes del producto más importantes ya que es la primera
aproximación que tiene un usuario con el producto. La ventana de login debe
ser lo suficientemente “amable” y simple como para motivar al usuario a seguir
usando el producto. Muchas veces, las pantallas de login pueden llegar a ser
contraproducentes ya que en lugar de “meter” al usuario en el producto, lo
excluyen o le hacen difícil el acceso a éste. Es por eso, que en el desarrollo de
la interacción de Olin, se pensó en hacer la ventana de login una invitación más
que un obstáculo para hacer uso del producto. Si el usuario ya cuenta con un
perfil, podrá obtener ayuda en caso de que haya olvidado su contraseña. Por
otro lado, si es la primera vez que el usuario accede al producto, la ventana de
login le permitirá crear una cuenta en menos de 30 segundos.
Manipulación directa:
Olin hará uso de la manipulación directa al estar dibujando o jugando
dentro de una sesión. Por ejemplo, cuando un usuario quiera utilizar
determinada herramienta(brocha, pincel, pluma, etc) podrá elegirla desde un
“dock” que simulará el compartimiento en el que muchos artistas guardan sus
pinceles y plumas.
Análisis de desventajas:
 Complejidad y esfuerzo de programación: Aunque si bien es cierto que
una correcta implementación de manipulación directa es costosa en
términos de programación, para el proyecto Olin se tiene como objetivo
principal brindar una excelente experiencia al usuario, por lo que el
tiempo de dedicación y programación para su desarrollo queda en un
plano.
 Demanda dispositivos de despliegue de mayor fidelidad. Para evitar
este tipo de inconvenientes con hardware, Olin ideó desde su origen, la
integración con un dispositivo propio para su uso. Este

9. dispositivo(proyector) sería el encargado de desplegar la interfaz en una
gran variedad de superficies con ayuda de una computadora para llevar
a cabo el procesamiento.
Selección de menús:
En Olin, los menús deberán ser simples y consistentes con el estilo de
toda la interfaz. A lo que se refiere este punto es que los botones y pestañas
no deberán ser diferentes al resto del programa (como muchas veces ocurre
con la barra de menú del sistema operativo en la parte superior de la ventana).
Los menús estarán ordenados tal como se estudió en los principios de diseño
de Apple. Es decir, las opciones se agruparán y se disminuirá en la medida de
lo posible, el número de éstas por bloque.
Análisis de desventajas:
 Demanda espacio de despliegue: Para evitar utilizar un espacio excesivo
con el desplegado de los menús, Olin dividirá las destinas herramientas
y opciones en categorías en el “dock” y en el menú superior con el fin de
minimizar la cantidad de opciones por menú y, de esta manera, reducir
el espacio utilizado al desplegar.
 Los usuarios frecuentes pueden sentirse frenados: Para evitar que un
usuario experto se sienta frenado o limitado por el continuo acceso a los
diferentes menús, Olin le dará la oportunidad de personalizar el “dock” al
arrastrar y mover las diferentes herramientas. Al hacer esto, el usuario
tendrá la oportunidad de mover las herramientas que más utiliza al
“dock” para acceder a ellas mucho más rápido.
Lenguaje de comandos:
La forma de interacción con base en comandos no es una opción para Olin
ya que implica demasiadas desventajas innecesarias como:
 Manejo de errores limitado.
 Requiere entrenamiento extenso.
 Demanda memorización.
Aunque es cierto, que el lenguaje de comandos puede ser muy fuerte si se
sabe utilizar, en Olin no es de gran ayuda ya que el objetivo principal del
producto es mejorar las habilidades psicomotrices del usuario haciendo uso de
una pluma. No tendría caso entonces, acabar usando el teclado para
interactuar con el servicio.
Lenguaje natural:
Aunque el lenguaje natural por voz podría ser una herramienta muy útil
para usar Olin (por ejemplo, cambiar de color haciendo uso de la voz para

10. evitar detenerse en el dibujo), también podría llegar a ser contraproducente ya
que en la actualidad, todavía no se ha desarrollado con éxito ningún sistema
que no requiera cierta sintaxis al hablar con el sistema (una desventaja). Por
otro lado, un hecho que podría ser más viable es el uso de reconocimiento de
caligrafía. Con esta tecnología, se le podría pedir al usuario escribir su nombre
con la pluma y el programa reconocería las letras y las convertiría a su versión
digital.
8 Reglas de Oro
Para asegurar que se han diseñado correctamente las componentes se
describirán brevemente las aplicaciones de las 8 reglas de oro.
Consistencia: En Olin, todas las ventanas, diálogos, botones tendrán un estilo
congruente que evitará que el usuario se sienta abrumado por repentinos
cambios de tipografía o colores.
Usabilidad universal: Olín trata de ser lo más simple posible con el objetivo de
que cualquier persona pueda llegar a usar el producto. Aunque habrá,
evidentemente, restricciones para personas sin extremidades, Olin
proporcionará soporte para personas con capacidades o habilidades diferentes
como los zurdos.
Retroalimentación: Después de cada ejercicio o sesión, Olin le proporcionará
al usuario retroalimentación con respecto a su desempeño. Además, a lo largo
de la sesión, el producto mantendrá informado al usuario de manera directa y
simple, lo que sistema espera que haga el usuario así como lo que el sistema
está haciendo en ese momento(cargar una imagen, guardar cambios, etc).
Diálogos que llevan a un fin: Una vez que el usuario se ha logeado
exitosamente, éste podrá decidir qué hacer durante esa sesión. En caso de
que el usuario elija jugar, se pasará a una ventana para elegir la dificultad y el
nivel. El proceso que sigue esta interacción es: Selección->Confirmación-
>Jugar.
Prevenir errores:La manera que utilizará Olin para prevenir errores es la
implementación de la idea “no hay errores, sólo preferencias”. En la medida de
lo posible, y en caso de que ocurriera un error, Olin se lo hará saber al usuario
explicando la razón del error así como la solución concreta para el error.
Ejemplo: “El nombre de usuario no es válido, ¡usted se refiere a alguno de los
siguientes?:…..”
Permite deshacer: La implementación de esta regla de oro está directamente
relacionada con el punto anterior. Como se mencionó, en Olin se buscará que
no haya errores, sólo preferencias. Por lo tanto, estas preferencias siempre se
pueden modificar (nombre de usuario, configuración de “dock”, contraseña,
colores, etc). En el caso de que el usuario esté dibujando, Olin hará lo posible
para deshacer la mayor cantidad de trazos que el usuario considere erróneos.
Otorgar el control al usuario: Al haber iniciado una sesión, el usuario tendrá
el control de la aplicación. Haciendo uso de este control, el usuario podrá
decidir qué actividad llevar a cabo, modificar su perfil, revisar estadísticas, etc.

11. Evitar sobrecargar la memoria del usuario: Gracias a la simpleza de la
interfaz de Olin y al uso de manipulación directa, el usuario podrá reconocer en
lugar de recordar al navegar por las diferentes ventanas de la aplicación.
Además, gracias a la opción de modificación del “dock”, el reconocimiento de
las herramientas será todavía más sencillo ya que él/ella mism@ lo
configuraron de esa manera. Para evitar casos en los que el usuario no
recuerda o entiende su propia configuración, el “dock” tendrá la opción de
restaurar la configuración original.