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

84 Responses to “How to Arrange Interface Elements”

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

  2. Dan Morgan on August 4, 2011 at 3:43 pm said:

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

  3. David Ashkanasy on August 3, 2011 at 6:22 am said:

    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! 🙂

  4. David Ashkanasy on August 3, 2011 at 6:22 am said:

    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! 🙂

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

    Thanks Allison, that’s great article.

  6. Chris Ota on July 26, 2011 at 11:27 pm said:

    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.

    :]

  7. Chris Ota on July 26, 2011 at 11:27 pm said:

    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.

    :]

  8. 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.  🙂

    • Allison House on July 28, 2011 at 7:21 am said:

      “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. 🙂

  9. S. Szachnowski on July 24, 2011 at 7:12 pm said:

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

  10. S. Szachnowski on July 24, 2011 at 7:12 pm said:

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

  11. ฉีดพลาสติก on July 24, 2011 at 6:02 am said:

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

  12. Bridgid Gallagher on July 21, 2011 at 8:54 pm said:

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

  13. Bridgid Gallagher on July 21, 2011 at 8:54 pm said:

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

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

    • Allison House on July 28, 2011 at 7:25 am said:

      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.

  15. Maikon Morais on July 21, 2011 at 1:56 pm said:

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

  16. Snoggle News on July 21, 2011 at 6:23 am said:

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

  17. Snoggle News on July 21, 2011 at 6:23 am said:

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

  18. luke alford on July 20, 2011 at 1:28 pm said:

    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. 

  19. Nicolas da Costa on July 20, 2011 at 9:02 am said:

    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!

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

  21. Bruno Passos on July 19, 2011 at 10:04 pm said:

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

  22. Bruno Passos on July 19, 2011 at 10:04 pm said:

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

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

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

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

    • Allison House on July 19, 2011 at 5:11 pm said:

      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!

  26. Matthew Votsikas on July 18, 2011 at 2:06 pm said:

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

  27. Matthew Votsikas on July 18, 2011 at 2:06 pm said:

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

  28. Favourite media on July 18, 2011 at 6:49 am said:

    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

    • Allison House on July 19, 2011 at 5:09 pm said:

      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.

      • Favourite media on July 20, 2011 at 8:48 am said:

        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.

        • Allison House on July 27, 2011 at 5:34 pm said:

          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.

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

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

  31. Han-seob Sim on July 18, 2011 at 2:19 am said:

    Great Insight! 

  32. Han-seob Sim on July 18, 2011 at 2:19 am said:

    Great Insight! 

  33. Alonso Lamas on July 17, 2011 at 12:47 pm said:

    Practice make the master. Nice article!

  34. Alonso Lamas on July 17, 2011 at 12:47 pm said:

    Practice make the master. Nice article!

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

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

    Love your article – Thanks for sharing!

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

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

  39. Jivan shrestha on July 15, 2011 at 1:36 pm said:

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

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

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

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

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

  42. Espen Brunborg on July 15, 2011 at 12:23 pm said:

    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!

  43. Chris Pangburn on July 15, 2011 at 6:38 am said:

    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.

  44. Chris Pangburn on July 15, 2011 at 6:38 am said:

    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.

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

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

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

    how much you pay for disqus ? 😛

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

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

  49. Thomas Michaud on July 14, 2011 at 10:15 pm said:

    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.

  50. Thomas Michaud on July 14, 2011 at 10:15 pm said:

    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.

  51. Fraser Deans on July 14, 2011 at 10:02 pm said:

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

  52. Fraser Deans on July 14, 2011 at 10:02 pm said:

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

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