SlideShare a Scribd company logo
1 of 64
Download to read offline
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®
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®
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®
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®
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®
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®
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®
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 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®
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®
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®
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®
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®
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®
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®
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®
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®
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®
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®
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®
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®
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design
Revolutionizing Website Design

More Related Content

More from Ben Mantooth

Mobile Beacons 101
Mobile Beacons 101Mobile Beacons 101
Mobile Beacons 101Ben Mantooth
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiencesBen Mantooth
 
Multichannel Content Playbook
Multichannel Content PlaybookMultichannel Content Playbook
Multichannel Content PlaybookBen Mantooth
 
Digital Engagement Strategy Guide
Digital Engagement Strategy GuideDigital Engagement Strategy Guide
Digital Engagement Strategy GuideBen Mantooth
 
Content Marketing Playbook 2011
Content Marketing Playbook 2011Content Marketing Playbook 2011
Content Marketing Playbook 2011Ben Mantooth
 

More from Ben Mantooth (6)

Mobile Beacons 101
Mobile Beacons 101Mobile Beacons 101
Mobile Beacons 101
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiences
 
Multichannel Content Playbook
Multichannel Content PlaybookMultichannel Content Playbook
Multichannel Content Playbook
 
Digital Engagement Strategy Guide
Digital Engagement Strategy GuideDigital Engagement Strategy Guide
Digital Engagement Strategy Guide
 
Creating Content
Creating ContentCreating Content
Creating Content
 
Content Marketing Playbook 2011
Content Marketing Playbook 2011Content Marketing Playbook 2011
Content Marketing Playbook 2011
 

Recently uploaded

Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 

Recently uploaded (20)

Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 

Revolutionizing Website Design

  • 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®