The web as a whole is constantly evolving and alongside this comes fantastic innovations in how we display content to the user. Some companies are really leading the way when it comes to innovative user interfaces, so in this blog post I will be highlighting a selection of the trends that these companies are pushing forward and how you can recreate them yourself on your own site.
Whenever I think of innovative UI concepts, my first place to look is always Apple. They tend to have new product releases a couple of times a year, and to showcase these new products they always have a fun, creative webpage to show the primary features. At the time of writing this post, their brand new, highlighted product is the iPad Air 5. This webpage really has the wow-factor, and this is predominantly down to one big feature of the User Interface – scroll-based animations.
Scroll-based animations really make the user feel like they are a part of the ‘show’ that is happening before them, as whenever they decide to scroll their window, the next animation is triggered. This has many benefits, such as the fact that the user can then browse the page at their own pace, rather than watching it in video format at a set pace. These scroll-based triggers also allow for a lot more creativity when it comes to designing a web page.
You may notice that Apple plays a lot with depth on this page, giving the impression that some of the elements are almost popping out of the screen, as well as showing some of their products fading off into the distance.
The second trend that I’m noticing a lot more often on sites of development libraries/plugins, are autoplay video demonstrations. One of the sites that I have seen it on (and another great website for forward-thinking design inspiration) is Stripe.
As well as their target audience being possibly less-technical decision makers, you can tell that they are also trying to sell their payments platform to developers, as they have a great autoplaying video demonstration of integrating their service into a project, I am a big fan of this, as a way of providing information in a concise way, as it immediately draws the user’s attention, without needing any extra effort from the user (for instance a click).
One thing to be aware of with this approach is accessibility. Text content embedded within videos can not be accessed with a screen reader, so you need to make sure that any essential embedded content within the video, is also within the HTML on the page. Stripe deal with this in an interesting way. Instead of this content living within a video player, they have actually integrated the content into a <div> container on the page, with everything inside being animated HTML elements.
If the autoplay video technique is something you would like to add to your project (with accessibility considerations in mind), there are some great libraries out there to support you like VideoJS. Alternatively, if you would like to give it a go yourself like Stripe do, then you have tools like TypeIt to animate any text on the page, as if it were being typed out.
The third and final trend that I have been seeing a lot is scroll-snapping. Scroll-snapping uses the movement of a user scrolling through a page, to ‘snap’ the user’s window to certain content points of a page, rather than the smooth scrolling experience you would normally expect. You can think of it as being like a full-screen vertical carousel.
A company that seems to have adopted this trend and executed it to great effect is Tesla. They have an interesting way of displaying each of the products on their homepage by snapping the user’s viewport to a full-screen image of each of the products, as the user scrolls through the page.
All in all, I think this is a very exciting time to be designing and developing websites, as the capabilities of what you can now achieve are pretty much endless. We can see that the majority of the trends mentioned include animation, so hopefully in the future we’ll have a lot less reliance one external libraries to achieve these and a lot more functionality will be built into the native languages. With the evolution of web technologies comes design innovation and generally more fun across the web.