Button labels should always inspire the users to act.
Labels for CTA depends also on the context, pages with several buttons and repetitive tasks to perform may have shorter labels to avoid label noise, pages with few actions and tasks may have more contextual labels.
Be consistent in the choice of passive/active verbs, preferring active. To be sure the form is the correct, try rephrasing the label of the call to action with the formula “As a user, I want to edit the form” (e.g. See versions is okay, Show version is not)
Follow WFP Editorial Style Guides for capitalization, italics, numbers and units, etc…
Always start with an active verb, if possible it’s best to pair it with a noun (e.g. Edit form, Download report, …)
Set clear expectations on user (what will happen next)
Avoid using generic labels like Learn more or View all, instead use contextual labels or specific actions (e.g. Learn more on SDGs)
Avoid device-specific calls to action (e.g. click, tap, …)
Avoid generic string of Next or Continue, provide info and anticipate progress and process. (e.g. Next - Review, Next - Approval)
An error message is a system-generated interruption to the user’s workflow that informs the user of an incomplete, incompatible, or undesirable situation according to the system’s implementation. (Nielsen Norman Group)
Errors are differentiated according to their impact and severity, use Bridge semantic palette to convey the right severity.
Display the error message close to the error’s source.
Use noticeable, redundant, and accessible indicators, highlight fields, add icons. Semantic red is a conventional error-message visual.
Concisely and precisely describe the issue, no generic messages such as An error occurred.
Offer constructive advice. Merely stating the problem is also not enough; offer some potential remedies.
Avoid using Semantic red for other purposes or content.
An empty state occurs when a user signs up for a product or a service, or access for the first time a section with user driven content (e.g. wish list, search page) and there’s nothing to show.
This empty state displays when an application is first opened by the user and has no content to display. This can be common when a user starts using an application or a feature.
Use short messages about the empty state using the section as subject (e.g. No bookmarks yet, There is no Narrative yet)
If applicable suggest the user how to use the application / feature (e.g. No bookmarks yet. Tap on the bookmark icon to save your favourite content and find it easily over here)
Make sure the placeholder content looks different from real content
This is the state of the UI when a user performs a search and no results are found.
Keep the message concise and contextual (e.g. No results for ‘qwerty’)
If applicable suggest the user how to use the application / feature (e.g. Try searching another term)
If applicable suggest the user alternatives (similar searches, related topics, last searches)
This can happen when a user has not entered any data into the application, or when there is a temporary issue with the source of data.
This scenario occurs when the user does not have an internet connection and cannot access content from the internet.