mpi201314

associated blog to the course mobile and physical interaction at tu berlin

Final Week – Presentation & Video

So this is it. We finished our prototype and had to give our final presentation. Additionally we’ve made a video to get a general idea of our work ūüėČ You can have a look at it here.

Week 8 – Testing Prototype with Think Aloud Method

This week we were supposed to test our software prototype with real users. Before we actually did that, we further improved our prototype regarding a better background (more easy to discriminate bubbles and background), several hints for the user to make the game much easier to use (e.g. correct distance to the camera) and understand (e.g. countdown timer).

As learned in the lecture we used the Think Aloud method for our user tests. The idea is that a user gets some tasks he has to try to achieve and during that process he is supposed to comment loudly on what they are thinking regarding the state (What they think is happening?), the goals (What they try to achieve?) and their actions (Why they are doing something specific?). We introduced the method by explaining it to them and giving them the task to make a black coffee at a coffee machine, just to get a feel for it and to get them a coffee to light up their mood ūüėČ

Test Setup
Our test setup was the following. We used a conference room in the TEL building that has a particular big television (see photos below). We asked for some personal information (Gender, Age, Nationality, Profession, Prior Experience) and introduced our method as mentioned above. We recorded their thoughts with a smartphone and took notes while they were playing our game.

Tasks
1. Reach a selection menu
2. Play “Against The Time”

Test Protocols:
Person 1
Gender: Male
Nationality: German
Profession: Student
Major: IT
Age: 25
Experienced with application area. (Was playing with Kinect before – didn’t like it too much though.)
Major Issues:
– Bubble colors need higher contrast – too easily mismatched –> Priority: High
– Restrict Bubble Positions (when feet are red, then red bubbles should be in lower part of the game) –> Priority: Low
– Player Bug: Sometimes 2 player scores are displayed, which was quite irritating for the user (see pictures below) –> Priority: Medium

Person 2
Gender: Female
Nationality: Spanish
Profession: Teacher
Age: 24
No Experience with application area.
Major Issues:
– Tempting Bubble: Further hint needed, that hand should go to bubble

Possible Solutions:
– Better colors according to Human Factors concepts, maybe higher opacity, bubble position detection (no overlays) (not applying yet)
– Restrict bubble positions (not applying yet)
– Player Bug: Restrict player number in certain action screens (do not add everyone)
– Tempting Bubble: hint text or pointer (so that it’s clear)

At the end some photos of our test setup and how the game is looking right now. We think that we’re on a good way, although some details have to be improved as stated above. A proper highscore screen where the user can take a photo of himself is still missing, but we’re working on it ūüėČ
IMG_20140117_151803 IMG_20140117_151808 IMG_20140117_151812 IMG_20140117_151817 IMG_20140117_151828 IMG_20140117_152008

Week 7 – Software Prototype

During the Christmas break we had to start with the real work – coding a prototype. We concentrated on the “initial tempting bubble”, the gameplay and an easy extendable and dynamic code structure (don’t worry – we didn’t spent too much time on the code structure – it’s a prototype after all). After popping the tempting bubble, the game starts. The “tempting bubble” does not move yet and doesn’t look very fancy, but it is a good start and easy to modify and enhance from now on. The game itself you can already play in quite a sophisticated way. You start with one type of bubble respectively one color. To pop the bubbles you can use your hands and feet which have the same color as all the bubbles in the beginning. Originally we wanted to use pictures of colored comic-like limbs, but then it would have been quite complicated to match the orientation of the picture hands and feet with the actual hands and feet so we decided to change that to simplistic circles, which have a higher opacity than the corresponding bubbles. Therefore the user can still make the connection between the limb and the bubble. Right now, the user gets 10 points for every bubble he popped, although the hint for the player (like the gained points appearing where the bubble was popped) is still missing. Also the game will get more serious every 15 seconds. Serious means that the user gets a new color to pop bubbles with and new bubbles in that color will be generated accordingly. Until now there is no choice menu or game ending highscore screen, but these are very easy to add now, with the current code structure. The following screens show a little bit of the “tempting bubble” and the gameplay.

1

2

3

6

6

6

6

6

Week 6 – Initial User Tests

This time we had two weeks to use our paper prototype to do some user testing. Through these interviews we learned a lot about what we could enhance in our application. We upgraded our paper protoype according to user critics. The result can be seen in the pictures at the end of the post.

Summary of Observations:

– Everyone liked the luring bubble in the initial screen
– Users thought, that needing different body parts to destroy certain bubbles is in general a good idea, but color should be used to make the idea clear to a new gamer (see below in ‘Major Findings’)
– Users did not like the idea of choosing a difficulty – choosing different modi would be more appealing
– Users prefered a shadow as highscore picture over a real picture
– Users liked that bubbles would disappear, if they haven’t been destroyed after a while (to deny points)

All in all, the users seemed to like our gameplay, but were concerned that it is easy and quick to understand, so we should focus on making everything more self explaining.

Major Findings/Necessary Changes:

=== ‘Initial’ Screen ===
– Luring bubble should ‘follow’ the user’s shadow and take his/her form gradually (until user is close enough to interact with the next screen).

=== Bubble Popping ===
– The user gets his hands and feet colored. Each bubble also has a color. You can only destroy bubbles, whose color is the same as the body part’s color that tries to pop it.
– Users suggested to create some kind of combo points if you popped three blue bubbles in a row for example.

=== Usability ===
– To make the user understand the gameplay quick, we work with matching colors (bubbles vs. bodyparts) and we start with only one color, adding more over time.
– Maybe big hands (like Mickey Mouse) would be funny and help to understand which body parts can be used
– Disappearing bubbles should fade out, so it is easier to understand why they disappear and further it signalizes the user, which bubbles he should focus on in order to not loose points

=== ‘Difficulty/Modi’ Screen ===
– We decided to get rid of a difficulty choice screen, and instead let the user choose a modi which he/she wants to play in. We got three modi: ‘Against the Time’ (destroy as many bubbles as possible in a certain time frame), ‘Survival’ (you must destroy every bubble in a certain time frame, otherwise you loose) and ‘Multiplayer’ (Two players play against each other – via time or survival mode).
– In each mode, the user starts with a small amount of colors. Colors change over time and get more, in order to make the game gradually more difficult over time.

=== ‘Highscore’ screen ===
– We decided to mark a zone on the screen and once the player enters it, a countdown starts ticking, indicating that a picture will be taken soon.
– Only the top three will be displayed.

Photos of the Paper Prototype:

In the following you can see our revised Paper Prototype. The first three screens display the luring bubble as it gets bigger, when a user approaches the screen.

pp_01_start pp_02_start pp_03_start

At a certain distance the bubble turns into a shadow of the player and the screen changes to enable the player to choose a mode. The three bubbles each represent a mode:

  • two people -> multiplayer,
  • bomb -> survival mode,
  • clock -> agains the time.

If the player hovers a hand over one of the bubbles it displays a name to make clear what kind of mode it is (if the icons are not self-explanatory enough) and a timer will indicate that this game will start. This way the player can still decide to play another mode or at least really knows what kind of mode he is starting.

pp_04_modes pp_05_modes

In our example the player chose ‘Time Attack’. There will be bubbles according to the colors of your hands and feet. (In the first screen the clock is missing!) If a bubble gets popped there will be an indicator for the gained points and a score counter (missing as well in the photos :X). Later there will be even more colors to make it more difficult.

pp_06_game pp_07_game pp_08_game pp_09_game_final

In the end there will be a high score screen and if the user entered the Top 3 he can take a picture of his shadow.

pp_10_highscore pp_11_highscore pp_12_highscore

___

Task Breakdown:

Karl ‚Äď Paper Prototyping, User Tests, Writing Blog

Ray ‚Äď Paper Prototyping, User Tests

Richard ‚ÄstPaper Prototyping, User Tests, Writing Blog

Yvonne ‚ÄstPaper Prototyping

Week 5 – Paper Prototype

This week was all about giving our idea a physical shape. We built a paper prototype which enables us to show other people our application flow.

Building Process:

Here are some impressions of our process. We used an old juice carton as a basis and created a frame that’s supposed to look like a typical display (advertisement window) at a bus stop. The frame is created in such a way, that we can change the displayed content by sliding in and out a screen from above. With pasteboard and Musterbeutelklammern (whatever the English word is :X) we built a movable stickman. Afterwards we created the different screens and used post-its to be more flexible – e.g. the position of the bubbles is not fixed as they are floating around.

IMG_8660

IMG_8659

Flow:

We start by using a moving bubble to win the user’s attention and to lure him closer to the screen. Once the user is close enough, he can select the difficulty he wants to play in. The game starts and the user gains points by destroying bubbles. Over time bubbles spawn faster and once too many bubbles are on the screen, the user loses. A final highscore screen gives the user the opportunity to take a picture of himself associated with his score.

IMG_8662

IMG_8665

IMG_8666 IMG_8667

IMG_8669

___

Tasks:

We were expected to map at least three common user tasks / interaction sequenes of our application in our prototype. These are our tasks:

  1. The user can initially interact with our application as he is approaching the screen.
  2. The user can select a difficulty.
  3. The user is playing the game.
  4. The user can take a picture for his highscore.

All of these tasks are basically possible to proceed with, though  in a primitive way.

Next week we’re going to use our prototype to get some user feedback, so stay tuned.

___

Task Breakdown:

Karl ‚Äď Paper Prototyping, Writing Blog

Ray ‚Äď Paper Prototyping

Richard ‚ÄstPaper Prototyping, Writing Blog

Yvonne ‚ÄstPaper Prototyping

Week 3/4 – Requirements, Storyboarding, Interviews

This time we actually had two weeks to do multiple things. First we had to come up with two different storyboards, simply describing possible contexts of our application. The prototypical idea still is to make waiting more bearable, maybe even fun. So our first storyboard is placed at a bus stop, where you could play our game on one of the public displays.

storyboard1

It’s not only waiting at a bus stop that’s annoying. If you are up to go on vacation and you’re waiting for your flight with your friend (or go to work as a pilot), you both could play the game to kill your time.

storyboard2

___

As a second task we had to thought about interview questions that we could ask potential users (of our target group) to get some feedback on our brainstormed ideas and the storyboards. So the following part will describe our detailed interview agenda.

First Part РIntroduction (5 minutes):
1. Hi, we are students of TU Berlin and we are working on a project regarding new interaction possibilities in known environments. We would like to do a little survey with you which will take about 30 minutes. Is this alright?
2. Do you mind if we record the conversation?
3. Ok, first some general questions:
– Name
– Age
– Gender
– Occupation
– Email (for further stage in our iterative design)

Second Part – Daily life relating to application idea (10-15min):
1. How do you usually go to work/school?
– (by car/feet): Are you using public transport as well?
2. How long do you usually have to wait?
3. How long does it take you to become really annoyed?
4. If it takes long, how do you usually kill time?
5. What kinds of time-killer game do you suggest while waiting for the bus?
6. Would you be interested in some new ways of game interaction to kill your time?
7. Do you think in general people at your age are fast learners when it comes to games?
8. About how much time per week do you usually spend on playing games?
9. Do you have any experience with public games? (If so, which exactly?)
10. Do you have any experience with Microsoft Kinect or camera interaction in general?

Third Part – Application idea (10-15min):
0. Explaining the idea, showing storyboard.
1. Can you imagine playing this game and if not why?
2. What do you think about the tempting bubble in the beginning to lure the player into the game?
3. Which difficulty chooser method you liked most?*
4. Poking, clapping, squeezing, hit from the depth – which method would be more comfortable to destroy the bubbles? (or any other method?)**
5 .Can you imagine playing this with other people (also random people)?
6. Something you’d think we definitely should add?
7. Would you recommend this game to your friends, if it is available?

That’s it. Thank you very much for your time and insights. Here is a bubble for you./eoi

As an addition to the storyboards we have been discussing some features, were we wanted some feedback as well:

*We asked ourselves about the best method to choose different difficulty levels and we come up with some ideas:

  • multiple (three) bubbles with an obviously different degree of thickness, meaning the thicker the bubble you pop to start the game, the tougher it will be
    thickness
  • multiple (three) areas on the screen with a different amount of bubbles you have to pop to start the game, indicating that there will be more bubbles in that particular game you have to pop making it more difficult in general
    multiple_bubbles

**Besides the problem of chosing different levels of difficulty the even more important question is how to acutally pop a bubble. Does it have to be really close to pop a bubble wrap or is it sufficient to pop it just like an air bubble?

  • poking a bubble with a straight hand (or index finger alone)
  • squeezing a bubble between thumb and rest of fingers
  • hit from the depth
  • clapping with both hands
    popping

___

We met our three interviewees somewhere in the Matrix:

Neo is 25 and studies Computer Engineering¬†at TU Zion. When he doesn’t want to fly to university he takes public transport.

Trinity is 23 and probably the best Spanish teacher in Zion. She has to take public transport every day to get to work.

Morpheus is 25 and studies Computer Engineering as well.  To find the wisdom of the Oracle he has to take the bus every day.

They all own a smartphone, are socially well connected and public transport professionals.

___

To get a general feeling and to be really empathetic with our users, we created an Empathy Map:

empathy_map

___

Throughout the interviews we could gain very valuable feedback on:

How to destroy the bubble?
When asking the interviewees about the best method of popping the bubbles, all of them came up with the idea of switching the method from time to time, in order to make the game more fun. If they had to choose only one, the opinions on which method would work best for them varied from person to person.

Primary luring bubble?
The interviewees liked the idea of having a bubble in the primary stage of the interaction to lure the user into the game. One interviewee mentioned to be very careful on how this bubble interacts with the user, to not be mistaken with advertisement.

How to choose the difficulty level?
Further all interviewees liked the idea of choosing the difficulty level via bubbles differing in quality (like thickness).

Quick to understand?
In terms of understanding the game quickly, no one showed doubts that other people his/her age would be able to grasp the basic idea behind the game quickly.

Multiplayer compatible?
Another interesting insight was that the German interviewees were sceptical about playing this game on a bus stop with strangers, whereas the Spanish interviewee did see no problem in that. For the Germans two main questions led to their opinion:

  • Do I really want to move funny in front of strangers?
  • Would the screen be too chaotic, so that proper game interaction would become more difficult?

___

Considering the interview results we came up with three design principles:

  • Our game should be intuitive and diverting.
  • Popping a bubble should be possible in multiple ways to prevent boredom even after several rounds.
  • The game has to be recognized as one and not to be confused with an advertisement.

___

Task Breakdown:

Karl ‚Äď Storyboarding, Interview Questions, Interviews, Interview Results, Writing Blog

Ray – Storyboarding++, Interview Questions

Richard – Storyboarding, Interview Questions, Interviews, Empathy Map, Writing Blog++

Yvonne – Storyboarding++, Interview Questions

Week 2 – Ideation/Persona

This week was all about brainstorming and thinking about our target user group. The first thing we did was creating a mindmap of our ideas, starting in the middle with a cool and interactive app, however it will look like. We thought about games, infotainment, some social aspects and of course fashion. So here we go:

mindmap

We discussed a lot and figured that the bubble game idea would be the most exciting one to implement and play. A general project description could something like this:

Project Description: ‚ÄúBubble Wars‚ÄĚ

Let’s be honest Рeverybody likes bubble wraps, those tiny little buttons you liked to pop when you were a child. After years of protests of environmentalists against all those bubble wrap rolls at every bus stop in the city (obviously wasting plastic for no reason), we found a solution РBubble Wars. It’s an interactive game you can play on any public display.

The idea is to pop all bubbles to clear the game field. If you are not fast enough the bubbles will return and delay your victory. You can pop the bubbles with your hands and feet by touching them. It is even possible to play with multiple players. Some of your popped bubbles will reappear on your opponents game field.

Can you withstand the bubble invasion? Accept the challenge  and do not let them get the upper hand!

bubble

—-

The last thing we had to think about was a decent persona to embody our target group. Therefore we developed a persona skeleton which will describe it. We thought about ¬†“Student Bob”:

persona_skeleton

Task Breakdown:

Karl РBrainstorming, Project Description, Persona

Ray –¬†Brainstorming, Digitalizing Mindmap,¬†Persona

Richard –¬†Brainstorming, Project Description,¬†Persona, Writing Blog

Yvonne –¬†Brainstorming, Persona++

Week 1 – Initial Commit

This will be a blog about a project we are doing for the course¬†Mobile and Physical Interaction¬†at TU Berlin during winter term 2013/14. It will develop over the semester showing our process with the task, which will be an interactive application for a public display. So stay tuned (or turn off, if we’re finished).

Task Breakdown:

Karl – self description, brainstorming

Ray – self description, brainstorming

Richard – created blog, self description, brainstorming

Yvonne – set up communication channels, self description, brainstorming