Firstly I don’t think I’m asking this in the right place, but Graphic design is the art and practice of planning and projecting ideas and experiences with visual and textual content. So my question should apply here. If it doesn’t, please suggest where I should be asking about this.
How can I effectively and cleanly suggest the ability to move a set of 3 sliders in my menu. A lot of the users using my chrome extension (Screen Shader) don’t even realize that they can move the 3 black nubs on the top, left, and bottom sides of the menu with the orange gradient to change the amount of “shade” the extension produces on web pages throughout the day.
Does anyone know any good ways to point first-time installers in the right direction? Can you figure out how it works on your first opening of the menu? What could be improved?
Thanks in advance for any help.
Here are the ‘nubs’ i was talking about:
The whole purpose of skeuomorphism is to tackle the problems you are facing. Emulating the aesthetics of physical objects that people are used to in the real world helps them to understand the functionality of your interface.
Skeuomorphism has got a bit of a bad name recently, mainly due to Apple taking it a bit too far. Pre iOS 7, the skeuomorphic design Apple was using was more about aesthetic than function, but skeuomophism does have a real functional benefit in helping users understand new concepts using metaphor.
Look at these sliders—they all have buttons/knobs that look like you could grab them and drag them or do something with them, exactly what you should be doing with them:
This is a quick mockup of your interface with some slider handles added:
They don’t look great, but that took me 2 minutes and it is now obvious they are for dragging/sliding. Since your interface isn’t one most people will be used to adding arrows to suggest at movement will help.
You are fairly limited in space so one idea is to show the slider handles obviously large on first launch/install, then reduce their size once the values have been changed—by that point, the user knows they are there and what they do. An extension of that idea is to have the handles move further in or grow in size on hover.
There are a lot of different solutions but, broadly speaking, the answer is—skeuomorphism.
After using your extension (I really like it btw!) I would say you need to label the different sliders too—it’s not instantly clear what controls what. The tooltips explain clearly but they aren’t obvious enough, if people aren’t even aware they can move the sliders they definitely aren’t aware of the tooltips explaining what those sliders control.
‘Day’, ‘Night’ and ‘Transition’ labels would be enough, with the tooltips giving a better description as they do now.
A quick mockup with some possible improvements: