Make it easier to differentiate between categories, channels, playlists etc
Opened this issue · 3 comments
Currently on category and playlist page there is no explicit mention of the type of list you are viewing. If playlists are added to the channel page it is also unclear which is which until you look at the button saying "View playlists"/"View all", ideally it could be something like on the homepage where channels are on a colored background and categories are not.
Lets discuss how to best approach this one on a standup
@mkl-adsn Discussed adding "dynamic breadcrumbs" for long/scrolling pages, 10px in the top as an alternative. Another hint could be adding subtle labels alongside playlist/category names, e.g. "Playlist: Dominique Guelette", "Category: Science and Technology". Yet another hint could be different background boxes (but less favorable/beautiful).
@mblomdahl It took a little tweaking of the existing design to incorporate the sticky section labels but I think I've landing in a good solution. For now I focused on the start page for desktop and added the changes on a separate artboard until we have a thumbs up on the design as to not mess with the main prototype.
I also tried out the idea of having labels on each category/playlist/etc but it didn't look very good and also the button CTA text already fills to role as a label in a way, so I left that out.
Changes below, looking forward to feedback!
List of changes
- Added a title block for each section that sticks to the top of the page when scrolling
- Added buttons in the title sections to see all categories/playlists/etc.
- Deemphasized the color on the buttons for single channels/playlists/categories to create better visual hierarcy with the new buttons in the title sections
- Lowered font size and weight for single channel/playlist/category titles to create better visual hierarcy with the new sticky section titles
- Lowered spacing between sections a bit and instead added a divider to create better separation
- Removed channel block background color as the sticky sections now does the job of distinguishing the content types
- Slightly repositioned global share button to not interfere with the sticky section header