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
Electronic Commerce Designing a commercial site I. What is the core of the design process? • Designing for the user experience • A framework for commercial site design • Web usability II. Principles of bad design • Web authoring lies • Major design mistakes School of Library and Information Science Electronic Commerce Designing a commercial site I. What is the core of the design process? “Proper World Wide Web site design is largely a matter of balancing the structure and relationship of menu or ‘home’ pages and individual content pages or other linked graphics and documents. The goal is to build a hierarchy of menus and pages that feels natural and well-structured to the user, and doesn’t interfere with their use of the Web site or mislead them.” Lynch, P. J. (1995). Yale University C/AIM WWW Style Guide http://info.med.yale.edu/caim/StyleManual_Top School of Library and Information Science Electronic Commerce A web site is a “self-service” product What must be done to make this experience easy, natural, and intuitive? What are the benefits of a good user experience? People become customers What are the costs of a bad user experience? The site loses money What are the elements of a good user experience? Garrett, J.J. (2003). The elements of user experience: User-centered design for the web. Indianapolis, IN: New Riders. School of Library and Information Science Electronic Commerce There is a direct correlation between the satisfaction a person has on your site and their willingness to return This can be seen in the “conversion rate” Can be measured in a range of ways A ratio of visits to sales The % of abandoned shopping carts The frequency of submission of personal information The user experience has an impact on the ROI The ideal user experience means that all of the visitor’s actions on your site are the result of your intentional design decisions How do you do this for the ecommerce user? School of Library and Information Science Electronic Commerce • Designing the user experience for ecommerce ~ Design for “wayfinding” It is a process of solving problems in digital space Decision making: formulating an action plan Decision executing: implementing the plan The site should make it easy for visitors to know: Where they are on the site Where the stuff is that they want to see How to get to this stuff This makes use of signs, cues, and structural elements Wodtke, C. (2003). Information Architecture: Blueprints for the Web. Indianapolis, IN: New Riders. School of Library and Information Science Electronic Commerce ~ Wayfinding Take into account how people move through digital space Survey knowledge: viewing the entire space Procedural knowledge: following a specific route Landmark knowledge: static details about the route Wayfinding tasks Naive search: a task without prior knowledge of the target’s location Primed search: a task where the location of the target is known Exploration: a task in which there is no target School of Library and Information Science Electronic Commerce ~ Manage user expectations and provide frequent feedback Determine the consequences of all actions that can occur What happens when a user makes a mistake in a form? How do you let a user know that a process is chugging away in the background? Keep the shopping cart and its contents in view Assume that you can’t totally control a user's experience Gathering information from users is critical Give them enough information to manage their own experience Help them help you through feedback and testing School of Library and Information Science Electronic Commerce ~ Use ergonomic design Think about the amount of scrolling that is necessary to use the site This is important for people with RSI Think about the use of color and font size This is important for people with colorblindness and visual problems Think carefully about the use of audio This can be embarrassing in certain locations Know as much as possible about your typical user’s computing configuration Monitor size, connection speed, browser version School of Library and Information Science Electronic Commerce ~ Design for consistency and use standards Study competitors for de facto standards and best practices Make sure labels and index terms are standardized Apply relevant accessibility standards Design for graceful transformation Separate structure from presentation Render text accessible to almost all browsing devices and users Pages should work for users who cannot see or hear Provide equivalent alternatives to auditory and visual content School of Library and Information Science Electronic Commerce ~ Use contingent design Provide error support Anticipate and head off problems with clear language Error messages should be noticeable at a glance Use color, icons, and text to clearly highlight and explain the problem area Always identify errors the same way A good error message lets a customer instantly know That an error occurred What the error is How to recover from it School of Library and Information Science Electronic Commerce • A framework for commercial site design Surface The pages, content, and the functions, visual design Skeleton The wireframe, information, navigation, and interface design Structure The higher-level organization of the site Scope What the site should and can do Strategy The site’s organizational and user-centered purposes School of Library and Information Science Electronic Commerce The design process Planning and strategy: predesign analysis Conceptual design: prototyping Information organization: Maintenance and updating Feedback and redesign Launch Content development Production: Navigation systems Search tool Labeling systems Operations Testing: Quality assurance and usability School of Library and Information Science Electronic Commerce • Web usability “Usability has assumed a much greater importance in the Internet economy than it has in the past... The equation is simple: In product design and software design, customers pay first and experience usability later On the web, users experience usability first and pay later It is very clear why usability is important for web design” Nielsen, J. (1999). Designing Web Usability. Indianapolis, IN: New Riders. 10-11. School of Library and Information Science Electronic Commerce Web design is different from traditional GUI design In traditional design, you control every pixel on the screen and: Know the system you are designing for Know what fonts are installed Know how large the screen typically will be, and Have the vendor’s style guide to tell you the rules In web design, you share control with users Pages are viewed with computers, WebTV, hand-held devices, cell phones, Dick Tracy watches School of Library and Information Science Electronic Commerce In traditional design, the designer controls where the user can go and when A traditional application is an “enclosed user interface experience” The user typically works with an application for a considerable amount of time On the web, the user controls her navigation She can rapidly move among sites People stay on a site one minute or less unless they have a reason to be there School of Library and Information Science Electronic Commerce A homepage is an important feature of an ebusiness site “[It is the most valuable real estate in the world” The homepage is the digital face of the company This is where branding begins It receives the most visits It represents a very large investment The average commercial web site costs ~$1,400,000 It provides an overview of the company’s web space It provides a view of the information architecture It lays out the navigation scheme Nielsen. J. and Tahir. M. (2001). Homepage usability: 50 web sites deconstructed. Indianapolis, IN: New Riders. School of Library and Information Science Electronic Commerce Design goals How can you communicate the purpose of your site? Make sure that your logo is visible and in a noticeable location Use a slogan that concisely explains what you do Use it to differentiate yourself Make sure that the home page is distinct in its design This minimizes user confusion Decide what the most important tasks are for your patrons and display appropriate links prominently Be sure to include contact information School of Library and Information Science Electronic Commerce Use the page to inform the visitor about your company Provide links to information about the company This could include About us Employment Investor relations Groups these links together Include a link to a page of press releases This is important for journalists Have a link to a page describing your privacy policy Tell people what type of information you collect and what it’s used for Only include information relevant to external audiences Use the intranet for the rest School of Library and Information Science Electronic Commerce Pay attention to the content of this page - writing matters Use your customers’ language to describe the main sections and categories Find out the terms they use for your business processes Avoid the jargon of your particular specialty Try to minimize redundant content Use consistent style rules throughout the site Avoid the imperative except where it is necessary Use examples to clarify content Provide links to further explanations (narrowing) Provide links to more general information (expanding) School of Library and Information Science Electronic Commerce Page design: how to carve up the real estate A web page should be dominated by content “Navigation is a necessary evil and not a goal unto itself” What % of the page is actually content? Whitespace can be useful to organize content 800X600 screen has 480,000 pixels 33% are used for the browser, 20% should be used for navigation How much of the rest can be used for content? School of Library and Information Science Electronic Commerce Work toward simplification How much can you remove without compromising the design? Design “resolution independent” pages? Use % instead of fixed pixel dimensions Design for linking Structural navigation links: outline the site’s IA Associative links: allow within page movement See also links: access related content (on and offsite) Links should convey information with link titles To the <A HREF=“http://ecstore1/catalog/” TITLE=Our product catalog”>catalog</A>! School of Library and Information Science Electronic Commerce Develop a consistent link strategy Clearly distinguish links from each other Avoid generic descriptors like “Click here” and “More” Use link colors that can be differentiated If a link does something unusual, explain it A primary purpose of this page is navigation Group the navigation options and make them visible Avoid redundant choices Clearly label links Use icons carefully Link to the shopping cart from the homepage School of Library and Information Science Electronic Commerce Use a consistent search strategy Provide an input box on the homepage Use a “Go” button to activate the search Search the entire site Include a link to an advanced search option Make the box big and wide enough to allow editing (30 characters) Provide task-oriented shortcuts Link to major tasks and functions that visitors want Avoid overkill with options School of Library and Information Science Electronic Commerce Be judicious in your use of graphics and animation Use graphics for content and not ornamentation Label the image if it differs from the test it supports Edit or crop images to fit the page Be very careful about overlaying text on images Be even more careful using animation Don’t animate critical elements (like the logo) Remember that it draws attention away from critical content Use high contrast text and background Have the most critical elements “above the fold” Use “liquid layout” School of Library and Information Science Electronic Commerce Size matters Because of variability in displays, design for a 600 pixel width Design for deep linking If users come in at lower levels, what branding content should they see? Design for consistency What is the metaphor you will carry throughout your site? Navigation: Where am I? Where have I been? Where am I going? Location is relative to the web and to the site structure School of Library and Information Science Electronic Commerce Assessment: sample metrics Lowering costs: distribution of sales materials, press releases, phone calls Business development: new leads in existing and new markets Improved customer service: use of forms, email, other feedback, sales Improved public perception: user feedback, mention in the press, links from other sites Site performance: hits, page views, new and repeat users, downloads Usability testing School of Library and Information Science Electronic Commerce Designing a commercial site I. What is the core of the design process? • Designing for the user experience • A framework for commercial site design • Web usability II. Principles of bad design • Web authoring lies • Major design mistakes School of Library and Information Science Electronic Commerce Common design mistakes Missing that the web changes the way we do business Not knowing how to manage a team-based web design project Making the site’s information architecture mirror the organizational structure Testing only within the organization Not writing for the web Not using an effective linking strategy Not involving the target audience early enough School of Library and Information Science Electronic Commerce Top five web authoring lies: 1: Your site is WYSIWYG Don’t assume what you see is what everyone sees 2: Exploiting browser quirks shows you’re smart Capitalizing on browser quirks is a good way to lose half your audience 3: Flashy graphics make you look good Speed is the #1 web problem Small image sizes speed downloading Berst, J. (1998). Top 5 Web Authoring Lies. ZDNet AnchorDesk http://www.zdnet.com/anchordesk/story/story_2226.html School of Library and Information Science Electronic Commerce 4: Small graphics files equal ugly graphics Learn to reduce the size of your graphics files Reduce the number of graphics, reducing the number of server connections visitors must 5: Broken links are not your problem Users say broken links are the #2 web problem Nielsen reports 6% of web links were broken in May 1998 -- double the percentage found in August 1997 Regular checking prevents “linkrot” School of Library and Information Science Electronic Commerce The major goals of a lame site: 1. Drive away customers Force your visitors to register before they can enter Make the first item is a huge graphic, which is totally meaningless until it is completely downloaded The title of the page should be meaningless 2. Confuse people about the company They should have no idea what kind of services you offer, much less what they cost or how they work 3. Don’t provide contact information Morris, C. (1998). How To Build Lame Web Sites http://webdevelopersjournal.com/columns/perpend1.html School of Library and Information Science Electronic Commerce 3. Project an amateurish, untrustworthy image for the company Don’t pay attention to proper typography Bad spelling is easy-you don't even have to misspell words, just use them impropitiously Ignore proper punctuation! and grammar Page layout is one of the easiest things to do badly Always use lots of <HR>s and bulleted lists See how much you can cram on a page Never check your pages on different browsers School of Library and Information Science Electronic Commerce 4. Ensure that the site loses the maximum amount of $$ and manage it poorly Promise management the moon and bog them down in technical detail Buy lots of hardware and software, and hire lots of staff (buy two of anything you think you need) Don’t submit your site to search engines Avoid reciprocal links with related sites Make sure your site stays the same Establish an elaborate procedure to slow down any changes that people might want to make Don't use log-analysis packages to track site traffic School of Library and Information Science Electronic Commerce • Major design mistakes Not listing prices clearly Don’t provide scalable pricing Using an inflexible search engine Make sure it’s unable to handle typos, plurals, hyphens, and other variants of the query terms Don’t use relevance rankings Forcing horizontal scrolling Using a small fixed font size with CSS Neilsen, J. (2002). Top Ten Web-Design Mistakes of 2002 http://www.useit.com/alertbox/20021223.html School of Library and Information Science Electronic Commerce • More design mistakes Using large blocks of text Creating links that use scripts to pop up windows Having a useless FAQ It’s filled with infrequently asked questions Collecting personal information without a clear privacy policy Having URLs with more that 75 characters This breaks the web’s “social navigation” Placing <mailto> links in unexpected locations School of Library and Information Science