A widespread misconception with business–to–business (B2B) sites is that they are immune to rules and usability standards that apply to ecommerce on business–to–consumer (B2C) sites. In fact, B2B design teams should account for their users’ needs and follow usability principles to address customer concerns and build trust. The business professionals who use B2B sites also shop on plenty of B2C sites, and Jakob’s Law of the Internet User Experience states that people will form their expectations from the majority of sites they visit. Common ecommerce UX recommendations help B2B web-design teams to build trust with their users.

Unique B2B Constraints

Many of the same UX principles that organizations employ to build customer trust in B2C sites can also be applied to B2B. However, B2B consumers often have additional constraints compared to their B2C counterparts:

• High switching costs: Often, companies must get out of another contract with a competitor in order to purchase a B2B product. The relative “cost” of switching to a new organization for a service or product can be high due to:
  • Termination costs, which impose a termination fee or some other financial penalty for terminating a contract
  • Data costs, in the form of lost access or privileges, if the customer switches to a new service provider
  • Transfer costs of moving legacy items (data, files, materials, cases, people, etc.) to the “new” provide
• Purchase complexity: Even if a site makes the purchasing process extremely easy, the buyers are often getting more than just a product — they are getting additional value such as services, maintenance, and support. These aspects make the decision complex, even in the best-case scenario. The complexity of the decision means it requires a lot of working memory and knowledge — in other words, a high cognitive load.

In this article, we will discuss how to build lasting customer relationships with B2B consumers by effectively addressing unique considerations in three categories:

Organizational budgets and pricing

Contacting a sales representative

Selling the decision internally

B2B Budgets & Pricing

Much like their B2C counterparts, B2B customers are usually price-conscious. However, B2B budgets can be more difficult to deal with than personal budgets because they are:

• often set by a manager or by other senior colleagues rather than by the person who is researching or purchasing the product
• approved and not revisited for a year or more
• complex because they include elements such as long-term support or maintenance services along with the purchase

Imagine a B2B consumer who does her research and gets budget approval, but, after talking to sales, determines that a different, more expensive solution would be a better choice than the one identified initially. She may not have the power to increase the budget or it may take a fiscal year to do so. Due to these challenging budget constraints, B2B consumers need to know that their purchasing decision will not result in unforeseen expenses somewhere down the line.

An organization must be clear about prices in B2B environments in order to reassure users that the company acts transparently. In fact, the first site to show a price can anchor users’ expectations.

On the other hand, many B2B sites strive to avoid setting the wrong expectations and, instead, attempt to drive leads by keeping all prices hidden and encouraging users to “request a quote” or “contact sales” to get a starting price. However, this strategy of hiding prices deters users because it:

• Adds an extra step, thereby increasing the overall interaction cost of finding the price. This extra effort may cause users to leave the site to research prices.
• Makes it seem unaffordable (no matter what the person’s budget is). As the old adage goes, “If you have to ask… it’s probably too expensive.” Hiding the price can give the impression that it is “too scary” to be displayed. Even if that may be the case, users will have to learn the price at some point anyway, so hiding it will only worsen the eventual sticker shock (especially if they are anchored to a different starting price — say, from a competitor).
• Makes the organization seem dubious for the simple reason that it is hiding something from users.

Recommendations

Show the price; and if the price is variable, offer common pricing scenarios. 
Perhaps the price is variable due to reasons such as complex solution options or even contract negotiations. To give an idea of price without setting unrealistic expectations, show common pricing scenarios. For example, display a starting price (which can be upgraded based on requirements) or a range of prices.

Clearly explain the pricing model (i.e., plans, packages, or tiers of service).
Capitalize on the principle of loss aversion by showing users what extra features the more-expensive packages include.  This approach encourages people to purchase a slightly more expensive package if they have wiggle room in their budgets. 

Crowdcast.io, a browser-based webinar platform, describes three tiers of service, listed in a comparison table. For easy evaluation, the features are listed in the same order in each column, so users can easily see which plan has the most and the least features and which features are present in a plan.

The site also offers an Enterprise option, in the lower-left corner of the page. This option makes it possible for an organization with specific, less-standard needs to obtain a custom solution. The variety of pricing plans demonstrates Crowdcast.io’s flexibility

If customization is possible, make it clear. Explain what is customizable upfront.
Clearly indicate what kind of customization is available when you list your prices. Call out features that can be customized in order to manage expectations early in the research phase. The “perfect custom solution” probably means different things to different customers. Failing to manage expectations risks overpromising and underdelivering, thus ruining the customer’s trust in the organization.

Lookback.io’s pricing page lists frequently asked questions about pricing models for specific features. The page also reassures users by providing specific email addresses to contact with additional concerns.

Make it easy for people to compare plans.
Use tools like comparison tables to show which services come with each plan or product. Using numeric values and iconography (such as a checkmark or “x”) can indicate if a plan is missing certain options. By clearly explaining what is and is not available in each tier or plan, the company is transparent and upfront, building trust in the organization.

GoToTraining.com: The Most Popular plan suggestion helps users who may struggle with deciding which is the best option. The page also isolates the essential difference among plans — the number of attendees that can participate in a meeting (25, 50, and 200 Attendees). However, using low-contrast text for features not available with the Starter plan, risks legibility and discoverability. A better alternative would be high-contrast text with distinguishable iconography (rather than using faded checkmarks on features which are not available).

Address concerns about costs of switching from a competing product or service.
As mentioned above, B2B consumers often have switching costs to consider in addition to the product’s price. While these costs are inevitable, B2B teams can ease that concern by promoting services or offers that directly reduce the financial and interaction costs of switching (for example, covering termination fees or offering migration assistance). Including this information on FAQ pages or on pricing pages can alleviate stress and bolster trust in the company.

Contact with a Sales Representative

Even if your website provides plenty of information, some B2B consumers will need to contact sales to get information on use cases, ask specific support questions, send a list of requirements, or, in the best case, move forward with a contract with the organization. However, there is often an inherent and legitimate fear that the sales representative will:

• be pushy
• attempt to upsell
• promise something that cannot be delivered

These concerns add to the stress of contacting a sales rep. Purchasers must have trust in the company early in the process in order to feel comfortable to follow through and contact the company.

Similarly, sales representatives often need to gather information about each user’s needs in order to answer these open questions, tailor the order, initiate a contract, or offer a better deal. To do this, a B2B firm usually needs to ask for personal information (like contact information) or company information (as broad as industry information and as specific as company address or department) before providing an appropriate response.

However, asking these questions can add anxiety to the purchasing decision and can decrease users’ trust in the company if they don’t understand why the questions are being asked, if they are too personal, or they are simply too many. To encourage customers to respond truthfully, without mistrust, establish baseline levels of trust first.

Recommendations

Offer as much information about the product or service as you can upfront, without requiring contact with sales rep.
Answer the users’ most basic questions first: why the product is relevant, how the product or service works at a high level (for example, on a How It Works page).  List responses to frequently asked questions about pricing, features, or ongoing post-purchase support. Offering something of value (in this case, detailed information about a product or service and its implementation) builds trust via the principle of reciprocation. Failing to present this information early (or hiding it behind a login wall) and funneling all users through sales representatives gives the impression that the organization either has not figured out how the product works or does not want users’ to know this information, further eroding trust.

If you do have to request information from users, provide a reason why you are making the request.
A 1978 study by Langer and Chanowitz found that, when people are provided a reason (e.g., “because” or “in order to”), they are more likely to comply with requests and trust that those requests are legitimate. Describe why your organization must gather that specific information. While it might be obvious to you (the seller), it may not be obvious to customers. Some examples include:

• “We ask for your postal code to determine service availability in your area.”
• “In order for us to recommend the right solution, we need to ask you a few questions about you and your needs.”
• “For more accurate pricing, please let us know which of these features are most important to you and we will put together a plan that meets your needs.”​

Offer multiple ways to contact the organization.
In our studies, some users preferred to call the company, while others favored using a digital medium like an online form, an email, social media, or chat. In order to cater to different user needs, have multiple avenues for users to reach out to the company (and yes, that also means staffing people to monitor these channels).

At a minimum, include an email address and phone number to reach the company. Then, consider having the following additional communication methods:

• Web-based form
• Social-media links
• Chat

In order to decide which communication methods to support, look into analytics data or metrics like:

• Sales-rep call volume (and duration)
• Quote-request–form completions
• Bounce rate on the Contact Us page
• Social-media page visits
• Search queries

Then, couple those metrics with usability studies to understand (and then prioritize) your audience’s preferred communication methods.  

These techniques help bolster user trust by making it clear that the organization is not skirting the responsibility of resolving customer issues, and, in fact, it wants to resolve those issues by whatever means is most comfortable to the user.

TechSmith offers a range of ways to get in touch with the company, including chat, telephone, email (via contact forms), and offers high-contrast buttons for particular user needs (Contact Sales, Contact Support, etc.). The company goes a step further by showcasing specific topics and concerns from its customer-support forums. Selling Internally to Multiple Stakeholders

Since B2B purchasing decisions usually affect many individuals inside an organization and often multiple people must approve the purchase, the buyer must:

• Understand the product well and be able to educate others about it
• Defend decision and answer questions about hypothetical situations to avoid risk
• Track and communicate approval from others
• Include others in any change-related conversations (about topics such as budget, solutions, contracts, etc.)

Recommendations

Clearly communicate what the product or service does, avoiding jargon (or defining it in place).
Write simply and show high-level information first. Then, as the user progresses (either by scrolling or by moving to a new page), offer more details. Consider how much information needs to be on a high-level overview page and make it easy for users to research details if they want to, by either offering another level of navigation or using clear labeling for links.

If you must use jargon, consider defining specialized terms wherever they appear. Keep in mind that people may land on low-level pages by search, so defining these only once on earlier high- level pages may not be sufficient. Even if your audience is well-educated, do not worry about insulting anyone’s intelligence by using plain language. No one has ever complained about a page being too easy to read. (But do use precise terms that are recognized by your target audience, even if they are complicated for others and may need an explanation.)

Clear copy builds trust because it tends to be perceived as honest and transparent, while convoluted writing is often received with skepticism. Complicated or jargon-filled writing can be perceived as written:

• by someone who wants to sound intelligent but may not actually be intelligent, or
• with the intent to mislead customers or to hide critical information.

Answer “what if” questions.
Provide easy access to FAQs, support pages, and forums. In other words, do not hide this information behind a login wall and make it available to prospective and current customers alike. Additionally, make it easy to send requirements to sales reps by providing a form which allows for attachments.

By answering these concerns upfront, the site can reassure uncertain users that the company can (and will) be able to resolve any potential issues that, further building trust and empowering users in their own efforts to persuade their coworkers or bosses.

Prove that the product or service works.
Give some context about the product service and prove its value to an apprehensive audience by offering information such as:

• Case studies and use cases: These are particularly helpful if your customers come from different industries. The more variety you have in your case studies, the more likely you are to address a wide range of concerns about your product or service. Case studies can also illustrate how to use the product or service in ways that the customer did not already think of.
• Testimonials: In many of our usability studies, testimonials are often noted as useful in the purchasing decision, because hearing an opinion from a fellow customer provides a sense that the product is right. Our research participants were especially sensitive to testimonials that started out with some sort of reservation then turned to confidence in the product (e.g., “I didn’t think this would work for me, but when I tried it I was glad I made the switch”).  Our eyetracking studies also tell us that people care about who wrote testimonial: the author’s job title and affiliation. If you have a global audience, a relevant testimonial can establish relevance, and prove that the company can, in fact, work in places like Brazil or Italy.
• Product demos (screenshots, videos, or live demos): Showing the product in action is useful for many users, particularly for those who can’t download a demo because they have a device on which new software cannot be easily installed without approval (common for enterprise customers). Videos, screenshots, and demos (live or recorded) shed light on how the product works and illustrate specific use cases which are not easily explained in website copy.
• Free trials (without asking for a credit card): Users get excited about the word “free” and often will feel obligated to maintain their relationship with a company if they received some sort of benefit (such as a free trial) from the company. However, no user has ever been excited to provide their credit card information for a free trial. Most see right through this tactic and know that the company is depending on the users forgetting to unsubscribe or cancel the trial after it concludes. Instead, use an identifiable piece of information like email address to restrict account access.

Clearly convey the company’s values and any market differentiation.
It is a false perception that people “don’t read” the About or Company Values pages because they think those pages are just filler. In fact, when users are interested in establishing a long-term relationship with a company, they often want to ensure that it aligns with their own long-term needs and concerns, so they refer to pages with information about the organization and its values.

Our study participants say that seeing a physical location and humans behind the product or service bolsters their trust that the business is a legitimate one. These pages are a great opportunity to showcase images of the company employees and of its premises (if applicable), and also specific differentiators (like company values or technological innovations). If a company is clear about who it is and what it stands for, and users align with that, the company will strike a chord that will resonate with those users long past a single digital interaction.

Conclusion

By incorporating these guidelines, you can help users eliminate doubt and bolster trust. A great B2B site must be as simple, clear, and understandable as any great B2C site. Keeping a human-centered and empathetic approach is the key to building long-term trust with any customer.

 

References

Langer, E., Blank, A., Chanowitz, B. (1978). The mindlessness of ostensibly thoughtful action: The role of “placebic” information in interpersonal interaction. Journal of Personality and Social Psychology, 36, 635-642.

https://samplecic.ch/what-b2b-designers-can-learn-from-b2c-about-building-trust-2.html

On the web, people  don’t read every word on a page; instead, they scan. They naturally attempt to be efficient and put in the least possible work for achieving their goal. They have learned that scanning can deliver almost the same amount of information as reading, but with significant less time and effort.

Scanning Patterns

How people read on the web is highly contingent upon:

• Their task
• Their assumptions from previous experiences with the internet, site, or brand
• The page layout
• The type of page content (e.g., text versus images)

Our eyetracking research has identified multiple scanning patterns for webpages. In this article, I focus on the 4 patterns that people use to scan text on the web  (listed below in increasing order, worst to best, of effectiveness):

• F-pattern
• Spotted pattern
• Layer-cake pattern
• Commitment pattern

Note that there are other patterns that may be used when the page content involves a lot of images (e.g., the zigzag pattern).

F-Pattern

In the absence of subheadings and bullets, users tend to fixate on the words toward the beginning of lines and toward the top of the page. This scanning behavior results in an eyetracking pattern that resembles the capital letter F — hence, our name for this pattern. In left-to-right languages, text on the left and towards the top of the page is read more than text on the right or towards the bottom of the page. (In right-to-left languages the pattern is mirrored vertically, with more attention being spent on the right side of the page.)

TigersinCrisis.com: This heatmap aggregates data from 47 people as they tried to learn how many Sumatran tigers live in the wild. The red color on this heatmap is an example of the F-shaped pattern — same today as when we first reported it in 2006.

 

Right-to-left languages such as Arabic favor a reversed F-pattern, like the one seen in this study participant’s gaze plot, as he was scanning a page on an Arabic website. (Each blue dot signifies a fixation. The lines between the dots represent saccades in which the user is moving the eyes and is virtually blind. These lines help us to follow the sequence of fixations. Larger dots represent longer fixations and the numbers denote their order.) Spotted Pattern

The spotted scanning pattern involves fixating on specific words or chunks of words spread throughout the page. The user chooses words because one of two reasons:

They visually stand out in the text because they are styled differently (e.g.,  links, differently colored words, bolded words, bulleted lists).

They resemble a word that the user looks for to accomplish the current task  (for example,  capital letters for an address, digits for a piece of numeric information).

The spotted scanning pattern is slightly more operative than the F-pattern if the web designers did a good job naming links, making important words look different from the rest of the body text, and creating bulleted lists.

Caption: The heatmap shows an aggregate of six users who were using Wikipedia to learn about the dancer Mikhail Baryshnikov. The heatmap shows the   F-pattern on the left and the spotted pattern on the right side of the page.

 

Caption: A zoomed portion of the previous heatmap shows that the users were highly focused on the information about Baryshnikov’s education, which was their task. The digits 1960 probably attracted attention since users were trying to learn when the dancer began his education.

 

Caption: A user researching hikes in South America on southamericabackpacker.com scanned directly to the short, bulleted list in each hike’s description. She probably found the content in the lists interesting or helpful since, after scanning the first bulleted list, she scanned to bulleted lists eight more times.

 

A zoomed portion of the previous gaze plot shows the user scanning directly to the bulleted lists. Layer-Cake Scanning Pattern

The layer-cake scanning pattern consists of fixations placed mostly on the page’s headings and subheadings. There are few other fixations on the text in between — that is, until users locate the heading they are interested in; at that point, they usually read the accompanying body text below. In an eyetracking heatmap or gaze plot, the layer-cake pattern looks like a set of horizontal stripes and blank spaces between them, resembling a layer cake (with cake on a level, then frosting, then cake, and so on).

Aside from reading almost every word, the layer-cake pattern is by far the most effective way in which users can scan pages.

As he was researching how to winterize a boat engine on Yamaha.com, a user scanned to the subheadings, which appeared as bold, light blue text juxtaposed against the plain, black body text. Commitment Pattern

The commitment pattern demonstrates traditional reading, not scanning. In this pattern, users fixate on all or most content words in the text passage. This pattern usually occurs when users are very interested or very motivated to read the content (for example, because they are studying for a test, or need to return an item on a specific site and are reading the instructions to do so).  

The commitment pattern usually leads to the best comprehension, even though it is the most time consuming. People spend more time and effort reading than they do when just scanning but reading everything gives them the opportunity to glean more information. Note though, that, even for the commitment pattern, text comprehension is improved when the content is chunked and calls out its main points in subheadings. So, just because we know users may want to read or need to read certain content doesn’t give us a pass to load webpages with walls of text.

We said before that the commitment scanning pattern usually occurs when people are highly motivated to be on the page and learn. People are motivated when they:

• know and trust the source
• are loyal to the brand
• believe they are in the best place to find the information (e.g., because they received aa referral, the page title matches their exact need, the description and title on the SERP match their thinking — we like to call this last phenomenon Google Gullibility)

The user was told she would be quizzed on the content in the article on nationalgeographic.com, and thus read almost every word, as the gaze plot shows.

 

In this case, a user was highly interested in the topic and exhibited committed scanning on an article on theguardian.com. Summary

Eyetracking research helps us to see the details of how users look at content and how they choose to skip or read it. When you write, edit, or organize text on a webpage or in an app, keep in mind that how you present your content is likely to favor one of the four text-scanning patterns: the F-pattern, spotted, layer cake, and commitment patterns. Know that most users will read very little from a wall of text; support them by chunking your content into sections and bulleted lists, by using meaningful subheadings, and by special visual styling for keywords.

For more information about reading and scanning, see our full research report, “How People Read on the Web: The Eyetracking Evidence”. To do your own eyetracking research, see how we do eyetracking studies and consult our free report “How to Conduct Eyetracking Studies” for more detailed advice.

https://samplecic.ch/text-scanning-patterns-eyetracking-evidence-2.html

Since the iPhone was introduced in 2007, mobile usability has made tremendous strides:  we use our phones to do a wide variety of tasks. In fact, according to Pew Internet, in 2019 17% of Americans depended on their mobile phone as their only way to access the internet at home. Those numbers are much higher in other parts of the world such as India or China.

We know that even when people have a larger device available, they sometimes prefer to use a mobile phone instead — simply because the mobile phone is always with them and it may be more convenient to use it instead of switching devices (a phenomenon we call device inertia).

But does it mean that mobile will displace computers? Will we eventually discard big-screen devices in favor of smaller, portable ones for tasks as complex as filing taxes or writing research reports?

In this article we don’t aim to answer that question: instead we assess the current state of device preferences. We look at the importance that people assign to activities done on different devices. Has mobile caught up with computers yet? 

Methodology

As part of our Life Online research project, we asked 50 American respondents in a diary study to tell us what they did online in their daily lives. We obtained 492 different records of online activities. Each record included the following information from the respondent:

• A description of the activity
• If (and how) the activity influenced the respondent’s thoughts, opinions, or actions
• Whether the activity was for work, personal life, or school
• Which device(s) was used
• What the respondent’s motivation was for performing the activity
• A rating of how important the activity was to the respondent, on a 1–5 scale, 5 being the most important
• How the respondent felt about the activity
• How long it took
• Whether the activity was successful
• How easy the activity was for the respondent, on a 1–5 scale, 5 being very easy

This dataset allowed us to investigate which devices people use to perform their most important online activities.

Larger Devices Are Used for Important Tasks

We found that the activities carried out on large-screen devices like desktop computers and laptops were considered more important than those performed on smartphones.

This bar chart shows the average activity-importance rating for activities performed on a computer/laptop (red) versus on a mobile device (grey). Computer activities had an average importance rating of 4.03 out of 5, with a 95% margin of error of 0.25. Mobile activities had an average importance rating of 3.61 out of 5, with a 95% margin of error of 0.3. This difference is statistically significant by a paired t-test.

This data says that people tend to do important tasks on the bigger screen, but it doesn’t tell us why they do it. It could be that many of the important tasks are not supported on mobile devices. Or, more likely, it could be that the overall experience of doing these tasks on mobile is perceived as too bad, so people prefer doing these important tasks on bigger devices. In cases where the stakes are high and mistakes could have severe consequences (e.g., doing your taxes), people may feel safer and less error-prone on larger screens.

To throw some further light on this, we looked at the average task-difficulty rating on desktop versus mobile. Task difficulty is often used in quantitative usability testing as a measure of usability; however, it also indirectly reflects the complexity of the task (with complex tasks tending to get higher difficulty scores).

We found that respondents rated mobile activities as easier than computer activities on average (and this difference was statistically significant).

We don’t believe this is because mobile usability as a whole is better than desktop usability. Instead, our interpretation is that users decide to solve their easier problems on their phones and turn to their full-size computer for the more difficult tasks. (Remember that we did not impose the same tasks on both devices, because this study was conducted in the field and was not lab-based. Study participants chose which activities they did and what device to use.)

Together with our finding that mobile activities tend to be rated as less important than computer ones, this result suggests that, unless we can make important tasks easy and fail-proof, people will avoid doing them on mobile devices.

This bar chart shows the average ease rating for activities performed on a computer/laptop (red) and, respectively, on a mobile device (grey). Activity ease was rated on a scale from 1 (very difficult) to 5 (very easy). Computer activities had an average ease rating of 3.96 out of 5, with a 95% margin of error of 0.22. Mobile activities had an average ease rating of 4.52 out of 5, with a 95% margin of error of 0.17. This difference is statistically significant by a paired t-test. Mobile Constraints Still Limit the UX for Complex Tasks

Given the substantial improvements in mobile UX in recent years, these findings may seem a little surprising. There are three changes, in particular, that might make it puzzling: Mobile screens are now bigger, people use their mobile devices more frequently, and mobile products now support a wide variety of functionality.

• Bigger, faster smartphones: In the past, mobile site and app experiences were severely limited by small screens and slow processors, making them fit for little more than media consumption and entertainment. However, today’s smartphones have more than 30-times the RAM of their predecessors, and screen sizes have increased to close to 7 inches.
• Heavier mobile use: Today, smartphones play a larger role in our lives, and as a consequence, users are more familiar and comfortable with mobile than they used to be. For example, in 2010, researchers at the University of Alberta found that reading comprehension was impaired when people read content from a mobile device. When we conducted a similar study in 2016, we found no practical differences in the comprehension scores on easy passages,  whether participants were using a laptop or a mobile device. In our interviews with those participants, some people reported that they actually preferred to read on a mobile device, since that was how they normally read news and other content.
• More support for tasks on mobile: Many modern mobile experiences and products support some important and complicated activities. For example, you can apply for a home loan (typically a fairly complex task) through a mobile app.
• Optimized mobile apps: Some tasks have dedicated support through special applications that are optimized for mobile use and are typically not offered on computers at all. For example, it can be faster to check a bank account balance through the bank’s dedicated app (once installed and configured, of course) than to perform the same task on the bank’s website on a computer.

Despite these product and device improvements, we still found that users choose to do their more important internet-based activities on their larger devices. We suspect that the various device constraints still limit the complexity of the activities that can be done on mobile, essentially degrading the user experience of those tasks deemed as important:

Size: The relatively beefy over-6-inch smartphones available today still pale in comparison to the average laptop screen, let alone a 32-inch desktop monitor ($199 at Walmart these days). Less content in each screenful means less context and a higher cognitive load for users.

• Input: Typing on mobile devices is still a pain. Even alternative input options like swipe keyboards and voice-to-text are often inaccurate and slow users down. Users fear making mistakes and anticipate the interaction cost of data entry on their mobile devices. Particularly if the activity is personally important (like an important email to a client), users might choose a larger device to avoid mistakes.
• One task at a time: Although many mobile operating systems now offer a split-screen mode, the small screen size limits its usefulness. The fact is, in most cases, users on mobile devices must focus on one window at a time. This limitation means that it’s difficult to combine multiple sources of information and carry out complex tasks. These mobile constraints are no problem if the task is simple, unimportant, or open-ended. However, when the task is goal-based and has high stakes, these constraints are reason enough to save the task for another device. These limitations are likely to stick around for the foreseeable future, despite continued hardware or product improvements, and may continue to influence user behavior.

	Desktop/Laptop	Smartphone
Constraints	Not portable	Screen size, input methods, one task at a time
Strengths	Large screens, processing power, inputs, and controls	Portability, camera inputs, GPS, ease of biometric login (fingerprint or facial recognition)
Context of use	Important, and complex activities, research tasks, long-form text, and data entry	Smallest tasks, spur of the moment activity, on-site and away from home activities

Just as device constraints limit certain tasks, device strengths also encourage certain tasks. This table shows how strengths, constraints, and context of use influence which device users may select for an activity.

Context of Use Influences Which Activities Users Complete

When people are away from their desks or homes, the smartphone becomes their primary device. But, while on-the-go, users typically do not have long chunks of uninterrupted time to focus in on an important task. They pick up their phone between meetings, while waiting in line at Starbucks, and while sitting at stop signs (naughty!), to fill small sections of empty time.

At home or at work, people can engage in longer sessions without having to attend to an external interruption, and thus they can focus in on important activities. And often, for these important activities, they will turn to the reliable-input, larger-screen devices.

Even though people will occasionally start complex activities on smartphones, in many cases they will switch to a better suited device.  

For example, a person might receive and email on her mobile device to sign up for a CPR training course. She might begin the registration on her phone, but wait to complete it at home due to the amount of data entry she encountered. (This is one reason we recommend a seamless omnichannel user experience.)

Designing for Mobile Is Still Critical

All of this does not mean that people won’t try to complete important or complex activities on mobile devices, but they often prefer to use a larger device when given the option. When users don’t have a choice or if the phone is their primary device, they still need and expect to be able to perform key actions on their smartphones.

Note that this study included participants older than 18 years. In our studies of teenager behavior, we’ve found a strong reliance on mobile — partially because most teenagers now own a smartphone, but not all own a laptop or tablet. Depending on your target audience, higher or lower proportions of your users will attempt to perform important tasks on mobile.

If your product supports activities that users might consider of high importance (finance or healthcare, for example), check your analytics. What proportion of your users are mobile? If the volume of your interactions on mobile is low, definitely avoid a mobile-first strategy. You still need a mobile presence, but that likely shouldn’t be your design team’s top priority. If you’re unsure which tasks your users consider important, run a diary study asking people to rate various activities by importance. This methodology will also allow you to get more context from users as to why they choose one device over another for key activities that your products supports. Arming yourself with this knowledge will help you prioritize the work and resources you dedicate across each experience.

https://samplecic.ch/large-devices-preferred-for-important-tasks-2.html

Eyetracking Research

Eyetracking equipment can track and show where a person is looking. To do so, it uses a special light to create a reflection in the person’s eyes. Cameras in the tracker capture those reflections and use them to estimate the position and movement of the eyes. That data is then projected onto the UI, resulting in a visualization of where the participant looked.

This research can produce three types of visualizations:

• Gazeplots (qualitative)
• Gaze replays (qualitative)
• Heatmaps (quantitative)

This gaze plot shows how one participant processed a web page in a few minutes. The bubbles represent fixations – spots where the eyes stopped and looked at; the size of the bubble is proportional with the duration of the fixation.

Sorry, your browser does not support the video tag.
This video clip is a gaze replay — it shows how one participant’s eye processed a page on Bose.com.

This heatmap is an aggregate from many participants performing the same task. The colored areas indicate where people looked, with red areas signifying the most amount of time, followed by yellow and green, respectively. To get this type of visualization, we recommend having at least 39 participants perform the same task on the same page.

We use this eyetracking data to understand how people read online and how they process webpages. Our eyetracking research has yielded major findings such as:

• Banner blindness: People avoid elements (like banners) that they perceive as ads.
• Uncertainty in the processing of flat UI elements: Extremely flat UIs with weak signifiers require more user effort than strong ones do.
• Gaze patterns: Users tend to process different content in different ways. Two of the most common patterns are the F-pattern and the layer-cake pattern.

In an eyetracking study, the tracker has to be calibrated for each participant. Every individual has a different eye shape, face shape, and height. As a consequence, the tracker has to “learn” each participant before it can follow their gaze. Once the machine is calibrated, the participant has to stay roughly in the same position — moving too far side to side or leaning in or out can cause the tracker to lose calibration.

Materials List

In this desktop eyetracking study of how people read online, we used the following materials:

• Desktop eyetracker with built-in monitor (Tobii Spectrum)
• Powerful PC desktop tower
• Large monitor for facilitator and observer
• Two keyboards
• Two computer mice
• External speakers
• External microphone
• Printed task sheets
• Printed facilitator script
• Printed consent forms
• External hard drive for backing up data
• Two tables, side-by-side
• Two chairs
• Envelopes with incentives for participants (cash)

Lab Setup Room

For this specific study, we rented out a 4-person office space in a WeWork coworking facility. This office provided enough space for a participant, a researcher, and 1–2 observers, without getting too crowded. 

PC, Monitors, & Eyetracker

We used a powerful PC desktop tower, connected to two monitors:

• Participant’s monitor (with the eyetracking cameras attached)
• Facilitator’s monitor (showing the participant’s gaze in real time)

The participant and facilitator each had a separate mouse and keyboard, so they shared control of the PC. The facilitator controlled the PC only for setup, calibration, and to stop and start the recording.

The facilitator’s monitor, keyboard, and mouse are set up to the left of the participant’s monitor, keyboard, and mouse. In this room, we chose to place the eyetracker in the corner because it was out of the range of direct overhead lights (which can sometimes cause problems with the tracking). The facilitator’s monitor was angled away from the participant, to prevent her from seeing it. During each session, the participant (right) completed tasks using what looked to her to be a normal monitor. Meanwhile, the screen was shared on the facilitator’s screen with real-time gaze data. The facilitator (me, left) monitored the gaze calibration, watched user behavior, and administered tasks and instructions as needed. I also took some notes, but as eyetracking facilitation requires multitasking through many activities, those notes were very light. Primarily, I used my notes to record any issues I saw in the gaze data or to remind myself to go back and rewatch particularly interesting incidents. Human eyes move fast, so the bulk of eyetracking analysis work has to happen by slowing down the videos and watching them several times.

Using a separate monitor for the facilitator was optional, but had two major benefits:

• Space: Having a separate monitor allowed the facilitator to observe the task without sitting too close to the participant.
• Real-time gaze data: The facilitator’s monitor showed a red dot and line representing the participant’s gaze; these were useful for monitoring the participant’s calibration. (If the participant shifts in her seat, the tracker can lose her eyes. Lost calibration means that the gaze visualization won’t show what the participant was looking at — making the data unusable. By monitoring the gaze data in real time, the facilitator can catch the problem and recalibrate as needed.)

I’d recommend using a large, high-definition screen for the facilitator’s monitor, in order to easily see which words the participants were (and weren’t) reading on the screen.

This screenshot shows the facilitator’s view during a session. The white dots in the upper right corner represent the position participant’s eyes as seen by the eyetracker. If the dots disappear or move too far from the center, the facilitator knows she needs to intervene to save the calibration. The real-time gaze data is shown on the screen as red dots and lines (center). This provides another piece of information for monitoring calibration. For example, if the participant seems to be reading a headline, but the red dots are appearing a half-inch below that headline, that could be an indication that the calibration is off. Tables and Chairs

The monitors, keyboard, mice, and tasks sheets were spread across two tables that we pushed together. The facilitator sat in a rolling chair, so she could easily move closer to the participant to adjust the eyetracking equipment as needed or to hand him a task sheet. The participant sat in a fixed (not rolling) chair. This little detail won’t necessarily matter in a normal usability test, but matters a lot in eyetracking — you don’t want to give participants any reason to move out of range and ruin the calibration.

Task Sheets

Task sheets are another detail that can sometimes cause problems in eyetracking studies. When participants look down at a task sheet, they’re turning away from the eyetracker. When possible, it’s nice to have the task instructions delivered either verbally or through the eyetracking software itself. 

In the past, we’ve found that referencing task sheets can break the calibration, but we did not have a problem with it in this study: when people looked back up at the screen to perform their task, the tracker was able to refind and track their eyes. Be aware that this capability may differ depending on the tracker you use.

Eyetracking Now vs. 2006

The setup for a desktop eyetracking study hasn’t changed very much in the past 13 years. Compared to a photo of our setup in a 2006 eyetracking study, our 2019 version looks quite similar —  two monitors, an eyetracker, and a PC tower.

However, even though the structure of the system may be similar, the technology has definitely changed from 2006 (check out those little low-resolution monitors!). Compared to 2006, eyetracking tools have certainly improved the calibration process and they’ve gotten better at hiding the eyetracking mechanisms in the eyetracker (thanks largely to smaller cameras).

In 2006 Kara Pernice (right) facilitated an eyetracking study with a very similar setup to our 2019 study. Tips for Your Eyetracking Study

Think through your goals for the study. What data are you looking to gather?

• Gaze replays and anecdotes: If you’re looking for video clips and qualitative insights, a lightweight tool might work for you. Instead of the complex setup we used for this study, you could consider using lightweight USB-connected eyetracker systems or special eyetracking goggles (particularly for testing mobile designs). Those types of studies can be much easier to run than full-fledged quantitative eyetracking studies. Be aware, though, that those products are often not capable of producing gazeplots or heatmaps. Lightweight systems also tend to be less precise —  instead of a little dot showing you which word someone is reading, you might get a big bubble that just shows you which paragraph he’s looking at.
• Gazeplots: If you want static visualizations of where individuals looked on a page, you could use a setup similar to ours, but you wouldn’t need as many users. You could collect data from 8-12 participants. (For regular qualitative usability testing, it’s usually best to test with around 5 users, but for a qualitative eyetracking study you’ll want to recruit a few extra test users to account for calibration problems and other technical issues.)
• Heatmaps: If you want static visualizations that summarize where many people looked at a page on average, you’ll need to run a quantitative study like we did. We usually recommend having 39 participants complete the task you want to use for a heatmap.

If you’re planning an eyetracking study, it’s important to think through all the little logistics details. Running a day or two of pilot testing is a good way to work through all the potential hurdles you’ll encounter. Based on our experiences, you should absolutely expect technical difficulties.

I also highly recommend dedicating 1–2 days just to set up your equipment, before your pilot testing. Traditional eyetracking tools are complex, delicate systems. You’ll want plenty of time to think through and experiment with your study setup.

 

For more details, check out our free report on how to run eyetracking studies.

https://samplecic.ch/setup-of-an-eyetracking-study.html