Week 5: Interactive Prototype I - ActionScript

What is the key function or interaction for your concept?

The user moves the character (Meow Meow Cat) forward through a series of coloured dots.  Each level increases in complexity and speed, so user speed is a factor.

How does it work?

The user uses the keyboard arrows (up, down, left, right) to move the character.  The keyboard will be modified so each arrow direction represents a different colour.  A timer will be used to test how long it takes users to complete a level.

What do you want to know about your prototype?

• How the player moves (player moves with input, path moves in response to player)
• How long a user takes to complete a level
• Does viewing a timer affect user performance

How do you want IP1 to work?

1. A testing computer is set-up with a modified keyboard.  Coloured dots are blu-tacked on to arrows.
2. User sits down at a testing computer ready to play
3. User reads on-screen instructions:
1. Your keyboard arrows have been replaced with coloured dots.
2. Press the corresponding colour from screen to keyboard to move your character forward
3. Level ends when you reach the end of the row of dots
4. There is a start button that users click to begin game
5. Screen includes character on far left-hand side, a row of coloured dots (four colours), timer in top left corner, start, stop, and reset buttons on top right hand corner.
6. User presses 'coloured' arrow keys to move character forward
7. Time how long users take to reach end of row.
8. Users can restart and replay as many times as they like 
9. User can stop play at any time

What is not included

• Exit button to close program
• Winning or losing (reaching end by a certain time)
• More than one level (and level progression)

Video Prototype: Testing

Outcomes

Users were asked to view the video to provide feedback.  They could pause, rewind, scrub and re-watch.  Users were also encouraged to ask questions at any time.

For the most part users watched the video through.  One person watched twice and a few people stopped at the credits, but for the most part they watch in a linear fashion.

I measured user feedback through observation, in-person questions and an online questionnaire. The data from these measures can be found here.

The feedback I was after was about the concept (was it clear, easy to understand, fun, engaging) and the prototype format (video and audio quality).

Reflections

The video format for the prototype was a fairly quick way to get feedback about the concept without having to code anything.  It was more detailed and controlled than simply telling someone my idea and also allowed for engaging visuals.

I received a number of pieces of useful feedback on the concept through the video prototype. Things I hadn't considered (e.g. how do you start/stop) and extensions of existing ideas (e.g. power-ups).

Testing in class provided a number of willing participants but I know this is not indicative of testing prototypes with 'real' users.  The testing protocol I laid out worked well but I know I was much more informal with users than I have been in other usability testing situations or if they hadn't been my classmates with a similar background to developing the concept (i.e. we all knew it would be a game mash-up or a wearable).

Effectiveness

The protoype was very effective and achieved the goals I set out to assess whether the concept is entertaining and engaging, the gameplay is clear and logical, and to facilitate feedback on the concept.  All three of these goals were achieved.

Constraints

The constraint of the video format meant that users could not interact with the concept, only take in information.  This meant that I had to show how users would interact in the video protoype (i.e. show feet stepping on mat).  I had a number of bits of feedback to say this was clear so I think this constraint was able to be overcome.

The constraint of the testing session was that it was an artificial testing environment.  This meant that users were already prepared with background knowledge (negative) and very willing to give feedback (positive).

Implications

Changes to my concept

• need a start/stop/exit button (or method)
• walkthrough/game instructions might be helpful
• extra 'fun' could be added through power-ups (tuna) or traps (catnip)

Future prototypes

• Interactive Prototype 1  (IP1)
• I will add a start/stop/exit button on screen 
• verbal instructions
•  Further prototypes
• start/stop/exit could be implemented by another method e.g. jumping or double tap on mat??
• think about best way to display instructions, maybe a walkthrough/video/intro
• add in the extra bits (maybe IP3)

Future testing sessions

• Run testing in addition to class session
• Act more formal in-class session (i.e pretend they are real users who know nothing about the background) and print out testing script

Video Prototype: Testing Data

Here is the raw data from the testing sessions that were run for the video prototype of Meow Meow Cat.  The data forms two parts, the observations recorded during the session and the questionnaire users filled out.

Testing session: 19 August (week 4 workshop B)

Users:

• 7 total
• 5 male, 2 female

Observations

User #1

• nodded head as watching 
• bored at credits and stopped
• watched twice through
• second time turned up volume (video volume ok, room background noise was competing)
• comments
• easy to understand explanation
  this is what happens (screen animation) and then this is how you do it (floor mats)

User #2

• laughed at GIFs
• thought character could be anything (changeable) so did not see link between intro (cat GIFs) and the game
• clear on concept
• concentrated on viewing

User #3

• concept was clear
• loves cats so loves concept
• smiled a lot
• interface
• how do i exit?
• how to start/try again?

User #4

• no questions
• smiled, seemed happy at end of video

User #5

• laughed at cats
• had trouble understanding gameplay, said it might be English comprehension
• didn't initially understand how screen and floor-mat related to each other
• had trouble reading and filling out questionnaire
• would like a how-to-play screen

User #6

• lots of concentrating
• no questions about gameplay

User #7

• laughed at cat GIFs
• nodded when floor mat was shown (understanding?)

Observation overview

• GIFs/cat videos were well received, many laughed, lots of smiling throughout, showed engagement with idea
• 6/7 thought concept was easy to understand
• showing the floor mat after the interface screen seemed to be crucial in understanding how the gameplay worked
• instruction/walk-through screen might be helpful
• need to add start/stop button to begin play, allow players to exit and replay.

Questionnaire results

Total responses: 7

Less than 7 responses to an individual question are noted

Q1. Do you understand the concept and gameplay?

Scale '1: No, did not understand at all' to '5: Yes, understood the whole concept'

All - Yes, understood the whole concept (5/5 on scale)

Q2. Are there any parts you did not understand? (4 responses)

• no
• No .. it was all very clear.
• Are there multiple levels?
• Not really no. I guess more information about levels and difficult? But that's something that could always be added later.

Q3. Did the video format help with your understanding of the concept? 

Scale '1: No, it didn't help' to '5: Yes, it did help'

2 users: 4/5 on scale

5 users: 5/5 on scale

Q4. What would you improve about the game? (4 responses)

• Nothing, it seemed good to me.
• It would be interesting to have a two player game where you race your own meow meow cat against others. And there are 'traps' along the way that push your cat backwards. For example, land on catnip and your cat takes a nap for a while. Or gets distracted by a laser pointer.
• Based on the video, i have a clear understanding about how the mechanics work in the game, however, i might miss the part that explain the end for the game(like where to quit?)
• Power ups? Some sort of added fun mechanic to diversify the gameplay.

Q5. Do you agree with this statement?  The concept is engaging. 

Scale '1: Strongly disagree' to '5: Strongly agree'

1 user: 3/5

1 user: 4/5

5 users: 5/5

Q6. Was the audio of a quality that you could understand what was being said?  

• Yes, but maybe a little bit fast
• audio is clear and easy to understand.
• yes. It was very clear.
• Yep. Audio fade at the start was good. Only one part where it was talking about Cats and Experience not sure if it said Catsperzience or not.
• Yes I could understand everything.
• Yes!
• Absolutely

Q7. Were my instructions clear?  (6 responses)

• yes
• Crystal clear
• Yes!
• Yes instructions on how to play the game were very clear. Good Visual representation made it easy to understand.
• Yes
• Yes.

Q8. Any other comments?

• Really cute drawings, cute cat, cute sun, cute concept :)
• the game doesn't have many connection with cats. cats can be changed to anything animal
• None. It looks like a fun concept.
• Not really. Just interested to know about multiple levels.
• Maybe it better to display the game as an example
• That is a great game at all aspect
• Meow ^.^

Questionnaire overview

• Concept was easy to understand
• Video format was helpful
• sound levels were good
• game instructions were clear
• add in more info/details about levels
• add power-ups or traps for more fun
• need an exit button

Week 4: Prototyping Exercises

For the contact class this we were given two exercises to demonstrate our knowledge of different types of prototypes.

Exercise 1: Car Interface

What are the functional components? 

Components relevant to driving behaviour are bolded.

• Dashboard
• Air vents
• Rear view mirror (and flip)
• Air vents
• Side mirrors
• Side console
• side mirror adjusters
• fog lights
• headlight adjusters
• air vents
• window controls
• Steering wheel
• cruise control button
• bluetooth phone buttons
• music control buttons
• window wipers
• indicators
• headlights
• Main console
• odometer
• speedometer
• petrol level
• engine temperature
• gear display
• tachometer
• Center console
• hazard light buttons
• cd player
• sound system display
• air-con knobs (temp, in/outside air, on/off)
• air vents
• Center area
• cigarette lighter
• gear knob
• handbrake
• Below steering wheel
• brake
• accelerator
• clutch (manual)

What are the interactions of those components with the driver when driving?

• Rear view mirror (and flip)
  Check before driving, adjust during driving if needed
• Side mirrors
  Check before driving, adjust during driving if needed
• Steering wheel
  Turn left and right while in motion to direct car 
• Cruise control button (steering wheel)
  Set a constant speed when driving on highway
• Bluetooth phone buttons (steering wheel)
  Answer and end calls while driving
• Music control buttons (steering wheel)
  Adjust music type and volume while driving
• Window wipers
  Turn on and off, adjust intensity if raining
• Indicators
  Push up or down to turn on left or right indicator to signal change in direction
• Headlights
  Turn on or off as light levels indicate
• Speedometer
  Look at to ascertain driving speed
• Petrol level
  Look at to ascertain current petrol levels
• Engine temperature
  Look at to ascertain engine temperature
• Gear display
  Look at to ascertain which gear you are in (in concert with gear knob)
• Tachometer
  Look at to ascertain engine rev
• Air-con knobs (temp, in/outside air, on/off)
  Turn on/off and adjust settings
• Gear knob
  Change gear and tell you what gear you are in
• Handbrake
  Pull on or off to apply handbrake, generally while car is stationery
• Foot brake
  Apply pressure with foot to brake while in motion
• Accelerator pedal
  Apply pressure with foot to accelerate while in motion
• Clutch (manual)
  Apply pressure with foot to assist in changing gears

What would you test? How would you test?

One idea to replace an existing component would be to change how indicators are turned on or off.  Currently, there is a level attached behind the steering that you move up or down to indicate left or right.  Which way is left/right depends on where the car is made. Instead of a lever on one side of the steering wheel, the indicator could be incorporated into the steering wheel itself.  There could be a button on each side of the wheel (left = left, right = right) that would flash when on.  Having a flashing light on the steering wheel may also help when people forget to turn their indicator off.

One way to prototype this would be through an existing car with paper buttons on the wheel.  The user could drive through a set course (like a learning to drive area, not in real traffic) and try pressing the buttons with their thumbs to indicate.  The tester would look at how easy the button is to reach and access.  One problem with this testing is fighting against the ingrained behaviour to use the indicator stick.

Exercise 2: Alarm clock app

Features:

• Set, edit, delete multiple alarms
• daisy chain alarms
• set different tones for differnt alarms
• shake phone to snooze

Types of prototypes:

• Horizontal (wide range of features but no depth - can't tap to another screen)
• Vertical (can go down one action path, many screens but only one task)
• Diagonal (more functionality, multiple paths)

Week 4: Editing

Editing the video wasn't as hard as I'd imagined but it definitely took a lot of time.  There were a few tricks that I picked up (like the only way to import a GIF into a video timeline was to convert it to a mp4 first), but mostly what I learned was around planning (or over-planning to be precise).

My script was good, my storyboard had a plan for all my scenes but what I didn't account for was planning for time.  Our video has to be between 1:30 and 3:00 minutes long and I didn't understand what that meant in terms of planning.  I had a succinct plan and I thought it would be about right for time.  I didn't time my script because sections of it were illustrative/visual only.  In the end, I fell a little short and had to go back and add in an extra scene to make up time.  I would have liked more shots of the game-play stop-animation but ran out of time to go back and shoot more of this (the set-up and filming time were quite long for this section).

Lessons learned:  Shoot more footage than you need.  If you only shoot exactly what you need - you may run short!

Video Prototype: Testing

The video prototype below is about a game mash-up called Meow Meow Cat.
Please follow the instructions below.

1. Watch the video.  You can stop, pause or rewatch at any time.
2. Complete a short questionnaire about this video

Video Prototype: Final Concept

Meow Meow Cat is a single-player, side-scrolling game that requires players to move in a continuous direction, from left to right, through a series of coloured dots.

Mock-up of game display

The player takes on the role of the cat, Meow Meow, whose aim is to reach a ray of sunshine to take a nap.

The game consists of two main items, the digital game interface and a physical floor mat with four large coloured dots.

Paper prototype of floor mat

Players traverse the dots on screen by stepping on the corresponding coloured dot on the floor mat.  The faster you move, the closer you get to the sunshine and complete the level. If you’re too slow, the sun disappears and the game is over. As the levels increase, the complexity of the coloured path and the speed also increase.

Meow Meow Cat is a game mash-up based on Lemmings and Twister.  It takes elements from Lemmings including: cute animal character, movement through levels, and it’s overarching goal, and combines it with elements from Twister including: coloured dots, floor mat interaction, and the ‘game’ choosing the colour order (and complexity).

Week 3: Filming

I had my script, storyboard, supplies and apps ready to go, now I just have to dive in and film!  I'm sure many people don't like filming themselves but I was definitely dreading it.  My script is broken down into four main parts for filming: person straight to camera introducing the concept, stop-animation of the game play using cardboard and whiteboard + voice over, footage of person interacting with the play mat + voice over, and intermittent bits of animation/high res graphics.

The voice over was easy enough, I used the blanket-over-the-head technique from Grumo Media.

The animation/graphics I have done some of and will complete as I edit the film together.

The stop-animation was interesting to put together.  I found I had to re-shoot the beginning sections a few times as I figured things out.  I started out with a lynda.com tutorial on this so was prepared with an app and a plan.  The first few takes I used a stop-animation app but it looked like it reduced the quality of the pictures and I thought it might compromise the end result.  So, I went back and re-set and took images again just using the camera app.  I then realised it wasn't set out quite how I wanted and third time lucky, re-set and re-shot.  I used a piece of cardboard with a line on it to measure the distance from the side of the cat to the edge of the screen.  I also drew lines on the whiteboard to line up the shot, one under the dots that I lined up the bottom of the photo with, the other I used to align the sun with as it moved.  Here is an image with all my guides.

The next section I filmed was talking straight to camera + the interactive mat.  I ended up with quite a set-up to film the introduction with books on stands to get the camera right and a toilet roll cut out to hold the camera in place.  I also had a large sheet of white cardboard set-up to help reflect light.  

I filmed at least a dozen takes, the first few individually, and then once I worked out exactly where to stand, where to look, when I closed (or rolled!) my eyes, I just kept it running and did it over and over again.

Next stop: editing.

Week 3: Video Prototype storyboard

In our workshop session this week we developed storyboards and presented them to the class for feedback. I was hesitant to get started as I was only about halfway through my script.  I had a rough idea of what I wanted to say and had refined some phrases, but it wasn't complete. In class, I was able to quickly sketch up a rough storyboard of what I wanted to appear in each scene.  Having a clearer picture of the different scenes, I was then able to look at my script development.   Jumping straight into storyboarding actually helped me finish my script as I had a better idea of what I wanted to say in the context of when I would say it.

After class, I was able to finish my script easily and much quicker than I think it would have taken me if I hadn't done the storyboard.  When approaching this prototype I had a clear idea of what steps I would take and the order I would take them.  What I learnt from this process was that jumping to the next step before finishing the last isn't always a bad thing and it's important to be flexible.  Sometimes going on to the next thing can help you finish the previous task.

Week 3: Video Prototype concept

After brainstorming a lot over the past week, I was struggling to come up with an idea that:

• i didn't hate
• felt original 
• wasn't just a tweak of an existing game.

I have worked an idea now into a beginning concept that I am finally happy enough to move forward with. As we have a workshop class tomorrow and the video prototype is due next week - I am relieved.  I have also tried to keep in mind how this idea will play out for other types of prototypes (e.g. physical prototype with the makey makey).  

Initial concept: game mash-up

Lemmings x Twister

Elements of Lemmings:

• cute animal
• move through levels 
• overarching goal (in lemmings = don't die)

Elements of Twister

• interact with coloured dots
• more colours = more complexity
• 'game' choose colour order

Game description

• Animal moves through levels trying to reach/chase something (it's pack, it's prey, whatever)
• To move along a level you must pass through/step on coloured circles
• As levels increase complexity of coloured path increases as does time
• To step on coloured circle you must press corresponding key (left, right, up, down corresponds with 4 different colours)
• The faster you move, the closer you get to what you're chasing (pacl)
• As levels increase, speed of pack also increases.

Animal ideas

• Honey badger chasing things to eat "Honey Badger Hurry"
• Wolverine chasing pack
• Cat chasing sunny spot

Week 3: Video critiques

In class this week we viewed other, Kickstarter-style videos and discussed their pros and cons. During this process, it became really clear what to do (and not do) for our own video prototypes.

Video 1: Brisbane Park finder

Communication of concept

First impression
It was average; it wasn't terrible but not a good example to follow.

Can you really understand the concept?
Kind of, I was a little confused.  It took a while to understand the concept.

What questions does it raise?
What was the problem they were solving?  It wasn't clear so didn't make a lot of sense.

What could they do better?
Write a script and vary the visuals, one person talking at the camera got boring after a while. They also used a bit of jargon and acronyms which made the concept harder to understand.

What do they do well?
The prototype look good.

Video Content & Approach

Is there a better way to show certain things?
It would have been good if the prototype matched the description of the audio and also showed the context of use.  Who would use this, when and where?

Quality of the video? Audio?
Video was average quality but audio was not good.  There was a lot of background (traffic?) noise and crows.

Video 1 take-home message: Explain problem and concept upfront, quickly and easily.  Tell people why they should be interested in your product.

Video 2: Google docs in plain English

Communication of concept

First impression
It was good

Can you really understand the concept?
Yes, the explanation went into a lot of detail and included in-use scenarios that I could imagine myself in.  There was a simple story supplemented by visuals.

What questions does it raise?
None

What could they do better?
It felt really long.  It was quite low-fi considering it was Google but the method of communication helped convey how easy it was to use (i.e. you don't need a lot of tech skills).

What do they do well?
Explained the story and scenario of use.  Outlined the problem at the start.

Video Content & Approach

Is there a better way to show certain things?
Could have had actual footage of Google Docs, shown that it is just like working in a word doc.

Quality of the video? Audio?
Great, audio very clear.

Video 2 take-home message: Tell a story, give a good scenario of use, animation doesn't need to be complicated.

Video 3: Pegasus

Communication of concept

First impression
I don't understand what is happening

Can you really understand the concept?
No.  I knew it was a game, and I assumed it was similar to checkers or chess, but I got no details.

What questions does it raise?
What is it exactly (online, IRL)? What does it do? What are the rules? How is the game played?

What could they do better?
There was no story or explanation.  It could have had a voice over with a script to tell the story of the game - what does it do and why would I be interested?

What do they do well?
Prototype was high fidelity.

Video Content & Approach

Quality of the video? Audio?
Music choice was distracting but reminded me a little of GoT.

Video 3 take-home message: Make sure you explain what it is and how you interact with it.  Tell the viewer why would they be interested.

Video 4: Gauss

Communication of concept

First impression
Good video, animation of burning the back of the retinas was a bit confronting.

Can you really understand the concept?
Yes, it was quite repetitive about the dangers of blue light.

What questions does it raise?
Am i slowly burning my retinas, am I going to go blind prematurely?

What could they do better?
Slightly too technical, some information only made sense when compared to other bits of information.

What do they do well?
Good mix of animation and other footage.  Showed interviews and product and process.

Video Content & Approach

Quality of the video? Audio?
Set the scene to appeal to target audience by showing process.  They also used a lot of blue light - subconsciously driving home the point.

Video 4 take-home message: Range of visuals used is good but don't use confronting images that make viewers shy away from product.

Week 2: Prototype ideation 2

Following our first workshop on game mash-up ideation, I had a closer look at the games available and brainstormed more options.

I hadn't played a few of the games before, so I started with playing a game of each of the paper games to gain a better understanding of what each game had to other.

Sprouts: one of the games I hadn't played before

I then thought about elements from different games and combined them to create a new game mash-up.

Week 2: Augmented reality prototype

Our class exercise for week 2 involves combining augmented reality with prototyping to present different interface or display options to the user for an object we would find in the home. We looked at an example of a washing machine interface where the user was able to interact with a physical dial but saw the display change through augmented reality interface.

One example I came across was from start-up Metaio who combined thermal sensors with augmented reality to create Thermal Touch.  Incidentally, it is also another example of a 'Kickstarter' style video for our video prototype.

My idea for an augmented reality prototype is for a light switch.  Regular light switches can be clunky to use, the switches can become sticky (neither off or on position) or require a lot of force to change their state.  The augmented reality prototype I propose combines both a physical and virtual switch.  The phycial part is the wall with a raised frame, similar to the box a regular light switch currently sits in.

Image from Flickr

The virtual part would be the dispaly inside the switch box which presents different options to the user.  Depending on what lighting options are available for a particular room (e.g. dimmers, number of lights), differnt formats could be tested on the display.  You coudl have a flat button that depressed, colour changes for off/on, a swipe motion to turn off or on (similar to the range of touch motions available on a mobile phone), or sliders for dimmers.  While some of these options may already exist, an augmented reality prototype would allow you to easily and quickly test different options for different user needs.

Week 2: Video editing in Photoshop

In week 2, we discussed video creation and editing ahead of our first prototype assessment: a video prototype.  We looked at different types of video (educational vs promotional) and the steps involved to create a video: script, storyboard, voiceovers, video, and music.  Part of the challenge of the video prototype assessment is shooting the video on a mobile phone.  To this end, we were reminded of the importance of shooting horizontally, not vertically!


However, most of the workshop time was spent of learning how to edit video in Photoshop.  We went through a tutorial that covered importing, splicing, transitions and adding audio.

I am quite experienced with Photoshop for image creation and manipulation, but the closest I have previously come to video editing was using Photoshop to create GIFs from video files of my cats.

It was good to learn something new and I am looking forward to practicing this skill over the next few weeks.

Week 2: Prototype ideation 1

This semester we have to create four prototypes.  To generate concepts, we have two options: wearable social interventions or game mash-ups.  In our pracs this week we looked at idea generation for these two options.

Wearable social intervention

In small groups we brainstormed social faux-pas and then possible wearable technologies to either hide or highlight the problem.

Social faux-pas

• interrupting people mid-conversation
• awkward silences
• asking people if they are pregnant (or about age/weight)
• talking with mouth open
• walking/standing on wrong side of footpath or escalator
• walking against the flow of traffic
• stopping in the middle of a moving crowd
• loud music on public transport
• talking on a quiet carriage
• taking phone calls when you talking to other people
• talking to people when they have headphones in
• invading personal space
• reading over people's shoulders

Wearable ideas

• Advanced mood ring shows when you are embarrassed 
• Lapel pin with mic, interrupts conversation if it hears certain words (pregnant, age, etc)
• shirt or button that changes colour is people are too close

Game Mash-ups

We picked one game from each category of paper, board and arcade games, and analysed them. What did we like about the game, how was it constructed, what made it unique?

Paper - Hangman

• points system
• small words are harder
• patterns of choosing letters
• add extra lives by adding extra lines to extend gameplay - house rules
• puzzle
• minimal props 
• rewards knowledge
• competitive

Board - Guess Who?

• Changeable photos
• puzzle by elimination
• can be easy if you choose wrong person
• flicking - physical action
• short, quick game play

Lemmings - Arcade

• Levels are the muzzle
• multiple solutions
• cute, design and noise
• funny

We then picked two games from different categories, pulled out a feature of them, and mashed them to create a new game.

For our game, we chose Hangman (cheating death) and Lemmings (cute/adorable/emotionally invested).

Week 1: What is prototyping?

A prototype is something that represents a product or an idea.  It can have elements of the final product and is something that people can interact with.

Prototypes can take multiple forms and be physical or digital, and can interact with any of the senses. There are many apps which produce high-fidelity computing prototypes, but it also be done using programs like keynote or powerpoint.  A great example of keynote prototyping is this example of Material Design transitions (including download).


Keynote does Material Design (Complete) from Andrew Haskin on Vimeo.

Prototyping doesn't have to be digital and can include things like paper, clay, or props.

Paper prototype being used.  Image via Johnny Holland.

An example of prototyping using the body storming technique.
Image via Flickr.

 How you make a prototype depends on what form it takes.

Prototypes are used to represent solutions, or part solutions, to specific design problems.  They show how a user would interact with a particular element of a design.

The purpose of prototyping is to collect data on your product through testing, on the user's experience and provide feedback as part of design thinking iteration.

Image from Stanford's d.school

It is best to prototype as early as possible, well before implementation, to allow time to go back and apply the things you learned from prototyping.  Prototyping should happen as many times as possible.