prototype
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
*