Download Document

Paper Prototyping
Source: http://www.webhostdesignpost.com/img/website_storyboarding.jpg
Aim of the session
• To explain the concept of paper
prototyping, introduce you to the
stages of web site development and
demonstrate how storyboards are
created.
Objectives of the session
•
•
•
•
•
•
Define paper prototyping
Define storyboards and wireframes
Explain the benefits of paper prototyping
Define the stages of web site development
Understand the concept of target audience
Explain the technical, visual and content
requirements when designing a web site
• Allow you to create storyboards of your own
Paper Prototyping
• a method of brainstorming, designing,
creating, testing, refining and communicating
user interfaces.
• it fosters development of products that are
more useful, intuitive, efficient and pleasing.
• the technique can be used for web sites, web
applications, software and even hardware.
Paper Prototyping
1.
2.
3.
4.
5.
Meeting with other team members to choose type of
user who represents most important audience.
Determine typical tasks that will be performed by
the user.
Make hand-sketched versions of pages, windows,
etc. needed to perform those tasks (prototype).
Conduct usability tests (ask a user to interact with
prototype).
Discover interface parts that don’t work well and
modify them.
Compositions
•
•
•
Comps (compositions) are visual representations –
usually of a web site – that show the look of the
interface, including colours, fonts, layout, logos,
artwork, and so on.
Mainly used in internal discussions of a site’s visual
design.
Not usually intended (or suitable) for usability
testing because users can’t interact with them.
Source: http://www.google.com
Wireframes
•
•
•
A wireframe defines the page layout for a web site,
showing what content goes where.
Used to determine the page layout and navigation.
When a wireframe with addition of realistic content
could be printed out and tested as a paper
prototype.
Basic wireframe
Source: http://www2.cwrl.utexas.edu/~wolff/sts311s06/projects/p1/g1/
Storyboards
•
•
A storyboard is a series of drawings or images that
represents how an interface would be used to
accomplish a particular task.
Typically used to understand the flow of the user’s
work and how the interface will support each step.
Source: http://www.unf.edu/~ccavanau/SchoolWebStoryColor.htm
Storyboards Task
• You are working for a web design company
• Your boss has asked you to create three storyboards
for a small shoe shop selling men’s and women’s
shoes
• The storyboards should be for a home page, and one
page for men’s and women’s shoes.
• You have 30 minutes to come up with the storyboards.
Navigational aspects
•
A site map can be used to demonstrate how
navigation of your web site will be achieved.
Source:http://www.cabrillo.edu/~dambrosini/189Web/images/StoryboardSample.jpg
Sitemap task
• You are working for a web design company
• Your boss has asked you to create a site map for a
small shoe shop selling men’s, women’s and children
shoes and should include 7 pages of your choice
• You have 15 minutes to come up with the site map.
Benefits of Paper Prototyping
•
•
•
•
•
•
•
Provides user feedback early in the development
process.
Promotes rapid development.
Does not require any technical skills
Encourages creativity in the development process.
Paper prototyping lets you make (and fix) most of the
mistakes before the product goes out the door.
Maximum feedback for minimum effort!
However it also has difficulty in detecting some
classes of problems!
Usability
•
•
•
•
Intention is to make user interface better for its
intended audience and purpose.
The more you give away, the more you have.
You will be able to recognise good usability before
you can define it - “I know usability when I see it".
You may know that you have it right when your
users don’t talk about how usable the product is.
User Requirements Analysis
Stages of web site development
• Analysis
• Design
• Implementation
• Evaluation (Review)
Web designers aim to investigate and
then meet the needs of the client.
User Requirements Analysis
Source: http://web2.concordia.ca/Quality/images/process%20analysis%20cycle.gif
User Centred Design
Stages of web site development
•
User Requirements Analysis
(design specification created)
•
•
•
Prototyping & implementation
Technical testing and publishing
Evaluation
(against the specification)
This design involves the user at every stage of the project.
A prototype is created which the user reviews.
Functions of web sites
Variety of purposes
•
To inform
(e.g. magazines, newspapers, television, radio)
(examples: BBCi, CNN, Virgin Radio, etc.)
•
To promote and sell
(e.g. rock bands, tourist attractions, airlines, banks)
(examples: Amazon, Lufthansa, BA, DirectLine)
•
To interact
(e.g. councils, clubs, technical forums
(examples: NHS, BBC)
Target Audience
Different types of target audience
• Public (general)
• Specified age bands
• Communities of interest
• Shoppers/Travellers
• Internal (company) use
Source: http://www.philoye.com/work/united_redesign/united_redesign_3.shtml
Target Audience Task
• Your client is a small shoe shop
• You are designing a new web site for them
• You have been asked to identify the target
audience for the shoe shop
• You have 10 minutes to come up with
appropriate suggestions.
Designing a web site
Agreed with the client
o Content
o
Visual Design
o
Technical Design
Content
all the information that the site will contain
(including interactive features)
•
•
•
How to contact the organisation
(online form, email address, etc.)
Basic company details
(who and what)
Privacy policy
(if holding visitor information on
record)
Content (contd.)
all the information that the site will contain
(including interactive features)
•
•
•
Information to be provided
(text, video, photographs, sound, etc.)
Main categories of information
(navigational headings)
Style of language
Visual Design
Should specify:
•
•
•
Overall impression
(friendly, formal, casual)
Required Components
(company logo or colours)
Colour Scheme
(background, text, spot colours)
Visual Design (contd.)
Should specify:
•
•
•
•
Text Appearance
(length of paragraphs, text styles, etc.)
Use of images
(for information, decoration or to
create a style)
Use of animation and video
Layout of pages
Technical Design
Concentrates on usability issues:
•
•
•
Navigation
(the way the visitor finds their way
around the site)
Use of search tools
(keyword search boxes, site maps, etc.)
Download times
(pages should download within an
acceptable time)
Technical Design (contd.)
Concentrates on usability issues:
•
•
Browser compatibility
(minimise variations)
Maintenance
(site should be easy to maintain)
Design Requirements Task
• Your client is a small shoe shop
• You are designing a new web site for them
• You have been asked to specify their content,
visual and technical requirements
• You have 25 minutes to come up with a list of
requirements.