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

2 Agenda l Administivia l Review l Web design process l Web design patterns l Home page patterns

3 Review l Effective use of color in design

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

5 Web Design Process

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

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

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

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

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

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

12 Design Patterns l Using design patterns for Web Design –communicate design problems & solutions »how can on-line shoppers keep track of purchases? u use the idea of shopping in physical stores with carts »how do we communicate new links to customers? u blue underlined links are the standard -> use them l 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 Web Design Patterns Book l The Design of Sites, by Doug van Duyne, James Landay, & Jason Hong l Patterns broken into groups (A-L) –trust & credibility (G) –completing tasks (H) –page layouts (I) –site search (J) –navigation (K) –fast sites (L)  site genres (A)  navigational framework (B)  homepages (C)  writing & managing content (D)  basic e-commerce (E)  advanced e-commerce (F)

14 Pattern Format 1.Pattern Title 2.Background Information 3.Problem Statement 4.Solution 5.Solution Sketch 6.Other Patterns to Consider

15 Homepage Portal (C1) l 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) l Problem: home pages are portals through which most visitors pass. l 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) u 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 Six Ways to Make a Good HP 2) Make a (+) first impression by –testing »uses Descriptive, Longer Link Names (K9) and Familiar Language (K11) »understanding customers (especially the target audience) u who are they? contextual inquiry & surveys u appropriate colors & graphics? –neon green & screaming graphics on a skateboarding site, but not on a business-to-business or health site

21

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

23

24

25

26

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) u there are several types »HTML Power (L4) u table colored backgrounds to delineate sections »Reusable Images (L5) to highlight new things »build a Page Template (D1) by using a Grid Layout (I1) u organizes the page cohesively »provide Consistent Sidebars of Related Content (I6)

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

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

30

31

32

33

34

35

36

37 ?????

38 ?????

39 l 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 l Location Breadcrumbs (K6) –use “>” as the separator l Action Buttons (K3) vs. Links –use links for navigations –use action buttons for purchases, submitting info, etc. Six Ways to Make a Good HP

40

41

42

43 5) Make it download quickly (2-3 seconds) −if not, they’ll go elsewhere Strategies Six Ways to Make a Good HP –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

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 l 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= ALT=“Text description of image”

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

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