June 22nd, 2006

Unconscious Interface Design

12 comments on 1943 words

I’ve seen a lot of applications in the past few months, some have been around for a while and some are new to the scene, but the one thing all these applications have in common is unconscious design decisions.

What is Unconscious Design?

Marco Dorante has a very complete and informative explanation of unconscious design, but I’ll do my best to summarize it here.

Basically, unconscious design is design where there is no “conversation with the situation”. Sometimes we make design decisions based out of habit; we are simply following the norm; or we just never asked ourselves “Why?”. Every design decision we make should involve us having a “conversation with the situation” if we wish to break free of unconscious design.

If we were the set designer for a Broadway play, we would probably scrutinize our decisions with much more precision because we’re working with physical objects. Every prop on the set is there for a reason. If there was a musical chair scene coming up, we’d expect to have chairs lined up in some fashion taking center stage, and possibly a boom box (1980s!) set slightly out of the main focus of the scene.

We know that when an audience expects to see a musical chair performance, the chairs should take center stage, and although music is vital to the scene, we shouldn’t put the guy with the boom box directly up front.

These decisions seem like common sense, so what happens when we apply the “scene in a broadway play” analogy to a weblog system like Wordpress? Can we find some props that shouldn’t be on stage? Or maybe some asset that demands to much attention that shouldn’t?

Unconscious Design in Wordpress

Wordpress is a very popular blogging platform, and for good reason. The setup process is extremely easy, and it’s widely supported and documented among other things. So does the interface design in Wordpress contain unconscious design? Yes, Wordpress is full of unconscious design, and we’ll take a moment to point out a couple of them.

wordpress

The screenshot above is from the Wordpress “manage” page. Your probably pretty familiar with similar screens because you’ll find it in almost every content management application. By looking at this screen, you should be able to spot some occurrences of unconscious design. Do you think that every item shown in this screen was included in the “conversation with the situation?” If each of these items was a physical item we literally had to carry on stage in some way, would we have added them all? Well, lets answer this question by thinking about our audience and having our “conversation with the situation” as we put on our fictitious Broadway play “Wordpress”.

Wordpress on Broadway

We are putting on our highly anticipated Broadway play “Wordpress”. The current scene is one where our actors (users) will be managing their articles. We could conclude that the props we have to choose from come from our database columns, and possibly some props are just standard in other plays similar to ours.

Our props

  • ID
  • When
  • Title
  • Categories
  • Author
  • View Link
  • Edit Link
  • Delete Link

Setting the stage for scene 1

We know that in order to have a successful play we must please at least 80% of our audience. As much as we’d love to please everyone, there will always be a minority of people that are simply never satisfied. In this case, it’s safe to apply the Pareto Principle, better known as the 80/20 rule.

Let’s start by asking ourselves if we need the ID prop in our scene? What purpose will it serve and why is it beneficial? Can we still maintain 80% approval if we didn’t include it?

The ID field has no real benefit to the majority of our audience. It is vitally important to make the scene work, but does it need to be front and center on the stage with the rest of our props? I think not. Considering most people will scan a page from left to right in some fashion, the ID field is given a supreme amount of importance on this page, but serves little or no importance to the majority of our users. I think it’s safe to conclude that we could safely get rid of the ID field in this scene and it would have little to no impact on our audience.

I’ll let you continue this exercise with the rest of the props we’ve defined above because I’m sure you’ve gotten the point of the game. Just to stir up your thoughts, here are a few questions you might include in your conversation:

  • Can we get rid of the “View link” by just linking the title?
  • How important is it to know the categories of every article in this scene? Is it equivalent to knowing the ethnicity of our actors? If we wanted to know such details about an actor(s), surley we wouldn’t want to know this about all of them, and we would further pursue the actors that interested us (e.g. Clicking a link to view more details)
  • If every item on the screen was a 100lb weight, would we have been more aware of the fact that all the weights didn’t need to be put on the stage?

Scene 2: You don’t need teapots to drink tea

If you we’re enjoying a nice cup of tea, would you need to refill your cup every time you took a drink? The answer to this question is pretty obvious, but how does drinking tea have anything to do with interface design? You’d be surprised just how much they have in common. Lets take a look at the next screen shot:

Wordpress

When you log into Wordpress you get this “Latest Activity” box off to the side. We can see that we have our recent comments shown here. This is handy feature, and one that is very important to a weblog because a blog is about communication (regardless of what some think).

The one thing that strikes me as being out of place in this scene is the Edit link. Just like every time we take a drink of tea—we don’t need to fill our glass, every time we receive a comment—we don’t need to edit it.

The ability to edit a comment is an important feature, but is it something we need to do every time we receive one? I’m not convinced myself.

Someone might argue that this could be a pretty handy feature for those days where spam comments are rolling in. My questions to you would be: a) Can you judge every spam comment based on it’s title (as in the screen shot)?, and: b) If you knew a comment was spam based solely on it’s title, wouldn’t a delete link be much more appropriate? Why would you ever want to edit a comment that you knew was spam?

We’re All Guilty

Every designer has probably been guilty of making an unconscious design decision before—myself included. The reason we make mistakes like this is because most of the time we aren’t consciously aware of them. Does this mean we are bad designers? Not really. It just means that as we become more aware of our situation, we will be better equipped to handle them. We have to break out of “the norm” and make sure the props we place in a scene are there for a good reason and are given the correct amount of importance. Because it’s so easy to make these mistakes, we’ll always make them unless we train ourselves to become more aware of what we’re doing.

Just as a fun (or not-so-fun) exercise, go back through some of the interfaces you’ve created, or for extra fun, browse through the interfaces at Opensource CMS and apply these principles. Spot any unconscious design decisions?

Discussion

  1. sosa sosa said on June 22nd

    That’s why I think that MovableType’s interface is fairly superior even with less features. As a long-termn MT user, I just can’t stand WP’s interface, it’s ugly.

  2. Nate K Nate K said on June 22nd

    Incredible post! I think I get a funny look from people when I discuss this with them. Im not a designer, but I will look to see WHY things are being done the way they are. Why place this here and that there? Why even show this? Why…etc.

    The common response I get is one of – “well, lets just do this and get it up there”. No thought whatsoever into the actual use and audience of the site.

    I think this also applies to programming and code abuse/tag soup. We need to constantly ask ourselves why – and then remember to keep things simple.

    I love the wordpress example. Excellent article!

  3. ichigo ichigo said on June 22nd

    awareness about design decisions is really important. to do all you can isn’t always the best idea.

    great article justin :)

  4. Bjorn Rixman Bjorn Rixman said on June 22nd

    Great article! I Didn’t know the 80/20 rule was called the Pareto principle, even though I refer to it quite frequently. So I’ve learned something new today…

    And Wordpress is a great application example… One thing that’s been bugging me in the wp interface is how the content boxes in the write-screen behave. They can be collapsed/expanded, and it’s possible to drag them around to reorganize the work space. Judging from the click areas, it would be more common behaviour to move them around than to expand/collapse them, which is quite the opposite from how most people (I’m just guessing here) use them.

    Question is if this is an example of unconscious design, or rather a case of “cool! — we can do drag’n’drop! —In a browser!” – thinking?

  5. Joshua Joshua said on June 22nd

    Every-time someone complains about how ugly and bloated the wordpress back end is I get a little confused.

    The problem with your analogy is that unlike a Broadway play, we DON’T have to physically carry everything on stage. It’s far simpler to place and ID link or an Edit link on a web page than it is to carry something on and off stage everytime you need to switch scenes.

    I would much rather have everything to manage my weblog one click away than have to sift through pages and pages of content to get to the control panel that allows me to do whatever I need to do.

    You mentioned that blogs are about communication, and that’s true, that’s why we put so much emphasis on design, simplicity, usablility and accessability, to facilitate that communication.

    But a content management system is NOT about communication, it’s about management, or in other words, getting things done. Sure, the ID number of the article is probably not that important, but it CAN be important, and when it becomes important, it’s a lot nicer to have it right there than have to go searching for it, especially when it takes up hardly any screen real estate. Sure, you won’t have to edit a comment every time one comes in, but 1, when you do have to edit a comment, it’s just that much faster to edit it, and 2, if you are logging in to wordpress, they assume you are there to do something, most people don’t log into their wordpress back end just to stare at it. So, if you are there to do something, there’s a good chance you are there to edit something, namely comments or posts. It just makes everything that much quicker to access.

    I think that sometimes, we as designers, can get a little too critical of software that works. (I’m extremely guilty of this with Mac software) Sure, Wordpress is ugly, and a design overhaul such as the shuttle project hopefully will be a great improvement. But there’s something comfortable about it being ugly. There’s something that speaks to me when I log in and see such an ugly system that says, “hey, we’re good at programming, not designing, so we spent our time making this thing work, and work well, instead of making it look pretty.”

    As an example, Movable Type is a beautiful system. It has a back end that a designer has obviously spent some time with. However, I just went to install it for the first time in roughly 4 years last night, and wow… I could not believe how difficult it was. 10 pages of installation instructions, setting permissions, writing configuration files, initializing cgi scripts…. you have to be kidding me. Wordpress, fantastico, now there’s a system that just works.

    I’ve often lived by the belief that it’s not done when you can’t add anything more, but it’s done when there is nothing left to take away, so overall I agree with your principals. The idea of making a conscience decision about every design element is something every designer should consider. but I think it’s important to contextualize those principals within the end purpose of the application, so in the case of wordpress, everything on the page contributes to the end goal of helping users manage aka get things done, and I for one feel they have succeeded.

  6. Blake Blake said on June 23rd

    Hello Joshua(20), Meet Everyone else(80)

  7. Joshua Joshua said on June 24th

    Hello Blake(clueless),

    Not exactly sure what you are trying to get across with your extremely helpful comment. You think 80% of the people that use wordpress are currently unhappy with wordpress’ admin interface?

    It’s obvious you don’t know everyone else, but thanks for the attempt.

  8. Milos Milos said on June 25th

    […] A very accosting layout and a interesting discussion topic, do you provide any Web-based services to universities or students. […]

  9. unwiredbrain unwiredbrain said on June 28th

    You completely distorced the name! The MSDN writer is “Marco Dorante”!

  10. sly sly said on July 10th

    I agree to much stuff on the admin interface on wordpress, but I don’t use it anymore because everyone uses it. When I would want some opinions on my design they would say “oh another wordpress blog”. Wordpress is kind of like a movie you watch over and over again its just a matter of time before you get sick of it. Then you just throw that boring dvd with all the other ones you watched before. I also don’t like wordpress’s installation interface, like when it makes a password for you….why not give the option to make your own password instead of making it for you? I just hope typo doesn’t make the same mistake, even though the new admin interface design is kind of ugly. I never really got why other blog software developers try to do the same thing as wordpress because wordpress is an example of what not to do on admin interface design and installation design.

  11. Dan Dan said on July 24th

    sly: Blogger is even worse. My first blog was with blogger and it was disgusting, i got sick of it within a month.

  12. Nater Kane Nater Kane said on July 25th

    I do agree that wordpress’ interace does have some extra bulk, that’s why I simply just modified mine, to save screen real-estate and make it faster and easier for me to use.

Sorry, comments are closed for this article.