Intro to Web Design

Design Fundamentals
User Experience, Aesthetics, Process
03 November 2011

Tonight
What Is Design
Design Principles
Design Process

What Is Design?

Quote:
A designer is a visually literate person, just as an editor is expected by training and inclination to be versed in language and literature…
Douglas Martin, Book Design,
quoted in Designing Visual Interfaces (8)

The Key
Good interface design enables increased productivity, reduces errors, and provides a “better” user experience

Our Goal
Obvious Design =
“ Don’t Make Me Think” Design

Design Principles
Schneiderman
Norman
Krug

We Scan, We Don’t Read
Heat map from eyetracking research via Jakob Nielsen: http://www.useit.com/alertbox/reading_pattern.html

How We Really Use The Web
http://www.wdvl.com/Authoring/Design/Dont/index.html

Ben Schneiderman
Strive for consistency
Offer informative feedback
Reduce short-term memory load
Enable shortcuts
Offer simple error handling
Make actions reversible

Don Norman
Visibility – Can we see it?
Feedback - What is happening?!?
Mapping – Do the controls do what I think they will do?
Consistency – Does the widget do the same thing this time as it did last time? Is this how things work on other sites? Is that navigation element in the same place?

Steve Krug
Don’t make me thin

Quote:
When I ’ m looking at a page that doesn ’ t make me think, all the thought balloons over my head say things like “ OK, there ’ s the ____. And that ’ s a _____. And there ’ s the thing that I want. ”
Steve Krug
Don’t Make Me Think

Kathy’s Rule: Be Polite aka Don’t Be Rude!

Understand who I am and why I’m here Implementing Kathy’s Rule

1. Know why I’m here and greet me appropriately
Less than a quarter of the visible portion of the page is devoted to actions that might have triggered a citizen visit.

Contrast Illinois With Utah

Then there’s NSW

2. Where am I, where can I go, where have I been?
Contrast is important for readability. So are “you are here” signals.

Contrast with CNN

Ahem. Any idea what this is?
It’s the Washington Post redesign.

3. Is that a link?
If you have to tell someone where to click … rethink the design!

4. Practice appropriate consistency

5. Be personable. That means human!

Don’ t write like lawyers!

Let me know what others think.

Make it easy for me to talk to you.

Implementing Kathy’s Rule Summary
The page/screen should be self-explanatory, obvious
I should be able to easily tell where I am, where I’ve been and where I can go
A link should look like a link. If something looks like a link, it should be a link.
Practice appropriate consistency (header, footer elements in particular)
Be personable

A Quick Check
What is the key info people are seeking (what are they trying to do)? List 6-10 things.
Rank them in importance.
Now go look at the website
Compare your rankings of information to the website

Contact
Kathy E Gill
@kegill
kegill at uw dot edu
http://faculty.u.washington.edu/kegill

Resources
Ask Tog, First Principles of Interaction Design, http://www.asktog.com/basics/firstPrinciples.html
OneExtraPixel, 10 principles of navigation design, http://www.onextrapixel.com/2009/07/03/10-principles-of-navigation-design-and-why-quality-navigation-is-so-critical/
Smashing Magazine, 10 principles of effective web design, http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
WebDesign, Understanding visual hierarchy, http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/

Intro to Web Design

by Kathy Gill on Nov 03, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 4

Statistics

Intro to Web Design Presentation Transcript