Jan 7, 2015
Understanding Web UI Elements & Principles
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).
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.
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.
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.
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.
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.