Skeuomorphic UI tip

Skeuomorphic-sliders

9 Responses

  1. Pranav Pranav

    In skeuomorphic designs, there is a practice of adding tiny bumps as detail on sliders, window edges etc. This is added to suggest to the user that it is a surface which gives a grip and hence a drag interaction on that surface is possible. Some of us get it right and some of us, sometimes forget to think a little bit ahead. Here are a few examples from Dribbble with this detail done wrong :
    [1] [2] [3] . Adding this detail in this manner can prompt the user to do a wrong interaction and thus confuse him.

    Download the Interactive Demo

    Here is what has gone wrong in the previous shots :

    The Right Way
    The bumps on the first knob are vertical in orientation. This type bump pattern in real life will help the finger to grip to the surface. This makes dragging or sliding on that surface easier and more convenient. You can notice such types of grips being used on the sides of the bottle caps
    The Wrong Way
    Now, check out the second slider. Here, the orientation of the bumps are horizontal and for a horizontal motion they provide very less friction compared to the vertical ones. Also, there is a chance that it might prompt the user to do a vertical slide instead of the horizontal one. If you try to slide a knob with this type of bumps, our hand will move smoothly across the button rather than gripping to the toggle and dragging it. This should be used in a vertical slider where this grip pattern is apt to provide enough friction.

    In my opinion you should get the skeuomorphism right by giving attention to such tiny details. When you port something from real life to the digital screen, don't forget its real use :)

    Built upon the iOS module by Prathyush Pramod.

    likes

    over 1 year ago

  2. Ilja Miskov Ilja Miskov

    Nice animation :)

    over 1 year ago

  3. Marco Moreno Marco Moreno

    This is very true. It's all in the details. Thanks @Pranav Pramod :)

    over 1 year ago

  4. David Luhman David Luhman

    Well demonstrated, really like these types of breath of work focused around knowledge of user interactions...

    over 1 year ago

  5. NSElvis NSElvis

    @Pranav Pramod: Hi, I would love to know how did you made those classy gifs without losing quality? I made one and looks like crap.

    likes

    over 1 year ago

  6. Dhiren Adesara Dhiren Adesara

    AWESOME !

    over 1 year ago

  7. Supratim Nayak Supratim Nayak

    So true!

    likes

    over 1 year ago

  8. Pranav Pranav

    Thanks Everyone :)
    @Elvis Nunez ⚡ Its made in photoshop, turning video frames to layers ;)

    likes

    over 1 year ago

  9. Philip Clark Philip Clark

    Pranav, thanks for the detailed and thoughtful tip. Much appreciated by all of us.

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like