Magazine for designers and web developers
01 Collect

Understanding Web UI Elements & Principles

Article by Chris Bank in Web Design -

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 cure­all 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

Continuing in that vein, this chapter will discuss some general and specific principles that have been proven to help other UI systems in the past. Embracing these will help you fully utilize the patterns and visual techniques we learned in the previous chapter. We’ll discuss the essence of interfaces, best practices for specific components, and why the MAYA Principle is important to keep in mind.

The Essence of Interface


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. 


Say you’re designing the interface for the Facebook homepage. The first question you should ask yourself is, “What are the jobs people want to do here?” Since it’s Facebook, the answers will be things like sharing news, pictures, messaging, sending and receiving invitations, etc.

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.

Source: CollabFinder

By hiding your controls until needed, you save on screen space without having to sacrifice user options. It’s a win­win solution that’s been adopted by most high­profile websites at this point. Controls can be hidden and revealed by hovering over the affected content (Pinterest), hidden in collapsed drop­down 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 auto­focus 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 auto­complete, 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.

Source: Adobe

Collis Ta’eed, co­founder 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 trailsand 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 content­heavy 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 single­page 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.