Blog

Don’t Overlook These Critical Elements of User Interface Design, Part III

November 7th, 2014 by LookThink

You have arrived at part three of our four part series on critical elements of user interface design that are often ignored. In Part I, we dove into the importance of preserving white space and Part II focused on writing and implementing strategic microcopy.

Part III is all about visual hierarchy.

Have you visited a website where you don’t know where to start? Your eyes dart around the screen because there is too much to look at so you can’t find what you want. You’re lost, overwhelmed, and probably annoyed.

Sites like that are frustrating and often have very high bounce rates (aka users who leave the website after viewing only one page).

What are they missing?

Strategically implemented visual hierarchy.

Visual hierarchy provides clear visual clues to the structure of your content so that your users’ eyes travels from one piece of content to the next seamlessly. It’s based on the principle that great design should be presented in a way that makes intuitive sense.

Here’s an example of a website with poor visual hierarchy:

DMV

Overwhelmed? We are too. Now here’s an example of a website with strong visual hierarchy:

esurance

Notice the difference? The esurance site quickly communicates the purpose of the site and then offers a clear action for the user to take. Within seconds, you know what esurance is and what to do on the site – and you probably noticed a clean, modern, breathable design to boot.

We can’t say the same about the DMV site.

So how can you achieve visual hierarchy? Let’s break it down into three important steps:

Step One

Define your business objectives in order of importance. Ask questions like: What is/are the goal(s) of your business? What action(s) do I want site visitors to take?

Step Two

Consider what your site visitors want and rank those objectives in order of importance. Ask questions like: Why do users visit my site? What are they looking for?

Step Three

Combine steps one and two into one list and prioritize again. This consolidated list should act as your guide for presenting content on your site’s homepage.  We know it’s tempting to put as much information as you can at the top of the page, but remember how overwhelming that is for a user. To keep users on your site, you need to prioritize information and present it accordingly.

There are a several design strategies that we use to employ visual hierarchy:

Size

When you increase the size of an object, you increase it’s importance. The biggest element in a design will be the first place a users looks so make sure it deserves that attention. And remember, size doesn’t just draw attention to an object. It can also be used to take emphasis away from other objects by making those appear smaller.

Color

Adjusting the color of an element in design is a great way to establish content hierarchy and add meaning. But color can be tricky to manage. Be mindful of the message and overall feel you want the color to convey – and be willing to exercise restraint. It’s easy to overload your design with too many colors and shades but it’s best to stick to a few – and be sure to retain a significant amount of white space for breathability…

Whitespace

Remember when we wrote about whitespace two weeks ago? It’s important in visual hierarchy too. Whitespace helps organize your design so that the right content stands out on the page.

Typography

When choosing a typeface, you’ll need to balance two opposing requirements: site consistency and varied font weights/styles for visual intrigue. Choose a typeface that has at least a regular, bold and italic style. You might also look at mixing serif and sans-serif fonts to improve your composition.

Contrast

Contrast for the purpose of visual hierarchy is only related to size and color. Here’s a great test to see if you are doing a good job with contrast: look at your page with blurred vision. Can you still see individual blocks of information? If you can tell them apart, you’re doing great!

We hope this quick lesson in visual hierarchy will be helpful as you work on your site or application. Class is now dismissed!

 


Don’t Overlook These Critical Elements of User Interface Design, Part II

October 28th, 2014 by LookThink

Welcome to part two of our four part series on critical elements of user interface design that are often ignored, but have the power to make or break your user experience. In Part I, we dove into the importance of preserving white space to ensure that you give content room to breathe and be presented in a hierarchical manner, which will give your users a path to follow as they navigate your site.

Today, microcopy is in the spotlight.

Microcopy – like it sounds – amounts to small bits of text strategically placed throughout your interface to bring clarity to the actions you want users to take. It’s the words used on form labels, error messages, small bits of instructional text, loading screens, and buttons. If you think microcopy sounds insignificant or frivolous, think again. It’s everywhere on the web and in the apps you use.

Microcopy

The usability of your interface often comes down to having the right microcopy in the right place so that a user never has to think twice before taking action. The icing on the cake is that you can use microcopy to inject personality into your site which will pay dividends for your brand.

This opportunity rests on using approachable language when implementing microcopy – so write conversationally, as if you are helping someone face-to-face. If your microcopy reads like an instructional manual, rewrite it.

Consider a login screen, for instance. Helpful microcopy should appear if a user enters an invalid username or password. That text should both be friendly and instructive. “Invalid entry” or “Error Type 8654” does not provide help for the user or convey a sense of warmth from your company. Instead, consider phrases like:

“Oops! Your email and password combination do not match.”
“Something isn’t right. Don’t forget, passwords need at least one capital letter and number.”
“It doesn’t look like we have you registered in our system. Sign up here.”

Check out this screen from PNC which is a result of entering incorrect login info:

PNC

Not so friendly, right? The error language used is robotic and ambiguous – and it doesn’t tell me what is wrong with the information I entered. A clearly internal error code should never be exposed on a front-facing screen because it won’t help the user solve their problem – and it results in an unnecessarily alarming experience for users.

Now, check out this login screen from MailChimp.

Mailchimp

First, how can you be upset or frustrated when a friendly monkey is looking at you? Moreover, the micrcopy reads like a real, human conversation. The simple, instructional text tells me what I did wrong and offers Mailchimp’s help if I can’t remember my password.

It doesn’t take a lot to of effort to make an error message friendly but as you can see, it makes a big difference in how users perceive your brand and the comfort level they establish with using your site or app.

So remember this – microcopy is the small text that makes a BIG difference. It deserves careful consideration (and hopefully user testing) before launching a project so make sure to reserve space for it in your budget and timeline.

Keep an eye out for part 3 of this series on Visual Hierarchy!

 


Don’t Overlook These Critical Elements of User Interface Design, Part I

October 21st, 2014 by LookThink

Here at LookThink, we spend our time working on user-interfaces for a wide variety of industries and user-types. From government to health care to consumer facing businesses, we have jumped into the shoes of countless user types and faced just about every challenge you can imagine when it comes revamping an interface or creating one from scratch.

Settling on fonts and colors and making sure all of the desired functionality has its home is of course critical. But there are many other elements to factor into your plans to make sure that your users can intuitively use your website, application, or tool without frustration.

This series of posts will cover four imperative, yet often ignored, elements of user-interface design that can make the difference between a final product that is just average and one that truly stands out in the crowd. If you are interested in anticipating users needs and balancing content and design for a beautiful, functional end result – read on!

Crucial Element #1: White Space

White space or “negative space” refers to the empty space in a design or page layout. It’s often ignored or overlooked – or worst of all filled with content –  but it’s sacred and should be preserved.

It’s tempting to assume that white space is wasted space but this breathing room is critical for readability and usability because it gives you the room you need to present content in a prioritized manner.

One common argument for limiting whitespace is that it pushes elements and content “below the fold,” meaning content won’t be seen if it isn’t immediately visible upon page load. This might have been true 5-10 years ago, but the concept of the fold is outdated in a landscape of devices (think smart phones and tablets) that have trained users to scroll without question.

Let’s take a look at two fitness clubs websites to compare good and bad use of white space.

Exhibit A:
Crossfit

Feel overwhelmed? Don’t know where to start? We’re with you. Crossfit’s site is cluttered and loud. There is far too much content shoved into a small space which creates a stressful experience because users don’t know where they should focus their attention.

Now try this on for size…

Exhibit B:
Equinox

Feeling calmer already? The empty space on the Equinox site allows copy to breathe and helps its readers absorb information. The white space also gives this elegant design the ability to guide the user purposefully from one element to the next.

Legibility and usability issues can often be resolved by judiciously implementing whitespace. Especially on the web, users want to scan content – and properly balanced white space allows for just that.

So if white space is so great why isn’t it universally implemented?

Crafting the content that your users will see first takes a great deal of strategic thought so it’s common to shove copious amounts of content to the top of the page to avoid making any tough editing decisions. The important thing to remember is that the modern web and app user knows there is always more to see “below the fold” and that getting there only requires a quick scroll.

Remember – white space will let your content sing so spend the necessary time to develop strategic content that can be presented in a prioritized manner throughout the page.

Next up: Microcopy!


Why Research Should Be the First Step of Every Technology Project

September 29th, 2014 by LookThink

Kicking-off a technology project, whether it be a website, portal, reporting system, or consumer-facing application, is exciting. It’s probably been a topic of conversation in your office for a long time, so you’re anxious to get started as soon as possible. You’re dreaming up functionality, color palettes, integrations – all the things that are going to make you end-product stand out in the crowd.

We completely understand your fervor to get started. We really do.

But have you thought about conducting research on your current and future user-base before solidifying your plans? Because – wouldn’t it be helpful to create an evidence based plan that allows you to craft messaging, organize functionality, prioritize offerings, etc with confidence?

As an internal stakeholder, you will never be able to put yourself in your users’ shoes. Only your users can provide the type of unbiased feedback that will point your new or revamped tool/site/system in the right direction to achieve the financial goals, engagement rates, retention numbers, user interactions, etc you are seeking.

All that said, reserving space in your budget and/or project calendar for user research is so commonly ignored or overlooked. But it shouldn’t be regarded as a delay in your project start-date or an unexpected cost that weighs down your budget.

Here are three great reasons to make research the first step in your project plan:

1. Knowing your targets users ensures that functionality anticipates – and delivers on – their needs.

When you take the time to understand your users and how they interact with your product, amazing realizations come to light. Let’s say you are creating a mobile app for an online banking website. You could simply repeat the desktop experience – OR – you could poll users to find out what functions they use most on-the-go. Make sure those functions (perhaps mobile deposits and fund transfers) are front and center on the app dashboard screen – and your users will never need to hunt for the functionality they rely on most.

2. Surveying the competition makes you smarter.

In addition to researching your users, it’s key to conduct competitive analysis of other companies in your industry. Analyze their approach to determine what they are doing well and what they are lacking. Remember to consider the public’s perception of your competitors as well. You never have to go far to find user reviews or blog posts and those can be very revealing. If you are able to conduct user interviews or focus groups, these are great opportunities to speak with your competitors’ customers and discuss the reasons behind their allegiance.

3. Research ALWAYS saves time and money in the long run.

Conducting research helps to avoid the missteps that would inevitably be uncovered during user testing. Making changes during the initial phases of a project – when you are strategizing, sketching, and solidifying requirements – are infinitely more economical than attempting to change functional or design features in the final stages of a project. When you research first, it’s less likely you will need to make drastic adjustments during development because you had your user in mind when building – and that means your project stays on time and on budget. What could be better?

Have questions about our research practice? We would love to chat!