Build your WhatsApp Flows
The shorter, the better
Users should enter flows aiming to complete a task as quickly as possible, consider that your WhatsApp Flow should not be taking longer than 5 minutes to complete.
One task per screen
Screens with too many tasks may look messy and overwhelm the user. If the flow needs the user to complete multiple tasks, split them across several screens.
Combine tasks per screen based on their objective. Booking an appointment?
You may want to add the following tasks in one screen: date picker + time
Don’t use too many components per screen
Too many components in one screen may seem like a great idea at first. However, when engaging with your WhatsApp Flow will turn into a UX nightmare.
Having lots of components into one screen may increase the loading times, resulting in user's frustration.
Build for caching
Once a user has completed a screen and moves onto the next, their information will be cached.
If there are too many components on a single screen and the user exits the flow, they will lose all of this information, which could be frustrating for users.
Design your WhatsApp Flows
Help your audience navigate your flow
Always set expectations for how long it will take to complete a task. Inform the user with clear guidelines such as: "it should only take a few minutes to complete.”
Make sure your content follows a simple, clear hierarchy using a heading, body, and captions
Use screen titles to help orient the user on where they are in the flow i.e. "Provide your details"
Use screen titles to show progress where possible, for example, “Question 1 of 3.”
End the flow with a summary screen. This is specially relevant if there has been multiple steps, so users can review and complete the task with clarity.
Keep your options and lists tidy
Keep it simple; use no more than 10 options per screen.
Don't use more than 20 options in multi-select, this may overwhelm the user.
Only use dropdown options when there are 8 or more options.
Use a radio button if there is only one selection to make.
Use checkboxes if the user can select multiple options.
Always make the option at the top of the list the default selection.
Call-to-actions (CTAs)
The CTA should always tell the user what will happen next or what task is being completed on each screen, for example Confirm booking.
Do not repeat content unnecessarily, for example:
“Complete registration”
“Complete registration below”
Build with components in mind
Always use the right components for specific actions, for example use the date picker to capture DOB.
You can also use the calendar picker to showcase a view of a calendar and elevate your WhatsApp flow experience.
If an input requires a lot of text, use the text area component and not the text input.
Questions and form labels must provide full clarity on what it is asking the user.
Forms or questions should be logically ordered, for example, first name, last name, and so on.
Make non-critical fields optional.
You can read all about the components available here: https://developers.facebook.com/documentation/business-messaging/whatsapp/flows/guides/components/
Provide Clear Error Handling
Communicate errors clearly to the user, including what has happened and how to resolve it.
Make sure validation rules are clearly communicated, such as if a user tries to enter a password that is not long enough.
Use the Helper Text
Helper text should provide clarity for users, for example, the correct format for a phone number, date input, or email address.
Use of Emojis
Always consider the context of the content when using emojis, such as:
Are they appropriate to use?
Will they add to the content?
Do they reflect the business brand?
Trigger your WhatsApp Flow
The chat should provide clarity
Users will choose to open a flow based on the clarity of the initiation messages. The exchange should feel conversational, providing context and clear task-focused actions for the user.
Manage user’s expectations
The CTA must match the message content. It should be short and concise, telling the user what task they can expect to complete by opening the flow.
There should be no surprises
The first screen of the flow should mirror the action of the CTA. Any deviations from the task at hand will result in a bad experience for the user, resulting in them closing the flow.
Collect Opt-ins in your Flow
It should be clear what the user is consenting to.
You should try to include a “Read more” CTA which links to the relevant information, for example, Terms and Conditions.
Add your DOI at this stage and collect subscribers while they’re in your WhatsApp Flow.
End your WhatsApp Flow
Provide a Summary of the flow
The last screen should clearly tell the user what will happen when they end the flow. They will also want confirmation of their actions. Sending a summary message should make the user feel reassured.
Confirm flow completion
Respond to the user with a message when they submit a Flow.
These messages should provide the user with information about next steps, and who they can get in touch with if they have any questions or if they want to edit or cancel a task.