Skeuomorphic design plays a great role in deign of mobile and web, especially in button design.
“In a skeuomorph what you see is a design that is based on a familiar physical object, and often on a defunct one.” Source
Skeuomorphing is very popular and has been used widely in mobile and web recently. Specially in mobile devices where we use finger and gesture often. This try to create a connection to the real version of the designed button.
Below I want to review 18 skeuomorphed buttons and the emotional role they play in user’s decision.
PSD files are also provided to download.
When it comes to design buttons for mobile devices we need to pay attention to:
- The touchable size should not be smaller than 40 pixels. So big is good.
- Not all skeuomorphed designs are strong. We need to make sure about the connection they make to the real object and our goal.
Use of Light in Skeuomoric Buttons:
In the following samples we see how using light in a button reminds us of the neon signs in real life . It grabs our attention very quickly. Well usage of this effect makes the action clear and simple for users.
Push and light:
This digital copy of the real Off /On button and green light is so clear that if uses in correct situation no one will miss the action.
The use of light around the below button reminds us again of the neon light in the real stores and advertising.
Another creative design for a button using light:
In the below example the light effect is used more as an indicator of scales than as an attention grabber:
Below button is an excellent use of gradient and ligt effect together with the real representation of the button. Well use of skeuomorphic design that is very effective:
Switch, Push and Slide Buttons:
In mobile devices we use finger and gesture and that is why skeuomorphic design is more useful here than web, where we use mouse instead .
The ON / OFF button as switch, slide or push button, encourages and reminds users the same action they take in real life. They can easily respond to it.
However, you need to be aware that OFF / ON or YES/ NO should have correct correlation to the subject and result you have in mind and make sure it matches with this action. If you are not sure about using switch or slide key, it is better to use normal push buttons.
The pastel color of the above buttons acts very close to the lighting effect even if it is not lighting effect.
The slider you see below uses light and 100% copy of the real object:
The standard search button, radio button, check marks and drop downs here can be useful in web and mobile devices both:
Push Buttons and Different Skeuomorphic Effects:
Please note how changing the perspective and texture of this button makes it very unique. The emotional effect on user is so powerful. It is very tempting to push it and see what happens next.
The push effect in this design results in opening a small door. Very creative design.
When a visual design reminds us of an act or gesture that we are used to it in real life, it facilitates the action and also save explanation for the act.
The emotional result and temptation of tearing off this ticket is much more effective than using simple “BUY NOW’ button.
Another great example of emotional skeuomorphic design. I am sure you feel the elasticity of these buttons. Designer uses our touch and feel of texture memory very effectively and encourage users to push.
Big and Large
These two buttons design are good examples for placing large and big buttons either for mobile or web. A simple gradient and shadow design is not a new design but still effective.
Floating on a blurry background pushes the buttons to the foreground and the first visual level.
Big and simple design with the white background and nice shadow can be used in any clean design:
Large simple “Add to Cart” buttons for mobile and web :
Conclusion:
If designers use skeuomorphic design correctly, it can be very helpful for engaging engaging emotional and habitual memories in users interaction with the site.
It is obvious this is not the only way for a successful button deign, there are other abstract and non-skeuomorphic approaches that are being used with impressive result.
We will talk about these designs in future posts.
Wow, thank you for linking to my buttons and for this great list, I really like the “on/off” buttons and will take a look at the PSD
simply creative and well-designed mobile buttons.