View
226
Download
0
Tags:
Embed Size (px)
Citation preview
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 designsMake it cheapPromote 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
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.”
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.)
Taken from Paper Prototyping by Carolyn Snyderhttp://www.paperprototyping.com/
Draw/Paint programs
Draw each screen, good for look
Thin, horizontal prototype PhotoShop, Paint,...
IP Address
CancelOK
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 usersBehavior should be algorithmicGood for simulating system that would
be difficult to build
Review
Low-fidelity Medium-fidelity High-fidelity
Sketches, mock-ups Slide shows
Simulations
System prototypes
Scenarios
Storyboards
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
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 guideFollow it!
Alignment
Western world Start from top left
Novices often center things No definition, calm, very formal
Grids (Hidden) horizontal and vertical lines to help
locate window components Align related things Group items logically
Proximity
Items close together appear to have a relationship
Distance implies no relationship
Time:
Time
Example
Name
Addr1
Addr2
City
State
Phone
Fax
Name
Addr1Addr2
CityState
PhoneFax
Name
Addr1Addr2
CityState
PhoneFax
Contrast
Pulls you in – set off most important item Guides your eyes around the interface Supports skimming Add focus
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
Yellow happy, caution, joy
Brown warm, fall, dirt, earth
Green go, on, safe, envy, lush,
pastoral Purple
royal, sophisticated, Barney
Color Meanings: Contextually Specific
Red aggression, love hot, warning, stop, radiation
Pink female, cute, cotton candy
Orange warm, autumn, Halloween
Blue cold, off
Legibility and readability
Characters, symbols, graphical elements should be easily noticable and distinguishable
Text set in Braggadocio
Text set in Helvetica
TEXT SET INCAPITOLS
Text set in Times Roman
Saul GreenbergU. Calgary
Legibility and readability
Proper use of typography 1-2 typefaces (3 max) normal, italics, bold 1-3 sizes max
LargeMediumSmall
LargeMediumSmall
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 GreenbergU. Calgary
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 objectives2. Generate content - typically a topics list3. Logically organize content - clusters4. Provide structure to clusters5. Transform content to pages with graphic
design6. Test and iterate
So what else is new????
Current Index on COIT Home Page Departments
Computer Science SIS
Institutes Charlotte Visualization Center …
Research Labs Bioinformatics …
Information Programs News Events Undergraduate Admissions Graduate Admissions Contacts Student Laptop Program Dean’s List Bioinformatics Intitiative
Faculty/Staff Faculty Listing Staff Listing Research Areas
Search
Computer Science 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
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
This is the short blurb describing the article
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
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 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
know. This is some nonsensical text This is some the dog is barking nonsensical text This is some nonsensical text Does 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?
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 textTo 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 This is some nonsensical What is good in 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
Most important info
Less important info
.
.
.
TitleShort BlurbsSummariesOverviews
Teasers
Background InformationSupporting Details
Long Quotes
Inverse Pyramid Writing
James Landy,U Washington
INVERSE PYRAMID WRITING STYLE
Navigation
Often the most critical element Often the weakest part of a web site Problems due to
Users don’t have domain knowledgeSite structures don’t meet expectations
Navigation
Give user understanding of information space structureTable of Contents (Site Map)Search, Index, BreadcrumbsNavigation bar - tabs or similar
www.washingtonpost.com
www.amazon.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
Ancienthome page
Old home page
Home Page Evolution
Recenthome page
Georgia Tech College of Computing
Newhome page
Evaluating Templates - “Greeking”
Have people guess what the areas are - See: www.useit.com/alertbox/980517.html
Abolish linear thinking, that is,dependence on prior pages
Search engines can send user straightto any page ==> Each page should beable to stand on its own
Return Go back
Link all pages to the home page
Topology
Links
Success of link depends onHow well user can predict where link
will leadHow well user can differentiate one
link from other nearby onesUseful 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
http://www.useit.com/alertbox/designmistakes.html
Jacob Nielson
Jeff Johnson’s Web BloopersChapter 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 out-of-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 BloopersChapter 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 Bloopers22. 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 mis-
aligned 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 Bloopers31. 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 BloopersChapter 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.
• 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
Sources
Jakob Nielsen’s home page, hotlist, recommended books www.useit.com/jakob/ www.useit.com/hotlist/ www.useit.com/books/
Web Review Design tips webreview.com/wr/pub/
Web Bloopers (Jeff Johnson) http://www.web-bloopers.com/index.php
Web Techniques magazine www.webtechniques.com
Web design fundamentals www.pantos.org/atw/basics.html
User Interface Engineering www.uie.com
Good/Bad Sites
GoodCreating Killer Web Sites www.killersites.com
Project Cool site of the day www.projectcool.com
BadWeb pages that suckhttp://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