The Top 5 Website UX Trends of 2012

A look at some of the best user experience developments on the web this year.

Article No :928 | December 28, 2012 | by Catalyst Group

User interface techniques continued to evolve in 2012, often blurring the lines between design, usability, and technology in positive ways to create an overall experience that has been both useful and pleasurable.

Infinite scrolling, for example, is a technological achievement that also helps the user by enabling a more seamless experience. Similarly, advances in Web typography have an aesthetic dimension but also represent a movement toward greater clarity of communication.

1. Single-Page Sites

Single-page websites are everywhere. Big background images, rich illustrations, and animation techniques are being used to tell stories, entertain, and get a message across loud and clear. Free of the limitations of traditional website architecture, creative and beautiful one-pagers are flourishing. Two of our favorite single-page sites are Jess and Russ and Ben the Bodyguard. (Several other nice examples can be found here.) As with any trend, people want to emulate it, even if it's not the appropriate solution. This can easily lead to homogenization of style and, in some cases, poor execution. When done correctly, however, the single page website works very well.

2. Infinite Scrolling

Infinite scrolling is familiar to everyone, even if they don't realize it. It works best for unstructured information; live feed style, sorted by time. Sites with lots of images—like Google images or Pinterest—make excellent use of this technique, but thoughtful implementation is important to prevent user frustration. Lookbook is another good example. By pairing infinite scroll with a floating right column and a "back to top" button, the site allows users to consume endlessly and still get to other parts of the site easily. Infinite scroll is not a "one size fits all" solution—there are plenty of complex factors to consider, and pagination may still be the best technique for search results, large lists, and e-commerce.

3. Persistent Top Navigation or “Sticky Nav”

Persistent menus are ideal for complex sites, long scrolling pages, or applications with toolbar functionality. Persistent menus can be distracting, so it's best to keep them slim and unobtrusive. A great example is New Zealand's tourism website, which features a navigation that collapses down to just the main sections, leaving plenty of real estate for the rest of the page. The Gmail Web interface also does it right by giving users a persistent toolbar with the most used actions.

4. The Death of Web 2.0 Aesthetics

We've noticed a return to basics in visual design trends. A flat, clean, minimalist aesthetic with a focus on typography and information hierarchy has replaced the big, bright, juicy days of Web 2.0. A lot of websites and apps are even ditching graphical background images for pure CSS styles in order ensure a compelling experience across devices and resolutions. Our favorite recent visual designs include Basecamp, Dropbox, and the Smashing Magazine redesign.

5. Typography Returns

Thanks to maturing font technologies and improved font rendering on most browsers and devices, designers have more typefaces to choose from and more control of their type. There is an increased awareness of the importance of content, and with it, using typography to effectively communicate a message. With mobile, responsive design, and more retina displays, typography will continue to be an important focus on the Web in the next few years. One of our favorite examples is The New Yorker, which uses a standard Web font (Times New Roman) for body copy, beautifully paired with display fonts for headings and navigation (Irvin, Neutra).

In 2013, we’ll be looking for more examples of sites that improve user experience by judiciously balancing beauty, utility, and technology.

Comments

Some IT agencies still try to keep up with UI, maintaining user friendliness. Only they charge a lot. and for what? For keeping it simple?! Check these guys seclgroup.com. pretty simple but expensive..

I think one has to be a little careful about the Jess and Russ site and using it as an example as 1) it was a semi-personal wedding invite! (The reason they didn't hire an editor was because they did it themselves) 2) it was an example of an illustrator and a web developer pushing the limits of the medium. Inspiring? Yes. A trend? Not quite yet….

Infinite scrolling is only useful when there's nothing at the bottom of the page that the user might want use. It's obvious to say but links that would otherwise be in the page footer (eg, jobs, terms of use) should be at the top, maybe under the main nav, if you're going to use infinite scrolling. Or you could make a persistent footer. In any case the scrolling shouldn't be repeatedly pushing static information/links out of view.

If you are interested in some of the early work on Infinite Scrolling, check out Aza Raskin's "Don't Make Me Click" talk, from 2008: http://www.youtube.com/watch?v=EuELwq2ThJE where he shows Google employees how to add infinite scrolling to search results. He acknowledges it is a really old idea, just applied with new technologies. He called it "Infinite History" because the semantic meaning is "going back in time". I heard Aza talk about this at the IXDA 2008 conference - http://interaction08.ixda.org/Aza_Raskin.php

Nice to see how far this idea has been implemented in the 4 years since.

The biggest trend I have noticed is rampant over-engineering that dramatically reduces usability and readability. The sites you show here are not trends, they are rare exceptions to the rule. The rule is the Web has become unreadable.

I actually used to be a Web designer, but now I don't even use the Web. It is like trying to drink through a broken straw.

While good UX (User eXperience) does not always translate into higher conversion rates or revenue per visit (RPV), these trends point to excellent hypotheses for what MIGHT increase the performance of your site.

1. Single Page Sites: Simplicity is often a great way to increase conversion rates
2. Infinite scrolling: Consider this for category pages. I haven't tested this yet.
3. Persistent top nav: I am very curious to see if this increases CR and RPV. Let me know if you've tested it.
4. Web 2.0 Aesthetics: I hope this includes the rotating banners at the top of so many sites.
5. Typography Returns: Your message is the most important part of your conversion optimization plan. Typography can help... or hurt

Nice article with good references. Unfortunately Ben the Bodyguard has not been upgraded for OS 6 so it was a waste of $4 to download. Jen and Russ have a beautiful site but could use an editor. Way too many typos (hire a proof reader).