New Rules of Web Design

1
New Rules of Web Design

• Jeff Wisniewski
• University of Pittsburgh
• jeffw_at_pitt.edu

2
Goals

• Challenge some assumptions
• Introduce some new research
• Food for thought

3
Design is an Inexact Science

• Yes, but there are several DECADES worth of
  research in usability, credibility, interface
  design, and HCI
• Purple vs. Green? Cant help ya

4
Simplicity Rules

• Rich and interactive
• RIAs
• The User Experience

5
Content is King

• But design mattersALOT
• Novice users judge superficially, and quickly!
• Professional design credibility

6
All Content Is Created Equal

• but some content is more equal than other
• Design for what your users are doing
• Emphasize the highest priority tasks so that
  users have a clear starting point. Nielsen

7
By the numbers

• 3 Click Rule?
• 600x800?
• The Rule of Seven?

8
The Rule of Seven

• Not a rule a guideline
• Persuasive evidence both ways
• The answer depends on context
• More than 9maybe your site lacks focus?

9
3 click rule

• is dead
• Design for SCENT
• Users will happily click so long as they feel
  they are on the right path

10
Design for 800x600?

• NO Optimize for 1024x768 (Nielsen)
• What of other platforms (phones, handhbelds,
  etc.)? Use CSS media types
• Flexible as opposed to fixed design

11
Color mecolorful?

• The majority of users browse with 24-bit color
  rendering
• RIP websafe palette?
• File size
• Alternative platforms

• We are not sure how important this is now, since
  most computers today have the ability to display
  millions of different colors- WC3 Schools

12
For Redesign Inspiration

• Check other library websites
• Standards, conventions, and user expectations are
  established OUTSIDE of library landsee also
  Jacobs Law

13
How Often to Redesign?

• Constantly
• Iterative, evolutionary change
• Revolutionary chang is disruptive
• A/B testing
• Sometimes a tear down is required

14
Follow Your Own Conventions

• Is reference reference on your website (N.B. it
  shouldnt be!)
• WayfindingAsk-a-Librarian both real and virtual
• Style guidelines across physical and virtual,
  print and electronic

15
But follow established web standards and
conventions

• home link
• Clickable banner
• Contact us link
• Placement of navigation

16
Greater BandwithDesign Freedom?

• Two trends more high speed access
• More non-traditional devices on relatively slower
  networks (Apple iPhone)

17
I Must Support All Browsers

• For basic contentYES!
• Accessibility is critical and the right thing to
  do
• For value added content, style, and
  interactivity?
• Graded support aka progressive enhancement

18
Providing a text-only version of your homepage or
site

• Why is it needed?
• Separation of presentation and content
• XHTML CSS

19
Avoid CSS for LayoutIts Buggy

• Well yes it is, sort of, but no longer enough to
  justify not using it
• Be a ltTABLEgt hata

20
The Top of the Page is Prime Real Estate

• Actually, its useless spaceBanner Blindness
• Nielsen People have a tendency to never look at
  a slim rectangular area that's above the page's
  main headline.

21
(No Transcript)
22
Pop goes the window!

• Popups
• Will very likely be blocked by default..so
  nothing mission critical
• Can be useful when linking to supporting
  information

23
Flash is Evil

• Flash introductions are evil
• Flash can be used for effective animation and
  interactivity
• RIAs
• Example http//www.library.pitt.edu/etd_tutorials
  /etdtutorial.html

24
Mouseover menus

• are still evil!raise usability considerations
• Theyre slower, not scanable (therefore
  preventing users from getting an overview of you
  sites content) and often require ninja-like mouse
  skills

25
Opening links in a new browser window

• Is sometimes OK external links, non-web
  documents Word, PDF, etc.
• Help files
• TELL users
• Tabbed browsers make this less of an issue

26
Never Auto Forward It Breaks the Back Button

• Server side redirects are bestbut
• Set auto forward time high enough to allow users
  to use back

27
Scrolling is Bad

• users scroll if there is a clue that there is
  something below the fold
• Use the very fashionable cut-off look

28
(No Transcript)
29
Keep It Above the Fold

• Maybe
• 76 of users scrolled and that a good portion of
  them scrolled all the way to the bottom, despite
  the height of the screen
• http//blog.clicktale.com/2006/12/23/unfolding-the
  -fold/

30
Images of People

• Increase trust (unless theyre really good
  looking people)
• Naturally draw attentionthis may not be a good
  thingdistraction?
• People, labeled, increase credibility the most

31
Resources

• Google Website Optimizer http//services.google.co
  m/websiteoptimizer/
• Large Web Sites Don't Change Much
  http//webdesign.about.com/od/webdesignbasics/a/aa
  010206.htm
• OneStat screen resolution survey
  http//www.onestat.com/html/aboutus_pressbox51_scr
  een_resolutions_internet.html
• Forrester Research Smackdown! Rich Internet
  Applications vs. HTML http//www.forrester.com/Res
  earch/Document/Excerpt/0,7211,40566,00.html
• Web users judge sites in the blink of an eye
  http//www.nature.com/news/2006/060109/full/news06
  0109-13.html
• Stanford Guidelines for Web Credibility
  http//www.webcredibility.org/guidelines/
• Fancy Formatting http//www.useit.com/alertbox/fan
  cy-formatting.html
• Human Factors International Design Newsletter
  From Bricks to Clicks. http//www.humanfactors.co
  m/
• Blasting the Myth of the Fold http//www.boxesanda
  rrows.com/view/blasting-the-myth-of
• Utilizing the Cutoff Look http//www.uie.com/brain
  sparks/2006/08/02/utilizing-the-cut-off-look-to-en
  courage-users-to-scroll/
• Yahoo! Graded Browser Support http//developer.yah
  oo.com/yui/articles/gbs/index.html
• 10 Usability Nightmares You Should Be Aware Of
  http//www.smashingmagazine.com/2007/09/27/10-usab
  ility-nightmares-you-should-be-aware-of/
• Usability.gov Chapter 10 http//www.usability.gov/
  pdfs/chapter10.pdf