ui design for the www n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
UI Design for the WWW PowerPoint Presentation
Download Presentation
UI Design for the WWW

Loading in 2 Seconds...

play fullscreen
1 / 57

UI Design for the WWW - PowerPoint PPT Presentation


  • 73 Views
  • Uploaded on

UI Design for the WWW. Creating Effective Sites and Pages. Dilbert’s Design for the Web. User Behaviors: Browse, Search. Search - Seeking to find a particular item, fact or piece of information. -> Buying products, doing research, downloading software, ... Promote ease and speed

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'UI Design for the WWW' - race


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
ui design for the www

UI Design for the WWW

Creating Effective Sites and Pages

user behaviors browse search
User Behaviors: Browse, Search
  • Search - Seeking to find a particular item, fact or piece of information.
    • -> Buying products, doing research, downloading software, ...
    • Promote ease and speed
  • Browsing - Scanning for “interesting” item, fact or piece of information.
    • -> Surfing, doing research, ...
    • Without a goal, attractiveness trumps ease & speed
page site goals
Page/Site Goals

• Convey image or impression

• Meet people

• Raise money/donations

• Entertain an audience

• Promote myself

• Teach people about a topic

• Get famous

• Tell a story

• Convey information/access

employees, shareholders, customers

colleagues, public

• Sell products

• Advertise/market service

• Recruit

• Announce, survey

• Nurture communities

developing a site
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????

identify objectives
Identify Objectives
  • Develop brief statements for the following questions:
    • What is the purpose or goal of the site?
    • Who is your intended audience?
  • Web site sometimes used to describe an administrative organization, not to give the user what they want :-(
generate a topics list
Generate a Topics List

Raw brainstorming of just anything

College of IT, e.g.:

awards

unique points

table of contents

index

contact information

map

buildings

academic units

graduates

alumni

research

classes

people

faculty

students

administrators

equipment

directions

programs

degrees

mission

undergraduates

Put each on index card or post-it note

organize content
Organize Content

Group items into categories

People

Faculty

Students

Undergraduates

Graduates

Staff

Academics

Courses

Undergraduate

Graduate

Degrees

...

Put notecards into piles

provide structure
Provide Structure

Sketch out the high-level organization

of the categories

College

People

Research

Academics

Faculty

Students

Staff

Degrees

Courses

Undergrads

Grads

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

Current Index on COIT Home Page
transform content
Transform Content

Start transitioning to pages, text, images, interaction, etc.

Use

sketches

lists

storyboards

drawings

outlines

Will help you organize yourthoughts and plan

special design challenge
Special Design Challenge
  • On WWW, you don’t know your user’s platform and capabilities
    • Screen size - from PDA to huge
    • Connection speed - from dial-up to really fast
    • Plug-ins
    • What else????
web design dimensions tensions
Web Design Dimensions/Tensions

Tension Between Opposites

Design

Structure

Artist

Aesthetics

Gallery

Scientist

Organization

Library

why web site design matters
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
web site usability problems
Web SiteUsability Problems
  • What problems do YOU have on the web?…
five usability issues
Five Usability Issues
  • Text content
  • Graphic design
  • Navigation
  • Structure
  • Links
  • Others????
text content
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

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

Title

Short Blurbs

Summaries

Overviews

Teasers

.

.

.

Less important info

Background Information

Supporting Details

Long Quotes

INVERSE PYRAMID WRITING STYLE

James Landy,

U Washington

journalists use inverted pyramid
Journalists Use Inverted Pyramid

from

www.nytimes.com

James Landy,

U Washington

zdnet uses inverted pyramid
ZDNet Uses Inverted Pyramid
  • Start with a good concise title
    • Reflect the content
  • Continue with the most important points
    • Use hypertext to split-up information
    • People often won’t scroll or read
  • Use less text
    • 50% less than you would offline
  • Use a simple writing style
    • Simple sentences -- no hype or advertising
  • Use EMBEDDED LINKS to help visitors find more information
  • Use bullets and numbered lists
    • Supports skimming

James Landy,

U Washington

using bullets
Using Bullets

James Landy,

U Washington

graphic design
Graphic Design
  • All the graphic design considerations apply here, too
    • Consistency
    • Visual structure reinforces logical structure
    • Color
    • Typography
images download speed
Images & Download Speed
  • Avoid anything slow
    • Text-only version for slow-speed connections
    • Completely different design for PDAs
  • User expectations differ for
    • Gratuitous decorative images
      • Banners and backgrounds
    • Desired content
      • Map, picture of new grandchild
  • As networks get faster, ground rules change!
navigation
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
navigation1

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

alternative to breadcrumbs
Alternative to Breadcrumbs
  • Site map showing current page
  • Called “Context + Focus”
structure
Structure
  • Connectivity - distance between page pairs, averaged over all pairs
  • Branching factor - how many out-links
  • Long scrollable pages vs linked shorter pages
  • Number of links (clicks) to get to a goal page - major cause of users abandoning a site
sample structures
Sample Structures

Home

Page

web ornetwork

First

Page

sequence

Home

Page

hierarchy

inconsistent structure

Grandstand

Sports Message Boards

Sports Chat Rooms

Sports Flash

Sports Libraries

Fantasy Leagues

Inconsistent Structure
  • Multiple paths from 4 pages
  • No way back from Sports Flash
entry aka tunnel page s
Entry (aka Tunnel) Page(s)
  • Typically a flashy graphic or animation with single link to home page
    • To lure/entice viewer in

Content

Pages

Entry

Page

Site

Map

Home

Page

FAQ

Credits

Exit

Page

entry pages
Entry Pages
  • Controversial
  • Would be OK for a sculptor’s site,
  • Not OK for news or shopping site
  • Always provide “Skip this introduction” link to get past the hype
home page
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
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
Home Page Evolution

Georgia Tech College of Computing

Ancient

home page

Old home page

Currenthome page

structure of pages templates
Structure of Pages - Templates
  • Layout consistency important
    • Graphics, banners, grid, breadcrumbs, navigation aids, search box
  • Design just once, use for all pages
  • Design tools support this - Dreamweaver etc
evaluating templates greeking
Evaluating Templates - “Greeking”
  • Have people guess what the areas are -
  • See: www.useit.com/alertbox/980517.html
topology
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

ReturnGo back

Link all pages to the home page

links
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 style
Link Style
  • Short, terse sound bite

Prices

  • Long textual explanations maybe even with trailing (non-link) clarification

Listing of car prices - Current suggested prices

  • Link provides expectation of where it goes

Be our guest

    • What does that do?
link wording
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.
multimedia links
Multimedia Links

Tell what it is and how big it is

Flight of the Valkyries

Click may get surprise

Bell jingling (.au file, 700,00 bytes)

<IMG SRC=“/icons/sound.gif” ALT=“[SOUND]”> <A HREF=“bell.au”>

Bell jingling (.au file, 700,000 bytes)</A>

Bell jingling (Quicktime movie, 3 meg)

<IMG SRC=“/icons/movie.gif” ALT=“[MOVIE]”> <A HREF=“bell.qt”>

Bell jingling (Quicktime movie, 3 meg) </A>

Cool if cursor changed form accordingto what kind of link it’s over

link issues
Link Issues

• Embedded Links - Links set in surrounding

text. They can be harder for user to pick and use.

• Wrapped Links - Confusing - 3 or 4 items??

Janus Twenty

Investment Company

of America

Royce Premier

• Too many on a page can be confusing and

take too long to parse

• Problem with Image links - Don’t change color to indicate

prior traversal

link issues1
Link Issues
  • Within-page links
    • Can be confusing
      • Is this the same page or a differnet page?
    • Use shorter pages to avoid scrolling
good links
Good Links

James Landy,

U Washington

the killer site has
Site:

• Table of contents / Site map

• Short descriptions of what’s there

• Index (if big enough)

• Search

What else??

Page:

• Navigation bar

• Organization

• Last updated

• Problem report

• E-mail contact

The “Killer Site”Has
top ten web design mistakes of 2005
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

bad design bugaboos
Bad Design Bugaboos

All capitals text

Scrolling sideways

Teeny, tiny text size, especially in italics

Dead links

Telling the user how to set the browser

Poor contrast in text-to-background color

Large typeface (one without impact and contrast)

Animations that don’t stop

Things that look like buttons but aren’t

“Under construction” notices

Neglecting ALT tags for images

Not denoting image sizes

Do-nothing home page

Changing color for the heck of it

Lack of mail to/feedback throughout site

Sites requiring advanced browser or plug in

Blink tags

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 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 Bloopers
jeff johnson s web bloopers1
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 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
jeff johnson s web bloopers2
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
jeff johnson s web bloopers3
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.

Jeff Johnson’s Web Bloopers
sources
Sources

• Designing Web Usability, J. Nielsen, New Riders, 2000.

• 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.

sources1
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
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/