Customer Oriented Design Summarized and quoted from “The Design of Sites - Patterns for Creating Winning Web Sites” By Douglas K. Van Duyne James A. Landay Jason I. Hong Published by Prentice Hall 1

Web Design What to put in?

Four previous styles of web design Company-Center Design Technology-Centered Design Designer-Centered Design User-Centered Design Now Customer-Oriented Design 3

Four previous styles of web design Company-Center Design – Found in sites of large companies – Focus on the needs and interests of the company – Focus on internal organization – Little on products – Extensive use of jargons – Brochureware – Easy to lose customers 4

Four previous styles of web design Technology-Centered Design – Overloaded with animation, audio, video, streaming banners – Little research about business needs and customer needs 5

Four previous styles of web design Designer-Centered Design – “What the client sometimes doesn’t understand is the less they talk to us, the better it is. We know what is best.” – May be cool, edgy, loaded with technologies – Slow to download, hard to use, may not work with all broswers! 6

Four previous styles of web design User-Centered – 1980’s: – Engineering useful and usable designs – Not enough It is easier to get an audience than traditional mean but Goal should be to convert Web visitors to customers and keep coming them back 7

Customer-Oriented Design Builds on user-centered design Focus on fusion of marketing and usability issues Principles Processes Patterns 8

Principles High-level concepts that guide the entire design process and help you stay focused – Knowing your customers – Involving your customer in iterative design More of this later 9

Processes How you put the processes into practice Web site development process – Major steps and milestones for developing a Web site – How to conduct a focus group – How to run a survey – How to conduct a usability test More of this later 10

Patterns Design patterns solve recurring design problems, so you can use pattern solutions to design your sites without reinventing the wheel. Patterns communicate insights into design problems, capturing the essence of the problems and their solutions in a compact form Example: action button 11

A sample button 12 These are gray 3D action buttons

A 3D button and graphical action buttons for deals and Cart

Personal E-Commerce Pattern Problem: People appreciate the convenience of ordering online, but if a site is cumbersome, is veiled about its pricing and policies, or does not seem to provide personal benefit, they leave.

Personal E-Commerce Pattern Issues and Guidelines Make it clear why people should purchase from you – Low prices? – Fast shipment? Free shipment? – Unbiased, high-quality product reviews? – A wide selection of products? – Specialized set of products that are hard to find? – Ease of use?

Personal E-Commerce Pattern Issues and Guidelines Provide many ways to find products – Know what they are looking for – use search – Help to streamline product selection – predictive input – Vague notion? – browse

Personal E-Commerce Pattern Issues and Guidelines Keep it Convenient – Thorough description? – Product comparison? – Keep customer focused – quick-flow checkout – Help impulse buying – provide multiple platforms – mobile screen sizing, mobile input control, location-based services Sign-in/New Account or guest account

Personal E-Commerce Pattern Issues and Guidelines Some Advanced Features – Avoid surprises Privacy and security Additional charges – high shipping and handling charges at the end? Returns

Personal E-Commerce Pattern - Solution Differentiate your site so that customers know why it’s compelling and valuable. Give shopper browsing and searching tools, and provide rich, detailed information about your products and services. Make your site accessible to everyone. On every page include clear links to your privacy and security policy, shipping and handling policies, return policy, and frequently asked questions. Let customers collect items in one place and check out quickly, with minimal distraction.

Pattern 2: News Mosaics Problem: Many readers come to web sites to learn about their world through news and history. These sites must deliver the news that their readers want, with the depth and breadth of coverage necessary to engage them, and make the historical record available online so that customers can search for older stories

News Mosaics Pattern Issues and Guidelines Time and Access – TV, radio, print: short life span – Web-based news can be accessed online Up-to-the-second news Week-old news Five-year-old news – Time pressure hard to re-crate layout Check sources

News Mosaics Pattern Issues and Guidelines Form – TV has motion, sound but limited in duration and hence depth – Radio has storytelling, music advantages but limited in duration and depth; travels better than TV but lacks vision – Print has more space, more depth, mobility – Web has some of the advantages of the other media but has other limitations.

News Mosaics Pattern Issues and Guidelines Web limitations – How people read online: skim (and may hit the back button) Clear first read pattern Use the Inverted-Pyramid writing style to give the most important information first. Lacks Portability, large format, and legibility – Provide short and long forms of news using hyperlinks – Break the news up into manageable chunks

News Mosaics Pattern Issues and Guidelines Audience – TV, radio, print are limited to targeted demographic groups. – Web-based news can be tailored to each person Yes but balkanization of information? Challenge: give the customer the news they want and the news they don’t know they want – Multiple ways to navigate: by category, keywords, by historical reference, etc. – Search engines (cnn.com, nytimes.com, and washingtonpost.com provide archives but only cnn.com provide permanent addresses.

Lab Critique a number of personal E-commerce sites and New Mosaic sites according to the two patterns discussed.

News Mosaics Pattern Solution Build a mosaic of news by providing breadth and depth of coverage through a diversity of category and further refinement through subcategories. Within each category, highlight the most important articles and lead text, while also identifying articles that might otherwise be missed. Within each article, provide a high-level summary first, for people who are looking for a quick read, but include more in-depth information in the rest of the article. Link together related news items, whether they are articles, radio stories, or video clips. Archive this information in the same place on your servers for historical reference.