LearnHow to Arrange Interface Elements

Treehouse
writes on July 14, 2011

Share with your friends










Submit

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.

84 Responses to “How to Arrange Interface Elements”

  1. Nice post Allison. I love seeing how other designers work and their thoughts behind addressing UX.

  2. Nice post Allison. I love seeing how other designers work and their thoughts behind addressing UX.

  3. 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.

  4. 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.

  5. 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…

  6. 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…

  7. Anonymous on July 15, 2011 at 5:11 am said:

    how much you pay for disqus ? 😛

  8. Anonymous on July 15, 2011 at 5:12 am said:

    By the its a good tutorial for beginners and pro even though

  9. 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.

  10. 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.

  11. 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!

  12. Sagar Ranpise on July 15, 2011 at 1:11 pm said:

    Great UX creation process for any website! Thanks a lot for sharing!

  13. Sagar Ranpise on July 15, 2011 at 1:11 pm said:

    Great UX creation process for any website! Thanks a lot for sharing!

  14. an important lesson to every web designer, fully informative as well as clear.

  15. Anonymous on July 15, 2011 at 3:02 pm said:

    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!

  16. Anonymous on July 15, 2011 at 3:02 pm said:

    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!

  17. Jens Fredrik Allworthy on July 15, 2011 at 9:03 pm said:

    Love your article – Thanks for sharing!

  18. Anonymous on July 16, 2011 at 4:31 am said:

    If you want to use the StringBuffer, it is basically the same code, except where you declare the variable and initialise it.http://aquascoop.net

  19. Practice make the master. Nice article!

  20. Practice make the master. Nice article!

  21. Great Insight! 

  22. Great Insight! 

  23. Anonymous on July 18, 2011 at 4:22 am said:

    Hello! I have an excel program which interfaces with an access database with various tables. It basically deals with products and associated data.
    http://aquascoop.net

  24. Anonymous on July 18, 2011 at 4:22 am said:

    Hello! I have an excel program which interfaces with an access database with various tables. It basically deals with products and associated data.
    http://aquascoop.net

  25. 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)

      • Anonymous on July 27, 2011 at 11:26 am said:

        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.

  26. Articles like this justify why I check out the blog every day. Thanks Alison

  27. Articles like this justify why I check out the blog every day. Thanks Alison

  28. Anonymous on July 18, 2011 at 2:31 pm said:

    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!

  29. Anonymous on July 18, 2011 at 2:31 pm said:

    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!

  30. Anonymous on July 18, 2011 at 6:48 pm said:

    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!

  31. Wooow! amazing article Allison! Super valuable information! thanks a lot!

  32. Wooow! amazing article Allison! Super valuable information! thanks a lot!

  33. 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.

  34. 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!

  35. 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. 

  36. fantastic writeup fellows. I find your blog the most informative of them all

  37. fantastic writeup fellows. I find your blog the most informative of them all

  38. I am always here watching your posts, do not comment, I’m an observer, and learn a lot here, Thank you Allison, Brazilian greetings. 😀

  39. 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.

  40. Great post! The three questions are such a great way to keep the design focused on the user’s experience. Thanks for sharing.

  41. Great post! The three questions are such a great way to keep the design focused on the user’s experience. Thanks for sharing.

  42. Nice summary. yes. it takes time to figure out what we do and what we actually want to be.
    ฉีดพลาสติก

  43. I love your sketches! It’s so inspiring to see others way of work. Thanks.

  44. I love your sketches! It’s so inspiring to see others way of work. Thanks.

  45. Anonymous on July 25, 2011 at 5:11 am said:

    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!

      • Anonymous on July 28, 2011 at 7:24 am said:

        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. :)

  46. 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.

    :]

  47. 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.

    :]

  48. Andyajadeh on July 28, 2011 at 8:21 am said:

    Thanks Allison, that’s great article.

  49. Your article, and ideas behind UI design process, remind me of a method that I have been using for years now – Architectural Patterns in Web Design. I was given a link to this article about 6 years ago and have been using this method ever since – http://37signals.com/papers/introtopatterns/index. Your process is a useful update to how I have been doing this, cheers! :)

  50. Your article, and ideas behind UI design process, remind me of a method that I have been using for years now – Architectural Patterns in Web Design. I was given a link to this article about 6 years ago and have been using this method ever since – http://37signals.com/papers/introtopatterns/index. Your process is a useful update to how I have been doing this, cheers! :)

  51. @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.

  52. xy123123 on July 5, 2013 at 1:31 am said:

    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.

  53. 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)

  54. 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.

  55. 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.

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more