The "Buy" Section

Question 1

Why is it important for the “Add to Cart” button to have a unique styling compared to other buttons in the interface?

Answer 1

The “Add to Cart” button must stand out from its surroundings to ensure visibility and prompt users to take action. Unique styling helps distinguish it from other buttons, reducing user confusion and enhancing the user experience by guiding them towards a key conversion action efficiently.

Question 2

What is a common mistake made by large organizations regarding button design on their websites?

Answer 2

A common mistake is the strict adherence to a brand or design style guide that mandates all buttons on a site to have the same “brand color” or “brand styling”. While maintaining visual consistency is beneficial, this practice can hinder the effectiveness of critical buttons like “Add to Cart” and “Checkout Now” from standing out. Without distinct colors or styles, these buttons may require excessive use of font styling or size to be noticeable, which can diminish the overall user experience.

Question 3

How can “Add to Cart” buttons be designed to stand out effectively on a product page?

Answer 3

To ensure that “Add to Cart” buttons are prominently visible on a product page, they should be designed with high contrast relative to other elements on the page, especially near the “Buy” section. Practical implementations include:

1. Sufficient White Space: Surrounding the button with ample white space helps it stand out and reduces visual clutter.
2. Relative Size: Making the button relatively large aids in its visibility and accessibility.
3. Effective Use of Color: Employing a distinctive color that contrasts well with the background and other interactive elements draws attention to the button.
4. Clear Microcopy: The button text, such as “Add to Cart,” should be straightforward and unambiguous to immediately convey its function.

Question 4

What is the purpose of using a sticky “Add to Cart” button during mobile usability testing?

Answer 4

The purpose of employing a sticky “Add to Cart” button in mobile usability testing is to ensure that this critical call-to-action remains persistently visible as users scroll through the product details page. This design approach enhances the user experience by keeping the button accessible at all times, thereby increasing the likelihood of conversion by reducing the effort needed to initiate a purchase.

Question 5

What are the considerations for styling a sticky “Add to Cart” button on mobile platforms to enhance its effectiveness?

Answer 5

When using a sticky “Add to Cart” button on mobile platforms, it is crucial to carefully consider its styling to maximize findability and effectiveness. Key considerations include:

1. Width of the Button: Avoid extending the button to the full width of the viewport. Buttons that span the entire width are susceptible to “banner blindness,” where users may overlook them as they resemble browser navigation or control bars typically found at the bottom of the screen.
2. Visual Distinction: Ensure the button is visually distinct from other elements, especially the browser controls, to prevent it from blending into the page layout.
3. Integration with Page Design: The button should be designed in harmony with the product details page, reinforcing its association with the purchase process rather than appearing as a separate element.
4. Contrasting Colors: Use colors that stand out against the background of the page but still align with the overall design aesthetic, drawing attention to the button without clashing with the design.

Question 6

What are the potential drawbacks of using sticky “Add to Cart” buttons on mobile devices?

Answer 6

Sticky “Add to Cart” buttons, while beneficial for visibility and accessibility, have potential drawbacks on mobile devices, including:

1. Reduced Viewport Space: Since mobile screens are already limited in size, sticky elements take up valuable screen real estate. This reduction in the visible area can constrain the amount of information users can view at one time.
2. Obstructed Content: Important product details such as image galleries, color variations, and descriptions may be partially obscured or pushed out of the primary viewing area by sticky buttons. This can hinder the user’s ability to fully explore and evaluate the product.
3. User Experience Impact: The decreased space for viewing content can lead to a more cramped and potentially overwhelming browsing experience, which might deter users from spending more time on the page to explore additional product features or options.

Question 7

What did usability testing reveal about the effectiveness of a static “Add to Cart” button on mobile platforms?

Answer 7

Usability testing revealed that a single, static “Add to Cart” button, when prominently styled and strategically placed in the “Buy” section of a product page, is sufficient for mobile users. This setup allows users to easily add items to their cart with minimal friction. The key findings highlighted the importance of:

1. Prominent Styling: Ensuring that the button is visually distinct and easily noticeable without continuous visibility.
2. Strategic Placement: Positioning the button where users expect to take action, typically near product pricing and key details, enhances usability.
3. Simplified User Experience: A static button reduces clutter and the potential for overwhelming the user, compared to sticky elements that persist while scrolling.
4. Efficiency and Effectiveness: This approach balances visibility and accessibility, ensuring users can smoothly proceed with adding products to their cart without unnecessary distractions or impediments.

Question 8

What did usability testing indicate about the use of “Back to Top” widgets on mobile product pages?

Answer 8

Usability testing indicated that “Back to Top” widgets are rarely used by mobile users, even on lengthy product pages. The findings suggest that while these widgets are generally not harmful, they are not essential for most users to navigate efficiently on the page. Key insights include:

1. Limited Utility: Users often do not rely on “Back to Top” buttons, possibly due to the ease of scrolling on mobile devices.
2. Space and Visibility: Similar to other sticky elements, “Back to Top” widgets can consume valuable screen real estate and potentially contribute to a cluttered interface.
3. Navigation Habits: Users typically scroll manually or use other navigational cues that are more integrated into their mobile browsing habits.
4. Redundancy: On well-designed mobile pages, the need for such widgets might be reduced, as users can easily swipe to scroll quickly to the top without needing a dedicated button.

Question 9

What aspects of the “Add to Cart” button are most important in terms of its visibility?

Answer 9

Color, Contrast, and Size.

Question 10

What is the impact of temporarily unavailable or out of stock products on user behavior in e-commerce?

Answer 10

Temporarily unavailable or out of stock products can significantly impact user behavior on e-commerce sites. When users encounter products that are not available for purchase, they often face several issues:

1. Frustration and Disappointment: Users who have decided on a product and find it unavailable are likely to experience frustration and disappointment.
2. Loss of Sales: If users cannot purchase their chosen product, there is a direct loss of sales for that transaction.
3. Increased Bounce Rates: Users are more likely to leave the site in search of the same product available elsewhere, increasing the site’s bounce rate.
4. Customer Loyalty Risk: Frequent encounters with out-of-stock items can erode trust and loyalty, making customers less likely to return to the site in the future.
5. Competitive Disadvantage: Users turning to competing sites for the same product can strengthen competitors, potentially leading to long-term losses in market share.

Question 11

How can e-commerce sites manage the sale of products that are temporarily out of stock?

Answer 11

-commerce sites can allow users to purchase products or variations that are temporarily out of stock by extending the delivery time. It’s crucial to clearly indicate the adjusted delivery schedule on the product page to manage customer expectations effectively. This strategy helps maintain sales momentum and reduces the likelihood of customers seeking alternatives elsewhere.

Question 12

For temporarily out-of-stock items, the ideal approach is to:

Answer 12

Inform users of the increased delivery timeframe, and allow users to purchase the item

Question 13

How should product pricing be displayed to enhance user experience on e-commerce sites?

Answer 13

To enhance user experience, product prices should be prominently displayed within the “Buy” section of a product page. To ensure visibility, use a large font size comparable to the product headline, apply bold text styling, and consider using an eye-catching color. These elements help users easily evaluate a critical aspect of the product, aiding in informed purchasing decisions and improving overall site usability.

Question 14

What impact does the visibility of pricing have on user perception during usability testing?

Answer 14

During usability testing, both on mobile and desktop platforms, the visibility of pricing significantly affects user perception. Participants react negatively when prices are not clearly visible, often leading to distrust towards the site. This perception can make users feel that the site is intentionally hiding important information, thus impacting their overall view and trust in the website.

Question 15

What font size is most effective for displaying prices on e-commerce sites during usability testing?

Answer 15

During usability testing for both mobile and desktop platforms, using a large font size—similar to that of headers and product headlines—proved most effective in drawing attention to prices. Since the price is usually a concise block of text, using a smaller font size can lead to it being easily overlooked. To ensure visibility and help users quickly locate this crucial detail, it’s important to use a prominently large and readable font size for pricing information.

Question 16

What are the best practices when displaying the price on a product page?

Answer 16

• Using a large font size
• Using color or bold styling

Question 17

What could happen if a user’s desired product is unavailable for purchase?

Answer 17

They may abandon a site if they can’t easily find a suitable alternative product.

Question 18

What is the best solution when a product is permanently unavailable for purchase?

Answer 18

Explicitly state so using “Discontinued” terminology and instead aggressively promote alternative products.

Question 19

Discontinued products, deprecated products, or products that won’t be available for months are all legitimately ______.

Answer 19

“Sold out”. In that users won’t be able to purchase them. ever or for the foreseeable future.

Question 20

How are products that are temporarily sold out differ from sold-out products?

Answer 20

Momentarily out of stock, but will be replenished and available for purchase in the foreseeable future.

Question 21

What happens when the product’s status is unclear?

Answer 21

Users will be unsure if they will be able to purchase the product in the future or if they should seek out alternatives.

It should be immediately and unambiguously clear to users when they arrive at the page that the product can no longer be purchased.

Question 22

If products or product variations don’t have reasonable alternatives that can be shown to users, consider directing users to where the product can then be purchased. For example..

Answer 22

a partner site.

Question 23

For discontinued products, where should alternative products be displayed?

Answer 23

Near the top of the page

Question 24

What might happen to users who heavily depend on ‘Save’ and ‘Wishlist’ features if accessing or understanding these features becomes challenging or requires an account?

Answer 24

will struggle to save products when the feature requires an account to use or is difficult to access or understand.

Question 25

How should the ‘Save’ feature be designed to accommodate guest users, and what elements should be included to ensure clarity and ease of access?

Answer 25

The ‘Save’ feature should enable users to save items even without creating an account, catering to guest users. Its design should adopt subtlety and unobtrusive placement, ensuring it seamlessly integrates with the overall interface. Clear labeling and intuitive iconography should communicate its functionality, while a minimalist approach prevents visual clutter. Additionally, access to saved items should be readily available through a dedicated section or icon, ensuring users can easily retrieve their saved selections.

Question 26

What have our e-commerce studies consistently revealed regarding the user behavior in finding, evaluating, and purchasing products on e-commerce platforms?

Answer 26

All of our e-commerce studies have shown that, as users try to find, evaluate, and purchase products on e-commerce sites, it’s often a nonlinear, back-and-forth process.

Question 27

What essential functionality do users require during their engagement with e-commerce platforms to aid in making purchase decisions?

Answer 27

Users need a feature that allows them to save items they’re interested in, enabling easy retrieval for future reference and facilitating their decision-making process when making purchases.

Question 28

How does the timing of purchase decisions vary for users when browsing e-commerce sites, and what behavior do some users exhibit in terms of returning to find previously liked products?

Answer 28

Purchase decisions for users browsing e-commerce sites can vary in timing. Some decisions are made within the same browsing session, while others occur when users revisit the site days or even weeks later. During these return visits, users often intend to rediscover products they had previously liked or shown interest in.

Question 29

What role does the “Save” feature play for certain users within this subgroup, and how does it contribute to their browsing and decision-making process?

Answer 29

For some users in this subgroup, the “Save” feature serves as a crucial tool for storing and comparing products. It plays a pivotal role in facilitating their browsing experience by allowing them to store items of interest for future reference and comparison, thereby aiding in their decision-making process.

Question 30

What role do “Save” features play in the process of comparing products, and how do they contribute to the user experience?

Answer 30

How can “Save” features enhance the process of comparing products, and why are they considered valuable tools for users?

Question 31

What factor often leads to users abandoning a website, and what strategy should be employed to prevent this issue, particularly concerning the use of ‘save’ features?

Answer 31

What significant contributor to site abandonment should be avoided, particularly regarding the utilization of ‘save’ features, and why?

Question 32

What is the primary concern regarding sales pricing and discounts for user engagement, and what core advice should be followed to address this concern effectively?

Answer 32

What is the main issue related to sales pricing and discounts that can impact user behavior, and what key recommendation should be implemented to mitigate this issue?

Question 33

Where should price-related special offers and discounts be placed to ensure they are easily seen and understood?

Answer 33

Price-related special offers and discounts should be placed in close proximity to the product price in the “Buy” section.

Question 34

What observations were made during testing regarding the placement of special offer text, and how should this information be applied?

Answer 34

During testing, it was observed that placing special offer text in close proximity to the product price made it more findable and less prone to misinterpretation. To further avoid ambiguity, a single offer should generally only have a single description displayed on the product page, again placed near the product price. If multiple descriptions of the same offer are necessary, they should be identical or almost identical in wording to clarify that it’s the same offer displayed twice and not two separate stacking offers.

Question 35

How can websites effectively display discounted prices while ensuring clarity for users?

Answer 35

Websites can display the original price alongside the discounted price, but it should be overwhelmingly clear to users what the new price is. This can be achieved by using a strikethrough for the original price or larger bolded text for the sale price.

Question 36

What additional element should be displayed near the product price, alongside discounts, to highlight sitewide promotions, and why is it important to group all price-related special offer and discount information together?

Answer 36

Sitewide badges such as “Rollback” or “Clearance” should be displayed near the product price to emphasize that the product is on clearance. It’s important to group all price-related special offer and discount information together because it makes it easier for users to consume this information all at once. For example, by seeing that a product is 20% off, on “Rollback”, and qualifies for free shipping, users can quickly understand the benefits associated with the purchase.

Question 37

What are the two approaches to displaying discounts, and what is Jonah Berger’s “Rule of 100” regarding the display of discounts?

Answer 37

When displaying discounts, there are two approaches: showing the absolute discount (“$5 off”) or the relative discount (“20% off”). Jonah Berger’s “Rule of 100” suggests that if space needs to be conserved and only one type of discount can be displayed, the highest discount number should always be shown. For instance, if a $20 item is discounted to $15, it should display “25% off” (and not “$5 off”). Conversely, for items priced above $100, the discount should generally be displayed in absolute numbers. For example, a $1,000 item discounted to $900 should display “$100 off” (and not “10% off”). This approach aims to leverage users’ perception of the discount’s significance by emphasizing the higher number.

Question 38

What is the core issue related to products sold in multiquantity packaging or varying sizes, and what core advice should be followed to address this issue?

Answer 38

The core issue with products sold in multiquantity packaging or varying sizes is that it makes direct comparison more difficult, leading to the misinterpretation of products’ relative value. To address this issue, it’s recommended to display “Price Per Unit” next to the total product price for any multiquantity product or product sold in varying amounts. Additionally, consider providing “Price Per Serving” for similar products that have different dosing suggestions or for similar products that vary in substance.

Question 39

Why does price per unit become highly relevant when products are sold in varying sizes, and what challenges arise when users have to calculate the best value for their money?

Answer 39

Price per unit becomes highly relevant when products are sold in varying sizes because users must otherwise calculate for themselves which size represents the best value for the money. This can be especially burdensome if a product is offered in many different sizes or if the sizes or prices aren’t in round numbers. For example, consider a hand cream offered in a 3.75 fl. oz. bottle at $12.75 and in a 6.25 fl. oz. bottle at $16.50. Determining which is the better deal and by how much can be challenging. As one participant said during testing, “Using the lowest price is not enough, I’ll need the lowest price per milliliter.”

Question 40

Why is displaying “per pound” pricing important for users when comparing products, and what challenges do users face when pricing information is missing or displayed in an uncommon unit of measurement?

Answer 40

Displaying “per pound” pricing is important for users when comparing products because it’s a fairly standardized unit within some product categories, making comparison easier. During testing, most participants expected to find consumable products like meat or fish labeled with a “per pound” price. However, if the price per weight was missing or displayed in an uncommon unit of measurement, participants often struggled to convert the value into a more easily comparable measurement.

Question 41

What challenges did participants face when encountering products labeled in “ounces” instead of “pounds,” and what potential consequences did this inconsistency have on user behavior?

Answer 41

Participants who encountered products labeled in “ounces” when they are typically sold by the pound had to stop and mentally estimate the “per-pound” price to understand the comparative value of the product. While some participants were willing to perform these mental calculations, others became frustrated. Consequently, some users may seek out other products on the site with more easily comparable units of measurement, or they may abandon the site entirely for a competitor that consistently uses standard units of measurement throughout their product catalog.

Question 42

In what situations might the price per unit still not be comparable among different products, and what alternative approach can be used to assist users in comparing such products?

Answer 42

The price per unit may still not be comparable among different products in cases where there are variations in substance (such as fluid ounces and number of tablets) or different usage or dosing requirements (for example, two cough syrups that both include 100 mL, but one requires double the dosage of the other). In these instances, a “price per consumption” or “price per serving” value may be calculated to better assist users across products.