- \n
- Simpler steps<\/strong> \u2014 The goal is not to make as few steps as possible, but the simplest steps. Make an interface that\u2019s self-explanatory, and don\u2019t\u00a0bog down users with too many decisions<\/a>. Don\u2019t obsess over the three-click rule<\/a>, the idea that users will leave your site if they have to click more than three times, but recognize the spirit behind it.<\/li>\n<\/ul>\n
- \n
- Map user flow<\/strong> \u2014 Jessica Downey has a helpful method<\/a> for mapping user flow. Ryan Singer of Basecamp has a similar but faster approach<\/a>.<\/li>\n<\/ul>\n
- \n
- User testing <\/strong>\u2014 Guesswork is unreliable. Test at least five users to see how they instinctively try to complete a task. This gives you more informed data when applying the other steps above.<\/li>\n<\/ul>\n
Let\u2019s look at three examples of simplified user flows in action (as further detailed\u00a0here<\/a>):<\/p>\n
1. Uber<\/a><\/h4>\n
Credit cards are notoriously tedious to enter, especially on a mobile phone, but Uber lets users snap a photo of their card to capture all of the information.<\/p>\n
\n ![\"Screenshot](\"https:\/\/d.fastcompany.net\/multisite_files\/fastcompany\/inline\/2016\/02\/3056290-inline-1-a-practical-guide-to-invisible-design.png\")
<\/div>Uber<\/span><\/figcaption><\/figure>\n They\u2019ve shortened the payment user flow from:<\/p>\n
- \n
- Type in First Name<\/li>\n
- Type in Last Name<\/li>\n
- Type in all digits of credit card<\/li>\n
- Type in security number<\/li>\n<\/ul>\n
To simply:<\/p>\n
- \n
- Take photo of credit card<\/li>\n<\/ul>\n
For a user, the experience isn\u2019t just useful, it\u2019s nearly magical.<\/p>\n
2. Dropbox<\/a><\/h4>\n
Dropbox\u2019s entire service is a simplified user flow of the otherwise tedious task of uploading and downloading a large number of files individually.<\/p>\n
\n ![\"\"](\"https:\/\/a.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-large\/inline\/2016\/02\/3056290-inline-2-a-practical-guide-to-invisible-design.png\")
<\/div>Dropbox<\/span><\/figcaption><\/figure>\n Dropbox created a much faster shortcut by introducing system folders.<\/p>\n
Going in, most users are already familiar with how folders work, so this is simpler for them. But more importantly, they can upload\/download all their documents in one or two folders. Add to that a simple drag-and-drop functionality.<\/p>\n
3. Oscar Insurance<\/a><\/h4>\n
Other insurance sites typically have multiple form fields with information that\u2019s not always relevant. Oscar Insurance brings the industry up-to-date with a modern\u2014and simple\u2014form entry.<\/p>\n
\n ![\"\"](\"https:\/\/d.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-large\/inline\/2016\/02\/3056290-inline-3-a-practical-guide-to-invisible-design.png\")
<\/div>Oscar Insurance<\/span><\/figcaption><\/figure>\n Other form fields aren\u2019t revealed until the current one is answered.<\/p>\n
This prevents too many fields from overwhelming the user, and clearly shows him or her the next step. And the entire process is simplified with the use of a “Mad Libs” UI pattern\u2014this makes getting an insurance quote almost enjoyable, something no one would’ve ever guessed possible.<\/p>\n
The semantic forms match the way users think, making the design feel invisible. The barrier between the user wanting a quote and completing the process is dramatically reduced.<\/p>\n
Communicate clearly<\/h2>\n
Every time a user is confused, it adds friction. Clear communication is the ultimate goal of invisible design.<\/p>\n
Everything in an interface is communicating something\u2014spacing and size communicate importance, colors communicate mood, styles communicate atmosphere, and so on.<\/p>\n
All the individual messages must combine to communicate in sync. With as little thought as possible, a user must know what a site or app does and why he or she should care.<\/p>\n
Follow this checklist to make sure your meaning is clear, and therefore the design invisible:<\/p>\n
- \n
- Interactions rooted in reality<\/strong> \u2014 Whenever possible, use human mentals models from everyday life. For example, increasing volume is often represented in images moving upwards or getting bigger. This just feels “right.”<\/li>\n<\/ul>\n
- \n
- Legibility<\/strong> \u2014 For clear communication, all text must be readable. Stick to the proper guidelines for spacing between lines\/letters<\/a>, and useColor Safe<\/a> to determine the ideal font colors to contrast clearly against the background.<\/li>\n<\/ul>\n
- \n
- Consistent mood<\/strong> \u2014 You wouldn\u2019t use a casual typeface for the subtitle to a tragic photograph. Keep a unifying theme for all imagery, typefaces, and colors to set the mood you want, and tie everything together nicely. This includes content, like the subjects of images and the tone of the copy.<\/li>\n<\/ul>\n
- \n
- Signifiers<\/strong> \u2014 Easily recognizable UI patterns are automatically understood from the user\u2019s previous experience on the web. Signifiers, like a play button over an image to signify video, send a universally understood message without wasting time.<\/li>\n<\/ul>\n
- \n
- Microinteractions<\/strong> \u2014 Small design choices, like an interactive element changing color when hovered over, can fill in the cracks in how your interface works. These subtle cues often communicate without the user even realizing it.<\/li>\n<\/ul>\n
Let\u2019s see how these principles are applied in the examples below:<\/p>\n
1. Integrated Podiatry Clinic<\/a><\/h4>\n
Long scrolling sites must immediately communicate their method of navigation, otherwise users might be confused by a lack of menus.<\/p>\n
\n ![\"\"](\"https:\/\/c.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-large\/inline\/2016\/02\/3056290-inline-4-a-practical-guide-to-invisible-design.png\")
<\/div>Integrated Podiatry Clinic<\/span><\/figcaption><\/figure>\n The Integrated Podiatry Clinic solves this problem using signifiers and users\u2019 own mental modes. The door arrow at the center bottom is enough to suggest scrolling, especially with a minimal design, which keeps users from getting distracted. Some users may even recognize the signifier from other sites.<\/p>\n
Notice what the visuals say about the site and the company: the gray color has the appropriate professionalism of a clinic, while the feet image and clever tagline make it feel human at the same time. The step lego in the bottom right maintains the podiatry theme.<\/p>\n
From the clever copy to the soft tones, the interface is designed to communicate that the clinic is staffed with experts who care about their patients.<\/p>\n
2. Future Water City<\/h4>\n
Future Water City uses microinteractions and signifiers to explain what would be an otherwise confusing interface.<\/p>\n
\n ![\"\"](\"https:\/\/b.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-large\/inline\/2016\/02\/3056290-inline-5-a-practical-guide-to-invisible-design.png\")
<\/div>Future Water City via Awwwards<\/span><\/figcaption><\/figure>\n Because the circled numbers aren\u2019t a strong enough signifier on their own, they periodically pulse with color to show that they are interactive.<\/p>\n
Microinteractions with the cursor also show how the site work. When it hovers the map, it turns into an open hand (signifying click-and-pull navigation). When it hovers over a number it turns to a single finger (signifying clickability).<\/p>\n
From a user flow standpoint, the interaction design also shortens the perception of distances between different types of content. For instance, when you click on a numbered bubble, a slideout appears on the same page, which you can click to trigger another slide-out that explains the product.<\/p>\n
You don\u2019t move from page to page. You move between frames on the same page.<\/p>\n
\n ![\"\"](\"https:\/\/a.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-large\/inline\/2016\/02\/3056290-inline-6-a-practical-guide-to-invisible-design.png\")
<\/div>Future Water City via Awwwards<\/span><\/figcaption><\/figure>\n \n ![\"\"](\"https:\/\/d.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-large\/inline\/2016\/02\/3056290-inline-7-a-practical-guide-to-invisible-design.png\")
<\/div>Future Water City via Awwwards<\/span><\/figcaption><\/figure>\n Technically, the content is presented in the same number of steps, but the smooth transitions between frames creates the illusion of weightlessness.<\/p>\n
Forgive your users<\/h2>\n
For a truly invisible design, the UI must always forgive user errors. If a user makes a mistake that can be fixed easily (or the design prevents a mistake), the user feels empowered.<\/p>\n
Consider the following tips:<\/p>\n
- \n
- Undo vs. Confirm<\/strong> \u2014 Popular opinion is that Undo creates a smoother interface than Confirmations about consequential actions. AsAza Raskin explains<\/a>, users develop a habit loop<\/a> with popup windows, where they might click “Okay” before fully understanding what they\u2019re confirming. Moreover, making confirmation windows flashy or embedding them with an activity that requires thought (like typing a specific codeword) doesn’t work either\u2014such bells and whistles only distract the user from her decision, or irritate her so that she leaves the window even faster. An Undo feature accounts for the habit loop instead of challenging it. There are some exceptions<\/a>, namely when undoing is complicated, as with publishing something publicly, or for critical actions (like deleting a whole email database).<\/li>\n<\/ul>\n
\n ![\"\"](\"https:\/\/c.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-small\/inline\/2016\/02\/3056290-inline-8-a-practical-guide-to-invisible-design.png\")
<\/div>Inbox<\/span><\/figcaption><\/figure>\n - \n
- Forgiving format for inputs<\/strong> \u2014 Input forms can be confusing: for example, in Yelp<\/a>, users may want to search for type of food or a specific restaurant. The\u00a0forgiving format<\/a> UI pattern allows users to type in what they want, then sorts it out on the back end. Announce this feature through input hints, like Yelp\u2019s placeholder text, “tacos, cheap dinner, Max\u2019s.”<\/li>\n<\/ul>\n
\n ![\"\"](\"https:\/\/d.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-large\/inline\/2016\/02\/3056290-inline-9-a-practical-guide-to-invisible-design.png\")
<\/div>Yelp<\/span><\/figcaption><\/figure>\n - \n
- Autosaving<\/strong> \u2014 Cheap data storage makes autosave a great protection against users losing data, whether caused by human error or something else, like a browser crash or power outage. To maximize its effects, create a subtle indicator (see Gmail’s example below)\u2014something that doesn\u2019t require interaction, so not to distract.<\/li>\n<\/ul>\n
\n ![\"\"](\"https:\/\/a.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-small\/inline\/2016\/02\/3056290-inline-11-a-practical-guide-to-invisible-design.png\")
<\/div>Gmail<\/span><\/figcaption><\/figure>\n - \n
- Exceptional error feedback<\/strong> \u2014 You can\u2019t always defend against errors. When they do occur, provide feedback in a helpful way to get users back on track. Clearly explain what happened and how to rectify the situation. Provide a call-to-action for the next step. Keep it succinct; users will likely be skimming anyway.<\/li>\n<\/ul>\n
\n ![\"\"](\"https:\/\/b.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-large\/inline\/2016\/02\/3056290-inline-10-a-practical-guide-to-invisible-design.png\")
<\/div>Team Treehouse<\/span><\/figcaption><\/figure>\n Conclusion<\/h2>\n
The point of invisible design is to get out of the way as much as possible.<\/p>\n
Any elements that threaten to distract the user from his goals should be removed, no matter how much the designer likes them. Learn to separate which aspects are genuinely impressive, and which are only impressive to other designers. If your users don\u2019t notice how much effort you put into the design, that means it’s working.
\n
\nFor more UX best practices, check out the free 2016 UX Design Trends Ebook Bundle<\/a>. The bundle includes 350+ pages of advice and 300 examples of the best UX, web, and mobile designs.<\/em><\/p>\n
- Exceptional error feedback<\/strong> \u2014 You can\u2019t always defend against errors. When they do occur, provide feedback in a helpful way to get users back on track. Clearly explain what happened and how to rectify the situation. Provide a call-to-action for the next step. Keep it succinct; users will likely be skimming anyway.<\/li>\n<\/ul>\n
- Autosaving<\/strong> \u2014 Cheap data storage makes autosave a great protection against users losing data, whether caused by human error or something else, like a browser crash or power outage. To maximize its effects, create a subtle indicator (see Gmail’s example below)\u2014something that doesn\u2019t require interaction, so not to distract.<\/li>\n<\/ul>\n
- Forgiving format for inputs<\/strong> \u2014 Input forms can be confusing: for example, in Yelp<\/a>, users may want to search for type of food or a specific restaurant. The\u00a0forgiving format<\/a> UI pattern allows users to type in what they want, then sorts it out on the back end. Announce this feature through input hints, like Yelp\u2019s placeholder text, “tacos, cheap dinner, Max\u2019s.”<\/li>\n<\/ul>\n
- Undo vs. Confirm<\/strong> \u2014 Popular opinion is that Undo creates a smoother interface than Confirmations about consequential actions. AsAza Raskin explains<\/a>, users develop a habit loop<\/a> with popup windows, where they might click “Okay” before fully understanding what they\u2019re confirming. Moreover, making confirmation windows flashy or embedding them with an activity that requires thought (like typing a specific codeword) doesn’t work either\u2014such bells and whistles only distract the user from her decision, or irritate her so that she leaves the window even faster. An Undo feature accounts for the habit loop instead of challenging it. There are some exceptions<\/a>, namely when undoing is complicated, as with publishing something publicly, or for critical actions (like deleting a whole email database).<\/li>\n<\/ul>\n
- Microinteractions<\/strong> \u2014 Small design choices, like an interactive element changing color when hovered over, can fill in the cracks in how your interface works. These subtle cues often communicate without the user even realizing it.<\/li>\n<\/ul>\n
- Signifiers<\/strong> \u2014 Easily recognizable UI patterns are automatically understood from the user\u2019s previous experience on the web. Signifiers, like a play button over an image to signify video, send a universally understood message without wasting time.<\/li>\n<\/ul>\n
- Consistent mood<\/strong> \u2014 You wouldn\u2019t use a casual typeface for the subtitle to a tragic photograph. Keep a unifying theme for all imagery, typefaces, and colors to set the mood you want, and tie everything together nicely. This includes content, like the subjects of images and the tone of the copy.<\/li>\n<\/ul>\n
- Legibility<\/strong> \u2014 For clear communication, all text must be readable. Stick to the proper guidelines for spacing between lines\/letters<\/a>, and useColor Safe<\/a> to determine the ideal font colors to contrast clearly against the background.<\/li>\n<\/ul>\n
- Interactions rooted in reality<\/strong> \u2014 Whenever possible, use human mentals models from everyday life. For example, increasing volume is often represented in images moving upwards or getting bigger. This just feels “right.”<\/li>\n<\/ul>\n
- Take photo of credit card<\/li>\n<\/ul>\n
- User testing <\/strong>\u2014 Guesswork is unreliable. Test at least five users to see how they instinctively try to complete a task. This gives you more informed data when applying the other steps above.<\/li>\n<\/ul>\n
- Map user flow<\/strong> \u2014 Jessica Downey has a helpful method<\/a> for mapping user flow. Ryan Singer of Basecamp has a similar but faster approach<\/a>.<\/li>\n<\/ul>\n
![\"image02\"](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/10\/image02-1.png\")
<\/a><\/p>\n