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.
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.
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 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.
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.
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.
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 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.
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.
Latest posts by Peter Vukovic (see all)
- JQuery for designers: 5 coding techniques anyone can learn - November 20, 2013
- Turning skeuomorphic design into flat design - October 23, 2013
- How to make killer email designs - October 4, 2013