New Rules of Web DesignJeff WisniewskiUniversity of Pittsburghjeffw@pitt.edu

GoalsChallenge some assumptionsIntroduce some new researchFood for thought

Design is an Inexact ScienceYes, but there are several DECADES worth of research in usability, credibility, interface design, and HCIPurple vs. Green? Cant help ya

Simplicity RulesRich and interactiveRIAsThe User Experience

Content is KingBut design mattersALOTNovice users judge superficially, and quickly!Professional design= credibility

All Content Is Created Equalbut some content is more equal than otherDesign for what your users are doingEmphasize the highest priority tasks so that users have a clear starting point. Nielsen

By the numbers:3 Click Rule?600x800?The Rule of Seven?

The Rule of SevenNot a rule a guidelinePersuasive evidence both waysThe answer depends on contextMore than 9maybe your site lacks focus?

3 click ruleis deadDesign for SCENTUsers will happily click so long as they feel they are on the right path

Design for 800x600?NO: Optimize for 1024x768 (Nielsen)What of other platforms (phones, handhbelds, etc.)? Use CSS media typesFlexible as opposed to fixed design

Color mecolorful?The majority of users browse with 24-bit color renderingRIP websafe palette?File sizeAlternative platformsWe are not sure how important this is now, since most computers today have the ability to display millions of different colors- WC3 Schools

For Redesign InspirationCheck other library websitesStandards, conventions, and user expectations are established OUTSIDE of library landsee also Jacobs Law

How Often to Redesign?ConstantlyIterative, evolutionary changeRevolutionary chang is disruptiveA/B testingSometimes a tear down is required

Follow Your Own ConventionsIs reference reference on your website (N.B. it shouldnt be!)WayfindingAsk-a-Librarian both real and virtualStyle guidelines across physical and virtual, print and electronic

But follow established web standards and conventionshome linkClickable bannerContact us linkPlacement of navigation

Greater Bandwith=Design Freedom?Two trends: more high speed accessMore non-traditional devices on relatively slower networks (Apple iPhone)

I Must Support All BrowsersFor basic contentYES!Accessibility is critical and the right thing to doFor value added content, style, and interactivity? Graded support aka progressive enhancement

Providing a text-only version of your homepage or siteWhy is it needed?Separation of presentation and contentXHTML + CSS

Avoid CSS for LayoutIts BuggyWell yes it is, sort of, but no longer enough to justify not using itBe a hata

The Top of the Page is Prime Real EstateActually, 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.

Pop goes the window!Popups:Will very likely be blocked by default..so nothing mission criticalCan be useful when linking to supporting information

Flash is EvilFlash introductions are evilFlash can be used for effective animation and interactivityRIAsExample: http://www.library.pitt.edu/etd_tutorials/etdtutorial.html

Mouseover menusare still evil!raise usability considerationsTheyre : slower, not scanable (therefore preventing users from getting an overview of you sites content) and often require ninja-like mouse skills

Opening links in a new browser windowIs sometimes OK: external links, non-web documents: Word, PDF, etc.Help filesTELL users Tabbed browsers make this less of an issue

Never Auto ForwardIt Breaks the Back ButtonServer side redirects are bestbutSet auto forward time high enough to allow users to use back

Scrolling is Badusers scroll if there is a clue that there is something below the foldUse the very fashionable cut-off look

Keep It Above the FoldMaybe76% 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/

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

ResourcesGoogle Website Optimizer http://services.google.com/websiteoptimizer/Large Web Sites Don't Change Much http://webdesign.about.com/od/webdesignbasics/a/aa010206.htmOneStat screen resolution survey http://www.onestat.com/html/aboutus_pressbox51_screen_resolutions_internet.htmlForrester Research: Smackdown! Rich Internet Applications vs. HTML http://www.forrester.com/Research/Document/Excerpt/0,7211,40566,00.htmlWeb users judge sites in the blink of an eye http://www.nature.com/news/2006/060109/full/news060109-13.htmlStanford Guidelines for Web Credibility http://www.webcredibility.org/guidelines/Fancy Formatting http://www.useit.com/alertbox/fancy-formatting.htmlHuman Factors International Design Newsletter: From Bricks to Clicks. http://www.humanfactors.com/Blasting the Myth of the Fold http://www.boxesandarrows.com/view/blasting-the-myth-ofUtilizing the Cutoff Look http://www.uie.com/brainsparks/2006/08/02/utilizing-the-cut-off-look-to-encourage-users-to-scroll/Yahoo! Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/index.html10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/Usability.gov Chapter 10 http://www.usability.gov/pdfs/chapter10.pdf

3-Click-RuleAccording to this rule users stop using the site if they arent able to find the information or access the site feature within 3 mouse clicks. In other words, the rule emphasizes the importance of clear navigation, logical structure and easy-to-follow site hierarchy. In most situations the number of clicks is irrelevant; what is really important is that visitors always know where they are, where they were and where they can go next. Even 10 clicks are OK if users feel that they have a full understanding of how the system works.Google and Amazon have EVOLVEDRevolutionary change is disruptive for usersAdvantages include smaller, faster, more transformable contentBlasting the Myth of the Fold: