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 :
   . 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.
over 1 year ago
Nice animation :)
This is very true. It's all in the details. Thanks @Pranav Pramod :)
Well demonstrated, really like these types of breath of work focused around knowledge of user interactions...
@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.
Thanks Everyone :)
@Elvis Nunez ⚡ Its made in photoshop, turning video frames to layers ;)
Pranav, thanks for the detailed and thoughtful tip. Much appreciated by all of us.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter