Contrast helps visibility
Proximity. Alignment. Repetition. Contrast.
PARC your content to ensure the best experience!
This past weekend, I decided to check out a few different shows on various streaming apps. When loading apps on my TV, I noticed that most of the “profile selection” screens look fairly similar; the UX is the same - display the available profiles, make the active selection as visible as possible, and allow Users to “manage” profiles (add, edit, or delete).
I noticed one of the streaming apps was a bit difficult to tell which was the actively selected profile, and thought of potential simple solutions to help the visibility. I drafted a few low-fidelity (wireframe) mockups to test the thought experiment.
What profile is selected?
The HBO max “profile selection” screen
Why it is difficult to tell which profile is currently selected:
All have a “border”, which could be used as a selection status
All profiles, whether selected or not, have the same opacity
(On TVs) The size difference between selected and unselected profiles is not large enough
(On TVs) When changing selection, only the profile pictures change size - not the text. Furthermore, the text doesn’t change in weight, which could aid in legibility.
Using Borders strategically
Wireframe using the profile selection border to create more contrast
In this low-fidelity mockup, only the active profile has a border, reducing selection confusion.
Adding Contrast by manipulating opacity
Adding even more contrast by adding a selection box, and reducing the opacity of the unselected profiles
Adding a selection box & fading out the unselected profiles adds contrast, which makes it easier to differentiate the active/currently selected profile from the others. This may also help with accessibility, since the differentiation through the usage of shapes is more drastic.