To enhance user interface visibility, two design changes are suggested for 1Cademy clusters: (1) adding a low-opacity fill to the cluster shape to visually differentiate it from the background, and (2) displaying tags at the top or bottom of the cluster rather than in the background, ensuring tag text remains visible, especially in light mode.

University of Michigan - Ann Arbor

Google

Research-based design changes for 1Cademy  platform

1Cademy Design Changes

Shape is made visible when surface edges have sufficient contrast against their background. By default, Material Design makes shapes noticeable by using shadows to display surfaces edges. Other methods to show surface edges and shapes can be used in combination with shadows, or on their own, such as color fills and opacity.

* Displaying shape: **Do**
* Displaying shape: **Don't**

Displaying shape

Currently at the search function, when the cursor is hovering over the actionable buttons they remain the same. However, according to Material Design, with a better visual representation of the states, UI elements can offer users better affordance of their actionablulty

Search-Hovering state

1Cademy Cluster Design Improvements

The 1Cademy Help Page is designed to provide users with FAQs, functional tutorials, privacy statements, and other comprehensive documentation to aid in understanding and navigating the platform.

1Cademy Help Page

A colored fill on this floating action button contrasts with the content on the surface behind it, making its surface edges and shape noticeable.


Displaying shape: Do

A semi-transparent surface and white color makes it hard to see the edges and shape of this floating action button.


Learn Before

Related