Chris Bank of UXPin — the wireframing & prototyping app — explains some of the most important principles of web UI design. For analysis of UI examples from over 33 companies, feel free to check out Web UI Best Practices.
There’s more to designing a web interface than simply plugging your brand name into a great algorithm and clicking “submit.” There is no cureall template, no definitive and universal set of rules. There are just general principles, guides, instructions, theories, and plain old friendly advice.
Source: Interface Design Principles
First things first, let’s have a clear understanding of what UI really is. “Interface” can be a complicated term, so we’ll take a moment to wrap our heads around what it entails. Ryan Singer, Product Manager at Basecamp, advises us not to think of interface “screens or buttons or pixels,” as is tempting for designers, but rather as a collection of “jobs,” each with a beginning, a middle, and an end.
Each of these jobs needs a beginning, a middle, and an end. If your user wants to post news about their new baby — or kitten — they first must click in “Update Status” box (beginning). This expands the message window and allows them to type their message (middle), and when they are finished, they click “Post” and can see their new Status Update appear on the screen so that they know it’s official (end).
Input Controls
Interface would just be a “face” without interaction, and a lot of that comes from input controls. But there’s a paradox with controls, because users want more options, but every new control complicates the UI and clutters the screen. The best way to strike that perfect balance, according to Dmitry Fadeyev, founder of Usaura, is to have controls on demand.
By hiding your controls until needed, you save on screen space without having to sacrifice user options. It’s a winwin solution that’s been adopted by most highprofile websites at this point. Controls can be hidden and revealed by hovering over the affected content (Pinterest), hidden in collapsed dropdown menus via tabs (Google Docs), or a hybrid of the two, as with the CollabFinder example above.
Another necessary input control is the text field. This is a UI element often taken for granted, and a lot of designers are content to use generic form fields and forget they are even there. However, a customized input field can help infuse some personality into your site, or even avoid an unfortunate clash of colors with generic designs. Fadeyev offers some help with the coding.
Source: Google
If your site is focused on a certain input field, or if input is a necessary first step, you should implement an autofocus on that input field so that the cursor starts there automatically. Thebest example of this is Google, where upon entering the site, the user can start typing their query without clicking anywhere. Again, Fadeyev helps explain the technical details behind this UI technique.
As discussed in Web UI Patterns 2014, Google also incorporates default values and autocomplete, which significantly speeds up user actions and helps users explore additional topics and themes.
Source: Google
Navigation
It’s hard to appreciate a site if you’re lost, which is why navigation is mandatory when discussing web UI design.
Collis Ta’eed, cofounder of Envato, cites two cardinal rules of navigation:
1. Users should always know their current place in the site — Known as orientation, this is instrumental in making your users feel comfortable, and streamlines the site on their end. Ways to orient your user involve highlighted menu items, breadcrumb trails, and headings.
2. The navigation system remains consistent — In other words, don’t move your menu bar around. Imagine how frustrating it would be if you were lost in a city, and streets signs switched between posts, the sides of buildings, the sidewalk, etc.
As we explain below, to ensure context and consistency, your navigation needs to match the flow of content via proper placement.
I. Content
You should make sure the site’s content is complete before tackling the navigation. If your content is lacking, even the best navigation won’t save the site. Navigation must support the content:
1. Menus – The default choice for users to find site content.
2. Breadcrumbs – Many users do not land on the homepage, so orientation is essential. As mentioned before, breadcrumbs provide that reference point.
3. Filters – Filters make contentheavy sites manageable.
4. Links Helps users understand connections between related content.
Source: Navigation UI Design
As you’ll see above, from Google Maps API, navigation must reveal content. A simple horizontal menu provides primary navigation, while the secondary navigation is given lower priority on the right side. Content actually occupies most of the site space with. The primary navigation is muted with small fonts and light colors, allowing the content to speak for itself.
II. Placement
Do you want the user to click or scroll? Enter data or click the back button? Navigation is a series of choices and users must decide without seeing what comes next. The most visible places to add a navigation menus are horizontally and vertically.
Source: Navigation UI Design
As an example of minimalist horizontal navigation, the REI 1440 site uses a three-option menu that’s smaller than even the company logo. The entire navigation is based horizontally, allowing content to cycle from left to right as the user filters by time, activity or, location. The navigation reveals the content.
On the other hand, vertical navigation is perfect for telling a story (especially for linear content). When paired with parallax animations (which we discuss in the next section), vertical navigation makes singlepage sites highly functional.
Source: Navigation UI Design
Skullcandy’s Supreme Sound site, for example takes an unorthodox approach to the usual vertical scrolling page. The screen rotates as you follow the headphone cord down the page, while the righthand vertical navigation orients the user and provides links to relevant content
More examples of horizontal and vertical navigation can be found in this collection of navigation UI patterns.
Animations
There’s no doubt about it: animations are fun. They’re so fun, in fact, that people often forget they’re useful and can surreptitiously add a lot to your UI without the user even knowing it.
Val Head, a designer who runs animation-based workshops, lists three excellent reasons (besides fun) that animations are indispensable for a great UI.
1. The eye is drawn to movement. This has been scientifically proven and can be used to your advantage. An animated icon will signal a change to the user much more effectively and less jarringly than a flat change.
2. Establishing connections. Animations make excellent transitions, which help make using the site more coherent, especially if there are a lot of tasks happening at once. Take the example of a clicked icon expanding to open, instead of simply a new window appearing. These small transitions can make a world of difference when the user is caught up in what they’re doing and can help make emotional connections.
3. Cues and clues. An animation is great for signaling that a task is accomplished, and, related to the above point, similar animations are great for drawing connections between two tasks. Wellthought animation can even suggest actions to the user — if an item is “added” in a clever way, the user might guess it would likewise be “removed.”
We’ll explain a few examples of how animations can add life to navigation, the site background, and transitions between pages.
I. Menus With Panache
Animations are trickier to add to navigation menus, but they can add striking detail to the interface. Make sure that the speed is quick enough to capture attention, but not so quick that it feels disorienting. Links should also be easy to access and provide plenty of space for clicking.
Source: Building Animated User Interfaces With a Purpose
For example, Design Sensory uses a top-level menu along with submenu links. As you hover over each top link, the new submenu options appear below. This allows for quick access to all the menu links while still providing enough “breathing room” for clicking. The only problem might be users who have poor vision and may struggle to read the smaller font sizes — but that can be addressed by playing with the font size.
Source: Building Animated User Interfaces With a Purpose
Web design firm Cabedge uses a dropdown animation effect which blends in perfectly into the paper-like feel of the site. In the top ribbon, you can hover over any of the links to trigger a quick hover effect. If your cursor stays on the link for 1-2 seconds, then a sub-menu animates and drop downwards. The effect makes the interface feel fun and presents more content without clutter.
II. Parallax Background Scrolling
Parallax sites will usually have background images which change as you scroll downwards,creating the effect of 3D motion while static page elements follow the user downwards.
Source: Building Animated User Interfaces With a Purpose
In the above example from the Atlantis World Fair, the elevator shaft follows your scroll downwards and draws attention to the fact snippets. This animation effect encourages interaction with the content because scrolling actually creates a form of visual storytelling. For more examples, check out this collection of 50 sites that exemplify this best practice.
III. Webpage Transitions
Animating the transitions between pages makes the website experience feel like a friendly guided tour. It also provides more visual feedback to your interface. The animated transitions may follow tooltips, content blocks, or sliding panels.
As you can see above with design firm Mustache, animated transitions can be executed witha nice Ajax effect that doesn’t force refreshing of the page. Just keep in mind that you may want to also build in a backup option for users that don’t have Javascript.
In UXPin, it’s easy to add interactions and animations. Any element in your wireframe or prototype can trigger an interaction or animation by selecting from a drag and drop menu.
Default Settings
Statistically speaking, users will rarely change the default settings, even if customization options are available. That means it’s on you to get it right the first time. As a UI designer, you have the responsibility of foreseeing how the user wants their settings before they even use the site. There is an upside, though: you can use the default settings to instigate the actions you want the user to follow. Living Social takes a smart approach by making the default audience for email deals “everyone”, which encourages users to forward deals to people of the other gender (which presumably, helps with the company’s goal of user acquisition).
Source: Living Social
That said, be kind and make it easy for the user to change their default settings. Creating a convoluted process to keep the user on default settings will only frustrate them and push them away. After all, not all female users may want to keep receiving deals for men’s clothing in their inbox.
Make sure you only use default settings when your back-end can make qualified guesses regarding user preferences or that you know those defaults benefit the user. When it comes to input fields, do not use defaults for anything that requires user thought (e.g. signing up for newsletters or accepting terms of use). More examples of default settings are included here.
Guided Actions
People, as a whole, are open to suggestion. That’s good news, because you can encourage deeper involvement, interaction, and even feedback — as long as the action you’re suggesting isn’t cumbersome.
Source: LinkedIn, via 99 Designs
A clear example of how to properly use guided action is LinkedIn. Whenever the user opens the page, there are usually prompts to actions, for example, endorsing your connections’ skills. People like helping their friends, so prompting this action works because it’s something they want to do, but may not have thought of it on their own (plus, it creates a deeper involvement with the site).
Dmitry Fadeyev points out that guided action can be used on a more subtle level by emphasizing key functions, controls, and buttons. As you can see above, just look at how badly Spotify wants you to download them compared to, say, look at their features. More examples of Guided Actions can be found in Web UI Patterns 2014.
Visual Clarity & Language Clarity
While this should be self-explanatory, we’ll touch on it here to remind you to keep your eye out. One of the marks of a bad UI is confusion, usually resulting from when controls, functions, or other elements aren’t fully explained.
Sources: Imgur/Stack Exchange
For example, notice in the above comparison how the Imgur photo upload menu is more user-friendly than the one used by Stack Exchange. The functionality is the same, yet the former menu feels much more intuitive. This is due to its proper use of language, color, contrast, and the right eye pattern layout.
If your user doesn’t understand something, they will ignore it. If you want to make the most out of your UI, make sure everything is clear. Just as a general guideline for clarity:
- Simplicity is key — Don’t overload the user with too many functions or controls.
- Check your wording — Proper wording can solve problems of confusion, while poor wording causes them.
- Avoid contradictions — As you’ll see in the example from StackExchange, if the button says “Choose File,” don’t refer to it as “click browse”. Keep language consistent.
- Avoid overstating — Be succinct; overexplaining can produce the opposite of the desired effect.
- Hover explanations — There’s no better way to clear up confusion over icons without cluttering your screen. Gmail is a good example of using hover explanations to explain somewhat ambiguous icons.
When it comes to clarity, also make sure that your website provides user feedback and breaks down complex actions into simple steps. For example, Gmail provides notifications for every action, especially for “Learn More” and “Undo” actions (this makes people feel more in control and confident about your site). You can also see in the below comparison how the form on the right is much clearer (people prefer to complete 10 small tasks versus one large one).
Source: 7 Unbreakable Laws of Interface Design
The “MAYA” Principle
Your goal as a UI designer is to create the greatest, most extremely new and original interface that goes far beyond the average user’s wildest dream, right? Not quite. While we’ve provided advice on how to ensure your UI is as sleek and streamlined as possible, it’s important to keep the MAYA Principle in mind as a checks-and-balances methodology.
Famed industrial designer Raymond Loewy coined the expression “Most Advanced Yet Acceptable” (MAYA) to explain that the public is naturally resistant to change and would not accept a radical new innovation, even if it was a better solution.
Fastforward to modern times. The UI/UX consulting firm Above the Fold explains how the wisdom of the MAYA principle applies to web design, namely, be sure to include references to experiences users are already familiar with. This isn’t to say a web design shouldn’t be innovative and push boundaries; however, if it does, it should also include three things:
1. Familiar Visual Metaphors — the actions on your site should have roots in actual tasks the users have experience with. For example, users embraced scrolling and slider functions when they were introduced because they resembled flipping through pages or notebooks. When applied literally, the concept is known as skeuomorphism.
2. Traditional Fallback Options — different users will have different comfort levels. Offering a “traditional” option in addition to a new and different one will give users a sense of security — even if they never use it. For example, Etsy has an animated “search by color” option complemented by a traditional search bar.
3. Sensible Scope — in other words, don’t reinvent the wheel. Unnecessary additions toted as “new,” “better,” or “improved” only frustrate the users. If you’re putting in the effort to create something groundbreaking, make sure it’s truly worth it.
Finally, one of the most important factors for new and different designs is pacing. Sometimes its best to unveil your brilliant new idea in small doses and incremental updates as opposed to all at once. After all, would Twitter have been so successful if Myspace and Facebook hadn’t came before it?
Takeaway
An Interface is more than pretty visuals — it is a medium through which users can accomplish their goals on your website. Done properly, input controls can add fun and interaction to a normally boring process. Navigation should be shaped around content, like a pleasant boulevard guiding users to their destination. Animations add life to the interface, and guided actions and default settings help read the user’s mind without feeling invasive. Finally, and perhaps most importantly, the MAYA Principle ensures clarity by serving as a gutcheck on your interface.
For practical advice on building web interfaces based on examples from top companies like AirBnB, Wufoo, Linkedin, and more, check out Web UI Best Practices.