Web Site User Interface Design: - PowerPoint PPT Presentation


PPT – Web Site User Interface Design: PowerPoint presentation | free to download - id: 5acc6b-NjU1O


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Web Site User Interface Design:


Title: PowerPoint Presentation Author: Justin Chen Last modified by: Minder.Chen Created Date: 5/20/2000 2:33:38 AM Document presentation format: On-screen Show (4:3) – PowerPoint PPT presentation

Number of Views:100
Avg rating:3.0/5.0
Slides: 30
Provided by: justi88
Learn more at: http://faculty.csuci.edu


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Web Site User Interface Design:

  • Web Site User Interface Design
  • Principles and Development Process
  • Minder Chen

? ?
  • Web Style Guide Basic Design Principles for
    Creating Web Sites, Yale University Press, March
    of 1999
  • http//info.med.yale.edu/caim/manual/
  • Designing Web Usability, Jacob Nielsen, New
    Riders Publishing, Dec. 1999.
  • David Siegel, Creating Killer Web Sites, Second
  • http//www.killersites.com/core.html
  • Collaborative Web Development Strategies and
    Best Practices for Web Teams, by Jessica R.
    Burdman, Addison-Wesley, 1999.
  • Jakob Nielsen, Interface Design for Sun's WWW
  • http//www.sun.com/sun-on-net/uidesign/
  • Jakob Nielsen on web user interface design
  • http//www.useit.com/ http//www.useit.com/a
  • Designing Web Graphics.3 by Lynda Weinman, New
    Rider, 1999
  • Lynda's web site at http//www.lynda.com/
  • http//www.nngroup.com/
  • Webmonkey design site_building at
  • Web Workshop - Electronic Commerce Site Design at

  • http//www.webpagesthatsuck.com/
  • The Seven Keys to Effective Web Sites at
  • Can a site get too sticky? Web Site Makeover
  • http//www.businessweek.com/ebiz/0003/wm0323.htm
  • Usability on the web Isn't a Luxury, at
  • http//www.webofculture.com/home/mistakes.html
    On Globalization
  • http//www.webtechniques.com/archives/2000/09/
    On Globalization
  • Microsoft, The Window Interface Guidelines for
    Software Design, Microsoft Press, 1995.
  • Donald Norman, The Psychology of Everyday Things,
    Basic Books, 1988. (a paperback version of the
    book entitled The Design of Everyday Things is
    published by Doubleday, 1989)
  • Ben Shneiderman, Designing the User Interface
    Strategies for Effective Human-Computer
    Interaction, 3rd edition, Addison-Wesley, 1997.

Additional Web Sites
  • IBM Ease of Use Web Site
  • www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/561
  • www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572Pri
  • Builder.com Web User Interface
  • Webmonkey Design Curriculum www.hotwired.com/webm
  • Webmonkey's Anatomy of a Redesign
  • Jocob Nielsen amd Marie Tahir, Home Page
    Usability 50 Websites Deconstructed
  • Steve Krug and Roger Black, Don't Make Me Think
    A Common Sense Approach to Web Usability
  • Build Your Instructional Web Site,
  • Accessibility standards www.access-board.gov/508.
    htm www.cast.org/babby www.section508.gov

Web Development Layers
  • Web management the usability of a web site is
    more a function of how it is managed than how
    good its designers are.
  • Interaction design
  • Navigation support
  • Web page layout
  • Templates
  • Search
  • Content design The actual writing on the pages
  • The message is the message

10 Mistake of Web Management
  • Not know why
  • Design for your own VPs
  • Letting the site structure mirror your
    organizational chart
  • Outsourcing to multiple agencies
  • Forget to budget for maintenance
  • Treating the web as a secondary medium
  • Wasting linking opportunity
  • Treating the internet and intranet sites the same
  • Confusing market research and usability
  • Underestimate the strategic impact of the web

Web Development Life Cycle
  • Identify goals
  • Every web site has goals
  • Work with clients to define them
  • Multiple goals
  • Identify target users
  • User platforms
  • Technical knowledge of the user
  • Domain knowledge of the user
  • Determine task requirements
  • Design the web site
  • Determine the major themes of the web sites
  • Define navigation maps
  • Implement the web site
  • Evaluate the web site
  • Modify and improve the web site

Roles and Responsibilities
  • Client (Customer)
  • Funding
  • Requirements
  • Constraints
  • Designer
  • Overall tone of the web site
  • Look and Feel
  • Color
  • Interactive Media Developer
  • Build the web pages
  • User Interface Designer
  • Navigation
  • Layout
  • Easy to use (Usability)
  • Project manager
  • Leadership
  • Coordination
  • Assign tasks
  • Manage schedule and budget

Separate content from the interface
  • Developing content independently from the user
    interface allows you to develop both more
    efficiently. If the two are developed
    interdependently, then every change made in one
    would have to be immediately considered in the
    other. Frames, JavaScript, and Java applets all
    allow you to separate the interface from the
    content. For example, the text in this guideline
    is used in both the print-all version and the
    frames version without modification.

  • Web Site Design

Page design sometimes gets the most attention.
After all, with current web browsers, you see
only one page at a time. The site itself is
never explicitly represented on the screen. But
from a usability perspective, site design is more
challenging and usually also more important than
page design. -- Jacob Nielsen.
Navigation Diagram and Page Banner
  • FrontPage 2000

Navigation Bars Buttons
  • Button bars are also the most logical place to
    put links back to your home page, or to other
    menu pages related to the current page. A button
    bar can be built with text (like ours at C/AIM,
    below), or a series of individual button graphics
    at the top or bottom of the page.

Navigation Bars Buttons
Image Map is used. Tab control style is the
standard in the industry for navigation bar.
Site Elements
  • Home page
  • Menu-driven
  • News-oriented
  • Path-based
  • Splash screens or image maps
  • Graphics and texts
  • Submenus pages and subsites (alternative home
    pages for special audiences)
  • Tables of contents, site indexes, site maps
  • Product/service/information pages
  • "What's new" pages
  • Search features
  • Contact information
  • Street address, phone number, fax numbers, maps,
    travel directions, parking information
  • User feedback and virtual community pages
  • Bibliographies and appendixes
  • FAQ (Frequently Asked Questions) pages
  • Customized server error pages

Source Web Style Guide
Adding content to your site
  • Consider creating, borrowing, buying, or
    licensing content from other sources.
  • Producing interesting content is a matter of
    finding time, thinking creatively, writing
    coherently, listening to your customers, and, in
    some cases, asking for their help.
  • Content categories
  • informational content
  • interactive content
  • multimedia content
  • software content.

Informational content
  • Product descriptions
  • Photos and graphics
  • FAQs
  • (Frequently Asked Questions) are a common element
    of most Web sites. They serve as an easy way to
    answer questions about your business and how the
    site works. Good FAQs should dramatically cut
    down on e-mail. Your FAQs should include
    information about the products you sell, how to
    order, what credit cards are accepted, what
    secure transaction system is used, and where to
    find specific information on your site.
  • News sections
  • Reviews
  • Guest columns
  • Newsletters
  • Databases
  • Testimonials
  • Customer-generated articles and reviews

Interactive Content
  • While informational content is a basic offering,
    interactive content gives customers something to
    do and contribute to the contents as well as
    build up a sense of community.
  • Contests
  • Polls
  • Chat Rooms and Message Boards
  • Web boards

Multimedia and Software Content
  • Multimedia Contents
  • Video QuickTime and AVI files
  • Sound AIFF and WAV files
  • Virtual reality photography
  • Software Content programs that users download
    from your site.
  • software demos
  • custom programs
  • shareware.

Web Site Design
Could be more than one level
(No Transcript)
(No Transcript)
Web Site Architecture Design Example
Site Cover for Transaction Sites
Gifts.com Gift Finder
Data Collections from Customers
  • If you make your customers fill out voluminous
    forms, you may find your site littered with
    abandoned shopping carts.
  • By putting your visitors to work as soon as they
    step into your cyber shop making them fill out
    personal information you run the risk of
    running them out faster than they came in. If
    you make it hard to buy something, they won't.
  • Don't treat your site like an exclusive club or
    some kind of secret-handshake society

  • Intuitive interaction
  • Natural task flow
  • Following user's expectation
  • Satisfying user's goal
  • Assimilation vs. Accommodation

Source Phil Green, AMS
  • Trust
  • Comfort
  • Familiarity
  • Clarity
  • Reliability
  • Appeal Flashy, Colorful
  • Function vs. Form

Web Site Evaluation
  • Is the purpose of the site clear?
  • Does the site clearly address a particular
  • Is the site useful and relevant to its audience?
  • Is the site interesting and engaging?
  • Does the site enable users to accomplish all the
    tasks they need or want to accomplish?
  • Can these tasks be accomplished easily?
  • Is the information organized in a way that users
    will expect and understand?
  • Is the most important information easiest to
  • Is textual information clear, grammatically
    correct, and easy to read?
  • Do you have a clear idea of what the site
  • Do you always know where you are, and how to get
    where you want to go?
  • Is the presentation attractive?
  • Do pages load quickly enough?

  • This is the presidential election ballot form
    from election headquarters in Palm Beach County,
    Florida November 8, 2000. The confusion over
    which spot to punch for the Gore/Lieberman ticket
    has created controversy as there were officially
    3,407 votes for Buchanan in Palm Beach County yet
    there are only 304 registered Reform party voters
    in that county. (Marc Serota/Reuters)
About PowerShow.com