Home
First Thought
We chose a project from a list suggested by our teacher and now we are preparing to brainstorm some ideas.
The project is about drawing by sound.
Sounds exciting and challenging!
Brainstorming Ideas |
Our first meeting was quite successful. We discussed a lot of ideas and decided to move further with 3 of them that implement the idea of drawing by sound.
|
- Color book for children.
Location: kindergarden
Scenario: educator teaching about nature
The teacher presents to the children various pictures with trees, animals, mountains and other natural elements. She also bring digital color books that will be used by the children to check their recent gained knowledge and their creativity.
Every area will have a number. The application will recognize voices and will color the image based on that.
For example, David Jr. will have a picture with trees, a bear, clouds and sun. Every delimited area will have a number. The child will say "Color 1 with green" and the area 1 from the picture will be filled with green and so on.
We think the application would be very useful and loved by children and teacher.
We need to keep in mind that the teacher should have an admin account that will allow him/ her to upload drawings that will be colored.
2. Play music and draw + Play image
Target audience: people with artistic spirit that want to have fun.
This application can be used to draw any kind of images using any kind of music. Before start, the user will configure canvas size and the number of dots per seconds.
3. Draw pixel by pixel
Target audience: artists, great for people with disabilities
Scenario: drawing
The user can use din application to draw anything he wants. The application receives vocal instructions at every step about the following move. The application draws pixel by pixel.
At every step, he user can choose three important elements:
- direction of the next pixel based on the current pixel in hand. He can choose from 8 directions: top-left, top, top-right, left, right, down-left, down, down-right.
- length of pixels. The user can draw a segment of more than 1 pixel.
- color. The user can choose from a list of colors.
This application's main purpose is to be used only by voice, without any physical interaction.
Naming the Apps
1. SeeSounds
- Keywords: music, musical notes, ABC, guitar, piano, instrument |
2. DrawByPixel
Keywords: direction, length, color, pixel, step-by-step |
3. ColorQuack
Keywords: colors, areas, duck, childish, tree, cloud |
SeeSound: Storyboards
SeeSound: Personas
Type: Primary
Name: Carolina Dempsy
Background
- Date of Birth:
- Gender: Female
- Location: Iasi, Romania
- Work place: Seven Hills General School, Educator
- School: Palo Alto High School
Main Points
Smart and open-minded person. Likes:
- Carolina has experience with a lot of gadgets: smartphones, e-readers, tablets, laptops, smartwatches.
- She doesn't like people who are dependent on gadgets, she likes to use them when she needs them and sometimes for fun.
- Carolina works with children with age from 2 to 8. Some of the kids have disabilities.
- Carolina is a funny, people person, she likes to help others.
- Carolina wants to be a good educator.
Goals
Goals are the reasons users perform tasks, not the tasks.
- Practical Goals: being efficient, feeling useful
- Personal Goals: having fun, train imagination
- Business Goals: get another level of education in order to become a teacher.
Frustrations and Pain Points
Some of the difficulties the user has with the product.
- Carolina is a musician and sometimes she is disappointed about pictures that the application produces when she plays a song.
Detailed Description
Carolina used to play guitar very often when she was younger. Now she is doing it from time to time. She has an artistic spirit, when she was little she used to paint, but she has never been encourged to continue that. Carolina works hard, but she also likes to have fun.
- Experience with applications that have speech to text and voice recognition features: for 2 years.
Scenarios
She will play a favourite song to see what image it could produce, she will found out it is a very abstract picture.
One day Carolina plays a different song in order to get a image representing a cloud. She tries to adapt the notes of the song, to get proper colors. After that, she takes the image to school and give it to children for a listen. Even the two kids that cannot see will be able to listen the image.
Type: Primary
Name: Roger Grey
Background
- Date of Birth:
- Gender: Male
- Location: Colorado, USA
- Work place: University of Colorado, Teacher
- School: University of Colorado
Main Points
Roger is a very inteligent person.
- Experience with regular phones(with buttons)and with smartphones and tablets(those that have voice recognition option)
- Dislikes about certain aspects;
- Roger got blind after a car accident.
- He works with students, teaches biology.
- He is an open-minded person, but not a very social one
- Roger likes to learn new things every day.
Goals
Goals are the reasons users perform tasks, not the tasks.
- Practical Goals: understand "pieces of art" made by his freinds.
- Personal Goals: train imagination
Frustrations and Pain Points
- He doesn't like applications with a lot of intermediate actions until finish of the task he wants to perform
- Roger is blind
Detailed Description
Roger is a very creative person and likes to do things that train his imagination
- Experience with certain applications, products;
- Frequency of use.
Scenarios
After finding out how the notes are mapped to colors, Roger will use the application to "draw" in his mind pictures made by his friends. He will be able to do that by swiping arround the picture on his tablet or on his smartphone.
One day Roger met Carolina who was trying to sell some pictures she made. She put NFC tags on them in order to catch people's attention. Roger was curious what kind of pictures she made, so he used his phone in order to give them a listen.
Type: Primary
Name: Melody Green
Background
- Date of Birth:
- Gender: Female
- Location: Helsinki, Finland
- Work place: ArcticIT , Programmer
- School: Helsinki Business College
Main Points
- Melody has experience with electronic devices: Melody uses the computer almost every day, as well as her tablet and her smartphone. From time to time she uses her graphic tablet and the eReader.
- She gets bored very easy, that's why Melody doesn't like slow and hard to use applications
- Melody works in a big company.
- She is an open-minded and friendly person, she likes to organize different thematic teambuildings at work.
- Melody loves biking and tennis.
Goals
Goals are the reasons users perform tasks, not the tasks.
- Practical Goals: maintain the fun of teambuildings with co-workers
- Personal Goals: having fun, learning to play piano songs
- Business Goals: to get Software Architect certification.
Detailed Description
Melody is a creative person, she likes to have fun and to socialize. Sometimes, at work, she organizes teambuildings for her team.
Scenarios
Carolina is Melody's sister-in-law. She used SeeSound application to draw some pictures and sent them to Melody. Melody had a lot of fun when she was listening to them and she was very impressed about her sisters-in-law talent.
Melody decided to use SeeSound application at work. She organized a contest with her collegues to see which one could make the most realistic painting. Except some colleagues that can play musical instruments, all of them used laptop keyboards to play piano songs.
References
- Fluid Personas;
- An introduction to personas and how to create them;
- The Persona Lifecycle, Keeping People in Mind Throughout Product Design, John Pruitt & Tamara Adlin;
- This version of Personas Template includes microdata markup using schema.org Schemas.
SeeSound: Userflow
SeeSound: Wireframes & Prototypes
- Popovers for configuring the image
- Status bar notification (see musical note icon when playing music)
- Morphing controls for the play/ pause button
- Direct manipulation of content when the application plays music according to user's touch
Useful resources:
- http://pxdotpt.com/hci/2015/3/29/week-7-webdesktop-design-patterns
- http://www.uxpin.com/mobile-design-patterns.html
SeeSound: Project Identity
Rainbow-Piano: https://www.flickr.com/photos/raymaclean/3833550498/in/photostream/?rb=1 (changes were made), Licence: CreativeCommons, Author: Ray MacLean
SeeSound: Mockups & Prototypes
SeeSound: QOCs
Option 1: Create image by playing music.
- Criteria 1: Configure settings like canvas size and dots per second. This is not mandatory because the application offers some default settings.
- Criteria 2: The user can use voice or musical instruments to produce musical notes. The application offers an approachable way for the user to produce image by sounds.
- Criteria 3: The image is done when the the canvas is full with painted dots. The user is announced when his/ her part of the interaction is done.
- Criteria 4: The image can also be interrupted and considered done by the user through a stop button. This possibility offers flexibility to the user.
- Criteria 1: The user can choose any image from his/ her phone. The application is not restricted to a specific type of images.
- Criteria 2: The user can resize the image. The application adapts after the user's desires, so it can transform big images in shorter tracks. Also, resizing offers a multitude of possible track, so the application will not became dull in user's eyes.
- Criteria 1: The user must have a smartphone capable to connect to NFC tags.
Question: How to play an image?
Option 1: Play it dot by dot.
- Criteria 1: The user must press play, that's a simple move for the user.
- Criteria 2: The user can press pause, offering him control.
- Criteria 3: The user can press stop to start back from the beginning.
- Criteria 1: The user must touch the image to listen to every's dot specific music. The application offers direct manipulation of content to the user.
- Criteria 2: The user can come back to a region of dots that he wants to listen. This way, the users listens the image at his own pace.
DrawByPixel: Project Design
Storyboard
Personas
Type: Primary
Name: Alex Olsen
Background
- Date of Birth:
- Gender: Male
- Location: Stockholm, Sweden
- Work place: Alstom, Civil Engineer
- School: Blekinge Institute of Technology
Main Points
Friendly person.
- Alex likes swimming and basketball
- Alex works in a small company
Goals
- Practical Goals: test painting abilities
- Personal Goals: having fun, testing his patience
Detailed Description
Alex is an active person.
- Alex has experience with applications that use speech to text.
Scenarios
Alex uses DrawByPixel application for fun. He is a creative person, he likes quadratic paintings and pixel art, so drawing this kind of images is very exciting for him.
Alex decided to make a contest with his friends to see which one will be the fastest in drawing a car using DrawByPixel.
References
- Fluid Personas;
- An introduction to personas and how to create them;
- The Persona Lifecycle, Keeping People in Mind Throughout Product Design, John Pruitt & Tamara Adlin;
- This version of Personas Template includes microdata markup using schema.org Schemas.
Userflow
Wireframe
QOCs
Option 1: Change the color before every move
- Criteria 1: It gives flexibility to user when he has a painting with a lot of colors
- Criteria 2: User has to repet the name of the color even if it's not changing.
- Criteria 1: More comfortable for paintings with few colors
- Criteria 2: It's not manadatory to say the color name, unless the user wants to change it
Option 1: Pixel by pixel
- Criteria 1: Appropriate when you have different color pixels next to each other. Is not mandatory to say the length of line.
- Criteria 1: You have to say the lenght of the line before every move. This option is good for paintings with few colors or for quadratic ones.
ColorQuack: Project Design
Storyboard
Userflow
Wireframe
References:
Duck Outline: http://all-free-download.com/free-vector/download/duck_outline_54565.html, Licence: Public domain license , Uploader: gammillian Rainbow in the Clouds: http://all-free-download.com/free-vector/download/rainbow_in_the_clouds_26695.html, Licence: Creative commons attribution license, Author: DragonArtz Designs Cartoon Outline Elephant: http://all-free-download.com/free-vector/download/cartoon_outline_elephant_clip_art_6378.html, Licence: Public domain license, Author: www.openclipart.org |
Personas
Type: Primary
Name: Bailey Jackman
Background
- Date of Birth:
- Gender: Male
- Location: Iasi, Romania
- School: Seven Hills Kindergarten
Main Points
- Bailey likes to play with other kids
- Bailey has disabilities
- In the kindergarten he has arround 20 mates
- Bailey doesn't want to feel different. He wants to be able to do same things that his mates are doing.
Goals
Goals are the reasons users perform tasks, not the tasks.
- Practical Goals: being able to perform the same tasks as his mates.
- Personal Goals: having fun
- Business Goals: get a good education
Frustrations and Pain Points
- Bailey has a problem with his hands and cannot use them for task that require fine moves, like drawing or writing
- Like almost all children, Bailey gets bored quickly, so a slow and hard to use application will lose his attention.
Detailed Description
List any prior experience that is relevant to the persona
- Experience with applications that use speech to text.
- Frequency of use.
Scenarios
Bailey uses ColorQuack application in order to color pictures, exactly like his colleagues.
References
- Fluid Personas;
- An introduction to personas and how to create them;
- The Persona Lifecycle, Keeping People in Mind Throughout Product Design, John Pruitt & Tamara Adlin;
- This version of Personas Template includes microdata markup using schema.org Schemas.
QOCs
Option 1: User will keep naming the color every time he wants to color a new zone
- Criteria 1: It's mandatory to say the name of color even if it's not changing.
- Criteria 2: Good for painting with a lot of colors.
- Criteria 1: It's not mandatory to repet color name if it's not changing.
- Criteria 2: More comfortable for paintings with few colors
Winner
SeeSound
Advantages: - It's interesting and fun. - Any music can produce an image and any image can produce sounds, so the users will not get bored. - Any person that's more or less excited about music can use it. Disadvantages: - For musicians it can be a little frustrating because it's not mandatory to get a beatiful picture from a beautiful song. - As well as for musicians, for painters or graphic designers, it also can be frustrating because the application can't guarantee that from a beautiful picture it will produce a beautiful song. - |
DrawByPixel
Advantages: - Targeted on artistic people with disabilities that can't use physical touch - Offers freedom of drawing everything the user wants - Challenging for the user. We can add in future versions contests or winning badges for the best images drawn by the user. Disadvantages: - Amateur users can get frustrated very quickly because it's too hard to obtain the image they want. |
ColorQuack
Advantages: - Very good for children with disabilities - Useful for teachers in special schools - Offers special account for admins/ teachers that can upload specific images to be colored. Disadvantages: - Mainly, only children will be interested in use of this application |
SeeSound - First release
http://students.info.uaic.ro/~alexandrina.filimonov/hci/DrawBySound/index.html
We tried our best to provide a user guide for this application that we hope you'll enjoy it.
For those of you that are interested in contributing to this project, we created an implementation page that describes our decisions. Our code is public on bitbucket and we're encouraging you to contribute to our project:
https://bitbucket.org/hci-2015/hci-2015/overview
Hope you'll enjoy our project!