5 user experience trends for your website

15:58 Nov 30th - Nathan

“God is in the details” read the 1969 obituary of architect Ludwig Mies van der Rohe. Mies was, and is, a hero to many a designer and his mantra lives on in their work today. Below is a collection of great little details that you can use in your site to help transform a user’s experience from ordinary to unforgettable.

Micro Animations

When you hover over a link on webdesignerdepot.com you get a nice little animation

For a long time the web imitated the pages of the ink and paper publications it evolved from. Understandably, in the beginning designers built on what they knew best; but even in 2012 it seems rare that content led websites are taking full advantage of the power of this interactive medium. Micro animations, when used wisely, can help you leverage that power. Turning a visit to your site into a truly engaging user experience, rather than a bad clone of a magazine.

Examples

 

Story Telling

The Tinke follows you on a journey through all of its features

In the last two years we’ve seen an explosion of linear, one page websites (I like to call them ‘scrolly-downy’ sites) that take the user on a journey through the story of a brand or campaign. Its well-known that stories are a great way to bring about an emotional response from your clients and customers. Mix that with a high level of user participation and its no wonder this style of site has been such a hit with companies across all sectors.

Examples

 

Realtime Stats

Expedia let you know hove many people are viewing the same hotel as you

Think of it as the younger, better looking, more intelligent brother of the hit counters that adorned the footers of every web 1.0 site worth its salt.

This trend seems to have been snapped up by the e-commerce community, especially the online travel agents. Helping convey a sense of urgency around the buy button; in some cases even acting as a kind of peer recommendation platform. Think of it like choosing a restaurant. Do you go and eat in the one with the bored waiter awkwardly rearranging empty chairs and untouched menus, or the one already full of people enjoying their food?

Examples

 

Hovercards

Hovercards let you quickly find out more info on a user

Despite finding these things a little clunky I had to include them. They definitely enhance usability on big networking sites, allowing us to feed our curiosity without the annoyance of a page change. But more to their testament, in the last six months they have been adopted by pretty much all of the major players in the social networking scene ( led by Twitter back in 2010, if my memory serves me correctly ).

Examples

 

Side-swipe Menus

The YouTube, Facebook and Stamped apps all use side swipe menus

Standard website navigation has always been a tricky thing to transfer over to mobile. There is no real guarantee of how much screen you have to play with, you could be dealing with the behemoth that is the Galaxy note 2 or trying to squeeze your site onto this little guy. In fact, about the only thing you are guaranteed is that if you have more the two nav items the traditional method isn’t really going to work.

Up until recently this was resolved by having a single button in the header that opened a drop-down menu containing your nav items. It works, but I’ve always felt it was a bit clunky. More of a hack than a solution made with the mobile platform in mind.

Enter Facebook and their user experience boffins. What is now often referred to as the ‘Facebook side menu’ – and is quickly becoming the de facto design pattern for navigation on mobile – is the idea of sliding the main page of the app to the side to reveal the navigation on a page of its own below. This means the nav always has the most space possible and is always accessible with a single swipe. Genius!

Examples

  • Facebook App – Swipe left or right
  • YouTube App – swipe right
comments powered by Disqus

The Author

Nathan Harrigan

Nathan has many years experience producing web sites and applications. Specialising in front end technologies, he also has a keen interest in information architecture and user experience.

View nathan harrigan's profile on LinkedIn