It was last night when I was on the couch with my iPad mini in hand, pinning away DIYs and vegetarian recipes on Pinterest, when a picture of lollipops dressed as ghosts lead me to MarthaStewart.com. I clicked on the image and arrived on the site, but it was not what I remembered. As a usability researcher, I knew exactly what was going on - large pockets of white space, difficulty finding the navigation menu, Martha had gone RWD! *The site did feature a responsive homepage earlier this year, but it looks like all content pages have now been converted to responsive designs.

MarthaStewart.com is currently running a beta Responsive Web Design (RWD), which means that the site can offer the same content on any device, any screen size, and it will adjust accordingly. RWD is a relatively new concept in terms of web design; you can learn more about it on a previous blog post that my colleague wrote. What’s important to know here, is that RWD can result in a beautifully efficient site that seamlessly delivers content to the user across devices without any sacrifices. Websites that are not using RWD often curate content specifically for their mobile site, causing frustration for some users who seek the “full” site experience. As with all new things, there is a bit of a learning curve. In this case that applies to both the web designers and the users.

On that note, let’s take a look at the new Martha Stewart responsive website. For this blog post, we thought it would be fun to point out some of the key differences between the old site and the new responsive site. We would love to hear your thoughts and reactions to the new design, so please don’t hesitate to leave a comment.

MARTHA GOES RWD!

Let’s start with a side-by-side comparison of the old homepage and the new homepage. At a glance, we first notice that the overall color scheme has transitioned from shades of blue and greens, and orange to a more minimalist look that is mostly white with touches of grey and green. We are seeing less use of borders, bullet points, and left-aligned text on the new design.

Now let’s take a closer look at how Martha’s team dealt with the navigation. When moving to a RWD, navigation is one of the most challenging obstacles. Mobile web designer, Brad Frost, put together some great examples of responsive web design navigation styles, which you can look at here. Below shows the old navigation and how the architecture has changed:

• “Food” turned into “Cook”
• “Crafts” and “Home & Garden” are now found under “Create”
• “Entertaining”, “Holidays”, and “Weddings” are now rolled up under “Celebrate”
• “Weddings” also lives on its own tab in the primary navigation

Please note, that there are a few areas of the site we were unable to locate on the new site, including “Pets” and “Whole Living.”

Now as I mentioned before, I was on my iPad mini when I first explored the site; here’s a snapshot of what the site looks like on that device.

Overall, the site looks great on the iPad Mini. My only complaint is that the line items are a little narrow and it is easy to click the wrong one, even with my tiny little fingers! The dropdown arrows make for an even smaller target; let’s just say that the menu is not “fat finger”-friendly (NN/g talks about “fat fingers” here).

Lastly, I would like to share just a few more screenshots of the content experience so you can see how Martha’s team has optimized the experience to further encourage social sharing on sites like Pinterest.

Notice the in-page navigation, which allows users to click to certain areas of the page vs. forcing the user to scroll.

We are looking forward to seeing what changes Martha’s team makes to the beta site, and hope to see a new and improved RWD from them soon!

Not too long ago, websites were tested solely on a desktop computer. Now we are often testing websites across many devices including desktop computers, laptops, tablets, and an array of mobile phones. As screen sizes proliferate, how does a website keep up? That is where Responsive Web Design comes in to play. Responsive design is flexible and adjusts to any screen size by using media queries to figure out the resolution of the device it is being accessed on. The content will always be the same, but may shrink when accessed from devices with smaller screens.

What’s the big deal?

Despite Jakob Nielsen’s argument, the evolution of smartphones and tablets has left many sites feeling outdated. Not only do these limited functionality, mobile-only sites now seem obsolete, they are also trapping users in an environment that makes completing a task online confusing or impossible.

From this perspective, RWD becomes a no-brainer; do you want to limit content and functionality or, provide a consistent brand experience regardless of the device used to access the site? Additionally, how do you keep up with the mobile device explosion? Resolutions and device types continue to change and broaden. Iterating designs for each device or screen resolution would either be an endless game of catch-up or next to impossible to do. An RWD approach currently offers the best solution to these problems. When executed properly, a responsive design will work seamlessly across all screen types and, as a result, make updating content a snap. However, as many design teams are less experienced with the new fluid grids and all-in-one approach, there are often some usability hurtles to overcome.

Below are some of the most common usability issues we have seen when testing Responsive Web Designs (RWD):

1. Many feel that design RWD design should start with the mobile experience, but this can lead to a less than satisfying desktop experience.

While RWD lends itself to a simplified design style that maximizes flexibility, the mobile-first focus can lead to a desktop experience that does not seem as robust in comparison to user expectations. Users can find the scaled-back design lacks the professional feeling they seek in order to trust a website or work effectively and efficiently with what they expect from the brands they know.

While many designers do not want to “hide” content on smaller screen resolutions, there are times when this approach makes the most sense, for example, to achieve a complete and professional desktop experience.

The Boston Globe website handles this issue well; the site displays additional menus and graphics on the desktop version, but hides them on the mobile version. This gives the best possible experience to the user regardless of how they access the site.

2. Device-specific conventions do not always make sense outside of that device.

The settings menu is a prominent example. While the convention of a gear icon is easily understood in mobile, it is not conventional within the desktop experience. Even some experienced mobile users are unable to find and expand a menu using this icon from the desktop. Unlike on the desktop, users can easily find the icon within the mobile experience; therefore, context matters. For example, an icon with three horizontal lines indicates it is the menu. However, while many users may intuitively identify and understand this icon on a mobile device, they may not necessarily be able to do the same on the comparable desktop version.

Starbucks is an example of a navigation menu done right. On the desktop version, a traditional horizontal navigation menu drops down and displays subcategories. This dropdown allows for quick navigation to lower level pages of interest. The menu moves behind an easily recognizable icon when the site is resized. Here, it becomes a streamlined version of the menu with only main level categories available.

This example from Sony is an even better example. On the mobile version, they use the word ‘Menu’ as the icon label making it even easier for users to find:

3. Usability guidelines apply regardless of how users enter the site.

While we have covered basic usability guidelines before in our blog, it is still important to apply them to new designs as well. In fact, it may be helpful to revisit them to ensure users can adjust seamlessly to the new versions of your site. Here are a few places where usability principles are not being applied in responsive designs:

Disney’s website is an example. Regardless of how you enter their website, it is easy to get lost once the menu is opened. On the desktop, it drops to cover the page whereas on the mobile, it moves to the left to accommodate the menu. Again, the menu gives no indication of one’s location on the site. Also note here that we lose the site logo and therefore the visibility of the brand.

Grey Goose is another example of a site that does not adapt well to mobile. Sure, this looks like an elegantly designed website; however, when viewed on mobile devices, it lacks the ability to navigate between the main stories. To boot, the page break makes it unclear that stories are available below the fold. Unfortunately, as a result, many users may miss the gorgeous photography beautifully displayed in the desktop version:

While Crayola also designed an excellent responsive site, they forgot to speak in their customers’ language. For example, labeling their ‘Main Navigation’, just that – is not a particularly customer-friendly way of talking to consumers:

Many RWD with clear call-to-action buttons often mistakenly place this vital part of the page below the fold on smaller resolution screens. For example, Burst Creative’s site has their ‘Get Started’ button front and center on the desktop layout; however, for those accessing the site via mobile, the call-to-action is at the bottom of the page.

Now, compare Burst Creative’s site to Lanyrd.com, where the call-to-action always remains above the fold. The World Wildlife Federation (WWF) site is another example where the key calls-to-action, “Donate” and “Adopt”, always remain visible at the top of the page. These two buttons stand out on both designs and are never collapsed or deprioritized on the page.

As shown in these RWD example websites, if you keep basic usability principles at the forefront of your mind when designing your site, it can offer an excellent and consistent experience for your users. Tell us how you feel about responsive design. Are you considering it for your site?

TOP 5 DO’s

1. Do keep breadcrumbs simple; extreme design or visual interest should not be the goal
2. Do keep balance in mind when designing breadcrumbs: they must be evident enough to be useful, but not take away from the content of the page
3. Do keep the breadcrumbs close to the page content, preferably near the title of the page
4. Do make each level of the breadcrumbs a clickable link (clearly indicated using whatever color, underline, etc. link convention you are employing in your site), except for the final level, i.e., the current page
5. Do be consistent in your use of breadcrumbs – you cannot do this only for a section of your site; it must be done throughout

TOP 5 DON’TS

1. Don’t utilize breadcrumbs as a primary navigational element
2. Don’t rely on breadcrumbs to make up for poor main navigation options or navigation placement
3. Don’t dynamically change breadcrumbs to match a user’s path except when displaying customized information such as applied filters; base breadcrumbs on the site’s hierarchy
4. Don’t allow breadcrumbs to be a source of confusion; if your site has many cross-links and pages fit into a variety of categories, breadcrumbing may not be a good option for you as it might create confusion rather than eliminate it
5. Do not substitute breadcrumbs for the page heading / title; breadcrumbs should be secondary to the content of the page and the page should be able to function even if the breadcrumbs are taken away

With new media outlets like smartphones and tablets changing the way we design websites, one must find somewhere to start. We’d like to know where you’re investing your efforts. Is the future of your website going to offer a web app (mobile site), native app (downloaded app), or both?

Faster, Better, Cheaper. This has been the mantra of the Internet since the late 1990s to save us time and money by shopping online versus in-store. And for over a decade, this mantra has held true. Consumers are hooked on online shopping. Despite the economic downturn in 2008, and leading into 2009, sales among the Top 500 online retailers continued to grow - increasing 11.7% - while total in-store retail sales only grew 1.4% according to Internet Retailer. In addition, among 41 of the 50 biggest retail chains, e-commerce revenue increased, while in-store revenue declined.

While online retailers are not immune to the economic downturn, they are somewhat protected compared to their brick-and-mortar counterparts. The costs to maintain a website are significantly lower than the costs to manage, stock, and staff a retail store. As a result, some retailers have not weathered the storm, most notably Circuit City who declared bankruptcy last year. However, savvy online retailers continue to survive.

Amazon.com reigns as the leading online retailer, showing a 30% increase in web sales last year to $19.2 billion. Amazon is king because it continues to expand and add new retail categories year over year. Amazon also has the benefit of carrying and cross-selling multiple products and multiple brands. Amazon is the one-stop-shop e-tailer for you name it: books, clothing, electronics, sporting equipment, garden supplies, etc. Amazon represents products and brands in over 75 retail categories and is continuing to expand with its recent acquisition of Zappos.

Other brick-and-mortar retailers have been working every angle to increase Web sales through Internet exclusives, daily deals, 2-for-1 promotions, free shipping, and loyalty programs. While these perks may offer some short-term gains, they do not guarantee long-term stability. The retail leaders that will withstand the test of time are those that are thinking Faster, Better, Cheaper for a new generation.

Amazon is obviously on to something = one-stop-shopping. Are brick-and-mortar retailers up to the challenge? Who will survive in this marketplace and still deliver a Faster, Better, Cheaper Web experience for the next generation?

Gap Inc. has taken on this challenge. Internet shoppers are tired of multiple usernames, multiple passwords, multiple emails, and now multiple credit cards to avoid spam and identify theft when shopping online. Gap has responded to this pain and consolidated its Web presence across its 5 major brands, including Gap, Old Navy, BananaRepublic, Piperlime, and Atletica under one umbrella site, Gap.com. This consolidated website not only allows users to browse all Gap Inc. brands within one single user session, but also leverages one global shopping cart for all brands. This offers a significant improvement for the customer experience by eliminating the need for multiple usernames and passwords, with one universal login, and offers a seemless checkout process with one flat shipping rate.

In addition, this consolidation offers a significant opportunity for Gap Inc. to diversify its audience and cross-sell brands to all visitors, for example introducing Old Navy to Banana Republic shoppers and vice versa. Moreover, the company can leverage cross-promotion of deals across brands, benefiting from larger transaction sizes, such as offering free shipping for all brands if a Piperlime product is added to the shopping cart.

With Gap Inc.’s e-commerce revenue increasing 15% in the first half of ‘09 to $491 million from $427 million in ‘08, while offline sales declined, Gap understands the power of online. Gap’s brick-and-mortar counterparts can benefit from this lesson on website consolidation. Williams-Sonoma’s e-commerce revenue decreased by 21.9% in the first half of ‘09, from $507 million in ‘08 to $404 million in ‘09. Opportunity exists for Williams-Sonoma’s brands including Williams-Sonoma, PotteryBarn, PotteryBarn Kids, PB teens, and Williams-Sonoma Home, to follow Gap Inc.’s lead.

So Gap Inc. is on to something = consolidated-shopping (aka one-stop-shopping). This evolution may not become the new mantra for the Internet, but it will be the foundation for delivering a Faster, Better, Cheaper web experience for both consumers and businesses alike in the next generation.

Contact us with questions!

Last week, Skittles launched a radical new marketing campaign designed to take advantage of social media and harness user-generated content in a way not done before by a consumer brand.  The company replaced its Website, almost exclusively, with user-generated content.  Initially, Twitter became the site’s home page, but the company had to shift strategy after some “tweets” became profane and inappropriate.  The company has been changing the site it uses as its home page, first Facebook, then the Wikipedia entry dedicated to Skittles and, now, YouTube.  Skittles provides the information architecture for the site, but the majority of the links head to user-generated content.

This strategy took to an extreme the type of idea Aaron addressed in his blog post on the necessity of a home page, by asking, “Does a consumer products company need to generate its own content?”  While the final analysis has yet to be done on this campaign and its success, it is an interesting and in my opinion, a worthwhile experiment.

The site has certainly gotten people all over the Web talking about Skittles!  As CPG companies contemplate how to make their Websites relevant, I think the Skittles experiment can serve as a reminder to be thinking about the Web in a different way – to create brand ambassadors by incorporating user-generated content and collecting feedback in any form in which they choose to offer it.  This method, unfortunately, can backfire if the supposed brand ambassadors are not actually proponents. That said, one wonders if negative buzz is ever really negative. Even if I say that I don’t like Skittles, someone else may fervently disagree and go out and buy 20 packages!

I think Skittles has provided an interesting glimpse into the next generation of Websites, but has also demonstrated that there is still a lot of work to be done to determine how best to capture and employ the on-going online conversation about a brand in a meaningful and powerful way.

We want to know - what do you think about the campaign?  Tell us in your comments below!

eVOC Home Page

These days the chances are very high that users will not first experience your site on your home page. Any page that a search crawler can find is up for grabs. It’s a bit like having a supermarket with no walls. A shopper can walk in at any aisle to pick up the milk or eggs then walk right back out without ever bothering with the rest of your store. So what’s the point of having a front door?

Bleeding edge design gurus and product managers have started making the argument that home pages are now much less relevant in relation to the rest of your site design. Because you can’t control the point of entry, all landing pages need to serve the basic functions of a home page. They contend that the days of the home page being the most valuable real estate in the world are fading fast.

Traditionally a home page has 3 primary functions.

1. Identify to the user who you are
2. Explain what content the site offers
3. Point users in the right direction to get what they want

Can other pages achieve this? Sure. Does that fact make home pages irrelevant? No. A home page does one thing that other pages can’t do: it lets users compare the possibilities on your site in a way that is difficult to replicate on specific content pages. A home page is your user’s way of “zooming out” to get a 30,000 ft view of what’s on your site. Not having this capability means users would be at the mercy of your site’s search engine; if the results don’t deliver, the user is gone because there’s no alternative.

Usability guru Jakob Nielsen has found through his research that people still look for and expect a home page.

“A website is like a house in which every window is also a door: People can follow links from search engines and other websites that reach deep inside your site. However, one of the first things these users do after arriving at a new site is go to the homepage.”

–Alertbox Column

Google’s not perfect. Depending on site structure, users can end up close, but not exactly where they want to be. If you’ve done a good job representing who you are and what the site offers on any given page, users will be encouraged to engage your site. The user’s thought process should go, “Ok, this isn’t exactly right, but this site is promising. I’ll browse a bit. What else is here?”

Most major online brands such as Amazon and eBay still have pages that serve these functions, even if they might not call them home pages anymore. Ultimately, you can’t afford to neglect your home page because most users expect something that lets them step back and get oriented.

Rather than thinking of home pages as being less relevant, we suggest giving the home page and landing pages equal treatment when planning a site. As you go through the process of evaluating your users’ experience on your site, here are few things to keep in mind:

This will help make sure that no matter the entry point, you are delivering a consistent unified experience.