1 / 31

New Rules of Web Design

New Rules of Web Design. Jeff Wisniewski University of Pittsburgh jeffw@pitt.edu. Goals …. Challenge some assumptions Introduce some new research Food for thought. Design is an Inexact Science ….

kalil
Download Presentation

New Rules of Web Design

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <TABLE> 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.”

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

  22. 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

  23. 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…

  24. 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

  25. 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

  26. Scrolling is Bad • users scroll if there is a clue that there is something below the fold • Use the very fashionable “cut-off” look…

  27. 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/

  28. 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

  29. Resources • Google Website Optimizer http://services.google.com/websiteoptimizer/ • Large Web Sites Don't Change Much http://webdesign.about.com/od/webdesignbasics/a/aa010206.htm • OneStat screen resolution survey 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 • Web users judge sites in the blink of an eye http://www.nature.com/news/2006/060109/full/news060109-13.html • Stanford Guidelines for Web Credibility http://www.webcredibility.org/guidelines/ • Fancy Formatting http://www.useit.com/alertbox/fancy-formatting.html • Human 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-of • Utilizing 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.html • 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.pdf

More Related