Contenu connexe


Revolutionizing Website Design

  1. REVOLUTIONIZING WEBSITE DESIGN: THE NEW RULES OF USABILITY 877.568.7477 Provided by Oneupweb® ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  2. BALANCING ACT: FUNCTIONALITY & AESTHETICS. The online experience culminates into a explain. We looked at 100 websites, spanning four series of action-oriented visual cues where industries, and dissected the anatomy of each one. Patterns were detected and characteristics cataloged. We images and words translate into clickable then selected three websites from each category to be moments—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 a is 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 white real people interact with real businesses and space. Each element was charted on the Zen Triangle of 90 10 organizations.And the performance of a website Design (Figure 1) and points on the triangle were matched 80 20 hinges in the balance of these parallel forces: func- against the findings from the usability testing. And the 70 30 tionality 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 ap Performance 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 60 the angle Oneupweb set out to investigate. In this report, E-commerce we take a brand new look at an old idea: why do some 30 70 websites look the way they do, but more importantly, B2B how do looks translate into action—that is, clickable Hospitality & Travel 20 80 moments? And here’s the hook—there is no magic wand or 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 10 between visual aesthetics and usability. It’s about 100% 0% % White Space achieving a state of equilibrium. And what’s more, it’s possible to measure and evaluate. It’s the cause and effect Figure 1. A triangle balances on its center of gravity. Using this concept, the visual of 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 us i 877.568.7477 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  3. THE MEAT: TABLE OF CONTENTS 01 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  4. THE BIG PICTURE A home is not designed without first considering the needs of 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 a factors such as the lay of the land, the region’s climate and screen. Browser compatibility and W3C* accessibility local building codes that may influence the structure and standards also need to be considered. US façade of the house. Likewise, a website looks the way it ER does 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, is accommodate the drainage. A website that is intended for dependant on the depth and breadth of content. CONSTRAINT multiple audiences or has to carry a heavy information-car- A WEBSITE IS Whether it is rendered as text or an image, the ONLINE DESIGNED go also necessitates careful consideration when it comes to content is the visual meat of a website. WITHIN FIXED design. So whether it is evaluating website performance or CONDITIONS building a new one from scratch, there are three important *The World Wide Web Consortium (W3C) is an factors to consider: international standards organization 1. 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  5. FINDING THE CENT ER OF GRAVITY: THE ZEN TRIANGLE OF DESIGN A website that can adequately satisfy all three of these page is made up of images/graphics and factors has achieved equilibrium: it balances functionality text—keep in mind that you are measuring text in blocks, which includes the buffer space around the and 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 of gravity. 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 horizontal and the triangle will tip. And that’s the same principle line across the triangle. Then, follow the slanted guiding 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 10 page, and there is a shift in equilibrium. Superfluous text 3. Check it. From the intersection point, trace the 90 or 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 should to scan the content and navigate the website—and the add up to 100 percent. 30 likelihood of a clickable moment quickly dwindles away, be 70 it a sale or lead. Practice: Find 30 percent along the 60 40 green leg (graphics), and follow the line s Visual balance and usability are strongly linked together. hic % across to the right. Stop at the slanted line Tex ap Take 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 leg users took longer to locate a target (such as a button) in should be at 40 percent. 40 60 crowded spaces as compared to more open spaces (i.e., a higher percentage of white space).2 The Zen Triangle of 30 70 Design builds on this idea and is a way to show how visual composition and website usability are related. 20 80 And the triangle method is quantifiable—you can measure and characterize a website based on these three 10 90 visual 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 10 Here’s how it works: 100% 0% % White Space 1. 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  6. INDUSTRIAL BALANCE Not all websites are created equal, and every type of industry has to grapple with a unique set of conditions. And as it turns out, because of this, there are patterns in how different industries make use of the available visual space. Extrapolating data from measurements of 100 homepages, visual composition zones for each industry were delineated based on the 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  7. OVERVIEW & METHODOLOGY To analyze website design and usability in tandem required OVERVIEW: SCORECARD a two prong approach: RANK INDUSTRY CATEGORY TYPE CHALLENGE WEBSITE WEBSITE SCORE 1. 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 Important The industries were evaluated and ranked based on an TRAVEL & NON-FRANCHISE functionality: (online booking) HOTELS Convey a particular aesthetic throughout analysis 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  9. SEEING ACTION: THE USABILITY TEST Remote usability testing is a method of quantifying how real people interact with websites using performance based metrics: • Task completion rates (success, abandon, failure) • Time to complete task • Number of pages viewed • Click-stream The first observation is obvious: what percentage of users can successfully complete the task? For a more in-depth analysis, how long the task takes and how many pages the user must click through are interpreted using the survey data. Every participant also completed an opinion poll to gauge their level of satisfaction with each website. Together, the analysis of user data and attitudes provides insight into both how users feel about a website as well as where they may be experiencing potential difficulties completing 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 consider when designing websites for performance. This study is unique in that it provides a robust analytical comparison of how websites varied in both design as well as performance across multiple industries. It puts into question the conventions and norms that guide current design practices. And to that extent, is there room for improvement? Do we all need to be in the center or how much elbow room is allowed? 06 877.568.7477 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  10. DEMOGR A PHICS MARKET SHARE: BROWSER MOST USED BROWSERS COMPATIBILITY 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.0 female) 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 Other among screen resolution serve as a reminder that testing browser compatibility is still a 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 1024 Figure 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  11. INTERPRETING THE RESULTS: COMPA RISONS ACROSS THE BOARD Ideally, a user should find the information MEAN TIME TO COMPLETE TASK OVERVIEW: TASK COMPLETION RATES within one or two clicks. Factors to consider E-COMMERCE B2B TRAVEL HIGHER when 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 apparent simplicity of hotel websites, it took 100 4.0 Travel Hospitality Higher Education users, 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.0 required the greatest time expenditure, 106.1 139.1 93.2 75.4 the task completion success rate was the 3.3 2.5 5.3 4.7 second highest among the four categories 0 0 62% Time (sec) 106.1 93.2 75.4 139.1 49% (Figure 10). In other words, interpreting success 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 the tasks requires consideration of additional hospitality and travel sites, suggesting that these were the most difficult factors, 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-commerce and 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 takes longer to comprehend the information; and it is a positive if users are engaging with content. Page views, on the other hand, are more indicative of the amount of “work” it takes to locate information. 08 877.568.7477 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  12. INDUSTRY BREAKDOWN: THE EVIDENCE From each industry, three sites representing the average and deviations within each category were selected for remote user-testing. These are the results. 09 877.568.7477 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  13. E-COMMERCE: THE UPSHOT OF SELLING USABILITY An e-commerce site is the beginning and the end of a It’s important to keep in mind that customers behave Challenge: Dual functionality sales 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 and transactions. 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, this The 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 route arranged to structure the flow of customer traffic past store to the point of sale, i.e., the fewer the required page views specials and products. Likewise, designing an e-commerce the better. In the U.S., the average shopping session on an site requires a certain logic that will seamlessly direct the e-commerce site lasts roughly 6 minutes from start to consumer through the product gallery, guiding them to finish3. And like the neighborhood grocery store, that’s the the check-out as quickly and efficiently as possible. draw of e-commerce sites: it’s quick and convenient. 10 877.568.7477 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  14. MAKING SENSE OF EXPECTATIONS Designing a user-friendly e-commerce site is challenging 2. Obvious is good. The homepage is like a store’s 3. Bottom-line: Functionality. Keep it precisely 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, avoid entire inventory needs to be maintained and displayed it takes for a consumer to click through to see the feature creep. Extra functions, like search features within 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 a double 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 results system. 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 search to handle the primary objective: sales. And that means accessible within a single click. results will maim the sites credibility and ultimately designing with consumer behavior in mind. send the consumer packing. It comes down to looks. But maybe not in the way you think they 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 DECISION actually really important to consumers that the site has the 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 first 1/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 around the 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 is what 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  15. E-COMMERCE DECONSTRUCTED: AN ANALYSIS OF DESIGN AND USABILITY The e-commerce sites inventoried all offered custom printing services, such as personalized business cards and brochures. These websites fall within the category of e-commerce sites that function and exist wholly online. The following three websites were user-tested: 12 877.568.7477 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  16. PRINTRUNNER: DESIGNING FOR EXPECTATIONS PrintRunner most closely adhered to consumer expectations. The site handled a large inventory by showcasing the top level categories in the body of the page, complimented by a more detailed menu of products in the left sidebar. This proved an effective strategy for customers looking for very specific information 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 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  17. PRINTING FOR LESS: PUTTING IT ALL OUT THERE, LITERALLY Printing For Less is the wordiest of the e-commerce pages tested. The density of text and graphics, paired with 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 also proved confusing for users. Overall, the categorization of the products is not intuitive—most users are 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 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  18. PRINTING CENTER USA: CHALLENGING CONVENTIONS Different is good, sometimes. But when it came to designing for usability, Printing Center USA’s unique approach to design challenged the users. Many users found the colors distracting and layout confusing. And this perception crippled the website’s credibility as a quality and trusted printing center. But if that doesn’t make the point then this will: nearly two-thirds (63 percent) of the participants said they would not make a 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. 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  19. THE USABILITY TEST: OVERVIEW OF RESULTS PrintRunner came out on top for both usability and user SUCCESS RATES preference (Figures 12 13; Table 5 and Figure 14 on the PrintRunner Printing For Less Printing Center USA following 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 Abandon it 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 much participants (56 percent) failed to locate the success URLs; time to complete. which is to say that the participants never satisfied the requirements 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 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  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 3 Time 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.3 Table 5. The participants were asked to complete a series of tasks on each website, including finding templates for business cards and turn around time for printing services. The time and number of pages the user went through to complete the task were recorded. 17 877.568.7477 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  21. ETHOS APPEARANCE Take a moment and think about what your gut feeling tells you about each of the e-commerce websites we have looked at in this section. Based on this feeling alone, would you be more or less likely to use one of these sites for your printing needs? ETHOS HEX Because, after all, that’s what it comes down to for many consumers. It’s about how the site appeals to the consumer instinct (Figure 15). LOOK FEEL PrintRunner The visual information structure is the organization of content using color, contrast, headers and fonts to help direct the user’s attention to items like navigation and calls to CREDIBLE Printing For Less action. It also conveys significant information to consumers about the status and integrity 100% Printing Center USA of the company. Bright and fun colors may be appropriate for a site about kids, but might fail to communicate the right message for a printing site. Likewise, a website that looks cluttered and hectic might send the message to the consumer that the business operations M EA INFO 100% are also much the same. LIS SE R NA O F MA 50% PrintRunner appealed the most to the users in this study (Figure 15) in nearly SIO % FINTION 100 all aspects. Whereas the cluttered layout and navigation of Printing Center USA and ES DI OF NG Printing For Less cost these sites a lot in terms of appeal. And if that’s not convincing, PR then consider this: nearly two thirds of the participants were strongly opposed % 50 50 % to making a purchase from Printing Center USA. On the flip side, nearly three-quarters of the group were sold on PrintRunner’s more complete ethos (Figure 15); agreeing that they would purchase from this site. 0% 50% % 50 SIM NA LA Y ITY % 10 DL PL FR USER 100 0% E/ IEN VI YO 50% BIL CL GA U EA N A TIO T US N 100% FUNCTIONAL Figure 15. Fill it up. The higher the user ratings are for each factor, the fuller the Ethos Hex becomes. These factors show how well the site appeals to the user. And as the results show, Printing Center USA and Printing For Less suffered from a low ethos rating. 18 877.568.7477 • ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®