Blog

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!

 


2014 Summer Synopsis from the Snarky Intern

August 18th, 2014 by LookThink

Friday marked the last day of Sarah’s summer internship with us and we were oh so sad to see her go! We were undoubtedly spoiled by her enthusiasm and willingness to take coding projects by the horns and we will certainly miss her can-do attitude. We wish her the best of luck in her remaining semesters at RIT. Check out her parting words below and follow her at @Sarah_federman.

Dear Lookthink,

Oh, hello! I guess it’s the end of the summer, isn’t it? I figured Lookthink deserved a shoutout for providing an amazing internship experience. Thanks, Lookthink! You rock! (Do I get a hoodie now?)

Being a part of the Lookthink team is an experience in and of itself. I’ve never met another group of people that consistently beat me to the sarcastic one-liners. LT cultivates a productive, fun, witty, and creative culture in the office, which is imparted in everything we do. See how I said “we?” They’re super inclusive, too.

But sadly, it’s time to get rid of the “we,” and go back to “they.” Here are some closing thoughts and things I’ve learned:

1. Being the only intern in a small office, I had a lot of responsibility when working on projects. No coffee runs…unless Nate wanted his pink sugar. I learned a lot about time management and when to ask for help. Being self-taught with most of my programming, I’m used to turning to Google for answers and sifting through document after document. It took me a little while to realize I had an entire office full of knowledgable resources with valuable experience. It wasn’t “giving up,” it was asking for help. A team member with years of experience is infinitely more valuable than a vague stack overflow answer.

2. In my interview, Joe asked me, “Do you think you have much more to learn about CSS?” And I came up with some answer about how CSS is constantly changing and needing to learn more and more as it evolves. And that’s true, but I really had no idea about how many little things I didn’t actually know about CSS. These things became wildly apparent to me as I took on bigger projects.

I read something recently about learning web development. It said something like: “It’s very easy to start learning front-end web development. But it’s very difficult to get good at it.” This rings so true to me now. I may have a solid footing in the basics, but I have a ways to go. I’ve learned a lot working here, but I’ve realized the dangers of complacency. There is always something new to learn, even if it’s something as small as understanding how browsers process :nth-child selectors (Thanks for that one, Greg!).

3. A long, long time ago, I did a very small amount of freelance. I did whatever the clients asked, because they were the ones paying. But from watching Molly and Rachael, I’ve learned that part of what clients are paying for is your expertise. The best clients are the ones that realize this and work with us to compromise. Blindly doing whatever a client asks is almost dishonest. You have a responsibility to work with them to create a better solution. Again, it’s a balance. The best work involves plenty of compromises.

4. Learning on the job is really amazing experience. I had never touched PHP or WordPress before this summer, and I had never put what I knew about sass and sass frameworks into practice. It’s super rewarding to hit an obstacle, overcome it (with help, sometimes), and see the results in a tangible finished project.

This is getting too long. But there’s plenty more, I promise. Side notes:

Random things I will definitely miss about Lookthink:
- The weekly meeting intro questions. You guys have such…interesting…answers.
- Bethany’s swearing. At everything.
- Joe’s check-ins (especially over lunch)
- Molly and Rachael squealing about cute baby things.
- That one time the massage therapist started talking about rainbows. Or something.
- Trying to get answers from Greg. Out-snarked every time.
- Nate’s tacos. Yas.
- Dropping absolutely everything to watch the The World Cup.
- Erik talking about the World Cup.
- Randomly running into Chris on the commute. Chris realizing that I’m next to him, 5 minutes later.
- Jihye’s shouting at the top of her lungs. Every day. (…not really.)
- Goodshuffle jokes.
- Vim jokes.
- Working on three screens. How will I ever go back?!
- Hip Hop Fridays.

…etc. etc. etc.

Aaaand things I won’t miss:
- Fireworks.
- IE8 Compatibility.
- Temporarily Broken A/C.
- Missing ALL the movie references because I’m a baby.

…That is all.

So I just wanted to say thanks again for a great summer. I learned lots. I will try my hardest to take it with me wherever I end up next.

Sincerely,
Sarah Federman

P.S. Do I get a hoodie now?