Menu Pickers

The layered lists we call Pickers are an essential aspect of how UIs are structured on Tradeshift. Given that some of the most important choices on the platform are made through these, copy on them is very important. This is exacerbated by the fact that, due to the layered structure, a flow can become quite complex with layers being added and removed many times before the flow is over. Thus, it is essential for the copy in pickers to do two things: 1) keep the user from getting lost, and 2) push the action forward.

The title

When it comes to the first objective of picker copy, the title pulls most of the weight. The title itself then has to do two things. First, it has to be able to tell the user exactly what needs to be done in this picker. This means that somebody who looks at a picker without having just opened it should be able to know by reading the title, what they were doing, and what is expected of them. Secondly, the titles should give a sense of flow and continuity to the process. Overall, the user reading the title of a picker should know where they are, and what is expected of them.

The first one is a matter of sharp and accurate description. For example, a picker whose body is a calendar could have as a title:

This would be a bad title, since a user reading this without remembering how they got there would not know what the date is for. A much better header for a picker with a calendar could be:

With this title, the user knows that the date is the due date for an invoice, and not the date of emission, or any other date. In a vacuum, it might seem like a very small difference, but all of these little things aggregate to make the product enjoyable and easy to use.

With regards to flow and continuity, the best way to ensure this is to put together each title with the copy of whatever it was that triggered this picker. Thus, using the due date example above, Clicking on "Due" in the create invoice page opens a picker named "Due in…", and choosing "specific date" results in "set a due date". So, when writing the title for a picker, always look at it side by side with what triggered it.

The body

The body is less straightforward, because it can include very many different elements. Broadly, though, they can be divided in two categories – ‘explanation’ copy, and interactable elements. The first type does not appear in all pickers – only in cases where there’s need for clarification regarding the purpose of the picker. The guidelines for these are quite simple. In these cases, remember that clarity is king! You will not be adding this type of copy unless it’s an already fairly complex flow, so the only goal of this copy should be clarity. Forget personality, forget casual tone, and focus on being clear.

The second broad category of copy in the body of pickers are the different types of value selectors themselves. These can take the form of checkboxes, radio buttons, calendars, free text boxes, and more. For these, the same overall rules apply: Clarity (especially in labels, but also the options themselves) is the main priority.

The buttons

Finally, the last element that appears on pickers are buttons. These buttons are no different than the buttons everywhere else in the product, so the same guidelines should be followed. Read more at the buttons guidelines