Quality Control

http://www.uxbooth.com/articles/banking-on-success/

To determine the priority and quality of content, we asked:

  • Is it precise?
  • Is it readable?
  • Is it relevant?
  • Are calls to action clear?
  • Does it help users complete tasks?
  • Does it support the overall business strategy?

Design to support content

In order to manifest our content-centered approach, we chose a subtle design language. The redesigned website would need to support three, key user tasks (those that emerged from user research):

  • Logging in to the online bank
  • Contacting the bank
  • Learning more about the bank’s products

Guidelines and governance

Finally, we created a tailor-made content manual that would help SSF maintain the website after launch and guide them in their future content efforts. We gathered everything we had learned along the way about SSF’s content as well as how it was managed.

The manual reiterated:

  • How to write for the web (readability, keywords, links, grammar)
  • SSF’s tone of voice (target audiences, personality traits and character)
  • Content governance (maintenance, routines, processes and roles)
  • Content analytics and statistics (Metadata, findability, SEO, Google Analytics)
  • Related channels (social platforms, e-mails and blogs)
Advertisements
Tagged with: , ,
Posted in IA

Designing for Empty States

http://tympanus.net/codrops/2013/01/09/designing-for-the-empty-states/

Empty states are places in apps that have no content or data. They are empty. A blank page. Traditionally empty states are overlooked as most designers focus on how best to display lots of content or data. It’s common for empty states to be dealt with by developers as they are often caused by exceptions (such as no internet connection). They often write the copy and as a result it can be a little difficult to understand or it is left with the basic styles. Not the best combination. Itshould be logged as something that needs designing but that doesn’t always happen.

There are three mains types of empty states. First use, User cleared and Errors (e.g. no internet connection)

Tagged with: ,
Posted in UI, UX

Cool Blog: eCommerce Outtakes

Great write-ups about analyzing different websites and user experiences.

http://ecommerceouttakes.com

Posted in Uncategorized

FYI… Top 10 Mistakes in Web Design

Top 10 Mistakes in Web Design

1. Bad Search

Overly literal search engines reduce usability in that they’re unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody.

A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document’s importance. Much better if your search engine calls out “best bets” at the top of the list — especially for important queries, such as the names of your products.

Search is the user’s lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that’s what users are looking for.

2. PDF Files for Online Reading

Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don’t work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user’s browser window. Bye-bye smooth scrolling. Hello tiny fonts.

Worst of all, PDF is an undifferentiated blob of content that’s hard to navigate.

PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.

> Detailed discussion of why PDF is bad for online reading

3. Not Changing the Color of Visited Links

A good grasp of past navigation helps you understand your current location, since it’s the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past.

Most important, knowing which pages they’ve already visited frees users from unintentionally revisiting the same pages over and over again.

These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don’t change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.

Usability implications of changing liEyetracking of reading patternsnk colors

Guidelines for showing links

4. Non-Scannable Text

A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.

Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:

  • subheads
  • bulleted lists
  • highlighted keywords
  • short paragraphs
  • the inverted pyramid
  • a simple writing style, and
  • de-fluffed language devoid of marketese.

>

5. Fixed Font Size

CSS style sheets unfortunately give websites the power to disable a Web browser’s “change font size” button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40.

Respect the user’s preferences and let them resize text as needed. Also, specify font sizes in relative terms — not as an absolute number of pixels.

6. Page Titles With Low Search Engine Visibility

Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need.

The page title is contained within the HTML <title> tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it’s truly microcontent.

Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don’t start with words like “The” or “Welcome to” unless you want to be alphabetized under “T” or “W.”

For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it’s also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.

Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.

7. Anything That Looks Like an Advertisement

Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.)

Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don’t study it in detail to find out what it is.

Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:

  • banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page
  • animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
  • pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).

8. Violating Design Conventions

Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That’s good.

The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users’ expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.

Jakob’s Law of the Web User Experience states that “users spend most of their time on other websites.”

This means that they form their expectations for your site based on what’s commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.

9. Opening New Browser Windows

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet. Don’t pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).

Designers open new browser windows on the theory that it keeps users on their site. But even disregarding theuser-hostile message implied in taking over the user’s machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don’t notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

Links that don’t behave as expected undermine users’ understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser’s “open in new window” command — assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior.

10. Not Answering Users’ Questions

Users are highly goal-driven on the Web. They visit sites because there’s something they want to accomplish — maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for.

Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn’t meet their needs if you don’t tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don’t have time to read everything, such hidden info might almost as well not be there.

The worst example of not answering users’ questions is toavoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it’s rife inB2B, where most “enterprise solutions” are presented so that you can’t tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking “Where’s the price?”while tearing their hair out.

Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pagesor search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.

Posted in Uncategorized

The Grid

Cool link I found on grids.
http://www.thegridsystem.org/

http://www.youthedesigner.com/2012/12/27/you-be-inspired-awesome-grid-based-websites/

Posted in Uncategorized

Breadcrumbs

I needed to add some breadcrumbs to a project today. So I did some research and came across this cool article from Smashing Magazine.

Via: Smashing

What is a breadcrumb?

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

What is a breadcrumb?

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

interactive example 1.
Breadcrumbs on Delicious.com

You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

In this article, we’ll explore the use of breadcrumbs on websites and discuss some best practices for applying breadcrumb trails to your own website.

When Should You Use Breadcrumbs?

Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.

You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

Types of Breadcrumbs

There are three main types of breadcrumbs.

Location-based
Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). In the example below (from SitePoint), each text link is for a page that is one level higher than the one on its right.

Example of location-based breadcrumb.

Attribute-based
Attribute-based breadcrumb trails display the attributes of a particular page. For example, inNewegg, breadcrumb trails show the attributes of the items displayed on a particular page:

Example of attribute-based breadcrumbs.

This page displays all computer cases that have the attributes of being manufactured by Lian Li and having a MicroATX Mini Tower form factor.

Path-based
Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.

Benefits of Using Breadcrumbs

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages
Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space
Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates
Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate.

Mistakes in Breadcrumb Trail Implementation

Using breadcrumb trails is a fairly straightforward affair, and there are only a few guidelines to consider before deciding to implement them on a website. Let’s take a look at some common mistakes to avoid.

Using breadcrumbs when you don’t need to
A common mistake in implementing breadcrumbs is using them when there is no benefit.

Using breadcrumbs when you do not need it.

In the above example, Slicethepie risks overwhelming users with too many navigation options. The (1) primary navigation, (2) breadcrumb trail and (3) secondary navigation are very close together. The breadcrumb trail in this application offers users no added convenience because the secondary navigation for lower-level pages sits right below it. Additionally, clicking on the second-level link in the breadcrumb trail (“Music”) takes you back to the first tab (“Listen”), which mistakenly suggests that the first tab is on a higher level than the other two (“Search” and “Artist hall of fame”).

Using breadcrumb trails as primary navigation
As stated earlier, use breadcrumbs as an optional aid to navigation.

Using breadcrumbs as primary navigation./

In the above example, mefeedia does not offer a primary navigation menu for viewing videos. Though there is text link navigation in the footer section, there’s no navigation menu in the body of the pages, making it hard to navigate to other sections of the website.

Using breadcrumbs trails as primary navigation - example 2.

If you arrive on a video page directly — say, for example, through a Google search result — the only navigation option you may have is the breadcrumb trail. Or if you’ve already been browsing a website’s pages and reach a page that does not display the primary navigation menu, you will have to hit the “Back” button in your browser to access the main menu.

Using breadcrumbs when pages have multiple categories
Breadcrumb trails have a linear structure, so using them will be difficult if your pages can’t be classified into neat categories. Deciding whether to use breadcrumbs largely depends on how you’ve designed your website hierarchy. When a lower-level page is (or can be put) in more than one parent category, breadcrumb trails are ineffective, inaccurate and confusing to the user.

Breadcrumb Navigation Design Considerations

When designing a breadcrumb navigation scheme, keep several things in mind. Let’s take a look at some questions that might arise when you’re working with breadcrumbs.

What should be used to separate link items?
The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.

Example of greater than symbols separating the text links.

Other symbols used are arrows pointing to the right, right angle quotation marks (») and slashes (/).

Example of alternative hierarchy separators.

The choice depends on the aesthetics of the website and the type of breadcrumb used. For example, for path-based breadcrumbs in which the links do not necessarily have a hierarchical relationship to each other, using a “greater than” symbol may not convey their relationship accurately.

How big should it be?
You don’t want your breadcrumbs to dominate the page. A breadcrumb trail functions merely as an aid to users (a convenience); its size should convey this to users and thus should at least be smaller, or less prominent, than the primary navigation menu.

An example of a good-sized breadcrumb trail.

A good rule of thumb to follow when sizing your breadcrumb trail is that it shouldn’t be the first item that grabs the user’s attention when arriving on a page.

Where should breadcrumbs be located?
Breadcrumb trails are usually displayed in the top half of the page, below the primary navigation menu if a horizontal menu layout is used.

Breadcrumb Showcase

Now that we’ve discussed the who, what, when, where, why and hows of breadcrumb trails, we should take a look at some live examples. In the following section, you’ll find a few examples of great websites that use breadcrumb trails.

1. Classic Text-Based Breadcrumbs

TypePad Design Assistant

classic breadcrumb - example 1.

NASA

Classic text-based breadcrumbs

Nestle uses a breadcrumb trail whose text is significantly smaller than the text on the rest of the page, effectively making it unobtrusive.

Nestle example.

Marchand de Trucs

classic breadcrumb - example 2.

Bridge 55

classic breadcrumb - example 3.

Overstock.com uses the standard “greater than” symbol for its attribute-based breadcrumb trail. Checkboxes for product attributes are used so that users can uncheck them to filter them out.

classic breadcrumb - example 4.

2. Replacing “>” with Other Symbols

TechRadar UK and BP use right-pointing triangles.

Using other symbols for hierachy separators - example 2.

Replacing the greater than symbol example.

PSDTUTS and Martique use slashes.

Using other symbols for hierachy separators - example 3.

Using other symbols for hierachy separators - example 4.

Mouse to Minx uses a right-angled quotation mark to denote page hierarchy.

Using other symbols for hierachy separators - example 5.

Jakob Nielsen’s Alertbox uses right-pointing arrows.

Using other symbols for hierachy separators - example 1.

Target uses semi-colons (:) for separators.

semicolon separator example.

3. Beyond Simple Text Links

One current trend in breadcrumb design basically says, “Breadcrumbs don’t have to be simple”. In these designs, you’ll see beautifully styled breadcrumbs that integrate well with the overall design.

Grooveshark

styled breadcrumbs - example 1.

Yahoo! TV

Beautiful breadcrumb trails.

IDEO

styled breadcrumbs - example 2.

Apple Store

styled breadcrumbs - example 3.

Coolspotters

styled breadcrumbs - example 4.

Devlounge

styled breadcrumbs - example 5.

LottaNZB

Pixelpoodle

Beautifully-styled breadcrumbs - example.

guardian.co.uk

Beautiful navigation - examples.

4. Breadcrumbs for Multi-Step Processes

Statement Tracker uses a breadcrumb trail to indicate the steps involved in registering for an account, as well as a progress indicator.

Sequential process example.

Flickr uses a breadcrumb trail to indicate the number of sections in the Flickr tour.

breadcrumb

5. Breadcrumbs with Sub-Navigation

Here are some examples of breadcrumb trails whose links, when clicked on or hovered over, open a sub-navigation panel that lists additional attributes or locations.

MarketWatch has a fly-out sub-navigation menu that appears when you hover over a breadcrumb link.

breadcrumb with sub-navigation example.

Profoto has a unique breadcrumb trail: clicking on a breadcrumb link opens an area below it that gives users additional attributes to select from.

Experimental Example 2.

Cranfield University has a similar fly-out breadcrumb scheme, which serves a dual function: as an location indicator for the user and as a robust and interactive secondary navigation scheme.

Flyout Breadcrumbs

Lonely Planet also has a fly-out breadcrumb trail in which you can change attributes.

flyout menu - example 3.

Clicking on a breadcrumb link takes you to that item’s page, while clicking on the downward-pointing arrow opens additional options.

Flyout menu - example 4.

MSDN has a breadcrumb trail that opens a scrollable sub-navigation list when the user hovers over a link.

subnavigation example 1.

Wowhead has a multi-level sub-navigation scheme.

6. Interactive Breadcrumbs

Delicious lets you remove items in the breadcrumb trail of keyword tags to help you quickly find bookmarks.

interactive example 1.

7. Experimental Examples

Booreiland uses a breadcrumb-style navigation scheme for its primary menu, allowing visitors to quickly understand what they’re currently viewing.

Experimental example 1.

User interface designer Aen Tan of AEN UI talks about a design pattern called “Tabcrumbs,” a navigation scheme that combines tabs and breadcrumbs.

 

Tagged with: ,
Posted in UI

Mobile Design Patterns

Via: Smashing Magazine.com

Boosting your mobile e-commerce sales with mobile design patterns.

 

Boost Your Mobile E-Commerce Sales With Mobile Design Patterns

People are increasingly using their smartphones as a replacement for desktop computers, even for activities such as shopping and purchasing. And as more people move away from the desktop and onto mobile-optimized websites to shop for products and services, website creators can use established design patterns to help kickstart a mobile e-commerce project.

Having a good mobile e-commerce experience matters a lot. In fact, recent research has found that people are 67% more likely to make a purchase if a website they’ve reached on their phone is smartphone-friendly.

The power of design patterns is that they show you how other designers have solved similar problems so that you are not always reinventing the wheel. They also enable you to design your website in a way that meets the expectations that people develop from the other websites they’ve used, and they encourage you to consider design approaches that you would not have thought of on your own.

In this article, which focuses on smartphones, not tablets, we’ll look at design patterns and approaches used for mobile e-commerce functionality, including the following:

  • Home pages,
  • Site-wide navigation,
  • Suggested search,
  • Search results,
  • Search filtering and sorting,
  • Product pages,
  • Photo galleries,
  • Shopping carts,
  • Checking out with an account or as a guest,
  • Forms.

All the examples in this article are drawn from mobile websites that run in smartphone browsers. Most are taken from large multi-department retailers because they have large product catalogs that require a thoughtful approach to features such as search and filtering and sorting of search results. There are also countless native apps for e-commerce, and many of these patterns can be applied to them as well.

Home Pages

When visited on mobile devices, home pages are often less about content and more about helping users find what they are looking for. Common patterns are simple single-column layouts for promotions and single-column lists of links to featured website areas or product categories. Keyword search is commonly included on home pages, as are links to store locators and registration forms for promotional emails and loyalty programs.

Amazon and Macy’s home pages
Amazon and Macy’s both use a mix of promotional elements and list menus.

Target and Threadless home pages
Target’s promotional content takes up more screen space than a simple list but makes a stronger visual impact. Threadless uses a dashboard pattern, which is more common in native apps than on e-commerce websites on mobile.

If shoppers are coming to your website to compare prices quickly, then a simple list pattern and search function are probably more desirable. If they are coming to explore promotions and sales, then the approach taken by Target may be more appropriate. To answer these questions, you’ll need to mine your analytics to get an idea of what consumers are doing on your website.

Site-Wide Navigation

Beyond using the home page as the main navigational hub, many websites also have navigation menus on most of their pages, usually in the header. This enables shoppers to easily get from one part of the website to another without having to return to the home page.

Lowe's and Best Buy website menus
Lowe’s site-wide menu has icons for each option. Best Buy’s menu has a two-column layout for navigation and has buttons instead of list items. Lowe’s menu covers the page when it appears, while Best Buy’s pushes the page’s content down the screen.


Macy’s has a site-wide menu that contains submenu options. CVS has a two-column menu with an icon for each option. In both cases, the menu is displayed at the top of the page.

As you can see from the screenshots above, there are several ways to design a site-wide menu. Lowe’s design is simple, and the icons add a nice bit of visual polish. The fact that the rest of the page fades into the background when the user chooses to use the navigation helps users focus on their current tasks. CVS seems cluttered in comparison, with two columns of options, each item accompanied by an icon. CVS’ menu also places a lot of tap targets close to each other, which can present usability problems on touchscreens.

What’s interesting that large e-commerce websites usually don’t have many navigation options displayed at once. They try to balance the visual design of the navigation with the information architecture of your website, carefully considering the number of items that should be in the global navigation. Use website analytics to see which menu options shoppers click to help you determine what should be in the menu. Conducting A/B testing and usability tests of different designs to see whether one has too many options and overwhelms people is not just recommended but necessary to find the optimal solution — for your business and for your users.

Suggested Search

Suggested search, also known as type-ahead or autocomplete, displays potential results as soon as a shopper has typed in a few characters. For commonly searched terms, this can be a real convenience to shoppers, especially if the search term is long. One limitation of suggested search is that tapping a wrong character on a virtual keyboard is easy, which would change the suggested results. Showing common “correct” results instead might be useful. Also, consider using an improved Auto-Suggest pattern to reduce the amount of typing needed to enter queries, and utilizes slower mobile bandwidth in the most efficient manner.

Office Depot suggested search
Typing “d-r-a-f” into the search box on Office Depot’s website brings several possible results. And mistyping “d-r-a-g” instead of “d-r-a-f” leads to unexpected results for someone who is trying to find drafting supplies. Tapping a letter adjacent to the intended one is a common problem on virtual keyboards.

While designers can’t do anything about people mistyping queries, they can ensure there are other ways to get to product pages from mistyped results, such as drill-down lists for product categories or a site-wide menu of top-level categories. Website managers can also fine-tune their search functionality by suggesting results for “draft” from queries typed as “dragt.” Your ability to do this will depend on the search engine technology you are using.

Search Results

Two primary patterns are used for search results on mobile e-commerce websites: table display and grid display. Tables show a thumbnail photo and some basic information such as product name and price in a compact row. Grids show larger images with less descriptive information. Some websites allow shoppers to switch between the two views.

Zappos and Walgreens search results
Zappos shows its search results in a grid to allow for larger photos of its products, a sensible choice in a market like shoe sales.Walgreens has a table that includes buttons for finding item in stores and adding items to a shopping cart.

OfficeMax search results
OfficeMax asks shoppers to select a subcategory for broad search terms like “Paper.” Once a subcategory has been selected, results are displayed as a table. Searches for terms like “Scissors,” which have fewer subcategories, takes shoppers directly to the table view of the results.

Having shoppers select a subcategory can be problematic if it’s not clear where a product fits in a complicated hierarchy. In theOfficeMax example above, someone looking for 8.5 × 11-inch paper for their home printer might not know whether to look in “Copy & multipurpose paper” or “Laser paper.” A better approach might be to list subcategories under search filters, where they can be presented in context with other filters, like “color” and “size.” Regular testing (every 4–6 weeks) with representative users and commonly searched-for terms and top-selling products could give you insight into which approach is better. A/B testing could also reveal whether one approach gets more people to a product page and leads to a higher conversion rate.

Gap search results
Visitors to Gap’s website see a table display by default, with the option to see a grid display. Notice that Gap also retains the search term in the keyword field.

Gap lets shoppers choose how to view search results, allowing them to switch from an easy-to-scan list to a view with larger photos. Gap could have retained some product information though — e.g. prices — in its grid display (as Zappo’s does). Details such as price and color make it easier for a shopper to determine which product they want to learn more about.

Retaining the term in the field also reminds shoppers what they searched for and lets them easily narrow the results by adding another word (like “red”) to the search term.

Searching Gap for “men’s tshirts” takes shoppers to a page with no results (not shown), and without linking to search results for “men’s t-shirts.” Gap could improve its search by adding a “Did you mean?”-type question to the results page. Google handles this scenario by listing “mens t shirts” as a suggested query and then presenting results for “men’s t-shirts” if that suggestion is ignored.

Sorting Results

Sorting results helps shoppers organize a large set of results along a continuum of values, usually numerical ones such as price and consumer rating. Common interface patterns for sorting are buttons and <select> menus.

Walmart and Sears search sorting
Walmart lets shoppers select one of three buttons to sort results. Sears uses a similar approach, but with a “segmented control”. JavaScript frameworks such as jQuery Mobile are making these app-like interface widgets more readily available to designers.

J.C. Penney and Eddie Bauer search sorting
J.C. Penney allows for sorting through a <select> menu that is slightly customized in style, while Eddie Bauer uses the browser’s default <select> menu. Both trigger the browser’s native control for <select> menus (in these examples, the iPhone picker).

The size and generous spacing between Walmart’s buttons make for better tap targets; although, to be fair, Walmart has only three options, while Sears has four. Sears’ inclusion of an “All” button allows shoppers to get back to the original results page if they don’t find what they want after having sorted. Using a <select> menu is a quite safe choice because it is supported by modern mobile browsers and allows for longer lists of sorting options. However, it also takes a lot of valuable space. These are the types of design trade-offs that can be evaluated with regular testing.

Filtering Results

Filters enable shoppers to narrow their results based on one or more attributes, like color, brand and size. Filters are usually organized by type (called facets), with several values appearing under each facet (for example, color is a facet, and red is a facet value). Common interface patterns for displaying filtering options are <select> menus, drop-down lists and accordion displays. Filtering can be applied when one or more values are selected from within a facet. While allowing a single search to include values from more than one facet is technically possible, it comes with a higher interaction cost and could lead to no results (for example, cross-training athletic shoes that cost less than $75).

CVS and jcpenney search filtering
CVS uses <select> menus in its “Refine” tab for filtering. Selecting a menu option will immediately filter the results. J.C. Penney offers a drop-down list for selecting filters and indicates the number of products that match a filter value. J.C. Penney also allows multiple values from a single facet to be selected on one screen, the trade-off being that the shopper has to tap the “Apply” button.

Kohl's and Threadless search filtering
Kohl’s uses an accordion to expose a set of checkboxes for each filter type. Threadless exposes the values for all of its search facets as buttons. On both websites, selecting a single filter value will immediately filter the results.

Showing the number of items available under each facet value offers greater transparency into what shoppers will get with each selection. Threadless’ approach of showing all available facet values takes up the entire screen, but it offers consumers an at-a-glance view of all filtering choices available to them. Whether you take this approach or use an accordion like Kohl’s will likely depend on how many facet values are present for a given category of products. If your catalog has a high degree of variability in the number of facet values for each category, then you will need to experiment to find the right design. You could optimize the filtering interface for those product categories for which shoppers use filters the most.

Product Pages

Product pages are where e-commerce websites really showcase their products in detail. They are not a “pattern” in the true sense of the word, but rather a collection of patterns that include elements such as tabs, accordions and photo galleries. Two common approaches to product pages are one long page with all of a product’s information or a page with tabs or accordions to allow for progressive disclosure of information as shoppers need it.

Samsung and Dell product pages
Samsung and Dell progressively disclose content on their product pages, which have a lot of information for shoppers. Samsung uses accordions to expose chunks of information, while Dell uses tabs.

Cabela’s and Office Depot product pages
Cabela’s and Office Depot both use a single long page to display product information. This approach requires more swiping up and down to get to information, but it frees shoppers from having to work with small tabs or manipulate accordion headers. You choice will depend on the amount of information associated with a product and how the information can be broken down into logical sections.

Long product pages require more scrolling than pages broken into manageable chunks with tabs or accordions. They also require shoppers to put more effort into finding the specific information they are seeking. In my own usability testing, I’ve heard people express preferences for both approaches, but they seem to have an easier time working with a page broken into logical chunks. If you take this approach, make sure any content not initially displayed renders quickly when the shopper taps on the tab or accordion.

The obvious way to accomplish this is to load all of the page’s content at once so that the hidden content appears almost instantly. This approach has an advantage for when the user’s network connection drops while they are switching between sections. The big downside is that all product information has to be downloaded, whether it is actually viewed or not; this adds more load to your servers and uses more of the shopper’s data plan, which could be metered.

Photo Galleries

Photo galleries are particularly critical in e-commerce industries such as apparel and consumer electronics. You might not need to see a wrench from three different angles when shopping at Home Depot, but more images are better when looking for clothes, shoes or a high-end smartphone or tablet. A few commonly used patterns are the swipeable gallery, “double-tap to zoom”, and thumbnails for selecting photos.

Payless photo gallery
Payless uses a swipeable gallery to show its products from different angles. Users can also double-tap to zoom in to see details like stitching and eyelets.

Payless wisely keeps its “Tap tap to zoom” call-out on the screen for several seconds, giving the shopper time to understand how to navigate the page and still notice it. The ability to zoom in to a photo to view a product’s details is critical for apparel and shoes.

Dockers and Levi's photo galleries
Dockers (above left) has a swipeable photo gallery, with double-tap to zoom in to details, and shoppers can see a product in different colors. Levi’s (above right) takes a similar approach, with the addition of thumbnails to indicate the photo angles in the gallery. Selecting a new color on Dockers’ website causes a full-page refresh, while Levi’s does not.

Levi’s keeps most of the page from refreshing when the shopper changes colors, which at first seems like a better user experience. But, from a brief review of both websites on the same date and at the same time of day, Dockers’ full-page refreshes appeared to run faster from the time I tapped a color swatch to the moment the page with the new photo appeared. Levi’s slowness could have been caused by the five thumbnails needing to be refreshed, in addition to the main photo, or other unseen factors, such as a heavy traffic load. Each approach has its trade-offs.

Samsung and Dell photo galleries
Samsung (above left) and Dell (above right) both use swipeable photo galleries for their products. Samsung incorporates the gallery into an accordion on its product page, while Dell uses a separate page.

Samsung’s approach seems more user-friendly because it has fewer pages to navigate. Both Samsung and Dell go with large high-resolution photos, because apparently image quality is critical when looking at expensive products. One advantage to Dell’s approach is that it allows shoppers to focus on the photos themselves without any distracting page content.

Shopping Carts

Shopping carts usually display products using a table pattern. Besides displaying the contents to be purchased, they also offer additional functionality, such as the ability to save an order, to save a product to a favorites or wish list, to remove products or update quantities, to choose shipping or in-store pickup, to apply promotional or coupon codes, and to check out. Once a product has been added, a shopping cart is commonly reached through an icon in the website’s header or an option in the global navigation menu.

Lowes and Bed Bath and Beyond shopping carts
Each table row in the Lowe’s shopping cart (above left) lets the user remove the corresponding product from their cart, and it includes options for shipping or in-store pickup. Bed Bath & Beyond (above right) also allows items to be removed; product quantities may be changed for each item in the table, and a single button farther down updates the page.

Crate and Barrel and Payless shopping carts
Crate & Barrel (above left) has table rows that allow users to remove products, save to favorites and update quantities. Each row also includes shipping information such as cost and delivery time. Payless (above right) also allows consumers to update quantities and remove items; its cart also offers a choice of delivery options, including having the product sent to a Payless store (not shown).

Shopping carts should provide maximum utility because shoppers are close to the final point of purchase. Allowing shoppers to change quantities, remove items and apply promotional or coupon codes without having to go to another page is critical to getting them through the purchasing funnel quickly. If you feel this adds too much content to the page, you can use progressive disclosure to hide some content (such as promo code fields) behind accordions until it is needed.

Checkout

Checkout is more of a process than a pattern, although form patterns can be applied to checkout flows. Many e-commerce websites allow customers who use their websites on mobile to check out with an existing account or as a guest. For people who already have an account, the checkout process is greatly streamlined by using existing payment and shipping information.

Crutchfield and Nordstrom checkout
Crutchfield and Nordstrom both allow customers to check out as guests or by using their existing account. Both allow mobile shoppers who have checked out as guests to create an account after placing their order, and both support password resetting.

Amazon and Target checkout
Amazon asks for an email address on the first page of the checkout, whether the shopper has an account or is checking out as a guest. The experience is very much the same like for users of the website on desktop. Target offers options on the mobile website to sign in with an account, to check out as a guest or to create an account. Both support password resetting.

Allowing customers to either sign in or check out as a guest and to reset their password is a must for mobile e-commerce websites. Also, consider inviting shoppers to create an account on their phone after placing their order, because they have already given you enough information (except for a password) to do so. This could make guests more likely to create an account because the effort should be minimal at this point.

The “Create a Target.com account” button could lead to some abandoned carts if shoppers go down that path and decide it’s too much effort. Confirming the order first and then inviting registration on the invoice page might be better. Limiting the initial checkout screen to two choices could improve conversions because the shopper will have fewer decisions to make while working on a small screen. Fewer choices in critical tasks such as check out usually works better.

Forms

Forms are most commonly used in mobile e-commerce for searching, checking out, registering, and entering coupon and promotional codes. Be aware of a few good practices when designing forms for the small screen:

  • Place form labels above input fields so that they don’t shift off screen when the user zooms into the input.
  • Use HTML5 input types to display the appropriate keyboard for the field being used. For email addresses, use type="email". For numeric fields, like ZIP codes, use type="number" or type="tel" (the latter will display a numeric keypad with larger buttons).
  • Make fields mandatory only when absolutely necessary. This will reduce friction in getting customers through the checkout process.

The best way to handle forms on a smartphone is to use as few of them as possible. You can use geo-location to suggest the shopper’s ZIP code, and you can allow customers to check out using the account information they entered earlier when using your site. Remember that the best form is the one the shopper never has to complete.

CVS and Crate and Barrel checkout forms
CVS (above left) doesn’t bring up a numeric keyboard when the user taps the ZIP code field on the checkout page. This requires one unnecessary tap from the shopper to get the correct keyboard. CVS also aligns labels to the left of form fields, where they could get pushed off screen if the user zooms into a field. Crate & Barrel (above right) has a much more mobile-friendly form. It brings up the large numeric keypad when someone taps the ZIP code field. It also top-aligns form labels so that they don’t slide off the page.

Remember that forms are how shoppers complete their transactions on websites. Pay special attention to them, and do everything you can to reduce the interaction cost of completing them. Sometimes it might even mean trying out something entirely different. For example, Typeform recently suggested a new kind of experience for more responsive, simple and user-friendly Web forms. The idea is to ask just one question at a time, but display it prominently, allowing users to type the hotkeys when filling in the form. This is not the option that would work in every situation, but for some forms it might be quite helpful.

Conclusion

With the increasing importance of mobile e-commerce as a source of revenue to retailers, mobile-optimized websites are offering many of the features that shoppers want and expect based on their desktop shopping experiences. And as the research by Sterling Brands and SmithGeiger shows, mobile consumers are more willing to purchase when the website is mobile-friendly.

By using existing design patterns, you can begin to explore different options to more quickly get your e-commerce website ready for the small screen. But don’t stop with existing patterns; use them as a jumping-off point to explore a design and to help you consider options you might not have thought of. And as browser capabilities increase, consider bringing interface design and interaction patterns from native apps into your browser-based smartphone shopping experience.

Resources

Tagged with: , , ,
Posted in Mobile, UI, UX