Articles

5 Ways to Provide a Superior Gifting UI and Flow

Even though users spend a majority of their time shopping for themselves on e-commerce sites, when the occasion arises that they do decide to shop for others — such as during the holiday-shopping season from roughly October through the end of December — many users will want to go the extra mile to make their gift feel special.

This could be as simple as including a custom message to the intended recipient, having the designated product gift wrapped, or even going so far as to have their orders placed inside a special gift box.

Unfortunately, as gifting options vary widely from site to site, we observe in usability testing that users looking to place an order as a gift must assess each site they visit for the availability and cost of gifting options.

Moreover, even when gift options are available, 66% of desktop sites we benchmarked have trouble effectively communicating the details of available gifting options to users.

Based on our large-scale usability research, this article will describe 5 ways that sites can help users fully understand — and therefore feel comfortable using — available gifting options:

  1. Always allow users to write custom gift messages (8% don’t)
  2. Explain available gifting features in detail (66% don’t)
  3. Consider showing gifting options on the product page (92% don’t)
  4. Allow users to designate gifts in the cart (61% don’t)
  5. Dynamically adjust shipping field labels for gift-marked orders (88% don’t)

1) Always Allow Users to Write Custom Gift Messages (8% Don’t)

Not all sites will need to offer gifting options. At Grainger, the vast majority of users likely aren’t searching for products to send as gifts, but rather equipment specific to their work. Gifting options aren’t necessarily relevant to include for every site — for example, B2B sites or those specializing in extremely technical or highly industry-specific equipment.

At Marks & Spencer, the only gifting option that users are given — practically at the end of the checkout process — is the option to “hide the price”.

At Costco, users are able to add a custom gift message to their order, allowing them to add an additional level of personalization to their order once the gift has been delivered to the recipient.

While not all e-commerce sites need to have gifting features, for those that do a fundamental gifting option is allowing users to include a custom message along with their gift.

During our Checkout testing, 53% of users who were sending a gift also opted to include a gift message, whereas only 13% opted for the premium gift wrap option.

Without the ability to add a custom gift message (which 8% of desktop sites that offer gifting don’t currently allow), even a thoughtful gift can still seem as somewhat transactional when done entirely online.

However, by adding a custom gift message, the user can add a more personal touch to the act of giving a gift online.

Hence, for e-commerce sites wanting to cater to any degree to gift-giving users there’s no way around offering users the ability to include a gift message.

“Here I can write him a message. I’ve written ‘enjoy your gift’, that’s fine.” A user at Amazon misinterpreted the prefilled and disabled gift message text as a default input. The user proceeded with the order thinking that the message would appear on the gift, while he in fact had to click the checkbox right above for the message to be included.

However, when displaying prefilled gift messages — for example, “I hope you enjoy this gift!” — it’s important that they’re only displayed after users have opted to include a gift message with their order.

During testing, we’ve consistently observed issues with placeholder text in form fields, where some users simply don’t understand that seeing greyed-out text means that the fields in question are not actually filled in and therefore won’t be accepted as an input.

2) Explain Available Gifting Features in Detail (66% Don’t)

As the exact definitions and features included with gifting options vary wildly from site to site, it is imperative that gifting options are explained in detail to ensure that users fully understand the gifting options available to them.

During testing, users often drew false conclusions about gifting options — for example, what a particular gifting option included, or the specific details the recipient of the gift would see — which, in turn, led to a worse gifting and checkout experience overall.

“There are some different options when it’s a gift — like a gift receipt. I don’t know if that is some information for the recipient, about how to return it, or maybe the price is not displayed, or what do I know? There’s not a lot of information.” A user exploring gifting options at American Eagle Outfitters had difficulty understanding what was included with their selection. Gifting features can be difficult for many users to intuitively understand. As such, it’s important to spell out, in detail, what is involved with particular gifting options so users can know what to expect.

54% of desktop sites offer gifting features of some kind, according to our desktop benchmark. While offering gifting options can provide a bespoke level of service, it will also introduce an additional layer of complexity that can make users’ checkout experience more confusing.

As such, on some sites users are unable to accurately predict the consequences of clicking “This is a Gift”.

For example, possible gifting options on an e-commerce site can include, but are not limited to:

  • Custom gift messages (are they complimentary, or do they have an additional cost)
  • Gift wrapping and gift boxes
  • Gifting-specific shipping options
  • Price tag removal
  • Gift receipts

As the exact names and definitions of each of these options are different on each site — for example, one site will call it a “Gift Receipt”, whereas another will offer to “Hide prices on invoice”, and yet another will say that they “Don’t show price on package slip” — user confusion is entirely understandable since they are being presented with so many different terms for what is essentially the same feature.

At Harry & David, a gift message option is “Complimentary” — making it clear to users that including a gift message is a free option. Additionally, the consequence of not including a gift message is also clearly spelled out for the user.

At Nordstrom, each of the different gifting options are described in detail, along with their corresponding prices.

On the other hand, providing clearly detailed gifting options helps users quickly decide which gifting options they’d like to choose.

Therefore, every single gifting feature that users can opt into must be explained in detail — for example, using a very clear and descriptive title with an additional inline description following it, a hover-activated tooltip on desktop, or with some combination of expanding fields or overlays which only appear once gifting is selected.

Additionally, an important aspect of explaining gifting features is to state when two or more options are grouped together — for example, stating that a gift receipt is automatically included if a gift message is selected.

Otherwise, users might assume an option simply isn’t available.

“Then it costs $5.50 more, or what?” A user at Crate & Barrel was initially unsure what the $5.50 price referred to. After thinking about it for a few moments, she guessed, “No that is if you want wrapping. I’m reading it as you can do this gift message for free.” This user was not completely convinced that she was correct, and that she could do a gift message for free, likely due to the “Add Gift Box - $5.50” checkbox immediately next to the “Continue to Payment Page” button.

Further adding to the complexity of gifting for users is that some gifting services may be free — typically this will include a custom gift message and gift receipt — while other services are available for an additional charge, such as gift wrapping.

During testing, users’ expectations for which services were free were sometimes misaligned, leading to some users often believing that adding a gift message would be a premium service.

Therefore it is crucial that each of the gifting features is explicitly marked as free if there’s no cost associated, as user expectations and various site implementations will differ.

Lastly, for mass merchants and similar sites with a very broad product catalog, and where gift wrapping is a significant gifting feature, consider allowing users to mark individual products as gifts, as opposed to being forced to mark the entire order as a gift.

By addressing this, a site can make sure they don’t alienate users who are shopping for themselves and for others at the same time (e.g., a husband shopping for his wife who only wants one item gift wrapped for her, while also buying something for himself).

3) Consider Showing Gifting Options on the Product Page (92% Don’t)

Some especially thoughtful users will want to know what gifting options a site has to offer early on — while still in the product-search phase — to avoid wasting time finding a suitable gift only to be disappointed during the checkout process when gifting options are nonexistent, too expensive, or too complicated to understand.

During testing, we’ve observed some users begin considering gifting options as early as the product page (or even before they land on the site, if they know they’ll need to send the order as a gift).

If users are unclear about the gifting options being offered for a particular product, they may not be willing to add the product to the cart or investigate the site’s nonproduct content in order to learn whether orders can be placed as gifts and what gifting features are available.

At Newegg, users are given the option to “make this item a gift”, prior to adding it to their carts.

Indeed, users shopping for a gift will want to know if gifting options are available on a site — for example, if gift wrapping or custom messages are available — without having to go through multiple steps of the checkout process before potentially discovering the site doesn’t offer gifting, or the specific gifting options they are looking for.

If users are forced to add items and view them in their cart (or navigate the Help section) in order to find details about available gifting options, some will falsely conclude that the site doesn’t offer gifting options and choose to abandon the site instead.

On the other hand, advertising gifting options as early as the product page will help users keep their minds focused on finding the right gift — rather than prematurely worrying about whether gift options will be offered during the checkout.

This information on the product page should clarify that gifting options are available, and provide additional details either directly on the product page or through a link to more information elsewhere. To avoid cluttering the product details page when an abundance of gift options are available, clarifying information can be provided in a tooltip, overlay, or link rather than be fully described on the main product page.

Gifting is a primary reason many users shop at 1-800flowers.com. Therefore, it makes sense to go into greater detail about the gifting options available on the product page. Allowing users to see what their gifts will look like upon final delivery — with gift boxes or custom gift messages — can put their minds at ease about their purchases.

For sites that ship most of their orders as gifts, providing more detailed gifting information as early as the product page offers a competitive advantage for those users who want to put extra care into their gift giving. (Consider performing a competitive analysis of UX to identify opportunities to out-perform competitors.)

For example, offering detailed shipping information, pictures of gift boxes, and descriptions of how the gift will arrive all help considerate users to get a full picture of the gifting process — as compared to having to first add a product to the cart in order to finally see the gift options.

4) Allow Users to Designate Gifts in the Cart (61% Don’t)

“Okay, let’s see…it’s a gift, so I’m looking to see if I need to do something here [i.e., mark the order as a gift] before I proceed to payment.” A user at Asos tried to find gifting options in the cart by clicking “Change Details” on the item summary (visible in the “Saved Items” product), but was only able to change the product color and quantity.

“This is a gift…but there really isn’t any of that…gifting isn’t there. So I have to ship it home and then drive out myself and deliver it.” A user at Walmart indicated she was looking for gifting options in the cart. While having a gift sent to the giver may be desirable for some users, others need the convenience of sending a gift directly to the recipient.

Not presenting the ability to designate products as gifts in the cart can cause a significant amount of unease and anxiety in some users.

Other users, coming to the site with the sole purpose of purchasing a gift, may misinterpret the lack of gifting options in the cart as an indication that the site doesn’t offer gifting at all, and may consequently abandon.

Thus, sites that have any kind of gifting options should allow users to designate one or more products as gifts in the cart.

“I know they have something about sending a gift, but I can’t find it here. But maybe it’s in the cart they offer it”, this user speculated after spending minutes trying to locate gifting at the address step. When adding an item to their order, multiple users were nudged into skipping the cart at Amazon and went straight to the checkout flow. This however caused issues, as gifting couldn’t be designated during the checkout flow at Amazon.

However, if users in the “Added to Cart” interface have the option to bypass the cart step, then the cart step cannot be the only place where items or orders can be designated as a gift.

Instead, it must be possible to designate an order as a gift further in the checkout flow as well.

By allowing users to designate gifting in the cart, sites can consequently customize the checkout flow to better suit the user’s gifting context. In particular the gift-recipient address and the phone number can be clarified.

If gifting is not technically possible in the cart, then consider having a small description in the cart step telling users when the gifting process will be available, and what type of gifting options exist.

5) Dynamically Adjust Shipping Field Labels for Gift-Marked Orders (88% Don’t)

When a user selects the option to gift an item, and arrives at checkout, they have 2 options:

  1. send the gift directly to the recipient
  2. send the gift to themselves (in order to give it to the recipient directly)

However, during testing, presenting gifting users with the same billing and shipping address selectors normally used for nongifting users was observed to be problematic — as users conflated their own billing or shipping address with the address of the intended gift recipient.

This added layer of complexity to the shipping process was observed to be the direct cause for orders placed with incorrect order data and even site abandonments.

“But I haven’t actually…I haven’t chosen that I’ll send it to this other guy. So somewhere I’ve overlooked where I could select that it should be sent to him.” Most users who were signed in at Crate & Barrel experienced confusion or frustration when being brought straight to the “Review & Place Order” step with their previously entered home address being used as the shipping address for the gift by default. This even caused abandonments for some: “The odd thing is that, when I’ve chosen it’s a gift, that it then can’t figure out that it’s not to be shipped to me. Now I’d surely have closed this site”, said one user, after unsuccessfully trying to change the shipping address of the gift order.

Another user at Walmart did not pick up on the difference between billing and shipping address, and kept the two the same (via the “shipping = billing” checkbox), and ended up getting this gift delivered to herself, even though her intent was to have it sent to her friend.

If a user has already indicated that “the order is a gift”, then the billing address should no longer be defaulted to equal the shipping address — to reduce confusion and prevent users from inadvertently sending an item to themselves.

Yet no sites in our benchmark dynamically change “billing = shipping” to “billing ≠ shipping” when an order is marked as a gift.

After indicating she was sending a gift at ASOS, this user’s name was autofilled using her account data. While we do recommend this in most cases, gift-marked orders provide an exception to this rule.

At Walmart, location data was used to recognize that a user was currently in New York. However, because he was sending a gift to a friend, this feature — normally designed to save time — meant that the user had to first understand what went wrong, then realize that he had to delete the prefilled values, and only then type in the recipient’s address.

Furthermore, using location data, account information, and previously entered user information to prefill shipping information form fields — which is recommended in most cases — proved confusing for users who were gifting orders.

At Newegg, users are reminded that they have chosen one of their items as a gift and that the shipping details to be entered are where they would like their gift item to be shipped.

Even when they are signed in to their accounts, once users mark their order as a gift they should be required to enter the gift recipient’s address (or select one from an address book), rather than being taken through the normal checkout flow (where any previously entered billing and shipping addresses may be used by default).

While the shipping address header could clarify that it’s the “Recipient’s Delivery Address”, at 1-800flowers.com “billing ≠ shipping” (and the phone field is labeled as “Recipient Phone Number”).

Lastly, the labeling itself can be improved by simply changing the title and label on the shipping address step to clarify that it’s the gift-recipient’s address that is being asked for — for example, labels like “Gift Recipient’s Name” and “Gift Recipient’s Shipping Address”.

Gifting Is Critical to Some Users — Especially at Certain Times of Year

During certain times of the year, gifting becomes a much more important priority for many users. However, be careful advertising holiday promotions or gifting options strictly through banners or other sitewide elements — shown here on Harry & David — as testing continues to show users exhibiting “banner blindness” behavior, and missing these sitewide banners completely.

While shopping on the product page at Wayfair, users are assured that their gifts will arrive at their designated destination in time for the holiday with a special message — “Arrives by Dec. 24 to Boston MA”. Even sites that don’t experience an excess of gift-order traffic throughout the year will need special messaging — and more extensive gifting info — during the holiday season.

Time of year can be an important factor in determining how likely it will be that users will want to purchase a product as a gift, and thus when gifting information will be particularly relevant to many of these users.

Seasonal gifting information typically needs to be slightly more extensive than nonseasonal gifting information, as it will also need to address the site’s latest order cutoff time for receiving gifts in time for the specific seasonal date, as well as other logistical information needed on the product page — for example, shipping information (including delivery dates) and return policy information.

However, since we continue to observe users exhibiting “banner blindness” behavior during testing, be careful when advertising holiday promotions or available gifting options strictly through banners or other sitewide elements, as they can easily be missed by many users.

Further, prioritizing gifting information is still important for smaller holidays when certain product types are typically gifted — for example, chocolates or flowers at Easter and Valentine’s Day.

However, as holidays such as birthdays and anniversaries can occur at any time of year, consider having gifting information visible year round.

At Williams Sonoma, an example of a wrapped gift is displayed, along with a field for entering a “Free” custom gift message. Afterwards, the rest of the gifting options are described in detail using a short descriptive bulleted list.

Gifting is crucial to a subgroup of users. It’s therefore important to provide gifting features if gifting is relevant for the site. Yet there are 5 implementation details to get right to be confident that gifting options and the subsequent gifting checkout flow will meet users’ expectations:

  1. Always allow users to write custom gift messages (8% don’t)
  2. Explain available gifting features in detail (66% don’t)
  3. Consider showing gift options on the product page (92% don’t)
  4. Allow users to designate gifts in the cart (61% don’t)
  5. Dynamically adjust shipping field labels for gift-marked orders (88% don’t)

By implementing the above, sites can help to ensure that the gifting flow is given adequate consideration from the product page, through the cart, and into the checkout process — meaning users can focus their attention on finding the perfect gift rather than understanding a confusing gifting process.

This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.

Authored by Alex Krzyminski on December 15, 2020

Share:
If you have any comments on this article you can leave them on LinkedIn

User Experience Research, Delivered Weekly

Join 37,000+ UX professionals and get a new UX article every week.

A screenshot of the UX article newsletter