Implying the ability to move a slider in my app's menu

Question

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:

Answer 1

Skeuomorphism

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:

^Source

Example

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.

Update

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:

Answer 2

Currently, the three little nubs don't look like a slideable object, which is why people may not try using them.

I suggest taking a look at some sliders/slider plug ins to see how they handle their sliding arms.

You may want to use something with a point to it so it pinpoints what exactly they are sliding too. Something like this perhaps.

---

Here's why:

As users who avidly use websites and tools, we unknowingly enter a self learning process. In this process we begin to learn many key elements about browsing the web, some common basic things are unknowingly being taught:

1. Red usually means unsuccessful or close
2. Green usually means success or open
3. Arrows indicate forward and backward browsing
4. Pointer cursors means that the object is clickable

Believe it or not, sliders have become a large part in many web tools, so they too have their own standard appearance. This is where A/B testing comes in, pick up 2 or 3 different styles and test them, here are 3 of the most common:

1. circle slider
2. pointer slider
3. rounded slider

I would suggest going with an already existing option, but would lean heavily towards a pointed slider for your specific use case.