Common sense UI design

Tips on how to develop a better interface based on your users

Blur, Cellphone, Close-Up, Design is licensed under CC0 Public Domain

One of my professors told me something funny about common sense: “It ain’t so common.” Usability, accessibility, simplicity, naturalness– these are all common sense words that we assume go into designing websites and applications. Obviously we want it to be easy for people to use.

It’s very easy to have a pretty interface and logo that you’re eager to throw functions into and send off to users. But effective design involves taking a step back and thinking about letting users not think. Whatever you use for a design process, I’ve collected some ideas that should be a part of it. As an intern, I am still learning plenty, so a lot of these ideas are inspired by resources I’ve recently read, such as “Don’t make me think!” by Steve Krug. However, their basic procedures entail these ideas:

Step back

It’s easy to take an idea and run with it. But I’d encourage you to slow your pace and question the overall goal of the app first. Why is your team even making this tool in the first place? Don’t even start developing layouts or picking where this button or that button goes until you’ve answered that question. Getting a better overview of the “whys” and “whos” will make for better usability. Some of the questions I’ve found most helpful are these:

  • Who are the users going to be?
  • What do they want to be able to do?

Once you answer those questions, you’ll have a good idea of what needs to be included in your design. Knowing what your app does before designing it avoids having to scrap a layout because you didn’t have enough room for something. I had someone suggest to me that I do my wireframe designs using no colors and changing my font to Comic Sans. That way, I’d have no temptation to care what the design would actually be and I’d focus solely on the function location and layout.

KISS (Keep it simple, stupid)

The book “Don’t make me think!” emphasizes the mindlessness of our web usage. Think about how you use the Internet. Have you ever sat down and read every line of text on a webpage? Even if it’s a newspaper article? Even any of these sentences you’re reading right now? If you have (or did), kudos to you, but the majority of people would agree with me in saying that users skim around until they find what they want and then click on that.

An example of this concept is the Eye Tracking study (there are many now). Basically, it’s a heatmap of where a user’s eyes were located while on a page. Here’s one from looktracker.com:

Collective Idea - Common sense UI design - Eye tracking.jpg

Here’s some things to notice:

  • The user was drawn to BIGGER, BOLDED TEXT. Why? To make it obvious that it’s super important. That’s what Toshiba wanted viewers to see first- their awesome deal that’s running out of time, so you better take advantage now.
  • They also liked pictures and colors. Pictures are worth 1,000 words. A picture tells you something using zero words. Nobody wants to read long lines of text on a page. What’s easier to read, bullet points or paragraphs?
  • It’s clear what’s clickable on the page. Buttons and blue text links are things most people have seen on their search engine or their email provider’s page. Let users recognize that a click will send them somewhere new.

You are not your user.

This is probably the oldest rule in the theoretical book. Basically, it means that what you think will be familiar to other people probably isn’t. If you’re designing UI/UX, you’re probably in the upper tenth of computer users. What you do every day is probably way out of the range of what the users of your app can even fathom. Remember that!

Here are some tips to overcome this:

  • Consider what your users do online, then make the experience familiar for them. Where do you usually see a search bar and button? Is the menu bar at the top of the page? Then put those things in those places. Those are some examples of what can positively influence the user experience.
  • Time is money. The faster they can do what they need to, the more satisfied your user will be with the tool. Make it seem like it’s a habit that they do every day.
  • (After you’ve created some initial designs) Run some usability tests. Make some mockups (paper works) and bring in customers and ask them to perform some simple tasks by giving them scenarios: “You want to do __. Can you do that?”

I still find things in UI/UX design that make me say, “Oh yeah, of course.” That’s the whole idea of usability research: make the user experience as natural as possible so that they don’t even have to think (or search around).

These are just a few basic ideas to make your designs more effective. There’s plenty more “duhs”, and they’re bound to change as patterns develop with new technology. Just remember that common sense is up to interpretation: what’s common sense to one person may not be to another. But if you can find patterns with your users, then you can frame your designs around simple, easy tasks that users are familiar with.

Comments:


Post a Comment

(optional)
(optional — will be included as a link.)
  1. Great article! I have been designing UI for over 20 years. Depending on the application, always remember the white space. It adds elegance and purpose to your interface.

    todd@thenkel.org
    Todd Henkel
    March 16, 2017 at 10:57 AM
  2. This article is the perfect for me as i am a new in UI designing. I was looking for the post in which writer included all the tiny details and i got yours. Really appreciable work. Thank You.

    October 27, 2017 at 10:24 AM