Jan 7, 2015

Understanding Web UI Elements & Principles

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 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.


    Source: Dunlop Tires

    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. Well­thought 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).


      Source: Spotify

      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; over­explaining 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.



      Fast­forward 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.

      Source: Portage

      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 gut­check 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.