On January 10th 2015, the iPhone celebrated its 8th birthday. Although there’s little doubt about the impact the iPhone and its fellow smartphones have had, we’ve recently reached an important milestone: In the late part of 2014 smartphone internet traffic overtook desktop internet traffic for the first time and this growth is set to continue. Now more than ever, putting mobile interaction first is vital for any website to survive.
Users interacting with smaller touch enabled devices mean new challenges for UI designers and websites are evolving to reflect this. In this post I’ll outline 4 web design trends being caused by the move to mobile devices.
Starbucks.co.uk, zoomed in at 100%, 150% and 200% respectively.
1: Responsive design
Thanks to smartphones, phablets, tablets, laptops, desktops and smart tvs, users are now browsing the web on more devices than ever and creating separate websites for different device types is becoming impractical. Responsive design fixes this by having a single webpage that adjusts depending on the size of the screen it is being viewed on. There are many positives to this, it makes full use of the screen regardless of its size, it doesn’t compromise functionality when viewing on smaller devices, it gives the user a much more cohesive experience when they switch devices and more powerful smartphones coupled with 4G internet mean phones are capable of handling desktop quality sites. Admittedly not every website is using this yet (including this one) but considering it’s ever growing popularity, responsive design is quickly becoming the industry standard.
2: Card based design
Card based interfaces such as those used by Pinterest are becoming increasingly common. They work by presenting small boxes filled with bite size chunks of content allowing the user to overview large quantities of information in a quick and visually appealing way. Their best strength however is that they can be tailored to the needs of the individual user. Google Now provides a good example of how this works, by using information gathered from the user such as location and search history it can provide relevant information such as articles the user might like, and even transport links to work as well as local attractions they could visit. Card based designs work well with responsive websites as they can be reshuffled and resized so that they always fit the screen they are being viewed on.
3: The side menu logo appearing on desktop sites
The side menu logo (or as many call it the hamburger menu) has been synonymous with mobile sites for the last few years, however anyone who has been to Slate, Upworthy or Time.com on a desktop recently may have noticed it’s popping up on full size sites as well. Yet again this is partly related to responsive design, if you’re going to need a side menu when a responsive site is on a small display, you may as well keep it on large display. This trend is a bit more controversial though. On one hand removing a permanent menu allows for a cleaner interface and more content onscreen. On the other hand a cleaner interface does not always mean a more usable one; removing an onscreen menu decreases discoverability so users may not be aware of all a site has to offer.
4. Scroll centric browsing
Scrolling comes naturally when browsing on touch devices as a thumb swipe is far less fiddly than having to press a next button and waiting for a new page to load. There’s also the advantage that scrolling doesn’t break the users flow meaning they stay engaged for longer. Web designs are starting to reflect this; websites are putting more content onto 1 page instead of many and infinite scrolling is now commonplace on sites such as Tumblr and Twitter.
Although these trends are likely to become increasingly popular throughout 2015, I’d advise against applying any of these trends for the sake of it as they may not work in the context of your site. For example, infinite scrolling can be helpful for social media however it’s been proven to actually decrease sales on e-commerce sites. The best way to be sure that a feature is right for you is to perform in depth user testing to determine if it works with your user base.
Posted by PDD
Languages spoken: Global.
The last thing that inspired me: Design and Innovation.
My dream project: A project that makes a difference in the world.
My obsession: Develop successful, award-winning and world-first products and experiences.