14 Website trends you need to watch
Web design has come a very long way since the the advent of the “worldwide web.” With the recent rapid growth of mobile, responsive design has quickly become a necessity. This shift has had significant implications on how websites are designed. Techniques and trends such as flat design and the full screen form are clearly inspired by mobile design thinking. In addition, marketers are now thinking about the end user first, allowing for smart and effective UX to finally take centre stage. And, while it may be true that websites are starting to look very similar and becoming highly templatted, the overall experience is getting smarter. This is due, in large part, to some key trends that have evolved out of what is a maturing web design marketplace.
1. The Long Scroll
When landing on a page, the first thing a user wants to do is scroll to look at the range of content, it has become almost a reflex. Because we are now so accustomed to navigating the mobile web space, users are now very comfortable with the long scroll. Heatmap service provider ClickTale analysed almost 100,000 page views. The results showed that people used the scrollbar on 76% of the pages, with 22% being scrolled all the way to the bottom regardless of the length of the page. The long scroll is easier and more intuitive than the multi-page content model that requires multiple clicks and continued interaction with the main and / or sub navigation. Therefore, this is slowly becoming the popular choice for the more savvy web designers.
2. There isn’t a Fold
Thankfully we have now successfully evolved past needing to place our key content “above the fold.” As stated above, users scroll intuitively, so if it lives “below the fold,” the user will find it just as easily. Usability testing and research has, at this point, debunked the “fold” myth. Chartbeat, a data analytics provider, analysed data from 2 billion visits and found that “66% of attention on a normal media page is spent below the fold“. It’s a website afterall, made of javascript, CSS, and HTML, so it actually doesn’t fold.
3. The Rise of Cards
Lately we are seeing more and more websites feature the card layout format. This format is reminiscent of the Pinterest platform, showcasing content features separately in a tile-like form. This format is particularly useful when catering to multiple potential user pathways and site entry points. The result is a more personalised user experience where the user interacts only with the content that they select. The popularity of this format is also largely driven by responsive design as presenting bite size content tiles renders better given multi-screen formats. Some say that cards is the future of web design, we are likely to agree. In fact, we like cards so much that we featured it on our own site!
4. Flat Design
As noted earlier, flat design is a response to the emergence of responsive design as the current gold standard. A flatter design image will render better in the mobile space than one with bevels or drop shadows as there is less graphic information to translate over. It will also load faster since it weighs less, which will improve user experience and potentially search rank. Google’s material design has added a “new dimension” to flat design. It allows for the incorporation of light and shadows giving flat design more depth without adding the weight. While “flat design” in general may not sound like such a good thing, in the world of the web, it will continue to be a preferred style.
5. Form vs. Function
When we talk about web design, it used to be that we were referring primarily to how the site looks. Finally, how the site functions is weighing into the design discussion as being equally important. The mark of a successful website is in it’s ability to provide a positive brand and / or service experience. While aesthetics do play a key role in that, accessibility plays an even larger one. We need to ensure that the user is able to successfully navigate to the information they are seeking, especially in an eCommerce environment. If the user is looking to make a purchase, and the pathway is somehow unclear, they may abandon and move on to another site / product causing a loss of a sale. If the user path is clear, conversion and / or favourable brand interactions will follow.
6. Custom Video
Ok, so there is nothing new about video, but the evolution of this medium is reflected in how often it is being used currently. Video is the new text copy. Users now opt for video over text when given the choice. A well-executed “how to use” video can be invaluable in creating customer engagement and even conversion. SingleGrain collated a study which reveals that before reading any text, 60% of site visitors will watch a video if available. Landing pages with video lead to 800% more conversion. In fact, 88% of visitors stay longer on a site with prominent video displayed. Video content can also live by itself on video sites (e.g. YouTube) and be distributed separately through social platforms. So, if you don’t have a plan for video content, get one. Otherwise you may be sacrificing key customer engagement.
7. Meaningful Use of Data
I am sure you have heard this phrase spoken many times before. It seems as though everyone is trying to figure out how to use the data they are collecting in a meaningful way. Then, of course, there are still those of us who are failing to adequately collect this data in the first place. You don’t need me to tell you that this is a huge missed opportunity. The best thing about the digital medium is your ability to track, understand, and optimise against user behaviours. With a thorough measurement plan in place, you have the ability to understand the kind of content your customer is consuming, on what device, where they came from, how long they stay, and even where they go next. These insights in turn will help fuel your ongoing digital strategy and even the larger marketing strategy. So, if you are not capturing this, start! It is an essential first step to a smarter, more customer-centric digital strategy.
8. Whitespace
I am sure you have noticed that more and more websites are adopting use of what is known as “whitespace” or negative space in their designs. While it is essentially negative / unoccupied space, it plays a very important role in the design. This space acts as a grid to help guide users toward the featured content, providing easier page scan-ability. It also creates a sense of cleanliness and sophistication that will enhance the overall user experience and design aesthetic. Whitespace will allow key graphic elements to ‘pop’, thereby affording artistic typography, iconography, photography, and animations more impact. Without the equitable use of whitespace in web design, the result may seem cluttered or overwhelming to the user.
9. Fixed Navigation
Fixed or “sticky” navigation bars allow the main navigation to appear at top of the view screen regardless of how far down the page the user scrolls. It is always present. Given the popularity of the long scroll and the sometimes awkwardness of the side navigation, we will see the “sticky navigation” becoming a mainstay within modern user experience design.
10. Ghost Navigation
On the opposite side of the spectrum, we are seeing ghost navigation has also becoming very popular as well. Ghost navigation is the absence of the fixed main navigation, hiding under icons such as hamburger menus. Hamburger menus utilised within mobile sites and apps are necessary given the limited screen space. But lately we are seeing this trend emerge within the desktop space as well. Removing the sometimes bulky top navigation certainly will result in a cleaner and less cluttered landing page experience, which is why some web designers may be attracted to ghost navigation as an option. But, from a user experience perspective, the result may be reduced discoverability. This can be especially harmful in an eCommerce environment where discoverability is crucial. The bottom line: tread carefully in implementing this trend.
11. The Full Screen Form
Forms such as registration, search and log-ins are currently being developed in full screen format. Again, as noted above, this shift is a direct result of the proliferation of responsive design. The user is able to simply tap on a form in their mobile device and the form will extend across the screen allowing for easier accessibility in this platform. Likewise, the interface will be similar in desktop and tablets to allow for consistency of design across platforms.
12. Hero Image
Lately it feels like almost every modern site design features a large striking image or design as the entry point into the site. This is known as the hero image, and It is a currently a very popular way to make an immediate impression on the user when they land on your website. Many times the hero image will be of a person which allows for the immediate human to human connection. Others will feature powerful, aesthetic graphics to draw the user in. The rotating image gallery is another popular trend for good reason. It allows for the site to showcase multiple content features within the landing experience. With the hero image, you are able to make a bold statement, grabbing the user’s attention at the most crucial moment of their site navigation journey, at the very beginning.
13. Iconography
Iconography is everywhere. We see icons used in main navigation (hamburger menu), in-page navigation to allow users to self-select, call to actions such as social sharing, etc. Icons serve as an important visual aid in communicating information graphically. Clever use of iconography can successfully steer users toward where you want them to go. In scanning a text or content heavy page, icons will stand out above the other elements on the page. Use of iconography lends itself to a clean and modern design, allowing for equitable whitespace and acting as simple guideposts for user navigation.
14. Micro-Interactions
As web content consumers, we engage with micro-interactions constantly, although most of them are so intuitive we may not even take notice. And that is the beauty of these interactions, they act as symbols for successful interactions while not detracting from the experience. These interactions include liking a YouTube video and the icon turning blue, sending an email on your mobile phone and hearing the swish sound, or checking a registration form box and seeing the check appear. These simple and subtle interactions allow for an immediate user “reward” and help direct future behaviours.