{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Web design by its very nature continues to evolve, as it must, to make the most of modern browsers and the likes of HTML5, CSS3 and JQuery, and to provide a wonderful user experience for tablet and smartphone owners.

Nowadays there is plenty of opportunity to stand out from the crowd, by being ahead of the curve, or by embracing new techniques that can help you to improve the performance of your website.

So I thought I’d round up some of the more recent trends in experiential web design. I say ‘experiential’ because I’m less interested in seeing whether drop shadows have made a comeback. 

The focus of this article is primarily about the aspects of web design that directly affect the user experience, rather than particular stylistic trends to do with the look and feel.

Great designers understand how to design for user interaction, and how to encourage new user behaviours and habits. World-class designers introduce emotion and have fun along the way. 

Some of these trends aren’t just-out-of-the-oven new, but they’re in here because they’ve become adopted by the mainstream. I have included other design features because they rock, and I’d like to see them on more websites.

It’s worth pointing out that user experience professionals are on the fence about some of these things. Do leave a comment if you feel strongly, one way or another, and be sure to let me know what I’ve missed.

Device agnostic

Let’s get the obvious one out of the way first. There is still much talk about responsive vs adaptive design, and which is the best route to take, so that the user experience is wonderful regardless of which device is being used by your visitors. A good thing.

Sticky navigation / content

For example, navigation that remains in the same fixed position as you scroll down the page. Our social sharing buttons do this, on the left of this post. So does Fab's 'sale ends' strip.

A lot of major e-commerce sites have introduced a sticky 'promo strip', which is an effective way of driving sales.

Publishers are increasingly pinning content to the header and footer of the visible page, which may be a step too far. USA Today provides one example of this page narrowing technique

Encouraging the swipe

These are design features created with touchscreen devices in mind. For example, see the arrows in the category slider on the BBC homepage.

iPhone-esque numbered notifications

Those little numbers we’re all familiar with, which alert us to new happenings. For example, at Quora: 

Pinterest-style grid layouts

See Pinterest, obviously. And Etsy. And eBay. And Lady Gaga, for that matter.

Non-animated animation

Select ‘Scroll Drive’ on the VW Beetle website and then hold down the arrow key to scroll.

Inline form validation / auto-saving

Most web forms still don’t employ inline validation but it’s something that will boost form completion rates, and which we’ll see a lot more of in the future. Show a little green tick icon (or similar) when all is ok. Or a red cross if things go awry. There’s a great related article on Smashing Magazine that’s worth a read, and which includes this example, from Twitter.

Persuasive content

Expedia does this well, by conveying a sense of urgency alongside social proof (assuming these numbers are accurate!). 

We also see this on any number of delivery countdowns, such as on Amazon ("Order within 36 min").

Nano emotion

How I love the White Stuff’s basket. It looks sad, until you put something in it. If you like this then check out my post on 16 examples of attention to detail in web design.

Superfast sign up

Connect with Facebook / Twitter. Svpply does a good job of this…

 

There should always be an email option. Klout is a sinner in this respect…

Infinite scroll

Why paginate when you can just keep delivering the goods? For example, Pinterest, or Twitter Search. That said, I sometimes prefer to work my way through pages, so perhaps there should be the option to turn this off.

Storytelling

For example, websites where the design is anchored around the story. I wrote about a bunch of scrolling websites that do precisely this

Dropdown mega menus

Now commonly found on most major e-commerce sites, dropdowns and mega menus are useful navigation aids and help users to understanding the scope of a website. For example, ASOS.

Hovercards

Scroll over to reveal new content in a little popup. For example, LinkedIn:

 

Also used by O2’s to help people explore tariff options:

 

Here’s a nice plug in that you can use to implement hovercards

Single page, single idea websites

Increasingly popular in agencyland, such as this example from Flip.

One-page sites are also being used by brands, as microsites based around a campaign, or a simple idea. For example, check out this lovely ‘job ad’ from Penguin

Fun meets useful

Lighten the tone, do something random, especially if it is useful. Note how Photojojo encourages people to scroll via a little reverse psychology. Go on, pull that lever!

Auto-complete and suggested search

Google Suggest meets e-commerce. Great for UX, and for merchandisers.

For example, start typing in Apple’s search tool and this happens…

Counters and transparency

Lots of websites encourage the user to vote / like / favourite things. Behance takes it a step further by also revealing how many people have seen a page. This is the stuff of nightmares for the world’s sketchier publishers. 

Branded text highlighting

I’ve seen this on a few sites. Select some text at Techcrunch and it will be highlighted in green, representing the brand’s colours. Simple.

Micro animations

Check out what happens when you hover over a link at Webdesigner Depot.

Phew. Now it's over to you. What trends have caught your eye lately? What design features would you like to see more of?

Chris Lake

Published 31 October, 2012 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (23)

Comment
No-profile-pic
Save or Cancel
Gemma Holloway

Gemma Holloway, Digital Marketing Executive at Koozai

With regards to sticky navigation/content, I personally feel this can be a useful development if implemented correctly. For example buttons which you require on a frequent basis, or those (such as social sharing buttons) which are great for conscience.

However, I too have suffered from the extensive page narrowing implemented by some brands. It can be rather irritating, particularly when images or full blocks of text require scrolling to be viewed completely. The view it simulates reminds me of when someone has accidentally downloaded every toolbar they possiblY can - A pet hate of mine!

almost 4 years ago

Dean Marsden

Dean Marsden, Digital Marketing Executive at Koozai Ltd

Great examples Chris. I feel there is so much innovation in website design at the moment and little things are helping drive much better interaction and conversions.

Every website designer should gain experience from these design features and more importantly measure the results.

almost 4 years ago

Julian Brewer

Julian Brewer, Head of Commercial, Digital at Barclays

some excellent examples and it's great to see many of these are commerce orientated

almost 4 years ago

Avatar-blank-50x50

Matt Roberts, CEO & Founder at Linkdex.com

Really great sum up of various techniques, definitely generated some new ideas for future site persuasion optimization enhancements!

almost 4 years ago

Carl Marsh

Carl Marsh, Director at ICEGRIPPER

Great examples - offers a brilliant menu for smaller e-commerce co's to pick from and introduce over time, in order to continually evolve their site. Bigger problem is finding a web design/build co. who can do these things without costing the earth...

almost 4 years ago

Avatar-blank-50x50

Graham Dell

Isn't the purpose of Klout to measure influence in social media circles? Logging in with an email address would be a needless extra step if you have to tie your account to one either Twitter or Facebook once you've logged in.

almost 4 years ago

Avatar-blank-50x50

Depesh Mandalia, Head of Digital Marketing at Lost My Name

These are all great and certainly could add value to the UX and your brand. As always, handle with care! Some of the best ideas fall flat because it doesn't address a business issue and instead creates 'fluff' which in turn doesn't translate into sales/leads.

Testing these is the most obvious thing to highlight but also ensure you have the right measurement framework in place wherever you land your next fancy widget.

And don't forget, in many cases, you ARE NOT your customer so don't fall for the cute and cuddly feature because it pleases your and your team's gaze!

That said, from an abstract viewpoint, I love things which create emotion and help connect you with the brand, like the little upset bag icon or the do not pull lever - love it!

almost 4 years ago

Avatar-blank-50x50

Sakshi

Hi Chris,
Excellent post!
Good content with some great research. Love the examples that you have mentioned in your post.
Thanks,
Sakshi.

almost 4 years ago

Avatar-blank-50x50

Kristy Franklin

Web design trends are the one we love. I think most of us agree that when it comes to websites, design matters! You have provided great examples.Its backbone to our post. Just liked it a lot.

almost 4 years ago

Avatar-blank-50x50

Darcy Hubbert

These are cool and awesome web designs! Simple yet ready to standout! I love the clean look of these crafts! Thanks for sharing this awesome ideas!

almost 4 years ago

Avatar-blank-50x50

Viv George

People always argue about the number 1 factor in quality Web Design. I think the web developers should follow the fundamental things while designing a website.

almost 4 years ago

Avatar-blank-50x50

NDFletcher

Your site uses Captcha which is really annoying. I'm ancient in Internet years, but Captcha is a dinosaur. I love your site except for this.

ignorantly lvempor

almost 4 years ago

Avatar-blank-50x50

Yen Miller

Having knowledge when it comes to the latest web design trends are very important for a web designer. It will be of great help when working with new clients.

almost 4 years ago

Avatar-blank-50x50

Joy Edwards

Yes, good examples for the designer, article given in smashing magazine with the information that Why Web Form Usability and the Six Components of Web Forms is really very remarkable.

almost 4 years ago

Avatar-blank-50x50

Mark Perrigon

I had never noticed the Micro animations on links at webdesignerdepot. They still don't work in IE.

almost 4 years ago

Avatar-blank-50x50

chris sutherland

This is a fantastic collection of cutting edge techniques. Thanks for this.

almost 4 years ago

Avatar-blank-50x50

Web Designer India

Hi, what a great web blog. I usually spend hours on the net reading blogs on various subjects.The design is one of the most important characteristics of a website.

almost 4 years ago

Avatar-blank-50x50

Web Designer India

Hi, what a great web blog. I usually spend hours on the net reading blogs on various subjects.The design is one of the most important characteristics of a website.

almost 4 years ago

Avatar-blank-50x50

thomas

Gr8 List! The tutsplus site is a tremendous site ever made for web designers and graphic designers

almost 4 years ago

Avatar-blank-50x50

sara

Design is not just what it looks like and feels like. Design is how it works!!

almost 4 years ago

Avatar-blank-50x50

chris

Thanks for the list, I think the ability to sign in using Twitter or Facebook is great

over 3 years ago

Avatar-blank-50x50

Brad

What you have shared these information is important to apply when creating a website. Thanks for sharing these techniques.

over 3 years ago

Avatar-blank-50x50

psoriasis

Estoy con psoriasis desde hace 2 años y testado todo tipo de
métodos de tratamiento sin apenas exito

over 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.