Lists

Use lists to display the text response in a more structured and readable way.

Example

Here’s an example of the list component with the text content.

Why to use?

There are many ways how you can use the lists inside the conversation dialog.

One way to use the lists is when you want the user to verify the information before submitting it to the backend. For example, the user wants to add a new time activity, and we need to send this data to the backend software. We designed the processes and found that we need to give the user option to review the information before submitting it, and we did this with plain text. As a result, with 10 field labels and 10 context variables, the plain text representation wasn't readable. We added the list UI component to make the process of review much easier for the user.

Don't	Do
The plain text with many context variables is hard to read.	With lists, users can easy to read the information in a structured way.

Also, we are using the lists in the Dashboard UI component and sidebar panel when we need to display some information to the user without the modification options.

Another way to use the lists is to provide the user with some information from the backend. For example, if the user will ask about the customer details, we can display the list with name, email, address, and other related information to the customer master data.

Use lists functionality to provide the confirmation message after sending the data to the backend. Sometimes users want to know that the information entered into the chat is sent to the backend without any disruption and mistakes. You can get the backend's response about the successfully created object and then take this information and display it with the list component.

Guidance

Define the headline and description

For each of your lists, you would need to add the headline and description, those parameters are not mandatory, but without them, it wouldn't be so clear for the user what they see on the screen.

Define the design of the lists

There are three different options to display the lists:

List with one column where field labels and values are located one by one.

List with two columns, where field labels and values are located in front of each other.

List with four columns, where pairs of the field labels and values are located in front of each other—first two columns for one pair, and the rest two columns for the second pair.

Avoid displaying empty values

This part is easier to explain with the example. Imagine that we need to show the user the information about the customer. We designed the list and defined the next fields to display: Name, phone, email, address. When the user asks about the customer data, we will send the API request to the backend and then display the response with the list functionality. In one case, we get all the field values from the backed, and the user will see the name, phone, email, address of the customer. In another scenario, we have an empty value for the field "Phone" for one of the customers on the backend. In that case, we can display only three fields instead of four: Name, email, address. In some projects, we applied that approach to simplify the users' content and avoided displaying unnecessary information. But it is not applicable for all cases. You would need to decide during conversational flow design if you would like to hide useless information or not.

List with emtpy values

List without emtpy values

Avoid long lists

If your list is not fitting the screen without the scroll, you need to think about displaying needed information to the user in another way. Maybe to use tables or dashboards or cards.

How to use

You can find more information about using this component here.

Next sections to read