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!

There is no doubt we all want our websites to be attractive - captivating users and providing visual interest. However, it is important that the visual interest created on a site work with and enhance the usability of the site, rather than detract from it. Often we think of the aesthetics of a site as separate from the usability elements, but they have to work together to create a site that both captures and enhances your brand, attracts and interests users and allows them to easily complete the task at hand on the site. In order to identify the best practices for developing a look and feel that enhances the user experience, we will take a look at the guidelines which make up aesthetic integrity:

1. Uses a clear visual hierarchy with graphic elements and visual cues to help users
   • This guideline should influence all aspects of the design of your site, beginning with the home page. Icons, images, color and text (font, size, etc.) should all come together, not only to present a visually appealing home page, but one that is easily scanned and understood. Users should be able to comprehend who you are as a company and what is most important to you from how you use the visual elements on the home page to introduce yourself and your value proposition.
   • These elements should also be used throughout the site for the same purposes - highlighting key content, making pages easy to scan and understand and demonstrating to users the key navigational features and their position within the site.

   

2. Site is scalable for multiple resolutions
   • It is vital to understand how a user is going to view your site - will they be able to see and experience all of the work you put into creating a visually interesting design based on the first guideline? Or will they have to scroll both up and down and sideways to view the whole page?
     • In order to address this most effectively, you need to understand the screen resolutions of those coming to your site. Many of us who are online all day looking at a wide screen monitor built in the past few years sometimes forget that there are people who still have their screen resolution set to 600×800 or 1024×768. This may or may not be a factor for you and your target audience, but it could be which is why you need to understand how your targets are accessing your site.
     • Based on what you know about your target base you can decide which screen resolutions you need to accommodate, but blindly assuming you only need to design for higher resolutions without knowing who is coming to your site can be a costly mistake.
   • Understanding these traffic patterns is even more important with the increase in mobile and tablet traffic. Understanding what portion of your traffic is currently coming from these devices as well as what the growth pattern for your target might be over the next few years can inform your strategy for mobile site / app development and the need for site compatibility with devices like the iPad or Kindle Fire.

   

3. Photos are relevant to the value proposition and content and are accompanied by text that is readable and relevant
   • Incorporating images into your site is important, but doing it correctly can be difficult. Images should draw a user in and help set the tone of the site, but they should not impede a user’s ability to access information or complete a task. Often in testing, we see that by not selecting the right image or placing it poorly within the page design, photographs and images can sidetrack a user or have unintended consequences. So a few things to consider when selecting and adding images to your site design:
     • The image should be clear and easy to understand. You do not want users staring at an image trying to interpret what is going on in the image or what it has to do with your company or its value proposition. These should be immediately clear. Where necessary, images should be labeled or include explanatory text in an easy to see and read font.
     • Images, especially photographs, when they include people should be diverse in terms of age, gender, race, etc. and show a wide cross-section of your target. We have seen far too often users react to a home page image, saying “Oh, this site doesn’t look like it’s meant for me. All I see are older women.”
     • Images should not overwhelm a page. The sizing and placement of images is key to either inviting users to explore a page or creating a roadblock to access. Images should not push key content below the fold of the page, making it unclear if there is information below the image that is worth scrolling for. Indeed, images can be used to help users know there is more on the page, but showing some, but not all of the image above the fold, you can invite users to scroll to see more.
     • Images can also be used to break up and provide interest to text heavy pages. Users tend to scan rather than read most web pages. Images can help guide them to content of interest and provide visual breaks that allow the eye to more readily move through a page.
   • Again, it is also important to make the images relevant and not just a visual element on the page - make them have meaning to a consumer. Following are 2 examples one site that does not do this and another that uses images in an innovative way:

   
   

4. Limits animation; if offered, allow the option to control it
   • I’m sure most of us can remember a time when Flash splash pages were all the rage on the web. While designers got to show off on these pages, for the most part, they were a usability mistake. Users were forced to watch an animation that might not be of interest to them, some with sound (and no sound controls) and then had to click just to begin the exploration of a site they had already requested. It’s easy to see why this is not the web standard today. Still, while animation can be an effective tool to help a site come to life, demonstrate a complicated concept or simply put more information in front of a user, too often it remains a misused tool with the most common issue being lack of user control of the element. So how do you implement animated elements correctly on your site?
     • Use animation with a purpose, not for the sake of doing something cool.
     • Allow the user to control the animation, with stopping or pausing capabilities and sound controls, including a very clear and easy to access “Mute” option
     • If you are providing different content, say in a Flash animation on your home page, provide users a way to navigate back to a story or element of interest to them without them having to either wait for it to come around again or to guess which of the 4 stories it is.
     • Make it clear how long an animation or video element will run. This will allow users to decide how they want to interact with it.

   

5. Content and promotions are not mistaken for ads; are relevant and compelling
   • When testing websites, we often see site designers place attractive images highlighting important content or promotions on the right side of a page. Then, when users do not find the content, many site owners are surprised as it is often exactly what they are looking for and it is presented in an attractive and visually appealing manner. So what went wrong? Users often mistake images on the right of a web page for advertising or promotional content and have trained themselves not to pay much attention to any item in that area that appears to be an ad. So what can you do to overcome this bias?
     • First, if your site does include advertising, clearly label it as such. Make sure users know when they are seeing ads.
     • Secondly, make the content look like content, not like a tile ad. Do not have the promotion or content take the same shape as the advertising you see elsewhere.
     • Next, ensure that the content or promotion is visually integrated into the page using colors, fonts, and imagery that is consistent with the look and feel of your page so it appears to be a continuation rather than a standalone component, separate from the site itself.
     • Finally, do not place unimportant content in the same area as key promotions or content. You do not want to clutter areas users may naturally overlook or train them that this area of your site will not contain content of interest to them and have them overlook important features.
   

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

One of the challenges most sites face is that there is an excess of information they need to convey – value proposition, marketing messaging, product information, social media and more. When trying to fit this all into a single site – and, often, on a single page – sites can become cluttered and difficult to read, frustrating customers and prospects visiting your site. So how do you balance the needs of the company to convey a wide variety of information, but still provide your customers a good experience on the site where they are able to easily accomplish what they have come to do?

Walking the line between these competing needs will be easier of you keep the following usability guidelines on simplicity and scannability in mind.

Simplicity & Scannability

1. Writing / verbiage is understandable, succinct, easy to scan, appropriate to users, and not redundant
   • While keeping the writing and verbiage used understandable may seem very basic, too often we as companies and experts in our area of focus forget that a prospect or customer may not have any base of knowledge in our space with which to place our products and services in context
     1. So, while the use of acronyms or industry-specific terms may convey exactly what we are attempting to communicate, the end user may not understand – the site needs to address all potential audiences with the language used – both someone who is new to a specific industry or product set as well as those who may need more detailed and technical information
     2. Providing overviews at a basic level with clear links to definitions of any industry-specific verbiage used will help newcomers; clear links to more technical information will satisfy the needs of those with more knowledge and experience
   • Additionally, the tone and level of the writing should be appropriate to your target audience
     1. For this, it is key to understand who is coming to your site and what they are seeking. This information can help you determine whether you should be writing at a 6th grade level or a high school level
     2. You want to make sure all users can understand your site, but that users do not feel as though they are being talked down to
     3. This balance can be particularly difficult for sites like corporate pharmaceutical websites where the needs of both a consumer and a healthcare professional must be addressed. Thinking ahead of time about the level of the writing can make the site more applicable to both audiences
   • Keeping the writing on your site succinct and easy to scan is imperative
     1. We see over and over again in testing that most users do not read sites, but rather scan for what they are looking for
     2. Most writing on a site should be in short sentences or bulleted lists – this allows users to scan the page to find the information of interest and focus only on what they are seeking, while also putting other messages that might be important to you as a company in front of them /li>
     3. As a user navigates the site, they will tell you by their actions when they are seeking more detailed information (by navigating more deeply, clicking on the links designed to provide details, etc.) which is when longer paragraphs may be appropriate to provide the depth and breadth of information the user is expecting to find
   • Finally, the writing on the site should not be redundant
     1. For most companies the issue is not having enough content, it is having too much content; Given this, you do not want to clutter your site with redundant information
     2. Utilize cross-linking and contextual linking to help users discover other site sections, products or pages, rather than talking about them in multiple places on your site

   

2. Categories are organized intuitively and are mutually exclusive
   • Categorization of the information on your site is vital – if users do not understand the categories you are using they will not find what they are looking for and they will go elsewhere – even if your content, products or services are better than the competitions’, users will never know if they do not understand how to access it
   • This is another area where it is important to think about how a prospect or customer is thinking about your company, rather than how your company is organized
   • While it may make sense to organize your site according to the divisions of your company, it may not match the mental model a user has when shopping for your product or service, so it is more important to match that model rather than your company organization
   • Avoid the type of terminology we talked about above, such as industry-specific acronyms or technical terminology that may not be understood
   • Utilize a categorization in which it is clear where all the content will fall; do not have any overlap in categories
   • If an overlap is unavoidable, provide easy cross-links to drive users from the each of the categories that could contain the information of interest to its location; do not make users move from their first choice to their second, etc. seeking the information

   

3. Appropriate amount of pagination at product list level; limits number of clicks to view products
   • While this guideline calls out product lists specifically, this applies to any key content sought from your site, be it products, articles, quotes, etc.
   • If you have long lists on your site, be sure to offer an easy way to sort, filter or move through the list to the specific item of interest; however, using multiple pages without a navigational method that allows pinpointing of the item is not a solution
   • Users need to be able to access items quickly with as few clicks and as limited scrolling as possible; this can mean utilizing tab structures or strong filtering or sorting tools that provide easy access without traversing pages of options

   

4. All navigation shall appear above the fold; pages limit scrolling and contain anchors if lengthy
   • All of the primary navigation you expect a user to discover and use as they move throughout the site should be visible without any scrolling
     1. This is especially important on the first page a user encounters on your site, which increasingly, is not necessarily the home page if entering from Google
     2. This does not mean you should not include any navigational elements lower on the page. For example, if users are reading content of interest which forces them to scroll, navigation to the next step in the process or to a call to action, such as “Book Now” should be offered at the bottom of the page; however, this is in addition to the navigation offered at the top of the page, i.e., “Book Now” should be offered for those who do and do not scroll
     3. This also may not be true for steps in a process which require scrolling, however all of the main navigation should still be above the fold
   • Lengthy pages requiring users to scroll extensively should be avoided whenever possible
     1. In situations where long pages are necessary, users must be given an alternative to scrolling
     2. Ideally, this would be tabs or some other structure that does not require a full page load, but in other cases anchor links can be used
     3. If anchor links are utilized, it must be clear to a user what is happening, i.e., they are being moved down the same page, and they must be given a clear path back to the area on the page where they made the selection. If this is not clear many users turn to the “Back” button and get lost in the site or have to make more clicks than necessary to navigate

   

5. Product details / descriptions are easily understandable
   • Not only does writing about products need to be crisp and easy to read, it must be organized in an easy to understand manner
     1. Again, limited scrolling is key and tabs can be a very clean way to organize all of the information a user has come to expect from the product details
     2. The top of the page should contain a photo and a brief overview of the information available
     3. Additional information should be clearly accessible and all of the information should be easy to scan
     4. For more detailed information on product page do’s and don’ts, See Sabrina’s blog on product detail pages in retail

   

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

“Customer experience” has become a pretty common term over the past decade. At eVOC our focus is on the online customer experience. According to Wikipedia, a customer experience (sans the online aspect) is “a customer journey which makes the customer feel happy, satisfied, justified, with a sense of being respected, served and cared, according to his/her expectation or standard, starting from first contact and through the whole relationship.”

In simplified terms, a customer experience is how customers perceive their interactions with your company.

When looking at the online customer experience definition, the experience is focused on your website - it is the intersection of your site visitors’ expectations and how well those expectations are being met. Nowadays, the online aspect melds into the mobile realm as well. Social media (e.g., Facebook, Twitter, YouTube) is also intertwined in your brand’s overall expectations and experience.

What’s interesting about considering the online dynamic of the customer experience is how much deeper impacting a negative experience can be. Do you remember the last time you decided to ditch your favorite clothing store because they were too slow at the cash register? However, you may have decided to skip visiting an e-commerce site because it was too slow. The threshold for the less personal online interaction is much lower when it comes to service, selection and efficiency. People do not mind being rude online, or impatient. Also, they can very quickly spread negative word about or post something that gets picked up and viewed by others. It can be a nasty, downward spiral. Usually more downward than upward. Most internet users have an invisible standard that they hold for how any site should perform. If it meets or exceeds the standard, then usually little happens. However, if it falls short, the consequences can be painful.

So, no pressure(!), but just remember how important the online customer experience is for creating, defining and nurturing the relationship with your customers.