Skip to content

Don't use icons-only buttons in the Playlist

Icons-Only buttons are known to have sub-par usability, especially those whose icons are not 100% universally recognizable (e.g. trashcan, plus sign).

Elisa's Playlist currently has a row of four icons-only buttons, at least one of which has an incomprehensible icon. We can clean this up by by rearranging the layout to move half the buttons to the footer, which leaves room for all the buttons to get text.

This new positioning makes sense because each group of buttons now has a logical grouping: the header buttons are both about the plsylist, which is reflected in the "Playlist" label to their left. And the footer buttons are all about tracks, which is reinforced by the label about tracks to their left. No additional space is consumed in the process, because now the addiitonal spac eis simply used more appropriately.

A Kirigami.ActionToolBar is used for both the header and footer toolbar, so that the buttons will become icons-only again as needed if there is not enough room to display all the text due to limited horizontal space or long translated text in some languages.

Here's what it will look like with various playlist widths and footer label lengths:

Worst-case scenario Likelier scenario Best-case scenario
Worst-case_scenario Likelier_scenario Best-case_scenario

cc @teams/vdg @teams/usability @mgallien

Merge request reports