Comms questions

[robyn-bautista]

Background

"New indicators":
I need to identify what the newest messages are

Attachments:
I want the ability to preview my photos and media in-app on my comms canvas to make my workflow more efficient

Statuses:
I need to easily identify and change the status of an interaction.

Feedback

"New" indicators:
• The new message button is blue, but the rest of the new indicators are purple (badge count, status, etc). Do we keep to blue since a user can interact with the button and override the purple "new" color pattern or change to purple?
• Is there a specific behavior that occurs when a user presses a new message button and messages are not below the fold? Does it make sense to have a user interact with it at this point?
• For bookends, do we want to consider more differentiation between different types of bookends? Visually differentiate user triggered events vs automatic updates (like date/time)

Attachments:
• Do we have any components for photo preview?
• Thoughts on use of buttons for actions and to navigate through previews?

Statuses:
Refer to original ticket here
I still have some concerns on using current components and wanted to provide more context:
• Some statuses need to communicate urgency and status badges will be used in different places. We need consistency between the components
• Is there a solution for the status badge appearing in one touchpoint having a different style from the status dropdown appearing in the header?
• For icon use, some of the shapes seem arbitrary and we may add more statuses and at some point we want to customize statuses so there may not be an icon for every status

Stage of design

High-fidelity

Research

[Aion] Interactions States :: Research Readout

Relevant links

Unread indicators figma: https://www.figma.com/file/tYvRP4ei4tiMProUa0gf37/P0-Final---Inbound-interactions?node-id=842%3A95294&t=g7lUfeiOAs7osD45-1

Attachments: https://www.figma.com/file/3tabCGxnI3s1SrdCU0sZbV/Aion---Omnichannel-Canvas?node-id=51%3A136235&t=QYD6jDN9vVyWrZRO-1

Statuses: https://www.figma.com/file/4e366pjcsNYG0yohe4RzFU/P0-Final---Interaction-states-and-topics?node-id=1330%3A208542&t=beMMr4I4M2DbLrDX-1

Are you looking for visual design support?

• Yes

Additional Information

No response

[SiTaggart]

Hi @robyn-bautista

Thanks for attending Office Hours today. You can find a recording of the session here. The Password can be found in the #help-design-system slack channel.

[robyn-bautista]

Thank you!

TL;DR


Decisions:

• Will maintain the blue background for the new message component as it’s a button that can be interacted with


• @robyn-bautista to come up with proposal for horizons and greater visual differentiation between bookends/events
  • Add sparkle icon to "new" badge

Other designs shared:
• Sticky widget
• Future of attachments

Open questions deferring to paste team:

• Purple variant for a badge count to maintain consistency in the application for notifications of “new”
• Visual parity between status dropdown and badges/statuses

[robyn-bautista]

To understand what I need to create a dependency sheet for, there were three action items:
@robyn-bautista creating a proposal for horizons and greater visual differentiation between bookends/events

Deferring to paste team:
Purple variant for a badge count to maintain consistency in the application for notifications of “new”
Visual parity between status dropdown and badges/statuses

Which if any of these do I need to create forms for? or something else?

Also for more context on multiple statuses/state: here is the research. Given some of the statuses, the icon would have to be duplicative in some instances (various periods of waiting for example)

Regardless, having an improved solution for visual parity including background color between the dropdown and statuses/badges with or without icons is something to consider

[SiTaggart]

Hi @robyn-bautista

I think right now, you don't need to file a dependency, not yet at least.

For the potential improvements to bookends and events in the chat log, you'd need to work with your teammates who contributed the designs originally to make sure they work for the existing use cases, mainly from the Flex and Web chat products. I don't think anyone would be opposed to incrementally improving their products, but you will need to gain consensus and capture their feedback and use cases to do so. Once that's done, and everyone agrees, then we can take the dependency for what actually needs building and adding to the system.

For the scroll to new content button, right now, I don't think we'd do anything. As @loreina explained, the button is just an action, so reusing our button styles are what we'd recommend. If we see more use cases outside of your product area we might consider it. Generally, though, we don't do semantic color coding for accessibility reasons, as we can't communicate meaning with color, and accessibility is our primary guiding principle.

For the status, the guidance still remains using a composition of Status Badges and the Menu component, as demonstrated in the Codesandbox linked to in the other discussion. If you want that composition to use the different status variants once the new status is selected, go for it. We're probably going to create some kind of status or badge menu "thing" pretty soon, so watch that space.