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.
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.
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.
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
2:59 PM
Rating:
No comments: