ITESM - Campus Qro.Fernando Centurión A00886846

Diego Huerta A00888423Amet Ramos A00888718

Ricardo Meléndez A00889255Interacción Humano Computadora

12 de Octubre del 2010Eduardo Rosado

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)

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.

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.

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

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.

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

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.