Revolutionizing Website Design
Upcoming SlideShare
Loading in...5
×
 

Revolutionizing Website Design

on

  • 527 views

 

Statistics

Views

Total Views
527
Views on SlideShare
527
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Revolutionizing Website Design Revolutionizing Website Design Presentation Transcript

  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • 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®
  • ETHOS &APPEARANCETake a moment and think about what your gut feeling tells you about each of thee-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 HEXBecause, after all, that’s what it comes down to for many consumers. It’s about how the siteappeals to the consumer instinct (Figure 15). LOOK & FEEL PrintRunnerThe 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 Lessaction. It also conveys significant information to consumers about the status and integrity 100% Printing Center USAof the company. Bright and fun colors may be appropriate for a site about kids, but mightfail to communicate the right message for a printing site. Likewise, a website that lookscluttered 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 100all aspects. Whereas the cluttered layout and navigation of Printing Center USA and ES DI OF NGPrinting For Less cost these sites a lot in terms of appeal. And if that’s not convincing, PRthen 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, nearlythree-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 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE SCORECARD: DO ONLINE PRINTING SITES MAKE THE GRADE? Based on the results from the survey and usability test, each site was graded across four categories. PRINTRUNNER PRINGTING PRINTING FOR LESS CENTER USA FACTORS COMMENTS GRADE COMMENTS GRADE COMMENTS GRADESCORECARD APPEARANCE Looks & feels like an B F D Although only 70 percent of The layout was structured around The colors and images distracted e-commerce site respondents found the site three main content sections the users and decreased the visually appealing, this site was promoting the services rather credibility of the site. Participants Credible/trustworthy rated by the user as the one 83% than using this space to showcase 50% described the site as “cluttered” 66% Visually appealing they would most likely make a products. For many this looked and “tacky.” purchase from. confusing and cluttered. A D C EASE OF FINDING Navigation The most typical layout and The roll-over top level menu A scrolling bar displayed INFORMATION navigation scheme proved the navigation was confusing to products. This was the most Sitemap/DtC links* most effective. many of the users. unique navigation layout of the 93% 66% 71% three sites tested. Although Presentation of intriguing, it did not make product information finding information any easier. Shopping cart A F D The features were basic but User’s reported the search results There was not a way to search the FUNCTIONS & E-COMMERCE worked. Only 5 percent of the were not helpful. The site also site, other than the site map, and FEATURES Search user’s reported using the search lacks an identifiable shopping user’s reported that the live chat 95% 55% 68% function during the test. cart and online customer service. feature was not working. Online customer service Task success rate B F C The majority of users were able to On average, users clicked through The results from the usability test successfully complete the tasks over 3 pages to complete the indicate that users had some Page views USABILITY within two pages—the optimal tasks—and both the failure and difficulties finding information. In 84% 65% 75% number for any e-commerce site. abandon rates were the highest of extreme cases, users went Time to the three sites. through over 10 pages to complete task complete a task. FINAL GRADE: B+ D C- Table 6. Each site was graded on design and usability. The percentages are based on the participants’ ratings and data collected during the usability test. *Down-to-Child (DtC) links allow user to drill down to more specific information within a top-level category. More and more, these are found in page footers and serve as an abridged sitemap. Links within the body of a page or sidebar that provide access to more specific category are also classified as DtC links. 19 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • STRIKINGA BALANCEE-commerce sites are notoriously overwhelming—packed full of images andtext throughout the body and navigation structure. Here’s how these sites handledthe challenge (Figure 16):• PrintRunner does a good job of achieving a balance between text 100% and graphics. 0% Balance: Even-keel Grade: B+ 90 10 E-commerce• Printing For Less fell to the extreme corner of the e-commerce zone, B2B weighted down with heavy text elements and ultimately destabilizing the 80 20 Travel & Hospitality Higher Education user experience. Balance: Tipping over Grade: D 70 30 PrintRunner• Printing Center USA took a completely different approach and moved 60 40 far, far away from the e-commerce conventions, falling into the territory of Travel s hic % & Hospitality. Tex ap Gr t Balance: Shaky Grade: C- 50 50 %Although none of these sites were all-stars, it demonstrates 40 60 Printing For Lesswhat happens when e-commerce sites fail to balancebusiness objectives with consumer behavior. And a sign of 30 70quality e-commerce design is one that can negotiate these Printing Center USAwithout compromising aesthetics or functionality. It definitelyis a tall order to fill when considering the special requirements 20 80for conducting online transactions. 10 90 0% 100% 90 80 70 60 50 40 30 20 10 100% 0% % White Space Figure 16. The Zen Triangle of Design is about achieving balance among the three visual aspects of a website: graphics, text and white space. 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.20 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE TAKEOUTAn e-commerce site is both a warehouse of product information and the point-of-sale. But inthe end, it’s all about the consumer. A user-centered design for e-commerce begins with a fewessential ingredients:Redundancy ensures exposure. Down-to-Child* links that appearin the menu, side bar, footers and the body of the page are more likely to be found.Prioritize images. Pictures of product do help consumers, but overusingimages clutters the page and will actually make it more difficult to locate targets.Bigger is better—when it comes to product images.This principle will also help cut back on the clutter, and is also a more effective way forprioritizing attention.*Down-to-Child (DtC) links allow user to drill down to more specific information within a top-level category.More and more, these are found in page footers and serve as an abridged sitemap. Links within the body of apage or sidebar that provide access to more specific category are also classified as DtC links.21 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • B2B:EXECUTIVESTYLEFrom a prospective inquiry to a conversion, the website is at the hub oftoday’s B2B sales funnel. Although the target audience may be veryspecific, there are still multiple interests served by a B2B website: currentclients and potential leads are using the website as a resource. In otherwords, a website is not merely a means to the end for generating leads;it also performs a service. And this is reflected by the shifting paradigms Challenge: Marketing hub for lead generationin B2B marketing: in a recent survey, nearly three-quarters of B2B professionals Navigation and content aimed to satisfy multiplebelieved the company’s website will play a larger role in the marketing degrees of expertise and knowledge, catering to keymix5. But when it comes to maximizing the online user-experience, many decision makers who demand quick and easy access tobusinesses, as usability expert Jakob Nielsen puts it, “emphasize internally mission-critical information.focused design [and] fail to answer customers’ main questions orconcerns.”6 It begs the question, then, are B2B websites ready for the job?22 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • DESIGNING BYEXPECTATIONSTaking the lead from Oscar Wilde, designing a website 3. A door to knock on. They like what they see;that is pure and simple is rarely ever a pure or simple now they want to talk. A link to a contact form should be easy to get to from anywhere on the site—itundertaking. Not only are there multiple internal interests doesn’t have to be the center of attention, but itto contend with, there’s also that whole marketing should be obvious to those looking. Also, keep itpoint-of-view. The website needs to appeal to potential simple and easy. Don’t ask for any more informationleads while satisfying the current client; that is, if retention than you need to make the initial contact. Long forms can turn away potential leads. It’s also important tois at all important. It begins with understanding the inform the user in some way, with either an e-mailaudience’s expectations (Figure 17). Consider the user’s confirmation or success page (or both!), that the formneeds and wants first: or request was received.1. Go back to grade school. At one time, USA Today was one of the most widely read newspa- pers, only second to the Wall Street Journal. And it EXPECTATIONS FOR B2B WEBSITES was successful because of its simplicity: it used clear and concise language that even a 5th grader would Pictures of products/services 96% understand. Not everyone is an expert in international 97% affairs or, for that matter, packaging. In addition, Good descriptive content 77% each section had a distinct colored tab that made it easy to navigate and the layout didn’t require Explanation of industry terms that may not be familiar 58% 69% flipping to the back of the section to finish an article. Examples of how the service or product is used 69% It was intended to be easily read and consumed. Business professionals expect the same courtesies A form to request a quote 69% from B2B websites. Pricing information 48%2. Demonstrate success. There’s probably one Testimonials 45% reason why another business is checking out your website—they are looking for a solution, and you Search function 44% may be the answer. Show them. What can your Career opportunites 28% company do, and how can they do it better than the rest? Portfolios or even video tutorials can help 0% 20% 40% 60% 80% 100% potential leads see the difference. Figure 17 Expectations for B2B sites indicate that users are most concerned with clearly understanding what a company does in terms that they can understand. It is more important that the site is designed around a clear message that speaks to industry outsiders than impressing the competition with fancy jargon.23 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • B2B DECONSTRUCTED:AN ANALYSISOF DESIGN ANDUSABILITYPackaging was selected as the representative B2Bindustry for the inventory. These websites offerservices for other businesses in need of a thirdparty packager. The following three websites wereuser-tested: Aaron Thomas (Packaging.com) SouthPack.com VisualPak.com24 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • A ARON THOM AS:NEED HELP?This is a classic example of unnecessary complexity. Unless you’re in the industry, you might notknow all the ins-and-outs of packaging. And the homepage is responsible for introducing the potentiallead to the company and its services. For example, a simple audience analysis would reveal thatmany businesses researching packaging solutions may not be familiar with packaging industryterminology—like thermoform packaging. And in this case, it took users three to four times as long tolocate the same basic information on the Aaron Thomas website compared to the other twopackaging sites. There may be a lot of valuable information contained within the site, but it was not easilyaccessible to users overwhelmed by the multiple and disparate content areas. HEADER: Drop down menus are not necessarily a bad thing, but on top of a site weighted with content, more is not necessarily better. The search box proved to be the most valuable site feature for users attempting to wade through the content and complex navigation. Packaging.com SIDEBAR (LOCAL NAV): Additional (Aaron Thomas) information about the packaging industry can be found in the right column. There The anatomy: The Aaron are opportunities to sign up for an industry Thomas site suffers from too newsletter right below a help center box. many content areas—on the home page alone, there FLASH AREA: N/A were six unique sections. The site looks more like a blog than it does a professional packaging site. MAIN CONTENT AREA: Multiple content areas were distracting and buried information. FOOTER: The layout does not give much space or emphasis to this area of the page. It seems that the user is not expected to interact with this space.25 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • VISUAL PAK:VISUALIZING NAVIGATIONIt’s somewhat of a cliché, but the KISS (Keep it Simple, Sally) design principle is the cornerstone ofusability. And sticking to this principle, Visual Pak’s site clearly conveyed the company’s services to theuser in a matter of seconds. This strategy prioritizes information according to the user’s search logic. Recentstudies have found that users will more quickly find targets in less densely populated areas—and ourstudy participants were quick to locate the targets on the Visual Pak page. HEADER: The horizontal bar includes a drop-down menu for navigating the site. Above, the company’s logo and slogan are significantly sized and will draw attention. SIDEBAR (LOCAL NAV): N/A VisualPak.com The anatomy: The Visual FLASH AREA: Although homepages Pak company designs for are like a “welcome mat” to the site, actual the user—the main items greetings on homepages like this are of interest are front and outdated. In its place, a company tagline or center on the website. The slogan would suffice. large icons are the main focus of the page and MAIN CONTENT AREA: A large direct visitors to key areas interactive flash area invites users to of interest. The site informs interact with the page—each item expands users without relying on when the mouse rolls over the area. an overwhelming amount However, without content, there is nothing of text. However, too little to optimize. It may be user-friendly, but indexable content on the this strategy could hurt search engine homepage and the search optimization (SEO). engine rankings suffer. Again, it is about working within FOOTER: Links to internal pages are the online constraints and repeated here. This space is also used to content requirements. display links to social profiles.26 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • SOUTH PACK: GOODINTENTIONS GONE ASTRAYYou’ve got to give credit to South Pack for attempting to provide the user with easy-to-see links to productinformation, similar to that of an e-commerce site. However, the page seems to lack any solid structure andmany of the elements below the header appear disconnected. Despite these aesthetic criticisms, SouthPack was the user favorite of the three, and also had the lowest time expenditure per task. HEADER: South Pack’s logo and tag line are prominently displayed in the upper left corner, ensuring that users recognize the brand. SIDEBAR (LOCAL NAV): The ‘about us’ section in the left side bar looks like it was inspired by a social profile layout on SouthPack.com sites such as Facebook. This is valuable The anatomy: The homepage navigation real-estate and, although it caters to two different types contains several links, the eyes may leap of user logic. The categorization straight over it to the open areas in body of services by market is one of the page way to appeal to businesses FLASH AREA: The scrolling list of outside of the packaging South Pack’s services may help a user, but industry, while listing the only if the service they are looking for capabilities below provides displays at the moment their eyes land direct access for the user here. Likely, the user will look for this that knows exactly what they information in the main content area. are looking for. Users should have a pretty good idea of what this company can MAIN CONTENT AREA: This do within a few seconds of area is organized by market categories, viewing the homepage. like medical and retail, rather than by specific products. This is helpful for a business that may not know what, for example, blister packaging is. FOOTER: The practice of linking to social profiles is growing, but the placement at the bottom of the page, alone, appears misplaced, like it was an afterthought.27 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE USABILITY TEST:OVERVIEW OF RESULTSOverall, B2B websites had the highest task completion B2B: SUCCESS RATESrates on average (Figure 18). The Aaron Thomas site was the Aaron Thomas Visual Pak South Packexception—the site proved extremely difficult for users to 5%navigate compared to the simple and clean presentation 24%of the other two sites. The differences in user preference 40% 41%between Visual Pak and South Pack were minute Success(Figure 19); however, users completed the tasks on South FailPack’s website in nearly half the time it took on the Visual AbandonPak website (Table 7 and Figure 20). But this may havebackfired because the increased speed seemed to introducemore user-error, resulting in a higher failure rate (Figure 18). 76% 19% 95% Figure 18. The rate of success and failure for task completion was calculated from user feedback and tracking the URLs. Task abandonment typically indicates that the task was too difficult or was taking too much time to complete. Task abandonment was lowest overall on B2B sites compared to the other industries included in this study. USER EXPERIENCE RATED EXCELLENT 1.5 2.2 2.3 POOR Aaron Thomas Visual Pak South Pack Figure 19. The votes are in! User’s ranked the sites 1-3 based on their experience completing the tasks (3 being the best). South Pack was most frequently ranked as the best user experience by a narrow margin, with Visual Pak coming in a close second. Aaron Thomas received the lowest ranking of the three (the worst experience).28 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • PAGE VIEWS Average Page Views Time Per Page (seconds) 3 100 2.5 80Time Per Page (seconds) 2 60 # of Page Views 1.5 40 1 20 0.5 1.5 0 0 Aaron Thomas Visual Pak South PackFigure 20 Both Visual Pak and South Pack ensured that critical information was within a click from the homepage, a good indicatorof usability. Aaron Thomas, on the other hand, was more difficult to use given that it took, on average, more page views and in somecases, nearly triple the time expenditure. PAGE VIEWS SECONDS SECONDS/ PAGE Average Maximum Average Maximum Average Aaron Thomas 2.5 20.5 205.5 3079 82.2 Visual Pak 1.5 5.5 41.5 210.5 27.7 1.9 South Pack 2 5.5 31 148 15.5Table 7 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 pageseach user went through to complete the task were recorded.29 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • ETHOS &APPEARANCEAppearances matter in all things business. The company letterhead, the officebuilding and the website are all rolled into one over-arching perception. And it’s not asecret: critical decision making involves appealing to business sense on multiple levels. ETHOS HEX(Figure 21). In other words; it’s not just how you present yourself in the boardroom, it’s the LOOK & FEELwhole enchilada. Aaron ThomasAnd remember what the expectations are (see Figure 17, pg 23): keeping it simple and easy to Visual Pakunderstand is essential in the business world. Anything else just comes across as poorly CREDIBLEprepared and unprofessional. For evidence, consider the poor performance of Aaron 100% South PackThomas—lack of simplicity translated into lack of professionalism (Figure 21).Aaron Thomas was the least appealing to users in this study (Figure 21), especiallysuffering in the professional front. Visual Pak and South Pack were the most similar, it’s just M EA INFO 100% LISthat South Pack, from the user’s perspective, executed everything just a little better than SE R NA O F MAVisual Pak. 50% SIO % FINTION 100 ES DI OF NG PR % 50 50 % 0% 50% % 50 SIM Y % 10 NA& LA DL PL FR USER 100 0% Y E/ IEN ILIT 50% VI YO C LE GA U AN AB TIO T US N 100% FUNCTIONAL Figure 21. Simplicity in design and navigation was a critical feature of success on the Ethos Hex. The diagram represents user ratings of the sites appeal, and the higher the ratings, the more space is filled.30 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE SCORECARD: DO B2B WEBSITES MAKE THE GRADE? Based on the results from the survey and usability test, each site was graded across three categories (Table 8). The third category (Functions & Features) was not evaluated for this industry (explanation below). AARON VISUAL PAK SOUTH PACK THOMAS FACTORS COMMENTS GRADE COMMENTS GRADE COMMENTS GRADESCORECARD APPEARANCE Looks & feels like a C B B Over half the participants Despite the feedback that the site A close second to Visual Pak, a respected B2B site characterized the site as looked “cheesy,” this site won third of the users thought the site “cluttered” and user comments this category for its simple and was too busy—nonetheless, 62 Credible/trustworthy suggested that the website 70% clean design. 87% percent agreed that is was the 84% Visually appealing looked “amateur” and lacked most professional looking site. professionalism. F C B EASE OF FINDING Navigation The drop down menus were Redundancy can be a good thing. The strength of the strategy INFORMATION difficult for many users to Case in point: significant menu that was so effective for Sitemap/DtC links* navigate and information on the items were duplicated within the VisualPak—placing key 42% 71% 80% company was scattered. main body of the page. Users menu items in the body of Presentation knew exactly what the company the page—was weakend of company provided without having to do by the clutter in the left information any work. sidebar column. Search B2B Of the three sites, Aaron Thomas FUNCTIONS & was the only one featuring a FEATURES Client portal search function. And 40 percent of the users took Packaging advantage of this function. specific tutorials or calculators Task success rate F A A The greatest challenge for The best performing site; links to Organizing the content by market Page views users was sifting through the fundamental pages were clearly + category, in addition to using USABILITY content. Users spent, on average, marked on the homepage visuals, will help users more 53% 99% 92% close to a minute and a half on making it possible, in many cases, quickly locate services of interest. Time to complete each page—triple that of the to complete the task within one task other sites page view. FINAL GRADE: C- B+ Table 8. Each site was graded on design and usability. The percentages are based on the participants’ ratings and data collected during the usability test. B *Down-to-Child (DtC) links allow user to drill down to more specific information within a top-level category. More and more, these are found in page footers and serve as an abridged sitemap. Links within the body of a page or sidebar that provide access to more specific category are also classified as DtC links. Note: Of these three sites, only one had a search function. None of these sites had any specialized functions, such as a client portal or interface, and therefore, these factors were not included in the final grading of the sites. 31 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • STRIKINGA BALANCESimplicity translates into white space for B2B websites (Figure 22). Other industries,like e-commerce or higher education have greater content demands, whereas B2B 100%websites tend to veer to the lower left corner (high percentage of white space, low 0%percentage of text) while still maintaining a reasonable balance in presenting the 90 10 E-commercenecessary content: B2B Travel & Hospitality 20• Aaron Thomas was out of the business zone, so to speak. The site was weighted 80 Higher Education down with excessive text and poor spatial arrangements. 70 30 Balance: Off-Kilter Grade: C-• Visual Pak was a site of few words, but it nonetheless struck a balance that was 60 40 s appropriate. hic % Tex ap Balance: Spacious Grade: B+ Gr t 50 50 %• South Pak was also within the norm for B2B and provided users with a Aaron Thomas satisfying amount of content without over-crowding the space. 40 60 Balance: Business Casual Grade: B 30 70 South PackThis is a good example of how an understanding of eachindustry’s needs has a unique balance. Although the sites 20 80that fall closer to the center of gravity tend to performbetter for the user, the exception to the rule is the lower left 10 90corner. White space is a luxury that many other websites 0%can’t afford, whereas B2B sites have found the value of a 100%minimalist aesthetic. 90 80 70 60 50 40 30 20 10 100% 0% % White Space Visual Pak Figure 22. The B2B sites are plotted on the Zen Triangle.32 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE TA K EOUTA B2B website is the marketing hub for lead generation. And it needs to speak to theneeds of other business professionals. The fundamentals begin with designing aroundthe business professionals’ expectations:Less is more. It’s an oxymoron, perhaps, but when it comes to crafting visualreal-estate, the pristine undeveloped spaces have a higher value.Different bodies, different balance. Just like people, the center ofgravity depends on the body of content in question. B2B websites are able to balance morewhite space than the rest without sacrificing content.Dress the part. Unfortunately, professionalism was not a strong suit for any ofthese websites according to user ratings. Balancing space is only the first step—focusingon style will help develop a more professional look and feel, a critical element to refine.33 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • TRAVEL &HOSPITALITY:FOCUS ONLEISUREAn online presence has quickly accelerated from being an important asset to mission Attractive without compromising functionality:critical for hotels. In 2007, 40 percent of all leisure travel bookings were done online, andtoday it is estimated that well over half of all hotel reservations are completed online.7 Convey a particular aesthetic throughout the site while providing excellent guest service via user-centeredWith an increasing number of consumers doing travel research online, a hotel’s website web design.is playing a pivotal role.And navigability and usability are priority to online travel bookers. After removing pricefrom the equation, websites that are hassle free and easy to use—evidence of functionaldesign—have the highest rate of online booking completion.8 Another report found thatover half of consumers would likely turn to competing travel sites after two or more badexperiences.9 Doing the math, considering that one out of every nine online consumershad trouble completing transactions on travel sites, the rate of transactions lost due topoor design and functionality could be as high as a quarter of the qualified traffic.34 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • DESIGNING BYEXPECTATIONSPlanning a vacation shouldn’t be stressful. But the results 3. 1, 2, 3…Book. Similar to e-commerce sites, if youof the survey and usability study show that travel and expect a user to complete an action, the fewer the steps the better. Booking options accessible throughouthospitality sites are very unpredictable—whether it is the site—not just on the homepage—ensure thatjust poor design or a sincere effort to be distinctive and visitors can start the process wherever they enterexclusive, hotels are failing across the board to step the site. But more importantly, the website needsup to the challenge. Whereas visitors to e-commerce to be capable of handling safe and secure online transactions. Some businesses opt for third-partyor B2B sites might not be as concerned with aesthetics, services to handle these functions. However, avisitors expect hotel sites to be attractive and appealing website content management system (CMS) can be(Figure 23). And it is particularly important for smaller custom built for this purpose.operations, that may consist of only one or two hotels, tobe able to compete with the chain hotels online. The keytake-home points from the survey: CONSUMER EXPECTATIONS1. Leisure is luxury. Whereas other websites aren’t expected to look charming or attractive, people expect a hotel’s website to reflect the kind of Attractive website 92.3% extravagance they hope to experience during their stay. But, participants in our study quickly found Easy to find room rates 79.2% that the aesthetic appeal of a site is quickly Pictures of the rooms 69.2% diminished as soon as they have to work hard to find basic information. Remember, usability Calendar of availability 60.8% can be elegant, too.2. Picture this. Bottom-line, people want to 56.2% “Book online” option know what they’re paying for. And that includes Maps and directions 34.6% displaying room rates along with information Search function 8.7% about the accommodations. And rates should be accessible without requiring users to enter 0% 20% 40% 60% 80% 100% information or fill out a form. Think of it as a common courtesy. Figure 23. The experience for a traveler begins on the website. The results show that users want the website to be reflective of the same quality and luxury they expect to find at the hotel. And the fact that the search function ranks lowest on the list is indicative of the user’s wish to have all necessary information at their finger tips—they’re thinking about vacation and they don’t want to have to do any work, which includes digging around for room rates online.35 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • TRAVEL & HOSPITALITYDECONSTRUCTED:AN ANALYSISOF DESIGN ANDUSABILITYA place to stay is central to vacation planning.And a hotel’s website is a critical part of onlinevacation planning. Small to mid-size individualnon-franchise hotels were the focus for theinventory. The following three websites wereuser-tested: DunesManor.com JamesHotels.com Winnetu.com36 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • DUNES MANOR:PLAIN AND SIMPLEIt does the job. The menu was logical and intuitive—the average task success rate (90%) was one of thehighest out of all twelve websites and far outshined the other two hotel websites tested. But the look of thesite failed to convey the elegance of a luxury resort. HEADER: Users could quickly find rates within the first few seconds of visiting the page. And the drop-down menus revealed more information about the hotel. SIDEBAR (LOCAL NAV): The right column consists of five boxes styled with graphics and buttons. Here, users can link DunesManor.com to online booking and video tours. The anatomy: The flashiest part of the Dunes Manor FLASH AREA: Images of the hotel website isn’t the Flash images and the grounds are above the header. above the header. Rather, the While the central image of the hotel does flashing “Book Online” text in not change, the place holders on either the sidebar attempts to draw side cycle through images of the beach the user’s attention away from and leisure activities. the main content area. And while the main content area MAIN CONTENT AREA: Text is doesn’t have any links or calls presented against a sunset background. to action, the sidebar does. It Although the background darkens further almost seems that the sidebar down the page, the content is still readable. is what Dunes Manor really There aren’t any links or calls to action in wants to showcase here, but this area. from the user perspective, the navigation bar in the header FOOTER: A standard footer containing is the most important part of contact information. Text links to key areas this website. on the website are also repeated here.37 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE JAMES HOTEL: LUXURYTA X ON USABI LIT YHad it been a five second test, this site probably would have won. The James Hotel wins the user over witha sense of modern luxury—but it stops there. The main menu (vertical layout) didn’t have an item linkingto room rates or amenities. Simple tasks, like finding room rates or information on internet services, wereabandoned by a quarter of the participants. And that’s before anyone attempted to make a reservation. HEADER: The logo and the main navigation is tucked into the upper left corner of the page. The menu items may be hard for some users to read because of the poor contrast. SIDEBAR (LOCAL NAV): The description of the hotel is off to the right, below the search box. And although user’s can’t take any action with this space (no links), the high contrast draws more attention than the main menu. FLASH AREA: The main image takes up 40% of the design space above the fold. JamesHotels.com MAIN CONTENT AREA: Information about the hotel, and links to rates and The anatomy: The flash reservation pages that would normally image is the central focus appear in the body of the page are in the of the site. There is little footer, below the fold. emphasis on usability here as the navigation menu and hotel information on the FOOTER*: This footer houses the kind periphery. However, from a of content that would normally appear design perspective, this is an in the body of the page in order to satisfy attractive site. search engine optimization (SEO) needs. Although some users may read this information, many will likely stay above *This footer was not considered part of the user-interface and therefore wasn’t included in the fold on a site like this. the visual composition analysis38 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • WINNETU: PICTURE THISImages are said to be worth a thousand words, but if it is only a word or two you need to communicate,a simple text link would suffice. And that’s how most of the users felt when they were presented withthe Winnetu website. The pictures were not initially perceived as a clickable menu, and the more importantquestions many travelers want answered (rates and amenities) were buried in the lower left corner. HEADER: The logo fills up most of Winnetu.com this space. Text links to the right guide the user to the “online concierge” and The anatomy: The way that information about special packages. this page is designed, users However, the main navigation is part are only expected to see of the Flash element below. and interact with the Flash element. The lengthy “footer” SIDEBAR (LOCAL NAV): The is not intended to benefit page is designed in a one-column layout visitors to the site, rather, this so there is no sidebar. is a search engine optimization (SEO) strategy—an attempt FLASH AREA: Studies have shown to place indexable content that pictures of people, particularly faces, on the page. However, this draw the most attention on websites. approach is not recommended However, in a series like this, it can create and puts the credibility of much the opposite affect: users don’t the site in question. Only the know where to look. And since this is the visible portion of the page, main navigation menu, that’s a serious which consists of the Flash problem for usability. and header, were used for the visual composition MAIN CONTENT AREA: The content measurements (i.e., percent that would normally appear in the body of of white space, images the page has been placed in the footer. and text). In addition, vital links to FOOTER*: Exclusively flash-based reservation and accommo- websites are not typically search engine dations are in the lower left friendly, (that is, the pages don’t rank corner of the Flash menu. well), and to make-up for this deficit, the This is not a hotspot for the Winnetu placed all the indexable content eyes and may be missed at in the footer of the page. This is not meant first glance. to benefit the users but rather a technique to rank higher in the search engines on particular terms. *This footer was not considered part of the user-interface and therefore wasn’t included in the visual composition analysis39 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE USABILITY TEST:OVERVIEW OF RESULTSIt wasn’t the prettiest of the three, but the Dunes Manor site SUCCESS RATEShad the highest success rate (Figure 24 and Figure 25). Dunes Manor The James Hotel WinnetuIt was simple and straightforward; but what it lacks in visual 4%appeal may lessen the overall value of the site as a marketing 6% 25%tool. And as many usability experts know, what people 29%say isn’t exactly inline with their behavior. A visually 35% Successappealing site will only get a user so far along the path to Fail 53%completing a reservation online. Likewise, even though AbandonDunes Manor lacked in visual appeal, users still ranked it above the other two websites (Figure 25). 22% 90% 36% Figure 24. The rate of success and failure for task completion was based on tracking the URLs. Users also had the option to aban- don the task. The high rate of task abandonment on both the James Hotel and the Winnetu website indicate poor usability. Users completed the same tasks on the Dunes Manor website with a much higher rate of success. USER EXPERIENCE RATED EXCELLENT 2.5 1.5 1.4 POOR Dunes Manor The James Hotel Winnetu Oceanside Resort Figure 25. User’s ranked the sites 1-3 based on their experience completing the tasks (3 being the best). Dunes Manor was most frequently picked as the best user experience. The respondents were relatively split between the James Hotel and the Winnetu—and the James Hotel may have edged ahead by comparison of looks, irrespective of the difficulty navigating the site.40 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • PAGE VIEWS A sign of a usability nightmare: Users went Average Page Views through nearly 9 pages when attempting to Time Per Page (seconds) complete tasks on the James Hotel website. 9 100 8 80 7Time Per Page (Seconds) 6 60 5 # of Page Views 4 40 3 2 20 1 1.5 0 0 Dunes Manor The James Hotel WinnetuFigure 26. A user shouldn’t have to click through multiple pages to find basic information. And as the results show, the website withthe most page views received the lowest user ranking. PAGE VIEWS SECONDS SECONDS/ PAGE Average Maximum Average Maximum Average Dunes Manor 3 8 40 108.5 13.3 The James Hotel 8.5 22 106 294 12.5 1.9 Winnetu 3 10.5 79 211 26.3Table 9. The participants were asked to complete a series of tasks on each website, includingfinding room rates and information on internet wifi service. The time and number of pages the userwent through to complete the task were recorded.41 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • ETHOS &APPEAR A NCEVisual appeal was rated as the most important aspect of a hotel’s website (Figure27). And yet, the beauty of the James Hotel went only skin deep. As it appears, an ETHOS HEXattractive website is not the end-all of a strong positive ethos. It’s a lesson we all LOOK & FEELshould have learned from the heiress of the Hilton brand. Dunes ManorThe user ratings and the success rates compare with what the Ethos Hex shows. Where the The James HotelDunes Manor lacked in class, it made up for these shortcomings with the simplicity of the CREDIBLEuser-interface. And the Winnetu, despite its confusing navigation, at least conveyed an air of 100% Winnetuprofessionalism.With the increase in online bookings, hotels will have to decide how to add functionality and Mprofessionalism on top of the aesthetic character. And for this reason, it is troubling to see EA INFO 100% LIS SE Rthat a “credible look” was the weakest point across the board. Because as the e-commerce NA O F MA 50% SIOstudy demonstrated, communicating trust is critical when asking for credit card numbers % FINTION 100 ESand personal information. DI OF NG PR % 50 50 % 0% 50% % 50 SIM Y % 10 NA& LA DL PL FR USER 100 0% Y E/ IEN VI YO ILIT 50% C LE GA U AN AB TIO T US N 100% FUNCTIONAL Figure 27. The hotel websites could barely fill out the Ethos Hex. These factors show how well the site appeals to the consumer—and the more space filled represents higher ratings.42 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE SCORECAR D: DO HOTELS MAKE THE GRADE? Based on the results from the survey and usability test, each site was graded across four categories. DUNES THE JAMES HOTEL WINNETU MANOR FACTORS COMMENTS GRADE COMMENTS GRADE COMMENTS GRADESCORECARD APPEARANCE Looks & feels like a D F F The color scheme did not go over Although half the participants The Flash intro and picture menu quality hotel site well with many users, citing that - rated the site as visually appealing, frustrated many of the users. Less “it just looks very amateurish.” nearly two-thirds agreed the poor than a quarter of the respondents Credible/trustworthy And it did a poor job of reflecting 59% design choices (font size, contrast, 52% thought the website had a 55% Visually appealing the "character" of comfort etc) diminished the aesthetic value professional style. and luxury. of the site. B F F EASE OF FINDING Navigation The page was text heavy, but The large photo threw off the The roll-over top level menu INFORMATION the menus were easy for users attention to the small left-column navigation was confusing to Sitemap/DtC links* to navigate. menu. The navigation was not many of the users. 82% 29% 47% intuitive and information was Presentation either difficult to read or hard of hotel to locate. information Room rate calculator C D B Aside from the page for room A “book now” feature was To access the “online reservations” TRAVEL & HOSPITALITY FUNCTIONS & rates, the users had to click off the prominently displayed on page, users have to click through FEATURES Book online main site to a secure location to the page, but users had the two pages. The function, however, 76% 65% 80% access cost and availability for most difficulty using this delivered results. Calendar specific dates. feature to find room rates for specific dates. Task success rate A F F The navigation paths were the As one participant bluntly put it: The picture-based navigation Pageviews clearest of the three sites, and as + “Beautiful site, ugly usability.” added unnecessary complexity. USABILITY a result, Dunes Manor had the 99% 36% 44% highest task completion rate Time to (85 percent). complete task FINAL GRADE: B- F Table 10. Each site was graded on design and usability. The percentages are based on the participants’ ratings and data collected during the usability test. F *Down-to-Child (DtC) links allow user to drill down to more specific information within a top-level category. More and more, these are found in page footers and serve as an abridged sitemap. Links within the body of a page or sidebar that provide access to more specific category are also classified as DtC links. 43 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • STRIKINGA BALANCEHotel websites varied the most in the balance of graphics and white space—butfor the most part, these websites shied away from relying on text tocommunicate (Figure 28). Images and phot graphs are powerful emotivedevices for quickly relaying a particular mood or atmosphere. But is the websitesupposed to be the experience or the means to an end for travelers? A cleanand modern design that balances the use of images with the necessary navigationaltext will be able to do both—create the experience and increase conversions. 100% 0%These are how the websites tested balance out: 90 10 E-commerce• Dunes Manor wasn’t the prettiest or even a shining example of when aesthetics B2B Travel & Hospitality meet functionality, but it got good marks for the easy-to-use interface. 80 20 Higher Education Balance: Centered Grade: B-• The James Hotel skirted the territory of the B2B website, but without the 70 30 same success of the packaging sites analyzed in this report. Usability suffered extremely from poor structure down to online booking. 60 40 s Balance: Business Traveler Grade: F hic % Tex ap• Winnetu was edgy, in both the navigation logic and its Gr t 50 50 % location on the triangle. The picture-based navigation did Dunes Manor Winnetu more harm than good. 40 60 Balance: On the Border Grade: FHotels have a little reconfiguring to do. The challenge James 30 70to deliver a high-level of customer service while lookinggood is possible given that the behind-the-scenes website 20 80management is structured to handle the job. 10 90 0% 100% 90 80 70 60 50 40 30 20 10 100% 0% % White Space Figure 28. The Hotel sites are plotted on the Zen Triangle.44 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE TAKEOUTHotels are expected to have attractive websites—but they need to work. Websites forvacationers are all about leisure:Taxing usability. Hotels obviously want to convey luxury through design, butthe design should never disable the user. The rate of users abandoning a site after the firstbad experience is as high as 17 percent.10Clear-cut navigation. Pictures look nice, but the meaning may be ambiguous.Text navigation is simple, straightforward and gets the user where they need to go.Mobility matters. If users are having trouble completing tasks on a regularlysized screen, it’s going to be a nightmare on a mobile phone. Considering the uptick inmobile phone usage, online booking via a mobile device is going to be expected.Commercial hotel chains, like Ramada, are already developing special mobile sites forthis purpose.45 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • HIGHEREDUCATION:HIGHEREXPECTATIONSThe best and brightest are connoisseurs of logic and refinement. Or so is the image that’s Challenge: Complex content for multiple audiencesprojected on the side of the ivory tower. But when it comes to university websites, there is Deliver compound tiers of information for internala steep learning curve—that is, for both the designers and the users. (students, staff, and professor) and external (parents,What we learned from our survey is that people have come to expect university prospective students and scholars) audienceswebsites to be “cluttered” with an “abundance of information.” And a third of theparticipants selected “confusing” as the best adjective to describe the universitywebsites they looked at. This kind of response exemplifies the predicament manyuniversities face. The information needs for students and faculty demand a comprehensiveand multi-tiered website. But as a marketing tool, specific information needs to be onthe surface so that it is easily accessible to passer-bys and potential students. And therehas been a noticeable shift in attempts to clean-up the act, so to speak, by simplifyingnavigation and adding more images. But is this compromise working?46 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • UNDERSTANDING THESTUDENT PERSPECTIVEThe 2008 study conducted for the Joint Information 2. Fabric of university life. Connecting is anSystems Committee (JISC) included a mix of professionals important part of the student experience. Some universities are learning to take advantage of this inas well as university students and staff. But to get into the the classroom. Purdue University, for one, has startedmind of a student required some external sources (Figure using a special platform to integrate Facebook and29). Here’s the student angle: Twitter with the classroom experience.11 And there are possibilities for universities to incorporate these tools1. It’s about content. Course content, that is. into the website experience for potential students Students rely on the school’s website as an anchor and visiting scholars. for materials and class information. Often, this material can be managed within a special student portal. This way, student resources that may change from semester to semester won’t interfere with the CONSUMER EXPECTATIONS external content structure. Students are a primary user of university websites, so this is an extremely Course-specific materials online 96.6% 79% important feature. But in order to handle the content generated from an entire catalog’s worth of courses, University student portal 93% 58% it’s critical to have a separate home for the material that can be accessed through the main website. Contact tutor online 91% 48% General course information online 89% 44% Social network sites to discuss course 90% 41% Submit work/assignments online 81% 37% Perceived usefulness (% useful) Take part in an online community 81% 25% Frequency of use (% weekly) Online library of resources 77% 21% 0% 20% 40% 60% 80% 100% Figure 29. Expectations of university websites, from the student’s perspective [Source: Research Study Conducted for the Joint Information Systems Committee (JISC), June 2008]47 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • HIGHER EDUCATIONDECONSTRUCTED:AN ANALYSISOF DESIGN ANDUSABILITYUniversity websites are rather expansive and,for the purpose this study, Schools of Businessoffering full-time MBA programs were selectedfor the inventory. The following three schoolswere user-tested: MSB.Georgetown.edu.com Daniels.du.edu Krannert.Purdue.edu48 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • GEORGETOWN: TH E HU BFOR WH AT’S NEWAbove the fold, Georgetown presents a simple dashboard for navigating the site. But what lies beneathdoesn’t follow the same logic. Rather than elaborating further on degree programs, the entire focus is onupcoming events and news. Whereas this is not necessarily a fault, it does little for guiding new visitors tokey areas on the site. Often, the top menu items are generic and vague, and the body is a place to dive intomultiple tiers of information. HEADER: The top level university administrative menu includes links to Georgetown University’s main page and a directory of students and faculty. The search box is also located here. SIDEBAR (LOCAL NAV): The left column sidebar menu is specific to the business school. The menu is larger and incorporated with the main visual component above the fold. FLASH AREA: To the right of the MSB.Georgetown.edu sidebar, life at Georgetown is depicted in photos of students and buildings on The anatomy: The site is campus. This is a main area of focus. laid out to give emphasis to the images of student life and the local navigation MAIN CONTENT AREA: Although menu in the sidebar. The the layout of the multiple sections is clean majority of the content, such and easy to comprehend, the redundancy as the upcoming events and of “current events” content does little the news sections, are below to help current or prospective students the fold. navigate the site. FOOTER: A standard footer containing administrative links, logo and contact information.49 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • DENV ER:TR ANSFOR M I NG SPACEThe effort to appeal to the wired generation is apparent with the updated design. And the user, both youngand old, responded in kind: Denver’s site usability rated the best in show. HEADER: A simple, clean area providing ample space for the name of the college. The specific tabs for students, parents, alumni, corporate visitors and the media are easy to find below the search box. SIDEBAR (LOCAL NAV): Tabs in the header are marked for the unique audiences. However, to find admissions information for prospective students, users went directly to the sidebar navigation. FLASH AREA: Showcasing a large Flash image in the center of the page, similar to many hotel or B2B websites, is an up-and- coming trend on university websites. MAIN CONTENT AREA: This space Daniels.du.edu does not contain navigational links, such as those found in the sidebar menu. And The anatomy: White space the body of the page is sparse. Although dominates the main content it gives the site a “clean” look, it wastes area and the Flash image valuable real-estate. takes up a large portion of the page above the fold. FOOTER: A simple red bar with a few The menus are easy to administrative links (e.g., contact and find, but the items are not directory), delineates this area from the very descriptive. rest of the page.50 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • PURDUE: A TYPICALDROP DOWNBeing the archetypal example isn’t always a good thing. And that’s the trouble with Purdue. Several ofthe participants identified this site as one that most closely met with their expectations of a university’swebsite—that is, cluttered, overwhelming and generally unappealing. Overall, however, users were ableto find what they needed. So although familiarity with design helped when it came to general usabilitysuccess, the look of the site didn’t go over well. HEADER: The main navigation scheme on the main page followed throughout the interior pages. Many users complained about the lengthy drop down menus. SIDEBAR (LOCAL NAV): Seemingly out of place, the right column navigation menu provided critical information within a single click. Krannert.Purdue.edu FLASH AREA: Unlike the other two websites, Krannert School of Management The anatomy: The Purdue did not use Flash. website was considered “cluttered” and many of the MAIN CONTENT AREA: The body participants thought it looked was filled with links and heavy with text. “unfinished” and outdated. At first, this overwhelmed the users, but it did not hinder their ability to complete the task any more so than the other sites. FOOTER: A simple footer consisting of administrative links against a white background.51 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE USABILITY TEST:OVERVIEW OF RESULTSEven after achieving the highest success rate in the user SUCCESS RATEStesting (Figure 30 & Figure 31), Purdue was ranked the lowest Georgetown Denver Purdue 9%among the three sites (Figure 31). And the Georgetown 13% 15%website had, on average, one less page view than the othertwo (Table 11 and Figure 32 on following page). But it was 9% SuccessDenver that the user’s liked best. It is a perfect example Fail 55%of the tension that exists in trying to balance usability and Abandon 37%aesthetics. Because even for the most pragmatic in the crowd, 32%Purdue’s failure to appeal to the user left a lasting impression 54% 76%that far outweighs the brief satisfaction of completing a task. Figure 30. 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 time to complete. USER EXPERIENCE RATED EXCELLENT 2.1 2.4 1.5 POOR Mc Donough School Daniels School Krannert School of Business of Business of Management (Georgetown) (Denver) (Purdue) Figure 31. 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. Denver ranked the highest by the users despite the fact that Purdue had the highest overall success rate and lowest rate of task abandonment.52 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • PAGE VIEWS Universities required the most page views of all the sites tested. Users were asked to located basic Average Page Views information a potential student might need, like Time Per Page (seconds) application deadlines and curriculum requirements. 5 100 80 4Time Per Page (Seconds) 60 3 # of Page Views 40 2 20 1 1.5 0 0 Georgetown Denver PurdueFigure 32. Typically, three or more page views are a measure of poor usability, according to general usability guidelines. However, it’s a differentballgame when it comes to university websites. The depth requires a more complex multi-tiered information structure. And although Georgetowndid not have the highest success rate, user’s average the fewest page views to task completion. PAGE VIEWS SECONDS SECONDS/ PAGE Average Maximum Average Maximum Average Georgetown 3.5 8 115.5 711.5 33 Denver 4.5 10.5 130.5 695.5 29 Purdue 4.5 8.5 170 2982 37.8Table 11. The participants were asked to complete a series of tasks on each website, including findinginformation about the curriculum and application deadlines. The time and number of pages the userwent through to complete the task were recorded.53 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • ETHOS &APPEARANCEIn an unusual turn of events, ethos and usability did not align—Purdue had the highestrate of success, but lacked perceived professionalism and credibility (Figure 33). And ETHOS HEXnot surprising, all the sites suffered in the “ease of use ratings,” showing the difficulty LOOK & FEELof handling complex tiers of information for multiple audiences. Even though a Georgetownmove toward a simple and clean format was applauded by the users in this study, it Denvercompromised the usability to a small degree. CREDIBLE 100% PurdueUniversities face an interesting dilemma where their user’s expectations are shaped bycommercial standards, but the interest and needs the website serves are academic. Thesetwo opposing points are beginning to move university websites more toward the look and M EA INFO 100%feel of B2B websites, as is the case with Denver’s Daniels School of Business website. And LIS SE R NAso universities are charged with the task of renovating not only their websites, but their O F MA 50% SIOpublic appeal as well. % FINTION 100 ES DI OF NG PR % 50 50 % 0% 50% % 50 SIM NA& LA Y IT Y % 10 PL DL FR USER 100 0% VIG YO E/ IEN 50% BIL CL EA AT UT A N IO US N 100% FUNCTIONAL Figure 33. The Etho Hex is one way to visualize how users perceived the quality and appeal of the websites. In an unusual turn of events, ethos and usability did not align—Purdue had the highest rate of success, but lacked professionalism and credibility.54 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE SCORECARD: DO UNIVERSITIES MAKE THE GR ADE? Based on the results from the survey and usability test, each site was graded across four categories. GEORGETOWN DENVER PURDUE FACTORS COMMENTS GRADE COMMENTS GRADE COMMENTS GRADESCORECARD APPEARANCE Looks & feels like a B B F Use of graphics and colors were The balance of images Overwhelming volume of respected institution appropriate and conveyed the and graphics gave an air of information and inconsistencies sense of a respected university. professionalism. across the interior pages—however, Credible/trustworthy 80% 86% user feedback suggested this was a 55% Visually appealing typical look for university sites. C D C EASE OF FINDING Navigation The left sidebar navigation was The hierarchy of the information Although this site had the most INFORMATION used to drill down to specific was too broad for finding specific links and the drop down menus Sitemap/DtC links* information, but users were no information about curriculum or where difficult to manage, a third 77% 67% 74% better at finding information application deadlines. of the sample ranked these Accessible to than on the Purdue site. as useful attributes. multiple audiences Online application B+ A+ C The link to online application Easy to find links to online User’s reported the search results FUNCTIONS & applications and social profiles were not useful, and the search HIGHER EDUCATION functions were difficult to find FEATURES Search and other functions were throughout the site. box was difficult to find. 89% 100% 73% inconsistent throughout the site. Links to social profiles Task success rate Page views The site struck a balance between managing an abundance of B Although the site achieved a pleasing professional look, C Despite the poorly rated aesthetic features, users quickly learned A USABILITY information without appearing 82% the over simplification degraded 73% how to access the information 90% overwhelming. User’s were still the ease of finding information they need. Time to challenged by the multiple levels —there was a 43 percent task complete task of navigation. failure rate. FINAL GRADE: B B C Table 12. Each site was graded on design and usability. The percentages are based on the participants’ ratings and data collected during the usability test. *Down-to-Child (DtC) links allow user to drill down to more specific information within a top-level category. More and more, these are found in page footers and serve as an abridged sitemap. Links within the body of a page or sidebar that provide access to more specific category are also classified as DtC links. 55 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • STRIKINGA BALANCEThe text heavy information portals that have characterized university websitesfrom the last decade are taking on a new shape—and a new balance. In attemptsto meet the challenges, university websites are straddling the aesthetic appeal closerto that of B2B and travel and hospitality with the content demands of e-commerce(Figure 34): 100% 0%• Georgetown had a more modern feel, but still fell within the zone of 90 10 E-commerce similarities with other university websites. B2B Balance: Solid Grade: B Travel & Hospitality 80 20 Higher Education Purdue• Denver took a completely different approach to design. Balance: Hospitable Grade: B 70 30 Georgetown• Purdue was close to where it should be on the triangle, despite the 60 40 lackluster Ethos ratings (Figure 33). And perhaps users correctly identified s hic % Tex ap that it had the unfinished look and feel of a draft—that is, give a little more Gr t 50 50 attention to aesthetics and image, and it may change the way people feel % about the website. 40 60 Balance: Even-Keel Grade: CUser preferences are fickle—in part because it’s not Denver 30 70just about logic, the way a user feels cannot be separatedfrom their experience on a site. Easily navigable sites 20 80that provide useful content rank high. But studies haveshown that visual appeal enhances the user’s perceptionof the site’s usability and credibility. In other words, 10 90attractive sites work better—purely because users 0% 100%feel better towards the site.12 And at the end of the day, 90 80 70 60 50 40 30 20 10that’s what differentiated Denver from the rest. 100% 0% % White Space Figure 34. The higher education sites are plotted on the Zen Triangle.56 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE TAKEOUTA university’s website delivers a breadth of information geared towards multipleaudiences. And no one should be left out. A user-centered design for multiple audiencesshould consider:Multiple pathways for multiple audiences. Down-to-childlinks in the footer provide a direct pathway to internal pages. Consider that each audiencemay be applying a different strategy to locate information.Minimize clutter without oversimplifying. Reducing theclutter on the page can be achieved by committing to a specific balance of images andtext. But that shouldn’t entail collapsing the site structure to minimize links.Manage information by managing space. Prioritizing informationgeared towards each audience is the first step to visualizing a functional informationstructure. A cluttered page is a sign that there may be too much information all onone page.57 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • ENDINGWITH NEWBEGINNINGSWebsite design may have roots in the printworld, but the way we use online media In the last decade, websites have experienced a renaissance, spurred on by adopted and the focus shifted to search engine optimization. And the mantra technological advances, including faster became “Content is King!” But there’stoday is fast changing the way we conceive more to the story than just page rank— data-connections and a higher level ofof a “page.” In the beginning, a web page utility. And online activities have continued indexable content is nowas essentially made up of digitized print to become more engrained in everyday longer limited to text. Today, users have a high standard for how content isdocuments with little, if any, function life. From secure online banking to live Today, users have a high presented. And as it was at the beginning, user expectations news feeds, the online ecosystem flourishes standard for how content continue to out pace the evolution of online media.other than basic sharing. The adoption of is presented. And as it was Allowing your site to fall behind has a vivid effect on your with unprecedented diversity. The originalHyper Text Markup Language (HTML) in association with the print page has at the beginning, user bottom line today—no matter what industry you’re in.the mid-1990’s brought life to digital started to dissolve, heralding in the new expectations continue totext—document structure and style, text media era. out pace the evolution of online media. Allowing your site to fall behind has alinks and navigation bars. The modern-day For as fast as the new website medium vivid effect on your bottom line today—noconcept of websites began to take shape. evolved, user expectations escalated matter what industry you’re in.But the possibilities for website design in exponentially faster. Early on, usabilitythe 1990’s was limited by the technologies studies faulted websites for flashing images and low contrast between textof the time and remained tied to the model and backgrounds. Website standards wereof a traditional “page.”58 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • THE BEAUTY &FUNCTION OF SPACEAnd the renaissance in website design has come back And the results from this analysis have demonstrated thatto usability. There is a new value in understanding the there is a fundamental relationship between usability and space. Users performed more efficiently (time to completeconnection between beauty and function: measuring task) on websites that were visually balanced (Figure 35).the visual composition is a valid method for quickly and The concept is simple and powerful: impact and clickableconveniently assessing a website. The websites evaluated moments; it’s usability by design.in this study demonstrate that finding the center of gravityon the Triangle should be included as a best designpractice. It is a method inspired by Zen principles of design: Parting Thoughts: On Performance 100% 0% There is another side to design—andSimplicity or elimination of clutter. The goal of it is not just the speed and efficiency 90 10usable design is about clarity. Non-essential decorations of the user completing tasks. Theare distracting and cost user’s valuable time when principles that apply to visual aes- 80 20completing tasks. thetic also influence page performance: 30 speed matters. Graphics and superfluous 70Menu to content asymmetry. The spatial PrintRunner design features will slow down the page.arrangements of elements on the page are supposed to 60 40 And the time it takes for a page to load s hic %attract and engage. The size and placement of navigation Tex effects usability and ranking in search ap Gris inversely related to its importance. But, based on t 50 50 engine results. %patterns of viewing behavior, navigation menus on the Dunes Manor 40 60top or right columns attract attention before the mainimage on a homepage. Denver 30 70Seeing space. White space is dynamic space. Spacing 20 80between positive elements, like text and graphics, bringsthese features alive to the viewer’s eyes. Empty space 10 90amplifies the frame, emphasizing the content. Imply more 0% 100%by showing less. 90 80 70 60 50 40 30 20 10 100% 0%Hierarchy & deliberate design. Layout is not Visual Pak % White Spaceaccidental, nor should it appear that way. A well-thoughtout hierarchy will become functional visual space. It is Figure 35. The top user-ranked sites from the four industries analyzed. The users’ considered both the visual appeal and the usability of the site during the testing phase. Websites thatabout communicating purpose and intention. achieve a balanced visual composition will be closer to the center of the triangle. And a bal- anced visual composition may play a significant role in both aesthetics and functionality.59 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • ENDNOTES:1 Eye tracking studies have shown that when not actively engaged with content, us-ers spend the most time interacting with buttons, menus and links. “Down to Child”(DtC) links help users drill down through from top-level to sub-level navigation. Thelinks may be in the menus, body, header or footer of the page.[Research-Based Web Design & Usability Guideline 10:5 Repeat Important Links]2 Halverson, Anthony and Tim J Hornoff, 2003. Cognitive strategies and eyemovements for searching hierarchical computer displays. CHI 03.[Research-Based Web Design & Usability Guidelines 5:5 Limit Prose Text on theHomepage; 5:7 Limit Homepage Length; 6.1 1 Avoid Cluttered Displays]3 According to research led by Dr. Gitte Lindgaard “web surfers make nearlyinstantaneous judgments of a web site’s ‘visual appeal’ …first impressions can colorsubsequent judgments of perceived credibility, usability, and ultimately influencepurchasing decisions.” The article, “Attention web designers: you have 50 millisec-onds to make a good first impression,” appearing the journal of Behaviour & Informa-tion Technology (2005).4 Ibid.5 B2b Marketing In 2009: Trends In Strategies And Spending, conducted by Market-ing Profs in conjunction with Forrester Research.6 Jakob Nielsen on B2B Usability, 2006 [http://www.useit.com/alertbox/b2b.html]7 Max Starkov and Jason Price, Internet Marketing and Distribution Trends Impactingthe Hospitality Industry from 2007-20108 iPerception measured consumer satisfaction and found that “site functionality andconvenience for the booking process are key to growing conversion and minimiz-ing chances of losing the visitor to the competition” (Q2 Report 2009: Hospitality &Tourism Industry).9 “When More Website Visitors Hurt Your Business: Are you Ready For Peak Traffic?”conducted by Equation Research for Gomez (2010).10Ibid.11Purdue University Adds Twitter and Facebook to Class Participation, reported onMashable,com, November 3, 2009.12Noam Tractinsky. 1997. Aesthetics and Apparent Usability: Empirically AssessingCultural and Methodological Issues. CHI 97 Electronic Publications.60 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®
  • CONTACT USTODAYABOUT ONEUPWEB | Oneupweb has been an innovator in digitalmarketing for more than a decade, creating integrated online OUR SOCIAL SITES twitter.com/Oneupwebmarketing plans that incorporate natural search engine optimization(SEO), paid search marketing (PPC), social media marketing, digital pr, facebook.com/Oneupwebdisplay advertising, analytics, creative services, mobile marketing, youtube.com/Oneupwebwebsite design, web 2.0 technology, audio/video/podcasting, andresearch, training and consultation. An award-winning company, flickr.com/OneupwebOneupweb is privately held and located in Traverse City, Michigan.For more information on Oneupweb, please call 231.922.9977, visit myspace.com/OneupwebOneUpWeb.com or follow them on Twitter @Oneupweb and @LisaWehr. delicious.com/Oneupweb linkedin.com/Oneupweb vimeo.com/Oneupweb friendfeed.com/Oneupweb 877.568.7477 OneUpWeb.com 13561 S. West Bayshore Drive Suite 3000 Traverse City, MI 4968461 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®