Regardless of the intended device and medium (website, mobile app, game console, ATM, etc.) interface is a crucial part of success, as it can make or break the entire product. No wonder that professionals for whom UI design is their bread and butter are constantly in high demand. Either you are a beginner UI designer who wants to learn the trade or you are a developer who simply wants to make usable and consistent interfaces for their products, this short guide will arm you for this.
Feedback
Many associate “feedback with some kind of contact form. By all means, give your app users and site visitors a possibility to send you their feedback and suggestions. It is a good idea to see how your design performs in real life and what it lacks. However, I was talking about another kind of feedback – the one from the system to the user.
Keep your users aware of what is going on. Is something loading? Were the data sent? Did something go wrong? Tell them about it. Make the system status visible – do not make users guessing. They do not like surprises. They want the system to be predictable and feel in control. Show them the status by highlighting a menu button, by showing the off/on switches, etc.
If anything goes wrong, your interface must react, stating the reason and prompt what the user should do so that interaction be successful. If the registry form cannot be sent, make it visible and state the reason. Highlight the empty required field and provide an explanation why you ask for this information. If a username/password is invalid, let your users know what makes a valid one, which symbols are allowed and what is the maximum length.
Simplicity
As famous quote by Martin LeBlank goes, “User interface is like a joke, if you have to explain, it’s not that good”. Originality is great, but it must not hamper understanding. Fancy interactions, sophisticated shapes, and vivid colors may look great and artsy, and imply that your site (or app) is trendy and engaging. However, if their functions are not clear at the first glance, your design has failed to fulfill its primary purpose.
Of course, quick guides and tutorials are okay. Some people might actually need the entire knowledge base you have aggregated to illustrate the full capabilities of your product. We are used to the games that provide a slideshow guide to the main features and interface elements. But even if you happen to sign up to any email service for the first time (Gmail, Yahoo, Outlook) first thing that meets you there is a tutorial.
However, you must make your interface simple and straightforward, so that your users could skip the tutorial and be able to figure out how everything works along the way, without a map.
Match to the real world
Just as elements of your interface should be consistent with the laws of physics, everything else must be as close to the concepts users find in the real world as possible. Users must not know the algorithms of your app or technical terms for the processes. It is your job to build communication between a computer and a human audience. Use “human language in your feedback messages, not the formal descriptions.
Choose simple navigation elements (sliders, breadcrumbs, checkboxes, and telltale icons). Piggy-ride user’s expectations derived from their real-world experiences. Think about files stored in folders or names of the tools in Photoshop – real-live objects with similar functions inspired them. That is what makes your design intuitive. Such approach will save you a lot of time and will minimize the cognitive load for users – a win-win situation. Apple’s pressure sensitive trackpad is a great example – it mimics the physics of the real world and thus enhances the overall UX enormously.
Microinteractions
You still want to bring that extra something into UI to make the experience more than just “okay”? Microinteractions can work that magic. Microinteractions happen when only one element on the page is reacting to user’s actions. For example, a drop-down menu with more details, or an icon that becomes animated when you hover over it.
The key is transition – nothing should disappear or pop out of nowhere. Use animation to make it fade out, slide in, transform. Give a proper attention to timing: too fast will not provide the desired effect of elegant flow because a user can simply miss it. Too long is a pain when users have to perform a certain action repeatedly or quickly. The rule of the thumb here is making your elements act as close to the laws of physics as possible, this way they feel more natural and therefore elegant.
Know your audience
Now, how do you know what your users expect? Apart from the obvious and traditional things and universal knowledge (green check means yes, red X means no, arrows indicate directions), there are some other sources of insight into your users’ expectations.
First, you should know your audience – this must not come as a surprise to you, and if you are working on a site you must already have some idea of who your users will be. Authors of Photoshop mirrored tools used by professional photographers because they were their initial target audience. Some of them were intuitive and clear for everyone – Eraser, Eyedropper, Hand, Brush. Whereas others were more obscure to average users such as Exposure, White Balance, Dodge, Burn. Nevertheless, they were absolutely telltale and understandable for software’s primary intended users, i.e. the photographers.
Second, you should understand how UI plays into UX. The latter is a large, all-encompassing concept compared to UI. To create a simple, intuitive interface, you should look at your work from user experience angle. Understanding of user flow and solid knowledge of brand and product must be your starting point. This will give you the vital information about what problems need to be solved with your interface and what is the place of it in the UX architecture.
Make your UI forgiving
That means that users must be able to see the immediate result of their actions and be able to reverse them easily. Provide such possibility (and don’t forget about the feedback). Allow your users explore without punishing them for curiosity or not knowing “what that little thing does”. To put it simply: to explore they must be sure there is no self-destruction button wrecking their work or canceling all the previous steps they took without so much as a notice.
Let me take Photoshop as an example one more time. First, they provide a clear exit from every confusing situation. You can try out any obscure tool and then you can take a step backward. There is also a “Step Forwards option – if you changed your mind and do not want to cancel the action after all. Plus, you have a History where you can cancel a number of steps in bulk or jump several actions back to the previous state of your image. Moreover, both options are easily accessible and visible in the main menu, so even if user panics, they cannot skip it.
There is another extra insurance for user’s image. By clicking “Save”, they do not write over the original but have an option to save their work as a new file.
As you can see, the creators of Photoshop UI made a forgiving medium that encourages exploration, which was a great part of product’s success among professionals and amateurs alike.
Takeaways
- Always keep your user informed of what is going on and where they are
- Make your interface simple, do not be tempted to sacrifice clarity to artistic expression
- When in doubt, mimic interactions and cause-and-effects examples from the real-life
- Microinteractions can have a macro impact on UX, do not overlook them
- Know your audience and let it inspire you
- Allow your users to explore and make mistakes
These are simple rules that seem self-evident for UI designers with some experience. However, as a graphic designer, I entered the realm of interface looking at it from the artistic point of view. I learned the hard way that the UI is less about color palettes, font families, and sleek sliders than I expected. Which does not mean they are not important – creating a beautiful wrap for an otherwise great product is a crucial part of its success.
Top comments (1)
I think the ui design of dr.cleaner is very good drcleaner.com