[Tile] General enhancement for the guidance

[thyhmdo]

Acceptance criteria

• The following is feedback received from Anna Gonzales, Jeeyoung Yang, and Kevin Camelo.
• Tile documentation need updates on the website with the feedback below.

Tasks

Beta Give feedback

1. Define more aspect ratios and provide examples for tiles
2. Explain better the usage between Expandable tiles with default vs interactive
3. Consider defining type pairing and spacing
4. Provide suggestion for interactive element on clickable tiles instead of completely blocking the usage
5. Update the hero image with experimental tiles
6. Show one or two large images of PRODUCT dashboards mixing interactive and read only tiles (Incorporate Kevin Camelo's UI); could be approached as a before and after
7. Add guidance around not using the condensed grid with read only tiles (they need to have gutter)
8. Mini changelog on style tab? (could be broken out into sep. issue) UNSURE

---

Define more aspect ratios and provide examples for tiles

Suggestion to add: possibly in the Usage > Sizing section, does it help to add recommended tile ratios (2:3, 3:4, 16:9, etc)? I personally always forgot about ratios when designing in product - I think it would be helpful for designers to keep in mind designing with the grid layout guidance.

Explain better the usage between Expandable tiles with default vs interactive

Ref issue: #3452
Expandable tiles were a bit confusing - what is the difference between default vs. interactive?

Consider defining type pairing and spacing

Style > Structure section: I think the spacing between subheading/heading/content could be clarified. This is very often one of the most inconsistent styling mistakes found in products. My understanding is that there should be no spacing in between subheading/heading, and the content spacing should be defined depending on the rest of the content structure. It would be helpful to define the details here.

Suggestion for interactive element on clickable tiles instead of completely blocking the usage

Ref issue: #3452

Interactive elements on Clickable tiles
This rule (see screenshot) gets broken quite often across the board— and the feedback we've heard from accessibility is that the interaction of a clickable tile with clickable links isn't inaccessible per say- but rather not recommended. My suggestion here would be to consider adding guidance for that use case instead of blocking it off completely.

Update the hero image with experimental tiles

Nitty gritty, but the image here from Cloud is the only image not updated with the new experimental tiles. We can provide a base Figma template for those updates to be made and share it with you if you'd like!

Other feedback

• About disabled state tiles: I do see a need for clickable and selectable tiles. The two function like CTAs and are often used to evoke an action like creating something. When a specific user does not have the right access or the setup to click or select a given option, a disabled state should be shown.

• Provide guidance around the Grid use, mix and match between static and interactive tiles.

• More examples of the combination treatment of a page with both cards and tiles would be nice! In practice, combining both is hard to do well visually.