0
REVOLUTIONIZINGWEBSITEDESIGN:THE NEW RULES OF USABILITY877.568.7477OneUpWeb.comProvided by Oneupweb®©2010—All Information ...
BALANCING ACT:FUNCTIONALITY& AESTHETICS.The online experience culminates into a                        explain. We looked ...
THE MEAT:TABLE OF CONTENTS01 THE BIG PICTURE                                                                09 INDUSTRY BR...
THE BIGPICTUREA home is not designed without first considering the needsof the person that will be living there. Then, the...
FINDING THE CENT ER OF GRAVITY:THE ZEN TRIANGLE OF DESIGNA website that can adequately satisfy all three of these       pa...
INDUSTRIAL BALANCENot all websites are created equal, and every type of industry has to grapple with a uniqueset of condit...
OVERVIEW &METHODOLOGYTo analyze website design and usability in tandem required OVERVIEW: SCORECARDa two prong approach:  ...
INVENTORY HIGHLIGHTS• Page length was measured in pixels for each of the 100 sites (Figure  5). Page length is one of seve...
SEEING ACTION:THE USABILITY TESTRemote usability testing is a method of quantifying how real people interact with websites...
DEMOGR A PHICS                                                                                                           M...
INTERPRETING THE RESULTS:COMPA RISONS ACROSS THE BOARDIdeally, a user should find the information       MEAN TIME TO COMPL...
INDUSTRYBREAKDOWN:THE EVIDENCEFrom each industry, threesites representing theaverage and deviationswithin each categorywer...
E-COMMERCE:THE UPSHOTOF SELLINGUSABILITYAn e-commerce site is the beginning and the end of a             It’s important to...
MAKING SENSEOF EXPECTATIONSDesigning a user-friendly e-commerce site is challenging           2. Obvious is good. The home...
E-COMMERCEDECONSTRUCTED:AN ANALYSISOF DESIGN ANDUSABILITYThe e-commerce sites inventoried all offeredcustom printing servi...
PRINTRUNNER: DESIGNINGFOR EXPECTATIONSPrintRunner most closely adhered to consumer expectations. The site handled a large ...
PRINTING FOR LESS: PUTTING IT ALLOUT THERE, LITERALLYPrinting For Less is the wordiest of the e-commerce pages tested. The...
PRINTING CENTER USA:CHALLENGING CONVENTIONSDifferent is good, sometimes. But when it came to designing for usability, Prin...
THE USABILITYTEST: OVERVIEWOF RESULTSPrintRunner came out on top for both usability and user SUCCESS RATESpreference (Figu...
PAGE VIEWS                                                                                                         Average...
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Upcoming SlideShare
Loading in...5
×

Revolutionizing Website Design

757

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
757
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Revolutionizing Website Design"

  1. 1. REVOLUTIONIZINGWEBSITEDESIGN:THE NEW RULES OF USABILITY877.568.7477OneUpWeb.comProvided by Oneupweb®©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  2. 2. BALANCING ACT:FUNCTIONALITY& AESTHETICS.The online experience culminates into a explain. We looked at 100 websites, spanning fourseries of action-oriented visual cues where industries, and dissected the anatomy of each one. Patterns were detected and characteristics cataloged. Weimages and words translate into clickable then selected three websites from each category to bemoments—connections, discoveries, and tested by real people engaging in real-life scenarios.purchases. This world of digital transactions Then the combined analysis: what does the anatomy of ais made up of spatial, graphical and textual site have to do with usability? That’s where the Zen comes 100% in: the visual composition of each site was broken down 0%components—the virtual construct where into three basic components: graphics, text and whitereal people interact with real businesses and space. Each element was charted on the Zen Triangle of 90 10organizations.And the performance of a website Design (Figure 1) and points on the triangle were matched 80 20hinges in the balance of these parallel forces: func- against the findings from the usability testing. And the 70 30tionality and aesthetics. In other words, website upshot? A new method for visualizing balance where center of gravity plays a pivotal role.usability is where design meets effICACY. 60 40 s hic % Tex apPerformance is the bottom line; but how is something as Gr t 50 50 Industries Analyzed: %subjective as appearance judged as good or bad? That’s 40 60the angle Oneupweb set out to investigate. In this report, E-commercewe take a brand new look at an old idea: why do some 30 70websites look the way they do, but more importantly, B2Bhow do looks translate into action—that is, clickable Hospitality & Travel 20 80moments? And here’s the hook—there is no magic wandor Golden Rule for designing a good website. Rather, and Higher Education 0% 10 90 100%what we will show here; there is a significant relationship 90 80 70 60 50 40 30 20 10between visual aesthetics and usability. It’s about 100% 0% % White Spaceachieving a state of equilibrium. And what’s more, it’spossible to measure and evaluate. It’s the cause and effect Figure 1. A triangle balances on its center of gravity. Using this concept, the visualof user-centered design. components of a website—graphics, text and white space—were diagrammed.So out with the “Golden Rules” and in with Zen. Let usi 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  3. 3. THE MEAT:TABLE OF CONTENTS01 THE BIG PICTURE 09 INDUSTRY BREAKDOWN: THE EVIDENCE In each category, three websites were selected for remote usability testing. 02 Finding the Center of Gravity: The Zen Triangle of Design These are the results. How to use the Triangle and how each industry balances out. 03 Industrial Balance 10-21 E-Commerce. Focus on online printing websites. Plotting out the visual components of a website. 22-33 B2B. Focus on the packaging industry. 34-45 Travel & Hospitality. Focus on luxury, non-franchise hotels.04 OVERVIEW & METHODOLOGY 46-57 Higher Education. Focus on MBA programs. 05 Inventory Highlights We cataloged characteristics of 100 websites. This is what we found. 58 ENDING WITH NEW BEGINNINGS 06 Seeing Action: The Usability Test 59 The Beauty & Function of Space A method of quantifying how real people interact with Parting thoughts on the evolution of website design. websites using performance based metrics. 60 Endnotes 07 Demographics & Browser Compatability The nitty gritty endnotes. The numbers behind the study. 61 Contact Us 08 Interpreting The Results: Comparisons Across The Board We’d love to hear from you. A birds eye view of how the industries performed.i 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  4. 4. THE BIGPICTUREA home is not designed without first considering the needsof the person that will be living there. Then, there are other 2. Online Constraints. As much as “virtual space” connotes a sense of boundless opportunity, websites are still confined to the 2-dimensional space of afactors such as the lay of the land, the region’s climate and screen. Browser compatibility and W3C* accessibilitylocal building codes that may influence the structure and standards also need to be considered. USfaçade of the house. Likewise, a website looks the way it ERdoes because of specific conditions and web standards 3. Content. This may seem obvious, but the S structure—that is the organization and hierarchy(Figure 2). Consider the house metaphor: the heavier the of information—is the foundation of any website.rain or snowfall, the steeper the pitch of the roof to better The navigation, and to some degree, the layout, isaccommodate the drainage. A website that is intended for dependant on the depth and breadth of content. CONSTRAINTmultiple audiences or has to carry a heavy information-car- A WEBSITE IS Whether it is rendered as text or an image, the ONLINE DESIGNEDgo also necessitates careful consideration when it comes to content is the visual meat of a website. WITHIN FIXEDdesign. So whether it is evaluating website performance or CONDITIONSbuilding a new one from scratch, there are three important *The World Wide Web Consortium (W3C) is anfactors to consider: international standards organization1. User Behavior. People are both task-oriented CO N and lazy—the credibility and purpose of a website NT TE is assessed in as little as five seconds time and most pages are quickly scanned for links and headlines. Navigation menus address this dualism with a simple way for people to complete tasks without requiring a lot of reading or scrolling.1 Figure 2. Conditions of design are determined by three critical factors— the people that are expected to use the site, the type of content and the limitations of the technology.01 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  5. 5. FINDING THE CENT ER OF GRAVITY:THE ZEN TRIANGLE OF DESIGNA website that can adequately satisfy all three of these page is made up of images/graphics andfactors has achieved equilibrium: it balances functionality text—keep in mind that you are measuring text in blocks, which includes the buffer space around theand aesthetics. Imagine trying to balance a triangle on individual characters and paragraphs.the tip of a pencil—it works if you can find the center ofgravity. But place weight on any one of the vertices 2. Triangulate.leg (Figure 3) and follow graphics along the green Find the percentage of the horizontaland the triangle will tip. And that’s the same principle line across the triangle. Then, follow the slantedguiding website usability. Content is king, they say—but line down from the right on the blue leg (percentage 100%it should be displayed in accordance with user behavior of text), stopping where it intersects with the 0% horizontal line.(Figure 3). Too much text or too many graphics on a 10page, and there is a shift in equilibrium. Superfluous text 3. Check it. From the intersection point, trace the 90or graphics on the homepage impairs the user’s ability slanted line down to the pink leg—this is the 80 20 percentage of white space. The numbers shouldto scan the content and navigate the website—and the add up to 100 percent. 30likelihood of a clickable moment quickly dwindles away, be 70it a sale or lead. Practice: Find 30 percent along the 60 40 green leg (graphics), and follow the line sVisual balance and usability are strongly linked together. hic % across to the right. Stop at the slanted line Tex apTake for instance the example of trying to find a friend Gr t 50 leading up to 30 percent text (blue leg). The 50 %in the midst of a crowd. Research has demonstrated that slanted line leading down to the pink legusers took longer to locate a target (such as a button) in should be at 40 percent. 40 60crowded spaces as compared to more open spaces (i.e.,a higher percentage of white space).2 The Zen Triangle of 30 70Design builds on this idea and is a way to show how visualcomposition and website usability are related. 20 80And the triangle method is quantifiable—you canmeasure and characterize a website based on these three 10 90visual components. Now there is the potential to change 0% 100%the way businesses compare websites within their industry. 90 80 70 60 50 40 30 20 10Here’s how it works: 100% 0% % White Space1. Approximate % of graphics and text. Figure 3. In the example above, the balance of graphics (30%), white pace (40%) and text (30%) are within the Using a grid method, determine how much of the center of gravity zone.02 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  6. 6. INDUSTRIAL BALANCENot all websites are created equal, and every type of industry has to grapple with a uniqueset of conditions. And as it turns out, because of this, there are patterns in how differentindustries make use of the available visual space. Extrapolating data from measurementsof 100 homepages, visual composition zones for each industry were delineated based onthe percentage of graphics, text and white space. For instance, hotel websites (travel &hospitality) tended to be made up of more graphics and whitespace than the text heavy 100% 0%university or e-commerce sites. These are the patterns we observed (Figure 4)*: 90 10 E-commerce B2B• E-commerce sites are an example of and as little as 10 percent of the page Travel & Hospitality how sacrificing white space can result in was text. In other cases, white space 80 20 Higher Education a cluttered appearance. The challenge dominated the page, creating a very to incorporate loads of textual content clean and modern aesthetic. 70 30 with graphics resulted in some sites with Zone: Mid to upper left disproportionate amounts of text to white space; quite the opposite of • Higher Education also had the 60 40 challenge of carrying a heavy information s hic % what was observed in the travel and Tex cargo, but these sites tended to stabilize ap hospitality category. Gr t 50 50 excessive wordiness with images of % Zone: Lower right and center student faces and campus life.• B2B also took advantage of white Zone: Mid-to center right 40 60 space to communicate a professional *For the purpose of this study, only homepages were appearance through minimal use of evaluated using the triangle. However, this tool can 70 30 be used to assess interior pages as well. graphics and text. Zone: Lower left and center 20 80• Travel & Hospitality showed the greatest variation in how graphics and 10 90 images were used. Some homepages 0% 100% were filled with one large graphic 90 80 70 60 50 40 30 20 10 100% 0% % White Space Figure 4. Each industry is presented with a unique rhetorical situation where the needs of the audience and the business objectives determine to a certain extent the visual balance of the website. For example, an e-commerce site offering a wide array of products may tend to have a higher density of text and graphics. The zones outlined within the triangle show the trends in how visual space was used on e-commerce, B2B, higher education and travel and hospitality websites.03 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  7. 7. OVERVIEW &METHODOLOGYTo analyze website design and usability in tandem required OVERVIEW: SCORECARDa two prong approach: RANK INDUSTRY CATEGORY TYPE CHALLENGE WEBSITE WEBSITE SCORE1. In 2010, Oneupweb inventoried 100 websites COMPLEXITY CAPABILITIES spanning e-commerce, B2B, higher education and 1 HIGH 4.3 MBA PROGRAMS Complex content for multiple audiences: Moderately Important travel and hospitality, cataloging various design HIGHER Deliver compound tiers of information for (online applications) components. Trends and characteristics for each EDUCATION internal (students, staff, and professor) and external (parents, prospective industry were summarized based on the aggregate students and scholars) audiences raw data set.2. From each industry, three sites representing the 2 4.1 Deliver compound tiers of information ONLINE MODERATE Extremely important PRINTING for dual functionality: (shopping cart) TO HIGH average and deviations within each category were Serve as a repository of product images E-COMMERCE and information, much like a catalog, and selected for remote user-testing. Users were given handle all steps of the sales and tasks to complete on each site, followed by brief transaction processes. survey questions. Measurements included time 3 LOW TO 3.1 PACKAGING Marketing hub for lead generation: Minor Importance to complete the tasks and page views. Click-streams Navigation and content aimed to satisfy (client portals) MODERATE were also analyzed. In addition to these metrics, multiple degrees of expertise and B2B knowledge, catering to key decision user feedback and ratings were collected. The makers who demand quick and easy access to mission-critical information. performance within and across the industries was evaluated based on these measurements. 4 LOW 2.0 LUXURY, Attractive without compromising ImportantThe industries were evaluated and ranked based on an TRAVEL & NON-FRANCHISE functionality: (online booking) HOTELS Convey a particular aesthetic throughoutanalysis of the usability test and the inventory (Table 1). HOSPITALITY the site while providing excellent guest service via user-centered web design. Table 1. Overview of the four categories of websites evaluated for this study and the challenges each genre grapples with. Of the four industries, Travel and Hospitality performed the worst, despite having the least requirements. *The scores were calculated based on the results from the usability test and weighted by factors measured during the inventory. The complexity of information and the capabilities required for each kind of site was also considered in the scoring.04 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  8. 8. INVENTORY HIGHLIGHTS• Page length was measured in pixels for each of the 100 sites (Figure 5). Page length is one of several factors that bridge design with usability. A page that requires scrolling through more than two screen lengths (approximately 1300 pixels) asks a lot of the user. Length of a page is INVENTORY also correlated with depth of content. For example, B2B and travel and NAVIGATION ATTRIBUTES hospitality sites tended to have minimal content and were also shorter E-COMMERCE B2B TRAVEL & HIGHER in length compared to e-commerce and higher education sites. HOSPITALITY EDUCATION• Navigation is an essential component of a website (Table 2). Horizontal navigation 90% 95% 55% 90% Horizontal navigation has become a mainstay of website design for 10 or more items on main navigation 15% 5% 5% 5% many reasons—some argue that this method preserves valuable 1.9 Drop down / real-estate. Of the sites inventoried, travel and hospitality sites most rollover menus 20% 45% 25% 40% often deviated from the norm, relying solely on vertical navigation Footer navigation* structures. However, both e-commerce and higher education often 90% 50% 70% 75% utilized both a horizontal and vertical navigation, but 9 out of 10 times, Search field 25% 35% 5% 80% the top level items were displayed in the horizontal menus. Linking to social profiles 45% 10% 20% 35%• In addition to the navigation scheme, the PAGE LENGTH Table 2. Inventory: navigation attributes across the four categories. composition of the page is built around graphics, Reported here as percentage of sample exhibiting the characteristic. 4000 E-commerce links and text. Travel and hospitality sites focused B2B *Majority of footer navigations were classified as “administrative” links, on large central images ( Table 3), whereas i.e., sitemap and contact information. Forty percent of e-commerce Travel & Hospitality 3500 Higher Education sites that had footer navigation were classified as Down-to-Child e-commerce sites used multiple sections to help make (DtC) links. the content more scannable. 3000 BUILDING BLOCKS 2500 E-COMMERCE B2B TRAVEL & HIGHER HOSPITALITY EDUCATION PIXELS 2000 Large main image* 15% 10% 50% 30% screen length Average no. of 1500 content sections 6 3 2 3 on homepage 1000 Average no. of internal links 92 27 19 56 on page 500 Average word count 570 232 305 546 0 Table 3. Inventory: Building blocks—graphics, links, and text—varied Figure 5. E-commerce sites show the most variation in page length across the industries. whereas travel and hospitality were more tightly grouped. The data *Large main graphic takes up more than 1/4 of visible page (% of also shows that B2B and hospitality sites also tended to fit the homepage sites inventoried) content within the length of two screens (dashed line). Longer pages require users to scroll more to see all the information.05 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  9. 9. SEEING ACTION:THE USABILITY TESTRemote usability testing is a method of quantifying how real people interact with websitesusing performance based metrics:• Task completion rates (success, abandon, failure)• Time to complete task• Number of pages viewed• Click-streamThe first observation is obvious: what percentage of users cansuccessfully complete the task? For a more in-depth analysis, how long the task takes andhow many pages the user must click through are interpreted using the survey data. Everyparticipant also completed an opinion poll to gauge their level of satisfaction with eachwebsite. Together, the analysis of user data and attitudes provides insight into both howusers feel about a website as well as where they may be experiencing potential difficultiescompleting tasks.The intent of this study was not to detect specific flaws in the design of the websites tested,but rather to determine if, in fact, visual composition may be a significant factor to considerwhen designing websites for performance. This study is unique in that it provides a robustanalytical comparison of how websites varied in both design as well as performance acrossmultiple industries. It puts into question the conventions and norms that guide current designpractices. And to that extent, is there room for improvement? Do we all need to be in thecenter or how much elbow room is allowed?06 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  10. 10. DEMOGR A PHICS MARKET SHARE: BROWSER MOST USED BROWSERSCOMPATIBILITY 4% 3% 2% Firefox (version 3.6 3.5) 7% Microsoft Internet Exploreer 6.0 5% Microsoft Internet Explorer (version 8.0 7.0)Nearly half of the 107 responses collected from a global pool of participants (57 percent Chrome (version 4.0 4.1) Safari 4.0female) were using Firefox (Figure 6). Nonetheless, Internet Explorer still dominates Firefox 3.0 21%the global market share (Figure 7). The variety of web browsers in use and variations Opera 10x Otheramong screen resolution serve as a reminder that testing browser compatibility is stilla necessity (Figure 8). For the remote usability study, there were no reports of browser 39%incompatibility issues. 19% USABILITY TEST: MOST USED BROWSER Figure 7. There are many types of browsers, and websites should be tested for browser compatibility to ensure the site is performing optimally for all visitors. Although Firefox is gaining, Microsoft Internet Explorer still dominates. [Data provided by Net Market Share]. 6% 9% SCREEN RESOLUTION 1024x768 3% 6% 1280x800 20% 36% 1280x1024 6% 1440x900 1680x1050 9% Firefox 1366x768 800x600 Internet Explorer other Chrome Safari 11% 25% 20% 49% Figure 8. The user’s settings may affect how your website looks on the screen. The 1024Figure 6. The majority of the usability study participants reported using Firefox. x 768 screen size is the most widely adopted, but that still only represents a quarter of the population. Websites designed with fluid layouts will better perform across multiple settings. [Data provided by Net Market Share].07 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  11. 11. INTERPRETING THE RESULTS:COMPA RISONS ACROSS THE BOARDIdeally, a user should find the information MEAN TIME TO COMPLETE TASK OVERVIEW: TASK COMPLETION RATESwithin one or two clicks. Factors to consider E-COMMERCE B2B TRAVEL HIGHERwhen interpreting these results: 250 HOSPITALITY EDUCATION 10.0 E-Commerce 8% B2B• Depth of site (page levels) Error bars (95% 23%• Content density per page 200 confidence interval) 8.0 Fail Success 45%• Abandon rates Abandon 6% 47%• Degree of difficulty (task) 71% Page Views 150 6.0 Time (sec)It was surprising that, given the apparentsimplicity of hotel websites, it took 100 4.0 Travel Hospitality Higher Educationusers, on average, the most page views 10% 20%to find basic information, like room rates 31% 28%(Figure 9). And although university sites 50 2.0required the greatest time expenditure, 106.1 139.1 93.2 75.4the task completion success rate was the 3.3 2.5 5.3 4.7second highest among the four categories 0 0 62% Time (sec) 106.1 93.2 75.4 139.1 49%(Figure 10). In other words, interpretingsuccess rates and time to complete Page Views 3.3 2.5 5.3 4.7 Figure 10. Task completion success rates. Although e-commerce had the highest failure rate, more participants abandoned the tasks on thetasks requires consideration of additional hospitality and travel sites, suggesting that these were the most difficultfactors, like depth of content (word Figure 9. The average time to compete tasks and the number of page views for each to use.counts). For example, both e-commerce category. User’s spent the longest completing tasks on university sites. However, these sites also had, on average, the second highest word counts, second only to e-commerceand higher education websites are sites. Rather than interpreting this as difficulty finding information, it is likely that users took longer because there was more content to comprehend (Error bars represent 95%wordier than B2B and Hotel (travel confidence interval).hospitality) websites so that it takeslonger to comprehend the information;and it is a positive if users are engagingwith content. Page views, on the otherhand, are more indicative of the amount of“work” it takes to locate information.08 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  12. 12. INDUSTRYBREAKDOWN:THE EVIDENCEFrom each industry, threesites representing theaverage and deviationswithin each categorywere selected for remoteuser-testing. These arethe results.09 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  13. 13. E-COMMERCE:THE UPSHOTOF SELLINGUSABILITYAn e-commerce site is the beginning and the end of a It’s important to keep in mind that customers behave Challenge: Dual functionalitysales process. And many e-commerce websites function differently on a website than they do in a physical retail space. The popular wisdom says that grocery stores stock Serve as a repository of product images and information,as the exclusive location for conducting all consumer staples, like milk and eggs, in the back of the store to create much like a catalog, and handle all steps of the sales andtransactions. The aisles and shelves are translated into more opportunities for impulse purchases as the customer transaction processes.links and images, and the floor plan becomes the sitemap. walks by racks of merchandise. And, for the most part, thisThe layout of traditional brick and mortar stores may be insight into consumer psychology works. But online, it’s a different story. Online shoppers want the most direct routearranged to structure the flow of customer traffic past store to the point of sale, i.e., the fewer the required page viewsspecials and products. Likewise, designing an e-commerce the better. In the U.S., the average shopping session on ansite requires a certain logic that will seamlessly direct the e-commerce site lasts roughly 6 minutes from start toconsumer through the product gallery, guiding them to finish3. And like the neighborhood grocery store, that’s thethe check-out as quickly and efficiently as possible. draw of e-commerce sites: it’s quick and convenient.10 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  14. 14. MAKING SENSEOF EXPECTATIONSDesigning a user-friendly e-commerce site is challenging 2. Obvious is good. The homepage is like a store’s 3. Bottom-line: Functionality. Keep itprecisely because of what the site has to accomplish. An window display, minus the mannequins. Let visitors simple—that goes for both back-end management clearly see what you offer upfront. In the same time as well as front-end usability. In other words, avoidentire inventory needs to be maintained and displayed it takes for a consumer to click through to see the feature creep. Extra functions, like search featureswithin the constraints of a virtual space. The site does product, they could (and would) have easily clicked and online customer service (live chat) are only adouble duty as a storefront and an inventory management over to a competitor’s site if they don’t like what competitive advantage if they deliver quality resultssystem. But the site needs to be designed first and foremost they see or don’t find what they’re looking for. Vital to the consumer 100 percent of the time. Otherwise, information, like price and product specs, should be broken applications, form failures or irrelevant searchto handle the primary objective: sales. And that means accessible within a single click. results will maim the sites credibility and ultimatelydesigning with consumer behavior in mind. send the consumer packing.It comes down to looks. But maybe not in the way you thinkthey do. Pretty doesn’t cut it—instilling a sense of trust and CONSUMER EXPECTATIONS:confidence is the first step down the purchase path. It is INFLUENCIAL FACTORS IN PURCHASE DECISIONactually really important to consumers that the site hasthe look and feel of an e-commerce site (Figure 11). And Pricing/shipping information clearly stated 95.5%consumers will judge the credibility of a site within the first1/20th of a second (50 milleseconds)4. The visual aesthetic Looks credible trustworthy 76.5%recommended for e-commerce sites is best described Product displayed on homepage 70.8%as practical because the design is often centered aroundthe navigation structure—the floor plan. But a site that Visually appealing 66.7%manages to be easy to navigate and visually pleasing will Total cost calculator (shipping, tax, etc) 59.1%likely generate a higher rate of return customers. This iswhat the consumer expects: Search function 48.2%1. Familiarity breeds trust. A website that Privacy statement 45.5% looks like an e-commerce site is going to be Onsite customer reviews/ testimonials 40.9% more immediately perceived as less of a risk Online customer service (live chat) 32.5% when it comes time to pull out the credit card. Links to social networks (Facebook, Twitter, etc) 22.7% 0% 20% 40% 60% 80% 100% Figure 11. The most important factors that come into play when deciding to make a purchase online support the claim that consumers want to know the precise cost of the transaction upfront before proceeding through the checkout process. Secondly, the results corroborate the evidence that suggests consumers decide in the first five seconds whether or not they trust a website. A dazzling website with online customer service won’t win over a customer unless the website communicates security and trust- worthiness first.11 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  15. 15. E-COMMERCEDECONSTRUCTED:AN ANALYSISOF DESIGN ANDUSABILITYThe e-commerce sites inventoried all offeredcustom printing services, such as personalizedbusiness cards and brochures. These websites fallwithin the category of e-commerce sites thatfunction and exist wholly online. The followingthree websites were user-tested: PrinterRunner.com PrintingforLess.com PrintingCenterUSA.com12 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  16. 16. PRINTRUNNER: DESIGNINGFOR EXPECTATIONSPrintRunner most closely adhered to consumer expectations. The site handled a large inventory byshowcasing the top level categories in the body of the page, complimented by a more detailed menuof products in the left sidebar. This proved an effective strategy for customers looking for very specificinformation on a top-level page. HEADER: Shopping cart in the main navigation bar. SIDEBAR (LOCAL NAV): A compre- hensive side bar menu provides access to interior pages without requiring the user to navigate through multiple menu levels. FLASH AREA: The changing Flash images showcase products and current PrinterRunner.com specials in a way that is appealing to the user without distracting from the The anatomy: PrintRunner navigation elements. was most representative of a typical e-commerce printing MAIN CONTENT AREA: Products site. The top-level navigation are given prime significance in the body bar has very few links. The of the page as images (approximately sidebar navigation provides 2.5 in2). The images link to the individual the product-specific links. product pages. And the main content area highlights the main product FOOTER: Placing a sitemap in the footer categories and emphasizes is becoming a popular strategy for opti- links to current specials. mizing user-centered site navigation. Also, contact information and the shopping cart are prominently displayed in the upper right corner, exactly where consumers expect to find those features.13 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  17. 17. PRINTING FOR LESS: PUTTING IT ALLOUT THERE, LITERALLYPrinting For Less is the wordiest of the e-commerce pages tested. The density of text and graphics, pairedwith an illogical navigation scheme created a usability disaster. In order to find out about business cards,users had to roll over the third tab (“cards”) to find sub-menu options. The sidebar navigation alsoproved confusing for users. Overall, the categorization of the products is not intuitive—most usersare browsing by type of product, not dimensions. HEADER: Rolling over the top-level tabs reveals more menu items on the lavender bar below the tabs. SIDEBAR (LOCAL NAV): 20 percent of users did not notice the search box. The sidebar menu runs nearly the length of the entire page, requiring user to scroll through to see all the available options. FLASH AREA: Customer service and customer satisfaction are emphasized in this area, whereas other sites use this prime real-estate to focus on products PrintingForLess.com MAIN CONTENT AREA: Multiple The anatomy: Printing For text clusters overwhelmed the users—and Less is overwhelmed with failed to convey any useful information. content, burying some of the key selling points, i.e. “100% FOOTER: If the user ever makes it this Satisfaction” and “You Can far, they will find basic administrative Trust your Printing Project links, such as the FAQ and Help Center. to Us” are lost on the viewer Links to specific products or services are who is simply trying to find not included. product information.14 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  18. 18. PRINTING CENTER USA:CHALLENGING CONVENTIONSDifferent is good, sometimes. But when it came to designing for usability, Printing Center USA’s uniqueapproach to design challenged the users. Many users found the colors distracting and layout confusing. Andthis perception crippled the website’s credibility as a quality and trusted printing center. But if that doesn’tmake the point then this will: nearly two-thirds (63 percent) of the participants said they would not makea purchase from this site. It’s pretty, sure, but when it comes to performance—pretty doesn’t cut it. HEADER: For important things, like the placement of shopping cart and contact information, the site followed the norm. But that was the end of typical—the large graphic header was unique to this site. SIDEBAR (LOCAL NAV): In line with doing a complete 180, Printing Center USA turned the side bar on it’s side. The content in this section normally appears in the left column on typical e-commerce printing sites. FLASH AREA: Scroll bar featuring products challenge conventions, and users. PrintingCenterUSA.com The anatomy: Printing MAIN CONTENT AREA: The scrolling Center USA took a com- menu was also used as a display for the pletely different approach products and services. to design that focuses on colors. The design attempts to break the mold of the FOOTER: Not quite a typical footer, “boring” e-commerce site but the same idea of including an with flashy colors, a abbreviated sitemap at the bottom of the modernized page layout page is implemented here. However, it and a unique scrolling looks like an afterthought or a space filler. view of products.15 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  19. 19. THE USABILITYTEST: OVERVIEWOF RESULTSPrintRunner came out on top for both usability and user SUCCESS RATESpreference (Figures 12 13; Table 5 and Figure 14 on the PrintRunner Printing For Less Printing Center USAfollowing page). Users had the most difficulty completing 5% 13% 7%the tasks on Printing For Less; the abandon rate was the 37%highest (13 percent) suggesting users were more likely to Success 33%give up because of frustration. This is likely a result of poor Fail 44%navigation logic and the density of text cluster, making Abandonit difficult for users to identify critical information. On 62%average, Printing for Less required the most page views for 43% 56%task completion (Table 5).Printing Center USA didn’t fair much better; over half the Figure 12. The rate of success and failure for task completion was calculated from user feedback and tracking the URLs. Users also had the option to abandon the task. Task abandonment typically indicates that the task was too difficult or was taking too muchparticipants (56 percent) failed to locate the success URLs; time to complete.which is to say that the participants never satisfied therequirements of the task (Figure 12). USER EXPERIENCE RATED EXCELLENT 2.6 1.5 1.9 POOR PrintRunner Printing For Less Printing Center USA Figure 13. The user’s ranked the sites in order of preference. Scores were assigned to the rankings, where 3’s were tallied each time a site was ranked as the best user experience. PrintRunner took first place; earning a score of 2.6. Printing For Less was most frequently rated as the worst experience.16 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  20. 20. PAGE VIEWS Average Page Views The fewer pages the consumer has to click Time Per Page (seconds) 4 100 through, the more time they will likely spend engaging with the product. 3.5 80 3Time Per Page (Seconds) 60 2.5 # of Page Views 2 40 1.5 1 20 0.5 1.5 0 0 PrintRunner Printing For Less Printing Center USA Figure 14. The number of pages a user has to click through is a good indicator of usability—especially for e-commerce sites where the goal is to design a convenient and simple shopping experience. And as the results show, users tended to spend less time per page on Print Center USA’s site, suggesting that they weren’t finding what they were looking for; whereas on PrintRunner, the users were able to spend more time engaging with product information. The time spent searching for information will likely distract the consumer from their goal. PAGE VIEWS SECONDS SECONDS/ PAGE Average Maximum Average Maximum Average PrintRunner 2.5 5.5 138.5 475 55.4 Printing For Less 3 12.5 96.5 347.5 32.2 1.9 Printing Center USA 3.5 13 81.5 326 23.3Table 5. The participants were asked to complete a series of tasks on each website, including findingtemplates for business cards and turn around time for printing services. The time and number of pagesthe user went through to complete the task were recorded.17 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×