Blog - Articles in the ‘Uncategorized’ Category


Web Usability Best Practices: Navigation & Feedback

December 14th, 2011
by Stacey Crisler


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.

  • Share/Bookmark

Website Usability Best Practices: Simplicity & Scannability

November 16th, 2011
by Stacey Crisler


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
  6. 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.

  • Share/Bookmark

Retail E-Commerce Usability Part 4: Making the Most Out of Quick Look

September 20th, 2011
by sabrina.shimada


How can you get your customers to the shopping cart faster?

In an attempt to get users to shop faster, many online retailers have added a “Quick Look” feature that allows customers to remain on the multi-product page while adding an item to their virtual shopping cart. In my opinion, this feature is extremely useful when shopping online and has the potential to increase sales.

Think about it. If users can find out the information they need about a product and add it to their shopping cart whilst remaining on the same page, they:

  • can make a quicker decision about whether the product is right for them or not (meaning they can move onto another product faster)
  • do not need to wait for the page to load
  • do not need to click back in their browser to get back to the multi-product page
  • do not lose their place on the multi-product page

However, there a few key rules that need to be followed to ensure that your Quick Look feature is effective.

  1. Show it off - Make sure users know that the Quick Look feature is available on your site by simply putting the text at the bottom of each product image or by having the text appear when the customer hovers over the product.
  2. Make it More than a Look - To make your Quick Look feature as effective as possible, it should have the following:
    • Item description
    • Item details (e.g., content, place of manufacturer, care instructions , specifications, special features, weight, parts included, etc.)
    • Alternate views of the product including a zoom feature
    • Alternate colors/styles available (Name and image or swatch)
    • Available sizes and inventory status
    • Add to shopping cart option
    • Add to wish list option (if applicable)
    • User rating (if applicable)
    • Sharing options (e.g., Email a friend, Facebook, Twitter, etc.)
  3. Let’s take a look at the online retailer ModCloth.com for an example of best practices when it comes to the Quick Look feature.

    The only thing missing from ModCloth.com’s Quick Look feature is an option to go straight to the shopping cart (See Anthropologie.com example).

  4. Keep it Quick! - One of the most obvious mistakes that retail e-commerce websites make is bringing users to their shopping cart immediately after they have added an item. Would you want to take the items you shop for to the register one by one? Show customers that their shopping cart has been updated, but don’t force them to go there until they are ready .Don’t waste their precious time!

A different way to quick look…

Now that we have looked at what makes an effective quick look tool, let’s take a quick look at a less conventional quick look feature, that is still effective.

Neiman Marcus has created an elegant quick look tool in their Beta website redesign. Instead of a pop-up that opens on top of products, the quick look information unrolls itself within the browser, revealing additional views, product name, available sizes and colors, and the option to place the item in the customer’s shopping bag.

While there are a few things missing from this quick look feature, it is still a great example of how the quick look pop-up can be aesthetically changed to match the users’ taste (Can you see what’s missing?).

Remember, usability and design go hand in hand! Added features that don’t work only clutter a website and confuse users. Make sure your site is usable. Contact us for more information about our research and testing services.

  • Share/Bookmark

Expanded Footer Usability

August 17th, 2011
by Stacey Crisler


Over the past few years, expanded home page footers have become de rigueur for sites for their search engine optimization (SEO) benefits. If done correctly, the expanded footer can also play a role in enhanced usability of your website - that is, if basic usability principles are not thrown to the wind in the name of SEO.
There are multiple usability benefits to the expanded footer driven by the ability to provide your visitor access to content that may not be easily accessed or addressed in your main navigation.
    ­

  • The footer can provide links deeper into your site and to particular content areas of interest to visitors
  • ­By doing this it can take the place of an outdated concept of a site map and reduce the need for visitors to turn to the search engine to find specific content of interest.
  • ­
  • It can also be an area to place links (such as a store locator), short forms (such as for contact) or icons (such as for social media) that do not have a place in the main body of the page and may be crowded in the utility link area in the upper right.
  • ­
  • The footer can also be used for showing a little more personality, providing links to frequently updated content like a blog or events and a quick way to contact a company by providing detailed contact information or a simple form.
However, in order to gain these benefits, the footer must be executed correctly. Following are the top five usability do’s and don’ts to think about for the expanded footer on your site:

TOP 5 DO’S

  1. Do remember any element of the page can and will be viewed by visitors – not just search engine crawlers
  2. Do apply a hierarchy or categorization of the links and functionality provided in the footer
  3. Do make the area readable and easy to scan
  4. Do provide clear visual separation of the footer from the main content on the page
  5. Do utilize different font types, icons, etc. to make the links standout and provide visualize interest to draw visitors to this area of the page

TOP 5 DONT’S

  1. Don’t just repeat your main navigation at the bottom of the page
  2. Don’t use the footer as a solution for poor site information architecture
  3. Don’t include content below the footer
  4. Don’t create a visual barrier above the footer that would prevent visitors from viewing it as a value-added section of the website
  5. Don’t overfill the footer – edit it to key information and functionality that is easily categorized and set out in a well-organized manner
Below are some examples of sites both employing and ignoring some of the do’s and don’ts above.
The expanded footer on Horchow.com is a great example of using the footer to drive traffic to compelling site areas that visitors may not find via the main navigation, if only there weren’t a visual barrier above it:

On our own site, we took our own advice to create this footer:

On the other hand, Kayak.com takes no advantage of their footer as a help to visitors, but just fills it with terms for SEO:

Match.com offers a footer which at first works, but then follows it with content that is cluttered, difficult to read, and generally appears more like a document than a website:

Just because the footer is the tail end of your page and you may be utilizing it primarily for SEO, doesn’t mean you can’t use it to also enhance the customer experience on the site. Expanded footer usability can be important and useful in optimizing your site’s usability and SEO.
Read more about the basic usability practices you should be employing everywhere on your site in our Web Usability 101 article.
  • Share/Bookmark

Retail E-Commerce Usability Part 3: Just Browsing

July 26th, 2011
by sabrina.shimada


The web is filled with less-than-ideal retail e-commerce websites that are losing dollars over simple design flaws. This blog series shares tips on retail e-commerce usability, covering how to improve different parts of a retail e-commerce website.

Power Browsing

A customer can walk around a department store and look for a pair of shorts for several hours. Are the shorts all kept in one area? No, they are dispersed among different designers. Are all of the designers in one area? No, they are categorized by targeted age group or price range. Is everything available out on the floor? Of course not! There is a stock room full of merchandise and multiple stores across the country or around the world that might have the pair of shorts in the size and color you are looking for.

Online shopping gives retailers the advantage to let customers find what they want without leaving their chair. That is if the site’s navigation system and design doesn’t hide it from them.

Here are a few tips on how to make browsing on a retail ecommerce site useful.

1. Let Customers Refine their Browse

  • After choosing a main category to shop under, it is ideal for a user to be able to refine the selection they have made.
      - The most common way to do this is by including a left navigation that reveals all of the different options the user can check/uncheck, with the items re-populating based on the customer’s selections- A more recent change on retail ecommerce websites is the mega drop-down menu that doesn’t appear until the user clicks on a header category.

2. Let them Sort!

  • Offer “Sort By” options in addition to the filters to give the users a chance to explore by price, relevancy, popularity, designer, style, etc.

3. Viewing Options

  • All sites should know this by now. Let users choose how many items they want to see on a page at one time. A “View All” option should always be available to users when categories of items have say 200 items or fewer.

4. More than Breadcrumbs

  • When you are using filtering systems it is important to clearly display what categories have already been chosen by the user to prevent them from getting lost in their browse.
  • A clear path between product pages and the user’s browse (with customized selections/sorts) should always be available (e.g., “Back to Results”)
  • Customers should have the option to deselect categories and clear all the selections with one click.

5. Show the Customer’s Progress

  • Don’t let customers drown in merchandise - let them know how many pages you are going to show them and where they are at all times (e.g., “Showing 75-95 of 560 items,” “Page 13 of 62″).

6. Back and Forth Action

  • Make sure users can add items to their shopping cart and return to where they were in their personalized search.

While there are many more specific attributes you can use to improve your retail e-commerce website’s browsing function, remember that the main goal is keep the customer on the purchase pathway. Always consider how you can make your website easier to shop and easier to use!

For more on usability tips click here, or contact us for more information about our services.

 

  • Share/Bookmark

Retail E-Commerce Usability Part 2: Search!

July 7th, 2011
by sabrina.shimada


The web is filled with less-than-ideal retail e-commerce websites that are losing dollars over simple design flaws. This blog series shares tips on retail e-commerce usability, covering how to improve different parts of a retail e-commerce website.

Ready, set, search!

Let’s say you are looking for a new belt. If you walk into a large department store (that you have never been to before) where will you go first? Some of you will walk around looking for the right department, maybe try to find the directory and some of you will ask a customer service representative, “Where are the belts?”

Not everyone likes to browse. In fact, a lot of online customers have an idea of what they are looking for when they come to your retail website. Some customers will go straight to the search box, meaning this tool does not only have to be easy to find, but it must be effective.

Here are a few tips on making your search box and search results usable!

1. Search Boxes Belong On Top

  • Usability guru, Jacob Nielson, did a study that revealed 56% of users look for the search box in the upper right hand corner, while 44% look for it in the upper left. In other words, these are your ideal two options for the search box location.

2. Search Boxes & Action Buttons should be Simple

  • Keep the design as simple as possible and don’t forget to include an action button to let users “Search,” “Find,” “Go,” or “Submit.”

 

3. Maintain the Homepage Navigational Framework

  • Keep the search results within your website’s main framework so users can easily navigate to another area after they are done viewing the search results.

4. Show Customers What They’re Searching For!

  • Reiterate the search text on the results page so users can confirm their search.
  • Make sure your search results are accurate!
  • Unless you are selling fonts, you should use images in the search results. This way,
    customers can immediately start shopping.

5. Give Customers the Power to Refine

  • By giving customers ways to refine their search results, you are improving their chances of finding something they want to buy.

6. Make Something out of Nothing

  • Instead of showing users a dead-end page that says “No Matches Found” or “Better Luck Next Time,” show them the closest thing you’ve got.
  • Break down search terms when “No Matches” are found so users are still on the path towards a purchase.

7. Show Them What’s Relevant

  • One of the most important aspects of the search tool is that is works. Customers are expecting to see relevant items related to the search terms they submit. In order to keep your search effective, make sure that all items are tagged properly. It is also a good idea to offer “Sort by Relevance” so that users know you are showing them a wider range of products for their benefit.

Applying these tips on search and search results will increase the usability of any retail e-commerce website. After all, how will customers make a purchase if they can’t find what they are looking for?

For more tips on retail e-commerce usability, check out more from this series.

  • Share/Bookmark

Usability Week Recap: Day 2 - Mobile User Experience

June 29th, 2011
by sabrina.shimada


USABILITY WEEK 2011 Continued…
Last week, eVOC attended Usability Week 2011, a conference organized by the UX consulting and research firm Nielsen Norman Group (NNG). My colleague Phil and I split up to tackle full day tutorials on Mobile User Experience. Click here to read his post about Day 1 – ‘Mobile User Experience 1: Usability of Websites and Apps on Mobile Devices’.

My agenda for Day 2 included four cups of coffee and a full day tutorial titled ‘Mobile User Experience 2: Touchscreen Application Usability,’ led by Raluca Budiu, a User Experience Specialist with Nielsen Norman Group. Besides Raluca, it seemed there were very few usability or customer experience professionals in the room, but mostly designers and developers hoping to get some direction on how to design for the mobile customer experience.

My 2 Cents

Overall, day 2 focused on the do’s and do not’s of mobile design. I was impressed with how many aspects of mobile design were covered, but can’t say I was surprised by many of the points made. Here I’d like to share with you 10 of the most important mobile best practices (in my opinion) pulled from the 147 provided by Nielsen Norman Group, along with my own 2 cents.

1.  “Detect if the user is coming from a mobile phone and redirect him or her.”

  • Put your best foot forward, why make users struggle with your regular site if you have a mobile one? That being said, it should be easy for the user to navigate from your mobile site to your regular site, vice versa.

    2.  “Keep launch time to a minimum.”

    • There are hundreds of apps and endless ways to kill time on a mobile phone. If your mobile site or application takes forever to launch, what makes you think users will wait? The user may be intrigued enough to wait the first time they use the site or application, but after learning that it takes too long (for some it’s seconds) they may never return.  I know I’ve ditched slow launching apps, what about you?

      3.  “Respect platform conventions.”

      • Throughout the tutorial, Raluca asked the audience to analyze various mobile sites and applications, asking us to identify the good and the bad aspects of the different designs. I found that many designs for the iPad failed to take advantage of its screen space, so make sure you respect platform conventions!

        4.  “Avoid requiring users to login or register unless absolutely necessary.”

        • This is an issue of ease and time. If you are going to require a log-in, there better be a point. Is there valuable information that needs to be saved in the users’ account? Or are you just trying to build a mailing list?

          5.  “Minimize user input by using techniques such as autocomplete, suggestions, sensible defaults (based on user history or current context).”

          • Using a small keypad or touchscreen is not as easy as typing on a keyboard, make life easier for your users by reading their minds! Instead of requiring lots of typing, I think giving suggestions or providing options that require a simple tap can make or break its usability.

          6.  “Allow saving and sharing of content seen during session (e.g., email, Facebook, wish lists).

          • Personally, I find myself finishing most of productive activity that I started on my phone on my laptop. Being able to save drafts, lists, etc. to access at a later time or even on the regular website is beneficial to users.

              7.  “Make sure that all content is available both in landscape and portrait mode.”

              • Remember, mobile devices are MOBILE, they move, thus your designs should work with the user and be able to move with the direction of the screen. This means portrait and landscape for phones and all four orientations for the iPad.

                8.  “Make sure users can easily turn notifications on/off.”

                • Phones ring, vibrate, and ping enough – don’t bother your users.

                  9.  “Users should be able to use your app without reading instructions or a manual.”

                  • If you want users to use your app, make it usable. It’s that simple.

                  10.  “Save state within app, so that if the user returns to a previously visited tab they see the same data they were looking at last time when they visited the tab.”

                  • This is vital when it comes to mobile devices because users are constantly going back and forth between using their device as well as hopping from app to app. It’s important to remember how mobile devices are used differently than computers – mobile users are often on the move vs. sitting down.

                    As always with best practices, there are general rules and then rules that are specific to your industry, customer base, and media platform. If you are interested in testing the usability of your site or application on a mobile device, please visit our page on usability testing for mobile devices and don’t hesitate to contact us to find out more.

                    • Share/Bookmark

                    Introducing a New Blog Series!
                    The Adventures of Phil, “Usabili-Dweeb”

                    March 15th, 2010
                    by Phil Scarampi


                    Here at eVOC, we spend the majority of our time focusing on online usability; whether it’s websites, products, or mobile apps, we consider ourselves experts in the customer experience online. And we’re really proud of that!

                    But when this passion of ours starts to seep into the world outside the Web, we officially morph from experts into…

                    USABILI-DWEEBS

                    Usabili-Dweeb
                    It’s ironic that we can be considered dweeby as soon as we extend our craft away from the computer. After all, when you think of a dweeb, don’t you think of this guy, always at the computer? But the Internet has become such an integral part of doing business and getting things done, that our dweeby computer and web knowledge is now actually considered an advantage rather than an object of ridicule. And that’s OK with us – especially since “experts” sounds more professional than “dweebs.”

                    From “dweeb” to “expert”…who’s laughing now?

                    A few times a month, as your resident Usabili-Dweeb, I’ll give an example of a real-world usability problem that I’ve encountered outside the job. In each case, someone will be failing to adhere to basic design principles that apply to the real world in the same way that they apply to the Web. I hope these examples help steer you towards best practices that can be applied to your websites.

                    In this edition…

                    Week 1: Going Up?

                    Our office is on the 16th floor of a historic building in downtown San Francisco. Recently, they updated all of the lighting in the lobby, which included the fixtures next to and above the 8 elevator doors.

                    Lobby: Before Lobby: After

                    Before:

                    • Indicator light was mounted to the right of each elevator on one side, and to the left on the other
                      • Upper half turned white when it was going up
                      • Lower half turned red when it was going down
                    • One cause for confusion
                      • Did each light refer to the elevator on the left or the right? (Severity: Moderate)

                    After:

                    • Indicator light is mounted above each elevator
                      • Entire light turns white when it’s going up
                      • Entire light turns red when it’s going down
                    • Bright wall lights hang between each elevator (also white)
                    • 4 causes for confusion
                      • New elevator lights are very dim in comparison to wall lights and are hard to see (Severity: High)
                      • Dinging noise of arriving elevator is now quieter, making it more difficult to know which one to walk towards (Severity: High)
                      • All wall-mounted lights are the same color (white), causing a delay in figuring out which one is lit (Severity: High)
                      • For those new to the building, it is unclear whether the white indicator light signifies a direction, or just that the elevator is open (Severity: Low)

                    Bring in the Usabili-Dweebs

                    The changes they’ve made have really bothered us Usabili-Dweebs, so much so that we have mentioned it to the folks at the front desk (they hate us). We told them that the new design violates usability principles in the following 3 categories (shameless plug: these are some of the metrics upon which we evaluate websites when we do heuristic expert reviews).

                    1. Aesthetic Integrity
                    Is there a clear visual hierarchy with graphic elements and visual cues to help users?
                    – Nope.

                    2. Feedback
                    Does the design keep users informed and indicate task progression?
                    – Not very well.

                    3. Communication & Relevance
                    Can users rely on recognition rather than recall?
                    – Definitely not.

                    So how does this apply to a website?

                    Let’s run through the above 3 usability principles again.

                    Let’s start with aesthetic integrity: Just as it’s crucial for people to quickly access their desired floor in a building, you want to make sure that users click on a link, view a promotion, find information, or purchase something on your website. It is imperative that the visual cues are clear so that your site visitors are not lost or delayed. Because, unlike in the office building, they might get so frustrated they actually leave.

                    Feedback: People must be well informed of what happens during a process. A good example of this is online checkout: users want to know what step they’re on, how far they’ve come, and how far they have to go. Feedback also helps orient them on the site. When I’m standing in the lobby and I don’t know how long I have to wait or where I need to go, I get frustrated.

                    And communication: Any site has to be learned to some extent. But if users have to remember where things are, even after coming to the site time and time again, the site is not intuitive enough. Similarly, when I walk into my building and push the elevator button, I can’t easily recognize where the arriving elevator is, and it takes me a few seconds to figure it out every time.

                    In closing

                    Many of the guidelines we use to evaluate websites apply very well to real-world examples. Perhaps this isn’t such a surprise. After all, the online realm was created to mimic, simplify, and enhance our real-world experiences. So it’s only natural that we can apply so many of our web-based design and usability principles to our own lives.

                    In the coming weeks, look for more real-world examples of common usability problems – from me, the Usabili-Dweeb! And if you happen to run into any dweebs out there, please do not take my lunch money.

                    • Share/Bookmark

                    World Usability Day at FedEx

                    November 17th, 2009
                    by Aaron Fries


                    Liz Webb and Cheryl Jordan-Aguilera traveled to FedEx Headquarters in Memphis last week for World Usability Day. FedEx’s newly created Digital User Experience Team organized a day-long conference for Fed Ex Employees focused on Usability and User Experience Research Methods and Practices.

                    World Usability day at FedEx

                    FedEx invited 10 key vendors to provide lectures as well as informative sessions on various research techniques and discuss how usability impacts day-to-day life for marketers as well as consumers. Liz led 2 sessions during the conference, the first on eye tracking and its applications to websites, advertising and email marketing. The second session focused on measuring online brand and ROI. eVOC Insights enjoyed being part of such a well organized and educational event . World Usability Day was celebrated on November 12 and included 200 events taking place in 43 countries.

                    • Share/Bookmark

                    Our Services

                    Web Based Testing

                    Website Evaluation

                    Competitive Assessment

                    Intercept Survey

                    Prototype Testing

                    Home Page Survey

                    Brand & Concept Test

                    Open Web Research

                    Online Benchmarking


                    Consulting Services

                    Expert UI-Review

                    UI Consulting

                    Lab Based Testing

                    Usability Testing

                    Focus Groups

                    Eye Tracking

                    In-Depth Interviews

                    Card Sorting

                    Persona Research

                    Featured Articles

                    Usability 101

                    Methodology Spotlight

                    E-commerce Usability

                    Website Usability Testing

                    Our Expertise

                    Industries

                    Benchmarks

                    Case Studies

                    About Us

                    Management Team

                    Partners

                    News & Events

                    Contact Us

                    415-439-8333

                    sales@evocinsights.com

                    Connect With Us

                    linkedin logo

                    Affiliations and Endorsements

                    evoc greenbook badge

                    Keep Informed

                    Sign up for eVOC's monthly newsletter.