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.

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.


This post has been kindly translated into Korean.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

84 comments on “How to Arrange Interface Elements

  1. Gives me a good idea on re-designing my own video tutorials for a Web site (braindoodles.net) I’m doing for my MFA on visual note taking (also like your icons!). I had originally developed the player using Flash and XML (over the past year) but have since wanted to re-work the lessons to be more accessible to iOS devices.

  2. Gives me a good idea on re-designing my own video tutorials for a Web site (braindoodles.net) I’m doing for my MFA on visual note taking (also like your icons!). I had originally developed the player using Flash and XML (over the past year) but have since wanted to re-work the lessons to be more accessible to iOS devices.

  3. It’s super useful to have a glimpse into the way others work. Thanks! I think I’m going to grab my light blue pen now…

  4. It’s super useful to have a glimpse into the way others work. Thanks! I think I’m going to grab my light blue pen now…

  5. Great straight to the point article, I like the way you prioritise the list of important goals and then create the design to satisfy those requirements.

  6. Great straight to the point article, I like the way you prioritise the list of important goals and then create the design to satisfy those requirements.

  7. Great post on the fundamentals of design, and it’s really good that people in positions like yours keep highlighting design thinking and methodology as opposed to photoshop techniques, patterns and showcase roundups. It’s imperative to the integrity of our industry that we rid ourselves – and, more importantly, our clients – of this notion that design is somehow limited to visual aesthetics. Keep it up!

  8. Good work Alison. I do something similar but set out a hierarchy of importance and normally use a numbered list! Love your handwriting in uppercase btw: peng!

  9. Good work Alison. I do something similar but set out a hierarchy of importance and normally use a numbered list! Love your handwriting in uppercase btw: peng!

  10. Allison – You state “It wasn’t until college that I started reading more design books…..” – do you have any books you’d recommend for this sort of thing? I find myself in your shoes now

    • Sure! A couple favorites are The Design of Everyday Things (Norman) and The Psychology and Judgment and Decision-Making (Plous). The latter isn’t really about design, but it’s a great little dive into how people process.

      • Thanks! I’ve ordered The Design of Everyday Things as it’s the second time I’ve been recommended it! Great post as well – just the sort of thing that people seems to miss when it comes to design! (Followed you on twitter too in a hope there’s more like this to come :D)

      • The Design of Everyday Things (Norman) is really great. Was forced to read it as part of my degree, afterwards I sold all the other books except for it.

        • That’s awesome. I sold just about everything in a cross-country move a couple months ago, and that was one of the first books I re-purchased.

  11. Great post! This is something that we are constantly working through over and over with our designers. Hard part is not what we think it should be but what our clients want. Which sometimes skews the feature priority. But great post! Thanks!

    • Thanks! And yeah, totally—there’s definitely a little art to balancing between user goals and business goals. Perhaps that’s one for another post!

  12. Great post! This is something that we are constantly working through over and over with our designers. Hard part is not what we think it should be but what our clients want. Which sometimes skews the feature priority. But great post! Thanks!

  13. I needed this for a design that I am working on that doesnt have a lot to make it pop. Thank you for the advice!

  14. Nice post. 

    Too many people forget to put on their ‘User Googles’ and experience the layout and flow on a design from the perspective of the people who are going to interact with it.

  15. Great Article Allison! A good introduction into one of the core principles behind good UX – stepping into the users shoes which i feel many people neglect to do these days or even forget about! Also agree with what Espen Brunborg had to say about visual aesthetics! Keep up the great work!

  16. Great post =) It’s like use designers just pick up what we need to do with out even knowing, I was in the same position as you. Wasnt until after i finish my diploma that i noticed i needed to start doing wire framing and prioritization. 

  17. Great stuff Allison. When you look at a typical site, how much time do you spend thinking through the design of this site?

    • Ooh, great question. The real answer is “as long as it takes”—and things inevitably change when you get to the visual design part—but if I had to guess, I’d say I usually spend 2-4 hours working through individual views and getting them presentable for sharing.

  18. Great insight Allison. Practice makes perfect. I actually have no class on UI design what so ever, but in order to get my Startup moving, I have to observe others and take into account why they put that elements there. 

    I also like the way you emphasized on impersonating your users when designing a UI. I always find this extremely useful. You need to understand them, know what they are looking for. It also help when designing a UI for startups, that you are one of the person who are also interested in using it. For example, http://mycolorscreen.com is my stratup and I always use it daily. This gives me a better perspective of how the user response to the UI I did.

    Thanks for sharing such great insights. Nice ending on Open to change as well.  :)

    • “I also like the way you emphasized on impersonating your users when designing a UI.” — Totally. The alternative is heavy reliance on patterns, which can only get you so far. Nice website!

      • Thanks Allison. Really appreciated. Looking forward to more of your post about UI. :) I am a self taught UI designer and posts like this is always useful for me. :)

  19. Great discussion. Sadly, I don’t sketch enough and clients seem to think they know more than the designer/developer so they insist on things being in certain places. A fun exercise I can suggest is to write key terms/words on Post-It notes and place them on a board to see visual hierarchy. It’s very easy to move around, trash or rename if needed.

    :]

  20. Great discussion. Sadly, I don’t sketch enough and clients seem to think they know more than the designer/developer so they insist on things being in certain places. A fun exercise I can suggest is to write key terms/words on Post-It notes and place them on a board to see visual hierarchy. It’s very easy to move around, trash or rename if needed.

    :]

  21. @allisonhouse:disqus Great read, always nice to get a look into a successful designer’s workflow. I’m gonna try this on my next project, I usually start with a list (not dissimilar to yours) then draw increasingly large and detailed wireframes until I feel like I’m ready to move to chopshop.

  22. A abeyant applicant would be the redesigned Indica. The modifications fabricated to the car are appreciably impressive. Digimaster 3No tweaking was fabricated to the air clarify but administration modifications and all-important upgrades fabricated the car “automotively palatable”. Quite obviously, the Indica’s new-found fit, performancelexia 3, and accomplishment are advised to bang aficionados bendable spot.

  23. Thanks! I’ve ordered The Design of Everyday Things as it’s the second time I’ve been recommended it! Great post as well – just the sort of thing that people seems to miss when it comes to design! (Followed you on twitter too in a hope there’s more like this to come :D)

  24. That’s awesome. I sold just about everything in a cross-country move a couple months ago, and that was one of the first books I re-purchased.

  25. Ooh, great question. The real answer is “as long as it takes”—and things inevitably change when you get to the visual design part—but if I had to guess, I’d say I usually spend 2-4 hours working through individual views and getting them presentable for sharing.