Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Web Design Patterns (Homepage) IS 485, Professor Matt Thatcher Agenda Administivia Review Web design process Web design patterns Home page patterns 2 Review Effective use of color in design 3 Web Site Design Process Discovery Design Exploration Design Refinement Production … followed by implementation & maintenance 4 Web Design Process 5 Design Process: Discovery Discovery Design Exploration Design Refinement Production Assess needs * understand client’s expectations * determine scope of project * characteristics of users * evaluate existing site and/or competition 6 Design Process: Design Exploration Discovery Design Exploration Design Refinement Production Generate multiple designs * visualize solutions to discovered issues * information & navigation design * early graphic design * select one design for development 7 Design Process: Design Refinement Discovery Design Exploration Design Refinement Develop the design * increasing level of detail * heavy emphasis on graphic design * iterate on design Production 8 Design Process: Production Discovery Design Exploration Design Refinement Production Prepare design for handoff * create final deliverable * specifications, guidelines, and prototypes * as much detail as possible 9 Design Specialties User Interface Design Usability Evaluation Information Architecture Information Architecture – encompasses information & navigation design Information Design Navigation Design Graphic Design User Interface Design – also includes testing & evaluation 10 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 11 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/offline – if Yahoo does things a way that works well, use it – Jacob’s Law of the User Experience 12 Web Design Patterns Book The Design of Sites, by Doug van Duyne, James Landay, & Jason Hong Patterns broken into groups (A-L) site genres (A) navigational framework (B) homepages (C) writing & managing content (D) basic e-commerce (E) advanced e-commerce (F) – – – – – – trust & credibility (G) completing tasks (H) page layouts (I) site search (J) navigation (K) fast sites (L) 13 Pattern Format 1. 2. 3. 4. 5. 6. Pattern Title Background Information Problem Statement Solution Solution Sketch Other Patterns to Consider 14 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. 15 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 16 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 17 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) 18 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) 19 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) 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 20 21 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 22 23 24 25 26 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) 27 Logo + value prop High-Level Browse Categories Search Headline Image Relate +Promote Relate +Promote Fold Browse Headline Relate +Promote Headline Headline Relate +Promote 28 Six Ways to Make a Good HP Legend Navigation Bars, Search Modules, and Site Branding Content Modules Consistent Sidebars of Related Content 29 30 31 32 33 34 35 36 ????? 37 ????? 38 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. 39 40 41 42 Six Ways to Make a Good HP 5) Make it download quickly (2-3 seconds) − if not, they’ll go elsewhere • Strategies – 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 43 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” 44 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 45 Take a Look At This… Web Design Patterns (E-Commerce) 46