1.
REVOLUTIONIZING
WEBSITE
DESIGN:
THE NEW RULES OF USABILITY
877.568.7477
OneUpWeb.com
Provided by Oneupweb®
©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

2.
BALANCING ACT:
FUNCTIONALITY
& AESTHETICS.
The online experience culminates into a explain. We looked at 100 websites, spanning four
series of action-oriented visual cues where industries, and dissected the anatomy of each one.
Patterns were detected and characteristics cataloged. We
images and words translate into clickable then selected three websites from each category to be
moments—connections, discoveries, and tested by real people engaging in real-life scenarios.
purchases. This world of digital transactions Then the combined analysis: what does the anatomy of a
is made up of spatial, graphical and textual site have to do with usability? That’s where the Zen comes
100%
in: the visual composition of each site was broken down 0%
components—the virtual construct where
into three basic components: graphics, text and white
real people interact with real businesses and space. Each element was charted on the Zen Triangle of
90 10
organizations.And the performance of a website Design (Figure 1) and points on the triangle were matched 80 20
hinges in the balance of these parallel forces: func- against the findings from the usability testing. And the
70 30
tionality and aesthetics. In other words, website upshot? A new method for visualizing balance where
center of gravity plays a pivotal role.
usability is where design meets effICACY. 60 40
s
hic
%
Tex
ap
Performance is the bottom line; but how is something as
Gr
t
50 50
Industries Analyzed:
%
subjective as appearance judged as good or bad? That’s
40 60
the angle Oneupweb set out to investigate. In this report, E-commerce
we take a brand new look at an old idea: why do some 30 70
websites look the way they do, but more importantly, B2B
how do looks translate into action—that is, clickable Hospitality & Travel
20 80
moments? And here’s the hook—there is no magic wand
or Golden Rule for designing a good website. Rather, and Higher Education 0%
10 90
100%
what we will show here; there is a significant relationship 90 80 70 60 50 40 30 20 10
between visual aesthetics and usability. It’s about 100% 0%
% White Space
achieving a state of equilibrium. And what’s more, it’s
possible to measure and evaluate. It’s the cause and effect
Figure 1. A triangle balances on its center of gravity. Using this concept, the visual
of user-centered design. components of a website—graphics, text and white space—were diagrammed.
So out with the “Golden Rules” and in with Zen. Let us
i 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

3.
THE MEAT:
TABLE OF CONTENTS
01 THE BIG PICTURE 09 INDUSTRY BREAKDOWN: THE EVIDENCE
In each category, three websites were selected for remote usability testing.
02 Finding the Center of Gravity: The Zen Triangle of Design These are the results.
How to use the Triangle and how each industry balances out.
03 Industrial Balance 10-21 E-Commerce. Focus on online printing websites.
Plotting out the visual components of a website. 22-33 B2B. Focus on the packaging industry.
34-45 Travel & Hospitality. Focus on luxury, non-franchise hotels.
04 OVERVIEW & METHODOLOGY 46-57 Higher Education. Focus on MBA programs.
05 Inventory Highlights
We cataloged characteristics of 100 websites.
This is what we found. 58 ENDING WITH NEW BEGINNINGS
06 Seeing Action: The Usability Test 59 The Beauty & Function of Space
A method of quantifying how real people interact with Parting thoughts on the evolution of website design.
websites using performance based metrics. 60 Endnotes
07 Demographics & Browser Compatability The nitty gritty endnotes.
The numbers behind the study. 61 Contact Us
08 Interpreting The Results: Comparisons Across The Board We’d love to hear from you.
A birds eye view of how the industries performed.
i 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

4.
THE BIG
PICTURE
A home is not designed without first considering the needs
of the person that will be living there. Then, there are other
2. Online Constraints. As much as “virtual space”
connotes a sense of boundless opportunity, websites
are still confined to the 2-dimensional space of a
factors such as the lay of the land, the region’s climate and
screen. Browser compatibility and W3C* accessibility
local building codes that may influence the structure and standards also need to be considered. US
façade of the house. Likewise, a website looks the way it ER
does because of specific conditions and web standards
3. Content. This may seem obvious, but the S
structure—that is the organization and hierarchy
(Figure 2). Consider the house metaphor: the heavier the of information—is the foundation of any website.
rain or snowfall, the steeper the pitch of the roof to better The navigation, and to some degree, the layout, is
accommodate the drainage. A website that is intended for dependant on the depth and breadth of content.
CONSTRAINT
multiple audiences or has to carry a heavy information-car- A WEBSITE IS
Whether it is rendered as text or an image, the
ONLINE
DESIGNED
go also necessitates careful consideration when it comes to content is the visual meat of a website. WITHIN FIXED
design. So whether it is evaluating website performance or CONDITIONS
building a new one from scratch, there are three important *The World Wide Web Consortium (W3C) is an
factors to consider: international standards organization
1. User Behavior. People are both task-oriented CO
N
and lazy—the credibility and purpose of a website NT
TE
is assessed in as little as five seconds time and most
pages are quickly scanned for links and headlines.
Navigation menus address this dualism with a simple
way for people to complete tasks without requiring a
lot of reading or scrolling.1
Figure 2. Conditions of design are determined by three critical factors—
the people that are expected to use the site, the type of content and the
limitations of the technology.
01 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

5.
FINDING THE CENT ER OF GRAVITY:
THE ZEN TRIANGLE OF DESIGN
A website that can adequately satisfy all three of these page is made up of images/graphics and
factors has achieved equilibrium: it balances functionality text—keep in mind that you are measuring text in
blocks, which includes the buffer space around the
and aesthetics. Imagine trying to balance a triangle on individual characters and paragraphs.
the tip of a pencil—it works if you can find the center of
gravity. But place weight on any one of the vertices 2. Triangulate.leg (Figure 3) and follow graphics
along the green
Find the percentage of
the horizontal
and the triangle will tip. And that’s the same principle line across the triangle. Then, follow the slanted
guiding website usability. Content is king, they say—but line down from the right on the blue leg (percentage
100%
it should be displayed in accordance with user behavior of text), stopping where it intersects with the 0%
horizontal line.
(Figure 3). Too much text or too many graphics on a 10
page, and there is a shift in equilibrium. Superfluous text 3. Check it. From the intersection point, trace the
90
or graphics on the homepage impairs the user’s ability slanted line down to the pink leg—this is the 80 20
percentage of white space. The numbers should
to scan the content and navigate the website—and the add up to 100 percent. 30
likelihood of a clickable moment quickly dwindles away, be 70
it a sale or lead. Practice: Find 30 percent along the
60 40
green leg (graphics), and follow the line
s
Visual balance and usability are strongly linked together.
hic
%
across to the right. Stop at the slanted line
Tex
ap
Take for instance the example of trying to find a friend
Gr
t
50
leading up to 30 percent text (blue leg). The 50
%
in the midst of a crowd. Research has demonstrated that
slanted line leading down to the pink leg
users took longer to locate a target (such as a button) in
should be at 40 percent. 40 60
crowded spaces as compared to more open spaces (i.e.,
a higher percentage of white space).2 The Zen Triangle of
30 70
Design builds on this idea and is a way to show how visual
composition and website usability are related.
20 80
And the triangle method is quantifiable—you can
measure and characterize a website based on these three 10 90
visual components. Now there is the potential to change 0%
100%
the way businesses compare websites within their industry.
90 80 70 60 50 40 30 20 10
Here’s how it works: 100% 0%
% White Space
1. Approximate % of graphics and text. Figure 3. In the example above, the balance of graphics (30%), white pace (40%) and text (30%) are within the
Using a grid method, determine how much of the center of gravity zone.
02 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

6.
INDUSTRIAL BALANCE
Not all websites are created equal, and every type of industry has to grapple with a unique
set of conditions. And as it turns out, because of this, there are patterns in how different
industries make use of the available visual space. Extrapolating data from measurements
of 100 homepages, visual composition zones for each industry were delineated based on
the percentage of graphics, text and white space. For instance, hotel websites (travel &
hospitality) tended to be made up of more graphics and whitespace than the text heavy 100%
0%
university or e-commerce sites. These are the patterns we observed (Figure 4)*:
90 10 E-commerce
B2B
• E-commerce sites are an example of and as little as 10 percent of the page
Travel & Hospitality
how sacrificing white space can result in was text. In other cases, white space 80 20 Higher Education
a cluttered appearance. The challenge dominated the page, creating a very
to incorporate loads of textual content clean and modern aesthetic.
70 30
with graphics resulted in some sites with Zone: Mid to upper left
disproportionate amounts of text to
white space; quite the opposite of
• Higher Education also had the 60 40
challenge of carrying a heavy information
s
hic
%
what was observed in the travel and
Tex
cargo, but these sites tended to stabilize
ap
hospitality category.
Gr
t
50 50
excessive wordiness with images of
%
Zone: Lower right and center
student faces and campus life.
• B2B also took advantage of white Zone: Mid-to center right 40 60
space to communicate a professional *For the purpose of this study, only homepages were
appearance through minimal use of evaluated using the triangle. However, this tool can 70
30
be used to assess interior pages as well.
graphics and text.
Zone: Lower left and center
20 80
• Travel & Hospitality showed the
greatest variation in how graphics and 10 90
images were used. Some homepages 0%
100%
were filled with one large graphic
90 80 70 60 50 40 30 20 10
100% 0%
% White Space
Figure 4. Each industry is presented with a unique rhetorical situation where the needs of the audience and the business
objectives determine to a certain extent the visual balance of the website. For example, an e-commerce site offering a wide array
of products may tend to have a higher density of text and graphics. The zones outlined within the triangle show the trends in how
visual space was used on e-commerce, B2B, higher education and travel and hospitality websites.
03 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

7.
OVERVIEW &
METHODOLOGY
To analyze website design and usability in tandem required OVERVIEW: SCORECARD
a two prong approach:
RANK INDUSTRY CATEGORY TYPE CHALLENGE WEBSITE WEBSITE SCORE
1. In 2010, Oneupweb inventoried 100 websites COMPLEXITY CAPABILITIES
spanning e-commerce, B2B, higher education and
1
HIGH
4.3
MBA PROGRAMS Complex content for multiple audiences: Moderately Important
travel and hospitality, cataloging various design HIGHER Deliver compound tiers of information for (online applications)
components. Trends and characteristics for each EDUCATION internal (students, staff, and professor)
and external (parents, prospective
industry were summarized based on the aggregate students and scholars) audiences
raw data set.
2. From each industry, three sites representing the
2 4.1
Deliver compound tiers of information
ONLINE MODERATE Extremely important
PRINTING for dual functionality: (shopping cart)
TO HIGH
average and deviations within each category were Serve as a repository of product images
E-COMMERCE and information, much like a catalog, and
selected for remote user-testing. Users were given handle all steps of the sales and
tasks to complete on each site, followed by brief transaction processes.
survey questions. Measurements included time
3
LOW TO
3.1
PACKAGING Marketing hub for lead generation: Minor Importance
to complete the tasks and page views. Click-streams Navigation and content aimed to satisfy (client portals)
MODERATE
were also analyzed. In addition to these metrics, multiple degrees of expertise and
B2B knowledge, catering to key decision
user feedback and ratings were collected. The makers who demand quick and easy
access to mission-critical information.
performance within and across the industries was
evaluated based on these measurements.
4
LOW
2.0
LUXURY, Attractive without compromising Important
The industries were evaluated and ranked based on an TRAVEL & NON-FRANCHISE functionality: (online booking)
HOTELS Convey a particular aesthetic throughout
analysis of the usability test and the inventory (Table 1). HOSPITALITY the site while providing excellent guest
service via user-centered web design.
Table 1. Overview of the four categories of websites evaluated for this study and the challenges each genre grapples with. Of the four industries,
Travel and Hospitality performed the worst, despite having the least requirements.
*The scores were calculated based on the results from the usability test and weighted by factors measured during the inventory. The complexity of
information and the capabilities required for each kind of site was also considered in the scoring.
04 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

8.
INVENTORY HIGHLIGHTS
• Page length was measured in pixels for each of the 100 sites (Figure
5). Page length is one of several factors that bridge design with usability.
A page that requires scrolling through more than two screen lengths
(approximately 1300 pixels) asks a lot of the user. Length of a page is INVENTORY
also correlated with depth of content. For example, B2B and travel and
NAVIGATION ATTRIBUTES
hospitality sites tended to have minimal content and were also shorter
E-COMMERCE B2B TRAVEL & HIGHER
in length compared to e-commerce and higher education sites. HOSPITALITY EDUCATION
• Navigation is an essential component of a website (Table 2).
Horizontal navigation
90% 95% 55% 90%
Horizontal navigation has become a mainstay of website design for 10 or more items on
main navigation 15% 5% 5% 5%
many reasons—some argue that this method preserves valuable 1.9
Drop down /
real-estate. Of the sites inventoried, travel and hospitality sites most rollover menus 20% 45% 25% 40%
often deviated from the norm, relying solely on vertical navigation Footer navigation*
structures. However, both e-commerce and higher education often 90% 50% 70% 75%
utilized both a horizontal and vertical navigation, but 9 out of 10 times, Search field
25% 35% 5% 80%
the top level items were displayed in the horizontal menus. Linking to
social profiles 45% 10% 20% 35%
• In addition to the navigation scheme, the
PAGE LENGTH Table 2. Inventory: navigation attributes across the four categories.
composition of the page is built around graphics, Reported here as percentage of sample exhibiting the characteristic.
4000 E-commerce
links and text. Travel and hospitality sites focused B2B
*Majority of footer navigations were classified as “administrative” links,
on large central images ( Table 3), whereas i.e., sitemap and contact information. Forty percent of e-commerce
Travel & Hospitality
3500
Higher Education
sites that had footer navigation were classified as Down-to-Child
e-commerce sites used multiple sections to help make (DtC) links.
the content more scannable. 3000
BUILDING BLOCKS
2500 E-COMMERCE B2B TRAVEL & HIGHER
HOSPITALITY EDUCATION
PIXELS
2000 Large main image*
15% 10% 50% 30%
screen length
Average no. of
1500 content sections 6 3 2 3
on homepage
1000 Average no.
of internal links 92 27 19 56
on page
500
Average word count
570 232 305 546
0
Table 3. Inventory: Building blocks—graphics, links, and text—varied
Figure 5. E-commerce sites show the most variation in page length across the industries.
whereas travel and hospitality were more tightly grouped. The data *Large main graphic takes up more than 1/4 of visible page (% of
also shows that B2B and hospitality sites also tended to fit the homepage sites inventoried)
content within the length of two screens (dashed line). Longer pages
require users to scroll more to see all the information.
05 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

9.
SEEING ACTION:
THE USABILITY TEST
Remote usability testing is a method of quantifying how real people interact with websites
using performance based metrics:
• Task completion rates (success, abandon, failure)
• Time to complete task
• Number of pages viewed
• Click-stream
The first observation is obvious: what percentage of users can
successfully complete the task? For a more in-depth analysis, how long the task takes and
how many pages the user must click through are interpreted using the survey data. Every
participant also completed an opinion poll to gauge their level of satisfaction with each
website. Together, the analysis of user data and attitudes provides insight into both how
users feel about a website as well as where they may be experiencing potential difficulties
completing tasks.
The intent of this study was not to detect specific flaws in the design of the websites tested,
but rather to determine if, in fact, visual composition may be a significant factor to consider
when designing websites for performance. This study is unique in that it provides a robust
analytical comparison of how websites varied in both design as well as performance across
multiple industries. It puts into question the conventions and norms that guide current design
practices. And to that extent, is there room for improvement? Do we all need to be in the
center or how much elbow room is allowed?
06 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

10.
DEMOGR A PHICS MARKET SHARE:
BROWSER MOST USED BROWSERS
COMPATIBILITY
4% 3% 2%
Firefox (version 3.6 3.5) 7%
Microsoft Internet Exploreer 6.0 5%
Microsoft Internet Explorer
(version 8.0 7.0)
Nearly half of the 107 responses collected from a global pool of participants (57 percent Chrome (version 4.0 4.1)
Safari 4.0
female) were using Firefox (Figure 6). Nonetheless, Internet Explorer still dominates Firefox 3.0
21%
the global market share (Figure 7). The variety of web browsers in use and variations Opera 10x
Other
among screen resolution serve as a reminder that testing browser compatibility is still
a necessity (Figure 8). For the remote usability study, there were no reports of browser
39%
incompatibility issues.
19%
USABILITY TEST: MOST USED BROWSER Figure 7. There are many types of browsers, and websites should be tested for browser
compatibility to ensure the site is performing optimally for all visitors. Although Firefox is
gaining, Microsoft Internet Explorer still dominates. [Data provided by Net Market Share].
6%
9% SCREEN RESOLUTION
1024x768
3%
6%
1280x800 20%
36% 1280x1024
6%
1440x900
1680x1050
9%
Firefox 1366x768
800x600
Internet Explorer
other
Chrome
Safari 11%
25%
20%
49%
Figure 8. The user’s settings may affect how your website looks on the screen. The 1024
Figure 6. The majority of the usability study participants reported using Firefox. x 768 screen size is the most widely adopted, but that still only represents a quarter of the
population. Websites designed with fluid layouts will better perform across multiple settings.
[Data provided by Net Market Share].
07 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

11.
INTERPRETING THE RESULTS:
COMPA RISONS ACROSS THE BOARD
Ideally, a user should find the information MEAN TIME TO COMPLETE TASK OVERVIEW: TASK COMPLETION RATES
within one or two clicks. Factors to consider E-COMMERCE B2B TRAVEL HIGHER
when interpreting these results: 250
HOSPITALITY EDUCATION
10.0
E-Commerce
8%
B2B
• Depth of site (page levels) Error bars (95%
23%
• Content density per page 200
confidence interval)
8.0
Fail
Success
45%
• Abandon rates Abandon
6%
47%
• Degree of difficulty (task) 71%
Page Views
150 6.0
Time (sec)
It was surprising that, given the apparent
simplicity of hotel websites, it took
100 4.0 Travel Hospitality Higher Education
users, on average, the most page views 10%
20%
to find basic information, like room rates 31%
28%
(Figure 9). And although university sites 50 2.0
required the greatest time expenditure,
106.1
139.1
93.2
75.4
the task completion success rate was the
3.3
2.5
5.3
4.7
second highest among the four categories 0 0
62%
Time (sec) 106.1 93.2 75.4 139.1 49%
(Figure 10). In other words, interpreting
success rates and time to complete Page Views 3.3 2.5 5.3 4.7
Figure 10. Task completion success rates. Although e-commerce had
the highest failure rate, more participants abandoned the tasks on the
tasks requires consideration of additional hospitality and travel sites, suggesting that these were the most difficult
factors, like depth of content (word Figure 9. The average time to compete tasks and the number of page views for each to use.
counts). For example, both e-commerce category. User’s spent the longest completing tasks on university sites. However, these
sites also had, on average, the second highest word counts, second only to e-commerce
and higher education websites are sites. Rather than interpreting this as difficulty finding information, it is likely that users
took longer because there was more content to comprehend (Error bars represent 95%
wordier than B2B and Hotel (travel confidence interval).
hospitality) websites so that it takes
longer to comprehend the information;
and it is a positive if users are engaging
with content. Page views, on the other
hand, are more indicative of the amount of
“work” it takes to locate information.
08 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

12.
INDUSTRY
BREAKDOWN:
THE EVIDENCE
From each industry, three
sites representing the
average and deviations
within each category
were selected for remote
user-testing. These are
the results.
09 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

13.
E-COMMERCE:
THE UPSHOT
OF SELLING
USABILITY
An e-commerce site is the beginning and the end of a It’s important to keep in mind that customers behave Challenge: Dual functionality
sales process. And many e-commerce websites function differently on a website than they do in a physical retail
space. The popular wisdom says that grocery stores stock Serve as a repository of product images and information,
as the exclusive location for conducting all consumer staples, like milk and eggs, in the back of the store to create much like a catalog, and handle all steps of the sales and
transactions. The aisles and shelves are translated into more opportunities for impulse purchases as the customer transaction processes.
links and images, and the floor plan becomes the sitemap. walks by racks of merchandise. And, for the most part, this
The layout of traditional brick and mortar stores may be insight into consumer psychology works. But online, it’s a
different story. Online shoppers want the most direct route
arranged to structure the flow of customer traffic past store to the point of sale, i.e., the fewer the required page views
specials and products. Likewise, designing an e-commerce the better. In the U.S., the average shopping session on an
site requires a certain logic that will seamlessly direct the e-commerce site lasts roughly 6 minutes from start to
consumer through the product gallery, guiding them to finish3. And like the neighborhood grocery store, that’s the
the check-out as quickly and efficiently as possible. draw of e-commerce sites: it’s quick and convenient.
10 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

14.
MAKING SENSE
OF EXPECTATIONS
Designing a user-friendly e-commerce site is challenging 2. Obvious is good. The homepage is like a store’s 3. Bottom-line: Functionality. Keep it
precisely because of what the site has to accomplish. An window display, minus the mannequins. Let visitors simple—that goes for both back-end management
clearly see what you offer upfront. In the same time as well as front-end usability. In other words, avoid
entire inventory needs to be maintained and displayed
it takes for a consumer to click through to see the feature creep. Extra functions, like search features
within the constraints of a virtual space. The site does product, they could (and would) have easily clicked and online customer service (live chat) are only a
double duty as a storefront and an inventory management over to a competitor’s site if they don’t like what competitive advantage if they deliver quality results
system. But the site needs to be designed first and foremost they see or don’t find what they’re looking for. Vital to the consumer 100 percent of the time. Otherwise,
information, like price and product specs, should be broken applications, form failures or irrelevant search
to handle the primary objective: sales. And that means
accessible within a single click. results will maim the sites credibility and ultimately
designing with consumer behavior in mind. send the consumer packing.
It comes down to looks. But maybe not in the way you think
they do. Pretty doesn’t cut it—instilling a sense of trust and CONSUMER EXPECTATIONS:
confidence is the first step down the purchase path. It is INFLUENCIAL FACTORS IN PURCHASE DECISION
actually really important to consumers that the site has
the look and feel of an e-commerce site (Figure 11). And
Pricing/shipping information clearly stated 95.5%
consumers will judge the credibility of a site within the first
1/20th of a second (50 milleseconds)4. The visual aesthetic Looks credible trustworthy 76.5%
recommended for e-commerce sites is best described
Product displayed on homepage 70.8%
as practical because the design is often centered around
the navigation structure—the floor plan. But a site that Visually appealing 66.7%
manages to be easy to navigate and visually pleasing will
Total cost calculator (shipping, tax, etc) 59.1%
likely generate a higher rate of return customers. This is
what the consumer expects: Search function 48.2%
1. Familiarity breeds trust. A website that Privacy statement 45.5%
looks like an e-commerce site is going to be Onsite customer reviews/ testimonials 40.9%
more immediately perceived as less of a risk
Online customer service (live chat) 32.5%
when it comes time to pull out the credit card.
Links to social networks (Facebook, Twitter, etc) 22.7%
0%
20%
40%
60%
80%
100%
Figure 11. The most important factors that come into play when deciding to make a purchase online support the claim that
consumers want to know the precise cost of the transaction upfront before proceeding through the checkout process. Secondly,
the results corroborate the evidence that suggests consumers decide in the first five seconds whether or not they trust a website.
A dazzling website with online customer service won’t win over a customer unless the website communicates security and trust-
worthiness first.
11 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

15.
E-COMMERCE
DECONSTRUCTED:
AN ANALYSIS
OF DESIGN AND
USABILITY
The e-commerce sites inventoried all offered
custom printing services, such as personalized
business cards and brochures. These websites fall
within the category of e-commerce sites that
function and exist wholly online. The following
three websites were user-tested:
PrinterRunner.com PrintingforLess.com PrintingCenterUSA.com
12 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

16.
PRINTRUNNER: DESIGNING
FOR EXPECTATIONS
PrintRunner most closely adhered to consumer expectations. The site handled a large inventory by
showcasing the top level categories in the body of the page, complimented by a more detailed menu
of products in the left sidebar. This proved an effective strategy for customers looking for very specific
information on a top-level page.
HEADER: Shopping cart in the main
navigation bar.
SIDEBAR (LOCAL NAV): A compre-
hensive side bar menu provides access to
interior pages without requiring the user
to navigate through multiple menu levels.
FLASH AREA: The changing Flash
images showcase products and current
PrinterRunner.com
specials in a way that is appealing to
the user without distracting from the
The anatomy: PrintRunner
navigation elements.
was most representative of a
typical e-commerce printing
MAIN CONTENT AREA: Products site. The top-level navigation
are given prime significance in the body bar has very few links. The
of the page as images (approximately sidebar navigation provides
2.5 in2). The images link to the individual the product-specific links.
product pages. And the main content area
highlights the main product
FOOTER: Placing a sitemap in the footer categories and emphasizes
is becoming a popular strategy for opti- links to current specials.
mizing user-centered site navigation. Also, contact information
and the shopping cart are
prominently displayed in the
upper right corner, exactly
where consumers expect to
find those features.
13 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

17.
PRINTING FOR LESS: PUTTING IT ALL
OUT THERE, LITERALLY
Printing For Less is the wordiest of the e-commerce pages tested. The density of text and graphics, paired
with an illogical navigation scheme created a usability disaster. In order to find out about business cards,
users had to roll over the third tab (“cards”) to find sub-menu options. The sidebar navigation also
proved confusing for users. Overall, the categorization of the products is not intuitive—most users
are browsing by type of product, not dimensions.
HEADER: Rolling over the top-level tabs
reveals more menu items on the lavender
bar below the tabs.
SIDEBAR (LOCAL NAV): 20 percent
of users did not notice the search box.
The sidebar menu runs nearly the length
of the entire page, requiring user to scroll
through to see all the available options.
FLASH AREA: Customer service and
customer satisfaction are emphasized
in this area, whereas other sites use this
prime real-estate to focus on products
PrintingForLess.com
MAIN CONTENT AREA: Multiple The anatomy: Printing For
text clusters overwhelmed the users—and Less is overwhelmed with
failed to convey any useful information. content, burying some of the
key selling points, i.e. “100%
FOOTER: If the user ever makes it this Satisfaction” and “You Can
far, they will find basic administrative Trust your Printing Project
links, such as the FAQ and Help Center. to Us” are lost on the viewer
Links to specific products or services are who is simply trying to find
not included. product information.
14 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

18.
PRINTING CENTER USA:
CHALLENGING CONVENTIONS
Different is good, sometimes. But when it came to designing for usability, Printing Center USA’s unique
approach to design challenged the users. Many users found the colors distracting and layout confusing. And
this perception crippled the website’s credibility as a quality and trusted printing center. But if that doesn’t
make the point then this will: nearly two-thirds (63 percent) of the participants said they would not make
a purchase from this site. It’s pretty, sure, but when it comes to performance—pretty doesn’t cut it.
HEADER: For important things, like the
placement of shopping cart and contact
information, the site followed the norm.
But that was the end of typical—the large
graphic header was unique to this site.
SIDEBAR (LOCAL NAV): In line with
doing a complete 180, Printing Center USA
turned the side bar on it’s side. The content
in this section normally appears in the
left column on typical e-commerce
printing sites.
FLASH AREA: Scroll bar featuring
products challenge conventions,
and users.
PrintingCenterUSA.com
The anatomy: Printing
MAIN CONTENT AREA: The scrolling Center USA took a com-
menu was also used as a display for the pletely different approach
products and services. to design that focuses on
colors. The design attempts
to break the mold of the
FOOTER: Not quite a typical footer, “boring” e-commerce site
but the same idea of including an with flashy colors, a
abbreviated sitemap at the bottom of the modernized page layout
page is implemented here. However, it and a unique scrolling
looks like an afterthought or a space filler. view of products.
15 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

19.
THE USABILITY
TEST: OVERVIEW
OF RESULTS
PrintRunner came out on top for both usability and user SUCCESS RATES
preference (Figures 12 13; Table 5 and Figure 14 on the PrintRunner Printing For Less Printing Center USA
following page). Users had the most difficulty completing 5% 13% 7%
the tasks on Printing For Less; the abandon rate was the 37%
highest (13 percent) suggesting users were more likely to
Success 33%
give up because of frustration. This is likely a result of poor
Fail 44%
navigation logic and the density of text cluster, making Abandon
it difficult for users to identify critical information. On
62%
average, Printing for Less required the most page views for 43% 56%
task completion (Table 5).
Printing Center USA didn’t fair much better; over half the Figure 12. The rate of success and failure for task completion was calculated from user feedback and tracking the URLs. Users also
had the option to abandon the task. Task abandonment typically indicates that the task was too difficult or was taking too much
participants (56 percent) failed to locate the success URLs; time to complete.
which is to say that the participants never satisfied the
requirements of the task (Figure 12). USER EXPERIENCE RATED
EXCELLENT
2.6 1.5 1.9
POOR
PrintRunner Printing For Less Printing Center USA
Figure 13. The user’s ranked the sites in order of preference. Scores
were assigned to the rankings, where 3’s were tallied each time a site
was ranked as the best user experience. PrintRunner took first place;
earning a score of 2.6. Printing For Less was most frequently rated as the
worst experience.
16 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

20.
PAGE VIEWS
Average Page Views
The fewer pages the consumer has to click
Time Per Page (seconds) 4
100 through, the more time they will likely spend
engaging with the product.
3.5
80
3
Time Per Page (Seconds)
60 2.5
# of Page Views
2
40
1.5
1
20
0.5
1.5
0 0
PrintRunner Printing For Less Printing Center USA
Figure 14. The number of pages a user has to click through is a good indicator of usability—especially for e-commerce sites where the goal is
to design a convenient and simple shopping experience. And as the results show, users tended to spend less time per page on Print Center USA’s
site, suggesting that they weren’t finding what they were looking for; whereas on PrintRunner, the users were able to spend more time engaging
with product information. The time spent searching for information will likely distract the consumer from their goal.
PAGE VIEWS SECONDS SECONDS/
PAGE
Average Maximum Average Maximum Average
PrintRunner 2.5 5.5 138.5 475 55.4
Printing For Less 3 12.5 96.5 347.5 32.2
1.9
Printing Center USA 3.5 13 81.5 326 23.3
Table 5. The participants were asked to complete a series of tasks on each website, including finding
templates for business cards and turn around time for printing services. The time and number of pages
the user went through to complete the task were recorded.
17 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®

21.
ETHOS
APPEARANCE
Take a moment and think about what your gut feeling tells you about each of the
e-commerce websites we have looked at in this section. Based on this feeling alone,
would you be more or less likely to use one of these sites for your printing needs? ETHOS HEX
Because, after all, that’s what it comes down to for many consumers. It’s about how the site
appeals to the consumer instinct (Figure 15). LOOK FEEL
PrintRunner
The visual information structure is the organization of content using color, contrast,
headers and fonts to help direct the user’s attention to items like navigation and calls to CREDIBLE
Printing For Less
action. It also conveys significant information to consumers about the status and integrity 100%
Printing Center USA
of the company. Bright and fun colors may be appropriate for a site about kids, but might
fail to communicate the right message for a printing site. Likewise, a website that looks
cluttered and hectic might send the message to the consumer that the business operations
M
EA INFO 100%
are also much the same.
LIS
SE R
NA
O F MA
50%
PrintRunner appealed the most to the users in this study (Figure 15) in nearly
SIO
%
FINTION
100
all aspects. Whereas the cluttered layout and navigation of Printing Center USA and
ES
DI
OF
NG
Printing For Less cost these sites a lot in terms of appeal. And if that’s not convincing,
PR
then consider this: nearly two thirds of the participants were strongly opposed
%
50
50
%
to making a purchase from Printing Center USA. On the flip side, nearly
three-quarters of the group were sold on PrintRunner’s more complete ethos
(Figure 15); agreeing that they would purchase from this site.
0%
50%
%
50
SIM
NA LA
Y
ITY
%
10
DL
PL
FR USER
100
0%
E/
IEN
VI YO
50%
BIL
CL
GA U
EA
N
A
TIO T
US
N
100%
FUNCTIONAL
Figure 15. Fill it up. The higher the user ratings are for each factor, the fuller the Ethos Hex becomes. These factors show how well
the site appeals to the user. And as the results show, Printing Center USA and Printing For Less suffered from a low ethos rating.
18 877.568.7477 • OneUpWeb.com ©2010—All Information in This Document is Copyright Protected and the Property of Oneupweb®