UI Design 101
Usability is a highly sophisticated field. And it’s constantly changing. To navigate that complexity, I keep six core principles of UI design in mind. They help me stay focused on what’s important.
You can apply these guidelines to any UI project you’ve got. Whether you’re designing web applications or washing machines, the principles stay the same.
Here they are.
Consider the people actually using your product. When I’m working on an interface, I imagine not just the general demographic I’m designing for, but the specific people. Instead of imagining “seniors,” for example, I imagine my dad or mom. How would they interact with the screen? What would frustrate them? Or make them smile?
Copywriters tell me that they work the same way. They imagine in great detail the person for whom they’re writing — even inventing details about their clothes, family, and hobbies. It helps them see their target audience clearly, and they write with more focus because of it.
Make it simple. It’s easy to get caught up in the coolness of your design. Or to shove elements in that users “might need.” Every so often, step back and remove every element that you possibly can from your interface. Be ruthless – don’t think anything is too clever or important to strip away.
Then, take a hard look at what’s left. Did you really need those extra elements? Or is the UI cleaner—and more user-friendly—without them?
Draw attention to what’s important. This guideline sounds basic—but it means everything. Think carefully about the number one action you want your users to perform. Then make that action the most prominent.
For Chipotle, that means putting “Create New Order” right at the top of the screen. For Dragon Dictation, it means placing a single red “record” button smack dab in the center of the interface—with nothing else around it.
Create barriers. On the opposite side, think about what actions you don’t want users to take—and put some barriers around them. For example, Amazon doesn’t mind if you read the “About” information on their web app. But it’s safely buried under a generic “More” navigation button.
Why? Because that information’s just not that important. It’s not central to the app’s core function: helping users quickly find and buy merchandise.
Get feedback. As a matter of fact, get lots of feedback. Share the UI with family, friends, focus groups. People who are familiar with web apps, and people who know nothing about them. Industry experts and kids just out of college. The more information you get on how real people interact with your UI, the more you can perfect it.
Just remember: collect all the data you want, but ultimately, you have to decide what’s the best design.
Consider someone performing a task a hundred thousand times. Think about the people who will use your application frequently. What are they going to get sick of? What’s going to slow them down?
For example, I hate the fact that you have to tap “Play” then “Submit” every turn on Words With Friends. That’s two taps for every single action a user performs! Multiply that by five games, two turns a day, for weeks on end. That’s hundreds of extra clicks.
Yeah, it’s just a game. But it still gets annoying. And you don’t want annoyed users for your web app.
Usability is a hugely sophisticated field, lots to learn, changing … never hurts to remember the basics.
And the Winner is… US!
Atomic Interactive, the digital marketing agency headquartered in Dayton, Ohio, created the design, development and marketing strategy for Slickplan.com. Slickplan was created to fill a hole in the web design process that Atomic encountered every time they picked up a new project. Like most design agencies (and freelance designers), Atomic begins the web design process by creating a sitemap that displays the page titles and navigation of the finished product. A growing frustration within the Atomic team due to an alarming absence of quality sitemap creation software led to a proactive decision – “We’ll make our own!”
Fast forward two years and two versions of Slickplan – the web application has become a trusted design industry resource for over 35,000 users who love the simplicity of the creation process and the beauty and functionality of the finished sitemap. This past weekend, the Atomic Interactive team was overjoyed to learn that Slickplan was chosen as one of three finalist for Best New Web/Mobile Application in the App It Out contest hosted by
At the conference, 4 members of the Atomic team will have 10 minutes to showcase the finest points of Slickplan in front of a huge gathering of web designers, developers and digital agencies, as well as a panel of judges that will be voting to send one lucky app development company to a conference in London. Future InSights Live is conference that hosts cutting edge trends and personalities in the web design community, and this year such well-known industry personalities and web entrepreneurs as Dan Cederholm, Josh Clark, Steve Fisher, Paul Boag and Molly Holzschlag will be featured as speakers.
Ryan McCoy, one of Atomic’s co-owners and a member of the presentation team, is particularly excited. “This is a great honor to attend the Future InSights Live conference to present our software to all of our peers within the interactive community,” Ryan said. “We created Slickplan because of a need we had as an interactive agency, and to get a chance to share our creation with a gathering of all these potential users is really a dream come true.”
Slickplan’s creators are well aware of the fact that this opportunity presented itself thanks in part to the contributions of Slickplan’s users. Ian Lawson, Atomic’s other co-owner, explains, “The improvements made to Slickplan are based on our own day-to-day use and feedback from 35,000 very active users. Together, we’ve made something great.”
Visit our media kit for more information or contact us by email or phone, 937 232 1155.
Great Sitemaps = Great Websites
Everyone gets excited about building a website.
Why not? Creating a new site for your firm is a big deal. Often, the effort combines new branding, new functionality, and new ways of interacting with your clients.
Unfortunately, in all the excitement, some people rush the process. And the part they often gloss over is putting together a sitemap.
A sitemap looks like no big deal. It’s just an outline of your website – an “org chart” showing where each page on your site will fall.
But in reality, your sitemap is critical. It’s the foundation on which your entire website is built. It defines how your content is organized, what’s included, and what’s left out. A good sitemap also facilitates your sales process, laying out intuitive pathways for clients to follow through your site.
When folks rush a sitemap, a number of problems can occur.
Sometimes, critical content gets left out. Or the content is there, but buried in such a strange place that no one can find it.
Other times, the sitemap has to be heavily revised. And if we’ve begun design and development, that means work must be redone. On a simple site, that could mean an hour or two of extra labor. On a complex site, that could mean days.
Luckily, there’s an easy way to avoid these problems. Spend adequate time on your sitemap.
In other words,
- Think carefully about the goals of your website before you start work. Your navigational structure should facilitate your sales process, not represent any random old organization.
- Get third-party input. Talk to colleagues or trusted customers about how they approach your current site. What do they expect to find? What do they most often look for on your site? What do they have trouble finding?
- Make organization a top concern. Think carefully about what your customers need to know, then decide how that information should be organized. Make detailed notes about what content should go on each page of your site, so nothing gets left out.
- Finally, talk with us. It often helps to have one of our project managers put together a draft sitemap for you, based on your input and ideas. Because we’re not as close to your content as you are, we can often see it more clearly, and help you organize it in a logical, intuitive fashion.
And remember, take the web development process one step at a time. When you’re working on your sitemap, stay focused. Don’t get distracted by what photos might go on each page or what colors your site will be. Nail your content first, and everything else will fall into place.
Process=Product
These days, it seems like we’re bombarded with products whose sole purpose is to move life faster.
Take coffee, for example.
I’m too young to remember, but I bet that when drip coffee makers came onto the market, people were blown away by the ease of use. No more boiling water on the stove! Then came a certain retailer who brought good coffee to the eyes and tongues of the masses, in a convenient to-go cup. Next came their instant coffee, supposed to be “just as good” as what you’d get at their coffee shop.
At this point, how much more time can we save?
Don’t get me wrong; I’m all for efficiency but personally, I see something being lost in our rush for results. I think we’re losing our connection with the process of creation. We’re forgetting the tangible sensation and satisfaction of making something. Instead, we just consume.
This is why I draw.
When I pick up my pencil, I start by drawing basic shapes. Then I flesh these shapes out into whatever they’re supposed to be: a face, an arm, a car, or a building. Then I go back and thicken some lines, scribble here to indicate shading and light, and think about how to highlight what’s important. After this, it’s time to really polish things up, do some fine shading and fix lines. And this doesn’t mean I’m done. I may get out another piece of paper, slap it on top of my drawing, go to my lightbox, and redo the whole thing.
Something happens when I slow down and immerse myself in this process. Psycologists call it being in a “flow state.” I just know that it’s when I’m most creative, and I find that happy mistakes often occur — like when I wind up drawing something other than what I intended, but it looks great anyway.
Going through such a time-consuming process when I’m drawing may seem tedious, but I believe that it’s an essential part of the creative process. It helps me connect with what I’m creating, care about it, and feel like I’m part of it.
Designing a website isn’t much different.
I start by drawing squares and circles on a page, carefully deciding where text, images, and buttons should go, according to the client’s needs. I may end up doing this three or four times until I find what’s right for the job. Then it’s onto choosing fonts, colors, and images, all the while keeping in mind the site’s audience and purpose.
I constantly hear people say that they’re “passionate about their work.” I don’t think this can really be understood until you yourself are passionate about something. As designers, we need passion. We need to feel connected to our work.
That’s accomplished by giving the process of creation the time it needs. Only then can we create something that we’re proud of — and something that our clients will be proud of too.