{"id":1120,"date":"2023-01-26T21:01:06","date_gmt":"2023-01-26T21:01:06","guid":{"rendered":"https:\/\/www.simon-li.com\/design-and-code\/?p=1120"},"modified":"2023-12-03T02:30:49","modified_gmt":"2023-12-03T02:30:49","slug":"inspired-by-nature","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/inspired-by-nature\/","title":{"rendered":"How Inspiration from Nature Makes for Better Designs"},"content":{"rendered":"\n

Many of us love Apple\u2019s products because they are delightful <\/strong>to use. If we observe a bit carefully, it\u2019s not hard to see how their designers think: They are constantly inspired by nature, which informs not just <\/strong>the visuals (i.e. skeuomorphism), but also interactions.<\/p>\n\n\n\n\n\n\n\n

When you enter a wrong passcode on your iPhone\u2019s lock screen, the dots shake. No words, no labels, and yet you know what the system is trying to tell you. This is because this shaking animation is just like a human being shaking his head, and you get it instantly.<\/p>\n\n\n

\n
\"\"\/
Credit: https:\/\/hackernoon.com\/introducing-deadringer-an-iphone-x-lockscreen-replica-9a3e613c833c<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

You might not consciously think about it, but the tapering of list items on iOS\u2019 date picker actually tells your brain that this is similar to a wheel, and it creates an affordance for you to scroll, just like you would rotate a wheel in the real world.<\/p>\n\n\n

\n
\"\"\/
Credit: https:\/\/blog.mobiscroll.com\/date-time-dial-scroller-keypad\/<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

This <\/strong>vibration animation after you long-press the icons on the iOS home screen isn\u2019t created just for fun. It tells you implicitly that the icons are no longer fixed and can now be dragged and moved, just like how things are in nature: if they are not fixed, they are not stable and hence movable<\/strong>.<\/p>\n\n\n

\n
\"\"\/
Vibrating icons indicate that they can be moved around. Credit: https:\/\/www.macworld.com\/article\/226155\/how-to-rearrange-app-icons-on-your-iphone.html<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

Similarly, you can swipe right to get rid of a notification banner <\/strong>on iOS or iPadOS, just like how you get rid of stuff in nature<\/strong>. In Safari, you can peek through the glass effect of the toolbar and see a little bit of the webpage content behind. When the webpage is scrolled, you can see the scrolling happening in real time behind the toolbar, reflecting the real world physics<\/strong>.<\/p>\n\n\n

\n
\"\"\/
Swipe to get rid of a notification banner. Credit: https:\/\/www.tapsmart.com\/tips-and-tricks\/ios-10-hide-pop-banner-notifications-ipad\/<\/a><\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"\/
Glass effect in toolbar inside Safari<\/figcaption><\/figure>\n<\/div>\n\n\n

The advantage of designing according to nature is that people are already familiar with how things work in their environment <\/strong>and don\u2019t need to spend time learning a new interaction. Bringing something analog into the digital world also gives users pleasant surprises, thus creating delightful moments in the product experience.<\/p>\n\n\n\n

Let\u2019s look at two more examples inside MacOS. In the previous version of System Preferences, when users tried to locate a setting by typing a keyword into the search bar, results were spotlighted, just like spotlights in the real world reveal the objects you\u2019re searching for.<\/p>\n\n\n

\n
\"\"\/
Credit: https:\/\/www.intego.com\/mac-security-blog\/get-to-know-your-macs-system-preferences\/<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

And in the old version of MacOS where the dashboard still existed, when a user placed a widget on it, there would be this nice ripple effect emanating from the widget itself. This mirrors the natural feedback in the physical world after an object hits the surface of water. It\u2019s small details like this that make the experience delightful. It\u2019s small details like this that make the experience delightful.<\/p>\n\n\n

\n
\"\"\/
Credit: https:\/\/plejunkie.amebaownd.com\/posts\/45487231<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n

So next time when you\u2019re designing the interactions of your product, what inspiration can you draw from nature to make them a bit more intuitive and fun<\/strong>?<\/p>\n","protected":false},"excerpt":{"rendered":"

Many of us love Apple\u2019s products because they are delightful to use. If we observe a bit carefully, it\u2019s not hard to see how their designers think: They are constantly inspired by nature, which informs not just the visuals (i.e. skeuomorphism), but also interactions.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86],"tags":[135,136],"class_list":["post-1120","post","type-post","status-publish","format-standard","hentry","category-interaction-design","tag-apple","tag-ios"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/1120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=1120"}],"version-history":[{"count":11,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/1120\/revisions"}],"predecessor-version":[{"id":1237,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/1120\/revisions\/1237"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=1120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=1120"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=1120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}