: Implying the ability to move a slider in my app's menu 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

@Turnbaugh909

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:

Vote Up Vote Down

@Deb5748823

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:


Red usually means unsuccessful or close
Green usually means success or open
Arrows indicate forward and backward browsing
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:


circle slider
pointer slider
rounded slider


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

Vote Up Vote Down