These are guidelines to optimize both the WhatsApp Flows user and developer experience.
Users should enter flows aiming to complete a task as quickly as possible, with tasks taking no longer than 5 minutes to complete.
Screens with too many tasks may look messy and overwhelm the user. If the flow needs the user to complete multiple tasks, try splitting them up over several screens.
Too many components will make your screens look messy and may overwhelm users. It will also take longer to load.
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.
In order to achieve the best latency:
Requests to the WhatsApp Flows data endpoint time out after 10 seconds.
flow_token
Expiration ManagementWe recommend having longer flow token expiration times, in the range of 2 to 3 days, to give more time for users to engage with flow messages after receiving them.
If that is not possible for security reasons, consider embedding a re-authentication mechanism in the flow, or set a user-friendly message for an invalid flow token error with the recommended action to receive a new flow message.
If you have a business requirement to limit the flow message flow time, the timing should start only once the flow message has been opened, which is when the data channel receives the INIT
request.
The CTA should always tell the user what will happen next or what task is being completed on each screen, for example Confirm booking.
Use sentence case on screen titles, headings and CTAs. Use consistent capitalization throughout each flow.
Always consider the context of the content when using emojis, such as:
If you need to create a sub flow for certain use cases (eg. a forgot password flow), try to keep it to a maximum of 3 screens and always take the user back to the main flow and task at hand.
Ensure that any information is correctly formatted for context, for example currency symbols, phone numbers, and dates.
Helper text should provide clarity for users, eg. the correct format for a phone number, date input, or email address.
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.
The CTA should go hand-in-hand with the message content. It should be short and concise, telling the user what task they can expect to complete by opening the flow.
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.
Some flows may need login screens to complete tasks. However, there are factors to consider when including them in your flows.
Including a login screen may be off putting for some users, so try to only use them when absolutely necessary. If you do need one, set the expectations for users so it doesn’t come as a surprise.
Research has shown that login screens may confuse users within flows. Some people thought screens would take them to an external page, outside of WhatsApp. This may result in users losing their sense of place within the flow.
The placement of login screens is key. If they are too early in the flow, users will not be motivated to continue. Showing the benefits upfront will make users want to complete the flow. Aim to make the login screen one of the last steps before completion.
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.
The termination messages should provide the user with clarity and a sense of completion. They should know what they have done, what the next steps are, and who they can get in touch with if they have any questions or if they want to edit or cancel a task.
Make sure your content follows a simple, clear hierarchy using a heading, body and captions
Do not repeat content unnecessarily, for example: