Substatuses on a table

[lgalloherran]

Background

We are working on a list view for the Sender ID applications. This table will contain the information about the applications in draft, sent and completed when a customer applies for a Sender ID application in multiple countries.

Each country has specific registration times; therefore, the sender ID may become active in different countries at different times. This means that, besides the application status, each country will have its own status (live/not-live).

Customers tend to register multiple countries per Sender ID, so this will be a common case to see on this table.
Also, they will need this detail as they are waiting on their registration status to send SMS to the specific country.

Feedback

I'm proposing the use of a status badge per country to indicate this individual status, in addition to a tooltip on the column header, and the application status column.

Stage of design

High-fi

Research

No response

Relevant links

]Page mock: https://www.figma.com/proto/kem6iZab8XFhLo8S0Gx0AA/PN-Alphanumeric-Senders-Manage-Sender-Ids-section-(2021)?page-id=0%3A1&type=design&node-id=3060-21835&viewport=4270%2C5567%2C0.36&t=dLPm7WfKyT4Hk8T5-1&scaling=min-zoom&starting-point-node-id=1738%3A287276&show-proto-sidebar=1&mode=design

Are you looking for visual design support?

• Yes

Additional Information

No response

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Based on the information provided, it seems like you're on the right track with your design proposal. Here are some suggestions based on the Paste design system:

1. Status Badge: As you've proposed, using a Status Badge for each country to indicate its individual status is a good idea. The StatusBadge component can be used to compose a status icon with a text label. Remember that Status Badge labels should be 1–3 words.

<StatusBadge status="live">Country Name</StatusBadge>

2. Tooltip: Adding a tooltip on the column header to provide additional information is also a good practice. Make sure the tooltip provides clear and concise information.

3. Table Composition: Since you're dealing with a table, remember to include supporting text so color isn't the only indicator of status. Each individual table cell can support multiple rows of text, which can be useful for providing related details without adding additional columns.

<Table>
  <THead>
    <Tr>
      <Th>Status</Th>
      <Th>Country</Th>
    </Tr>
  </THead>
  <TBody>
    <Tr>
      <Td>
        <StatusBadge status="live">Live</StatusBadge>
      </Td>
      <Td>Country Name</Td>
    </Tr>
  </TBody>
</Table>

4. Accessibility: Ensure that the word used to describe the status in the badge is unique to the status type it is paired with for any given screen. This helps in communicating the status in an accessible way.

Remember, the placement of the status in the table should depend on the importance of the status to the given user flow and should be tested with users.

For more detailed guidance, you might find the following discussions helpful:

• Adding text labels to status icons
• Showing error previews in a table
• Status of different services and objects through out product's life-cycle

I hope this helps! If you have any other questions, feel free to ask.

[serifluous]

Thanks for coming to office hours! Here's a link to the recording.

You can find the password in Slack.