Iconography is inconsistent

Roon is a technically great product. The UI and UX can use some polish, and will increase the overall usability and enjoyment of the product.

Bug description:

Iconography used throughout the application is inconsistent in design. Some icons are straight-on (heart, bookmark, search), some are profile (lyrics/microphone), and some are 3D, but in varying perspectives (Large speaker output vs. RoonReady device are both 3D, but in entirely different perspectives).

Not only are the icons inconsistent, but the design style aren’t of a whole. Some icons have thick lines (volume), some have thinner lines (Search), and some have very thin lines (like the 3D icons mentioned above). Some icons are filled (bookmarks, previous/next song), many are not (3D icons, lyrics, etc).

I’ve attached a redline showing some of the issues I’m describing. This centres mostly around the main transport control, but the entire application has inconsistent use of iconography.

Iconography should be consistent in placement and style across an application

Steps to reproduce

  1. Open Roon
  2. Navigate to a song in the UI
  3. Play the song in the UI
  4. Observe the transport control strip at the bottom of the window

NOTE This image has a defect in that the arrow appearing to point to the bookmark icon with the label ‘Medium thick lines’ should in fact be pointing to the Search icon next to it.

1 Like

This appears to be UI design rather than a bug that Support can fix. Let’s shift it to Software and flag @brian2 (UI design dev) as to whether it is intended.

Thanks! (fwiw, in my professional sphere UI bugs are peers with development and functionality bugs, which is why it was my natural instinct to place it in Support)

Quite a nice summary doc - never hurts to try for perfection.

All looked fine to me before you pointed it out. Just shows you how observant I am…
At least my ears work better than my eyes :smiley:

And some “unfilled” icons fill when the appropriate action occurs; i.e. Heart.