Volumio2 UI: Suggestions and designs

Here you can find all important communications from Volumio's staff

Ads helps Volumio remain Free and Open Source. Please consider donating to help us continue to serve you.

Re: Volumio2 UI: Suggestions and designs

Postby frietboer » Wed Nov 11 2015 19:57

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
Random avatar
frietboer
Fresh off the boat
Fresh off the boat
 
Posts: 1
Joined: Wed Nov 11 2015 18:55

Ads helps Volumio remain Free and Open Source. Please consider donating to help us continue to serve you.


Re: Volumio2 UI: Suggestions and designs

Postby AlphaPapa » Sat Jan 16 2016 12:18

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!
User avatar
AlphaPapa
Objectivist
Objectivist
 
Posts: 202
Joined: Sat Jan 02 2016 09:08


Re: Volumio2 UI: Suggestions and designs

Postby idntr » Thu Mar 10 2016 11:53

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:
Code: Select all
 .control-label {text-transform: none;  }

I fiddled with the css a bit. In my opinion it's much cleaner and structured now.
Image

- the play/pause and skip buttons are misaligned.
Image

- vertical center the label inside the knob
Image

As a designer I'm happy to help.
louis
Random avatar
idntr
Fresh off the boat
Fresh off the boat
 
Posts: 3
Joined: Mon Feb 15 2016 10:21
Location: germany


Re: Volumio2 UI: Suggestions and designs

Postby AlphaPapa » Thu Mar 10 2016 12:07

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; https://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.
User avatar
AlphaPapa
Objectivist
Objectivist
 
Posts: 202
Joined: Sat Jan 02 2016 09:08


Re: Volumio2 UI: Suggestions and designs

Postby MobeyDuck » Thu Mar 10 2016 13:07

AlphaPapa wrote: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 ;)
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 :oops:
User avatar
MobeyDuck
Moderator
 
Posts: 482
Joined: Sun Jan 05 2014 20:28
Location: The Netherlands


Volumio2 UI: Suggestions and designs

Postby idntr » Thu Mar 10 2016 16:05

AlphaPapa wrote: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.


what's the point in having this effect if you lose the allignment of the other header elements?
Random avatar
idntr
Fresh off the boat
Fresh off the boat
 
Posts: 3
Joined: Mon Feb 15 2016 10:21
Location: germany


Re: Volumio2 UI: Suggestions and designs

Postby AlphaPapa » Thu Mar 10 2016 16:29

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.
User avatar
AlphaPapa
Objectivist
Objectivist
 
Posts: 202
Joined: Sat Jan 02 2016 09:08


Re: Volumio2 UI: Suggestions and designs

Postby idntr » Thu Mar 10 2016 17:06

Alignment avoids visual clutter and is a key design principle. There's no "close enough" alignment :D
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
Random avatar
idntr
Fresh off the boat
Fresh off the boat
 
Posts: 3
Joined: Mon Feb 15 2016 10:21
Location: germany


Re: Volumio2 UI: Suggestions and designs

Postby michelangelo » Thu Mar 10 2016 19:15

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?
User avatar
michelangelo
Founder
 
Posts: 4145
Joined: Sun Dec 15 2013 23:18


Re: Volumio2 UI: Suggestions and designs

Postby AlphaPapa » Thu Mar 10 2016 19:49

michelangelo wrote: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!
User avatar
AlphaPapa
Objectivist
Objectivist
 
Posts: 202
Joined: Sat Jan 02 2016 09:08

PreviousNext

Return to Staff comunications

Who is online

Users browsing this forum: No registered users and 1 guest