WarmDevs

https://warmdevs.com

[warmdevs]

New Post has been published on https://warmdevs.com/comparison-tables-for-products-services-and-features.html

Comparison Tables for Products, Services, and Features

Comparison is one of the most critical activities users perform on the web. In many cases, it’s a necessary step before your site visitors will perform a desired action, like buying your product, signing up for membership, contacting you, or requesting a quote.

The first step to enabling comparison is providing consistent information for all comparable products or services. However, when that information is distributed across detail pages, the interaction cost and the cognitive load both increase: users are forced to remember information, take notes, flip between tabs, or open multiple browser windows.

This is where the comparison table comes in — a well-known, yet often neglected or misused pattern. The basic comparison table uses columns for the products or services, and rows for the attributes. It allows for quick and easy comparison between each offering’s features and characteristics.

keurig.com: A typical product-comparison table

When You Need a Comparison Table

Comparison tables are often misunderstood as tools for ecommerce only. It’s true that the most common instances of comparison tables are for mid-range to expensive consumer goods, especially electronics (think microwaves, fitness trackers, vacuum cleaners, or cars). But comparison tables are equally well-suited to services, membership levels, pricing packages, software features, tuition rates, or locations. They can be used to compare similar items from the same organization, or to compare one organization’s products against those of a competitor. The comparison table is a much more versatile tool than it gets credit for.

To understand when you should use a comparison table, you have to first consider how people make decisions.

When people have to choose among many alternatives, it’s hard to compare the pros and cons of each individual alternative, and as a result they engage in noncompensatory decision making. To narrow down the number of alternatives to a manageable one, they usually use one hard criterion that outweighs any other considerations. For example, a user looking to buy a new car might filter out all the cars that are more expensive than that $20,000, even though some of them may be surpassing the budget by a very small amount. This nonnegotiable filter helps the user restrict the set of results to a reasonable size.

When people have to select among a small set of alternatives (usually under 5–7), they usually engage in compensatory decision making: they look at the individual merits of each and compare their advantages and disadvantages according to a number of criteria. People might accept a negative attribute as a tradeoff for a positive one. For example, a user researching a new laptop might be willing to consider a heavier computer if it has better battery life and computing power.

Filters and facets support noncompensatory decision making. In contrast, compensatory decision making is best served by comparison tables. They allow users to easily see and compare multiple important attributes at a glance.

There are certainly cases when a comparison table is unnecessary. In addition to the noncompensatory decision situation discussed above, you probably don’t need a comparison table if:

Similar items are not necessarily mutually exclusive. For example, unlike a microwave or a laptop, consumers are unlikely to purchase only one shirt, so Zara doesn’t need to put together a comparison table to let users see several shirts side by side.

The product or service is simple, and users wouldn’t be interested in analyzing the characteristics. For example, a coffee mug doesn’t have many meaningful, comparable attributes. Someone shopping for a coffee mug online might be interested in the style (and possibly size) but probably won’t want to compare many attributes of several coffee mugs.

The product or service is cheap or easily replaceable (e.g., a pen, paper towels) and users are likely to engage in satisficing behavior and not spend much time analyzing alternatives.

The product or service is unique and hard to compare with others. For example, it’d be hard to come up with a set of attributes to compare works of art.

Outside those exceptions, a comparison table’s applications are limited only by your imagination. Pretty much any time your users want to choose among similar offerings, especially if multiple factors contribute to the decision, it’s an opportunity for a comparison table.

Types of Comparison Tables

Some comparison tables are static — they contain preselected products; others are dynamic and allow users to decide which items they want to compare. The type you need will largely depend on how big your product universe is: static tables are used for small (under 5 items) product universes and dynamic tables are appropriate when your product universe contains many items.

Static

If you have a small number of products your users will need to compare, you may want to create prebuilt, static comparison tables. For example, Apple currently only sells 5 different models of the Apple Watch, so it provides a ready-made comparison table for users trying to decide.

apple.com: With only five models of the Apple Watch available, Apple can provide a comparison table that includes them all.

A good rule of thumb is to take this approach if you have 5 offerings or fewer, but we’ll get into limiting the number of compared items later in this article. Static comparison tables usually work well for membership levels or pricing packages.

With this kind of comparison table implementation, you’ll be able to control how the information is displayed on the page. For example, you can change the copy to fit the space constraints of one cell. Note, however, that this implementation is not as easily scalable as dynamic comparison tables: You’ll have to update the comparison table if you offer a new product or service.

apple.com: Ensure users can find a static comparison table by including a link to the table in your information architecture alongside your product menu. Apple includes a link to its static comparison table in the Watch secondary navigation menu, alongside the links to the various Apple Watch models.

Dynamic

Dynamic tables allow users to select which items they want to see in the comparison table. They are appropriate for situations where your product universe is larger than 5 items.

While dynamic comparison tables scale well as your set of offerings increases or changes, they are usually implemented using a flexible layout and their appearance cannot be as closely controlled as that of static tables.

Selection of items in a dynamic comparison table. Two popular ways of allowing users to select which items to add to the table include:

Compare buttons or checkboxes directly on the listing pages. With this method, users can select the items they’re interested in, and then move to a dynamically created comparison page.

Checkmarks (left, homedepot.com) and buttons (right, lowes.com) are the two most common ways of allowing users to select items for an interactive comparison table.

Product listing pages tend to be overcrowded, so one major challenge for this implementation is making the Compare buttons discoverable without giving them too much space on the page. The safest option is to include Compare buttons as secondary action buttons, either at the top and bottom of the page, or beneath all product descriptions.

delta.com: Delta’s interactive comparison tool is only revealed when users hover over products. Don’t hide the comparison tool behind hover effects.

Direct manipulation of the items of interest. With this method, users can click or drag the products that they want to add to the comparison table. Usually this action is possible either because, like in Garmin’s example below, a special Compare mode disables the regular meaning of clicking on a product (which normally takes users to the product-detail page) or because, like in Fitbit’s example, the site has a special dedicated Compare page.

garmin.com: Garmin features a COMPARE button at the top of its product-listing page. When that button is pressed, clicking on a product adds it to the comparison table instead of leading to that product’s detail page. Unfortunately, this grey ghost button fades into the UI and is not easily noticeable.

fitbit.com: FitBit offers 7 models of fitness trackers. A dedicated comparison page lets users choose the products to compare. Note that this solution is impractical when the product universe is big, and may be unnecessary if you already have listing pages.

One advantage of this direct-manipulation approach to selection is the opportunity to separate the comparison activity from the product-listing page, keeping that view visually cleaner.

A separate comparison page (like Fitbit’s) is a good option when you don’t have enough products or offerings to justify a traditional listing page in the first place.

Best Practices for Comparison Tables

Regardless of which type of comparison table you choose, follow these best practices to support your users’ decision making.

Use Comparison Tables for Up to 5 Items

Comparison tables support compensatory decision making, in which people engage only when they have relatively few alternatives to consider. When more than 5 items need to be compared, add other mechanisms such as filters to help users narrow down the larger set of possibilities to 5 or fewer.

For static comparison tables, err on the side of simplicity. If you can’t keep a static table down to at most 5 comparable options, reconsider if it should be a static comparison table at all. Depending on the complexity of the information you’re presenting, even 5 options may be too many.

For dynamic tables, an extra consideration is whether the layout will scale gracefully up to 5 items if users have the freedom to select what those 5 items will be. Most dynamic comparison tables accept 3–4 items only. Consider how much text will need to be included for the attributes, and how that will impact layout and readability.

Also consider the size of the user’s device or browser. You may need to reduce the number of items to two for presentation on mobile. On the other hand, don’t force users to compare only two items at a time if you have the space to show more.

Apple’s dynamic comparison table for its Mac computers unnecessarily restricts users to comparing two items, even at very large screen sizes (shown here on a 3008×1692 resolution monitor.)

Whatever your limit, make sure you clearly communicate it to your users to avoid confusion and errors. And don’t forget to let users remove items from the comparison, as they narrow down their selections.

Be Consistent

The biggest problem with most comparison tables isn’t a design problem, it’s a content problem. When attribute information is missing, incomplete, or inconsistent across similar offerings, otherwise handy comparison tables quickly become useless. This is especially problematic for dynamic comparison tables, when you’re dealing with many offerings with slightly different metadata available.

bestbuy.com: This comparison table displays the attributes for 4 different mirrorless cameras sold by Best Buy (two Sony cameras, one Canon camera, and one Panasonic camera). The metadata for the Panasonic camera is much richer than for the others. It can be challenging to keep the metadata consistent and up to date, especially when companies sell many products from many different manufacturers. However, if the information isn’t complete for all compared products, it might as well not be in a comparison table at all.

smugmug.com: In this comparison table detailing the features of SmugMug’s four membership levels, each column has a different value for the attribute Ads and spam: Zip, Zero, Zilch, and Nada. Comparison-table values aren’t a good place to showcase your site’s personality — it’d be better to leave these values equivalent and not distract users while they scan for differences.

Support Scannability

Comparing cons and pros of different products is a cognitively demanding process. You want to make sure your users can focus on the essentials. An effective way to do this is to make the table easy to scan for differences, similarities, and keywords.

Stick to the standard table layout: options as columns, attributes as rows, with row labels on the left and column labels above. Use consistent text alignment in each column.

williams-sonoma.com: Williams Sonoma does a good job categorizing pans for this static comparison table. Unfortunately, the horizontal row headers are nonstandard and impede scannability. The narrow paragraphs under DISTINGUISHING FEATURE are not scannable or easy to read.

When using text within comparison tables, keep it short. Whenever possible, avoid full sentences.

Color coding can help as well — either lightly shading the backgrounds of each column, or coloring the text of the cells. Just make sure you’re maintaining enough contrast and not sacrificing readability.

FitBit.com uses a different color for each column’s checkmarks to help users clearly differentiate between each product’s features. This color-coding approach wouldn’t work quite as well for more complex attribute values that can’t be expressed in checkmarks.

techsmith.com uses color-coded columns to show the different features available in its software offerings, as well as which platforms they can be used on.

It’s also important to clearly indicate rows so users can easily tell which attribute a cell refers to, especially when using symbols like checkmarks that can’t stand alone. Row borders, row shading, or extra spacing can help keep the rows distinct and separate.

Sticky Column Headers

Especially when dealing with long lists of attributes that occupy several screenfuls, keep column headers fixed as users scroll. Human short-term memory is limited, and users will easily forget which column is for which product.

disneyworld.disney.go.com: Disney offers a dynamic comparison table to help its customers compare different annual passes. Unfortunately, it doesn’t have fixed column headers, so users are forced to remember column names, or scroll back up the page to check which column is for “Disney Platinum Plus Pass” and which column is for “Disney Platinum Pass.”

Meaningful Attributes

Your comparison table should include attributes that your users will actually care about. Don’t just throw every piece of metadata you have into the table, because it will make the job harder for users.

As much as possible, try to define unfamiliar terms in context, and connect vague attributes to something concrete. An example of this is on an Amazon page for an Anker portable power bank.

amazon.com: The manufacturer’s product-comparison table translates technical attributes into language that is understandable by the average consumer.

Anker’s comparison table has attributes that are useful in the context of comparing portable power banks: battery capacity in mAh, charging speed, and weight. What really makes this a good comparison table is the fact that it translates those attributes into things that would be meaningful for the average consumer. The battery capacity is “3350 mAh,” which is approximately 1.2 “iPhone 6 charges.” The size is “3.5 x 0.9 x 0.9 inches” — about the size of a tube of lipstick. The weight is “2.7 oz,” which is similar to an egg’s weight. The average consumer may have trouble imagining what 2.7 oz feels like, but can probably imagine the weight of an egg.

Another effective way to make obscure attributes meaningful is to include links to more information or in-context tooltips with definitions or clarifying information.

shopify.com: The hover-activated tooltip clarifies the meaning of the attributes without adding extra text to the page.

Give Users Control

Even if you do a good job making the entries scannable or the headers sticky, it can be hard for users to compare products with many attributes, especially when these attributes span several screenfuls. In those situations, users may have to scroll back and forth between different rows as they compare the pros and cons of different products.

In order to make the task manageable, consider allowing users to select which attributes they want displayed in the table. Collapsible rows are an easy implementation for this feature. Additionally, let users hide the rows for which all offerings are similar, and only show the differences.

samsung.com: Samsung offers substantial customization options in its dynamic product comparison table. Users can collapse or expand categories of attributes, and can select specific attributes to show only the rows they’re interested in. However, this table suffers from imperfectly aligned columns, which impede scannability. This implementation also goes too far into customization, and seems to be a victim of feature bloat. It’s unclear why a user would need to see Only Similarities when deciding among products.

crutchfield.com: Crutchfield allows users to remove attributes that are the same for all compared options by clicking Hide similar features. If all three speakers have the same warranty length, that’s probably not a useful piece of information for deciding among them.

For simple static comparison tables, consider presenting a simplified table with those attributes you expect will be most important to users, but also allow access to a more detailed table.

smugmug.com: For its 4 plan options, SmugMug presents a very simplified “at a glance” comparison table.

smugmug.com: The much more detailed full comparison table is available on a different page.

Simplify the Comparison for Mobile

Some websites just remove their comparison functionality altogether for small devices. If at all possible, you should try to support some level of comparison on mobile, but it’s unlikely that you’ll be able to show more than 2 items at a time in a comparison table. Remember that on smaller screens, fewer rows will be visible at a time and more strain will be placed on the user’s short-term memory. Therefore, following the previous recommendations (especially making entries scannable and giving users control to choose what they want to display) will be even more important on mobile.

If a true comparison table on a mobile devices is impractical for your offerings, you might alternatively consider converting the table to tabs or lists for small screens. Just remember that these formats do not support compensatory decision making as well, because users have to remember the attributes for each products in order to weigh pros and cons.

shopify.com: One strategy for making comparison tables work on mobile is converting the columns to tabs. This means users can’t do true side-by-side comparison like they can on a full table, but it at least they will be able to switch among products more easily than if they had to scroll or switch mobile-browser tabs.

The Golden Rule of Comparison Tables

To sum up many of the guidelines we’ve listed here: Above all else, do the work for the consumer. Don’t slow them down with nonstandard or overly long tables with repeated information; don’t ask them to hold things in their memory; and don’t make them Google terms they aren’t familiar with.

Think of a comparison table as a tool to help each user find the option that suits them, rather than a way to upsell them. It may be tempting to manipulate users toward buying the most expensive option, but an honest presentation will be more profitable for your company in the long term.

Helping users determine the solution that’s best for their needs helps you in several ways:

Don’t try to manipulate your users, and you’ll avoid losing their trust. Many users will detect manipulation which will drastically reduces the credibility (and thus persuasiveness) of your site.

When people buy what’s best for them, they’re more likely to be satisfied customers, and promote your brand to others (also improving your NPS).

Beyond valuing the next click, you should value the next year: the more somebody values their current interaction with your website, the more likely they are to turn into loyal users who’ll return.

Make your users’ decisions as easy as possible: you’ll be happy, and they’ll be happy.

[warmdevs]

New Post has been published on https://warmdevs.com/give-thanks-for-good-ux.html

Give Thanks for Good UX

Thanksgiving is fast approaching in the US. So, in the holiday spirit, we’d like to take a moment to express appreciation for some of the designs that bring us joy. I know that sometimes we, UX professionals, can get a reputation as curmudgeons: always criticizing and pointing out flaws. However genuine our intent to improve an experience, the negative findings can outweigh the positive ones.

In this article though, we’re focusing only on the positive. Some of the designs below delight us because they solve a long-sought need, or save time, or make an input less awkward, or simply because they bring a smile to our face. Some are big technology changes, others are subtle interaction details. Either way, we are grateful for them.

In no particular order, we give our sincere thanks for the following improvements, and our kudos to those involved in their creation or adoption.

Fingerprints as passwords. Yes, biometric security has been around for a while, but this year we saw it go mainstream. Today, a range of industries from banking to telecommunications offer fingerprint identification as an alternative to awkward, hard-to-remember and hard-to-type passwords, especially beneficial on mobile.

Maps that are more flexible and insightful. This year saw many improvements to location-based interfaces. These are a few of our favorites:

When following driving instructions, people can now search for and add a stop to their route. Google Maps lets users search for a specific place, or tap to see nearby restaurants or gas stations (including the price per gallon of each one). Previously, users had to exit the current route, search for a new place, and then re-type their destination to continue the route. Now, it’s all in one blissfully continuous flow.

Google Maps lets users add a stop to their trip.

Ever arrived at a business only to find out it closed minutes before? We have. Which is why we are grateful for applications that state the hours of operation and provide warnings of “Closing Soon” when searching for an address. (Even if the user didn’t explicitly search for opening hours.) By presenting this information upfront, these sites save us from that surprise and disappointment.

Car-sharing service Lyft now lets people adjust their pickup location within a few-blocks radius. Especially in urban environments, sometimes walking just around the corner can save 5–10 minutes, if it means you can get picked up at a less busy intersection or go the correct way on a one-way street.

Lyft allows users to adjust the pick-up location.

Voice input. Natural language processing is ever improving, and, though it still has some challenges to overcome, it’s generally usable. We particularly love it in scenarios where hands are occupied. As one of our consultants put it:

“I love it when I’m cooking. Like when I’m kneading dough and my hands are covered in flour and I can’t remember how many tablespoons are in a quarter cup. While the «Hey Siri» feature is a little creepy (re: always listening), it has saved me from the knuckle-button-push & knuckle-passcode-type that I used to have to do.”

Emoji! They just make us happy, that’s all. We are glad to see they are still around and being used.

Easier desktop login. While many items on this list are mobile or device-centric, desktop shan’t be left behind. Microsoft’s modern browsers have a setting to make passwords visible, so people can more easily confirm that their password is correct. (We’ve longed for the option to toggle password masking for a long time). PayPal’s OneTouch goes even further by keeping users securely logged in across devices, entirely eliminating the need to re-authenticate every time before a purchase.

Download for offline viewing/listening. There’s been such a push to get everything available from the cloud; as long as you have a good internet connection, you can access it. But sometimes people don’t have the internet available and still want access. Amazon Prime video and Spotify Premium understand this and are examples of services that allow users to download some content for offline use. “Great for long flights!”

Handoff between devices. Services like Netflix and Spotify let users who are logged in and on the same WiFi network pick up where they left off on a different device.

“It’s amazing that I can seamlessly continue playback from anything. I always love innovations like those that don’t seem to really require any new technology, just clever usage of existing tools.”

DIY Device Stand. This author was delighted by the chance to create a stand for her e-reader or phone while doing a bit of origami. United Airlines, on some flights, includes this cardstock paper that’s meant to be folded into a personal device stand. Since many of the United flights are relying on personal-device entertainment (people use their own smart devices to watch movies), it’s a thoughtful and fun addition to the in-flight experience.

United Airlines includes a foldable device stand on some flights.

What do these user experience improvements have in common? Nothing at first sight: a bunch of disparate technology platforms and user tasks. But look deeper, and we see that the designs are targeted at overcoming quite specific user pain points at opportune moments. Once these solutions are pointed out, they may seem obvious, but to identify the pain points requires user research and to overcome them requires design ideation and a lot of engineering effort.

Thank you to everyone whose work went into creating these experiences. We appreciate it, and look forward to more innovations that bring us convenience and delight 😊.

[warmdevs]

New Post has been published on https://warmdevs.com/are-chinese-websites-too-complex.html

Are Chinese Websites Too Complex?

Foreigners often say that Chinese websites are overly complex and busy in their design. However, since they usually can’t use the sites — not being able to read Chinese — such impressions, formed purely by looking instead of using, are not a valid user experience assessment. To understand whether Chinese web design is indeed too complicated and whether Chinese users are in some way specially equipped to deal with this complexity, we turned to a more appropriate usability methodology: emprical testing with the target audience. Our research had also a secondary motivation: in the current world of responsive design, we’ve seen a trend towards insufficient information density and simplifying sites so that they work well on small screens but suboptimally on big screens. We were curious whether this trend has reached China, and how it will play in with the purported local tradition of complexity.

As a twist, we tested with both native Chinese users and expatriate foreigners living in China. The expatriates worked with English versions of Chinese desktop sites, while the Chinese used the Chinese versions. The Chinese and English versions of the sites were generally equivalent in terms of design complexity. In total, 12 users participated in this research, 6 people in each of our two segments.

The sessions were conducted with the think-aloud method, with each user asked to complete two tasks on 8 websites from a list of 14 websites chosen to span a range of design complexity from simple, one-column responsive patterns to busy, high-density portal-like ones. The Chinese users verbalized their thoughts in Mandarin, whereas foreign users spoke English. All used desktop computers to perform their tasks.

China News was one of the sites we tested. Its crammed homepage is typical of the designs that many foreigners have characterized as busy and complex.

Teambition is another website that was part of our test; the site was responsive and used an information-sparse, minimalist design style (complete with flat buttons, menus, and icons).

Yes, Chinese Sites Are Often Complex

Even our modest study demonstrated that complexity is a reality of the Chinese web and that Chinese participants were tolerant of complicated sites. This design style was considered to be “common,” “normal,” and even “traditional.” An appreciation for information density was especially prevalent for portal sites and news sites.

The foreign participants also acknowledged that complex design was common in China and claimed that they mainly saw this design style on Chinese websites. Some foreigners appreciated the busy designs and thought that piling up information was a way to present it honestly and straightforwardly. Others thought that the Chinese sites were overly hard to use. Foreign users were generally less likely to be annoyed with usability issues experienced on simple websites than with problems encountered on complex sites.

On the other hand, the Chinese users were less accepting of the simple sites that we tested. As one Chinese user said about a low-complexity site, “From a pure design perspective, like icons, pictures, layout, the site is great and matches what people, at least young people, love. It’s simple, clean, with no ads, and no useless information. But the problem is, while it doesn’t have any useless information, it also has less useful information — I can find nothing useful in these simple links. All this introduction of the functionality is just playing with words, with no real meat, no real content at all.” (All quotes from Chinese participants were translated into English by one of this article’s authors.)

No, Chinese Sites Should Not Be Complicated

Even though the Chinese study participants were used to complexity and felt able to deal with it, the truth is that they did encounter many usability problems on complex sites and had difficulty interacting with them. They often commented unfavorably about specific designs that they found to be too complicated.

For example, one Chinese user commented about China News (shown above), “When I’m reading news, I only read through the pages at the top, within these pictures and the links that are highlighted here. I will definitely not scroll down to read anything else. There are so many things happening and I only care about the top news, at most 10 of them, especially with pictures and videos.” On many complex sites, advertising was interspersed with editorial, making the design more complex and harder to use and further aggravating users. To quote a Chinese participant, “All news sites are like this, and this one [China News] is even worse with ads at the top of it! I don’t like it.”

When testing the site of the Industrial and Commercial Bank of China’s site, we got the following comment from a Chinese user: “I thought the whole site is not so cleanly designed. The information designed here is not related to us, the normal users. I will never use most of the information here, which makes it too much.” One foreign user said, “I feel like the banking websites, they are not user friendly at all. They are for banking people.” Another foreign user said, “They just make you be confused, so that they can get money from you.”

The Industrial and Commercial Bank of China (ICBC) is the biggest bank in the world. Chinese study participants found its site to be too complicated.

Usability Problems = Bad Site (In Any Language)

Overly complex design often caused people to miss features. For example, many users were unable to share an article by email on sites with the JiaThis’s social-sharing popup — partly because the popup was accessed through a “plus” icon (low icon usability for a sharing icon) and partly because it was too crammed with features.

Our study participants had difficulty locating the email-sharing option in JiaThis’s crowded popup.

A Chinese user said, “Where is the share via email button? I don’t know… there are too many options.” Echoing the point that complexity is widely spread on the Chinese web, a foreign user’s comment on the same site was, “I guess this is a Chinese website because they have so many options to share. Yeah, I found the Mail but it should be the first one.”

Many usability problems in this China study duplicated findings from our testing of Western sites with Western users. For example, users had trouble with the carousel on Tsinghua University’s website. As one Chinese user said, “On the page with different pictures from Tsinghua, I didn’t know this group of photos could move and thought there was only the one [photo] of the [university] library.”

In another example, the United Nations website violated the guidelines for universal navigation: We asked users to find information about the secretary-general, but after arriving at the subsite with information about this official, users could not find their way back to the main UN site. (We tested both the Chinese and English versions of the UN site, and found the same design flaw.)

Some other examples of well-known web usability problems that hurt Chinese users on the Chinese sites in our test:

“Related articles” links led to articles that users felt were not actually related to the current article.

Search box was not on the top of the page.

Search box was replaced by an icon — something we’ve long known to be highly detrimental to website usability.

Navigation changed as users moved through the site. (#8 on the well-established list of top-10 IA mistakes.)

Partially hidden navigation was made fully visible only after hovering.

The illusion of completeness in a shopping cart made users overlook shipping options placed below the fold.

Insufficiently user-centric content didn’t address users’ key concerns. For example, one Chinese user said about Tsinghua University: “If I’m here on this site, I must be looking for things related to admission or other useful information. However, there are too many ads and clichés about how great the school is. It’s hard to find the detailed information that is really useful. The site is for tourists, not for students.” (A virtual echo of what we heard when testing 57 other university sites outside China.)

Non-standard user interface elements were ignored, as shown in the following screenshot.

On the Chinese site for the Overwatch computer game, not a single one of the 5 Chinese users who tested the site used the nonstandard navigation area with a vertical list of buttons in the right margin of the page.

In many ways it’s comforting to see that so many of the usability problems documented through two decades of testing with Western users repeated in our new study in China. First, it shows that Chinese people are people and not some kind of superhumans who violate the laws of user interface psychology and easily master designs that stump users in the rest of the world.

Second, our research shows that web designers targeting a Chinese audience are well advised to pay more attention to usability and dial down their complexity setting a bit. Yes, Chinese users are more used to complexity and complain less about it, but our test participants spent more time finding things on the more complicated websites and exhibited more hesitation and anxiety when navigating.

Third, while simpler, responsive design is a raising trend in China, it does have to fight the expectations established by a solid high-complexity design tradition. Low information density on a page does not make for good usability, and Chinese users, maybe even more than Western users, are quick to reject too sparse designs. Simpler design, but not oversimplified or minimalist, will benefit Chinese users and likely increase revenue for businesses.

[warmdevs]

New Post has been published on https://warmdevs.com/top-10-enduring-web-design-mistakes.html

Top 10 Enduring Web-Design Mistakes

Since 1996, we have been compiling lists of the top 10 mistakes in web design. This year, we completed a large-scale usability study with 215 participants in the United States and United Kingdom to see what today’s web-design mistakes are. After analyzing results across 43 sites that ranged from small, local businesses to entertainment sites to nonprofits to global organizations, we identified 10 of the most common and most damaging web-design mistakes that hurt our users. (And by hurting their users, these design flaws most definitely also hurt the websites’ business metrics.)

The big news? None of the top issues today is new or surprising. Web design has come a long way. But these persistent problems remain. Modern design patterns and aesthetics change, but underlying user needs remain the same. Users still need to find information, be able to read it, and know what to click and where it leads.

How many of these mistakes is your website making?

1. Unexpected Locations for Content

People can’t use information they can’t find. Many sites offer poor category names that don’t adequately or accurately describe the content within them. Others are arranged based on how the company — rather than the user — thinks about content. When the site structure doesn’t match the users’ mental models of how information should be organized, people are unable to locate what they need.

Involve users in creating your site structure. A little usability work such as card sorting, tree testing, or usability testing can go a long way in creating a site structure that makes sense to users.

ATT.com: Information about trading in an old phone was under Existing Customers, but users looked for it under Smartphones.

2. Competing Links and Categories

When users can’t clearly distinguish between similar navigational categories or links, they struggle to find the right path to content. Category and link names need to make sense on their own, but also in conjunction with other options on the site. If multiple sections or pages could address a specific information need, users must explore each or make their best guess. Alternatively, they may turn to search or even leave the site.

Users on BAM Construction’s site wanted details about construction projects, but weren’t sure if the information would fall under Who We Are, What We Do, or How We Do It. Most started in What We Do, but that section contained overviews of the type of work the organization offered to clients, rather than project details. Project information and case studies were featured in How We Do It.

Card sorting and usability testing can help avoid overlapping category names. Problems with links that are too similar often stem from poor content strategy. Two likely causes for these problems are:

Poor labeling: The links lead to different content, but, for some reason, they have similar labels. If that’s the case, try renaming your links to differentiate them from one another.

Poor content differentiation: If links lead to different pages with highly related information, the solution may be not to rename the links, but to reorganize and consolidate the content.

3. Islands of Information

Some sites offer small bits of information scattered around the site, with little or no connection between them.

When users find one such island of information without links to other related information, they have no reason to think that another area of the site offers supplementary material. If people need additional information, they may move to a competitor’s site or to Google to acquire it.

Users trying to revisit the information may end up in an entirely different area of the site, with a different view of content than in the first experience. Those who do locate the disjointed information, are left to piece it together. Either way, they are left with a negative impression of the site.

From an organization’s perspective, this is not only a user-experience failure, but also a content-management nightmare: information in one area of the site may duplicate, differ from, or even contradict information elsewhere.

One solution is to add related links between pages that offer related information. A better solution is to consider why information is scattered throughout the site, consolidate it as appropriate, and pick the best spot for it. Other areas of the site can refer to the primary location for content about that topic, instead of replicating the information.

4. Repetitive Links

Even if users can determine the right site location for their information needs, they can still be stymied by unexpected or lengthy workflows.

Web teams often ask how many clicks it should take to get to content. There is no magic number — the quality of the clicks matters far more than the quantity. Users should get closer to the information goal as they click through pages. Repetitive clicks that force people to select what they want again and again aggravate users and require them to spend unnecessary effort.

Teams sometimes build pages in isolation and do not consider the route to the content they’ve created. When creating new pages, review how the user will get there and to see if a more direct path is possible.

NYC.gov: Users were frustrated when they selected a link labeled Find a Firehouse only to have to select the differently spelled Find a fire house link on the next page.

5. Hidden Fees and Prices

People want to know about prices, subscription fees, convenience fees, and additional charges before or at the beginning of a process. On several sites, users had to proceed through complex interactions just to find basic information — for example, they had to start purchasing a membership on the AARP site in order to find out the membership cost. Users should be able to find information before committing to a complex process.

6. Stranding Users on Microsites

Sites that create separate, secondary sites for sections or specific types of content need to be cautious about stranding users on those sites. Many of our study participants moved to a new site or subsite without realizing it and then struggled to get back to the main site because the subsite offered no option for return. Some were able to navigate to the parent site by repeatedly using the browser’s Back button or retyping the site’s URL, but many did not even notice that they had switched sites (because of the similar look-and-feel of the parent and child sites) and wondered why the navigation they had used before was gone.

Think twice before creating a separate subsite. If you do build one, make sure that users can easily navigate back to the parent site as needed.

The British Red Cross main site (www.redcross.org.uk — top screenshot) and its training subsite (British (www.redcrossfirstaidtraining.co.uk — bottom) look very similar, use the same logo to link to each site’s respective homepage, and the same first navigational category (What We Do). Users looking for a first-aid course were moved to the training site and were disoriented when they tried to go back to the main site.

7. Poor Search Results

Users turn to search out of preference, as a last resort, or when they know precisely what they’re looking for. In any scenario, sites need to support users by providing strong search results.

Unfortunately, site search is still a major weakness for many websites. Some sites return results that do not match users’ queries. Others search only some of the site content but don’t clearly disclose that to the user. Results that are poorly named or accompanied by useless summaries leave people guessing the content behind the link. Ads interspersed with site-search results surprise users and lead them away from the site.

Regularly review search logs to learn more about your users’ search behavior and your search engine’s successes and failures. Use content tagging and features of the site’s search tool, such as Best Bets, to promote the most appropriate results for specific queries.

8. Flawed Filters and Facets

Facets and filters generally improve user experience. Users can narrow down their search to the exact resource, product or content they need. However, simply adding facets and filters does not ensure better usability. These tools need to support real users and real user needs.

Facets and filters define the search space for users, and different criteria help in different contexts. Employees looking specifically for last Tuesday’s PowerPoint presentation on sustainability can benefit from narrowing by document type and date, but also by topic. An ecommerce site might want to allow shoe shoppers to narrow by heel height and outerwear shoppers to narrow by warmth rating.

Sites create flawed facets and filters when they attempt a one-size-fits-all approach. The same criteria and characteristics may not apply across all content types. Be cautious in limiting users’ selections to an either-or approach, as well. Furniture shoppers may be looking for blue chairs, or for chairs that are any color other than blue. Both needs should be supported.

Content must be tagged correctly and reliably to produce relevant results. For instance, on the AARP site users looking for a chicken recipe were quite confused when 6 of the top 10 results did not include chicken in the recipe.

Maplin.com: Users could not easily locate Bluetooth speakers from Maplin that cost less than £50. There was no way using the site’s filters to see all items matching their price criteria; instead, they had to run separate queries for several price subranges. Users had to select each price range one at a time (such as £40–£50 and £30–£40) and then remember which items were available in each range.

9. Overwhelming Users with Information

Poorly organized information leaves users struggling to find what they need. Dense walls of text make it difficult to scan for information of interest. Overloaded pages are filled with items competing for users’ attention.

Remember that users scan, not read, online. Make it easy for users to pick out information of interest, by writing for the web: use short sentences and paragraphs, bulleted lists, headings, and bolded keywords.

The Headphone.com product description for the Shure SRH440 Studio Headphones provided quality content, but the length and presentation of the information (several long paragraphs in a narrow column), made it hard to scan for the important, differentiating features of the headphones.

10. Hidden Links

For years, our usability research has shown that users often ignore or overlook content that resembles advertising or is placed in a page location typically used for ads. This problem still exists and is even worse when content is listed alongside actual advertisements.

Site designers sometimes think that adding more design elements, such as a border, background color or graphic to a link will make it stand out. The result is commonly the opposite: The fancier the design around a link, the more users might mistake it for an advertisement.

Pitfield London included information about operating hours and a link to the menu in the right column of the page, above an animated graphic of a coffee cup and a column of advertisements leading to other sites. Users on this page had difficulty locating the café menu due to its placement and presentation. The site similarly used a banner-like design to lead to Pitfield London in the Press.

Progress Has Been Made: There’s Progress to Be Made

We can safely assume that no one sets out to create a poorly designed website. If these problems have been well-known for years, why do they persist? Potential answers to that question could likely fill a book. Some of these mistakes likely reflect a deeper, organization-specific UX-strategy failure. For example:

Problems with site information hierarchy can be tied to organizational structure or a company’s internal politics.

Content issues arise when different departments create content without being aware of each other and without following an overarching content strategy.

Poor search results may stem from poor content-management systems, flawed or missing tagging of content, or a poor search tool.

The reasons behind these problems are less important than fixing them. Many, if not all, of the mistakes listed above could be easily identified by including user research and usability testing in the website-development process and paying attention to the findings from that research.

Websites will never be perfect. No site is. There is always one more form field to be fixed, one more piece of content to be edited, one more navigational category to be determined. But knowing what needs fixing is essential to moving in the right direction.

When doing user research, hold on to old findings. As design preferences change 5 years from now, those old findings may keep you from making the same key usability-related mistakes a second, third, or fourth time.

More on how to make a website that works for your users and your business in the courses on Web Page UX Design and Information Architecture.

[warmdevs]

New Post has been published on https://warmdevs.com/minimize-the-need-for-customer-service-to-improve-the-omnichannel-ux.html

Minimize the Need for Customer Service to Improve the Omnichannel UX

Over the last few decades, organizations have evolved tremendously in how they deliver products and services to customers. Not long ago, there were only a handful of ways to interact with an organization: visit its brick-and-mortar location (in fact, we used to simply call this a “location, ” without the need for a modifier), call it, or, once the web emerged, visit its website. One-on-one interactions between service representatives and customers were a large part of the relationship. However, as technologies advanced, many of our interactions with businesses moved online. We can now do just about anything on the web — from opening a checking account to buying our weekly groceries, without ever speaking to an actual person. Independence from customer service is often the goal for many of us (and for organizations as well): we want easy, convenient, and fast business transactions in the comfort of our own home or in the palms of our hands.

Although web-based customer journeys may seem simpler than the journeys of the past, they can actually be quite complex. Today’s customers interact with organizations across various devices and digital channels. Therefore, to deliver a seamless and uninterrupted omnichannel user experience, companies must have a rich understanding of their users’ behaviors and needs. When they succeed in doing so, web-based customer journeys work well and are ideal for both parties, but in many cases there is a breaking point that requires users to contact the organization for support.

We conducted two diary studies to understand how customers interact with organizations using various channels and what organizations do to provide successful omnichannel customer experiences. We asked people to report every interaction they had with an organization as they completed tasks such as shopping for insurance, opening a checking account, or making a large purchase. Most of these can be characterized as medium-complex tasks: not a quick question, but also not a horrendously complicated problem.

Of the 45 unique customer journeys we analyzed, 64% included at least one user-initiated point of direct contact with the organization, and some of these involved multiple contacts. The web is a mission-critical channel for organizations to conduct business, so it is alarming to see that only a third of customer journeys could be completed online without requiring the customer to contact the organization for support. This means a 2/3 failure rate for a self-service goal such as decreasing call-center costs or improving customer satisfaction.

Why Customers Contact Organizations

When we analyzed the data from our diary studies, we noticed that people contacted companies for one of four reasons:

Service Problems. These occur when the outcome of an interaction with a company is not as expected. Examples include:

One user had opened a Citibank credit card and he was supposed to receive $300 in return after completing a certain number of transactions in a three-month period. When that payment didn’t come, he contacted Citibank to resolve the issue.

Several other users contacted retail stores when their merchandise arrived broken or defective.

Roadblocks. These occur when users cannot complete a task on their channel of choice for various reasons (e.g., they’ve encountered an error or the task is not supported) and must switch to a different channel to complete the task. In these situations, only very motivated customers persevere. Many customers who are not brand loyal give up and abandon their task in favor of a better experience with a competitor. For example:

One user needed to add another item to his online grocery order just after he had submitted it, but the website did not support changing the order. He called the store to make the update.

One user attempted to sign up online for a Charles Schwab checking account, but received an insurmountable error during the application process. She reached out through online chat and also made a phone call.

Missing or confusing information. Many users in our study had information needs that were not met at specific points in their journey, because the site content was ambiguous or absent. In some cases, customers contacted the organizations for reassurance and confirmation that they were interpreting complex information correctly before proceeding. Some examples:

One user who was looking to get a home-equity loan on the USAA website found a note indicating that the home-equity loan product had been suspended. She called USAA to ask how long it was suspended.

A user purchasing a Nest Protect thermostat had researched the two models available through the website and social media, but decided to call a Nest technician to help him understand which model worked best for his needs because the information on the website and other channels was not detailed enough. (The need to compare and contrast choices is key for web usability, but often poorly supported.)

A Singapore user shopping for travel insurance on DBS Bank’s site could not figure out from the policy description whether it covered lost luggage or only delayed bags. He indicated he would call DBS to clarify the information.

Perception of complexity. In a relatively small number of cases, users simply preferred to complete tasks by working one-on-one with a representative, because they felt that the task was too complex for the digital channels available to them. (This is an example of a limitation imposed by the communication channel’s capacity: when users think that they need to transmit too much information through a narrow-capacity channel, they usually switch to higher-capacity one — digital or in-person). In these situations, the tasks may have been supported online, but users chose not to use those channels. Here’s one example:

One user who was shopping for car insurance visited the websites for Farmer’s Insurance and Good Sam Insurance, but instead of researching and getting a quote online, she chose to call and discuss her options with agents from both companies.

In our data sample, 36% of all tasks (16 out of 45) did not require customer service. Missing information was the most frequent reason for contacting customer service (38% or 11 out of 28), followed by service issues and roadblocks (24% each or 7 out of 29). Perception of complexity was the least common reason (14% or 4 out 29 tasks).

Pie chart breakdown of the reasons for contacting customer service for 29 of the 45 tasks studied.

The most common method of contacting customer service was by telephone (18 out of 29 tasks). Email was the second most common method for reaching out for support (9 out of 29 tasks), followed by online chat (2 out of 29 tasks) and social media(1 out of 29 tasks).

Pie chart breakdown of the methods used for contacting customer service.

An important conclusion from our data is that most of the time contacting customer service reflects a failure in the user experience. Even in the case when people choose not to engage with an online interface from the start, the expectation of poor user experience was the cause behind that decision.

Any time customers’ online tasks are interrupted and they are forced to contact an organization, other unnecessary touchpoints are added to their journeys. Interruptions and channel switching (from digital to human, or otherwise) degrade the customer experience. Over time, they negatively impact key metrics like customer satisfaction and loyalty, and ultimately your business’ bottom line.

Minimize the Need for Customer Service

If a user contacts customer service, it means your online channels have failed to address that user’s needs. Aim to eliminate the customers’ need to contact your organization. Not because you don’t want to support your customers, but because you want your customers to be empowered to complete their tasks however they find convenient. Let’s be honest, nobody wants to sit on hold to talk with a support representative, no matter how nice that person might be.

The two key components to minimizing the need for customer service are:

1. Understanding the customer journey. Step away from the features and functionality you provide on each channel and take a moment to understand the context around how users move through your solutions to complete tasks. What triggers them to go to your website? Is it a monthly newsletter, a promotional mailer, a link in a social post, or an advertisement? What are the stages they go through as they engage with your products? Each of these contexts may be associated with different user expectations. Identify:

Customers’ expectations for each of these contexts

Customers’ information needs at every step of their journeys

Devices or channels that customers choose in each of these different contexts and at different stages

Likely transitions from one channel to another and users’ expectations around these transitions

When she was browsing Air Asia’s Facebook page on her phone, a study participant tapped on a deal for a flight to New Zealand during the month of March. She was taken to a desktop page containing an exhaustive list of deals for a variety of destinations and time periods. She attempted to use the filters at the top of the list to locate the New Zealand deals, with little success. She explained, “This brings me to the whole page with all promotions, but it would be better if it could bring me to just this promotion for the month of March.”

2. Designing for the journey. Organizations must shift their mindset from individual-channel solutions toward one overarching solution that spans multiple channels and stays intact regardless of how a customer chooses to engage.

Design channel and device solutions that align with channels’ roles in the customer journey and with context of use and users’ expectations. Support transitions between channels: every time a user must change channels during a task, there is an opportunity for failure (as shown above in the Air Asia Example), often resulting in the need to contact customer service.

Google Maps: Users commonly look up directions to a location on a tablet or desktop first, to get an idea of where they are going. Then they access the directions again on their phones to navigate to their destination. Google supports this channel transition by providing an option to send the directions to the phone.

An important part of designing for the customer journey is to understand and eliminate common reasons for contact. Work closely with your customer-support team to identify the most common complaints and questions received. Do not ignore any method of contact, be it telephone, email, online chat, or social media. Then focus your attention on addressing the root problem that has led to these common issues. Understand information needs throughout the user journey and make sure that they are addressed properly, either by reworking confusing content or by creating new content. Identify and eliminate roadblocks and laborious channel transitions for key customer journeys.

Make Customer Service Easily Accessible

A simple way to minimize customer calls is to not provide a phone number or other contact information. Don’t do it. Reducing the need for customer service does NOT mean eliminating customer service. In fact, since you can’t possibly plan and design for every situation in which someone may want to speak with a representative, make it easy for your customers to contact your organization at any step in the journey. Some of the most frustrated users in our research were those who needed to contact an organization and could not do so. Some companies’ contact information was inexistent or very difficult to find, so people thought that the company was trying to avoid being contacted entirely. In these situations, customers resorted to Google or social channels to find contact information for the organization. And the organization lost their trust — a one-way ticket to the sand below the trust pyramid that had probably taken the company’s brand team years to build.

So, in the spirit of eliminating roadblocks and streamlining channel transitions, provide a clear path for customers to contact your organization.

DBS bank includes a path toward multiple contact options in the right rail of its complex travel-insurance product page.

Make transitions to a contact channel seamless. If you provide a path to contact, make this transition as effortless as possible. Take advantage of technology and device capabilities to do so. Whenever your organization sends a customer to another channel, ask yourself what the next step will be and how you can make it easier.

Left: The UPS My Choice iPhone app lets customers enter a delivery address in order to receive delivery-status notifications. However, when UPS doesn’t recognize the entry as a residential address, it simply presents a roadblock, with an error message that basically says “Figure it out own your own.” Right: Southwest Airlines’ iPhone app does not support booking to international destinations. Instead of presenting the user with a roadblock, it provides the error message along with pathways to two possible channels where users can resolve the issue. The guidelines for good error messages are 35 years old, yet only one of these two companies complied.

Provide multiple options for contacting customer service. Every customer issue has its own unique circumstances, context, and level of urgency, so don’t force all of your users down the same path to contact your organization. Provide people with the flexibility and level of information they need in order to choose the contact channel best suited for their situation.

One participant in our study had a simple question for his auto maker, Nissan. He chose to chat with a Nissan support agent via Nissan’s mobile website because he was riding the bus on his way home from work and it would have been difficult to have a phone conversation on the noisy bus. If Nissan had only provided a customer-service hotline number, he would have had to wait until he got home from work and navigate his way through a call tree to get a very simple question answered.

Venn diagram of common customer-contact channels and reasons why customers choose each of them

Overstock.com gives its users several options to contact customer care. It also provides helpful context about the response time on each channel to set expectations and help people choose the right option for their personal situation.

Conclusion

We often design for the happy path through our products and services and we don’t necessarily plan for direct customer contact to be part of their journey, but customers often still need one-on-one support to overcome issues. Understanding the common reasons why customers make contact and addressing the underlying problems in your omnichannel solutions will reduce the need for customer contact and create an omnichannel ecosystem that allows users to self-serve without interruptions and roadblocks. In situations where customers do need to reach out through a contact channel, provide options to do so and make those transitions as effortless as possible.

[warmdevs]

New Post has been published on https://warmdevs.com/wechat-chinas-integrated-internet-user-experience.html

WeChat: China’s Integrated Internet User Experience

The big Internet companies of the Western world have proclaimed “conversational user interfaces” and chatbots to be the Next Big Thing, with major initiatives led by Amazon, Apple, Facebook, Google, and Microsoft. Even Taco Bell has a “TacoBot,” a service that allows users to order and customize their tacos using a natural-language UI.

Much of this hype stems from angst generated by the success of the Chinese WeChat service, which had 700 million users as of April 2016. WeChat has been touted as the poster child for conversational user interfaces. In this article, we report on user research we did in China with WeChat users. The study aimed to uncover practices in which WeChat users engaged, as well as why and in which cases its users preferred to use WeChat instead of regular mobile websites and apps.

WeChat: All You Want in One Place

As the name implies, WeChat started as a mobile instant-messaging (IM) app, launched by Tencent in 2011. However, WeChat quickly added other features; today, it is no longer primarily an IM application, but it also includes:

A payment service. 200 million users have connected their bank accounts to WeChat. This capability allows person-to-person money transfer, including 8 billion “red packets” (so called because gifts of lucky money were traditionally given in red envelopes) sent during the 2016 Chinese New Year celebrations, as well as easy payments to either online or real-world businesses.

A platform for companies’ online presence, with 10 million “official accounts.” Official accounts are WeChat-supported mini-websites that are easy to establish and especially convenient for small businesses, compared with the high-tech skills needed to build and maintain an interactive website.

An ecommerce platform, which is particularly convenient because it’s integrated with the payment service.

Social networking. The “Moments” feature is somewhat like a Facebook wall where friends can post messages in different formats (e.g., text, audio, pictures, stickers, videos). Furthermore, message dialogues allow users to interchange text, audio, pictures, stickers, short videos that are taken within WeChat, links, contact cards, and documents.

Other social services, such as “people nearby.”

Games.

A broad range of 3rd party services. Examples include ordering a taxi, booking train and airline tickets, buying movie tickets, and paying utility bills.

Integration with the physical world. QR scanning is widely used to quickly access WeChat official accounts, and exchange information (for example, contact information). There are even plush toys that connect to WeChat.

The Mon Mon plush toy for little children to interchange voice messages with their parents’ WeChat accounts. (Still from advertisement created by the vendor, the Chinese toy company Dan Dan Man.)

In total, more than a third of the time spent by Chinese users on mobile is on WeChat. No wonder Western companies want to get in on the action.

However, the key UX advantage of WeChat is not that it grew out of a chat service; it’s the integrated user experience. Each individual service is fine, but not necessarily better than those offered by other companies. In fact, our user testing of WeChat revealed many usability problems in various areas. What’s superior is how these services play together and reinforce each other. Most importantly, these benefits are not the result of a superior, simple conversational UI; instead, they are often provided through a simplified graphical user interface (GUI).

WeChat is similar with a megaportal providing access to a huge number of services. It’s almost a parallel, alternate web, whose explosive evolution seems to be rooted in two different aspects:

A huge initial adoption of the IM service and, later, of the payment ability

The scarcity of mobile-optimized sites and services on the Chinese web

The first aspect led to widespread adoption and provided a convenient substitute for credit cards (a less common method of payment in China); the second provided one (and often the only) convenient way of online access to a business or a service.

We asked our Chinese research participants to draw their mental models of WeChat, and as shown in the following examples, many of them considered the smooth payment service and the official accounts more central than that the chat service.

Mental models of WeChat, as drawn by two of our study participants.

User Research

We conducted two rounds of user research in China:

A diary study, in which 12 participants logged their WeChat use for 7 days:

Users sent us a WeChat message each time they used a special WeChat functionality.

Users also completed two questionnaires at the end of each day: one about their use of basic WeChat features and one about their use of special WeChat features. Basic features were defined as messages and chat with friends, checking Moments (the Facebook-wall equivalent), and reading articles published by official accounts. All other activities were considered special features; these included interacting with official accounts, posting to Moments, using payments, scanning QR codes, and shopping.

A usability test, using the thinking-aloud method, where 14 participants used WeChat and other mobile apps to perform representative tasks during 90-minute sessions. At the end of these sessions, most users sketched their mental models of WeChat.

About half of the users were in Beijing (one of China’s advanced “tier-1” cities, with 21 million inhabitants) and the other half were in Tangshan (a smaller and more traditional industrial “tier-3” city, with 7 million inhabitants). The specific location doesn’t usually matter for usability testing, but, in this case, market research suggests that WeChat penetration varies in different parts of China: 93% market penetration in tier-1 cities vs. 43% in tier-3 cities. Local services (e.g., offline businesses using WeChat official accounts and payment tools) also differ in these two types of cities.

About half the study participants owned iPhones and the other half owned Android phones.

Here are some examples of usability-testing tasks (translated into English):

You are planning a trip to Beidaihe next Tuesday. Use WeChat to find what train tickets are available.

Use WeChat to check how crowded it is now at Sanlitun.

Your friend recommended “Jacky’s Crawfish.” Order some crawfish, and have it delivered to our testing location. Please stop before just before completing the purchase.

WeChat Payments Rule

In the diary study, fully 32% of all recorded WeChat activities were payments, confirming this service’s central role in WeChat. On average, during the 7-day diary, each participant made 6 payments — about one per day. The majority of the payments were directed towards offline businesses or physical persons, and actual ecommerce payments were in the minority.

Recipients of WeChat payments made by our study participants.

The main reason for the popularity of the WeChat payment service was its smooth user experience and its ability to cut across channels and across the business/social divide. As one study participant said, “When I am paying with WeChat, I only need to take my phone out — no bank card, no signatures, no cash, no change — so convenient!”

The next two major uses of WeChat were Moments (the Facebook equivalent) with 16% of use and official accounts (miniwebsites hosted by WeChat) with 10% of use. The many other WeChat features accounted for the remaining interactions and thus summed to 42% percent of the overall use.

Integration and Consistency of User Experience

What makes WeChat superior is its integration: many features that all work together and build on each other. Once users subscribe to an official account, they can receive content pushed by that account. They can also access the WeChat page of that account and find more relevant information about the company or read associated pieces of content. They can purchase products or send money to the company. Thus, subscribing to an account opens up a world of interaction possibilities with that company, all strongly tied into WeChat.

Palace Museum account: The user can select one of the tabs at the bottom of the screen to interact with the Palace Museum (top left). Each tab opens up a submenu (top middle). A list of articles about the Palace Museum accessed through one of the menu options (top right). A WeChat “webpage” for the Palace Museum can be accessed through another one of the menus (bottom). (Note, however, that the Palace Museum’s webpage accessed through a regular mobile browser is actually not mobile optimized.)

These WeChat services are often not available through other mobile channels — for example, the Palace Museum does not have a mobile-optimized website available through a mobile browser. Thus, many users will prefer to interact with a company through the consistent and relatively predictable WeChat interface instead of risking to go to a different channel and have an inferior user experience.

The Palace Museum website as accessed through a mobile browser is not mobile optimized.

For companies, WeChat is an inexpensive way to ensure a presence on mobile; that presence has the advantage of offering a standardized, consistent user experience. Users are likely to succeed when engaging with an official account because most of them look the same — they are the equivalent of websites designed according to the same design pattern. The interaction is thus easy to learn and is made of the same WeChat supported building blocks that people are already familiar with from countless previous interactions with other companies.

WeChat vs. Traditional Websites

Although the mobile web is perhaps not as strong in China at this point (with many sites not having mobile versions), it is most likely that WeChat and regular websites will continue to coexist because they each have advantages and disadvantages. Our users didn’t expect the WeChat official accounts to cover all their needs, but they saw them as an easy way to access commonly used features.

Our users said that they preferred using companies’ official accounts on WeChat for several reasons:

Ease of access. WeChat is the primary QR-scanning application, freeing users from typing which has high interaction cost on mobile phones and is particularly unpleasant for older users.

Ease of interaction. As discussed above, it is easier to interact with an official account — you know where to click and how to use it because they all share the same basic interaction style.

Access to small businesses. Many such business (e.g., a fruit shop, handcraft, interest-based organizations) are unlikely to invest in a real website.

Special discounts. Followers of a WeChat account often receive promotions or exclusive campaigns.

Up-to-date information. There’s obviously no fundamental reason why a company’s website could not be kept as current as an official account, but users’ perception was that websites were more static, whereas WeChat accounts were updated more frequently.

While WeChat official accounts have their benefits, users continued to use traditional websites in parallel with WeChat, for several reasons:

More complex functionality, beyond the simple WeChat-supported UI

Spam: Too many articles pushed by WeChat official accounts can easily become annoying, even for followers of those accounts. Some abuse users’ trust and flood them with ads.

Closed system: WeChat excludes access to frequently used services such as Taobao (a major ecommerce site) and important music providers.

Impaired findability: Often different accounts will have similar names, and some of them may belong to a legit company and others may be fake and trying to impersonate that company. To make things worse, the same company may have different WeChat accounts, and the accounts themselves may be of different types (service accounts vs. subscription accounts) with different capabilities (service accounts will support payments, while subscription accounts won’t). Finding the right account can thus be challenging for users.

Trust issues: Some articles on WeChat spread fake information.

WeChat search results for Palace Museum (left) and for Xuxian, the fruit business (right). Checkmarks indicate that the account is verified by WeChat. But these verification checkmarks do not help identify the desired account, because many verified results may actually be returned. Some of these results will belong to the same company but will have different functionalities, and some will belong to a fake company that may take advantage of a better-known brand’s name. Users can differentiate companies by clicking on their introduction page or checking their messaging history, but these operations are time consuming.

Some of these problems are similar to those faced by users of traditional search engines, whereas others are unique to WeChat, especially the peculiar distinction between subscription and service accounts, which breaks the integrated model of the service and seems to be a legacy of WeChat’s history.

WeChat Usability Problems

Our user testing revealed plenty of usability problems in WeChat and the various official accounts we tested. This is no surprise, since the perfect user interface hasn’t been built yet, but should come as a warning to those technology enthusiasts who believe that simply moving to a new platform or embracing a new interaction style will result in great user experience. On the contrary: any design will still need polishing and adaptation to users’ real needs, as opposed to companies’ internal hopes for what their customers will do. We’ll just give two examples here.

Team Maker allows users to define group events. The setup screen requires users to enter a name for the new event, but 10 of 14 study participants overlooked this field and went straight for the second field (denoted by a clock icon) to enter the time of the event.

Team Maker’s official account: The top field had the instructions “Event Title (Required),” but it was overlooked by most test users.

Several design issues combined to cause this problem:

Banner blindness possibly made users overlook the top field because of the graphic.

The prompt was shown as a placeholder text within the field, which is less noticeable than a separate field label.

That field was not aligned with the other fields in the form, and thus looked as if it was not part of a form, but rather a static title.

The activity title prompt was shown in low-contrast text, especially compared with the brighter text used for the time field.

Users may have had a selfish-action bias, preferring fields related to their own needs (the time of the group meeting) over fields related to system needs (the title).

City Heatmap is a WeChat feature that indicates how crowded a given location was. This feature is available under Wallet → Public Services → City Heatmap. Our users had great difficulty finding it. This navigational path was simply not expected, and suffered from a convoluted information architecture and problematic naming with poor information scent.

Such issues are not special to WeChat and we’ve seen them many times in usability studies. New platforms have old usability issues, because the main determinant of usability is the human mind and people’s needs, not technology.

Text-Based Interaction Gets Limited Use

WeChat supports two different types of interaction with an account:

Text-based: Users can text a number or a keyword to a service account and receive an IM reply from that account. (The reply can be automatic or can be generated by a customer-service representative in charge with responding to WeChat queries).

Menu/link based: Users can select a link embedded in a text message or they can use the menu buttons available on official-account interfaces and in the chat window.

Sometimes all these interaction methods were available for an account, but in other situations only the more basic text interface was supported.

Palace Museum’s official account: users can interact with this account either by texting back one of the numbers 0–6, or by tapping the GUI menu button in the bottom left corner of the screen and selecting some of the available options. On some pages (but not in this case), the numeric options inside the text message are themselves tappable links. (In fact, many of our test participants tried to tap the options inside the message and were disappointed when that action did not produce any result.)

In our diary study and in the usability-testing sessions, we noticed only limited use of the text interface. In particular, some users texted back a number in response to a first message received after subscribing to a service account. They also occasionally texted back a keyword hoping to get back matching search results from that company. However, most users much preferred a menu-based interaction over the more effortful text-based interaction. Whenever the bottom menu was available for a service account, users relied on it, as a more expedient way to interact with the company. They also attempted to tap on the numerical options displayed in the chat message as an even faster way to make a choice.

Our initial interest in WeChat was to better understand conversational text interfaces. The appeal of such natural-language interfaces is that they supposedly allow users to simply express their goal and then sit back, while letting the site do all the work for them. No clicks or taps are involved once the initial query has been formulated, so in a sense, such interfaces have the potential of getting closer to the holy grail of usability ­— zero interaction cost. (Such interfaces do assume that users will be able to formulate a goal — an assumption that does not always hold, because users do not always know the search space well enough.)

We did not find evidence for sophisticated natural-language understanding in WeChat. (Those human-staffed official accounts that reply to individual user queries are definitely not scalable in the long run and were not the norm in our study.) Instead of a true conversational text interface, we discovered a system that warrants the interest of an evolutionary web scientist for the way in which it mimics the evolution of the mobile web — a world in which historic, simple interaction such as the numeric-menu selection and keyword-input coexist with more sophisticated menu-based interfaces or GUIs. These latter methods are newer and often preferred by WeChat users for their lower interaction cost, yet, at this point, they have not yet completely erased the chat-box interface.

Conclusion: WeChat Integration Builds Convenience

If conversational interfaces are not a strength of WeChat, what is the secret behind its success? When we asked our users for their top likes about WeChat, the most frequently mentioned attribute was convenience.

WeChat shines in several ways that build convenience:

A wide variety of services and features

Integration of these features among themselves and, especially in the case of WeChat payment and QR codes, with the physical world

Simple, consistent interaction that stays the same across different official accounts — in marked contrast to the diversity of user interface techniques that plague websites

Integration and simplicity are especially important because WeChat is mainly a mobile service. User interfaces are more difficult to use on mobile devices because of their screen-size limitations and error-prone touch input. A simple interaction style that provides a seamless omnichannel customer journey is essential for mobile designs.

Different usability aspects of WeChat were cited as major positives (second most common after convenience) and as major negatives by our study participants. No UI is completely good or completely bad in terms of usability, and while this interface had many good parts, there were others that definitely needed improvement.

Our study participants’ likes and dislikes about WeChat.

The interplay between usability and convenience points to one of the major contrasts in our field — that between usability and user experience (UX). While usability applies to well-designed user interfaces (UIs), usability is not enough for a good UX. Users need useful features that address their real needs instead of their imaginary ones. When a system is convenient, it goes beyond usability and succeeds in being useful and simplifying a previously complicated task.

WeChat does all of this, and that’s why it’s successful. Not because it grew out of a chat site or originally used a conversational user interface.

[warmdevs]

New Post has been published on https://warmdevs.com/mobile-first-is-not-mobile-only.html

Mobile First Is NOT Mobile Only

In a recent study, we found that hiding navigation under a menu significantly decreases the use of the navigation and also degrades the overall user experience both on desktop and on mobile.

While hiding navigation under an expandable menu can be a necessity on a small mobile device, it is not a practice that is native to the desktop; rather, it is a trend inspired by mobile and reinforced by responsive design, a technology that allows the same content and functionality to be present on different screen sizes, but rearranged in layouts that are appropriate to the available screen spaces. Many responsive sites use a mobile-first approach to designing for multiple devices: they start with a design that is optimized for mobile and then port it to the desktop, under the assumption that simple is better across all devices, and a design that is simple and condensed enough so that it works for small screens will also provide a good user experience on large ones.

In this article we examine the consequences of porting mobile-first designs to the desktop, with a focus on navigation.

About Our Study

NN/g partnered with international remote-usability-testing firm, WhatUsersDo, to test 3 different types of navigation: hidden, visible, and a combination of hidden and visible navigation. As described in the study methodology, 179 users participated in our study; they completed tasks on 6 different websites, on desktops and smartphones:

7digital (music, e-commerce)

BBC (news)

Bloomberg Business (business news)

Business Insider UK (business news)

Supermarket HQ (e-commerce)

Slate (news)

For each site, we designed two types of tasks that involved finding specific content:

A navigation-optional task, which could be accomplished without using the navigation or search on the site, by simply selecting an item on the homepage

A navigation-required task, which could only be accomplished through the use of navigation (or search — so even these tasks could be done without navigation)

All the sites in our study were responsive, with the exception of Business Insider UK. By looking at the patterns that all of these sites employed, whether responsive or not, (e.g., the use of hidden navigation, repeating the navigation at the bottom of the page, using a search icon instead of a search box), we also surmise that most if not all of these sites were designed using mobile-first principles.

As discussed in our other articles, we collected several metrics; here, we focus on one of them: navigation use. This measure captured whether participants clicked on the navigation options during their tasks.

Navigation Usage: More on Mobile than on Desktop?

When we look at the differences between mobile and desktop navigation use, it is highly surprising that, on the sites that we included in our study, the navigation was used a lot more on mobile than on desktop. (This difference was statistically significant with a paired t-test, p <0.05.) Not only that, but comparing the navigation use on each site, on 5 out of the 6 sites, the navigation was used significantly more on mobile than on the desktop. (These differences were significant by N-1 2 proportion tests.) The exception was 7Digital, where we also recorded more navigation use on mobile but the difference was not statistically significant, and thus may just have been random.

Navigation usage was higher on the mobile versions of the sites than on the desktop versions of the sites.

This result is unexpected for several reasons:

Making navigation easy to access is a notoriously hard task on mobile. Mobile pages are long and often as soon as users scroll down the first screenful, navigation placed at the top of the page is no longer visible. If they want to access it, they have to scroll back. (Sticky navigation or back-to-top buttons are sometimes used to alleviate this problem, but they often get ignored by users.)

Making navigation discoverable is also notoriously difficult on mobile. Lucky sites that only have 4–5 options in their main navigation can afford to make these options visible at the top of the screen, but the majority of sites must hide at least some of the navigation under an expandable menu. Because these menus hide a wide variety of items, by necessity, they have vague labels such as Menu or Browse with low information scent. Users must actively think about turning to them as a problem-solving strategy when they are in trouble; they are not primed by a label that resembles the content that they are looking for. As a result, people often ignore these menus, and sometimes they forget about them even after they’ve used them once within the same session.

So how is it possible that on this platform with hard-to-use navigation, the navigation is still used a lot more than on the desktop? Did the mobile sites in our sample have exceptionally good navigation designs? If you look at the individual sites, you’ll see that they were not much different from the many navigation implementations on countless other mobile sites: either the much reviled hamburger menu or an homologue, plus, in some cases, a number of visible navigation links.

No. The proper way of describing our findings is not that these sites had discovered the secret of mobile navigation or that there was more navigation on mobile (in fact, the overall navigation usage on mobile was only a modest 63%), but, rather, that there was less navigation on the desktop. While these two statements are logically the same, the twist in perspective allocates the guilt where it belongs: to the desktop user interfaces, which were not up to the demands of this platform.

And why were the desktop designs worse? Because they were ported from a different platform — mobile. In other words, all of these sites were likely built to be mobile-first: they were optimized for mobile, and as a result the desktop user experience suffered significantly.

You can perhaps think of another possible explanation for why the navigation was used more on mobile. Because the mobile screen is too small and shows only a little content at the time, users have to scroll more to get the same amount of content that is displayed on a desktop screen. (That is indeed, a consequence of the fact that the mobile–user communication channel is narrower in capacity, and it’s also the reason why comprehension is poorer on mobile). So maybe mobile users got tired of scrolling, so they decided to use navigation instead of fishing around for information on the page. That may be true; however, remember that our study included both navigation-required and navigation-optional tasks. If people were simply tired of scrolling on mobile, you’d expect to see more navigation use on mobile for the navigation-optional tasks that could be accomplished by clicking on a link on the homepage. But there should be no difference between mobile and desktop for the navigation-required tasks, that required the use of navigation to be completed.

But our data says otherwise: we found statistically significant differences for mobile and desktops for each type of tasks, both navigation-dependent and navigation independent. In other words, the reason why people used navigation less on the desktop was not that they didn’t need it; even in those situations where they couldn’t accomplish the task without the navigation, they used it in only 54% of the times, compared to 77% on mobile.

Navigation usage was higher on mobile irrespective of task type. Navigation-dependent tasks that required the use of navigation to be completed had an overall higher rate of navigation use. However, the navigation usage was still higher on mobile than on desktop even for these tasks.

Design Patterns Borrowed from Mobile

Which were some of the more important mobile-design patterns that the sites in our study borrowed for the desktop?

Hidden navigation. Perhaps the expandable navigation menu (such as the hamburger menu) was the biggest offender and certainly the mobile-inspired pattern most relevant to our study. We’ve seen from many qualitative studies that it doesn’t work on the desktop, but sites still insist on using it.

Repeated navigation at the bottom of the screen. One of the sites (7Digital) in our study has an expandable navigation menu at the top of the page and also repeats the navigation options at the bottom of the screen. This practice is often used on mobile to prevent users from having to scroll back to the top of the page to access the navigation positioned there.

Sticky navigation at the top of the page. Some desktop sites (e.g., Bloomberg, Business Insider UK) chose to make the navigation sticky: that is, it remained present at the top of the page as users scrolled down or when they started to scroll up.

Navigation in the top right corner. One of the desktop sites (Slate) placed the navigation in a highly nonstandard position for the desktop: the top right corner. This placement for the hamburger menu is a lot more common on mobile (where, in apps, the top left corner is often reserved for the Back button).

Search icon instead of search box. Many of the sites also got rid of the search box on the desktop and preferred to use a search icon instead. We generally recommend against this practice on the desktop; we’ve heard countless users complaining about having to locate a tiny icon on a large screen.

Slate desktop (left) and mobile (right): the desktop site used a hamburger menu at the top of the right rail, in the top right corner of the page, a position highly nonstandard for desktop but fairly common on mobile. It also displayed a search icon instead of the traditional search box that people expect on the desktop.

BBC desktop (left) and mobile (right): The desktop site used a navigation bar with a More tab — similar with the More tab used to fit extra tabs in the iOS tab bar.

Business Insider desktop (left) and mobile (right): The desktop site used a hamburger menu for the desktop global navigation. The top blue bar was sticky: it stayed at the top of the page as the user scrolled down. Other mobile-inspired featured were the image-based, information-depleted layout and the search icon instead of a search box.

None of these patterns are either common or particularly usable or useful on desktop, yet they often work or are necessary on mobile. These sites found them valuable for their small-screen designs, and thought they should apply them to the desktop. Little did they know that they were throwing the baby out with the bath water: the desktop user experience suffered, and they created unnecessary problems.

Optimize for Each Device

In our world of many interconnected devices, it is imperative to design for all of them. Agreed, it seems wasteful to have separate designs for every single device. But, different devices have different capabilities of interaction and different screen sizes. The amount of information that can be displayed on each of these devices at a time varies wildly and the same design will have a very different content-to-chrome ratio on two different devices. For example, on a small mobile screen, a hamburger icon may be noticeable enough, but if you move the same icon to a large 27” screen, it will easily get lost.

Granted, you could make the hamburger bigger, like in the image below, which shows Slate’s homepage if the hamburger icon were sized to take the same fraction of the desktop screen as it does on an iPhone 6S. But we don’t advise you to use a design like this for several reasons:

Right-aligned logos work worse than left-aligned logos (but we retained the right-alignment here for the sake of comparison).

Icons this huge may still be overlooked due to banner blindness.

If you do allocate this much space to navigation, you might as well show the links.

Slate desktop homepage, as tested (left) and with icons resized to take up the same percentage of the screen on a 27-inch monitor as they do on an iPhone 6 screen (right). Since a good 27-inch monitor costs $180, it’s currently a typical purchase for business users.

We cannot ignore these differences when scaling user interfaces. We must take advantage of individual device strengths in order to produce designs that work across all screen sizes.

Porting User Interfaces Creates Terrible User Experience

The history of user interface design has many examples of people replying on the shortcut of porting a UI from one platform to another. It never works:

1980s: Taking a DOS program and porting it to Windows translates into a miserable user experience, as the resulting software doesn’t integrate GUI direct-manipulation features properly.

1990s: Taking a Windows program and porting it to Macintosh results in a substandard user experience, as the application doesn’t feel like a native Mac program. The look-and-feel is simply wrong, and the Apple magazines of the day rightfully savaged such ports in their reviews.

2000s: Taking a brochure or other print collateral and making it into a website results in a sluggish user experience, with little use of interactive features and impoverished navigation. Porting print content to online by making it into a PDF blob is even worse.

Late 2000s: Taking a website optimized for desktop use and offering it to mobile users results in an almost unusable user experience, as people get lost in overly elaborate menus and content that doesn’t fit the small screen.

2010: Taking a magazine designed for paper and porting it to the iPad results in a dreadful user experience, with users stuck into a nonhyperlinked world and crushed by the print metaphor.

Late 2010s: Taking a website optimized for mobile use and offering it to desktop users results in a degraded user experience, as we have seen in this article.

2020? Taking a mobile app and cramming it onto a watch will also be terrible. Let’s hope that history won’t repeat itself, though it surely will.

Tempting as it may be to design once and use twice, it can result in a subpar user experience for one of the platforms, and maybe for both of them. Providing content and feature parity across devices is a great goal, but it doesn’t mean that all the UI elements and the design must also stay exactly the same. Each UI platform has different capabilities leading to different design requirements for an optimized user experience. Serving users on multiple platforms requires a multiplatform design strategy.

[warmdevs]

New Post has been published on https://warmdevs.com/centered-logos-hurt-website-navigation.html

Centered Logos Hurt Website Navigation

Traditionally, websites display a logo in the top left corner of every page (for sites that use left-to-right languages). This design pattern fulfills several critical needs for a good web user experience:

Communicates the current location. Displaying the company logo on every page lets visitors quickly understand which site they are currently viewing. Telling users where they are is essential on the web, where a single click often teleports you to a completely different organization’s site.

Reinforces the brand. The more often users see a logo, the more likely they are to remember the brand. (This is one of the laws of human memory, as explained in our seminar The Human Mind and Usability.) Better brand recognition means people are more likely to use your services and purchase your products. All other things being equal, people are more likely to trust an organization that they know over one they’ve never heard of.

Permits easy navigation to the homepage. Website logos should always be clickable elements that link directly to the homepage. When this guideline is followed, the users can easily ‘start over’ by returning to the homepage, no matter where they are. A fresh start is helpful on large information sites, where users can become disoriented. It’s also frequently used on sites where users attempt several different tasks, because people often want to return to the homepage when starting a new activity. (Even when there is persistent global navigation for switching tasks, users often still choose to go ‘home’ first.)

The top-left placement of logos is so familiar to users that straying from this pattern risks significantly impairing the user experience. For example, we’ve previously reported that right-aligned logos hurt brand recall, based on a comparison of how likely users were to recall brand names when a logo was in the left vs. the right corner.

Centered Logos and Responsive Web Design

Centered logos appear more often on the web these days, perhaps due to the increasing adoption of responsive and “mobile-first” designs. Mobile designs often use the top-left corner to display a menu icon, and shift the logo towards the center of the screen. On small screens, the distance between the top-left corner and the top-center position is usually minor.

But when this design pattern is used on larger screens, the distance becomes significant — as on the website for the Library Hotel below. (The Library Hotel website does actually have an alternative design with a full global-navigation menu, but it does not appear until the viewport width exceeds 1024 pixels.)

The Library hotel website at 1024×768 pixels presents the logo in the center of the page, with a menu icon occupying the top left corner (where the logo would be in a more standard web design).

Effects of Centered Logos on Navigation Success

Positioning the logo in the center of the page on both mobile and desktop layouts may be convenient for designers, but how does this affect the user experience?

To find out, we’ve compared sites with left-aligned logos to sites with center-aligned logos.

About the Study

To understand how logo placement affects the use of the logo as a navigation element, we compared 14 different fashion-retail sites: 8 with centered logos and 6 with left-aligned logos. All of the logos were clickable links to the homepage, and none of the sites offered a text link to the homepage.

50 users participated in this study; each of them interacted with a single site and completed 2 tasks:

Select a gift for a friend that costs less than $100 and add it to the shopping cart. (This task began on the homepage.)

Go to the main starting page of the website. (This task began from the page where they happened to conclude task 1.)

The first task was needed to set the stage for our second task but was otherwise not of interest to the current study.

We used UserZoom’s clickstream tracking to record every action taken by study participants. For each participant, we recorded whether that participant was able to navigate to the site’s homepage in a single click.

Study Findings

Our results show that, on sites with left logos, users are significantly more likely to navigate home in a single click than on sites with centered logos ( p <0.05 with a chi-squared test).

Comparing the failures to navigate in the two conditions, users were 6 times as likely to fail to navigate to the homepage in a single click when the site logo was centered versus left aligned.

A comparison of 14 fashion-retail websites found that, when the site logo was left aligned, users were more likely to navigate to the homepage with a single click — a frequent task that is critical for users who become lost. (Lower bars are better.)

As mentioned above, the ability to quickly return to the homepage is critical for users who become lost or simply want to switch to a different task or topic. Even when global navigation is shown on every page and lists all major sections of a website, many users still go ‘home’ by reflex when they want to start over.

On most of the sites with centered logos, at least some users struggled to navigate to the homepage. An analysis of these users’ behavior indicates that the logo position was a big part of the problem. For example, on the Koshka website shown below, some users clicked the leftmost navigation link (Under $29) instead of the logo.

The green highlighting on this clickmap shows where users clicked when they attempted to navigate to the homepage. Since the Koshka logo is centered, many users accidentally clicked the leftmost link Under $29 to get to the homepage.

In some cases, users eventually did make it to the homepage — but only after several false starts and mistakes. Comparing the steps taken by users on left-logo sites versus centered-logo sites illustrates how painful this process can become.

On Stella and Dot’s website (which had a left-aligned logo), users’ clickpaths to home were clear and straightforward, as displayed in the diagram below. All five users in this example started from different pages, but they all used the clickable site logo to arrive at the homepage with just one click.

On StellaDot.com, which had a left-aligned logo, all users successfully navigated to the homepage with just one click on the logo.

However, on sites with centered logos, some clickpaths back home were much longer. For example, on Madewell’s website, some users clicked the centered logo right away, but one poor soul tried four other links before finally reaching the homepage.

Madewell.com had a centered logo. Most users still clicked the logo to navigate to the homepage, but one user made 4 extra clicks before finally finding the homepage.

Based on these observations, it’s clear that left-aligned logos are better than centered logos for supporting user navigation to the homepage. Note that the left-logo sites in this study still caused some homepage-navigation errors (although far fewer than the centered-logo sites). This is because some users didn’t realize that logos were clickable, especially when the logos followed a flat-design aesthetic. Positioning the logo on the left is good, but an even better approach is to offer both a left-aligned clickable logo and an actual Home link.

Centered Logos and Brand Recall

In a different study, we also measured whether having the logo centered on the page (rather than in the top-left corner) affected how likely users were to remember the brand name.

About the Study

In this study we looked at 4 boutique hotel websites; for each site, we compared two versions: one with a left-aligned logo, and one with a centered logo.

128 participants completed two types of tasks:

Exposure to hotel website homepages: each user viewed 5 different hotel-website homepages, presented in a random order. (Besides the 4 sites reported here, users also saw some sites with right-aligned logos.) For each site, users were randomly shown either a version with the centered logo or one with a left-aligned logo, then answered questions about their opinion of each hotel.

Aided recall test for brand recognition: After viewing and rating all the sites, users completed a memory test which displayed a list of 10 different hotels and asked them to identify which hotels they had viewed during the first part of the study.

Study Findings

Unlike our study involving right-aligned logos, this study did not find that centered logos consistently affect brand recall (this effect was not statistically significant). Some sites had better recall for left-aligned logos and some for center aligned.

A comparison of aided recall for 4 different hotel websites found no significant reduction in brand recall for centered logos. (Higher bars are better.)

It appears that other factors (such as the contrast, padding, and legibility of the brand name) affect brand recall more than the position in the center of the page versus the top left corner. For example, the Nolitan hotel websites had a background image behind the logo, which may have overshadowed the effects of logo position: this main image has strong symmetry around a center axis and creates a visual path leading up to the centered logo position (which was the position in the original design).

We compared the real Nolitan Hotel website (right) which has a centered logo, with an altered version that shows the logo in the top left corner (left).

In the other 3 hotel sites we examined, brands with left logos were recalled more frequently, but the effect was not statistically significant.

Conclusion

When we compare the findings from our two research studies of logo placement on websites, we see that centered logos degrade website usability to some extent, but not as much as right-aligned logos. In other words, logos should lean left. We speculate that the reason for this difference is that left-aligned logos are the norm and what users expect, and so the more a design deviates from the norm, the worse the user experience. The location of a centered logo is not as far removed from the expected location as that of a right-aligned logo. To generalize this finding beyond logo design:

Usability suffers when a site fails to meet users’ expectations.

The more severely a design diverges from user expectations, the worse the damage.

Branding and navigation are such critical functions for websites that anything which negatively impacts these goals should be avoided. Keep your logo where you can be sure users will find it, and your site will get the maximum value from this critical design feature.

[warmdevs]

New Post has been published on https://warmdevs.com/needy-design-patterns-please-dont-go-popups-get-back-to-me-tabs.html

Needy Design Patterns: Please-Don’t-Go Popups & Get-Back-to-Me Tabs

In UX design, “dark patterns” are deceptive strategies used by designers to trick users into doing potentially harmful things that support their organization’s goals. For example, sites that automatically add extra items into users’ shopping carts are using a dark pattern to increase their sales.

The two design patterns discussed in this article fall into a similar (if slightly less immoral) category, which we call “needy patterns.” These are design patterns aimed at grabbing users’ attention. They’re driven by goals like increasing email-newsletter signups or page views, but they slow users down or degrade their overall experience.

There are many patterns that could fall into this needy category. In this article we focus on two needy patterns that have recently become popular and that interfere with browser-tab usage.

There are two primary types of behavior involving the use of multiple browser tabs:

Parallel browsing, where a user alternates between tasks, generally using one tab per task

Page parking, where a user opens multiple pages into different tabs in support of one large task (such as comparing items to buy, or researching a topic)

Millennials in particular tend to rely on page parking as an information-seeking strategy. The two needy patterns we discuss here hurt people who use multiple tabs, whether for parallel browsing or page parking. We’ve named these needy patterns:

The please-don’t-go popup

The get-back-to-me browser tab

The Please-Don’t-Go Popup

This pattern is sometimes known as an “exit-intent popup,” an “exit popup,” or an “exit modal” (in an attempt to disassociate this pattern with the reviled word “popup,» which is tainted by being the #1 most-hated advertising technique). These popups lurk unseen until the user starts to move the mouse towards the top of the page. Panicking that the user is about to bounce, the exit popup triggers a desperate, final attempt to keep the user’s interest. These popups often contain content such as, “Before you go…!” or “Don’t miss…!” Sometimes they offer discounts, advertise an email newsletter, or suggest related content.

An exit popup from TNW News pushes the organization’s email newsletter.

The exact functionality of each exit popup differs. Sometimes the popup will appear as soon as the user starts moving towards the top of the page; in other cases, it will show up after a specific amount of time (5 seconds, 10 seconds, etc.). Sometimes the popup is combined with animation — for example, creating a shaking effect. Sometimes it works alongside cookies, so a user who sees an exit popup and stays on the site won’t see it again.

This exit popup on wpbeginner.com uses a shake animation, which has the effect of making a popup even more annoying.

The goal is to catch users before they abandon the site, to show them something they may have missed, or to provide one final appeal to capture their attention. And, according to the logic of exit popups, who cares if this appeal doesn’t work and users are annoyed? There’s nothing to lose, because they’re leaving anyway, right?

Wrong. When users engage in page parking, they systematically move between opened tabs, saving their place to return later. The code behind exit popups doesn’t know if a user is moving the mouse to:

close the tab,

temporarily move to another tab, or

open a new tab.

The exit popup can’t tell the difference. Imagine that a user is engaging in page parking to help her research a topic. She starts with a Google query, and then opens up several results into new tabs rapidly. The user begins moving through each tab, closing some that are irrelevant, but saving some to return to them later. Then, in the middle of this process, an exit popup suddenly appears, pressuring her to check out some different content or sign up for an email newsletter. The user thinks, “Wow, calm down! I was going to come back in two minutes!”

This exit popup on lifehack.org assumes users are leaving because they’re finished with the current piece of content, and makes a last-minute attempt to show related topics. Unfortunately, the popup is irritating if the user hasn’t finished reading the current piece of content.

Except when it’s in their best interest (preventing someone from closing a file without saving it, for example), we never recommend intentionally interrupting or annoying users.

The Get-Back-to-Me Browser Tab

This next pattern has nothing to do with what happens while you’re on the website, but instead it’s related to what happens when you’ve left. When a user navigates away from a website by visiting another browser tab, the site swaps the original page title with an attention-seeking message.

In this example, the Chrome browser has 7 open tabs. The last three tabs have replaced the tab title with a needy message.

Blog.invisionapp.com replaces the name of the blog post with a reminder to return to the tab. In this example, part of this reminder is cut off due the number of browser tabs open. (When users have many tabs open at once, page titles are often cut off.)

The website’s primary goal is to cleverly hijack users’ attention and bring them back to the site. Maybe there were some good intentions driving this design decision: perhaps the site truly hopes to be helpful and remind users to view the content on that page. However, this reminder isn’t helpful at all; in fact, it is problematic for two major reasons:

the loss of context caused by an unhelpful title, and

the likelihood that whatever effectiveness the tactic once held will be eroded as more sites adopt it

Loss of Context

Without the true page title, people are left with no clues for the content of the tab. Users often keep frequently visited pages such as Facebook or news websites open throughout the day in order to revisit them and check for updates. Users who are shopping or conducting research may be parked on many pages at once, using browser tabs to collect and manage product options and information

Page titles should begin with information-carrying words to give users context and help them differentiate among tabs. In addition, websites should utilize a well-designed favicon (the small 16×16 pixel icon used in tabs) to help users identify which tabs belong to which site.

In the previous example, Invisionapp would be better off keeping the title of the blog post on the tab at all times. For users conducting research on a particular topic, this tab may be one of many that they intend to read over time. The best reminder to return to the tab is the actual page title, which has meaning to the user and probably some appeal to them in the context of the current task (or the user wouldn’t have opened that page in the first place). With no context, it’s likely that users scanning their parked tabs will not recognize the unrelated title and dismiss the page altogether.

Ineffective when Commonly Used

Some designers might argue that this technique will delight users by catching their attention with something unique and unexpected. That delight (if it ever existed in the first place) will no doubt turn to frustration quickly if this pattern becomes widely used across the web. Page parking and parallel browsing will become quite difficult if your browser tabs resemble a bunch of journalists fighting for attention at a press conference.

Too many other sites already replicate the problematic get-back-to-me pattern.

When multiple browser tabs employ this technique, users have no indication of which tab contains what content. They will be forced to bounce in and out of each page to remember what the tab contains. And if these websites are really needy, these users may also be dealing with please-don’t-go popups slowing them down along the way.

Twitter prepends the page title with a numeric indicator to let users know how much additional content has been added to their feed since it was last checked. This tab-title update effectively reminds the user to return without removing the context of the page.

Think of your page tab as one of many nodes in a distinct and dynamic global navigation created by the user to meet their unique needs. Your page title serves as a label in this navigation and should provide the appropriate context and information scent, so that users can assess the content of the page.

Conclusion

Every website has a personality. The visual design, the interaction design, the copy, and tone of voice all contribute to how your users perceive your site and your brand. Needy patterns like the please-don’t-go popover and the get-back-to-me tab chip away at the presentation of a professional, confident website. They also damage users’ perceptions of credibility.

As a thought experiment, ask your brand manager whether “we’re desperate for attention” is one of the company’s stated brand values. If not, why signal such desperation to customers?

These kinds of tactics are often embraced and accepted based on better conversion performance in A/B tests. However, there’s a big tradeoff that comes with being needy and annoying — the degradation of your relationship with your users.

Prioritizing conversions or short-term metrics leads designers to pressure people into doing things they don’t actually want to do and can easily cross the ethical boundaries towards dark patterns. It’s time to reassess priorities and long-term goals: you may be getting a few extra clicks now, but in the long run you’re losing your users’ trust and respect. Nobody likes a needy website.

[warmdevs]

New Post has been published on https://warmdevs.com/needy-design-patterns-please-dont-go-popups-get-back-to-me-tabs.html

Needy Design Patterns: Please-Don’t-Go Popups & Get-Back-to-Me Tabs

In UX design, “dark patterns” are deceptive strategies used by designers to trick users into doing potentially harmful things that support their organization’s goals. For example, sites that automatically add extra items into users’ shopping carts are using a dark pattern to increase their sales.

The two design patterns discussed in this article fall into a similar (if slightly less immoral) category, which we call “needy patterns.” These are design patterns aimed at grabbing users’ attention. They’re driven by goals like increasing email-newsletter signups or page views, but they slow users down or degrade their overall experience.

There are many patterns that could fall into this needy category. In this article we focus on two needy patterns that have recently become popular and that interfere with browser-tab usage.

There are two primary types of behavior involving the use of multiple browser tabs:

Parallel browsing, where a user alternates between tasks, generally using one tab per task

Page parking, where a user opens multiple pages into different tabs in support of one large task (such as comparing items to buy, or researching a topic)

Millennials in particular tend to rely on page parking as an information-seeking strategy. The two needy patterns we discuss here hurt people who use multiple tabs, whether for parallel browsing or page parking. We’ve named these needy patterns:

The please-don’t-go popup

The get-back-to-me browser tab

The Please-Don’t-Go Popup

This pattern is sometimes known as an “exit-intent popup,” an “exit popup,” or an “exit modal” (in an attempt to disassociate this pattern with the reviled word “popup,» which is tainted by being the #1 most-hated advertising technique). These popups lurk unseen until the user starts to move the mouse towards the top of the page. Panicking that the user is about to bounce, the exit popup triggers a desperate, final attempt to keep the user’s interest. These popups often contain content such as, “Before you go…!” or “Don’t miss…!” Sometimes they offer discounts, advertise an email newsletter, or suggest related content.

An exit popup from TNW News pushes the organization’s email newsletter.

The exact functionality of each exit popup differs. Sometimes the popup will appear as soon as the user starts moving towards the top of the page; in other cases, it will show up after a specific amount of time (5 seconds, 10 seconds, etc.). Sometimes the popup is combined with animation — for example, creating a shaking effect. Sometimes it works alongside cookies, so a user who sees an exit popup and stays on the site won’t see it again.

This exit popup on wpbeginner.com uses a shake animation, which has the effect of making a popup even more annoying.

The goal is to catch users before they abandon the site, to show them something they may have missed, or to provide one final appeal to capture their attention. And, according to the logic of exit popups, who cares if this appeal doesn’t work and users are annoyed? There’s nothing to lose, because they’re leaving anyway, right?

Wrong. When users engage in page parking, they systematically move between opened tabs, saving their place to return later. The code behind exit popups doesn’t know if a user is moving the mouse to:

close the tab,

temporarily move to another tab, or

open a new tab.

The exit popup can’t tell the difference. Imagine that a user is engaging in page parking to help her research a topic. She starts with a Google query, and then opens up several results into new tabs rapidly. The user begins moving through each tab, closing some that are irrelevant, but saving some to return to them later. Then, in the middle of this process, an exit popup suddenly appears, pressuring her to check out some different content or sign up for an email newsletter. The user thinks, “Wow, calm down! I was going to come back in two minutes!”

This exit popup on lifehack.org assumes users are leaving because they’re finished with the current piece of content, and makes a last-minute attempt to show related topics. Unfortunately, the popup is irritating if the user hasn’t finished reading the current piece of content.

Except when it’s in their best interest (preventing someone from closing a file without saving it, for example), we never recommend intentionally interrupting or annoying users.

The Get-Back-to-Me Browser Tab

This next pattern has nothing to do with what happens while you’re on the website, but instead it’s related to what happens when you’ve left. When a user navigates away from a website by visiting another browser tab, the site swaps the original page title with an attention-seeking message.

In this example, the Chrome browser has 7 open tabs. The last three tabs have replaced the tab title with a needy message.

Blog.invisionapp.com replaces the name of the blog post with a reminder to return to the tab. In this example, part of this reminder is cut off due the number of browser tabs open. (When users have many tabs open at once, page titles are often cut off.)

The website’s primary goal is to cleverly hijack users’ attention and bring them back to the site. Maybe there were some good intentions driving this design decision: perhaps the site truly hopes to be helpful and remind users to view the content on that page. However, this reminder isn’t helpful at all; in fact, it is problematic for two major reasons:

the loss of context caused by an unhelpful title, and

the likelihood that whatever effectiveness the tactic once held will be eroded as more sites adopt it

Loss of Context

Without the true page title, people are left with no clues for the content of the tab. Users often keep frequently visited pages such as Facebook or news websites open throughout the day in order to revisit them and check for updates. Users who are shopping or conducting research may be parked on many pages at once, using browser tabs to collect and manage product options and information

Page titles should begin with information-carrying words to give users context and help them differentiate among tabs. In addition, websites should utilize a well-designed favicon (the small 16×16 pixel icon used in tabs) to help users identify which tabs belong to which site.

In the previous example, Invisionapp would be better off keeping the title of the blog post on the tab at all times. For users conducting research on a particular topic, this tab may be one of many that they intend to read over time. The best reminder to return to the tab is the actual page title, which has meaning to the user and probably some appeal to them in the context of the current task (or the user wouldn’t have opened that page in the first place). With no context, it’s likely that users scanning their parked tabs will not recognize the unrelated title and dismiss the page altogether.

Ineffective when Commonly Used

Some designers might argue that this technique will delight users by catching their attention with something unique and unexpected. That delight (if it ever existed in the first place) will no doubt turn to frustration quickly if this pattern becomes widely used across the web. Page parking and parallel browsing will become quite difficult if your browser tabs resemble a bunch of journalists fighting for attention at a press conference.

Too many other sites already replicate the problematic get-back-to-me pattern.

When multiple browser tabs employ this technique, users have no indication of which tab contains what content. They will be forced to bounce in and out of each page to remember what the tab contains. And if these websites are really needy, these users may also be dealing with please-don’t-go popups slowing them down along the way.

Twitter prepends the page title with a numeric indicator to let users know how much additional content has been added to their feed since it was last checked. This tab-title update effectively reminds the user to return without removing the context of the page.

Think of your page tab as one of many nodes in a distinct and dynamic global navigation created by the user to meet their unique needs. Your page title serves as a label in this navigation and should provide the appropriate context and information scent, so that users can assess the content of the page.

Conclusion

Every website has a personality. The visual design, the interaction design, the copy, and tone of voice all contribute to how your users perceive your site and your brand. Needy patterns like the please-don’t-go popover and the get-back-to-me tab chip away at the presentation of a professional, confident website. They also damage users’ perceptions of credibility.

As a thought experiment, ask your brand manager whether “we’re desperate for attention” is one of the company’s stated brand values. If not, why signal such desperation to customers?

These kinds of tactics are often embraced and accepted based on better conversion performance in A/B tests. However, there’s a big tradeoff that comes with being needy and annoying — the degradation of your relationship with your users.

Prioritizing conversions or short-term metrics leads designers to pressure people into doing things they don’t actually want to do and can easily cross the ethical boundaries towards dark patterns. It’s time to reassess priorities and long-term goals: you may be getting a few extra clicks now, but in the long run you’re losing your users’ trust and respect. Nobody likes a needy website.

[warmdevs]

New Post has been published on https://warmdevs.com/teenagers-ux-designing-for-teens.html

Teenager’s UX: Designing for Teens

Teens are wired. Technology is so integrated with teenagers’ lives that creating useful and usable websites and apps for them is more critical than ever. To succeed in a world where the next best thing is a click away and text message interruptions are the rule, not the exception, website and app creators must clearly understand what teens want and how to keep them on a site.

To understand the expectations of a generation that grew up with technology and the internet, we conducted qualitative usability studies with teenage participants to identify guidelines for how websites can be improved to match this age group’s’ abilities and preferences.

Our research refutes many stereotypes, including the following:

Mobile proficiency transfers across all devices

Teens just want to be entertained online with graphics and multimedia

Teens are tech-savvy

Teens want everything to be social

Teens are not technowizards who surf the web with abandon. And they don’t like sites laden with glitzy, blinking graphics. Letting stereotypes steer your design can lead to disastrous outcomes.

Teenagers use the internet on many devices in various environments. For our research, we focused on web and app usability for laptops, tablets, and mobile devices. Although teens spend endless time texting and on social media, we didn’t focus on these activities because our goal was to derive design guidelines for mainstream websites and apps, not to help build the next Snapchat.

The Research

We derived 130 usability guidelines for engaging teens and keeping them on your site. These recommendations are based on observational studies using multiple methodologies. A total of 100 users between the ages of 13 and 17 participated in three rounds of research: 38 teens in the original study for the first edition of this report, 46 teens in the second study, and 16 in the most recent study. We triangulated findings across three methods:

Usability testing. We met with test participants one at a time and gave them tasks to perform, asking them to vocalize their thoughts as they attempted tasks. To keep the scenarios as authentic as possible, we matched the tasks with each teen’s actual interests and simulated real-world situations.

Field studies. We observed teenagers in their homes and at school. During these site visits, we didn’t give users tasks to perform, but simply watched as they used the web the way they normally would in these settings.

Interviews and focus groups. To gain further insight into their experiences and attitudes, we asked participants to offer stories and examples detailing how and when they used the web, and which sites they considered interesting and useful. We also solicited advice from teens on how to make websites appealing. Interviews were held before and after usability sessions, as well as during a focus group.

We conducted studies in the U.S., United Kingdom, and Australia, in cities and towns ranging from affluent suburbs to disadvantaged urban areas. We tested a roughly equivalent number of boys and girls on a total of 210 websites and 30 apps that covered a broad range of genres, including:

School resources (University of Nottingham, Central Bucks High School West, BBC Bitesize, Quizlet)

Tourism/Arts & Entertainment (Visit London, TripAdvisor, ExploreChicago.com)

Health (Australian Drug Foundation, TeensHealth, National Institute on Drug Abuse)

Informational/Reference (Nature, Food Network, Scientific American)

News (Buzzfeed, CNN, Weather.com, Daily Mail, The New York Times)

Entertainment and Games (Stack AR, YouTube, Playlist.com, Geometry Wars)

Ecommerce (Adidas, H&M, ASOS, Jabra)

Corporate sites (McCormick, Unilever, Pepsi-Cola, Procter & Gamble, Samsung, Morton Salt)

Government (Gov.UK, Australian Government main portal, Pennsylvania’s Department of Motor Vehicles, the U.S. White House, NASA)

Nonprofits (Rotary International, Charity: Water, World Food Programme, National Wildlife Federation)

As these examples show, we tested both specialized sites that explicitly target teenagers and mainstream sites that include teens as part of a broad-target audience.

Teen Motivations for Using Websites

Teenagers access the web for myriad activities, including entertainment. Generally, they have a specific goal, even if that goal is just to keep themselves occupied for 10 minutes.

Although their specific tasks might differ from adults, teens are similar to adults in major ways: both groups expect websites to be easy to use and to let them accomplish their tasks. Like adults, teens are goal-oriented and don’t surf the web aimlessly; usability is thus as important for them as for any other user group.

Teens in our studies reported using the web or various apps for:

School assignments

Hobbies or other special interests (including learning new skills or finding fun activities)

Entertainment (including music, videos, and games)

News (including sports, current events, and entertainment)

Learning about new topics

Talking to friends

Shopping

Even when teens don’t make purchases on ecommerce websites, they do visit them to research products and build wish lists for the credit-card–carrying adults in their lives.

Changes Over Time: Good and Bad News

The good news: Teens are becoming more successful at navigating websites and finding what they need. At the time of the third study, the oldest participant was born in 2001 and the youngest was born in 2005; therefore, all participants in this study grew up with access to computers. Between all three studies conducted over the last 15 years for this report, the amount of time teenagers spend on computers and mobile devices has steadily increased. How effective teenagers are with technology is correlated with the amount of time using technology.

Are teens getting better or are websites getting better? Probably a bit of both. We observed many of the same bad user habits among teens in our last study as we saw in our first study, back in 2004. Thus, the improved performance obviously stems in part from improvements in website design. That said, even though teens in our original study were heavy web users, teenagers today have even greater access to the internet and spend more time using it. This generation grew up with technology and is much more effective at using it than the participants in our first study (in which the oldest participant was born in 1988 and the youngest in 1992).

The bad news: Teens are not as invincible as some people think. Although teens might feel confident online, they do make mistakes and often give up quickly. Fast-moving teens are also less cautious than adults and make snap judgments; these lead to fewer successfully completed tasks.

Teens perform worse than adults for three reasons:

Insufficient reading skills

Less sophisticated research strategies

Dramatically lower levels of patience

To improve your site’s usability among teens, you must consider all three factors. Also note that we have seen these factors in all our research with teenagers during a 15-year period, meaning that they are likely to continue to hold in the future, even if other teen habits may change as fads come and go.

Across different types of websites, teens had the most success on ecommerce websites, which often adhered to design standards and required little reading. Teens encountered the greatest challenges on large sites with dense content and poor navigation schemes. Government, nonprofit, and school sites were the biggest culprits of poor usability.

Despite usability improvements, we observed users struggling with the same issues as in previous years — as well as new issues created by emerging features and design approaches. Thus, both traditional and new guidelines must be considered as technology and people continually evolve; our new report contains 130 total guidelines, compared with 61 in the first edition and 111 in the second.

Many of the guidelines also apply to general audiences. For teens, however, these guidelines are even more important because the usability issues present bigger hurdles.

The Importance of Content and Layout

Write for impatient users. Nothing deters younger audiences more than a cluttered screen full of text. Teens can quickly become bored, distracted, and frustrated.

Teenagers don’t like to read a lot on the web. They get enough of that at school. Plus, their reading skills are not ideal — especially those of younger teens. Sites that were easy to scan or that illustrated concepts visually were strongly preferred to sites with dense text.

Applying proper web writing and formatting techniques is crucial in communicating with teens. Display content in small, meaningful chunks with plenty of white space. Small chunks help students retain information and pick up where they left off after the inevitable interruptions of text messages and phone calls.

Teenagers in our study were often overwhelmed with content on websites. To focus their attention on one area, we observed several teens highlighting text as they read down the page. These are some of their comments:

“Sometimes reading in black and white is hard. Highlight helps me read better.” – 16-year-old male

“I lost my train of thought, so I highlighted the text to focus more on it.” – 15-year-old female

Teens were overloaded with information on the screen. We observed multiple participants highlighting text on the page to help them focus — here, a teen highlighted the term bluegrass, as she wondered what type of music that was.

Help teens learn and stay focused by choosing your words wisely. Use words that teens understand. Write in short sentences and paragraphs. Format key points or steps of a process using bullet points. Teens generally have poorer reading and comprehension skills than adults. If your site targets a broad audience, aim to write at a 6th-grade reading level (or lower). Writing at this level will help audiences of all ages — young and old — quickly understand your content.

One surprising finding in this study: teenagers dislike tiny font sizes as much as adults do. We’ve often warned websites about using small text because of the negative implications for senior citizens (and even people in their late 40s, whose eyesight has begun to decline). We’ve always assumed that tiny text predominated because most web designers are young and still have perfect vision, so we were surprised that small type often caused problems or provoked negative comments from our study’s teen users. Even though this audience is sufficiently sharp-eyed, most teens move too quickly and are too easily distracted to attend to small text.

“You go to Music and it’s real tiny. … You look at this stuff and it’s hard to see. You have to squint. These are really small, and you can’t see. It needs to be a little bigger.” — 16-year-old female

Present Interesting Content Professionally and Clearly

Teens complained about sites they found boring. Dull content is the kiss of death if your goal is to keep teens on your site. However, not everything needs to be interactive and fancy. Although teens have a strong appreciation for aesthetics, they detest sites that appear cluttered and contain pointless multimedia.

Beware of overusing interactive features just because you design for younger audiences. Multimedia can engage or enrage teens, depending on its usefulness. The best online experiences for teens are those that teach them something new or keep them focused on a goal.

What’s good? The following interactive features all worked well because they let teens do things rather than simply sit and read:

Online quizzes

Forms for providing feedback or asking questions

Online voting

Games

Features for sharing pictures or stories

Features for creating and editing content

These interactive features let teenagers make their mark on the internet and express themselves in various ways — some small, some big.

The site type influences user expectations. For example, teens expect ecommerce and brand sites to look professional, and informational sites to look simple and polished. For the latter sites, presenting interesting content in a clear manner is much more attractive than experimenting with new sophisticated features. Teens can learn and feel engaged without the nonessential enhancements.

Speed Is Key

A slow-loading website is a deal-breaker. Whatever you do, make sure your site loads quickly. Slow, sluggish sites are frustrating to anybody, but they’re especially offensive to young audiences who expect instant gratification.

Think twice before you develop that super cool widget or include that 4K video. If it’s slow or buggy, forget it. Teens won’t have the patience for it. Because teens often work on older, second-hand devices — and sometimes have slow internet connections — fancy features and  high-resolution multimedia might not work well.

“I hate this waiting. It’s very annoying … I usually wouldn’t wait this long for a page to load. I would go to a different site, I would go to the next one.” — 17-year-old male

Don’t Talk Down to Teens

Avoid anything that sounds condescending or babyish. The proper tone can make or break your site. Teens relate to content created by peers, so supplement your content with real stories, images, and examples from other teens.

Some websites in our study tried to serve both children and teens in a single area, usually titled  Kids. A grave mistake: the word “kid” is a teen repellent. Teenagers are fiercely proud of their newly won status, and they don’t want overly childish content — one more reason to ease up on the heavy animations and garish color schemes that work for younger audiences. We recommend having separate sections for young children and teens, labeled Kids and Teens, respectively.

Let Teens Control the Social Aspects

Facilitate sharing but don’t force it. Teens rely on technology for social communication, but they don’t want to be social all the time. They want to control what they share and how they share it. Sites that force teens to register and then automatically make their profile public violate trust. Parents and teachers teach teens to protect their privacy at a young age, and one of the things teens learn early is to avoid nosey sites.

When offering sharing options, include a link to copy the web address, as teens are likely browsing on their phones and want to share it directly with a friend. Participants in our studies often preferred using social media apps, like Snapchat, to message friends, so providing a Copy Link option allows them to send a direct message to a friend on any platform. When this functionality isn’t available, they tended to take screenshots and share them with friends. Though this behavior reaches their goal, from a business perspective, it hinders other teens’ ability to easily visit the content.

Design for Mobile Viewing

All of the teenagers in our most recent study had mobile devices, but not all had laptops or computers. Therefore, teens are often viewing your content from the palm of their hand.

Complex mouse gestures often don’t translate well to mobile. The adoption of portable devices requires that you design a website so that it doesn’t compromise usability.

Teens often work on touch-enabled devices, making interactions that require precision — such as dropdown menus, drag-and-drop, and small buttons — difficult. Design elements such as rollover effects and small click zones are also problematic, if they’re usable at all. Small text sizes and dense text make reading difficult.

Media portrays teens as competent computer jockeys. In reality, teens’ overconfidence combined with their developing cognitive abilities means they often give up quickly and blame the website’s design. They don’t blame themselves, they blame you.

Age-Group Differences

The following table summarizes the main similarities and differences in web-design approaches for young children, teenagers, college students, and adults. (The findings about children are from our studies with 3–12-year-old users; the findings about college students are from our study with 18–25-year-old users.)

Children Teens College Students Adults Search Bigger reliance on bookmarks than search, but older kids do search Heavy reliance on search; some difficulty formulating search queries; click topmost results in SERP Heavy reliance on search; some difficulty formulating search queries; click topmost results in SERP Heavy reliance on search; some difficulty formulating search queries; click topmost results in SERP Scrolling Don’t scroll (younger); some scrolling (older) OK scrolling OK scrolling OK scrolling Animation and sound effects Attend to things that move and make sounds Might appreciate them to some extent, but overuse can be problematic. Dislike them; autoplay sound disruptive in dorms Dislike them; autoplay sound disruptive at work Patience Want instant gratification Hate waiting for things to load or having to close pop ups; easily distracted Want answers quickly; no patience for complicated interactions; easily distracted. Want answers quickly, but more likely to wait than college students Trust & credibility Want good initial reaction; Credibility less important because goal is mainly entertainment Difficulty judging credibility Very critical; quick to judge websites Less critical of websites than college students; still quick to judge Tabbed browsing Not used Used often; few tabs Used often; many tabs open at a time Commonly used; varies depending on technical comfort Disclosing private info Hesitant to enter information Hesitant to enter information Less ‘fear’ of technology and therefore (often recklessly) willing to give out personal info Often recklessly willing to give out personal info on sites they trust Advertising Difficulty distinguishing from real content Like discounts but hate popups Have a keen eye for ads and don’t like being tricked Mostly avoid ads but appreciate them when they are relevant and unobtrusive Age-targeted design & content Crucial, with very fine-grained distinctions between age groups Want age-appropriate content; prefer sites with neutral graphics rather than childish ones Want age-appropriate information, but don’t want everyone to sound ‘hip’ Less critical for most sites

Clearly, there are many differences between age groups. The highest usability level for teens comes from designs that are targeted specifically at their needs and behaviors, which differ from those of adults and young children. As the table shows, this is true both for interaction design and for more obvious factors, such as topics and content style.

[warmdevs]

New Post has been published on https://warmdevs.com/web-page-footers-101-design-patterns-and-when-to-use-each.html

Web Page Footers 101: Design Patterns and When to Use Each

Footer Basics

As UX professionals, we tend to dedicate our time and energy to everything above the fold. That’s because global navigation, search, and high-priority content are positioned above the fold and users tend to spend a disproportionate amount of their time at the top of any given page. Consequently, footers, which appear at the bottom of web pages, get the short end of the UX time and resource budget. However, you should still pay attention to footers because they can greatly enhance a user’s experience.

Definition: A website’s footer is an area located at the bottom of every page on a website, below the main body content.

The term “footer” comes from the print world, in which the “footer” is a consistent design element that is seen across all pages of a document. However, as we explained 20 years ago, the difference between print design and web design means that design elements like footers change their meaning (in this case by becoming actionable) when they’re ported from print to online.

Website footers of the past were either small utility areas with little information or big dumping grounds for miscellaneous links. Visually, they often contained tiny text that was hardly legible. Today, footers have matured and now serve as an important reference point for people as they complete a variety of tasks on websites.

People Use Footers

While footers get less attention than the top of the page, they still receive a fair amount of use. These are the two most common use cases for footers:

Users scan or read the page and either don’t find what they want or need more information. They scroll to the bottom of a page and use the footer as:

A second chance to be convinced For example, maybe a user has decided, after reading all the details, that she doesn’t want to sign up for a bank account, but she was still impressed with the banking institution and wants to become a customer. The footer is a good opportunity to remind or teach potential customers about the company’s other offerings.

A last resort for hard-to-find content Sometimes users turn to the footer for additional options that might not be present in the global navigation. For example, those interested in applying for a job with an ecommerce company — a task that is different from those of the typical ecommerce customer—might look to the footer for relevant information.

Users intentionally scroll to the footer to find information they expect to appear there, such as contact information, details about the company, social media posts or links, or even to discover new or related content on the site. Some users even use the footer for navigation: when they have already scrolled to the end of a page, because the footer is in close proximity, they use that instead of scrolling to the top for the global navigation.

In both of these cases, no matter what content ends up in the footer, that footer should be consistent, predictable, and easily discoverable. Consider these use cases, your website’s goal, and your footer’s goal when determining which type of footer to offer and which content to offer in the footer.

While satisfying these user scenarios may not be the absolutely highest-priority goal for a website, designing a good footer is still a worthy endeavor, because footers have a particularly wonderful usability characteristic: they will never get in the way of users who get their needs satisfied higher up on the page. Thus, except for overly bloated footers that could delay page download or rendering, a footer is a cost-free addition to the user experience. It can help, but it can’t hurt.

Footer Elements

Site designers choose many different types of content for their footers for various reasons. Footer elements can be combined depending on the business and user goals. Here are some of the most common footer components, examples, and recommended situations in which to use them:

Utility links

Doormat navigation

Secondary-task links

Site map

Testimonials or awards

Brands within the organization

Customer engagement (email newsletters and social media)

Uscreen.tv incorporates multiple types of footer content such as (1) secondary-task content (2) utility content, and (3) social-media links.

Utility Links

Most sites, at a minimum, tend to include utility navigation in the footer, pointing to:

contact information: the company’s address, phone number, and link to live chat

customer-service information

privacy policy

terms of use

While many sites have utility navigation located in the top-most areas of their site, the footer is where users look when they search for these specific items. Users will often go directly to the footer to find contact information or locate ways to get customer support. Whether you have links to these utility items at the top of your page or not, always include them in the footer as well. (A utility area at the top of the page should still be used for tools-like utilities, such as search, login/account information, and language-selection.)

Use for: all sites

Clarity Money’s footer keeps things simple by including links to the Terms of Use and Privacy Policy, plus links to social-media accounts (see below for more information).

J. Crew features contact information in the form of links to its dedicated customer-service Twitter account, its phone number, and a support email address.

Doormat Navigation

Like the physical mat at people’s homes, a doormat navigation is the first thing you see when you arrive and the last thing you see when you leave — that is, it is included both at the top and the bottom of the page. Thus, a footer can include the global navigation. This component is beneficial when the pages are long (as it is the case with many modern mobile designs), since it allows users to quickly move to a different section of the site without scrolling back to reach the main navigation.

Use for: sites with long pages, especially if the global navigation is unavailable while at the bottom of the page

United Healthcare uses doormat navigation: with the main categories being displayed both in the top navigation bar (top) and in the footer (bottom).

Secondary Tasks

A footer may contain links to secondary tasks of interest to the user. Some examples of secondary tasks include:

applying for a job with the company

tasks for content creators

accessing investor information

finding documentation or specifications of a product or service

accessing media kits and other PR information

finding affiliates of the company

These secondary tasks are usually not present in the global navigation or utility navigation. This type of footer content is common on sites with multiple user groups with different user journeys.

Use for: helping users find secondary content that might not be directly related to the main purpose of the site

For example, Dwell Magazine’s website showcases categories outside the magazine topics, including About, Dwell Magazine, Professionals, and Merchants — which might interest its secondary user groups: media and design professionals, merchants, investors, and advertisers (and prospective employees).

Dwell Magazine’s footer includes links to secondary tasks (other than reading the articles)

Site Map

A  site-map–styled footer component showcases a combination of the global navigation and other important pages not present in the global navigation. Unlike doormat navigation, it exposes lower-level subcategories of the main categories. It is helpful for:

exposing underlying topics which are not obvious at the global-navigation level

increasing awareness of the site’s primary content

reminding users of the company’s offerings

A site-map footer component does not include the complete  site map, unless the site has few pages (about 25 or fewer). Any more than that and the footer risks becoming unwieldy and difficult to use. (Alternatively, you can provide a full-featured site map on a separate page, and link to it in the footer, which is where users expect to find such a link.)

Use for: large sites with multiple levels of information or subdomains

CNN’s footer contains links to the top-level navigation and to lower-level categories.

Testimonials or Awards

Many of our study participants described being motivated to pick a site based on the awards and testimonials received by that site. Highlighting accolades in the footer can be a good tactic when building authority and credibility. However, showing too many testimonials and awards could also raise a red flag for customers, giving the impression that the company needs to show testimonials because it is not mature or stable. A solution is to add this content to the footer.

Run usability tests and A/B tests with your audience to determine whether this strategy is appropriate for your footer, and what the right number of testimonials is.

Use for: startups or for companies with less brand awareness

In its footer, Reykjavik Excursions successfully includes awards and boards from which it has received recognition in order to bolster credibility and authority.

Brands Within the Organization

Some companies are so massive that they own or preside over dozens of other companies. Some use universal navigation to connect these child companies with the parent one. It can also be helpful to include a list of subsidiaries and brands in the footer to reinforce awareness of other brands or companies that fall under the organization’s portfolio and also help users find their way around.

Use for: large, multinational organizations with many subsidiaries or partnered brands

Walmart’s footer calls out other brands that the company owns, such as Hayneedle, Jet, and Modcloth.

Customer Engagement

Users will often go directly to the footer to find information such as coupons and promotions or to simply staying up to date with the company’s sales and product releases. Thus, the footer can include information that allows customers to stay engaged with the company — social-media links (or at a minimum, links to the company’s social-media accounts) and mailing list signup prompts.

Before including an embedded social-media feed widget in the footer, consider how often the company posts on each social-media site.  A less active social-media account may not warrant an embedded social-media feed, but might still benefit from linking to the social accounts.

Use for: all types of sites if using social-media links; sites with heavy emphasis on visuals or aesthetics (arts, beauty, lifestyle brands, or creative spaces) if using an embedded social-media feed widget

All pages on TheGoodTrade.com feature a large, multicomponent footer which includes: (1) a mailing-list signup prompt, (2) a widget with its Instagram feed, (3) links to social-media accounts, (4) links to secondary tasks, and (5) a disclaimer with copyright information.

Variations on Footers

Infinite Scroll & the Mini Footer

Many ecommerce, entertainment, and other sites which encourage browsing opt for an infinite scroll in order to keep users on the page. Content continually loads so there is no consistent bottom on every page, and thus no footer section. However, the content that would have been in the footer (typically, utility-navigation links) appears as a “mini footer” in the right rail, or within a larger, expanded global navigation.

For the footer to be helpful it needs to be present on all pages of the site. Some sites try to utilize the same footer for both static-length and dynamic-length pages. However, when users attempt to use these footers on sites with infinite scroll, it often becomes a frustrating game of “whack-a-mole” where users try to click on links as quickly as possible before they vanish again below the fold. Instead, if you plan on using infinite scroll, consider placing a mini footer in the right rail and ensure that it is sticky alongside the main content as the user scrolls.

Use for: pages with infinite scroll

Sites with infinite scroll, like LinkedIn.com, often feature footer content in other locations, like at the bottom of the right rail.

BarstoolSports.com features most of what traditionally appears in the footer within the global navigation.

Your browser does not support the video tag.

Barstool.com also has a footer that gets displaced as new content loads. (In most browsers, hover over the video to display the controls if they’re not already visible.)

Contextual Footers

While  footers traditionally stay consistent across many pages, sometimes it can be helpful to customize the footer based on information that’s presented on the page. Particularly for a site with multiple audiences, a contextual footer can surface content that may not have made it into the global navigation, but might still be critical for some users.

For example, the Medium.com homepage does not have a footer; the page shows an infinitely scrolling list of articles. (The page has a right-rail mini footer as recommended above.) However, on a specific story’s page, Medium shows a task-based footer that varies depending on whether the viewer is a subscriber or not.

Use for: sites with different user roles (e.g. “content creator” vs “content consumer” or “member” vs. “nonmember”)

Medium’s footer includes few links related posts and emphasizes Medium membership benefits for people who are not signed into a Medium account.

Common Footer Pitfalls (& solutions)

Footers have come a long way since the 1990s, but to this day, they are still subject to common design pitfalls:

More than two levels of information hierarchy Especially for large sites, including an entire site map is not an answer to your footer. A footer is a dedicated amount of real estate that should be devoted to only important information that should be discoverable. As my mother once aptly put it, “If everything is important, nothing is important.”

SOLUTION: Consider reprioritizing the content and only displaying links to first- and second-level categories in your IA, not the entire site. If a single lower-level page is important enough, surface that specific link in the footer, but you don’t have to show all levels of the information hierarchy to make it discoverable.

Unclear link names in the footer (e.g. Company Info or Help versus Contact Us) The notorious Resources link on many footers is one of the unfortunate vestiges of past footers.

SOLUTION: Teams should try to adhere to conventional, clear terms. If the team is unsure which term would be more appropriate, a card sort or usability test can help shed light on terms which may confuse users.

Unclear structure or information hierarchy The footer may sometimes be a “dumping ground” for orphaned links — that is, links which seem to have no relation to the global navigation or to secondary tasks. If the footer has no pattern of organization, users will either do an exhaustive review or spend very little time looking at the footer. GM’s footer does not have a clear structure due to its lack of information hierarchy. This setup makes it difficult to scan or find content.

SOLUTION:  Clearly convey the information hierarchy of the items in the footer by using grouping or other visual-design patterns that indicate visual hierarchy (e.g. bolded high-level page links and normal-weight lower-level page links).

Hidden or illegible footers Sometimes companies opt to use a tiny font size for footer links in order to accommodate all the links or to make the links less distracting. Worse, some sites might use an animation or accordion feature to hide the footer completely for aesthetics purposes. While the footer is not the primary navigation, people still use it and rely upon it, so don’t try to hide it. An earlier iteration of the Reserved.com footer utilized an accordion feature which was collapsed by default, making its content difficult to find. An earlier iteration of the Reserved.com footer utilized an accordion feature which was collapsed by default, making its content difficult to find.

SOLUTION: Use a legible font size and font color (with decent contrast) and avoid using decorative fonts. Most importantly, do not hide or collapse the footer — people expect it to be there.

Conclusion

A footer is the place users go when users they’re lost. If we want to leave a lasting good impression, it’s critical that we don’t neglect the bottom of the page. After all, even the most mundane, utilitarian sections of an interface can make the biggest impact on a user’s experience.

Get more tips for better-performing web pages in our full-day course Web Page UX Design.

[warmdevs]

New Post has been published on https://warmdevs.com/the-user-experience-of-customer-service-chat-20-guidelines.html

The User Experience of Customer-Service Chat: 20 Guidelines

In today’s world, many people turn to chat for a fast, convenient way to interact with businesses for customer service. Chat is often considered superior to traditional methods like telephone calls for several reasons:

There is less of an emotional investment in the conversation: it’s easier to type a message than to interact in real time with another person.

There is a written trace of the conversation; both parties can refer to it later on.

People can multitask. At least on large-screen devices, people can open multiple windows and do a different activity while waiting for the chat representative to respond.

One study participant summarized it well: “Chat is less personable. You have time to think. You can have it in writing. You have to build less courage to talk. And it takes less time [than a phone call].”

To understand how people use chat to interact with businesses and how this interaction channel could be improved, we ran a usability-testing study in which we asked 8 participants to contact a variety of businesses through chat.  This article reports some of our main findings and recommendations.

1.Place a Link to Chat on the Contact Us Page and Label it Chat

Our study participants usually looked under Help or Contact Us when they wanted to find the chat. Unfortunately, not all companies made chat easy to locate. Typically, people interpreted hard-to-find chat as “it’s pretty clear that they don’t want you to contact them.”

Some hid chat under vague labels. On Walmart.com, the Help page contained a lot of information, but none of the links clearly pointed to chat.  Our participant scrolled down and selected the Contact Us link in the page footer, only to stay on the same page.  She eventually clicked on the Walmart.com icon under Contact Us and was prompted with Choose your topic and What can we help with. The user wasn’t sure whether she was on the right track to find chat or whether those options would point her to an FAQ page.

None of the links on Walmart.com’s Help Center was labeled Chat (top).  The user clicked the Walmart.com icon and was taken to another page that where she was asked to provide more information about her question. This page did not indicate that she was on the right path to chat either.

2.Don’t Rely on Floating Buttons as the Only Way to Access Chat

Other businesses chose to offer chat as a floating button on the side of the page — either on mobile or on desktop. We noticed that some of our participants completely ignored these buttons. On HSBC a user opened the menu and did not notice the Live Chat button on the side. However, after she selected Contact HSBC, she was really pleased to see the big Live Chat Now button at the top of the page. She said “This is really nice … ‘cause I don’t want to look through like an hour of FAQs and find nothing.”

HSBC.com: The big Live Chat side button was completely ignored by our study participant, who instead accessed chat through the Contact HSBC page, reached through the main menu.

3.Floating Buttons for Chat Should Be Placed on the Right and Should Contrast with the Rest of the Page

Two common reasons for which people ignore floating buttons in general are: (1) they are placed in other position than the standard one (bottom right corner of the page); (2) they don’t stand out enough relative to the rest of the page.

On Dell.com’s mobile site, the chat was also available as a small floating button placed on the left side of the screen. People had difficulty noticing that button and instead navigated to the Contact us page. One user commented that the left-side positioning took her by surprise. Forever 21 also used a floating chat button, but it was so tiny and blended in with the rest of the page, that users ignored it. Its label looped from Ask a Stylist to Live Chat  — a feature that we don’t recommend.

Forever 21: The visual design of the chat button made it too hard to notice. The label Ask a Stylist (which changed to Live Chat later on) was also not clear enough for our users.

4.Do Not Hide Chat Under Vague Labels such as Ask a Question

Some companies  used chatbots as filters to human-assisted  chat. Because this functionality was technically not “live chat”, they generically labeled it  Ask a question. This label made the feature hard to locate and the chatbot unlikely to be used. People were not sure whether Ask a question meant sending an email or searching through the FAQ. “’Ask a question – our online help tool’; that sounds like not even a bot; that sounds like just an FAQ section. This sounds like you’re not gonna be talking to someone. […] I feel this is kind of misleading when they have ‘ask a question’; I’m like is that a person, is that just a bot, I don’t know what it is, it’s kind of confusing,” said a participant trying to find the chat on Lloyds’s Bank site. Instead, label the feature Chat and tell people that, at first, they will talk with a bot, but later on they will be transferred to a human if the bot is not helpful.

Lloydsbank.com: The bank’s virtual assistant was hidden under the Ask a question link.

5.Have a Link to Chat on Product Pages

Many people who are inspecting a product may require clarification about certain features and may need supplemental help through chat. Having that link available on the product page saves them from having to navigate elsewhere in order to contact an agent.

On Purple.com, the user looked around to find the chat feature and eventually typed his question under what seemed like an input box for frequently asked questions. Once he did so, he was presented with a link and the options to chat or call. The user did not expect to find chat in that way.

Purple.com: The user did not expect to find chat by typing a question in the Frequently asked questions field.

6.Minimize Wait Time, Especially on Mobile

People don’t like to wait. When they are on a large screen, they can multitask while waiting for an answer, but on a smartphone, switching between windows is difficult and the user may not receive a notification when the agent responds. One of our study participant commented: “Waiting always bothers me when I am doing it on my phone. When I am on my computer it doesn’t bother me as much because I’m going back and forth [between different windows]. So when I look, I just see the answer there, so I don’t know how long it took them really.”

In general, a fast response time reflected well on the company; in contrast, long wait times made users feel undervalued and they tended to assume that they shared the agent with many other customers. “It bothers me when it takes a long time to answer a question, although they seem they are typing.” (In a separate study, we found that even though people prefer human chat support over chatbots, a faster response was one of the things users did like about chatbots.)

7.Keep Users Updated on How Fast They Will Get a Response

Periodic messages that communicate the state of the agent are essential and serve the same function as progress indicators.

Before the chat started, estimate how long it is going to take for the user to be helped. Messages such as “You’re number 5 in the queue” are less helpful than an actual time estimate — for example, one of our study participants noted, after waiting for a few minutes while being number 2 in the wait queue: “They must be really understaffed….”  Another user was puzzled by the message “0 contacts ahead” that he received while waiting for a Purple representative, together with “Please hold for the next available well-rested specialist.” He said “I’m not sure if I should start typing or I should wait because I’m the next person in line… I’ll wait and see if they reply in about a minute and if not I will go ahead and ask my question.”

Purple.com: The chat system displayed conflicting messages, and the user was not sure whether he was supposed to wait or to start typing.

During the chat, people were generally pleased to see the message Agent is typing. It did help them wait more patiently for the agent’s message. However, if the agent’s message took too long to appear, they started becoming suspicious and felt deceived.

Best Buy used puzzling language to communicate the state of the agent: “Agent is paused” caused people to wonder whether the agent had left. “Is this the same as you’re on hold?”

Even a one minute wait can seem a long time if you’re staring at a screen, waiting for a response. Show time stamps for messages to put response times in the right perspective. Time stamps also give users a handle to refer to different conversation items in case they will need the chat log in future comunications with the company.

Dell.com showed a timestamp for each message sent either by the user or by the agent. People commented favorably on that detail.

If a request takes unusually long to respond to, update the users and let them know that the agent is still working.  “Still checking” or “I’m still working on that” are useful progress indicators that let users know that the agent has not abandoned the chat entirely.

8.Use a Separate Chat Window

In general, we don’t advocate opening up new content in a new window or tab. Chat is one of the few exceptions to that rule: seeing the chat window next to a view of a different page on the site can help user refer back to information (such a product details or order numbers) that they may have questions about and can also make it easier to explore whatever links the agents will provide.

“I could probably answer maybe even go on a website as I am speaking to them and compare different ones,” remarked one user, as she was interacting with the Dell chat.

9.Visually Differentiate the Messages Coming from Different Participants in the Chat

Several users commented positively when the messages of the agent were shown in a different color than the messages of the user. Dell took this differentiation one step further by using yet a different color for automatically generated messages (labeled as coming from the System — see the screenshot above). One user said:  “I like the layout on the screen with different colors — my reply, and their reply, it’s really easy to see.”

10.Prepare for Possible Interruptions

Users in our study appreciated when the chat agents took precautions so that the conversation could continue if it accidentally got disconnected. Some companies asked for the users’ phone numbers so they could call back. Even better was when the agent offered an email address that the user could use to resume the conversation.

In general, give users control over whether they continue the conversation or not. Also, ensure that if the user does attempt to resume an interrupted chat session, the context (and the progress) is saved and the user doesn’t have to reenter questions or start over.

11.Don’t Make Users Type Their Question Multiple Times

Some systems ask users to type some preliminary information (like their name and their question) before connecting them with a chat representative. It’s very annoying when the chat agent asks again for the same information — first, it’s a waste of users’ time, and, second, it shows that the company does not have a well-planned protocol for chat.

We have always recommended seamlessness in omnichannel UX, but as far as users are concerned, a single chat window is a single interaction (even if the backend may involve multiple agents or a combination of humans and computers), so seamlessness is that much more of a requirement for chat.

On Forever 21’s website, a user was asked to type in her question first, and, then, after she was connected to a chat agent, she had to answer the same question again.

Forever 21 asked the user what her problem was before and after she was connected to a representative.

If you ask users to explain the reason for their chat request, use that explanation to provide them with good service; don’t waste their time.

12.Avoid Automated, System-Generated Messages

While chatting with a customer-representative on Met Opera’s site, one user was told to wait while the agent was searching for an answer. After a while, she received the message Your session has expired due to inactivity. The user was surprised and disappointed, and she was ready to close the chat window. But the chat representative then replied back with an answer to her question.

The message was likely automatically generated by the system and not sent directly by the agent. Unfortunately, the user had no way of knowing that, especially since the automated message was displayed in the same way as the other agent-generated messages.  The user said: “I assume Judy [the chat agent] typed that in as the session was expiring and then went back to search for my answer maybe…”

MetOpera.com: A study participant was told that her session has ended and then received her answer from the chat agent.

13.Allow People to Upload Documents During the Chat Session

In case people need to submit photos or additional documentation about their problem, they should be able to do it regardless of the device they are using. Google Express allowed desktop users to upload an attachment to their message.

Google Express allowed users to upload an attachment on desktop.

Dell also had an attachment button, but unfortunately it did not work on a mobile device.

14.Allow Users to Save a Transcript of the Session

Many chat systems offered to email users a transcript or allowed them to save a pdf. Users commented favorably when they were offered with these options, for several reasons: (1) the transcript could serve as a reference later; (2) they felt reassured that they could quote the agent in case of a dispute or another type of issue — “I like having the transcript; especially if they’re rude.”

We recommend offering both options. Saving a pdf may not be handy on a mobile device, but on a desktop it can be preferable to receiving an email.

If users choose to have the transcript emailed and their email address was collected during the conversation, make sure you don’t force them to enter that email address again.

15.If Live Chat Is Not Always Available, Specify the Hours When It Is

MetOpera did not always have live chat available, yet it did not tell people when they could use that opportunity.

16.The Agent Should Not Start the Conversation with “How Are You”

While the chat agent should be polite, an emphasis should be put on efficiency. Polite questions such as “How are you today” or just the word “Hello” delay some people. One of our users had already started typing her question when the agent asked “Hello; How are you?” She deleted what she had already typed and entered “Fine” instead and retyped her question.

A better chat starter is: “Hello! How can I help you today?”

17.Be Upfront About Using a Bot

People can better calibrate their language and their expectations when they know that their conversation partner is a bot.

When they chat with a human, some users do try to be polite to get a better response. “I try to be friendly. The nicer I am the better they will respond.” Although not everybody feels the pressure to be polite, some people will be excessively so and waste time and bandwidth with pleasantries when they think that a real person is at the other end of the line. For example, they will say “Thank you” and “Good bye” at the end of a conversation. Or phrase their questions with “is it possible…” Many said they would feel bad to just close the chat window at the end of a session, “out of respect for the other person.”

When users know that their chat partner is a bot, they often streamline their language to make it more easily understandable. Take advantage of this natural tendency and let people know if your agent is a bot.

18.Don’t Overuse Canned Responses

Some canned responses are acceptable, but a lot of canned responses raise suspicion and make people believe that the agent is a bot. “This makes me think I am talking to a bot… The answers seem pretty general” said a user interacting with a Dell agent who had just replied “Glad that you chatted in. I’ll be happy to assist you with your concern today” after she had described her problem.

People like friendly, not overly formal language that sounds like a real person. Occasional typos are okay, but a lot of typos can raise questions about the professionalism of the company.

19.A Canned Response Should Be Instantaneous

Chat agents should have responses to common questions already prepared.  But don’t assume that users won’t know when a question they ask is a simple, common one. They do and they expect such questions to be answered quickly.

In a longer conversation, one user asked a Purple representative about the company’s return policy and got an answer after 2 minutes. He commented “I could get that answer from everywhere, so it bothers me that it took so long for him to give me that answer. Even though it was just two minutes, it felt like a long time just waiting staring at my phone… It’s a copy-paste answer, he could have copied-pasted it very quickly, but it took so long. I could have done that in 10 seconds. “

Purple: The chat agent took 2 minutes to answer a simple question about Purple’s return policy.

20.Provide Users with Specific, Detailed Answers

When people have invested the time in a chat conversation, it means they likely need detail that they were not able to find by themselves elsewhere. So it’s important to be as specific as possible and offer them answers that match their needs.

The participant who was shopping for a Purple mattress commented that the answer he received about the refund policy was not specific enough for him. “I don’t like when I’m presented with vague answers, like ‘all the information you would need would be presented in this form’. Making it seem like it’s very easy, but what if it’s not? It’s annoying, because I’m sure it’s not going to be as easy. It’s an expensive item, it’s almost $2800, I don’t think it will be that easy.” He was expecting to get details about how the mattress would be shipped back, whether there would be any costs associated with shipping, and whether he would need to justify why he did not like it.

Sometimes providing a specific answer might involve getting more data from the customer. On Dell.com, a user asked a question about monitors that would work with her laptop. The agent proceeded in searching for a monitor for her, but he did not ask her what type of laptop she had. The user wondered whether the representative would be able to do any useful work in the absence of that information.

Conclusion

Chat is a popular means for contacting customer service. To be effective, it needs to be easy to find and supply prompt, clear, and detailed responses. Companies should be upfront about using bots to help users calibrate their language and their expectations. They should also avoid empty or duplicate questions and allow people to upload supplemental materials or save their chat logs for further reference.

[warmdevs]

New Post has been published on https://warmdevs.com/store-finders-and-locators.html

Store Finders and Locators

The Internet might be virtual, but customers live in physical space and at least sometimes they need to visit companies in the real world. Given this fact of life, geography determines business success in a very simple way: Customers can either find your locations or they cannot.

Websites play a major role in helping customers find their way to company locations, including branches, stores, offices, dealers, and other outlets such as ATMs, package-dropoff points, or facilities that accept returned goods for ecommerce sites. Whenever customers need to do business at a physical location, a company’s website should help them find the most convenient location that offers the services they need.

Ecommerce shoppers expect convenience. They want the physical and online worlds to mesh and allow them to conduct their business on whichever channel is currently the most convenient. For example, users may choose to:

Conduct research and browse for products online, then purchase in person

Browse and compare products in person, then purchase online

Shop and purchase products online, then pick up the purchase in person

Return previously purchased items in person, rather than shipping them

In these scenarios, easily determining the nearest company location and getting directions are key steps in the customer journey. A website’s most fundamental purpose is to serve as a company’s business card in cyberspace and say, «Here we are.»

Four Research Studies

To assess the usability of store finders and locators, we have conducted four rounds of usability studies, with a total of 46 users testing the location finders on 28 desktop websites and 28 mobile websites and apps.

For each round of testing, we chose companies that represent a range of industries — from traditional retailers, financial institutions, and high-tech companies to restaurants and the US Post Office. Each website represented a number of locations, ranging from just a few (2–10) to thousands.

In each round of testing, we asked users to find the company location closest to them (or closest to a specified address) and to get directions to that location. Sometimes, we also asked users to find a location that met certain special requirements, such as being open at a certain time or possessing a specified amenity or service such as a drive-through.

Trends in Locator Usability

Our initial research on store locators was conducted 18 years ago. Our subsequent studies have found that the majority of our initial findings have remained stable, though many of our guidelines have been updated to reflect modern design trends and developments, as well as changes in user behavior. (Behavioral changes are uncommon for short or even medium time spans, but are to be expected to some extent across large periods of time, due largely to the changes in the available technology.)

Comparing the 4 rounds of testing allows us to assess long-term trends in locator usability. And wow, have there been changes. Most strikingly, users’ success rates in finding and using the locators increased from 63% in Study 1 to 96% in Study 2, which was conducted in 2008. Thankfully, user success rates have remained at this high rate now, at 97% in Study 4.

Ninety-seven percent is an astoundingly high success rate. Of course, finding an appropriate location address is a simple task compared to using other website services. Consider, for example, the much higher complexity of tasks such as managing your investments, researching car purchases and financing, deciding which hydraulic excavator best suits your copper mine, or even buying a birthday present for your nephew.

Still, it’s great to see locator usability increase this much.

All is not perfect, however. Users accomplished only 57% of the locator tasks easily. Thus, even though users directly failed only 3% of the time, they encountered difficulty with the locators 40% of the time. Particularly for a simple feature like the locator, it must be not only possible to accomplish the task, but also easy and pleasant to do so. On this stricter usability requirement, locators still have a lot of room for improvement.

Successfully using a locator involves three steps:

Finding the locator

Using the locator to find your desired location

Getting directions from your starting point to this location

All three of these steps must be easy. One of the biggest reasons for the dramatic increase in locator usability in Study 2 was that the first step is now fairly easy because — as recommended — most sites offer clearly labeled links to their locators. Made-up or fancy link names are almost a thing of the past. In Study 1, only 30% of sites included an obvious link to the locator, whereas 90% of the sites in Study 2 did so. This trend has persisted, and 91% of the sites in the most recent Study 4 included an obvious link to the locator.

Step 3 is also easier now, as most sites use better mapping services than we saw originally.

Step 2 is the main culprit in usability problems these days: The actual location finders are either too complex, or they are oversimplified, making it more difficult for users to find which locations meet their needs.

People Gravitate to Search to Find Locations

Another big difference compared to our initial study is the strong increase in search dominance when looking for company locations. This is no surprise; we’ve found increasing search dominance in many other recent studies as well.

In our recent research, 80% of users went directly to a search engine or dedicated mapping app (mainly Google Maps) when we asked them to find a nearby location for their personal bank, while the remaining 20% navigated directly to their bank’s website or app.

This search-dominant behavior also raises a question: Should you eliminate the location finder from your own site, since so many people turn to search first? The answer is no, for two reasons:

As soon as users already on your site decide to do business with you, they should be able to easily access a location finder. Because they might make this decision on any page of your site, all pages should link to the locator.

Even people who start out at a search engine will often prefer your site’s locator tool for specific details, such as what services or amenities are offered. To make this option possible, your site must have a locator. Further, you should maintain an up-to-date, accurate list of features available at each location, and make sure that this information is findable by those who search for it on the web.

Using Current Location Streamlines Search

The availability of geolocation for both mobile and desktop computers has substantially improved the UX of store locators in the past decade. The ability to use their current location saves users the effort to type in the many situations when they are interested in stores close to them. This functionality is especially important to users on mobile devices, but is helpful on desktop as well.

Many of the websites we tested in Studies 3 and 4 included the option to use current location to begin a search. The majority of study participants allowed access to their current location when the site requested it. Some desktop users did not notice the browser popup requesting their location because their attention was focused elsewhere on the page. Moreover, sometimes denying access to the current location prevented people from changing their mind later on in the session. Therefore, we recommend that you include an explicit Use Current Location element (either button, checkbox, or link) in the locator form in order to enable the use of current location.

UPS (left) and Famous Footwear (right) both included options to conduct a location search using the device’s current location.

Mobile Phones Make Printing Unnecessary

Before smartphones became ubiquitous, people used to print directions to take with them on the road. This habit has died: everybody has now access to a smartphone map application at all times. While our initial guidelines related to ensuring usability of printed directions still hold true, they are no longer relevant to current designs.

What is more important for locators today is streamlining the movement across multiple devices. Links to send a location to your phone from a desktop site or to share with a friend are relevant and helpful to users.

Google Maps included a link to Send directions to your phone above route information. Clicking the link opened a modal window to select whether to email or text the directions to the user’s device.

The Share feature was available on the REI mobile app, making it easy to send the location to another person via email, SMS message, or social networks.

External Mapping Tool Dominance

Another noticeable change over our years of research is users’ increasing reliance on external mapping tools such as Google Maps, Apple Maps, or Waze to provide turn-by-turn directions. Companies have reacted to this new state of facts. In Study 4, only two of the 11 sites tested used an on-site map tool to provide directions. All others linked out to an external mapping tool.

This movement to leveraging external mapping tools is actually welcome and leads to a better, more consistent user experience. People can rely on an interface that is familiar and trustworthy (that of their phone’s native map app on mobile or of Google Maps on desktop) instead of having to learn a new map interface for every website they visit.

[warmdevs]

New Post has been published on https://warmdevs.com/ux-guidelines-for-ecommerce-homepages-category-pages-and-product-listing-pages.html

UX Guidelines for Ecommerce Homepages, Category Pages, and Product Listing Pages

To purchase products online, people need to understand what an ecommerce website sells and find an item they are interested in. Some may search for a product if they know precisely what they want, but many more rely on browsing to discover what products are available and which best suit their needs. Usable homepages, category pages, and listing pages are critical to the browsing experience.

Homepages are the first introduction to a site and the range of products or services sold. Category pages and product listing pages are midlevel pages within an ecommerce site; they introduce product groupings and items within those groupings, respectively. The path to products must be thoughtfully designed to convey differences among various product categories and among individual products, and thus help users locate the item best suited to their needs.

Users who arrive at a site from an external search engine will often land on a category page or a listing page, if they searched for a type of product, rather than a specific product. These intermediate-level pages can have excellent SEO performance, which is one more reason to care about their user experience, besides their importance for within-site navigation.

As part of our recent research across 49 ecommerce sites, we analyzed various aspects of homepages, category pages, and listing pages to derive design guidelines for making these pages easy to use. In this article we present a brief overview of our recommendations.

Welcoming, Informative Homepage

Not all shoppers enter a site through the homepage, but, for those who do, the homepage should effectively introduce the site and explain what it sells and how it is different from competitors. Your homepage must communicate who you are, and, for ecommerce, should expose the main product offerings and enable users to start shopping.

While this recommendation may seem straightforward, some of our study participants struggled on homepages that were overly cluttered and failed to showcase items representative of their offerings. The homepage is to a website what a front-window display is to a physical store: the more items crammed into the window, the lower the overall perceived value (more clutter often means lower quality). And those items in the window better be a good representation of what’s available inside the store, if you want to capture all potential customers.

A user thought that the NutriLiving homepage was too cluttered and full of ads, without showing what items were sold on the site.

Clear Product Organization

Navigational options and product categories need to be clear, with labels that make sense to users on their own, as well as in relation to other options on the site. Users must be able to quickly understand each category, and how it differs from the others in order to decide where to click. When space allows, leverage the main navigation bar to show users what product categories are available, rather than merely lumping everything together under a single, easy-to-overlook Shop link.

To support the multiple ways people browse through products, a polyhierarchy can improve findability by allowing certain items or subcategories to exist in more than one parent category. When users don’t find what they want where they expect to find it, they assume the site doesn’t offer what they need.

The REI site had clear navigational categories that made it easy for users to find what they were looking for. The polyhierarchy allowed some users to find hiking clothes under Camp & Hike, while others browsed to the Men or Women categories and then shopped by activity.

Promote Subcategories While Exposing Product Listings

This latest round of research found that, compared to the past, fewer sites provide traditional category pages as interim pages before presenting individual products. In an effort to reduce the number of pages that users must click through, many sites now have replaced or augmented category-landing pages with lists of products plus options for users to use filters or facets to narrow them down.

The most successful mergers of category and listing pages were those that highlighted available subcategories separately from other filters, most often above the product listings. This practice increased the discoverability of the subcategories and encouraged users to navigate to a more specific group of products to reduce the number of items listed and avoid choice overload. The breadth of the site’s inventory often dictated the exact merge of these category pages and listing pages, with some sites (like Target) leaning toward a more-traditional category-landing page with product listings appended to the bottom, and other sites (like Asos) leaning toward presenting a product listing page with subcategory navigation highlighted at the top of the page.

Target.com: The top part of the Kitchen & Dining section looked like a traditional category-landing page, with links to available subcategories; the bottom part displayed individual product listings to allow immediate access to items and minimize the number of clicks.

Asos.com: The category page for Accessories displayed prominent subcategory links above product listings. Due to the relatively small footprint of the subcategory area, this layout encourages browsing through individual items more than Target’s layout above.

Differentiating Product Information

Another trend seen in this latest research is an increased amount of product information on product listing pages. As long as the information is well-curated and uncluttered, this trend allows users to make informed decisions about products without visiting each detail page. Especially on mobile browsers, where every click counts if the internet connection is weak and opening multiple tabs to compare items is more cumbersome than on desktop, users expect product listings to provide enough differentiating information so they can fully understand whether an item is worth a click.

Helpful differentiating information for each product listing should include, at a minimum:

Concise names that contain important and meaningful product characteristics

Photos large enough to identify a known item and show differences between items

Indication of other available colors, styles, or options

Price (while this latest research focused on B2C ecommerce sites, our earlier studies show that lack of prices is a huge usability problem on B2B sites)

Some sites provided even more information, going above and beyond these basic requirements. Users appreciated this extra information, as it allowed them to gain further knowledge about an item before committing to a new page load.

Additional product information that can be helpful to users includes:

Customer ratings

Icons or similar indications to mark items as popular, new, on sale, and so on

Availability information (in stock, or available in a nearby physical store; sizes that are available if applicable)

Link to a quick-view tool to view a brief product description and other details without loading a new page

Alternate product images available via hover or by clicking through a carousel

Product listings on Sears included detailed names, large photos, alternate color swatches, price, customer ratings and information about the delivery window.

The mobile site of Airbnb allowed users to view additional photos by swiping within the main image area for each listing, as indicated by the small white dots near the bottom of each photo. On desktop, hovering over an image exposed arrow controls for viewing the additional photos.

Conclusion

People who browse ecommerce websites need to get a clear understanding of the options available to them, with a minimum expense of time or effort. A good presentation of the breadth of products available both on the homepage and within the category pages, as well as clear, descriptive product listings can go a long way towards improving the usability of ecommerce sites. Some of the new trends in category pages and product listings are positive developments inspired by mobile and responsive designs; they minimize the number of clicks and allow users to make informed selections sooner in the shopping process than in the past.

[warmdevs]

New Post has been published on https://warmdevs.com/ux-guidelines-for-ecommerce-homepages-category-pages-and-product-listing-pages.html

UX Guidelines for Ecommerce Homepages, Category Pages, and Product Listing Pages

To purchase products online, people need to understand what an ecommerce website sells and find an item they are interested in. Some may search for a product if they know precisely what they want, but many more rely on browsing to discover what products are available and which best suit their needs. Usable homepages, category pages, and listing pages are critical to the browsing experience.

Homepages are the first introduction to a site and the range of products or services sold. Category pages and product listing pages are midlevel pages within an ecommerce site; they introduce product groupings and items within those groupings, respectively. The path to products must be thoughtfully designed to convey differences among various product categories and among individual products, and thus help users locate the item best suited to their needs.

Users who arrive at a site from an external search engine will often land on a category page or a listing page, if they searched for a type of product, rather than a specific product. These intermediate-level pages can have excellent SEO performance, which is one more reason to care about their user experience, besides their importance for within-site navigation.

As part of our recent research across 49 ecommerce sites, we analyzed various aspects of homepages, category pages, and listing pages to derive design guidelines for making these pages easy to use. In this article we present a brief overview of our recommendations.

Welcoming, Informative Homepage

Not all shoppers enter a site through the homepage, but, for those who do, the homepage should effectively introduce the site and explain what it sells and how it is different from competitors. Your homepage must communicate who you are, and, for ecommerce, should expose the main product offerings and enable users to start shopping.

While this recommendation may seem straightforward, some of our study participants struggled on homepages that were overly cluttered and failed to showcase items representative of their offerings. The homepage is to a website what a front-window display is to a physical store: the more items crammed into the window, the lower the overall perceived value (more clutter often means lower quality). And those items in the window better be a good representation of what’s available inside the store, if you want to capture all potential customers.

A user thought that the NutriLiving homepage was too cluttered and full of ads, without showing what items were sold on the site.

Clear Product Organization

Navigational options and product categories need to be clear, with labels that make sense to users on their own, as well as in relation to other options on the site. Users must be able to quickly understand each category, and how it differs from the others in order to decide where to click. When space allows, leverage the main navigation bar to show users what product categories are available, rather than merely lumping everything together under a single, easy-to-overlook Shop link.

To support the multiple ways people browse through products, a polyhierarchy can improve findability by allowing certain items or subcategories to exist in more than one parent category. When users don’t find what they want where they expect to find it, they assume the site doesn’t offer what they need.

The REI site had clear navigational categories that made it easy for users to find what they were looking for. The polyhierarchy allowed some users to find hiking clothes under Camp & Hike, while others browsed to the Men or Women categories and then shopped by activity.

Promote Subcategories While Exposing Product Listings

This latest round of research found that, compared to the past, fewer sites provide traditional category pages as interim pages before presenting individual products. In an effort to reduce the number of pages that users must click through, many sites now have replaced or augmented category-landing pages with lists of products plus options for users to use filters or facets to narrow them down.

The most successful mergers of category and listing pages were those that highlighted available subcategories separately from other filters, most often above the product listings. This practice increased the discoverability of the subcategories and encouraged users to navigate to a more specific group of products to reduce the number of items listed and avoid choice overload. The breadth of the site’s inventory often dictated the exact merge of these category pages and listing pages, with some sites (like Target) leaning toward a more-traditional category-landing page with product listings appended to the bottom, and other sites (like Asos) leaning toward presenting a product listing page with subcategory navigation highlighted at the top of the page.

Target.com: The top part of the Kitchen & Dining section looked like a traditional category-landing page, with links to available subcategories; the bottom part displayed individual product listings to allow immediate access to items and minimize the number of clicks.

Asos.com: The category page for Accessories displayed prominent subcategory links above product listings. Due to the relatively small footprint of the subcategory area, this layout encourages browsing through individual items more than Target’s layout above.

Differentiating Product Information

Another trend seen in this latest research is an increased amount of product information on product listing pages. As long as the information is well-curated and uncluttered, this trend allows users to make informed decisions about products without visiting each detail page. Especially on mobile browsers, where every click counts if the internet connection is weak and opening multiple tabs to compare items is more cumbersome than on desktop, users expect product listings to provide enough differentiating information so they can fully understand whether an item is worth a click.

Helpful differentiating information for each product listing should include, at a minimum:

Concise names that contain important and meaningful product characteristics

Photos large enough to identify a known item and show differences between items

Indication of other available colors, styles, or options

Price (while this latest research focused on B2C ecommerce sites, our earlier studies show that lack of prices is a huge usability problem on B2B sites)

Some sites provided even more information, going above and beyond these basic requirements. Users appreciated this extra information, as it allowed them to gain further knowledge about an item before committing to a new page load.

Additional product information that can be helpful to users includes:

Customer ratings

Icons or similar indications to mark items as popular, new, on sale, and so on

Availability information (in stock, or available in a nearby physical store; sizes that are available if applicable)

Link to a quick-view tool to view a brief product description and other details without loading a new page

Alternate product images available via hover or by clicking through a carousel

Product listings on Sears included detailed names, large photos, alternate color swatches, price, customer ratings and information about the delivery window.

The mobile site of Airbnb allowed users to view additional photos by swiping within the main image area for each listing, as indicated by the small white dots near the bottom of each photo. On desktop, hovering over an image exposed arrow controls for viewing the additional photos.

Conclusion

People who browse ecommerce websites need to get a clear understanding of the options available to them, with a minimum expense of time or effort. A good presentation of the breadth of products available both on the homepage and within the category pages, as well as clear, descriptive product listings can go a long way towards improving the usability of ecommerce sites. Some of the new trends in category pages and product listings are positive developments inspired by mobile and responsive designs; they minimize the number of clicks and allow users to make informed selections sooner in the shopping process than in the past.

[warmdevs]

New Post has been published on https://warmdevs.com/customer-service-information-on-websites-the-hub-and-spoke-model.html

Customer-Service Information on Websites: The Hub-and-Spoke Model

As part of our recent research for the fourth edition of our Ecommerce User Experience report series, we conducted user studies to understand how people approach customer-service–type activities on the web and how websites provide support.

We conducted one large-scale study to discover general behaviors and usability across all areas of ecommerce websites, including customer service. A second study was designed to specifically gather data for the fourth edition of our report on the customer-service user experience, which is part of the overall ecommerce-report series. This more targeted study consisted of eight 90-minute remote moderated usability-test sessions with participants from across the United States. Each participant was given a subset of 57 customer-service–related activities across 23 unique business-to-consumer ecommerce websites.

These studies have helped us identify many best practices for delivering customer-service information on websites and develop a model for the organization and delivery of this information. Though this model came from research on ecommerce websites, it can be applied to all types of sites providing customer service and support to their users. Standardizing the presentation of customer-service information is important because it allows users to easily access this information when they need it and indirectly builds up trust in the company.

Research Findings

Although users were generally successful at finding customer-service information on websites, the path to this content was not always straightforward. Many study participants had to work hard to find the information they sought, and this process often included a lot of trial and error as users unnecessarily visited many different pages on the site.  Eventually, participants were able to find the customer-service information in the utility and footer menus, which included links to customer-service pages for all the sites in our study.

Though similar information was provided across a lot of the sites we studied, the labels used in global navigation and the structure of service-related pages on these sites varied tremendously. The lack of a standardized framework for the delivery of customer-service information across the web meant that users encountered different experiences on nearly every site. Consequently, our study participants were often unsure where to click first when looking for the answer to a question. For example,

Some websites used the label Customer Service, while others used the word Help.

Some sites relied heavily on an FAQ page, while omitting a customer-service page altogether.

Others focused on providing links to specific customer-service topics like privacy policy and return policy, rather than including a high-level customer-service page.

Some approaches worked better than others in enabling customers to efficiently locate the information they needed. One user on OneKingsLane.com was looking for a phone number. He spent several minutes on the home page going back and forth between the header and footer in search of a link, saying, “I’m looking for a Contact Us but I’m not seeing it anywhere.” He tried visiting About Us, but he got stuck in a separate microsite about the company and its employees. The contact information was located under the Help link, but in the end, he googled One King’s Lane and found the contact number on the company’s Facebook page.

OneKingsLane.com: Users could access customer service via Help or other links at the bottom of the homepage. However, the label Help did not resonate with users looking for ways to contact the company.

Users had a difficult time locating information about Kohl’s price-match guarantee on Kohl’s website. Several people looked at the bottom of the page, where the site listed multiple customer-service options (such as Contact Us, Shipping, and Kohl’s Cash), but the area provided no high-level link to general customer-service information or to a price-match policy. They inspected the list again and again, trying to determine where to click in order to find the right information. An aggravating factor was the header Customer Service, which housed all these links, but was not clickable.

In the end, each participant had to make a best guess and select from the available options, rather than confidently proceeding down a path to the answer. One user clicked on Returns because it seemed the most logical option. She spent several minutes reading about returns before opting to use the site search for price-match information. Happily, customer-service information was indexed by site search, so she was eventually able to find her answer.

Kohls.com: Links in the homepage footer led to specific customer-service policies, rather than to a general customer-service page with access to all related information.

Customer-Service Guidelines

Here are a few guidelines for presenting customer-service links in global navigation:

Provide at least one customer-service hub page that serves as a catch-all. Sites should always include a high-level customer-service page housing links to any customer-service related question. If customers are unsure which link to visit, they should be able to rely on the hub page to find a path to any service information.

Name the main hub page Customer Service or Customer Assistance. These labels always performed well in our study. Users were confident that they would find answers when they saw these labels. Alternative names such as Help or Help Center caused confusion. Many users skimmed past them looking for a more promising link and several shared their opinion that Help would bring them to website help rather than to general customer-service content about price matching or other policies. Though users would often visit these pages as a last resort and eventually find the information they were looking for, it wasn’t without confusion or uncertainty. (Also the word “help” has a bad rep, based on the poor online help provided by many applications.)

Use only the following 3 standard customer-service hub pages.

Customer Service: This page should be the main home for all customer-service information, as discussed above.

FAQ: These pages should provide an alternative view of customer-service information presented in the format of common questions and answers.

Contact Us:  When users’ intention is to reach out to the company, they look for links labeled Contact Us; they don’t expect this information to be hosted under an FAQ link. Although people will click on a Customer Service link as a fallback, a Contact Us link is much more straightforward.

The Customer Service page should always be present. FAQ and Contact Us are not required, but can be helpful. In any case, because users see them as general help pages, these pages should be presented at the same level in the information hierarchy and should deliver the expected experience — as described above. Stay away from providing other hub pages besides these three. The more such pages, the harder it will be for people to determine which is the right one.

All hub pages should link together. Many sites label customer-service pages differently, so what is under the Returns link on one site will be found under FAQs on another, or under Customer Service on yet another site. For this reason, users may find themselves making a best guess as to which customer-service page holds the information they need. Often, they will navigate to a page and then realize it is not what they need. For this reason, the big three hub pages should crosslink to each other. For example, someone looking to contact the company may first see and visit the Customer Service link, and from there discover the path to contact the company, leading them to the Contact Us page.But crosslinks to other hub pages can also help users figure out what would be the best way to approach their goal. Thus, a customer looking to contact the company may first see the Contact Us link, but upon seeing a path to FAQ, she may try to self-serve first by inspecting the most common questions before calling. The Contact page on OutdoorVoices.com highlighted a few common questions with links to the appropriate area of the site for each. Additionally, a direct link to FAQs was provided for all other questions.

Customer-service pages should link to hub pages.  To streamline access to important or commonly requested customer-service information, many sites expose direct links to pages that hold this information. This practice is appropriate and helpful for users. Links like Return policy, Track my order, and Shipping information were often exposed in the global navigation in order to provide visitors with a quick path to details. However, because of their prominence, these pages acted like magnets for visitors looking for other types of customer assistance; people tried them hoping for a path to the content they needed. To help such users, these pages should link to the customer-service hubs.The links to the hubs should be found in the body of the page. Don’t rely on the links in the global navigation as the only pathway to hub and other related service pages. Often, if users didn’t find the answer on the first page they visited, they assumed it wasn’t provided on the site and did not return to the footer to try another page. Placing links to related information in the body of the page makes that information more discoverable.

On CooksDirect.com, users had a hard time finding the shipping charges for backordered items. The site’s footer provided a direct link to the shipping policy, and many users clicked it. However, the shipping-policy page had no information about whether there will be additional shipping charges for items on backorder.

This information did exist on the FAQ page, but that page was not linked to from the shipping-policy page, so users did not find it.

CooksDirect.com: Users could navigate to specific shipping-policy pages, but had trouble locating the additional information they needed, which existed on the FAQ page, but was not referenced on the policy page.

Hub-and-Spoke Customer-Service–Delivery Model

Based on these findings and best practices we propose the following model for the delivery of customer-service information on ecommerce websites. In this model you can see the following:

The Customer Service page is the main hub page.

FAQ and Contact us are secondary and may or may not need to exist.

Hub pages link to each other.

Other customer-service pages act as spokes outside of the main hubs and have links back to the main hub pages.

A customer-service‑delivery model includes main hub pages that serve as catch all links for all service-related information along with lower-level granular links with direct paths back to hub pages.

GuitarCenter.com’s customer-service pages adhered to this model. Our study participants found customer-service information easily on this site.

GuitarCenter.com: The footer navigation provided a link to the high-level hub page labeled Service and Support. Though not called Customer Service (as we recommend), this label was easily identified as the main starting point for all service-related information. Granular spoke pages were also exposed in the footer navigation for direct access to popular topics.

GuitarCenter.com: The main customer-service hub page provided access to many various areas of service and support information. It also included links to an FAQ and access to contact channels. Guitar Center did not represent these two pages as hub pages because they weren’t available from the global navigation and did not link to each other.

GuitarCenter.com: The return-policy page was accessible from the footer and from the Service and Support page. In this case, many of the customer-service spoke pages also linked to each other through the secondary navigation menu on the left.

Conclusion

Do customers call or email your support channels looking for information that can be found on your website? This behavior may be an indication that your support information is not structured or delivered appropriately and that people have trouble locating it. Remember that for every one such request you can count, there are dozens of other frustrated customers who also couldn’t find the information they needed, but who either also couldn’t find your contact info, or simply gave up and went elsewhere (to Google or a competitor).

Even those who can find the customer-assistance information may put in an unnecessary amount of work. Hard to find customer-service content impacts customers’ perceptions of the company. The hub-and-spoke model for the organization and delivery of customer-service information shows what important customer service pages should exist and the most effective hierarchical relationships between them. Though this model was developed from research on ecommerce websites, it is valid and useful for other industries as well.

Take a look at the way customer-service information is delivered on your website. Use the hub-and-spoke model for delivery to  ensure that your users are successful in getting the support they need on your website.