Creating a usable web site
Sponsored Links
This presentation is the property of its rightful owner.
1 / 20

Creating a Usable Web Site PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

Creating a Usable Web Site. Royce Shin - Web Development University of Minnesota. Introduction. Describe the general process Rules of thumb in design. Graphic Designer Visual Designer HTML Production Engineer Interaction Designer Navigation Designer

Download Presentation

Creating a Usable Web Site

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

Creating a usable web site

Creating a Usable Web Site

Royce Shin -

Web Development

University of Minnesota



  • Describe the general process

  • Rules of thumb in design

Who s involved in building a web site

Graphic Designer

Visual Designer

HTML Production Engineer

Interaction Designer

Navigation Designer

Information Architect

Usability Specialist


Technical Writer

Software Engineer

Test Engineer

Web Server Administrator

Database Administrator

Who’s Involved in Building a Web Site?

How do i compete

How Do I Compete?

  • Don’t, start small - find your niche

  • Publish original, credible content and good links

  • Listen to and connect with your audience

  • Update frequently

  • Keep loading small and fast

  • Test your usability throughout

Starting out

Starting Out

  • Define your goal

  • Know your audience - focus group

  • Gather your content

Design structure

Design Structure

  • Develop the information architecture

  • Develop naming conventions and titles

  • Build the site map

  • Work out navigation

  • Create outlined content pages

  • Usability test the structure on paper

Design protosite

Design Protosite

  • Design pages

  • Create HTML-only protosite

  • Usability test the protosite



  • Optimize graphics

  • Incorporate graphics and content

  • Add extras

  • QA testing



  • More usability

  • Update content

  • List with search engine

  • QA testing

Web design

Web Design

  • HTML / Scripting

  • Graphic design / Layout / Graphics

  • Typography

  • Information architecture

  • Navigation

  • Content writing

  • Usability

Creating a usable web site


  • Test in multiple browsers throughout

  • Avoid frames if possible

  • Break up long tables

  • Label important images with ALT

  • Descriptive blue links

  • Small pages(20-30k)

  • Learn browser limitations



  • Test in multiple browsers throughout

  • Be aware of differences between JavaScript and JScript

  • Try not to require JavaScript

  • Be aware of limitations in different versions

Graphic design layout graphics






Optimize images


Web-safe palette

Graphic Design / Layout / Graphics



  • Use restraint

  • Contrast, don’t conflict

  • Conservative serif font for content

  • Use HTML text if possible

  • Black on unsaturated light background for content

  • Be careful with decorative fonts

Information architecture

Information Architecture

  • Tree is standard for content-driven sites

  • Balance width and depth

  • Categorize into comprehensive, yet limited set of topics

  • Test this for usability



  • Always link home

  • Show users where they are

  • Allow users to traverse back up the tree

  • Keep navigation consistent

  • Search engine is a must for over 200 pages

Content writing

Content writing

  • Highlight keywords

  • Meaningful sub-headings

  • Bulleted lists

  • One idea per paragraph

  • Inverted pyramid

  • Half the word count of print

Usability top ten mistakes in web design

Using frames

Gratuitous use of bleeding-edge technology

Scrolling text, marquees, and constantly running animations

Complex URLs

Orphan pages

Long scrolling pages

Lack of navigation support

Non-standard link colors

Outdated information

Overly long download times

Usability - Top Ten Mistakes in Web Design

The ugly truth recent user demographics

Easy majority use IE

27% sometimes use browser other than IE or Netscape

33% using browser older than 4.0

90% using Windows

19% not using JavaScript

20% have 28k connection or slower

89% have at least 16-bit color

25% have 14-inch or smaller monitors

13% have 640x480 monitors, 55% have 800x600 monitors

61.4% cite speed as a major problem

45.4% cite finding new info as a major problem

30% cite finding known info as a major problem

79% of users simply scan new pages

The Ugly Truth - Recent User Demographics

Creating a usable web site


  • HTML -

  • Design -

  • Usability -

  • Users -

  • Web-safe palette -

  • JavaScript -

  • Login