Returnless UI

Help content

Help content is educational text that describes interactive elements or offers information about concepts in the UI.

The goal of help content is to tech users:

  • How to complete a task or make a good decision for their business
  • Important information related to the current workflow
  • How to optimize the way they use the interface

When to use less, when to use more

The choice of whether to use help content depends on the kind of experience you're designing.

Productivity areas

Productivity areas include tasks that users do regularly, like managing return-orders. These pages are used often and become familiar quickly.

When designing productivity experiences, prioritize experienced users. This is their space to get work done and we can keep out of their way by offering a clean, streamlined UI. This means minimal help content.

Educational areas

Educational areas include tasks that users do infrequently, like adjusting countries or form settings. Most of these settings aren't changed very often, so users doing these tasks are often seeing them for the first time.

When designing for educational experiences, prioritize users who are unfamiliar with the task or workflow. Offer context and guidance to help them make the right decisions for their business. This means making use of help content.

Place help where it's needed

Help content belongs as close as possible to the art of the UI it references. If it's teaching users about the purpose of a card, put it at the top of the card as a description. If it's teaching users about a particular field, put it beneath the field as help text.

Avoid a marketing tone

Using help content to promote new features can erode trust with users. Not every feature is the best choice for every user at every point in time, and we shouldn't assume that they want or need it.

There are times when our motivations and our users' are highly aligned, and encouraging a certain action through help content might be appropriate. An example of this is discounted annual billing. It's good for Returnless because of the long-term user commitment and up-front payment. It's good for users who are long-term committed to Returnless and can pay up front.

"Learn more" links take users to the Returnless Documentation for more detailed information than we can offer in the UI.

Make sure "learn more" links go to a page or heading that's specific to the topic.

The Documentation is a rich resource, but for users it's not always a convenient time to read documentation. Landing on a dense page of information without knowing where to start is frustrating and disorienting. If there isn't a page or heading specific to the topic you're providing help for, work with the documentation team to create the right content.

"Learn more" badges for settings

"Learn more" badges show an information icon that takes you to the Documentation. These are different from tooltips. On large screens, they expand on hover to reveal a "Learn more" link.

Best practices:

  • Use regular "Learn more" links for help topics specific to only a part of a card
  • Some cards benefit from a "Learn more" badge in the heading in combination with "Learn more" links or other help content in the card body.