domingo, 18 de enero de 2009

Interfaz para dibujar

Bueno, en este trabajo he de realizar una interfaz para niños pequeños, de unos 4 o 5 años. Esta interfaz estará destinada a permitir a los niños a dibujar o colorear dibujos predeterminados.
Durante el desarrollo de la interfaz he realizado varias versiones hasta conseguir una que me agrade y que en mi opinión es suficiente para desempeñar la actividad buscada. Iré mostrando las diferentes versiones con sus respectivos comentarios a lo largo de este post.

La primera versión, una versión un tanto cutre visualmente, y quizas no muy apropiada para niños de tan baja edad es la siguiente:


En esta primera imagen vemos que tenemos en la parte central un recuadro, que será el lugar donde el niño pinte lo que el quiera. En la parte inferior tenemos una serie de colores para elegir, y como similitud al ya tan conocido "paint" de Windows tenemos una serie de opciones en la parte izquierda de la interfaz, que le permitirá al niño elegir el pincel , la goma, escribir un cuadro de texto, etc, etc... También disponemos un menú en la parte derecha donde podremos elegir diferentes polígonos para dibujar.

-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-

En la segunda versión del proyecto se me ocurrio cambiar el area de dibujo; Normalmente los niños suelen pintar en un folio suelto, sin embargo quise representar el area de dibujo como una especie de libreta, de ahí a la colocación de las anillas en la interfaz. A pesar que en la versión anterior se percibia perfectamente cual era el area de dibujo, he decidido implantar esta forma, que me aprece algo más apropiada y sobre todo queda mucho mejor para la vista ;)


-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-

En la siguiente iteración de pruebas decidí cambiar por completo el menú de coleres, poniendo de esta manera lápices de colores. Así, el diseñó tendrá una mejor interfaz con respecto a los niños, ya que un niño pequeño normalmente tiene los lapices de colores desperdigados por la mesa mientras pinta. Así decidi, poner lapices de colores en la parte inferior de la interfaz, en vez de recuadros de colores. Esta forma me parece mucho más efectiva a la hora de pintar y colorear.


-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-


Como versión final, tenemos la siguiente interfaz. Esta versión sin duda es la que más cambios ha conllevado.
Como cambio más significativo tenemos la eliminación del menú de la parte izquierda, ya que puedo imaginar que es una interfaz quizas algo complicada para un niño de la edad requerida. De esta manera he decidido incluir las opciones de este antigüo menú por medio de dibujos e imagenes, lo que en mi opinión es una forma mucho más intuitiva para un niño pequeño:

- En la parte inferior tenemos, además de los colores para dibujar, colocados de izquiera a derecha: un recuadro para saber que color está elegido; una goma para poder borrar algo dibujado que no nos guste; disponemos de un pincel, ya que pintar siempre con el lápiz es aburrido xD xD; más allá de los lápices de colores tenemos un bote de spray, para pintar al estilo "grafitty", y un recuadro para poder dibujar texto (siempre que el niño sepa escribir).
La elección de los lápices de colores es inmediata, pinchando en uno de los lápices lo tendremos "cogido" para poder empezar a pintar. Sin embargo, para pintar con el spray y el pincel, primero deberemos elegir un color mediante los lápices, y posteriormente, una vez seleccionado el color, elegir la herramienta con la que quemos colorear.

- En el menú de la izquierda, algo que no ha cambiado desde la primera versión, tenemos unas formas básicas predeterminadas para dibujar, como son el cuadrado, el circulo y demás polígonos. Este menú no me parece tan complicado, ya que es muy intuitivo mediante los dibujos. También hemos añadido las opciones de relaizar líneas rectas y líneas curvas. Por supuesto, el dibujo de las líneas y de los polígonos también podrá ser del color que haya seleccionado el niño.

- En la parte izquierda, he introducido diferentes bases para el dibujo, éstas son los diferentes tipos de hojas que podemos imaginar, ya sea con lineas horizontales, plantillas a cuadros o simplemente un hoja en blanco. ëstas opciones también funcionan como el típico "nuevo", el cuál abre una nueva hoja para realizar un nuevo dibujo.

- En la parte superior tenemos 5 imagenes o iconos: la primera (la imagen de un niño dibujando) nos lelvará a la una nueva pantalla donde el niño podrá elegir diferentes dibujos ya realizados y preparados para colorear; la impresora lógicamente sirve para imprimir el dibujo pintado o coloreado que ha realizado el niño; los iconos con cajones, me ha resultado desde mi punto de vista muy intuitivos y "simpáticos", éstos a su vez, sirven para guardar y abrir un dibujo: como metáforas tenemos la introducción de la hoja en el cajón (guardar) y sacar la hoja del cajón (abrir). En la esquina derecha superior tenemos el icono para salir del programa, el cuál creo que no es dificil de interpretar.



COMO ULTIMA VERSIÓN (y ahora si va en serio) he decidio incorporar varias ranuras debajo de los iconos de guardar y abrir para que el niño pueda arrastrar el dibujo a esas ranuras (en caso de guardar) y arrastrarlos hasta el papel (en caso de abrir). De esta manera nos quitariamos el problema de que el niño tenga que elegir nombre del archivo a guardar e abrir.

No hay comentarios: