Status of different services and objects through out product's life-cycle #951
-
|
Hi, For Super SIM, Iot product, we have several objects that goes through status changes and we like to present those status with color clues or icons to differentiate and draw users attention. Any guidance on how to present the status of various services / objects? We can have only words presentation of the status though was wondering if team has any guidance. What paste component can we use to present the different color bubble for the different status? In past and current implementations are using icons which is not scalable since we are adding feature to show SIM's connectivity status.
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hi @ishah-twilio - we don't have a defined pattern for this yet, so I would recommend you do what has performed well in usability testing. I'll provide some suggestions, but do what works best for the user. In terms of building this using Paste, you can accomplish this with Box and Text without much trouble, so just work closely with your engineering partners when you get to the build stage. Make sure all the status circles are using background color tokens, and try to align to the token meaning as much as possible (i.e. And just a small piece of visual design feedback that you can take or leave: the status circles and the text feel a little bit too far apart to the point where they are starting to feel disconnected, and the circles feel somewhat large in comparison to the text. |
Beta Was this translation helpful? Give feedback.
-
|
@katieporter -- You are a rock star. Spacing was random or not intentional since I just created screen to attach to the Github discussion. But I will follow the DSys guideline. |
Beta Was this translation helpful? Give feedback.
Hi @ishah-twilio - we don't have a defined pattern for this yet, so I would recommend you do what has performed well in usability testing. I'll provide some suggestions, but do what works best for the user.
In terms of building this using Paste, you can accomplish this with Box and Text without much trouble, so just work closely with your engineering partners when you get to the build stage. Make sure all the status circles are using background color tokens, and try to align to the token meaning as much as possible (i.e.
color-background-errorwould be a great choice for "Rejected" and "Error detected", as you have in your example). Also, think about which statuses are most important to t…