creating a usable web site
Download
Skip this Video
Download Presentation
Creating a Usable Web Site

Loading in 2 Seconds...

play fullscreen
1 / 20

Creating a Usable Web Site - PowerPoint PPT Presentation


  • 114 Views
  • Uploaded on

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

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 ' Creating a Usable Web Site' - aimee-cobb


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 - [email protected]

Web Development

University of Minnesota

introduction
Introduction
  • 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

Copywriter

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
production
Production
  • Optimize graphics
  • Incorporate graphics and content
  • Add extras
  • QA testing
maintenance
Maintenance
  • 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
slide11
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
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
graphic design layout graphics
Alignment

Repetition

Contrast

Balance

Proximity

Optimize images

JPG vs. GIF

Web-safe palette

Graphic Design / Layout / Graphics
typography
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
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
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
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
slide20
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/
ad