tl;dr - Web actions are actions a visitor to your site or application does to another site or app. They create a cleaner and more seamless user experience.

Introducing the Concept of Web Actions

It’s been over a month now since IndieWeb Camp took place in Portland, OR.  Over the course of the weekend I was introduced to concepts and terminology new to me – like web intents, sharecropping, and the NASCAR idea – and I had the opportunity to brainstorm more freely than I typically get to on a normal day.

After learning about the concepts behind web intents, I was captivated by the idea of organizing basic website actions (like tweeting, emailing, hearting, likeing) into their root categories.  I was also inspired by the notion that we – as web creators – are often needlessly cluttering sites with ill-placed social media buttons and confusing action forms.

Working with several ideas in mind, I joined in to focus on web intents, but soon noticed that the original pilgrims had moved on to web introducers as a concept [see also - and note that Paul Kinlan is now back focusing on web intents].  @t and I agreed that something was missing and that this space in general was confusing and lacked definition.

We agreed to continue our brainstorming, working out a few ideas we had shared.  Moving forward, we began using the term “web actions” to describe the space we were working in.

What Are Web Actions?

It’s taken me awhile to get my head around what a web action really is and which alternatives are just collections of buttons and links. As we are using the term now, web actions are actions your visitors take on your site or application to another site or application. Having an account and an authentication level are implied aspects because your visitor has to log in to the second site or application in order for a share, save, or send to take place. Web actions mean that the visitor stays on your site while completing the action, rather than opening up a new page on another site or launching an application.

The NASCAR Effect

Web actions begin to solve the problem of the NASCAR effect, where many sites today are completely littered with social buttons and share widgets. Like race cars slapped with promo stickers, blogs and businesses have filled their footers, sidebars, and whitespace with buttons for saving and sharing posts or pages on each and every remotely popular social site.

Companies like AddThis made it easy for even the less-technically-inclined to include a snippet of Javascript on their sites and generate an array of social options. It’s also easy to justify the inclusion of various buttons on your site by just noting that everyone else is doing it. I’ve done that myself.

(Incidentally, the current version of this blog doesn’t use web actions as I ultimately see them occurring. However, since it’s my own testbed for new items, expect some changes in the near future.)

Button Slut – n.  A blogger or website owner who adorns his or her site with a large number of buttons or badges.

Fixing the Button Candy

These collections of digital kitsch add clutter to sites and often slow them down. I would also guess that for many sites, having an abundance of social share buttons actually decreases the effectiveness of each button. Social buttons and similar features were originally intended to provide visitors with easy shortcuts and to encourage a behavior of sharing. I have a hunch that on many sites today, NASCAR arrays are often ignored like in-page ads.

Web actions break down visitor behaviors into simple, clean, less arrogant interactions. They should allow visitors to your site to be able to share or save content without giving it a second thought. Web actions should not be intrusive to the content or the design. They are the more effective, more minimalistic alternative to social button overgrowth.

Examples of Web Actions

An area that initially attracted me to the concept was the idea of breaking down and organizing existing on-page actions – likes, sends, tweets, hearts, stars, saves – into categories based on the underlying intention of the person. If you ignore the underlying social network, site, or application and think just about the motivation behind the behavior, similarities begin to emerge.

While by no means a complete list, a few examples are:

• Saving content, such as bookmarking it, adding it to a list, or marking it some fashion so that it’s easy to identify later.
• Sharing content, such as announcing a link to friends or family, emailing an article, or redistributing a message.
• Showing support (for an author or for an organization in general); this might loosely be called, ‘giving props to,’ or adding your stamp of approval.
• Purchasing something, where a click and a confirmation executes a transaction with a separate site.

For a more specific example of a sharing web action, we can look at emailing. If you’re reading a great blog post and you want to pass it on to a friend, along with a note about the article, you might choose the “send” action. From there you have a saved preference of email. Once you choose to email the article, a pre-populated message window opens up that includes a link to the article in the body and the article title in the subject line. You can add your message, your recipient’s address, and send it off without leaving the original page.

Moving Forward in the Space

I see a mix of interactions on sites and apps today, ranging from overblown NASCAR arrays to scenarios very similar to the one described above. What we have seen as much of during our initial discussion of web actions, is the devision and classification of specific actions by the visitor’s overarching intention, or the conscious placement of certain actions on the page in a position that is most usable for the visitor.

These areas are open for research and discussion. Is it better to put an action for reading a post later at the top of the post assuming they haven’t read anything? Does it make sense to place a sharing action at the bottom of a post and assume this is where the reader will look when he wants to tweet the article out to followers? I don’t know, but I’m excited to perform the research.

I also don’t know if the way I breakdown and categorize various buttons and badges into web action clusters is the same way someone else might instinctively group this information. But I do know how to solicit this type of information from others.

In the immediate future, @t and I will be solidifying more details on web actions, including performing some of the research I’ve mentioned above. I’ve started screenshoting a few of the web action examples I’ve come across, and I’ll add to this Flickr collection over time. I would encourage others to contribute their own with #webactions. Thoughts, questions, and positive discussions are always welcome.

Button arrays via icondock.com and webtoolkit4.me.

A More Visual Example of Web Actions

First: One button summarizes the root intention

Second: The visitor's preferred services for the action are shown

Third: The content is saved to the visitor's account with the option to edit accordingly

Fourth: The content is saved to the account

Creating a Ubiquitous Information Architecture and Designing Across Devices

Download the Egg Matrix Omnigraffle Alpha Version

Download the Egg Matrix PDF Alpha Version

The Egg Matrix is a tool for planning content, features, and scenarios when creating an information architecture that will exist across multiple devices and touch points.

Where Did the Idea Come From?

In college, I had an environmental design professor who described the field as such:

Architecture is the profession that designs the shell or the structure of the built environment. Interior design is the profession that designs the interactions and spaces inside that built environment. Landscape architecture is the profession that designs the space outside this structure.

Environmental design encompasses all three, studying our interactions with the built environment, how we move through it, how we move around it, how we integrate with the natural environment, and so on.

I always had the idea of an egg in my head, in part because he described architecture as being like a shell of sorts, and partially because we talked a lot about animal habitats and homes.

Environmental design is a human-centered design discipline that covers our physical surroundings. It considers the shared ecology between places and spaces, interiors and exteriors, the mechanic and the organic. Many of the same principles and ideals carry over into the digital space.

When the Digital World Spills Over into the Physical World

When we design for digital spaces today, it’s no longer safe to assume that the majority of our users will access our information from a similar static setup in an office or home. Digital information travels freely now between devices, locations, and online and offline habitats. In fact, it’s nearly impossible to know the context or situation that surrounds each of our users.

It also seems likely that even before we have mastered the art of designing across desktop and mobile platforms, we will find ourselves creating spaces in cars, kiosks, mirrors, table tops, refrigerators, and many other devices. There is no set of rules that tells us how to create the right mix of content and features so that our users will have a seamless experience whenever and wherever they access our information.

The Egg Matrix

The Egg Matrix is my attempt to create a tool for cataloging the different forces that should be considered when determining the architecture, features, and overall design of a multi-device experience. My hope is that it is flexible enough to be applicable to topical challenges, like designing for mobile vs desktop spaces, but that it also will encompass future needs, such as television or in-car apps.

The concept is simple. There is a subset of the experience (the egg) that you can directly control. You are responsible for the structure, the content, the messaging, and the interaction that goes into your design. There are also two equally important forces at play that contribute to the experience and overall success of what you’ve designed. There is the internal composition of the user (the yolk) and the extrinsic environment that the experience takes place in (the nest). You might be able to influence certain aspects of both areas, and you might be able to design around certain scenarios, but you’ll never be responsible for the creation of these realms.

By breaking each area down into individual factors, you’ll be able to create a better model for your structure. I’ve broken each field out into the initial factors that I thought were most crucial, but there is certainly room for expansion, refinement, and feedback.

Start with a single node of content, and build out from there. What features are needed to interact with that content? How often is the content accessed by the user? What possible contexts might the user be in when accessing the content? What belief systems might he or she be bringing to the experience?

The breakdown currently is as follows:
The Nest covers environment, location, context, and locomotion.
The Egg covers message, content, task, frequency, urgency, privacy, intimacy, tracking, and measurement.
The Yolk covers motivations, needs, desires, and knowledge.

You may find yourself creating multiple columns for a single content node to cover the array of possible touch points or devices your users might encounter.

I included a section called “messaging.” This may relate to a marketing campaign, a company brand message, or a common slogan. It’s important the spaces you design don’t contradict the messaging being broadcast to users.

I’ve also included fields for noting tracking and measurements. These are for listing how you plan to measure the experience and what measurement points you’re going to look for.

How Do You Know If The Model Is Working?

Like any other model, it has to be put into action and tested. Fortunately, this “model” can be tested in several ways. You can gather feed and ask questions of users. You can create a prototype to test. When you’re satisfied with the performance of a prototype, you can design the real deal, and then continue to make refinements with ongoing feedback.

I’ve listed the Egg Matrix worksheet here so that others can download it, play around with it, refine it, and provide feedback.

Download the Egg Matrix Omnigraffle Alpha Version

Download the Egg Matrix PDF Alpha Version

UX Pin

Portable Paper Prototyping Kit

$19.99

Buy It!

Sketch your ideas on little sticky notes.  Need to move that buy button?  No problem!  This kit looks awesome for rapid prototyping and ideation.

Paper Browser

Sketching Notebook

$16.00

Buy it!

Yes, it’s a notebook with browser windows printed on the pages.  You can choose various sizes and orientations for your browser windows (you know, to reflect screen size and such).

App Sketchbook

iPad and iPhone App Sketch Grids

$12.00

Buy It!

For the app designer in your life.  Who doesn’t want to carry around a little notebook to jot down those app ideas on the fly?  Choose from iPad or iPhone for your grids.

iPad App Stencils

(Also iPhone, Website, Android, and Sketch Pads)

$24.95

Buy It!

I’ve wanted these for awhile.  They’re like architectural stencils, except without the toilet icons.  (Which reminds me, I think I still have architectural stencils lost somewhere in a box, probably with the tracing paper.)

Stainless Steel Sharpie

Fine Point Permanent Marker

$6.75

Buy It!

Yes, it’s a Sharpie.  A Stainless Steel Fricking Sharpie!  And if you’re going to give someone a bunch of sketching pads, you might as well thrown in some pens.  Also, think stocking stuffer.

Big Idea Adhesive Notes

Sticky Notes for Content Strategy?

$10.00

Buy It!

Let’s face it – everyone needs more sticky notes.  And these might even help you organize your content and ideas better.

2011 Wall Calendar

With Extra Special Geometric Illustrations

$25.00

Buy It!

This is the only decent time of the year to buy a calendar, you might as well make it a good one.  If you don’t like walls, there’s also a desktop version.  Hand-illustrated.

Moleskin for iPad

AKA “Moleskin Folio Digital Tablet Cover”

$64.99

Buy It!

The best case for you iPad.  Combine web browsing with sketching, or just take notes in both places.  I think this is the perfect combination.

Personal Library Kit

With Return Date Cards!

$16.95

Buy It!

Library science majors rejoice, now you can catalog your personal collection stamp a due date on each book your friends try to steal.  It really has an ink pad, a stamp, and library book cards / sleeves.

Random Geometry Wallpaper

From Hermitage

$128.00

Buy It!

Please put this wallpaper in your office, and then hang the above wall calendar over it.  Your clients might go insane.

Flowchart of the Holidays

Greeting Card

$4.50

Buy It!

If you’re only going to give someone a card, it might as well be good.  What are you doing for the holidays?  Just  follow the chart.

Everything Explained Through Flowcharts

The Book

$11.55

Buy It!

Even the Table of Contents is a flowchart.

16 Months Worth of Drawing Exercises in Microsoft Excel

By Danielle Aubert

$47.50

Buy It!

No actual drawing exercises or Excel tutorials here, but the author spent 16 months using Excel to create various pieces of art.  Thought R was fun? Check out these Excel pieces.

Map Art Prints

Hand-Drawn City Prints

$35.00

Buy It!

Inked by hand with little lines, these city prints map out the streets of famous cities.  Choose from Portland, San Francisco, Chicago, Boston, Rome, Madrid, and more.

City Neighborhood Posters

Ork Posters

$22.00

Buy It!

I first saw these in a friend’s apartment. She had one for each city she’d lived in: Portland, Los Angeles, and Seattle.  The posters squish the names of the different city districts into areas into the areas they cover.

Nonsensical Infographics

Art Without The Math

$20.00 +

Buy It!

These pictures (four in all) from artist Chad Hagen show the beauty of infographics without the mess of trying to understand what they actually mean.  They’d also look great in my house.

When done well, blogging can be a great way to develop a stronger rapport with your customers. Many retailers also start blogging with intentions to bolster their search engine rankings and gather links from other blogs or websites. Good blogs will lure readers back again and again with worthy content and may turn a browser into a buyer or a one-time customer into a lifetime fan.

I recently spent a little time checking out the blogging efforts of some of the largest online retailers to see how they approached the design and layout of their company’s blog (or network of blogs). While blogging can help build a company’s credibility and might spread information about products to a wider audience, blogging isn’t for everyone and some of the biggest ecommerce businesses don’t run their own blogs. This is a look at a few of the blogs from those who do.

Amazon Inc.

(Internet Retailer Rank of 1 for 2009)

Omnivoracious’ Amazon Blog

Omnivoracious is a blog about books written by a handful of people who love to read.

Platform: Custom / Typepad (blogs on separate domain are Typepad, blogs within Amazon are not)
Domain: Separate Domain and a duplicate copy sits within the Amazon domain.
First Post: 2007
Columns: 2
Layout: Content in the middle, information on the right
Features: The right column includes a link to the RSS feed, an “about” section, a blog roll, and a looong list of topics covered in the blog. Confusingly, the blog exists in two locations (at omnivoracious.com and at amazon.com) with slightly different information in the right hand column between the two. The version within the main Amazon site is more difficult to navigate through archives.

Amazon Daily

Amazon Daily aggregates the other Amazon blogs. It sits within the Amazon domain.

Platform: Custom
Columns: 2
Layout: Content in the middle, information on the right
Features: The right column includes a link to the RSS feed, a link to sign in, a calendar of posts by date, and a list of topics.  Missing is a search of blog articles.

Amazon also maintains a number of other blogs following the above formats.  Blogs on separate domains include Chordstrike, Al Dente Blog, Car Lust Blog, End User Blog, Armchair Commentary, Wag Reflex, and Toy Whimsey.  Blogs within the Amazon main domain include Baby Babble Blog, Green Scene, and Amazon Game Room.

Dell Inc.

(Internet Retailer Rank 3 for 2009)

Direct2Dell – Dell Community

The community of Dell blogs pulls together articles and posts about Dell products, technology, and aspects of Dell as a company.

Platform: CommunityServer 2008.5 SP2
Domain: Subdomain
First Post: July 2006
Columns: 3
Layout: Unlike most of the blogs seen here, this design places the components and blog features in a left column with the main article content in the middle.
Features: List of blogs, languages, and post categories in the left column.  RSS and email notifications, blog roll, and archives are in the right column.

Apple Inc.

(Internet Retailer Rank 5 for 2009)

Apple Hot News

Though hard to call a real blog, the Apple Hot News page aggregates articles and recent pages, and offers subscription via RSS.

Platform: Custom
Domain: Within main site
Columns: 2
Layout: Content in the middle, components in the right column.
Features: The page holds the typical Apple store top nav, presents snippets of content articles down the middle, and offers links to top TV shows, tunes, trailers, widgets, and more down the right.

Sears Holdings Corp.

(Internet Retailer Rank 7 for 2009)

My Sears Blogs

The blog posts about all things Sears: corporate news, local store events, and the latest sales and specials.

Platform: Typepad
Domain: Subdomain
First Post: March 2009
Columns: 2
Layout: Content in the middles, information on the right.
Features: Among the blog features of the right column are categories, archives, polls, and a Twitter stream. Links to reviews and community discussions are also present at the top.

Newegg Inc.

(Internet Retailer Rank 7 for 2009)

EggXpert Community Blogs

The EggXpert community blog space brings together blog posts related to technology, gadgets, deals, and topics of interest to the Newegg family of sites.

Platform: CommunityServer 2.1 SP2
Domain: Separate Domain
First Post: April 2007
Columns: 2
Layout: Article content fills the middle, information is on the right.
Features: The right hand column includes links to FAQs, forums, shopping sites, social media sites, most viewed content, most comments, and RSS syndication.  Missing is an easy archive or category breakdown, although the content has sorting options.

Best Buy Co.

(Internet Retailer Rank of 10 for 2009)

Geeksquad Intelligence Geek Blog

The Geeksquad blog focuses on geeky news and tech information.

Platform: WordPress
Domain: Within Main Site (geeksquad.com)
First Post: January 2009
Columns: 2
Layout: Content in the middle, information on the right.
Layout: The sharp looking GeekSquad blog includes categories, a blog roll, archives, recent posts, and a tag cloud in the right column.  The top navigation includes a site search, social media links, and links to other BestBuy/GeekSquad pages.

QVC Inc.

(Internet Retailer Rank 11 for 2009)

Blogs in QVC Community

The QVC blog community brings together a whole network of blogs from various QVC employees.

Platform: Custom/LiveWorld
Domain: Subdomain
First Post: April 2009
Columns: 2 (primarily)
Layout: Main blog information is in the middle.
Features: The somewhat feature-sparse layout has several links on the left for navigating back to forums and the blog community main page.

SonyStyle.com

(Internet Retailer Rank 12 for 2009)

Sony Electronics Blog

The Sony electronics blog brings updates on Sony technology and new happenings from the digital world.

Platform: Custom
Domain: Separate Domain
First Post: April 2009
Columns: 2
Layout: Blog content in the middle, information on the right.
Features: The electronics blog is easy to navigate and has links to comments and social bookmarking tools below posts. The right column includes links to the RSS of the blog, an about section, and ways to subscribe, along with an archive, links to other social networking pages, featured posts, recent posts, recent comments, and podcasts.

SonyStyle USA Blog

Even more news and info from Sony.

Platform: Custom
Domain: Subdomain
First Post: May 2009
Columns: 2
Layout: Blog content in the middle, information on the right.
Features: While I’m confused by Sony’s need for two separate blogs, this blog is similarly organized: some links are at the top of the right column, and the right also displays the archive, popular posts, categories, favorites, and links to other Sony sites.

WalMart

(Internet Retailer Rank 13 for 2009)

CheckOut Blog

A blog about written by the “team of experts at Wal-Mart and Sam’s Club who have really cool jobs working with gadgets, games, sustainability and more.”

Platform: Custom
Domain: Separate Domain
First Post: August 2007
Columns: 3
Layout: Main content in the middle; two split columns on the right.
Features: Blog articles fill the left-center section of the layout, while the first right column includes categories, the blog roll, a brief “about” blurb, and links to Flickr and YouTube feeds.  The second right column includes an RSS subscription, a blog search, a Twitter link, and recent posts, most commented posts, archives, and an author list.

HP Home & Home Office Store

(Internet Retailer Rank 16 for 2009)

HP Blogs

A large collection of blogs from the HP community.

Platform: CommunityServer 2008.5 SP1
Domain: Subdomain
Columns: 2
Layout: Content in the middle, information on the right.
Features: The blogging community uses a layout with blog content in the center and a right column navigation that includes a search, syndication links, blog tags, and blog categories.

Netflix Inc.

(Internet Retailer Rank 18 for 2009)

The Official Netflix Blog

Blogging about Netflix and the movie experience.

Platform: Blogger
Domain: Subdomain
First Post: May 2007
Columns: 2
Layout: Blog content in the middle, information on the right.
Features: On the right are relevant Netflix links, information about the blog, an archive, labels, and a Ning community badge.

Gap Inc.

(Internet Retailer Rank 25 for 2009)

Athleta Chi

Th blog of the Athleta brand brings together inspiring stories of female athletes and informative sports articles.

Platform: WordPress
Domain: Separate Domain
Columns: 2
Layout: Article content in the middle, blog information on the right.
Layout: On the right, the Chi blog includes options to subscribe via email and RSS, new articles, featured articles, recent comments, events, a blog search, and a link to article archives.

HSN Inc.

(Internet Retailer Rank 26 for 2009)

HSN Blogs

Industry experts offer advice to the HSN community.

Platform: Custom
Domain: On Main Site
Columns: 2
Layout: Main blog information in the middle.
Layout: Actual blog pages are mainly comprised of article content with links to other blog articles by the same author on the left.  The main blog page includes a blog roll on the left and an aggregate of recent posts in the center of the page.

Zappos.com Inc.

(Internet Retailer Rank 27 for 2009)

Zappos Blogs

The Zappos blog is actually a collection of frequently cited blogs focusing on various aspects of Zappos culture.

Platform: Custom
Domain: Subdomain
Columns: 2/3
Layout: Blog content in the middle, information on the right.
Layout: The main article content is in the middle, links to other Zappos blogs fill the top nav, and the right column is divided into two columns in places.  The right space houses an RSS link, popular posts, active blogs, and blog tags.

Blog Design Tips to Remember

If you’re setting up your own blog or re-evaluating your existing blogging efforts, you may want to take note of these recommendations: Include a link to your blog’s RSS subscription and/or email subscription in the upper right portion of the page.  You should also include a search for your blog, but don’t default to using your product catalog search field from the ecommerce portion of your site.  The search should pull up articles from the blog itself. If you have an email signup and a search bar at the top of your page, make sure to clearly indicate which is which.  Customers won’t be amused if they enter their search terms into your email box because they couldn’t determine the function of the text field.

If you’ve gathered more than a handful of posts, include an easy way for visitors to browse through your blog’s history, whether it’s a calendar, an archive, or a list by month.  Few will spend the time hitting your posts’ “more” links looking for that article they saw two months ago.

Use some of the right column space to highlight featured posts that may interest new readers.  This could be a section of links to the most popular posts, the most commented on posts, or just the stories that you believe were special.

For a look at more on blogs from ecommerce companies, check out a list of blogs from the top 100 online retailers, a slightly older post from Get Elastic on the same subject, and some recommendations on doing blogging right.

What is Whitespace?

Whitespace, also known as negative space, is a term often heard in the art and design world. In web design, whitespace is the empty space (whether it is white or colored) that surrounds the components on a webpage. It is the empty space in between the text, titles, graphics, and logos on your site.

Within the various elements of a webpage, macro whitespace is the negative space surrounding the larger elements of the site, the space between the header menu and main body text, for example. Micro whitespace refers to the more easily overlooked miniscule space between lines, images and descriptions, and other small page details.

Whitespace is an important element in web design, as it can be used to separate and highlight items, provide visual relief, and alleviate perceptions of clutter or constraint. However, it’s not uncommon for web designers to try to utilize all the space provided by filling it with many elements.

More Stuff, Less Space

More product, more content, more callouts – all these can lead to more purchases and more traffic, so it’s easy to see why “more” could be understood as “better.” Many times whitespace might seem like wasted real estate. What’s often forgotten is that whitespace can be artfully used to direct the viewer’s attention to more important elements. It can also lend to a sense of balance and elegance through simplicity in the page design.

Whitespace offsets the visual weight of content and is essential for a website to appear simple, comfortable, and concise. Too much content and too little negative space may leave a page looking messy, crammed, or unprofessional. With no visual breathing room for the viewer’s eye, the visitor might experience feelings of constriction or confinement. You wouldn’t find it easy to read a book if all the lines and paragraphs ran together, so why hint at that in your web content?

Will Whitespace Make Your Content Better?

While leaving a page crammed with text and content may frustrate readers as they try to scan a site for essential information, leaving gross amounts of whitespace in between all elements may lead to needless scrolling as users have to navigate down the page while the take in the information. Is there a perfect balance between whitespace and content? Several studies performed by the software usability research lab at Wichita State University sought to answer questions surrounding whitespace and reading online content.

Finding Content on a Page

In one experiment, three versions of an online travel website were created. The content was identical on all three, but the information was spaced differently across the pages. In the low whitespace condition, much of the content on travel information was crammed together in three columns with little room to separate categories or paragraphs. In a medium whitespace condition, the columns and content categories were spaced enough to provide clear distinctions between groups. In the high whitespace condition, a large amount of whitespace was provided around each section of content, giving it an empty look.

During the study, participants were asked questions that required that they locate information throughout the pages. In the end, the amount of time it took the users to find links within the page content didn’t differ based on the design. However, participants rated a higher level of satisfaction with the medium whitespace design, and rated this layout as preferred.

Readability and Margins

In another study, reading speed and comprehension were examined with regards to whitespace and content layout. Four content layouts were created for mock webpages. In the designs, the line height between the paragraphs was varied between standard (5mm of space between lines) and sub-optimal (4mm of space between lines). Margins were also varied between 10mm of whitespace surrounding the text or 2mm of whitespace surrounding the text. Altogether, four conditions were created with these variables.

Text with Margins and Standard Line Spacing	Text with No Margins and Standard Line Spacing
Text with Margins and Sub-Optimal Line Height	Text with No Margins and Sub-Optimal Line Heigh

Participants were asked to read the text at their own speed and answer comprehension questions about the paragraphs. In the end, words per minute reading speed was higher for the conditions where there were no margins, but reading comprehension suffered. The higher reading comprehension scores were for those conditions with larger margins. Participants also reported lower levels of fatigue and eyestrain when margins were involved, and an analysis showed that the element design that include 10mm margins and standard line spacing of 5mm was the preferred format.

Best Practices for Using Whitespace

If content and reading comprehension are important to your site, take the middle road with whitespace – not too much, not too little. The amount of whitespace between lines, paragraphs, and content sections does influence your user’s ability to read, scan, and understand the information. News, media, and elearning sites should all note that pushing information too closely together makes it more tasking to scan and extract information from. Likewise, if exaggerated spacing is used, the words will seem isolated and the relevance of the information may be disconnected.

When used properly, whitespace focuses attention on specific elements, can increase findability, and will draw the eye to certain places on the page. Effective whitespace also offers the illusion of simplicity and professionalism.

Buy buttons may be the one thing no ecommerce website should be without.  A lot of people have expressed thoughts on what makes a buy button better – be it brighter colors, bolder graphics, or a bigger size.  It makes sense to want to optimize your add to cart button, as the ultimate goal of any product page is to get that product into the shopping cart.  It’s common to hear that vibrantly colored flashy buttons attract our attention, subliminally compelling the shopper to click.  But if a big red button offered guaranteed clickability, surely every online store’s product pages would sport the same.  So how do the nation’s largest etailers treat the essential add-to-cart?  I grabbed a list of buy buttons from the top 50 ecommerce companies in 2008 to see how the buttons really did compare.

As you can see, they are not all big, bad, and red.  In fact, this collection of buttons resembles a bag of mixed-colored candy more than anything.  So how did the attributes break down?

Buy Button Color

Green  13 (26%)
Red  10 (20%)
Orange  10 (20%)
Blue  6 (12%)
Grey  4 (8%)
Yellow  3 (6%)
Pink  2 (4%)
Purple  1 (2%)
Black  1 (2%)

Buy Button Color Tone

Warm  25 (50%)  – That’s red, yellow, orange, and pink.
Cool  20 (40%) – That’s green, blue, and purple.
Neutral  5 (10%) – That’s black and grey.

Apparently brown just isn’t a hot button color in anyone’s book.

Add to Cart Call to Action

“Add to Cart” – 28 (56%)
“Add to Bag” – 10 (20%)
“Add to Shopping Cart” – 2 (4%)
“Add Items to Bag” – 1 (2%)
“Add” – 1 (2%)
“Add to Basket” – 1 (2%)
“Select Delivery Date” – 1 (2%)
“Add to Shopping Bag” – 1 (2%)
“Next” – 1 (2%)
“Order Now” – 1 (2%)

I guess the needy plea, “Buy Me Now, Please!” didn’t make the cut.  In terms of the use of “bag” versus “cart,” in general the retailers employing the “bag” are more likely to be associated with bags in their physical counterparts, like apparel retailers.  (When was the last time you pushed a shopping cart through Nordstrom?)

Extra Add to Cart Button Graphics

None  28 (56%)
Arrow  8 (16%)
Cart  6 (12%)
Plus Sign  3 (6%)
Bag  2 (4%)

Button Size

Does size matter?  Circuit City and the Systemax family of sites seem to think so.  Each of their sites uses a strikingly large green bar as their add-to-cart.  Never mind if green isn’t associated with the brand.  On the smaller side, Gap has chosen a barely-there concept.  The petite pale grey design certainly doesn’t stand out on their many-shades-of-grey site. Gap’s sister brands Banana Republic, Old Navy, Athleta, and Piperlime also appear to be taking the less-is-more approach.  I didn’t measure each button, but most fall within the realm of 1 to 1.5 inches.

Findability Still Matters

In the end, it doesn’t matter how fantastic your button looks, if it’s hard to find on the page.  (This is one argument for vibrant contrasting colors; the more attention it attracts, the easier it will be to quickly spot.)  Online shoppers are accustomed to quickly scanning pages to pull out relevant information.  A button that jumps off the page eases this process.  Most retailers stuck with common usability conventions and set their buttons in a sans serif font – although L.L. Bean seems to have missed the memo on this one.  Twenty-five of the buttons capitalized the first letter of each word, 20 put the whole call to action in caps, and 5 chose all lower-case.

The Gap and Target’s use of white on light grey is probably better avoided; some old printing conventions still hold true online, and high contrast between text and background is one of them.  As comparison, Musician’s Friend black text on lighter yellow background quickly jumps out and is easy to read.  All in all, many of the buttons are not readily identifiable out of context.  For me, Amazon, Victoria’s Secret, and Toys R Us maintain the company branding and are familiar enough to be identified, even without the corresponding site.  There doesn’t seem to be a clear set of guidelines that even the best-performingetailers use when crafting their buttons.  The best recommendations may still be to ensure that the button is clearly visible and stands out on the page, regardless of color or size.  For an older look at shopping cart buttons, Get Elastic rounded up a list of over 100 buttons in 2007.
Update:
After talking with some usability consultants at Internet Retailer Web Design & Usability 2010, it seems that green is indeed the preferred choice over red for usability studies examining effective buy button color.

The Websites:

1. Amazon.com
2. Staples.com
3. Dell.com
4. OfficeDepot.com
5. Apple.com
6. OfficeMax.com
7. Sears.com
8. CDW.com
9. Newegg.com
10. BestBuy.com
11. QVC.com
12. SonyStyle.com
13. Walmart.com
14. Costco.com
15. JCPenney.com
16. shopping.HP.com
17. CircuitCity.com (CircuitCity is now owned by Systemex Inc, which fell at #21 on the Internet Retailer list for 2008. Systemex also owns TigerDirect and CompUSA.  They all have the save Buy Button).
18. Netflix.com
19. VictoriasSecret.com
20. Target.com
21. LLBean.com
22. Macys.com
23. Williams-Sonoma.com
24. Gap.com
25. HSN.com
26. Zappos.com
27. Amway.com
28. Overstock.com
29. Avon.com
30. 1800Flowers.com
31. Nordstrom.com
32. Buy.com
33. SportsmansGuide.com (As owned by Redcats Group, who also have a lot of other websites I could have chosen from, but I didn’t).
34. NeimanMarcus.com
35. MusiciansFriend.com
36. Blockbuster.com
37. PCConnection.com
38. ToysRUs.com
39. Cabelas.com
40. BarnesandNoble.com
41. Scholastic.com
42. HomeDepot.com
43. VistaPrint.com
44. SaksFifthAvenue.com
45. Nutrisystem.com
46. Drugstore.com
47. Nike.com
48. Kohls.com
49. JCrew.com
50. OrientalTrading.com

This list of sites was compiled from Internet Retailer’s list of top 500 ecommerce businesses for 2008.  Omitted from the list is Peapod Inc, which is a login for current customers only site.