Our final video demo….

have fun 🙂

Advertisements

Think! Think Aloud!

This time we took testing our our latest development to a new level. After setting up our big “public display” with a help of a beamer, we switched on our latest prototype and invited 2 guys to test it, think aloud while doing it and give us some feedback and opinions on it. The whole experiment worked really good and we got some very interesting new ideas and upgrade conclusions. Here is how it looked like and what the results are:

Short description of the task:
The task was split into two parts: First the user had to draw a painting with two different colors. No information about interfacing the program or instructions were given. Secondly, the user had to rate his picture.
Additionally the user was asked to express his thoughts.

Tester 1: Hans

Basic information:
–   TU student (economy engineering)
–   24 years old
–   male

Mayor issues [severity rating 0 to 5]: 

I.     the color selection was hard to find [4]
II.    the used button font was hard to read [2]
III.   no help function was available [4]
IV.    the left buttons were hard to reach [4]
V.     the stars for the ranking were hard to reach [4]

Solution for the issues:
I. using another icon would be helpful to identify the color selection, e.g. sample board
II. a standard font could be used to improve readability
III. A help button could be added in the left corner to show an additional screen describing the functions. Alternatively a short video could be used to describe the functionality
IV. Using a smaller area of the Kinect workspace would make the buttons more reachable and would also solve the problems concerning user operation near the edges
V. Use solution IV as reference

Tester 1: Peter

Basic information:
–   TU student (economy engineering)
–   23 years old
–   male

Mayor issues [severity rating 0 to 5]:
I. Pen was not selectable [0]
II. The color selection was hard to reach [0]
III. The brush-tool was misunderstood as a color selection because of the color of the icon [3]
IV. The rating could not be corrected [2]

Solution for the issues:
I. This is no real problem. Feature was just implemented in the prototype
II. Also not a real problem. Could have been avoided by stepping forward. (Alternatively see solution IV from Hans)
III. Using the same colors for all painting tools
IV. Adding an undo button would solve the problem

Both tests gave us some really good feedback, showed us some new issues and made us to find solutions to it.

Time for heuristic evaluation!

We have numbered Nielsen’s Heuristics from 1) to 10), added two new Usability Heuristics and did a severity rating on each Problem from (0) to (4) as described in
here

What we came up with are two new heuristics:
11) Fun
12) Learning

Step 1 (Slideshow without user)
7) Always the same pictures -> not flexible/ not efficient (4)
10) & 12) The user might not get it that he has to step in the sensor area (2)
(maybe line on floor or something)

Step 2 (User steps in sensor field -> Menu and shadow appear)
1) Not visible how many people are in the area and who is being tracked (3)
8) Background is too colorful -> grey mask overlay -> buttons and banner overshadow background (2)
10) No help menu (1); tutorial for all would be best if there is none (3)
12) Depending on the click event no examples how to click -> maybe shadow can be used for examples (3)

Step 3 (User clicks on draw -> drawmenu)
3) Buttons overlay the drawing area (2); no undo/redo (4); Only one exit button and no save button, no clear screen option (4)
4) Mickymouse hand instead of shadow (2) -> maybe hand highlighting in previous menus, buttons position is not consistent, bucket is not a color bucket (0)
4-6) Colormenu button might be irritating because you can’t use it like the rest of the tools (1); button looks strange, doesn’t show the current color
4) Buttons position is not consistent (1);
2) bucket is not a color Bucket (0)
5) Exit button gives no feedback and doesn’t ask if it was pressed intentionally (3)
7) Toolbar is not movable (1)
10) No Help menu (3)

Step 4 (Signature field)
1) & 4) Background is fully visible, might irritate the user (2) -> grey mask over background
2) Nobody knows where the signature will appear (1) -> zooming animations or arrows or text sign your picture
3) No “back” button (4)
7) Signature can’t be altered/changed afterwards; picture can’t be edited afterwards (0)

Step 5 (Picture is saved, information about the online gallery are shown)
1-4) OK Button can be helpful (2)

General
9) No error Messages implemented (3) (what errors are imaginable?)
– user position is not correct -> e.g. tell him to come closer or step back
– user trys to vote a second time -> text: only one vote per session
– to many users in the sensor area -> text: only one user in the sensor area
10) No tutorial or help function (3)

Slideshow
2) Pictures can’t be slided intuitively by making swoosh gestures (1);
there is nowhere shown how many pictures are stored (2); text: 12/20
3) Can’t take back a rating (if misrated or sth.) (1);
everybody might think its a touchscreen (1)
6) Not shown which direction is high ranking and what is low rating (1)

###################################
######### resulting changes #########
###################################
– Animated signature field
– Mask inactive areas
– Show tutorial video
– Dynamic visualization of rating system
– Consistent menu placement
– Insert missing buttons
– Restrict drawing area
– Consistent design for the color menu
– Add confirmation dialog
– Show picture count in slideshow

Video of the Demo Version online!

We are so far – we have implemented the first prototype. The videos present, how the user is going to interact with our program:

The user is now able to:

  • chose between 2 scenarios: drawing/rating
  • paint with a brush
  • save
  • rate
  • control the slideshow and see the given rating

The first prototype is controled with mouse, implementing hand control with kinect is in progress. Stay tuned!

Paperprototype video presentation

A video presentation of our paper prototype:

Scenario1: “Drawing”,
what you see is the “drawing” use-case, where a user comes up to the public display and decides to leave a graffiti:

Scenario2: “Rating”,
in this use-case a potential user comes up to the public display and decides to watch, what others did with “PimpMyWall”. If he is impressed, he leaves rating (max 5 stars):

Design principles and a paper prototype – the lesson learned

We are proud to present our first (paper) prototype:

This pictures are animated, please be patient while loading 😉

On the left SCENARIO1: Painting   On the right SCENARIO2: Rating

After a long discussion we got them, our Design Principles:

  • Interactive -> for easy guidance without reading long manuals
  • Colorfull -> to attract lots of people
  • Exibition -> good rating systim for motivation and artistic purpose
  • Intuitiv -> guiding userinterface / simple / self explaining / easy readable
  • Attractive -> in your face colors / motion / beautifull writings
  • Fun to use -> Multiplayer / Rating system / easy to use / lot of sharing options and lot of drawing options

The lesson learned…
Design improvements:

  • Show the Buttons in the start screen all the time in front of the shadow
  • Highlight the shadows hand
  • back button on the rating screens so the user can return to the start screen and start drawing
  • improved color chosing drop down menu
  • nicer color bucket

Can we ask you few questions…

We have interviewed randomly selected potential users of our public display app, which we met on the streets of Berlin. All of them were young people, who are our target audience. Here are the results:

######################
###### Interview 1 ######
######################

John Doe, 16 years old and living in Berlin Lichtenberg.

He attends high school 10th grade and spends his spare time
doing sports like football, meeting friends and sometimes drawing.
He uses his PC mostly for games, facebook and school work and
also owns a PS3 and a Wii.
During the normal day he mostly ignores commercials on the street.
His attention is catched more by alternating pictures on digital
commercial screens.

One of the most important things about our idea drawn from our storyboard
is the rating system because it gives feedback to the artist.
In his opinion the location for the public display should be a place
not so croudy like a full shopping mall than more a place where
people have time for this.

Findings:
———
– alternating pictures draw attention
– rating system increases the motivation to draw and to look at other peoples drawings
– location for the public display should not be in a too crowdy environment

Design modifications:
———————
– maximized slideshow when noboby is in the sensor area
– focus on rating system

######################
###### Interview 2 ######
######################

Maraike Musterfrau, 17 years old, living in Berlin Marzahn; Highschool, 11th grade.

Her hobbies are dancing and swimming. She owns two computers which she uses mostly
for facebook and schoolwork. She played Wii once with a friend but does not like
the concept very much.

She is very affected by commercial posters. The most annoying thing about these
commercials are the bright and unmatching colours. She wishes for more informing
and structured commercials or little stories.
Most of the time she would use the screens also for commercials and informatios,
e.g. the screens in the subway.

It would be awkward for her to draw with the public display alone but in groups
it would be o.k.. In her opinion people which are not used to this kind of interface would not easily
get the concept.

Findings:
———
– not everybode might get the concept
– multiplayer reduces the awkwardness

Design modifications:
———————
– more guiding and interactive design
– if possible focus on multiplayer

######################
###### Interview 3 ######
######################

Chuck Norris, 19, lives in Berlin-Marzahn-Hellersdorf.

He’s currently graduating, and after that he’s going to study marketing.
In his spare time he does Karate and other sports.

On the PC he mostly reads mails and facebook and does research for school but he seldom plays games.
He’s got almost no experience with console gaming.

Findings:
———
– possibility to visually improve the environment

Design modifications:
———————
– none