Component usage feedback in showing operator results

[QiiFeng]

Hello team, I am redesigning how to display operator results for EIP.

As is: Use the disclosure the show different operator results (see the right-side panel in the screenshot);

Problem: Not intuitive for users to know what has been found;

New design: Use the card to show operator results at the forefront; Reduce redundant information;

Please see Figma file: https://www.figma.com/file/Bd0atRbK0lBsXOuXNQJZaz/UI-Revamp?node-id=548%3A181269
Prototype: https://www.figma.com/file/Bd0atRbK0lBsXOuXNQJZaz/UI-Revamp?node-id=487%3A146883

In the new design, the new card is a rather custom UI, I'd like to get your opinions on the component usage if you have any (e.g. card. separator, etc.). Thanks in advance

[gloriliale]

Hi @QiiFeng, thanks for sending these files along with your question, they're super helpful. Discussing this with the team to get you some feedback real soon!

[gloriliale]

Hi @QiiFeng! It would give us a better idea of your goals if we could discuss your design during our Office Hours. We have them on Thursdays and you can sign up here. Since you've already made this discussion thread, feel free to use this link instead of creating a new one.

[kelseycavitt]

Hi @QiiFeng,
For the usage of the card component, it's fairly flexible. We noticed in the UI design that the border width was changed to be 1px instead of the defaulted 2px border width for the card component. We recommend using the card component, as it pertains well to your needs in the design for containing a group of content together, but if you want to customize the design, your team can style a "box" instead.

After viewing the prototype, we also recommend that the feedback "widget" should be displayed rather than hidden and only appear on hover. The proposed design interaction could jarring for users if only displayed on hover, as the elements move and the hit area can easily be triggered.

For the card's interactive element with the label, the current background color change is not accessible alone, it will also need a shape or another visual change to better indicate that the element is interactive.

The design suggestions can be better seen in this Figma file frame.

Please let us know if you have any more questions!

[QiiFeng]

Hi@Kelsey, thanks for all those recommedations. Just to let you know, we use the card component with defaulted 2 px broader, which looks not bad.

Also for the accessibility issue, we are happy to add another visual change to enhance that. For showing feedback on hover state, we do agree it is a bit jarring. Two alternative ways have been proposed. One is like what you've suggested, the other one is to show feedback action on the right top of the card as we always have the tittle on the card. While the big concern for my team is not showing feedback widget all over the screen. Anyway, both of these are in the plan but have not been added to the development this time since our team is catching up time for the Singal Demo this week.

[kelseycavitt]

Hi @QiiFeng , great! I'm glad the card component is working out for you! For the feedback implementation, if you need another review on it once you come back to it, let us know. Thanks again and good luck with the Signal Demo!