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

Creating a Usable Web Site PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on
  • Presentation posted in: General

Creating a Usable Web Site. Royce Shin - [email protected] 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

Royce Shin - [email protected]

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

Information Architect

Usability Specialist

Copywriter

Technical Writer

Software Engineer

Test Engineer

Web Server Administrator

Database Administrator

Who’s Involved in Building a Web Site?


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

  • Define your goal

  • Know your audience - focus group

  • Gather your content


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 pages

  • Create HTML-only protosite

  • Usability test the protosite


Production

  • Optimize graphics

  • Incorporate graphics and content

  • Add extras

  • QA testing


Maintenance

  • More usability

  • Update content

  • List with search engine

  • QA testing


Web Design

  • HTML / Scripting

  • Graphic design / Layout / Graphics

  • Typography

  • Information architecture

  • Navigation

  • Content writing

  • Usability


HTML

  • 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


JavaScript

  • 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


Alignment

Repetition

Contrast

Balance

Proximity

Optimize images

JPG vs. GIF

Web-safe palette

Graphic Design / Layout / Graphics


Typography

  • 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

  • Tree is standard for content-driven sites

  • Balance width and depth

  • Categorize into comprehensive, yet limited set of topics

  • Test this for usability


Navigation

  • 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

  • Highlight keywords

  • Meaningful sub-headings

  • Bulleted lists

  • One idea per paragraph

  • Inverted pyramid

  • Half the word count of print


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


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


URLs

  • HTML - http://www.w3.org/MarkUp/

  • Design - http://www.wpdfd.com/wpdhome.htm

  • Usability - http://www.useit.com/ http://www.asktog.com/ http://www.iarchitect.com/

  • Users - http://www.cc.gatech.edu/gvu/user_surveys/ http://www.thecounter.com/stats/

  • Web-safe palette - http://www.lynda.com/hex.html

  • JavaScript - http://www.builder.com/Programming/Javascript/


  • Login