7 user interface design trends you need to know about

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.

Some user interfaces take two people to operate. Not my cup of tea.

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.

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.

Minimalistic interfaces are definitely taking off. Top: Windows 8 uses monochromatic icons and simple solid colors for its new interface. Bottom: Pinterest user interface is the ultimate minimalism – apart from user content, very few things take up space on the screen.

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.

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.

Although every user interface borrows some detail from the real world (i.e. a button is a real-world concept), some people would argue against borrowing an entire shelf.

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.

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

Top: Google homepage is the prime example of laser focused web application – the search box is prominently displayed, everything else being demoted. Below: Air B’n’B is a great example of a laser focused interface.

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.

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)?

Pinterest uses simple but effective button toolbar which appears only on mouse over action.

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.

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.

Top: Google plus uses “More” button to show additional circles. Bottom: 99designs shows a variety of profile related options once you click your username in the top right corent.

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.

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.

Product pages on Apple website are one of the best examples of content chunking – they are a mixture of bite-sized text blocks coupled with beautiful product pictures.

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.

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.

 

Crazy Egg website is one incredibly long (but functional) web page. The right part of the image shows a snapshot of a small portion of page content.

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.

To wrap up

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.

 

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
Peter Vukovic
View all posts by Peter Vukovic
Peter's website

70 Comments

  1. falcon

    Wonderful post!Very informative, Thanks,man!
    Cheers!

    Reply June 20, 2012 at 12:10 pm
    • Peter Vukovic

      You’re welcome :) Thanks!

      Reply June 20, 2012 at 1:44 pm
  2. Allison Stuart

    Great article Peter… as always. :)

    Reply June 20, 2012 at 2:53 pm
  3. baspixels

    nice article :)

    Reply June 20, 2012 at 7:29 pm
  4. aimbuzz

    I love squares of Win 8. it’s so metro!

    Reply June 20, 2012 at 8:36 pm
  5. sreelakshmi

    I like google desingns

    Reply June 20, 2012 at 10:33 pm
  6. Brahma Gyan

    Nice Article Peter.
    Skeumorphism – that reminds me of Microsoft Bob.
    Content chunking – not really new, existed in printed text in engineering catalogs.
    Long pages – Twitter, Pinterest and Facebook make us used to scrolling – I still haven’t seen the end :)

    Reply June 20, 2012 at 11:32 pm
  7. Yousaf

    This is brilliant post. The cockpit reminds me of the fun times I had studying UX at university, lecturer always referred us to air plane cockpits.

    Reply June 21, 2012 at 12:45 am
  8. Yousaf

    @sreelakshmi

    Google’s new designer are creating some amazing experiences up to a year ago their UI was great from a usability POV but aesthetically it wasn’t that great.

    Reply June 21, 2012 at 12:47 am
  9. Steve

    Awesome article Peter, great stuff from you as always, cheers for sharing! Great summary of trends that I have certainly noticed around the web but not really defined under set categories as your post does so well. Great looking design might be all and well but it is without a functional, easy to use UI to boot. Apple and Microsoft are masters of creating great looking interfaces that remain perfectly functional for the user. Shall certainly keep these trends in mind for future projects. Thanks again!

    Reply June 21, 2012 at 1:08 am
  10. fabnomics

    I love the concept of content chunking. Nice post.

    Reply June 21, 2012 at 1:41 am
  11. Ioan Popa

    I love the new Windows 8 Design, I think that is the best by far, when are we going to see something like that for 99designs jason? Would be great :)

    Reply June 21, 2012 at 7:23 pm
    • Jason Aiken

      There’s always something new – just around the corner ;)

      Reply June 21, 2012 at 7:42 pm
  12. sarwan

    Awesome…..

    Reply June 21, 2012 at 7:52 pm
  13. Andrea Motta

    Really interesting article, very helpful

    Reply June 21, 2012 at 8:08 pm
  14. Annah

    thanks for an interesting article!

    Reply June 21, 2012 at 8:19 pm
  15. Jon

    How are these trends? Minimalism is a trend? wtf…

    Reply June 21, 2012 at 8:22 pm
  16. Ramesh Jha

    Great post. I like the pinterest design very much.

    Reply June 21, 2012 at 8:54 pm
  17. Brenda

    Thanks. Great article :)

    Reply June 21, 2012 at 8:56 pm
  18. Vinay m Thakur

    Nice one man!!!

    Reply June 21, 2012 at 10:39 pm
  19. Marek | Webcentric

    Great Post, one of the things we studied at HFI was interface for a washing machine. Sheesh, I can’t even imagine doing usability tests on a plane cockpit UI! Ouch. And yes.. we are definitely going to simpler and quicker more identifiable UI to improve UX. OK OJ! :-P

    Reply June 22, 2012 at 12:55 am
  20. Marek | Webcentric

    A great design tip for navigation is to use Mega Menus, this is method was summarized by Jacob Nielsen as: Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices. Some designers really take it to the edge, check out http://www.subaru.com.au :-)

    Reply June 22, 2012 at 1:07 am
    • Peter Vukovic

      Great tip Marek, thanks for contributing!

      Subaru website is a fantastic example of great UI at work.

      Reply June 23, 2012 at 10:29 am
  21. K Santosh Kumar

    Wonderful Post Peter!, as always.

    Reply June 22, 2012 at 2:06 am
  22. seto

    love the post thks

    Reply June 22, 2012 at 2:29 am
  23. farious

    awesome

    Reply June 22, 2012 at 2:57 am
  24. felix zilinskas

    Great article. I´m new in web design and this is a very helpful information.

    Reply June 22, 2012 at 4:25 am
  25. Danijel Djuric

    Peter Vukovic prijatelju ako znas sta ovdje pise znaci da si balkanac. Drago mi je da je ovdje jos neko sa nasih prostora…. Pozzz

    Reply June 22, 2012 at 7:48 am
  26. Donald Cruz

    I’m a graphic designer trying to enter the web/UI/UX scene and this is very informative. Nicely done Peter. Looking forward to your future posts.

    Reply June 22, 2012 at 8:51 am
  27. djnykk

    Xcellent article :) I would roughly divide designs to “Candy” [rounded edges, Apple // iOS style] and “Flat” [sharp corners, retro style, minimalism...]. Keep writing great text :)

    Reply June 22, 2012 at 10:32 am
  28. Chris

    Coloured squares/tiles? Glossy/matte? Bookshelves with little pictures of the books? Long pages or short pages? Lightboxes? Show all the content or show very little content?

    Perhaps I’m too old and jaded for all this (pushing 30 after all! What’s that in Internet years!?) but it all feels rather dated.

    Content/information/eye-food (call it what you will) should be free: not free as in ‘free meal’, but ‘free as a bird’; unrestricted from the confines of one’s laptop, mobile, tablet or iGadget.

    Will Google’s Spectacools bring forth a new era of content consumption and connectivity? Maybe…maybe not. Before long, perhaps we’ll look back at handheld devices with a sense of nostalgia and reverence; to think we only had that tiny screen as a window into the world – all that swiping and tapping leaving a generation of users with appalling finger-related complaints to which no app or cloud could find a solution.

    However, for now though we’ll stick with those circles and squares; a pop-up, a click, is it here? no it’s there; we’ll swipe and we’ll like, and we’ll download the app – the UI looks great! Oh wait, no it’s crap.

    Reply June 22, 2012 at 4:06 pm
  29. devika

    informative..thanks for sharing

    Reply June 22, 2012 at 4:33 pm
  30. YellowCorn

    Excellent

    Reply June 22, 2012 at 8:19 pm
  31. clairesler

    Brilliant!

    Reply June 24, 2012 at 7:00 am
  32. rajib saha

    These blog about user interface designing and other designing thoughts is really motivational for me. I want to read these kind of blogs where different way of designing theory are taught. I really love it friend really :->

    Reply June 25, 2012 at 4:08 am
  33. web designer

    Great article. But what is it doing on 99? A website that devalues the work of designers through it’s predatory business model.

    Reply June 25, 2012 at 12:02 pm
  34. Nathan Duke

    This was such an excellent post, I wanted to re-post it!
    Awesome work by Peter Vukovic for 99designs.com.

    http://wp.me/p1Rn6v-xg

    Reply June 26, 2012 at 9:05 pm
  35. Jiten

    love the post

    Reply June 26, 2012 at 9:32 pm
  36. uli

    good user interface design is needed to make content useful for not only the coding nerds – but also for them.

    Reply June 27, 2012 at 7:05 am
  37. janryc

    Indeed! Thank you Mr. Spidey! ^_~ I love your tips bro!

    Reply June 28, 2012 at 6:29 am
  38. ES

    Dobro si napisi to, Petr!

    The other common trend: subtleties in minimalism. That is, barely noticeable finishing touches like “lake reflections”, very perfect shadows behind icons, text, and boxes, tiny patterns and textured elements (e.g. cross-hatched metal grating that is barely visible), flat backgrounds with glow effects and so on. Web and mobile design is for once being noticed by the creative layperson. Again, great post!

    Pozdrav iz New Yorku!

    Reply June 29, 2012 at 6:04 pm
  39. Andrea T.

    Great info! Thanks for posting.

    Reply July 5, 2012 at 8:58 pm
  40. Grietje François

    Thanks Peter, clear and to-the-point writing. I’ve also started to walk the path of UID & UCD. Looking forward to more posts from you.

    Reply July 26, 2012 at 7:24 am
  41. Blue Light Horizon

    Great article Peter! Windows 8′s new look is inspirational with a clear and concise way of using form and functionality.

    Reply July 28, 2012 at 9:56 pm
  42. nikita

    Nice article

    Reply August 6, 2012 at 3:19 am
  43. jared

    When it comes to design I really think minimalism is key as you don’t want to much to distract the user.

    Reply August 31, 2012 at 4:40 pm
  44. lisaflorence

    Great article.Thanks for sharing……….

    Reply September 3, 2012 at 1:38 am
  45. Nitish Maurya

    Nice article Peter,one more such megamenu navigation
    pattern has been improvised here. which reduces much of the data cluttering.
    find it here:
    http://www.porsche.com/usa/

    Reply September 5, 2012 at 9:31 pm
  46. Web Design

    Interface Design Trends…

    Thanks for Sharing!!

    Reply October 1, 2012 at 5:52 am
  47. cathy

    so nice..thanks a lot..

    Reply October 1, 2012 at 6:33 pm
  48. becky

    LIKE IT SOMUCH

    Reply October 2, 2012 at 11:43 pm
  49. Rolando

    Wonderful examples. Actually, I was reading in another blog that Skeumorphism is not a trend anymore because technology provides a different experience from the “natural” object (a book, for example), and if you stay with this concept, the people will always compare how different is the technology/app vs the real thing.
    Quite impressive list. thank you so much for sharing.

    Reply October 26, 2012 at 9:34 pm
  50. Madhawee

    Great article. Thankx.

    Reply November 6, 2012 at 2:25 am
  51. Regina Zaslavskaja

    Peter,
    Im in interface designer, and will be doing a presentation on mobile specs to know, when designing. Can you give me some tips on where i can do my research and find this information.

    Reply November 19, 2012 at 8:40 am
  52. Carl Miner

    Wonderful, clean thoughts. Thanks for including the “When to use it” sections. The laser focus I find particularly important, as our lives are so cluttered that we simply want to be told what to do NOW to move on. We easily get impatient.
    (FYI, in doing more research on Skeuomorphism, it appears to have an “o” in first part.)

    Reply November 27, 2012 at 12:24 pm
    • Peter Vukovic

      Hi Carl, thanks for the comment, I’m so glad you find the article helpful.

      P.S. Special thanks for correcting the “o” part – fixed it! :)

      Reply November 27, 2012 at 12:45 pm
  53. Site

    Amazing, thoroughly clean opinions. Thanks for including the “When make use of it” sections. This laser beam target I’ve found particularly crucial, seeing that our everyday life are very cluttered that people want to be told what to do NOW to get over it. Most people very easily get impatient.

    Reply December 1, 2012 at 12:01 am
  54. Home automation ipad

    Hey! Thank you so much for these interface designs. It is really helpful to find them all at one place.

    Reply December 20, 2012 at 2:59 am
  55. Alisa (Think Big Online Marketing)

    This is quite impressive! I will be using the hints layed out in your post many thanks

    Reply January 11, 2013 at 8:43 am
  56. DJ

    nice post!!!

    Reply January 14, 2013 at 11:48 pm
  57. Nitin

    Nice article

    Reply February 7, 2013 at 10:55 pm
  58. Interface Design

    Thanks for very nice article.

    Reply February 13, 2013 at 11:23 pm
  59. Ira

    Thank you for the article! Comprehensive summary.

    Reply February 14, 2013 at 7:48 am
  60. Ravi Oza

    awesome

    Reply February 14, 2013 at 9:32 pm
  61. Dan at Cubicle Ninjas

    These are some great tips! I particularly like the contrast between minimalism and skeuomorphism — this is an issue that I’ve been watching with great interest lately, and it’ll be interesting to see how it plays out.

    Reply February 15, 2013 at 2:48 pm
  62. Ricardo Ortega

    Hi Peter,

    Thanks for the article. I’ve been practicing UX design for a long time, in fact since the 90′s. I worked with the team that pioneered the first smart phone for Ericsson.

    Now I work in my own agency to provide these services for the masses. You can read our blog here: http://www.keepitusable.com/blog

    Thanks

    Reply February 16, 2013 at 6:06 am
  63. kapil

    Beautifully captured!! and very useful…

    Reply March 20, 2013 at 1:16 am
  64. stay with me

    Why people still use to read news papers when
    in this technological globe all is existing on net?

    Reply April 17, 2013 at 3:18 am
  65. Steve

    Excessive UI minimalism irritates to those of us who know what we are doing and want precise control over the software and hardware that we operate. UI designers have fallen in love with making things “easy” at the cost of removing or hiding advanced features.

    Reply April 27, 2013 at 9:11 pm
  66. Greg Jacobs & Martin Crumlish Emperor Social

    Hi there, I desire to subscribe for this webpage to
    obtain hottest updates, thus where can i do it please assist.

    Reply May 2, 2013 at 11:37 pm

Leave a comment