How to Arrange Interface Elements

When I was a teenager, I always felt like my design heroes had some kind of special sixth sense. I had done my homework—they had no special training or education, yet they sized and placed elements in their interfaces in a way that seemed to make perfect sense. I practiced tirelessly, designing and re-designing Photoshop-based websites late into the night. My visual style improved with every iteration, but the actual interfaces remained so-so. For all my practice, intuition could only carry me so far.
It wasn’t until college that I started reading more design books and realized that I wasn’t asking the right questions during my process. Questions like:

  • Why is the user on this screen?
  • What is the most important piece of information to them?
  • What’s the next action they want to take?
It was no longer about patterns and standards and all about how those can facilitate the user’s experience. This was a turning point in my approach to design, and the responses to my work changed accordingly. Suddenly, a lot of folks were asking me how I do what I do—almost as if I had developed that sixth sense.
I’m going to demonstrate how those questions impact my design thinking with a walkthrough of a design I’m working on now.

Identify the primary goal

Here’s a bunch of stuff I need to put on the class page for Treehouse, the new Think Vitamin Membership.
tvm1 How to Arrange Interface Elements
A class is basically a playlist of videos related to a particular topic—Design Fundamentals or CSS Animation, for example. I also need to include some information about the video and actions for the class.
Before I do anything, I have to get into the user’s head. Designers are fortunate to be equipped with fantastic imaginations, and this really comes in handy when you want to pretend you’re someone else. Alright, I’m the user. Why am I on this page? What do I want to do? This is the time to be discerning—I have to decide on their primary goal.
I’m going to assume their primary goal is to watch the class, so that’s my focus.

Group and Assign Value

Now that I know my focus, I can group the elements and assign value from there.
tvm21 How to Arrange Interface Elements
Of all the information about the class, the description, thumbnail, and author are most important is helping the user determine whether they want to watch the class. The total duration of the playlist and number of videos in it is less important.
Similarly, the two most important actions are watching the class and taking the quiz. Less important are the RSS feed, downloads, and social sharing.

An Arrangement of Elements

Once I’ve identified the most and least valuable elements, it comes down to making the important stuff stand out and de-emphasizing the unimportant stuff. There are lots of ways to make things stand out—size, boldness, contrasting color. Since I’m sketching, I’m just going to use what I can represent on paper: size and position.
tvm3 How to Arrange Interface Elements
What’s important here? The big stuff. The title is a large font size, the “watch class” action is the largest button, the playlist takes up the most space, and the quiz button is differentiated from the less important action button next to it by bigger size.
Remember: If you use the same visual style for two elements, you’re saying they’re equally important.

Open to Change

I never get it right the first time, always making further re-arrangements as I go along. Don’t be afraid to scrap layouts and start over—if you get the feeling things could be better, you’re probably right. With every change, take a moment to get in the user’s shoes and walk through the interface; asking the same questions about their goals, desired actions, and intentions.
How to Arrange Interface Elements How to Arrange Interface Elements Reviewed by JohnBlogger on 5:28 PM Rating: 5

No comments: