Applying material design learnings to marketing websites

Material design is a set of visual communication guidelines produced by Google in 2014, intended to create a unified experience across apps on different devices.

Material is bold and intentional, and as the name suggests, uses material as a metaphor, inspired by print, yet with the properties of the web opening up many possibilities.

The guidelines are predominately intended for utility-type web applications, rather than more typical marketing based websites. However there are some good learnings that can be applied to marketing-type websites that improve usability or add value to the user.

As always usability testing should be done to validate the implementation of such features.

Material design has helped standardise the design of many applications and mainly for the better of the end user.

Navigation bars rather than big headers

Traditionally in the past header spaces have included a logo, primary and secondary navigation spaces, and often details such as phone numbers and other utilities (e.g. shopping basket). For many years the trend was to take up a lot of vertical space with these headers. However more recently many websites have started to use navigation that more closely resembles the Material toolbar.

material1.png

The material design app toolbar provides lots of navigation and utility functions without taking up much space

material2.png

Cheltenham racecourse uses 2 compact toolbars instead of a large header space, which provides more space for content in the viewport

The advantage of this approach is that it provides more space for important content. Users have come to your website to explore your content, so prioritising the UI for core content makes sense, particularly for marketing websites.

When the app bar is made 'sticky' it holds to the top of the screen as the user scrolls, also benefiting users by allowing them to quickly re-navigate the website, without scrolling back to the top.

One pattern many websites have started to adopt, used also in material design, is the burger menu and hidden nav side bar.

material3.png

The burger menu and navigation sidebar in Google Inbox

This pattern makes sense on mobile viewports where screen estate is limited, but on wider viewports there is ample space in the bar to display navigation options. Hiding navigation options is risky, particularly on marketing websites where users need to quickly scan options.

A well optimised search bar

The search bar has been very well considered in material design. Many marketing websites still fail to provide even adequate usability in search, let alone best practice. When reviewing our clients' web analytics, we often find website visitors who use search will convert at a higher rate. This is often due to the level of intent a 'searcher' rather than a 'browser' has. Poor search functions are costing a lot of marketing websites significant revenue.

The material search bar provides historical options on focus and then auto-suggestions on key up as the user types. This greatly improves usability for users and gets them to search results quicker, reducing error rate of keywords without results.

material4.png material5.png

Material search provides historical options on keyboard focus and suggestions on key up

Hiding the search bar behind an icon in the navigation area also means it can be accessed easily without taking up space.

material6.png

The easily recognisable search icon can be clicked to start a search

Marketing websites should strongly consider following the material interaction guidelines for search bars.

Custom UI controls

Native browser controls are not always well optimised for the full range of devices that users will access your marketing website on. Touch-friendly controls improve usability and material design has considered most major controls from a touch perspective.

material7.png

Material checkboxes have been considered for a full range of user interactions

From a development perspective it's more effort to bespoke custom UI controls. But there are strong benefits to the user, particularly on tablet and mobile. Care still needs to be taken in designing custom controls in that they should still closely resemble their native form. This can be validated with usability testing.

material8.png

Material text fields may be risky in website contexts as they don't resemble standard text fields and should be tested

The other advantage of building custom controls is that it maintains a level of consistency when users access your website on different devices. This can be important from a brand perspective for your target audience, and it also means users have less re-familiarisation transitioning between devices.

Floating action buttons

In material design the most important action of the application is permanently displayed bottom-right as a floating action button. This seems to work very well for a lot of Google apps, as it gives users rapid access to the most important call-to-action. 

material9.png

Floating action buttons give rapid access to core call-to-actions

Context is key for marketing websites. An ecommerce product listings page is unlikely to be appropriate as there are multiple primary calls-to-action. However a long form landing page trying to get users to sign up for something could well benefit from a permanent "Sign Up" button floating somewhere in the corner of the screen.

This is definitely a less tried-and-tested technique in the context of marketing websites, so experimentation should again be validated with testing.

Final thoughts

Material design has helped standardise the design of many applications and mainly for the better of the end user. Consider how elements from the guidelines can be used to optimise your marketing website. However remember to test and validate for best results.

Thank you for your comment. It has been submitted for approval.

Comment Again?

Leave a comment

Please enter your name.
Sorry, this email address is not valid.
Please enter your comment.

Course basket x

Course

Price per place

Add another courseCheckout

Pay now by credit card or later by invoice (invoice payments only possible if all courses are 3+ weeks in advance)