Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability...
-
Upload
felicity-spencer -
Category
Documents
-
view
221 -
download
4
Transcript of Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability...
![Page 1: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/1.jpg)
Web Design
IT 130
Robin Burke
![Page 2: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/2.jpg)
Outline
Bad design Usability Design Process
High-levelUsability TestingDesign LayersPage Design
![Page 3: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/3.jpg)
Good Design through Bad
Example
![Page 4: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/4.jpg)
Task #1
Arthur Murray Dance Studios What does Arthur Murray teach in its
advanced classes? Find a dance studio in Illinois
![Page 5: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/5.jpg)
Task #2
National Association for Child Development
Find the address of the Chicago chapter of the NACD
![Page 6: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/6.jpg)
Task #3
Monona, WI Pay your real estate taxes online. What's the weather in Monona?
![Page 7: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/7.jpg)
What makes a design bad?
![Page 8: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/8.jpg)
Usability
Learnability first time user
Efficiency speed of task performance
Memorability next visit
Errors accuracy of interaction
Satisfaction pleasant to use
![Page 9: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/9.jpg)
Problems
"Mystery meat" navigation force user to memorize link locations
"Shifting sands" navigation prevent users from learning navigation map
Failure of organization difficult to learn, impossible to remember
Efficiency "cool" graphics interfere with access to
content
![Page 10: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/10.jpg)
More problems
Technology not user focusHistory Wired
Busy-nessArngren Electronics
![Page 11: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/11.jpg)
Benefits of good design
Confused customers leavelost sales
Confused employees waste timetraining costserrors
Spend 10% budget on usability2x quality measures
![Page 12: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/12.jpg)
How to have a good design
Basic principles of user interface Good design process
![Page 13: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/13.jpg)
Basic UI Principles
Cognitive load "don't make me think"
Information hierarchy organize content by importance
Audience "not your problems, my problems"
Effectiveness optimize user experience
Content what do users want from you?
![Page 14: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/14.jpg)
Design Process
Understand what the site is for goal / purposes
Understand who you're reaching audience
Understand what the audience wants content functionality
Structure and present content in pages Test your site
usability
![Page 15: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/15.jpg)
Goal
Many possible purposesconvincesellamuseaesthetic response
Keysite must effectively support goal
![Page 16: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/16.jpg)
Audience
A site will often have more than one audienceExample: CTI site
Audience effectsageformalitylanguage
![Page 17: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/17.jpg)
Content / Functionality
Web site must deliver either or both Content
information / media that the audience wants
Functionalityweb applications that the audience
wants to use Everything else is secondary
![Page 18: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/18.jpg)
Testing
Find typical usersdon't need many
Have them use the designtypical tasks
Watch what they dojust watchusually means record on video
![Page 19: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/19.jpg)
Problem
If we wait until the site is finished to testwe may discover that many things are
wrongexpensive to re-implement
If we don't have the sitewhat do users test?
![Page 20: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/20.jpg)
Prototyping
Possible to test designwithout testing the finished
implementationprototyping
Low-fidelity prototypingworks surprisingly wellall on paper
![Page 21: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/21.jpg)
Low-fidelity Prototype
Hand-drawn pages Can test
page organizationlabels / linksnavigation scheme
![Page 22: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/22.jpg)
Exercise
Low-fi prototypesearch for CTI internship possibilities
• what does the form look like?• what does the response look like?
![Page 23: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/23.jpg)
Layers of design
Site Design overall picture what is the site to accomplish
Content what will go into the site how to maintain / update
Page what will be the look and feel of each page
![Page 24: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/24.jpg)
Site Design
what/who is the site for? what are the logical units of organization? what kinds of navigation are required? what parts of the site are dynamic/static? what parts of the site change most
frequently?
![Page 25: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/25.jpg)
Content Design
Segment the site. For each part,
what is the audience? what classes of documents exist? what content elements belong on each class
of document? what design guidelines are relevant to the
site? how will the navigation scheme be
presented?
![Page 26: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/26.jpg)
Page Design
generate a template for each class of document how should the elements be arranged? what contents need emphasis?
for each page, fill in the appropriate template
![Page 27: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/27.jpg)
Example
www.mlb.com audience content / functionality page design
![Page 28: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/28.jpg)
Navigational metaphor
Principle web pages have no "natural" organizing
principle• designer must supply this
important content = 3 clicks from home page Consequences
Navigation is an essential part of content organization
Must be considered at each layer of design• site = needs / metaphor• content = content relationships• page = placement and organization of elements
![Page 29: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/29.jpg)
Page design
Presenting contenttextform widgetsimagesmedia
Presenting navigational toolslinksother controls
![Page 30: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/30.jpg)
Information hierarchy
Some items on page are more visiblemore visible = more important
Controlling visibilitycontrastwhitespaceposition
background
![Page 31: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/31.jpg)
Contrast
Contrast establishes visibility font
size color background motion
Only works if used sparingly and consistently
![Page 32: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/32.jpg)
also, whitespace
![Page 33: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/33.jpg)
Position
Top leftmost important
Bottomless important
Off-screen (requiring scrolling)least importantmany users will never see
![Page 34: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/34.jpg)
Use Information Hierarchy
Principle Most visible items should be most important Least important items should be least visible
Consequences Page should be structured to keep important
items visible Navigation elements are almost always
important
![Page 35: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/35.jpg)
Examples
anti-exampleanimation hell
exampleSun Micosystems
![Page 36: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/36.jpg)
Free-standing
Principle Page may be seen out of context via a third-party link Page will usually need enough context to stand alone
Consequences casual visitors should see basic information
• who / what / when / where repeating content
• headers• footers• navigation elements
![Page 37: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/37.jpg)
Examples
anti-example: internal page from NACD
example: internal page from Microsoft
![Page 38: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/38.jpg)
Consistency
Principleunderstanding a design takes effortdesigner should amortize this effort
Consequencesbuild templates that can
accommodate the whole range of content
design repetition is not boring• content changes
![Page 39: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/39.jpg)
Examples
anti-example: Monona example: amazon.com
![Page 40: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/40.jpg)
Simplicity
Principleweb pages are smallstick to the essentialsdon't try to pack everything in
Consequenceuse meaningful links to avoid scrolling
![Page 41: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/41.jpg)
Examples
anti-example: Arngren example: Jakob Nielsen example? LA Times
![Page 42: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/42.jpg)
Homework #6
Simple user-centered design exercise Design and draw 4 pages
political site Get 4 subjects to use Report results Pair project
![Page 43: Web Design IT 130 Robin Burke. Outline Bad design Usability Design Process High-level Usability Testing Design Layers Page Design.](https://reader030.fdocuments.in/reader030/viewer/2022032313/56649e735503460f94b72e2f/html5/thumbnails/43.jpg)
Important points
Prototypes must be hand-drawn Report & prototypes must be
submitted in class