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!

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

One of the most important aspects of any site is how the user can get to the information of interest. Once information architecture is considered and clearly defined, the next step is the mechanics of navigation. Users should be able to easily identify links and clickable content, use those and the feedback given by the site to move through your site with ease. To make this process as easy as possible, consider the following basic usability guidelines for navigation and feedback on your site:

Navigation & Feedback

1. Items that are clickable appear that way (navigation should have highlighting, links should be underlined, and visited links (v-links) should be in a different color
   • Links must look like links and be highly visible
     1. The main navigation, wherever it is on the page, should be immediately visible to the user by being prominent and clearly highlighted
     2. The online convention is that links are underlined, either all of the time or on roll-over or another state change, such as color change occurs on roll-over, to indicate clickability. This is important to allow users an immediate understanding of how to use your site
     3. Additionally, headlines and photos or images accompanying them are often expected to be clickable
     4. This is one area in which bucking convention for the sake of creativity can often backfire
     5. The way users surf other sites impacts how they expect to use yours, and if your navigation is unconventional and links are not clearly marked, users may abandon the site without finding what they need
   • Additionally, using color to indicate which links have been visited and which have not can help a user as they explore the site
     1. Most users do not explore a site in the specific order you have laid information out; they move immediately to the information of greatest interest to them and work from there
     2. By changing the color of visited links, you give users a map to the site, minimizing mistaken clicks and repeated content exploration

   

2. Provides clear feedback immediately, and near user actions
   • Too often on sites, users take an action - click on a button, click a link or complete a search or request only to sit looking at the screen being unsure what, if anything, happened. If they are not given any feedback this can be, not only frustrating, but also cause them to take action multiple times resulting in bad outcomes such as too many items added to their cart or, worst case scenario, multiple charges or bookings
   • If a user interacts with your site, your site needs to respond clearly to their action. This can be handled in a wide variety of ways, with a change of pages, a confirmation message, changes in colors or font, etc. Whichever method you choose a few rules apply:
     1. The feedback must be close to where the user took action. If you provide a confirmation message, but it is below the fold and the user is scrolled to the top of the page, the message is not doing its job
     2. The reaction must be obvious to the user. This is not the time for subtlety – it must be clear that the site is reacting. The user should not have to guess
     3. If the action taken is part of a process, do not allow the confirmation or reaction to take the user away from the intended path or limit their navigation in a way that could mean a smaller purchase or usage of the site. For example, when a user adds an item to his/her shopping cart, many sites take the user to the cart, but do not offer any avenue to continue shopping, potentially decreasing the size of purchase

   

3. Keeps users informed; Indicates task progression
   • Letting users know not only where they are, but how far they have to go can keep them moving through a task
   • Before beginning the process, inform users of the steps that the process includes
   • As they move through the steps, clearly indicate which step they are on, so they can track their progress
   • Keeps steps simple and only include those necessary to the process to improve completion rates

   

4. Upon completing a process, provides a confirmation screen with useful information
   • Just because a user completes an online process does not mean the overall process is complete; the confirmation page should be used to provide all necessary information for the user to understand the remainder of the process
   • This information includes:
     1. Confirmation of what has been done already and how the confirmation is being communicated in addition to the confirmation page (i.e., email)
     2. What will happen next in the process, when will it happen and who is responsible for it happening? For example, if a user has requested a quote, who will make contact – does the user need to call? If a user should expect contact, when and by whom? The user should never have to guess at how the rest of the process will play out – it should be explicitly stated for them
     3. What other options do users have from this page, can they view their order, track status, print the page or receipt, etc.? What about any offers or cross-sells? How can you keep the user engaged with your site? This is a great place to offer these items after you have made the confirmation and next steps clear

   

5. Tracks the state of the user (cookies, saved shopping carts, entered data) and acknowledges returning customers
   • It is important to users that sites recognize them so that they can complete tasks with the greatest ease
   • If you offer to remember a user, you MUST remember them; too many sites offer this option, but when users return they are not signed in. If you cannot automatically sign a user in, do not offer the option
   • Make it clear that the user has been remembered by using their name and offering a clear option for changing users if the logged in individual is not the user
   • When possible, allow the user to confirm their password to have their data pre-filled for them. Minimizing typing and streamlining processes can enhance conversion
   • If users leave items in a shopping cart, retain them there when possible
     1. If they will only be available for a specified period of time, message this to users
     2. Indicate any changes in availability or pricing when a user returns to their cart. Do not simply remove an item from the cart without letting a user know what changes have been made

Thanks for reading our guidelines on Navigation and Feedback. For more information on improving your site, please see our previous stories on best practices according to usability guidelines: Communications and Relevance, User Control and Simplicity and Scannability. Also, stay tuned to our blog and newsletter for more information on web best practices.