Blog

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?


LookThinkLink: August 7

August 7th, 2014 by LookThink

1. Scrolling Experience

There are many methods to enhance the look and feel of a site and implementing a scrolling experience is one of the most popular methods today. Check out MACAW‘s redesign – we’re digging the colors, icons, succinct content, and powerful testimonials.

MACAW

2. Inspiration

Like bikes and art? Looking for some creative inspiration? “100 Hoopties is a design challenge project where every day for one hundred days – an iconic poster design will be reanimated through scrapped bicycle parts.” Which one is your favorite?

100Hoopties

3. Illustrator Exporting Tips

Ever wish you could export multiple Illustrator art-boards in a PNG file? Oh you can. Check out this post that has a few scripts that lets you do just that. Useful, huh?

IllustratorExporting

4. Pure CSS Off-Screen Navigation Menu

Hiding a website’s primary navigation has become a vital component to responsive website design. Did you know you can accomplish that with pure CSS? This article will show you how to make a simple version of the off-canvas menu and sliding effect using only CSS. Pretty cool stuff.

CSSoffScreen

5. Great Distraction

Need five minutes away from whatever your working on? Check out this animation.

Distraction