Volumio2 UI: Suggestions and designs

Hi everybody!
We’re in the process of styling the Volumio2 UI, so I think that your suggestions and design guidelines would be pretty helpful…

For example you can suggest:

I’m no designer nor coder at all.

My advice, as always is KISS : Keep It Simple and Speedy !!

  • Test it on the RPi 1st gen to ensure server performance, and that there’s no impact (eg: when using wifi with weak signal and file transfer capabilities)
  • Test it on the least powerfull device you own on client side.
  • Plan a 320x200 version for small screen as many user use old smartphones as a remote.

My 2cts…

ps: Bravo for this piece of yours that is Volumio.

I love, sober and elegant…

I agree that the UI must be displayed correctly on small / medium and large screen. Very important for me.
Sober, but buttons like play / pause /stop and volume control (slider) always available whatever is the page displayed.
What I saw in the example you give (pixelkit page) is very nice and clean. I like it!
Internationalisation of the UI is to be take in consideration and be easy :wink:
Theme (color etc) or skin possible ?

Is there any screenshoots of the Volumio2 ccurrent inteface or does it look ecatly as the Volumio 1?

Some facts:

  • Ui will have internationalisation built in (need some translators…)
  • UI will have theme and styles support
  • UI is built on the same layout as Volumio 1, but let’s just make it better

My goal there is (as mies van der rohe would say) less is more.

Let me know for French translation :wink:

It would be nice if on bigger screens (desktop/laptop computer) the UI would show both the playlist and the library at the same time. Thus I can add songs from the library and the immediately is added on the playlist on some other part of the screen.

I guess this topic is about suggestions for the default UI, and that one could make a theme changing everything about the UI? Or what level of customization will there be?

Also: I can do danish translation if wanted

I will gladly provide german translations if needed :smiley:

Blue

Dutch if you need.

Hi, nice project so far!

I have a couple of suggestions/ideas for the ui. All of them tweaks on what is already a good ui.

  • It would be nice if the breadcrumbs below, would actually be converted into touch friendly links. So that navigating trough a folder structure becomes easier. This would also provide a nice “home” button, which I miss while I’m browsing.

  • the up and down buttons (next to the breadcrumbs) seem a bit useless to me, does anybody ever use these?

  • The back button could maybe use a different positioning. For me it has a strange position, I would expect this all the way at the top or the bottom.

  • pull down to refresh/update (but this might conflict with certain mobile browsers)

  • on my android device, selecting the android back button, ejects me from the volumio ui. If its possible it would be great if you would go one step back in stead of “exit” to the previous website.

Keep up the good work!

Simon

I’d really like to see larger playback controls that are front and centre of the UI, and bigger buttons in general. I use a tablet or my phone to control Volumio and the buttons I use the most are some of the smallest things on the screen.

It would also be nice to have a colour picker in settings to change the colours of the UI. It’s something I did myself on a previous install but it meant editing css, which is too much faff when it comes to updates.

Other than that I actually like the look and feel!

Hi, thanks for all your effort.

I’ve got a couple of suggestions:

  • use uppercase (text-transform: uppercase;) only for one type of element (e.g. h1). Generally speaking are uppercase fonts less readable and in your case they mess with the visual hierarchy. My recommendation: .control-label {text-transform: none; }
    I fiddled with the css a bit. In my opinion it’s much cleaner and structured now.

  • the play/pause and skip buttons are misaligned.

  • vertical center the label inside the knob

As a designer I’m happy to help.
louis

I think you might be using a slightly older version of the UI, which is being constantly worked on.

I agree completely about the text, I’m not a big fan of everything being capitalised. I’ve created an issue for it here; github.com/volumio/Volumio2-UI/issues/63

I don’t think it particularly matters about the play and skip buttons being misaligned. To align them you would lose the effect of the rounded play button.

Pretty sure I centred the knob label recently… not sure if it made it into the latest beta release. Just tested on my development version and it centres once something is actually playing.

I think that the play/pause and skip buttons are aligned perfectly with the pause’s middle and the skip bottom :wink:
About the time stamp I have to say looking at idntr’s screenshots I would say the “:” should be aligned with the start of the circle.

I’m just going from the screenshots here, I’m a bit embarrassed but I haven’t really played with any of the volumio 2 bèta’s :blush:

what’s the point in having this effect if you lose the allignment of the other header elements?

Turn the question around, why do they need to be aligned?

The effect is there to compliment the round knobs. Not being aligned doesn’t affect usability, all controls are quite clear and they are close enough aligned that it wouldn’t make it any more difficult to use.

Alignment avoids visual clutter and is a key design principle. There’s no “close enough” alignment :smiley:
All I’m saying is there’s a solution in between usability and neat design. I shouldn’t criticize without a better solution. Unfortunately I’m really busy right now…sorry

I totally agree on removing the uppercase transform…
As for the alingment, I think the real issue is eleswhere: the circle around the play\pause button has more downsides than advantages… The more I use it, the more I think it’s an overshot…
What do you think?

Care to elaborate?

I’m open to suggestions if its not working, I’d be sad to see it go as I think it ties it all together nicely. Obviously ease of use is key though!