Download Prototyping, Visual and Web design

Prototyping
Sketches, storyboards, and other
prototypes
Part 1 Comments

You don’t have to create a large
system that does everything

Focus
make clear your users goal(s)
 Specific problem(s)
 Let that tell you what your
requirements should be

Part 2 Poster
Component of Part 2 grade
 Overview of project, users, tasks
 Perhaps requirements, usability goals
 Perhaps scenarios, storyboards
 Design ideas, sketches, etc.

http://swiki.cc.gatech.edu:8080/cs4750/1383
Design Artifacts

Expressing design ideas:
Make it fast!!!
 Allow lots of flexibility for radically
different designs
 Make it cheap
 Promote valuable feedback


Facilitate iterative design and
evaluation
Prototype representation

How to represent the prototype?







Mockup
Storyboard
Sketches
Scenarios
Screenshots
Limited functionality
GUI interface
Prototype scope

How much to represent?

Vertical - “Deep” prototyping
• Show much of the interface, but in a shallow
manner

Horizontal - “Broad” prototyping
• Show only portion of interface, but large
amount of those portions
Prototype maturation

Low fidelity vs. High fidelity
Amount of polish should reflect maturity
of the prototype
 Why?

Scenarios



Typically narratives, but can be videos,
simulations
Use to explore errors or exceptions
Good for accompanying storyboard or
sketches
Jane likes to take walks every morning. This
morning, as she places her hand on the door,
she hears “75% chance of rain, better bring
your umbrella.” Thankful for the notice, she
grabs her umbrella and heads out for her
morning walk.
Storyboard

Determine the story
A very iterative process through a lot
of initial drafts
 Includes a lot of brainstorming

Sketch on pen + paper
 Generate more polished art for
presentation
 Develop

Use taglines / captions

Keep it short: 4-6 frames ideal
Drawing is hard…

It doesn’t have to be drawings..
Sketches

Don’t forget to
depict unique
physical aspects
of your system
Taken from Builder Bobs team project Summer 04
Mockups
Good for brainstorming
 Focuses people on high-level design
notions
 Not so good for illustrating flow and
the details

Paper prototyping

“Paper prototyping is a variation of usability
testing where representative users perform
realistic tasks by interacting with a paper
version of the interface that is manipulated by a
person ‘playing computer,’ who doesn’t explain
how the interface is intended to work.”
Taken from Paper Prototyping
by Carolyn Snyder
http://www.paperprototyping.com/
The "Computer" highlights the item the user has just selected. A member of the
development team observes and takes notes. (Photo courtesy of Timo Jokela.)
Draw/Paint programs
Draw each screen, good for look
IP Address
OK
Cancel
Thin, horizontal prototype
PhotoShop, Paint,...
Simulations
Put storyboard-like views down with
(animated) transitions between them
 Can give user very specific script to
follow
 Often called chauffeured prototyping


Examples: PowerPoint, Hypercard,
Macromedia Director, HTML
Interface Builders

Tools for laying out windows, controls, etc.
of interface





Easy to develop & modify screens
Supports type of interface you are
developing
Good look and feel
Can add back-end functionality
Examples: Visual Basic, .NET, many apps
for various languages
Specialized
SILK (Sketching Interfaces Like
Krazy) / DENIM
 Sketch-based GUI builder


http://www.open-video.org/details.php?videoid=5018

by James Landay and his former group at
UC Berkeley
Tutorials & Manuals
Create ahead of time to flesh out
functionality
 If it’s difficult to describe, it’s probably
difficult to use!
 Forces designer to be explicit about
decisions
 Putting it on paper is valuable

Prototyping Technique

Wizard of Oz - Person simulates and
controls system from “behind the
curtain”
Use prototype interface and interact
with users
 Behavior should be algorithmic
 Good for simulating system that would
be difficult to build

Review
Medium-fidelity
Low-fidelity
Sketches, mock-ups
Slide shows
Scenarios
Storyboards
Simulations
High-fidelity
System prototypes
Visual design
The “look” of your interface
Role of Graphic Design

What someone initially encounters

Sets a framework for understanding content
Role of Graphic Design

What someone initially encounters

Sets a framework for understanding content
Role of Graphic Design

What someone initially encounters

Sets a framework for understanding content
Graphic Design



A comprehensible mental image
Appropriate organization of data, functions,
tasks and roles
High-quality appearances
• The “look”

Effective interaction sequencing
• The “feel”
Classes at UNCC:
http://www.uncc.edu/schedule/subject/artg.html

Graphic Design

Involves knowledge of:
Sequencing
 Organization
 Layout
 Imagery
 Color
 Typography

Graphic Design Principles
Metaphor
 Clarity
 Consistency
 Alignment
 Proximity
 Contrast

Clarity

Every element in an interface should have a
reason for being there


Make that reason clear too!
White/open space





Leads the eye
Provides symmetry and balance
Strengthens impact of message
Allows eye to rest between elements of
activity
Used to promote simplicity, elegance, class,
refinement
Consistency
In layout, color, images, icons,
typography, text, …
 Within screen, across screens
 Stay within metaphor everywhere


Platform may have a style guide

Follow it!
Example
Home page
Content page 1
www.santafean.com
Content page 2
Alignment

Western world


Novices often center things


Start from top left
No definition, calm, very formal
Grids



(Hidden) horizontal and vertical lines to help
locate window components
Align related things
Group items logically
Grids – use them
Proximity
Items close together appear to have a
relationship
 Distance implies no relationship

Time
Time:
Example
Name
Addr1
Addr2
City
State
Phone
Fax
Name
Name
Addr1
Addr2
City
State
Phone
Fax
Addr1
Addr2
City
State
Phone
Fax
Contrast




Pulls you in – set off most important item
Guides your eyes around the interface
Supports skimming
Add focus
Example
Disorganized
Example
Visual noise
Example
Overuse of
3D effects
Color



Use for a purpose and sparingly
Draw attention, communicate organization,
to indicate status, to establish relationships,
aid search
Use redundant cues



Color-blindness
Enhances performance
Be consistent with color associations from
jobs and cultures
How many small ovals?
Now how many small ovals?
Color Meanings: Contextually
Specific

Red





warm, autumn, Halloween
Blue

cold, off
warm, fall, dirt, earth
Green


happy, caution, joy
Brown

Orange


female, cute, cotton candy
Yellow

Pink


aggression, love
hot, warning, stop, radiation

go, on, safe, envy, lush,
pastoral
Purple

royal, sophisticated,
Barney
Color Meanings: Culturally
Specific
http://www.ricklineback.com/culture2.htm
Legibility and readability

Characters, symbols, graphical
elements should be easily noticable
and distinguishable
Text set in
Helvetica
TEXT SET IN
CAPITOLS
Text set in
Times Roman
Text set in
Braggadocio
Saul Greenberg
U. Calgary
Legibility and readability

Proper use of typography



1-2 typefaces (3 max)
normal, italics, bold
1-3 sizes max
Large
Large
Medium
Medium
Small
Small
Readable
Design components to be
inviting and attractive
Design components to be
inviting and attractive
Unreadable
Design components to be
inviting and attractive
Design components to be
inviting and attractive
Saul Greenberg
U. Calgary
Web Design
Creating Effective Sites and Pages
The Useful Web
Why Web Site Design
Matters




Tests of time to complete shopping tasks at
several major on-line stores - number of
clicks varied from 8 to 50; high
abandonment rate on poor sites
Jakob Nielsen review of comparative tests
on web sites - average 68% difference in
task completion times
Nielsen finds 135% improvement from
redesign effort
see http://www.useit.com/alertbox/20040119.html
Page/Site Goals
• Convey information/access
employees, shareholders, customers
colleagues, public
• Sell products
• Advertise/market service
• Recruit
• Announce, survey
• Nurture communities
• Convey image or impression
• Meet people
• Raise money/donations
• Entertain an audience
• Promote myself
• Teach people about a topic
• Get famous
• Tell a story
•Search: promote ease and speed
•Browse: without a goal, attractiveness trumps efficiency
Developing a Site
1. Identify objectives
2. Generate content - typically a topics list
3. Logically organize content - clusters
4. Provide structure to clusters
5. Transform content to pages with graphic
design
6. Test and iterate
So what else is new????
Current Index on COIT
Home Page


Departments
 Computer Science
 SIS
Institutes



Faculty/Staff



Faculty Listing
Staff Listing
Research Areas
Charlotte Visualization Center
…

Search
Bioinformatics
…

Computer Science
Research Labs




Information
 Programs
 News
 Events
 Undergraduate Admissions
 Graduate Admissions
 Contacts
 Student Laptop Program
 Dean’s List
 Bioinformatics Intitiative





Undergraduate Program
Master’s Program
Ph.D. Program
Graduate Certificate
Software and Info. Systems





B.A. SIS
Master’s in IT
Ph.D. in IT
Certificate Programs
Research Projects
COIT Homepage
Text Content




Attention spans are short on the web - users
want instant gratification, and reading is 25%
slower on screen than on paper
So…
 People tend to skim web pages, just read
headers, highlights, selected paragraphs
Therefore
 Tune your writing style to this reality
J. Nielsen column on writing for WWW


http://www.useit.com/alertbox/9710a.html
www.useit.com/alertbox/9703b.html
INVERSE PYRAMID WRITING STYLE
Inverse Pyramid Writing
This is the short blurb describing
the article
Most important info
This is some nonsensical text This is some nonsensical text This is some nonsensical
text To see how well this thing w This is some nonsensical text This is some nonsensical
text This is some nonsensical text This is some nonsensical text This is some
nonsensical text
Title
Short
Blurbs
To see how well this thing works
This is some
nonsensical text This is some nonsensical
text This is some nonsensical text Does this work at all? I don’t know. I am in love with
XXX To see how well this thing
works This is some nonsensical text This is some
Summaries
nonsensical text This is some nonsensical text This is some nonsensical text This is
some nonsensical text Does this work at all? I don’t
Overviews
know. This is some nonsensical text This is some the dog is barking nonsensical text
This is some nonsensical text DoesTeasers
this work at all? I don’t know. What is love? What is
the good life? What is, and is not? That which
.
is, is. The world is all that exists. Nothing unreal
. exists, metaphysics law #1. This is some
the the the the nonsensical text This is some nonsensical text Does this work at all? I
don’t know. This is Is there a god? Are we a. quantum accident? Will we ever know? Are
there questions that should never be asked? What is the nature of goodness? Why are
we so mean to each other? How can we be so cruel to one another?
Less important info
This is some nonsensical text This is some nonsensical text This is some nonsensical
text To see how well this thing works This is some nonsensical text This is some
nonsensical text This is some nonsensical text This is some nonsensical text This is
some nonsensical text
To see how well this thing works
Background Information
Supporting Details
This is some nonsensical text This is some nonsensical text This is some nonsensical
text This is some nonsensical text This is some nonsensical text This is some
Quotes
nonsensical What is good inLong
life, he asks? That
is a question we may never have an
answer to. is some nonsensical text This is some nonsensical text This is some
James Landy,
U Washington
Journalists Use Inverted Pyramid
from
www.nytimes.com
James Landy,
U Washington
Navigation
Often the most critical element
 Often the weakest part of a web site
 Problems due to

Users don’t have domain knowledge
 Site structures don’t meet expectations

www.amazon.com
Navigation

Give user understanding of
information space structure
Table of Contents (Site Map)
 Search, Index, Breadcrumbs
 Navigation bar - tabs or similar

www.washingtonpost.com
Home Page

Most important page at your site







Critical for image
Entices viewer to look at more
Give viewer a good idea of what can be
found at the site
Make sure vital content is “above the fold”
Place real content on home page
How much graphics do you use?
If links are in images, have parallel text
labels near page bottom
Home Page Design Has
Evolved
From graphics-rich with few links –
mostly to top-level pages of major
subsections
 To link-rich pages that give access to
real content in one click, plus have
some content

Home Page Evolution
Georgia Tech College of Computing
Ancient
home page
Old
home page
Recent
home page
New
home page
Example evolution
Evaluating Templates “Greeking”


Have people guess what the areas are See: www.useit.com/alertbox/980517.html
Topology
Abolish linear thinking, that is,
dependence on prior pages
Search engines can send user straight
to any page ==> Each page should be
able to stand on its own
Return
Go back
Link all pages to the home page
Links

Success of link depends on
How well user can predict where link
will lead
 How well user can differentiate one
link from other nearby ones
 Useful content at other end of link

Link Wording

Beware the famous “here”
Click here to learn about my BMW Z3
vs.
I drive fast in my BMW Z3

When a link will take someone a good
distance, use word “jump”
For more on iguanas, jump to Fred’s iguana
page.

Say explicitly where link is

Check out the tax calculator by Money
Magazine.
Top Ten Web Design
Mistakes of 2005











Legibility Problems
Non-Standard Links
Flash
Content That’s Not Written for the Web
Bad Search
Browser Incompatibility
Cumbersome Forms
No Contact Information or Other Company Info
Frozen Layouts with Fixed Page Widths
Inadequate Photo Enlargment
Also – Pop ups
Jacob Nielson
http://www.useit.com/alertbox/designmistakes.html
Jeff Johnson’s Web
Bloopers
Chapter 1 – Content Bloopers
1. Home page identity crisis. Home page
doesn’t clearly identify organization or its
purpose.
2. Confusing classifications. Content
categories seem arbitrary or nonsensical.
3. Unhelpful descriptions. Content
descriptions do not support choosing
among items.
4. Conflicting content. Information in
different parts of site disagrees.
5. Outdated content. Content on site is outof-date, but not clearly marked as archival.
6. Missing or useless content. Information
users need to accomplish goals is missing.
7. Unfinished content. Blatantly incomplete
areas of site.
Chapter 2 – Task-Support Bloopers
8. Redundant requests. Asking users for the
same data repeatedly.
9. Requiring unneeded data. Making users
provide non-essential information.
10. Pointless choice. Offering or requiring
meaningless choices.
11. Omitting important options. Choice
excludes options some users need.
12. Clueless back-end. Back-end lacks
"common sense" data needed to support
user tasks.
13. Dead-end path: Now you tell me!
Allowing users to go down a path towards
a goal before telling them it is unavailable.
14. Agonizing task-flow. Accomplishing tasks
requires many unnecessary, distracting
steps.
Jeff Johnson’s Web
Bloopers
Chapter 3 – Navigation Bloopers
15. Site reflects organization chart. Site
structure reflects organization’s structure
or history.
16. Numerous navigation schemes. Many
ways to navigate, but no clear guidance.
17. Deceptive duplicate links. Making users
think: "Do those go to the same place?".
18. Not linking directly. Specific-looking links
that go to generic pages or home pages.
19. Lost in space: Current page not
indicated. Page doesn’t clearly show
where user is.
20. The circle game: Active link to here.
Page has active link to itself.
21. Missing links: It’s BACK or nothing.
Page provides no navigation links.
Chapter 4 – Form Bloopers
22. Making people type. Using a text field for
a choice setting.
23. Intolerant data fields. Text field is too
picky about how data must be typed.
24. No defaults. Controls and form fields with
no default value.
25. Faulty defaults. Controls and form fields
with the wrong default value.
26. Compulsory clicking: No default text
input focus. Users can’t just start typing.
27. Lame label placement. Labels misaligned with, or too far from, data fields.
28. Checkboxes or radiobuttons?
Checkboxes misused as radiobuttons, or
vice-versa.
29. Looks editable but isn’t. Using standard
data-input controls for display-only data.
30. Mysterious controls. Operation of
controls is unclear due to poor labeling,
poor layout, or uniqueness of controls.
Jeff Johnson’s Web
Bloopers
Chapter 5 – Search Bloopers
31. Baffling search controls. Search options require
knowledge of computer or industry-insider
concepts.
32. Dueling search controls. Competing search
boxes on page, with no guidance.
33. Hits look alike. List of found items cannot be easily
distinguished by scanning.
34. Duplicate hits. List of found items contains
duplicates.
35. Search myopia: Missing relevant items. Items
that should be found are not.
36. Needle in a haystack: Piles of irrelevant hits.
Many items don’t match search criteria.
37. Hits sorted uselessly. Sort-order of found items
doesn’t support user tasks.
38. Crazy search behavior. Modifying search criteria
yields unexpected results.
39. Search-terms not shown. Not showing what
search terms produced these results.
40. Number of hits not revealed. Not showing how
many items were found.
Chapter 6 – Text & Writing Bloopers
41. Too much text. Overly-verbose
instructions, messages, or link-labels.
42. Speaking Geek. Computer jargon in error
messages, commands, or instructions.
43. Calling site visitors "user" . Using the
computer jargon term "user" on a website.
44. Insider jargon. Using the vocabulary of
industry experts, rather than that of users.
45. Variable vocabulary: Different words for
the same thing. Inconsistent terms.
46. Inconsistent style. Text on site does not
follow consistent style rules.
47. Typos and grammos: Sloppy writing.
Failing to check and fix text before going
live.
Jeff Johnson’s Web
Bloopers
Chapter 7 – Link Appearance Bloopers
48. Links don’t look like links. Links not
marked well enough, so users miss them.
49. Non-links look like links. Non-link text is
underlined; or non-link graphics look
clickable.
50. Bizarre buttons: Click target smaller
than it seems. Entire boxed area
surrounding link label looks like part of
button, but only label accepts clicks.
51. Wrapped links: How many? Multi-line
text links.
52. "Click here": Burying links in text.
Important navigation links embedded in
prose.
53. Been there, done that? Can’t tell.
Traversed links not clearly marked.
Chapter 8 – Graphic Design & Layout
Bloopers
54. Tiny text. Text typeface too small for many
users to read.
55. Camouflaged text. Text contrasts poorly
with background.
56. Centering everything. Centering prose
text, bullet items, controls, or data fields.
57. Unobtrusive error messages. Error
messages easy to miss due to poor
placement.
58. Shades of beige: color differences too
subtle. Relying on small color differences
to convey important meaning.
59. Dead or Alive? Active buttons look
inactive. Buttons appear "grayed out" but
aren’t.
60. Terrible tabs. Navigation tabs don’t look
and act enough like real tabs.
Sources
• Designing Web Usability, J. Nielsen, New Riders, 2000.
•Web Bloopers, J. Johnson, Morgan Kaufmann, 2003.
•The Non-Designer’s Web Book, R. Williams and J. Tollett, Peachpit
Press, 1998.
• Web Style Guide, P. Lynch and S. Horton, Yale Univ. Press, 1999.
• Creating Killer Web Sites, 2nd edition, D. Siegel, Hayden Books, 1997.
• Web Site Usability: A Designer’s Guide, User Interface Engineering,
North Andover, MA, 1997.
• Web by Design, The Complete Guide, M. Holzschlag, Sybex, 1998.
• Web Concept & Design, C. Waters, New Riders, 1996.
• Hot Wired Style, Principles for Building Smart Web Sites, J. Veen,
Wired Books, 1997.
• The Web Design Wow! Book, J. Davis and S. Merritt, Peachpit Press, 1998.
• How to Set Up and Maintain a Web Site, L. Stein, Addison Wesley
1997.
Sources

Jakob Nielsen’s home page, hotlist, recommended books



www.webtechniques.com
Web design fundamentals


http://www.web-bloopers.com/index.php
Web Techniques magazine


webreview.com/wr/pub/
Web Bloopers (Jeff Johnson)


www.useit.com/hotlist/
Web Review Design tips


www.useit.com/jakob/
www.useit.com/books/
www.pantos.org/atw/basics.html
User Interface Engineering

www.uie.com
Good/Bad Sites
Good
Creating Killer Web Sites
www.killersites.com
Project Cool site of the day
www.projectcool.com
Bad
Web pages that suck
http://www.webpagesthatsuck.com/
Midterm
Multiple choice, true-false, fill-in-blank
 Short answer
 One longer answer
 Use slides to determine topics, books
to add details

Midterm-topics










Importance of ethics, IRB
Paradigms of computing
History – important inventions, people
Design process models
Requirements techniques
Task analysis
Models of human, cognition
Predictive models
Design principles and guidelines
 General, DOET, visual, web
Prototyping techniques