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


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

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


Creating a usable web site

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


Creating a usable web site

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