[Mock-up] Design Experiments

[felix-andreas]

After reading elementary/granite#315, I was wondering how some the default elementary apps would look like with a full-height sidebar. So I did a couple of experimental mock-ups for Music and other elementary apps (Reddit).

I myself am not completely convinced if this would be a step in the right direction. But as some people on reddit liked the mock-up and also following the advice of @danrabbit, I open this issue.

Maybe some of changes can be used or it just gives some creative input for other ideas.

UI Changes

• Introduce a "Now-Playing" section, which is always shown (independent of view mode)
• Remove header-bar and move music controls to "Now Playing"-section
• Move view-switch and search-bar from header-bar to music-view
• Introduce a cut-down version of the queue below the "Now Playing" section
• Remove add-button for new playlist and instead introduce new label "Create Playlist"
• Move Equalizer to settings as it is not used so often
• Use a bit lighter background colors

Possible UX Improvements

• Moving the view-switch and the search-bar from the header-bar to the music-view could make it more obvious which part of the program they affect
• In my opinion the music-controls and the "Now-playing"-section belong logical together. So unifying them in a single panel makes sense to me.
• Introducing a slim version of the queue makes it easy to see which tracks are played next
• The application is logical divided into three section: Library-Section, Music-Section, Now-Playing-Section. Currently the Now-Playing-section is together with the Music-Section controls located in the header-bar, while the Library-Section and the Music-Section have their own panel. In the mock-up all three section have their own panel, so the visual number of panels matches the logical number of sections.

Another possible advantage: If there are plans to make elementary available on mobile, this layout could easily be made compatible: The sidebar could be toggled with a swipe from left to right and music-library or the now-playing-view would be shown in full screen as needed.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[danirabbit]

What do you think about placing the shuffle and repeat buttons down with the queue since it seems like that list is what is effected by these buttons?

[felix-andreas]

Makes sense to me. I did a new mockup, but I am not completely happy with it as it looks to much like AppleMusic...

[fitojb]

While it may be fancy and fashionable right now to extend vertical panes all the way through windows, this wrecks the logic behind the placement of the window controls (the Close and Maximize buttons). I don’t think it should be acceptable to allow keeping placing the Maximize button at the top-right corner of the window while having a separately colored sidebar just there—it looks like the button just affects that pane instead of the entire window due to the Gestalt principle of proximity. The visual hierarchy is now broken due to the missing top bar.

[fitojb]

(Similarly, it looks like the Close button on the top left only closes the left pane; it’d be surprising for it to close the whole window, as well as being illogical. Since it’s on a pane that is separated by color from the main content pane, that affects the perceived scope of a UI widget.)

[truefakts]

I'm a bit late to the game on this thread. But the mock up in the OP would be a fantastic step up from the current iteration of the application. The main downfall of the application as it stands, is that a user needs to navigate through File Explorer to play their music. If the music application looked like what is presented in the provided screenshot, listening to music would require...well one application instead of two. A much nicer user experience