prototype

profileNobody
Prac3Briefing.ppt

developing design ideas beginning with people

Prac 3 Briefing: Prototyping

*

OK – so lets find out how it all went

Consider this…..

Human Computer Interaction Design

Human Computer Interaction Design

*

Human Computer Interaction Design

key questions when building prototypes

“What do I want to Learn?”

“What do I want to Communicate?”

Human Computer Interaction Design

When creating prototypes – don’t lose site of two key questions

This will help you keep your focus.

*

Rapid prototyping prac 3 - mission

“Create a high level point of view (define a need), flesh it out with storyboard scenarios, then pick a concrete direction and create a paper prototypes.”

Work in teams

Human Computer Interaction Design

http://us.123rf.com/

Human Computer Interaction Design

*

Prac 3 – 3 parts

Part 1

Negotiation

Decision Making

1 TEAM

Point of view /

Problem/need statement

Part 2 Storyboard

1 design idea each

that addresses your point of view /problem statement

Human Computer Interaction Design

Part 3

Paper prototype

Review all Storyboards

Decide which idea you take further

Create 1 prototype each

Human Computer Interaction Design

Prototyping – what concept?

Sharing……

  • What brief you chose?
  • What activity you observed?
  • What needs/insights you identified
  • Some ideas/inspiration to help
  • what design concept sounds most interesting
  • Stay with ideas

– don’t go to feasability!!!!!!

Human Computer Interaction Design

http://www.almostzara.com/wp-content/uploads/women-queue-shops.jpg

Decide……

10 – 15

mins

Human Computer Interaction Design

STEP 1: PROJECT BRIEF (Group)
Your first step is to share your observations…..

What brief did you choose?

What activity did you observe?

What needs did you identify

What were some of the ideas you proposed to cater for these needs?

As a group decide what design concept sound most interesting to you all. Please don’t consider technical issues at this stage!!!!

*

Prototyping–point of view

Write down…

a point of view or

problem statement

in a sentence of two

If you are stuck - (see prac 1 worksheet – reframe the problem)

A point of view is….

  • a high level design strategy.
  • With good scheduling no one should have to wait in line

  • Waiting in line is intrinsic, boredom is not
  • A grocery story should be more like a farmers market where payment is distributed across food stands

Human Computer Interaction Design

Human Computer Interaction Design

STEP 2: POINT OF VIEW (Group)

Your next step is to write down a point of view in a sentence or two.

What's a point of view? It's your take on a high-level design strategy, before actually designing a solution.

For example, if you wanted to improve the check-out experience at the grocery store, your point of view might be: "waiting in line is intrinsic, but the boredom is not"

This would lead to design solutions like showing news or playing games while waiting in line.

Alternatively your point of view might be "with a good scheduling interface, no one should have to wait in line". This might lead to better ways for employees to staff registers and consumers to pick them.

Or, you might have a totally different point of view: Let's make grocery stores more like farmers' markets, where payment is distributed across the stands that have the food.

 

All of these are valid points of view - they do suggest different possibilities and have different implications/entailments for what constitutes a good design. Write yours down.

 

A good point of view should:

clearly express the problem/opportunity and

make clear what a good solution would accomplish.

http://www.publicdomainpictures.net/top-images.php

*

Prototyping–point of view

A good point of view should:

  • express the problem opportunity,

  • make clear what a good solution will accomplish

Human Computer Interaction Design

http://ts1.mm.bing.net/th?id=H.4837693201909532&pid=15.1

As a group

– write yours

Human Computer Interaction Design

STEP 2: POINT OF VIEW (Group) 

A good point of view should:

clearly express the problem/opportunity and

make clear what a good solution would accomplish.

Coming up with a good point of view that you can successfully tackle in the remaining weeks of the semester is crucial. If you have doubts – then discuss with the lecturer.

 

To develop your point of view…..

Review your observations from Week 2.

What are some of the user needs identified?

What seems interesting to explore further?

What is your point of view regarding this user need.

*

Prototyping - resources

Creating storyboards

Paper Prototyping

Reading: Ch 4 Snyder

Human Computer Interaction Design

Human Computer Interaction Design

There are two resource items that will help you with Step 2 and 3 of this prac.

Internal students – this will be the focus of Thursday class.

*

Prototyping -Storyboards

Human Computer Interaction Design

A storyboard is a comic strip that tells a user story or scenario.

It is a series of drawings about what your interface does and how it its used to accomplish tasks in a real usage scenario

Human Computer Interaction Design

STEP 3: STORYBOARD

Next, come up with a design idea each that addresses/engages your point of view.  Illustrate each of these ideas with a storyboard.

A storyboard is a comic-strip-like set of drawings about what your interface does and how it is used to accomplish tasks in a real usage scenario.

Feeling stumped about how to show your ideas visually?

Be sure to check out the Guide to Storyboarding in the preparation activities. 

A good storyboard should clearly demonstrate who the user is, the usage situation, and the user's motivations for using the interface.

It should show what the user can accomplish with your interface, but it needn't (and often shouldn't) show a specific user interface design.

 

 

*

Prototyping -Storyboards

  • Good storyboards have:
  • Users
  • Usage situation / context
  • Users motivation for using the interface
  • Good storyboards show
  • what the user can accomplish not a specific user interface design

Human Computer Interaction Design

Human Computer Interaction Design

STEP 3: STORYBOARD

A good storyboard should clearly demonstrate who the user is, the usage situation, and the user's motivations for using the interface.

It should show what the user can accomplish with your interface, but it needn't (and often shouldn't) show a specific user interface design.

 

 Each storyboard should require 5-8 panels, and should fit on one A3 sheet of paper.

Use a thick pen (preferably black).

Using a thick pen limits the amount of detail that you can add, forcing you to only draw the most important elements of scenario, user, and interface that communicate your ideas>

A thick pen is a good reminder to focus on the high-level and not sweat the details at this point. There will be time for this in a few weeks!

Ensure you sign your storyboard.

*

Your Storyboards

Each person in the group ……

  • Illustrate1design idea that addresses your point of view with storyboards

Human Computer Interaction Design

5- 8 panels

A3 paper

thick black pen

No colour

Human Computer Interaction Design

STEP 3: STORYBOARD

 

 Each storyboard should require 5-8 panels, and should fit on one A3 sheet of paper.

Use a thick pen (preferably black).

Using a thick pen limits the amount of detail that you can add, forcing you to only draw the most important elements of scenario, user, and interface that communicate your ideas>

A thick pen is a good reminder to focus on the high-level and not sweat the details at this point. There will be time for this in a few weeks!

Ensure you sign your storyboard.

*

Your Storyboards – DECISION TIME

Human Computer Interaction Design

Decide who

Is doing

what in your

group

Human Computer Interaction Design

STEP 3: STORYBOARD

 

 Each storyboard should require 5-8 panels, and should fit on one A3 sheet of paper.

Use a thick pen (preferably black).

Using a thick pen limits the amount of detail that you can add, forcing you to only draw the most important elements of scenario, user, and interface that communicate your ideas>

A thick pen is a good reminder to focus on the high-level and not sweat the details at this point. There will be time for this in a few weeks!

Ensure you sign your storyboard.

*

Your Storyboards – DUE Wednesday

Human Computer Interaction Design

Storyboards

need to be

ready for the

Wednesday

class

Human Computer Interaction Design

STEP 3: STORYBOARD

 

 Each storyboard should require 5-8 panels, and should fit on one A3 sheet of paper.

Use a thick pen (preferably black).

Using a thick pen limits the amount of detail that you can add, forcing you to only draw the most important elements of scenario, user, and interface that communicate your ideas>

A thick pen is a good reminder to focus on the high-level and not sweat the details at this point. There will be time for this in a few weeks!

Ensure you sign your storyboard.

*

Prototyping –Paper prototypes

  • Each person will make a paper prototype
  • Hand drawn – no computers!
  • Focus on concepts
  • Different interfaces – same functionality
  • Complete enough to ‘run’ the prototype
  • Think about flows

Requirements

Human Computer Interaction Design

http://portfolio.splendidnoise.com/images/portfolio_prototype.jpg

Human Computer Interaction Design

Each group member creates a paper prototypes that implement the idea you've decided on. (in this task you are creating alternatives?)

A paper prototype concretely shows all the elements of a user interface, except that it's implemented with pen on paper, as opposed to pixels and code.

To learn how to do this, see the Snyder reading,in Learnline . See also http://paperprototyping.com/references.html for more references.

Prototype interfaces must be hand-drawn, no computer. Again, it helps focus on the concepts, and saves you from wasting hours twiddling pixels.

 

The prototypes should vary in interface, but offer the same basic functionality.

For example, if you were designing a mobile transit application, your two prototypes could display the bus times in two very different ways.

The prototypes should be complete enough to "run" a new user through each task. When you're done, label the prototype you created. It’s important to show interaction flows

Note: the explanation here is very linear, but your process doesn't have to be. You can start making a paper prototype, and then change your mind.

Your prototype doesn't have to exactly align with your storyboard if your ideas have developed as a result of making the storyboard.

 

To summarise:

Each group needs to have a single point of view which is then explored through 3 storyboards. (one each)

One storyboard is then chosen and each person needs to create a prototype that reflects the chosen storyboard.

*

Prototyping –Paper prototypes

Decision time………. Wednesday class

With your group members

  • Review your storyboards
  • Consider the ideas you had
  • discuss strengths & weaknesses of designs
  • decide which one you want to take further

Human Computer Interaction Design

http://portfolio.splendidnoise.com/images/portfolio_prototype.jpg

Human Computer Interaction Design

Decision time.

Set out your storyboards.

With your team members, take some time to discuss the different ideas you've had.

Make sure you discuss the strengths and weaknesses of each design, and how well they achieve the goals set out by your point of view.

As a team, decide which of the ideas you want to take further.

 

You can continue to combine different sets of ideas.

*

Prac 3 summary

Part 1

TEAM

Point of view /

Problem statement

Part 2

Each person creates a storyboard scenario

of a design idea

Human Computer Interaction Design

ForWed

Human Computer Interaction Design

To summarise:

Each group needs to have a single point of view which is then explored through 3 storyboards. (one each)

One storyboard is then chosen and each person needs to create a prototype that reflects the chosen storyboard.

*

Prac 3 summary

Part 4

As a team

present in class

(not assessable)

3 mins

Human Computer Interaction Design

Part 3

Create 1 prototype each

Should relate to storyboards

For Mon wk 4

Human Computer Interaction Design

To summarise:

Each group needs to have a single point of view which is then explored through 3 storyboards. (one each)

One storyboard is then chosen and each person needs to create a prototype that reflects the chosen storyboard.

*

Submit………..

in the discussion board

  • Design brief addressed
  • Point of view
  • Digital photo of storyboards (signed!)
  • Digital photos of prototypes (signed)
  • Internal students – bring artifacts to first class Week 4

In a single file include;:

as a team

label your contributions clearly

Human Computer Interaction Design

Nominate who

will do this

Human Computer Interaction Design

External students - please read carefully your requirements in the assessment task.

*

Prototyping prac – in the workshop

  • Each team will present for 3 minutes your experience of this assessment
  • your decision process
  • what decision
  • something learned
  • most valuable
  • First group self assessment

Human Computer Interaction Design

Human Computer Interaction Design

*

This Week

Monday

  • Profiles
  • Concept review
  • Forming groups
  • Prac 2 – sharing
  • YouTube prototypes
  • Prac3 Briefing

Wednesday

  • Creating Storyboards
  • Creating paper prototypes
  • Readings: Choose either:
  • Houde & Hill OR
  • Snyder, Ch 4

Human Computer Interaction Design

http://jithinvmohan.files.wordpress.com/2009/06/keep_thinking.png

Human Computer Interaction Design

*