IS 485, Professor Matt Thatcher

1. Web Design Patterns(Homepage) IS 485, Professor Matt Thatcher

2. Agenda • Administivia • Review • Web design process • Web design patterns • Home page patterns

3. Review • Effective use of color in design

4. Web Site Design Process Discovery Design Exploration Design Refinement Production … followed by implementation & maintenance

5. Web Design Process

6. Assess needs understand client’s expectations determine scope of project characteristics of users evaluate existing site and/or competition Design Process: Discovery Discovery Design Exploration Design Refinement Production

7. Design Process: Design Exploration Generate multiple designs • visualize solutions to discovered issues • information & navigation design • early graphic design • select one design for development Discovery Design Exploration Design Refinement Production

8. Design Process: Design Refinement Develop the design • increasing level of detail • heavy emphasis on graphic design • iterate on design Discovery Design Exploration Design Refinement Production

9. Design Process: Production Prepare design for handoff • create final deliverable • specifications, guidelines, and prototypes • as much detail as possible Discovery Design Exploration Design Refinement Production

10. User Interface Design Usability Evaluation Information Architecture Design Specialties • Information Architecture • encompasses information & navigation design • User Interface Design • also includes testing & evaluation Information Design Navigation Design Graphic Design

11. Motivation for Design Patterns • Most examples from UI literature are critiques • Norman, Nielsen, etc. • Design is about finding solutions • Unfortunately, designers often reinvent • hard to know how things were done before • hard to reuse specific solutions • Design patterns are a solution • reuse existing knowledge of what works well • communicate design problems & solutions

12. Design Patterns • Using design patterns for Web Design • communicate design problems & solutions • how can on-line shoppers keep track of purchases? • use the idea of shopping in physical stores with carts • how do we communicate new links to customers? • blue underlined links are the standard -> use them • Leverage people’s usage habits on/off-line • if Yahoo does things a way that works well, use it • Jacob’s Law of the User Experience

13. The Design of Sites, by Doug van Duyne, James Landay, & Jason Hong Patterns broken into groups (A-L) trust & credibility (G) completing tasks (H) page layouts (I) site search (J) navigation (K) fast sites (L) Web Design Patterns Book • site genres (A) • navigational framework (B) • homepages (C) • writing & managing content (D) • basic e-commerce (E) • advanced e-commerce (F)

14. Pattern Format • Pattern Title • Background Information • Problem Statement • Solution • Solution Sketch • Other Patterns to Consider

15. Homepage Portal (C1) • Problem • without a compelling home page (HP), no one will ever go on to the rest of your site • surveys show millions of visitors leave after HP • most will never come back -> lost sales, etc.

16. HP PORTAL (C1) • Problem: home pages are portals through which most visitors pass. • They must seduce visitors while simultaneously balancing a large number of issues, including: • branding • navigation • content • ability to download quickly

17. Six Ways to Make a Good HP 1) Build your site identity and brand • present the message of what your company does • include text, logos, and graphics that provide • Up-Front Value Proposition (C2) • promise to visitors

18. Six Ways to Make a Good HP 1) Build your site identity and brand • Up-Front Value Proposition (C2) • keep it consistent (font, size, colors, graphics) • make the site logo large enough to be noticed • position (usually in the upper-left corner of the site)

19. Six Ways to Make a Good HP 1) Build your site identity and brand • provide links to Privacy Policy (E4) • show that you are trustworthy • identify what info is being collected and how it will be used • make available on each web page (usually at the bottom)

20. 2) Make a (+) first impression by testing uses Descriptive, Longer Link Names (K9) and Familiar Language (K11) understanding customers (especially the target audience) who are they? contextual inquiry & surveys appropriate colors & graphics? neon green & screaming graphics on a skateboarding site, but not on a business-to-business or health site Six Ways to Make a Good HP

22. Six Ways to Make a Good HP 3) Seduce with content • create a Clear First Read (I3) • draw the eye to a single item of interest (graphical) • make it clean & larger than rest on the page • Arial and Verdana are good fonts to use • cut down remaining elements to chosen few • use Headlines and Blurbs (D3) to entice customers to seek more content • Keep content updated

27. Six Ways to Make a Good HP 4) Make navigation easy to use • novices & experts must instantly “get it” • use Multiple Ways to Navigate (B1) • basic features of site as Embedded Links (K7) • Navigation Bars (K2) • there are several types • HTML Power (L4) • table colored backgrounds to delineate sections • Reusable Images (L5) to highlight new things • build a Page Template (D1) by using a Grid Layout (I1) • organizes the page cohesively • provide Consistent Sidebars of Related Content (I6)

28. Logo + value prop High-Level Browse Categories Search Image Relate +Promote Headline Relate +Promote Browse Fold Headline Relate +Promote Headline Headline Relate +Promote

29. Six Ways to Make a Good HP • Legend Navigation Bars, Search Modules, and Site Branding Content Modules Consistent Sidebars of Related Content

37. ?????

38. ?????

39. Six Ways to Make a Good HP • Tab Rows (K3) • clearly identify active tab • i.e., use color to highlight it • create indicator line • i.e., show the line below the active tab in the same color to make it clear that the entire page of content belong to the active tab • Location Breadcrumbs (K6) • use “>” as the separator • Action Buttons (K3) vs. Links • use links for navigations • use action buttons for purchases, submitting info, etc.

43. use HTML Power (L4) (text) as much as possible first thing to download get a web-savvy graphic artist (font colors, styles, & b/g color) use Separate Tables (L3) use Fast-Downloading Images (L2) small graphics (crop, shrink) use min. number of columns & sections in a Grid Layout (I1) easy to scan Six Ways to Make a Good HP • 5) Make it download quickly (2-3 seconds) • if not, they’ll go elsewhere • Strategies

44. Six Ways to Make a Good HP 6) Make it accessible • people with audio, visual, motor, or cognitive disabilities find may websites difficult to use • Design rules • minimize typing • make navigation elements large • provide good color contrasts • E.g., dark text on light background and vice versa • use sufficiently large fonts • avoid using ALL CAPS • avoid animations and blinking text • don’t have text go from all the way left of the page to the right • avoid green for unvisited and red for visited • use Descriptive, Longer Link Names (K9) • use the ALT attribute of html to provide text version of images • <IMG SRC=http://... ALT=“Text description of image”

45. Summary • Design patterns allow us to reuse? • design knowledge • Previously used in? • architecture & software engineering • Web design patterns are new & evolving • example: Homepage • problem • if it isn’t compelling, they won’t return • solutions • build your site identity and brand • make a positive first impression • seduce with content • make navigation easy • make it download fast • make it accessible

46. Take a Look At This… • Web Design Patterns (E-Commerce)