7 user interface design trends you need to know about

facebooktwittergoogle_plusredditpinterestlinkedinmail

If you ever wondered what is the most overlooked aspect of design craft, look no further – it’s user interfaces. Good or bad, user interfaces are everywhere: on websites, on mobile phones, televisions sets, wrist watches, airplanes and washing machines.

Photograph: zastavki

Whenever there is a user, there is user interface. Likewise, whenever there is a frustrated user, there’s usually a case of bad user interface.

As graphic and web designers, our job is not only create good looking stuff – it’s to create stuff that’s actually easy to use and creates minimum user interface friction. In other words, we need to think how people are actually going to use our websites or apps and do our best to make their life easier.

If you think that still involves just a few properly placed buttons and links, think again – some of the highest paying projects on 99designs require solely user interface design, for web or mobile applications. It’s both an art and a science, with very few stars in the arena (Apple being one of them).

To get started, let’s take a look on current trends in user interface design.

1. Minimalism

After years of bells and whistles, user interface design is going back to basics – at least according to some big name companies, including Google and Microsoft to name a few. Glossy icons are replaced by simpler one-color versions or text-based buttons, rich gradients with simple solid color combinations.

Websites: Windows 8 (top), Pinterest (bottom)

For majority of users, this lack of visual detail works astonishingly well – the interface is easy to digest and its elements don’t get in the way of the tasks they’re trying to accomplish.

When to use it: minimalism is a great way to design a web application which focuses on user generated content – if done right, users will rarely complain about it. However, keep in mind that many clients will find this approach too simplistic for their taste, so you might want to check their preferences before starting your project.

2. Skeuomorphism

Skeuomorphic user interface design was first popularized by Apple, and then adopted by many other companies. Basically, this design approach relies on imitating the look and functionality of traditional and familiar objects to make the interface more intuitive. For example, using wooden bookshelf with book covers to represent digital content is a prime example of skeuomorphism at work.

Website: iBooks

There is a battle going on in the user interface design community whether such highly skeuomorphic designs are justified or not.  Some say it’s actually bad for user experience because imitating real-world objects necessarily means imitating the limitations that come with them, while others say this is a good trade-off for the friendliness and familiarity that comes with skeuomorphic designs.

When to use it:  when designing mobile applications, skeuomorphic designs are highly popular and well accepted among the community. In part, due to touch-screen nature of these devices which gives an impression of touching real-world objects.  For web apps and projects, skeuomorphic designs are usually not the best path to take, although some elements can be used to enhance parts of the interface.

3. Laser focus

Laser focused user interface puts visual focus on a single, obvious task to do once a user opens the web application, instead of providing several equally important options. The key benefit of this approach is simplicity – users instantly know what the application is about and what the suggested action is.

03-Laser-focus1

Websites: Google homepage (top), Air B’n’B (bottom)

When to use it:  Laser focusing is a great approach for web applications and projects that have a single, most important function to promote. In most cases, this will be some sort of search or browse function but make sure to discuss this with the client.

4. Context sensitive navigation

Context sensitive navigation came with the rise of dynamic user interfaces and is a great way to declutter your design. Basically, you need to ask yourself a simple question: which navigation elements should be on screen all the time and what can be shown only in certain situations (actions)?

Website: Pinterest

For example, Pinterest shows action buttons only when you hover a pin, as shown on the image above. Gmail shows message action buttons only when you select the message. This way, these applications visually appear much simpler than they really are.

When to use it: context sensitive navigation can be used in almost any project. Carefully target buttons and gadgets that can be hidden until the user performs a certain action, such as hovering a link, selecting an entry and so on.

5. Collapsed content

Another great way to declutter your user interface design is to hide non-essential options and widgets under one link which will expand and collapse on a user’s request.

Websites: Google plus (top), 99designs (bottom)

You can do this even on simple websites – instead of showing a large number of links in the header, consider introducing a “More” button which will display a drop-down menu with links to pages that are not crucial for the user.

When to use it: as with context-sensitive navigation, you can use this technique in virtually all projects. It’s especially helpful with pages that contain lot of interface elements for settings and options – these look most intimidating to end users, so hiding the unnecessary components makes things look much simpler.

6. Content chunking

Content chunking is a technique of presenting a large amount of content in smaller visual chunks, so it’s easier for people to read and mentally digest. For example, splitting this article into several sections with headings and accompanying pictures makes it a lot easier to read compared to long monotonous stream of text.

Website: Apple

It’s important to note that content chunking hasn’t always been around. It emerged during internet era, when people started consuming large amount of information and needed a way to digest it more easily. In a way, it’s a phenomenon which developed spontaneously.

When to use it: ultimately, the usage of this technique is something which ultimately depends on the client. However, you can use it in your design proposal to suggest how the content should look on the website, explaining why it’s beneficial to present it in that particular way.

7. Long pages

Once frowned upon by both clients and designers, long pages which require a lot of scrolling are now all over the web. One explanation is that users are so accustomed to vertical scrolling (assisted by mouse wheel) that it’s actually worse to split the content on separate pages – it requires more effort from users to find it and reach it.

 

Website: Crazy Egg

This works surprisingly well when combined with previous technique of content chunking – users can quickly skim through content and find an area of interest. Some quite successful and famous companies — including Apple — use very long pages to present their products, with a high degree of success.

When to use it:  Long pages work very well when you are presenting product features and benefits or other similar content. If the content isn’t directly related (i.e. a list of recipes), you should split it on separate pages.

Conclusion

When designing web or mobile pages and applications, good user interface design is of paramount importance – sometimes, that’s what the project is all about.

The 7 trends described above will get you started, but you should also invest some time and read excellent user interface blogs such as UX Movement and UX Magazine. By becoming a great user interface designer, you put yourself in a rather elite design company – there aren’t a vast amount of talented user interface designers out there.

Want more design trends? Check out 6 web design trends that are here to stay.

Do you have user interface design tips? Share in the comments.

facebooktwittergoogle_plusredditpinterestlinkedinmail

Peter Vukovic is a seasoned designer & creative director with 10 years of experience in worldwide advertising agency. He is a proud member of the 99designs community. http://99designs.com/people/pvukovich

  • Michael Gold

    nice artice. I like that you wrote this article as a “when to use it” approach to the different design techniques

  • Erico La casse

    Nice article but I have to note something : Please… never use Skeuomorphism UX design… It is a wrong way to design UX… It is an anti-design way of designing UX and GUI…

    All UX that I had use in my carriere was ludicrous. Please don’t do that if you want your UX to be professional and serious…

  • ramses

    Nice one! Check also this out http://www.fonstola.ru/141575-google-pauk.html

  • Mladen Djakovic

    These are no trends but more randomly picked patterns and examples.
    Collapsed content?! You know who did this so called “hide non-essential options and widgets under one link which will expand and collapse on a user’s request”? Right! Microsoft in Windows 2000. (http://d.alistapart.com/your-content-now-mobile/mcgrane-1-5.png)
    Why would a Dropdown-Control be a trend?

    Isn’t Content Chunking basically just a master-detail view? Or what is the difference exactly?

    @Erico La Casse: You cannot generalize your opinion on every interface design. Skeumorphism is not an effective design because of too much effort in its design compared to the benefit in supporting the users in their tasks, especially when it’s used on different plattforms. But it doesn’t mean, that it’s a wrong way to “design user experience”. Experience is influenced by the visual appearance of an interface, so it depends on what kind of experience you aim for. For example, I love that the 8mm app on the iPhone looks like an old camera. I wouldn’t have the same experience if everything was just flat. And generally, I would say “designing UX” is a wrong term when talking about visual design. No user will get home from work and thell his wife:”Today was such a good day, all the buttons on my screen are flat!”, as Designers we should intend more:”The new software we use is amazing. It helps me to do my work with a higher quality, in a shorter time and even with more fun.”

    No offense everybody.

    “there aren’t a vast amount of talented user interface designers out there” – Peter Vukovic

  • ramses
  • ramses
  • marylu

    it is really good.

  • sholarpk

    If you’re inclined to make “long” pages, are you sure that your audience uses a mouse with a wheel? If they don’t, the long page can be inviting physical mouse usage that exacerbates carpal tunnel damage in one’s wrists. I strongly recommend *against* long pages.