Icons for call direction

[yongjie1]

We'd like to add 3 icons to paste to indicate the call directions: Inbound, Outbound, Unknown.
Here are the link to streamline app:
Outbound https://app.streamlinehq.com/icons/streamline-light/phones-mobile-devices/phone-actions/phone-actions-call
Inbound https://app.streamlinehq.com/icons/streamline-light/phones-mobile-devices/phone-actions/phone-actions-receive
Unknown https://app.streamlinehq.com/icons/streamline-light/phones-mobile-devices/phone-actions/phone-actions-question
Design

[kate-porter]

Hey @yongjie1! Thanks for requesting these - these make sense to get added to Paste, so I'll create tickets to do so. When is this page going into implementation?

[yongjie1]

Thanks @katieporter. We aim to build and launch it in Q1 2022.

[kate-porter]

Got it, thanks! We'll aim to have these added to Paste within the next month if that works for you.

[yongjie1]

Great, thanks!

[loreina]

Hi @yongjie1, just wanted to follow up here. Could you share more about the use case for an Unknown Call icon? We're wondering how this icon would be used in context with the inbound and outbound call icons. If you have screenshots to share, that would be amazing thanks!

[yongjie1]

Hi @loreina, Unknown Calls are calls that we don't know where the direction of it in the backend and they are not belongs to Inbound, Outbound, or Internal call, we'll show it as "Unknown". We get these data from customers and then we show it in the table that I've shared in the post.

The team has decided to add another call direction: Internal Call (calls from internal agent to internal agent). I can't find any good icons for internal call from Streamline. Do you have any recommendation? I was thinking about something like this

[loreina]

Hi @yongjie1, the team looked over the Figma file you shared and have landed on a couple of things:

• We'll add the Inbound Call and Outbound Call icons to Paste for inbound and outbound calls.
• We'll add a general Call icon that would work for unknown calls, and can be generalized for other use cases that may need a call icon.
• We suggest using the Agent icon for internal calls between agents. In Figma, it's called other/Agent icon.
• We also suggest adding description text next to the icon in the content cell to indicate to a user when a call is outbound, inbound, unknown, or internal. Adding description text provides the user with more context into the direction beyond using an icon. There's a variant of Table in Figma with Icon + description text that would work here.

I've updated the ticket in our backlog to add these icons and we'll follow up here when those have been added. Let me know if you have any questions, thanks!

[yongjie1]

@loreina What does the icon mean in the other products? Does it mean "Agent" or does it also have other meanings?

We've seen many products that using icon with tooltip and we think people already build up the mental model of seeing an unfamiliar icon and hovering over it to understand what it means. E.g In Gmail, they use a star icon without text but if you hover over it you see the tooltip. In Google doc or Github comment, they have lots of icons and user needs to hover to understand the meaning

[loreina]

Yeah, the icon means "Agent" and is meant to be used in products to indicate as such.

The examples you shared are icon buttons, so they're interactive and the tooltip is displaying text on how that element works. A Tooltip should only be placed on a focusable element (like the ones in the screenshots above) so that it's accessible for screen readers. It shouldn't be used when hovering over an icon as screen readers would not have access to the text within the Tooltip. We have more information on this on our doc site: https://paste.twilio.design/components/tooltip/#accessibility

[yongjie1]

@loreina Thanks, I see. I understand it's good to have icon with text but in our case we really don't have enough space and this is not the most important info to users. We are thinking of using the info icon in the column header to explain what each icon means. It is a typical pattern we already use to explain what each column is about and the discoverability should be alright. As it's only 4 icons, it's okay to have a little learning curve. Once they've seen the meanings, the leaning curve is pretty low. Especailly when they are using the product on a day to day basis.

Some more questions about the icons:
If the agent icon means agent in the other products, won't it be confusing to our customers if they see it means "Internal call" in our product?
I've done a quick test with our team on the icons and here are the feedback on the meaning of the icons. Inbound & Outbound are pretty easy to understand however the Agent icon and the Phone icon do not mean "Internal call" and "Unknown call" to them.

They are also unclear about the "Agent" icon and the "Unknown" call direction icon...

Feedback

[loreina]

I spoke with the team about this and we would still recommend pairing the icon with text for the call direction.

I've also mocked up a few ideas in this Figma file where some of these ideas don't make the cell wider:

1. Icon + Text: This uses the table cell content for Icon with description text. Icons should be paired with text to be accessible for screen readers. I am using the voiceCapable icon as a placeholder and that shouldn't be used in the final mockups; we'll have the call direction icons for production use.
2. Text only: This displays the call direction without any icon. The current list of call direction would be around the same text length as the word "Direction" in the header, that sets the width of that column.
3. Badge w/ Icon: We're using the decorative Badges here, but with a prefix icon. The width of these badges are longer than the "Direction" header text so may not be as useful if you're trying to save table space.
4. Badge: We're also using the decorative Badges here. I've used each of the 4 available decorative variants for each call direction. It takes up about the same amount of width space as "Direction" does in the header. You can see a live example of this on our doc site: https://paste.twilio.design/components/badge/#call-attention-to-attributes-of-table-items. This would be our preferred approach.

Regarding the Agent icon, it is used to mean "agent" and in this use case, would be a worthwhile learning curve for users to understand that it indicates an "internal call", or a call between agents.

Regarding the unknown call and internal call icons, it's great that you got feedback from your team. Have you done any external user testing or research on these icons? If we add an icon that we're not confident about, it's very hard to remove it and we should be wearing the customers' shoes to make those decisions.

Hope this is helpful! Please come to office hours if you have any more questions and we can discuss in-person.

[yongjie1]

@loreina thanks, I've discussed it with my team and we've decided to go with text for now. We'll pause the request for icons.

[loreina]

@yongjie1 Great, thanks! Happy we had this discussion and landed on an option that's accessible. I'll close the ticket in our backlog for the icons. Feel free to create a new discussion for future requests. Thanks again!