1. New Rules of Web Design Jeff Wisniewski University of Pittsburgh jeffw@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? Can ’ t help ya …

4. Simplicity Rules Rich and interactive RIAs The User Experience

5. Content is King But design matters … ALOT 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 9 … maybe 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 me … colorful? 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 land … see also Jacob ’ s 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 shouldn ’ t be!) –Wayfinding … Ask-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 Bandwith=Design 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 content … YES! 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 Layout … It ’ s Buggy Well yes it is, sort of, but no longer enough to justify not using it Be a hata

20. The Top of the Page is Prime Real Estate Actually, it ’ s useless space … Banner Blindness … Nielsen ” : People have a tendency to never look at a slim rectangular area that's above the page's main headline. ”

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 http://www.library.pitt.edu/etd_tutorials/ etdtutorial.html

24. Mouseover menus … … are still evil! … raise usability considerations They ’ re : 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 best … but … 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 …

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/u nfolding-the-fold/

30. Images of People … Increase trust (unless they ’ re really good looking people) Naturally draw attention … this may not be a good thing … distraction? People, labeled, increase credibility the most

31. Resources Google Website Optimizer http://services.google.com/websiteoptimizer/http://services.google.com/websiteoptimizer/ Large Web Sites Don't Change Much http://webdesign.about.com/od/webdesignbasics/a/aa010206.htm http://webdesign.about.com/od/webdesignbasics/a/aa010206.htm OneStat screen resolution survey http://www.onestat.com/html/aboutus_pressbox51_screen_resolutions_internet.html http://www.onestat.com/html/aboutus_pressbox51_screen_resolutions_internet.html Forrester Research: Smackdown! Rich Internet Applications vs. HTML http://www.forrester.com/Research/Document/Excerpt/0,7211,40566,00.html http://www.forrester.com/Research/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/news060109-13.html http://www.nature.com/news/2006/060109/full/news060109-13.html Stanford Guidelines for Web Credibility http://www.webcredibility.org/guidelines/http://www.webcredibility.org/guidelines/ Fancy Formatting http://www.useit.com/alertbox/fancy-formatting.htmlhttp://www.useit.com/alertbox/fancy-formatting.html Human Factors International Design Newsletter: From Bricks to Clicks …. http://www.humanfactors.com/ http://www.humanfactors.com/ Blasting the Myth of the Fold http://www.boxesandarrows.com/view/blasting-the-myth-ofhttp://www.boxesandarrows.com/view/blasting-the-myth-of Utilizing the Cutoff Look http://www.uie.com/brainsparks/2006/08/02/utilizing-the-cut-off- look-to-encourage-users-to-scroll/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.htmlhttp://developer.yahoo.com/yui/articles/gbs/index.html 10 Usability Nightmares You Should Be Aware Of http://www.smashingmagazine.com/2007/09/27/10-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.pdfhttp://www.usability.gov/pdfs/chapter10.pdf