3

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:

enter image description here

  • 2
    Could you add some screenshots of what exactly you mean? Do you mean the navigation tabs or the bars that change the temperature? – Cai May 3 '16 at 17:31
  • This question might also be a good fit on the User Experience SE site – Manly May 3 '16 at 19:24
  • sorry, i was seperated from wifi for a little while, but yes i mean the bars that change the temperature. – Marc Guiselin May 3 '16 at 19:25
  • @JohnManly I thought so too, but this was more of a design thing in my opinion. – Marc Guiselin May 3 '16 at 19:33
3

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:

enter image description here

Source

Example

This is a quick mockup of your interface with some slider handles added:

enter image description here

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:

enter image description here

  • All my thanks go to you. This far excedes what I asked for, so thank you so much :) I'll look into skeuomorphism, and I will work on making your suggestions a reality. Thanks again. – Marc Guiselin May 4 '16 at 3:37
  • I was thinking of moving the sliders outwards earlier, but I couldn't come up with a clean way of doing it. But the way you laid it out just nails it perfectly, proving that I have so much more to learn beyond simply coding, marketing, and photoshop skills :) Thanks again. – Marc Guiselin May 4 '16 at 4:08
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.

  • very insightful. Thanks. I read about how color schemes suggest movement, but a lot of the pointers use the line they are on to imply user input. Since my nubs are positioned above the gradient, i don't have room for such colored lines that could also potentially conflict with the color the user chose for their "shade". I have a rounded slider, yet it is difficult for users to realize it can move. I know I need to use shape and color, but "how could I effectively use that to my advantage?" is the question I'm trying to ask here. Forgive me for being vague. Thanks again for your answer. – Marc Guiselin May 4 '16 at 3:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.