In our first blog post of this 4 part series we covered one of the original ‘isms’ with Skeuomorphism, and now we’re moving into more modern trends with a look at Interactive design. What is Interactive Design and how can it work for you?
Our main aim as designers is to create something that engages with the audience. As a result, we have minimal time from when a user lands on a site to grab their attention. Under 15 seconds is the average time spent on a site. So how does Interactive design help us achieve this?
Well, first, let us cover what Interactive design is. It is the design of interaction between a user and a product. That sounds pretty broad, but it includes motion, sound and space elements. It might sound similar to UX design and is not far removed. However, UX focuses on how we use a product, whereas interactive design focuses on the experience and interaction of that product and the user.
As designers, we should use interactive design to ease a user's experience and keep it efficient. It's also great for creating a fun and new experience for a user that they will remember and likely want to return.
The best examples of interaction design should either respond to or guide the user's journey using animations, videos or scrolling. Scrolling used to be a big no-no, but it's now more favourable than clicking a 'next' button. As we're all spending more time on our phones, scrolling has become almost second nature meaning we have become accustomed to scrolling to discover content. However, no one will keep scrolling if it's not engaging.
This site is an excellent example of a scrolling interaction.
Scrolling parallax and a good sense of humour keep the user engaged until the end when they add their CTA.
This site uses the scroll to take the user on a journey and explain their product with animations and content that come in as you scroll, making the user feel they are part of the experience. We go from vertical to horizontal scrolling and include clever use of background hover to give it a video game feel.
Other great ways of using interactive design include sights like this:
They are taking the user on a journey using animations and asking them to select multiple options for their unique trainer chosen for them based on their selections.
Another great example is giving the user tips but only when they click around the site:
It’s worth remembering that even subtle interaction design can make a difference, take, for example, this notification design making it feel more urgent and appealing to click just with a bit of animation.
Or these icon-selected states, making the user feel more secure and accomplished with their selection perhaps.
The new trend for interactive design in 2023 is perhaps unsurprisingly 3D interaction which we've already seen a little of on the Nike site. Using 3D renderings gives a website an authentic touch, and it appears to be spreading. Whilst I have mainly argued that an e-commerce site should be kept simple, I can't deny that Gucci's creation of something like this does give the product a far superior feel. Whilst allowing me to see the whole bag in rotation and select different colours, it certainly brings internet shopping into the year 2023, and I stayed on that page for longer than 15 seconds.
This site uses a mix of scrolling and beautiful 3D renders to show off their products that are ironically non-physical products.
This site's use of animation straight off the bat for their logo is clever, changing from an icon-looking speaker to forming the word HALO that appears to vibrate. It then uses a scroll to describe the product and eventually shows off the actual product with a 3D render.
And look, if I am honest, I am not entirely sure what the point of this site is, but I know that I played around with it for far too long, and I love my blob. So there we are. Blobmixer
Blobmixer - fun 3D making site
It’s safe to say interacting with 3D elements is fun, and it is undoubtedly engaging, creating a real fascination from the audience. These elements mixed with interactive design create a feeling of curiosity for the user, and it’s hard to click away in fear you’ll miss something even more exhilarating. And it can be used for good, for instance, on this site which helps a user visualise what their day-to-day actions mean to air pollution.
I am excited about this trend in 3D design and can't wait to see where it goes. As we continue to explore the limitless potential, I can't help but wonder what innovations are on the horizon.
The design world is a fast paced one and there are always new technologies out there but it's always good to know what tools others are using to help them or inspire their work. Our designer Becky shares her current top 5 tools that help or inspire her ✌️.
What is Skeuomorphism and how it's developed?
This blog post is the first in a 4 part blog series in which I will cover design trends from the 80's Skeuomorphism to today's re-emerging Y2K designs. It's always interesting to see how and why some trends stay or don't. And perhaps why some trends drip on through all eras. We'll also look at some truly inspirational work which will hopefully inspire.
What is Claymorphism and how can you create the look?
In this 4 part series, we have previously covered Skeuomorphism and Interactive design, and now we're going to look at another modern trend, another 'ism' Claymorphism. If you've not read this series's two previous blog posts, why not check them out? If not, here's a brief run-through of these trends and how we got here.
