Navigation

7 Interface Design Techniques to Simplify and De-clutter Your Interfaces

Design, Usability | Feb 24, 2009


What is simplicity? Simplicity is the quality of being natural, plain and easy to understand. It is not surprising then that simplicity is often thrived for in user interface design. Most people naturally dislike complexity in devices and software. Yes, some people find joy in figuring out how something works, but for most of us, being unable to operate a device leads to wasted time and frustration, and that’s not a good thing.

If you can take a complex device or a piece of software and somehow rearrange, reorganize and redesign the interface to make it easy to use and understand, then you’re well on the way to delivering a better user experience.

In this article I’m going to talk about 7 practical techniques that you can utilize in web design to make your websites or web applications simpler and less cluttered.

 

1. Modal windows.

I’m sure you can remember the days before pop-up blockers were introduced into web browsers, when you had to fight a swarm of little windows that all too often decided to pop up over the top of your browser window, seemingly with the sole purpose of annoying you. Nobody liked those pop-up windows, and blocking technologies were introduced to stop them. But today, we’re seeing a new breed of pop-up windows on the web that are a lot cleaner and work a lot better at their intended purpose. These are modal windows.

Modal windows are like pop-up windows, but instead of appearing in a separate browser window, they appear right inside the current one, over the top of the content. Modal windows require interaction to proceed, so the content below is usually darkened to indicate this, as well as to block out the distracting noise of the content and shift visual focus on the window above.

So why would you use modal windows and how do they simplify your interface? Well, if you look at the alternative, their purpose becomes much clearer. The alternative to using something like a modal window is usually to load a new page. For example, some sites have a settings page for your account. When you click on the settings link, you’re taken to a new page. But what if there were only a few settings options — is it really worth redirecting the user to a new page?

In a lot of cases, things like settings, edit boxes and login forms can be displayed in a modal window over the content. This saves the user a return trip to another page. It also lightens the load on the web server as it has to deal with fewer requests.

ActionMethod, a project management app, displays modal windows throughout the application. Here’s the Appreciation form.

 

2. Hover controls.

Putting fewer things on the plate would also make the dish easier to swallow. If your application has many controls, your users will need to scan through most of them to find what they’re looking for. Chances are, some of the controls are less important than others, and some of the controls are used much less than others. The simplest thing you can do is tuck away and hide these controls from the default view.

A clever way to do this is to hide the controls, but then show them when the user is hovering over certain areas. These are hover controls. For example, Twitter, a popular micro-blogging app, displays a feed of what everybody on your follow list has recently said. Each message is encapsulated in its own little box. There are two actions you can perform on each message: add it to your favorites or reply to it.

Displaying the favorite and reply buttons on all the messages would lead to clutter. You’re not likely to want to respond to every message in the feed, and even less likely to want to add all of them to your favorites. So Twitter only displays the controls in the right context — when you hover over the message. This leads to a simpler interface and no loss in functionality. There is a danger of new users not noticing these controls when they’re hidden; however, a lot of people tend to mouse over things they’re looking at, so given the hover areas are large enough, these controls are likely to be discovered quickly.

Twitter shows the add to favorites and reply buttons for each message as you hover over it.

 

3. Controls on demand.

Another way of hiding things is to utilize Javascript and display a set of controls when the user clicks somewhere. For example, you may have a search box on your site that allows for some custom filters or advanced searches. Instead of showing these options by default, you can hide them away and make them accessible via a button at the end of the search bar. Clicking on this button could reveal the set of options or filters. This means you retain the advanced functionality for those users who need it, and at the same time simplify the interface for people who just need to use the simple search.

Not everybody uses some of the more advanced or specialized controls on your site. By hiding them, you’re making the interface cleaner and easier to understand because new users have fewer elements to process and figure out. Selecting what to hide and what to keep isn’t an easy task though, and it is your job as the designer to find a suitable balance.

Kontain, a blogging app, provides advanced search filters for their search, concealed in a drop-down menu at the end of the search bar.

 

4. Expanding forms.

I’m sure you’re familiar with the file upload field we often see in web forms. It’s usually a little bar with a file browse button by the side. Imagine a situation where the user is likely to upload several files at once though. You could display several file upload fields, but that’s not ideal because it will clutter the interface and there is no way to tell how many fields the user will need. A great solution in this case would be to use an expanding form.

Once the user uploads one file, another file upload field will appear underneath, ready to accept more. You can implement the same technique for any other input field. For example, maybe this form needs a bunch of email addresses for people you want to invite to a team or some other purpose. Instead of having a lot of text fields, you could just have one or a couple, and then as the user fills them in, new ones are created underneath. Expanding the form in this way is a great way to save space and simplify your interface.

Gmail only displays one attachment field when you compose a new message. You can click on the “Attach another file” link to open up more when you need them.

 

5. Labels inside input forms.

Forms can get complex fast. You have text fields, labels, text areas, drop downs, checkboxes and so on and so forth. What’s more, filling out forms isn’t usually very fun, so speeding up the process and making forms simpler will make them less daunting and easier to use. One technique you can use to make the forms appear simpler, is to move the labels from outside of the input areas inwards. So, instead of showing a label next to that text field, show it as a pre-filled value inside the text field.

This cuts down on space considerably, shrinking the overall size of the form. Smaller things appear simpler, so the form should look easier to fill in. It may not be possible to do this for more complicated forms where you have a variety of input types (checkboxes, radio buttons, drop-downs), but if you have a few text fields it is well worth considering, e.g. a login form.

Now, there is a downside to this method, which fortunately can be addressed with a more thorough implementation. When the user first loads the page, they’ll see the fields and will be able to read the labels. Once they click on a field, most forms like this will hide the label completely, allowing the user to type in their input. But what if the user prematurely clicks on a field, and then forgets what it is they were meant to be typing? They may need to click away from the form to get the label to appear again (hopefully).

To address this, instead of completely hiding the label, you can dim it when the user clicks on it, and then hide it completely when the user starts typing.

MobileMe shows labels inside input fields on their login screen, and then dims them further when you select a field.

 

6. Icons instead of text.

To achieve simplicity in interface design, you need to reduce and take away all the unnecessary or seldom used parts. These not only include controls, but can also be things like text labels. If your interface has a lot of labels, look at it and ask yourself — are all these labels necessary? Are most of them simply stating the obvious? If a label is pointing out something which is obvious given the context of that item, then you don’t need that label — it’s obsolete.

To give you an example of this, think about posts in a blog. Under each post’s headline you may have things like date and author. Attaching labels before each one like “Author:” and “Date:” may not be needed. When somebody sees a name and a date under an article’s headline they are very likely to figure out that this is the author and that’s the date. The context, as well as the format that they’re used to from reading other blogs, gives your users all the clues they need to instantly understand the meaning behind the data. Stripping away those labels will give you a cleaner interface.

In some cases where leaving out a label won’t work, you can replace the label with an icon. An icon has some advantages over a text label. It takes less space. It’s easier to focus on as its color and distinctive shape attracts the eye easier than text. In some cases the meaning can be conveyed just as effectively as text. For example, if you have a label called “Tags:” followed by a list of tag links, you could replace the label with a small image of a tag. Provided that you have a tech savvy audience, the meaning in this case should remain just as clear.

Of course it won’t work for all cases, and if there is a danger of being ambiguous, you should play it safe and use a text label. Having said this, there is no reason to pick one or the other exclusively — you can benefit from the attractive eye-catching properties of icons together with the clarity of text by using them together; although in that case you’ll be trading off space.

Highrise, a CRM app, uses a tag icon in place of a text label before a list of tags.

 

7. Context based controls.

There are a couple of approaches you can use in interface design that relate to context and consistency. One dictates that you should keep controls consistent throughout your applications or websites to ensure that people know where everything is and don’t get confused. The other approach is to change controls or navigation based on the context of each page or window. The context based approach is one where you display only the stuff the user needs to complete the task they’re working on in that particular context.

A good illustration of the two approaches can be seen in the recent redesign of the Microsoft Office interface. Office 2003, as well as its older siblings, followed the design principle of keeping things consistent. You had a bunch of toolbars displayed on the screen at all times, and these didn’t change whether you were working with tables, graphics, text or pictures. Microsoft redesigned this interface for Office 2007 using a context based approach. At the top you now see a ribbon — or a set of tabs. When selected, each tab displays a set of controls relevant to any given task, be it proofreading, working with graphics, or simply writing.

The context based approach allows you to show fewer controls at any given time, but at the same time, more controls that are relevant to the task at hand. I wouldn’t recommend using a context-heavy approach for general web design because for most websites people expect to see consistent site-wide navigation. This is because every website is different, and it would make the browsing experience much harder if all the individual pages on a particular site were different too.

Having said this, this can be utilized for web applications because they’re not just simple websites — they’re pieces of software that live in the cloud. People are likely to spend a lot of time on a web app and will have more opportunity to learn how it works. The complexity of some web apps means that you really need to utilize the context based approach, because if you don’t, there will be too much on the screen at any given time for anyone to process. By showing only a few relevant controls for a given task, your users can figure out what to do in much less time.

Freckle, a time tracking app, has a switcher at the top of their main toolbar. It switches between time input controls and report controls, only showing one set at a time. This makes sense because you’re either inputting time or making a report — not two things at the same time.

 

To conclude…

“The simplest way to achieve simplicity is through thoughtful reduction” - John Maeda, The Laws of Simplicity.

Making your interface smaller, hiding advanced functionality and taking out the obvious is the path to a simpler interface. Along this path you’ll face many obstacles. For every feature you hide or take away, there will be people who complain and demand that you bring it back. But every one of your users has different needs and uses your web app or website in a different way. If you listen to all the feature requests and needs, and go as far as addressing and implementing them all, you’re unlikely to arrive at the zenith of software design. More likely, you’ll stumble into a deep pit of bloat from which it’s almost impossible to climb out.

Once you add a feature, it is very hard to take it out because people will begin using it and some will depend on it. Because of this, make sure that every feature, and every interface element you add makes sense and adds real value to your product. More features means more controls and content. More controls and contents makes it harder to make the interface simple and clutter free.

Simplicity is all about reducing and reorganizing the complex into small and manageable. If anything, you should aim to take away, rather than to to add. A product with fewer buttons isn’t necessarily less powerful — it’s likely just better designed.

Written exclusively for WDD by Dmitry Fadeyev. He runs a blog on usability called Usability Post.

Do you use any of these techniques in your designs?  Do you think they help the user experience?  Please share your experiences with us.

Share this post
Comments (no login required)
  • http://jamesduffell.com James Duffell

    Another Great Post !

    • archer

      AGREE with you !

  • Bobby Burdette

    Nice post. Decluttering is hard to do, this will help keep me focused on a big job i have coming up!

  • http://www.imsethstevenson.com Seth Stevenson

    Good post! Definitely useful techniques for modern web design and UI

  • http://twitter.com/obox David Perel

    Very useful post. I do implement these elements but not all in one space.

    I shall be trying this soon on one site. Thanks.

  • http://www.thisisaaronslife.com Aaron Irizarry

    Great List! Thanks! I am going to pass this around to my dev team.

  • http://www.pantso.gr Pantso

    Awesome tips. Thank you :D

  • http://greenflipflops.com Gabe

    Great article. I’m a huge fan of icons replacing text whenever possible. Sometimes I run into the argument “But the user won’t know what that icon does.” I try to fight this with #1 – perhaps implementing a legend some place and #2 – once the user clicks it one time, they will remember what it does – they only don’t know for a little bit, then it sticks in their memory. Space is so limited if I can express something in 16 pixels instead of 48, I’m doing that every time.

    • n

      urgh – Sorry, but both your suggestions are terrible.

      Icons should be … well … iconographic. They should be used in places where an image can effectively replace text. It should be instantly recognisable, through a combination of affordance and experience.

      If you’re having to resort to a legend, or your user having to use trial and error; then stay away from icons.

    • http://lorilee1.wordpress.com lori

      I agree with “n” — the user should NOT have to guess what an icon does, especially if they are using that interface infrequently.

  • http://wutworks.blogspot.com Jeremy

    Very nice post. I’m currently doing some research on direct manipulation in web apps. I think a thoughtful edit-in-place UI combined with hover UI could significantly simplify a web app, potentially getting rid of “edit” screens. I’m currently looking for good examples of direct manipulation in web apps because I think it has a lot of untapped potential. The highest profile example is Flickr’s edit-in-place UI for certain elements, video: http://uipatternfactory.com/p=edit-in-place/.

    Thanks.

  • http://www.mjama.com Mohamed jama

    Excellent post! very insightful

  • Martyn P

    Thanks for this post. It will be very useful while I’m designing my new application, and it’s very well written!

  • http://www.thecreativeoutfit.com fluidByte

    Great stuff – I know a few designers who will be getting this forwarded to them (hint, hint).

  • http://www.poetpainter.com Stephen P. Anderson

    Great post!

    I’d add an 8th technique: “Controls on Focus” – as an example, click on the search box at http://www.nymag.com

    Also, Jeremy Johnson has a presentation with about a billion examples of what he calls “revealing interfaces.” You might want to check it out at: http://www.jeremyjohnsononline.com/2008/03/06/revealing-interfaces/

    I’ve added this post to http://www.twitter.com/inspiring

    Thanks!

    • http://jason.karns.name Jason Karns

      I have to say, the nymag example is completely inaccessible. Try navigating the site without your mouse. The Search box is never activated via tabbing so not only can you not eve GET to it, even if you could, I doubt their drop-down list would fire. Similar to the little drop downs along the top. Tab through them. None of the drop-downs fire so you can’t see the flyout. Use this as inspiration, sure, but what good is your interface if not everyone can use it?

      FAIL

      • Methiew

        Actually, you can get to it. (just as a starting point) If your cursor is on the address bar, hit ‘Tab’. This will take you to the ‘GO’ button. hit ‘Shift’ + ‘Tab’ and you can go to the search box. Hit the ‘down’ arrow and the list will pop out.

  • http://www.webcoursesbangkok.com Carl

    An excellent post, these are all things that good designers know and come up with but its nice to see all the ideas in one place.

    Great thanks!

  • Pingback: 7 Interface Design Techniques to Simplify and De-clutter Your Interfaces | Webdesigner Depot « Pimp that blog

  • http://blog.insicdesigns.com/ insic

    another very nice post in WDD.

  • http://www.byronpetch.co.uk Matt Petch

    Over the past 15 years I have found there to be a very fine line between simplifying an interface to make it easier to understand and use and simplifying it to the point that it becomes cryptic and mysterious. less is more up to a point then less just becomes cryptic. I know this will be an unpopular comment :) but I would even go as far to say that in some (but not all) cases words are better than icons. There are some common icons we are all very familiar with such as home, forwards, back, play, stop, add, delete and so on which are instantly understandable and are better as icons than words; however it is my belief that links that need to represent uncommon words or titles are often more effective as words. By more effective I mean quicker and easier for the user to find. I often see people (including myself) hovering over icons hoping there will be some kind of pop up hint to indicate what that icon may do. Having said that I do love icons from a visual point of view and feel that they add something to the site in terms of appeal and user experience which is of course very important. I guess each interface is different and in some cases a visually appealing site is worth a tiny bit of confusion and in other cases the interface is more effective if clearly defined with words.

  • http://www.fluidnewemedia.com/blog Ahad Bokhari

    Modal rulez!!! UI design and techniques are really at the forefront of the web these days. There is just so much room for growth.

    One little piece of interface design i liked was: http://5thirtyone.com/ – check the footer strip at the bottom.

    Its just a simple example, but we learn so much from simplicity!!

    Nice post!!

  • http://www.rethinkseo.com Sean Hurley

    Great post! What about doing a post on setting up “call-to-actions”? I can guest write if you need anyone.

  • Pingback: 7 Interface Design Techniques to Simplify and De-clutter Your Interfaces | Switch on the Code

  • http://curtjen.com curtjen

    It’s content and posts like this that make it fun to be a designer. Thanks for the great post.

  • http://www.e11world.com E11World

    I really like this post. It speaks to all designers (new/old) and shows that simplicity works and that the user is/should be the number 1 concern when designing. EXCELLENT!!

  • http://www.graphicdesigntwist.com Chase Campbell

    Wow solid read! I’m definitely going to take this advice on a few sites I am currently working on.

    Thanks for pooling all these thoughts into one place. Drop by graphicdesigntwist.com and say hello sometime.

    Thanks again Dmitry, I’ll be sure to check out Usability Post.

    Cheers!

  • Dmitry

    Thanks for the comments everyone.

    Matt: That’s true, but each interface is different and whether you use a technique or not would depend on each individual case. I can’t say replace every label with an icon because that just won’t work; replacing *some* labels with icons may be possible however and it’s another tool in your arsenal should you need to simplify this bit of a UI. Deciding what technique to use (or not use!) where is the job of the designer :)

  • http://www.bestwebimage.com Rob’s Web Usability Site

    Just be careful using icons. I have reviewed way too many sites where they have icons that make no sense at all.

  • Anonymous

    Um, guys, I hate to be a sore stumbler here, but in a really strange coincidence, this is almost -exactly- the list I evangelize (beg) graphic designers NOT to do. I’m a fairly senior user experience designer at a company you’ve -definitely- heard of, and I’m saying that if you follow this list you’ll break nearly EVERY RULE IN THE BOOK for designing good usable interfaces. Context controls are alright (and not in all cases) but everything else is a SIN. Sin sin sin sin. Evil, evil, bad.

    Please don’t do this.

    Go read a UX book. Steve Krug is a good start. LukeW could help you with your form designs. This is not a troll. I’m only posting anonymous out of fear of retribution. Everyone just seems so… happy… with this post, and frankly, it scares the hell out of me.

    • Tim

      I agree. Most of these things are no no’s

      Modes are terrible. In the old days of vi they were the cause of most user errors and now they often are just blockers to the the user who may or may not have to collect further information to make a decision as to what to fill in to the blocking page/form. Just a bad idea, often the result of lazy coding.

      Of the list 5 and 6 are the best tips.

      7 is pretty dodgy without collecting a lot of stats on what people are actually using and they also lead to errors where people make mental maps of the application that are only correct sometimes.

  • http://unraveled.com Joshua Kaufman

    You’re using “modal” incorrectly. Modal means “prevent the user from doing anything until they interact with a dialog.” Modal dialogs are almost never necessary on the web, and encouraging them under the guise of simplicity is poor advice.

    Action Method, the example that you mentioned, actually doesn’t use modal dialogs. They’re modeless. In other words, they still allow you to interact with the rest of the app.

    • http://wutworks.blogspot.com Jeremy Olson

      Good point. While dialog pop-ups can save a user time, modal dialogs are often annoying and unnecessary. The contexts in which modal is better than modeless are, in my opinion, few.

  • http://wutworks.blogspot.com Jeremy Olson

    Anonymous, I’m not a senior UX designer from a company you’ve -definitely- heard of, I’m just a college kid, but I do study UX design (I’ve read Krug’s excellent book and read Luke’s blog regularly) and would be interested to know, specifically, which of these points you don’t like and, specifically, why? Please, enlighten us so we can all learn why we shouldn’t use these techniques, rather than just not use these techniques because you, a senior UX designer, said not to.

    Personally, I’ve found many of these techniques very usable when applied in a thoughtful way and in the right contexts. Certainly, we shouldn’t replace every label with an icon (there are many UX reasons why, namely discoverability) but there are some contexts where icons work better and contribute to a cleaner, more usable interface.

  • Dmitry

    Anon: Can you be more specific? Steve Krug’s “Don’t Make Me Think” is a must read for web designers thinking about usability, and I’m certainly not breaking any of his recommendations here. I would also recommend the book “The Laws of Simplicity” by John Maeda — it’s not all about design and technology, but a lot of it applies. The techniques above go along with those ideas well.

    I’d be very interested to know what you think is wrong here and to read your recommendations.

  • Dmitry

    Joshua: Good catch — you’re absolutely right.

    Why do you think modal windows are not necessary on the web? For example, you can do a modal window for a login form or a user settings form. What’s the use of allowing controls to function underneath? Wouldn’t it make more sense to focus the user on the form they’ve just opened? I doubt they’ll want to continue working on the stuff below before at least closing the form, and the modal nature would prevent accidental clicks outside of it.

    • Tim

      The reason its a bad idea in a modal dialog is people may need to collect information to make decisions about what to put into the form. If it is modal then they are blocked by the modality from collecting this information.

      This has more impact in the non web world, as in the web world pretty much every page is modal. Their are few rich internet applications out there, like spreadsheets.

      But say you have an internet spreadsheet, and you have a modal formula form. But the user needs to scroll around to see the fields they want to add to their formula. The modality is blocking the user from collecting the information they need to fill the form in.

      Given their is no need for this modality, why put it in.

      In the login case something that is two fields and a button turn into one link, your not saving much space and your introducing a potential (though Ill admit unlikely in the login case) annoyance. Maybe they half typed in their login and then saw another frame in the background they wanted to read. So they closed the login, scrolled to the frame and then back to the login and its lost their username they already typed in. A small annoyance, but avoidable.

  • http://twitter.com/wilhelmr WilhelmR

    I appreciate modal windows for setting, but not for login in. Some browsers don’t catch it as a new page, and won’t remember the password for modal windows :(

    Great post

  • http://unraveled.com Joshua Kaufman

    It definitely makes sense to focus the user on the task they’re doing, but that doesn’t mean you should restrict them from interacting with things outside of their task – unless those things are destructive to the current task at hand. Notice that I didn’t say “dialog” in that sentence.

    Instead of thinking in terms of a dialog, think about ways that you can maintain forward momentum in the application – while still keeping the focus of the user – without any sort of dialog, popup or prompt.

    Taking your Action Method example again, consider the “+ Add New” button. When you click it, it show you a modeless dialog. (At least it’s not modal.) I would personally avoid a dialog completely. Instead, I would probably create a new action step at the top of the list with empty fields that the user can complete. Now this won’t accomplish exactly the same thing as a dialog. What if the user decides they don’t want to create a new action step? Instead of canceling a dialog, they would be deleting a blank action step. But given how rare this would be compared to how common creating a new action step would be, I believe it makes a lot of sense.

    I’m not saying that doing it this way is easy or always possible. It requires a considerably more thoughtful interface. But it can be done, and when it creates a better experience for the user, it’s worth it.

  • Anonymous

    I do sympathize with Jeremy Olsen’s “between-the-lines” comment that “a company you’ve heard of” sounds both pretentious and lame for credentials. Sorry, I’m not legally allowed to say their name, or I would.

    But, I really just can’t go into some sort of discourse on usability on somebody else’s blog, and besides alot of the other commenters have made extremely good points against these methods. The specific freak-outs I had were over discoverability and accessibility. Rather than refuting points, I’ll describe those and I’ll keep it brief.

    Discoverability: Most people don’t know what they want, and decisions take time and hiding what they’re looking for doesn’t make it easier for them. The point of reducing the number of features is not to simply bury them with UI wizardry, it is to completely remove them. Your app should only have features that your customers actually use. Discoverability means that your users can find what they’re looking for with the minimum of interaction. That’s what makes something easy to use, and mousing over stuff and clicking on things to find the hidden button just isn’t fun to regular people (people that don’t spend all their time online).

    Accessibility: Every time you use JavaScript in a form, a screen reader dies, and clapping your hands won’t magically bring it back to life. By pre-filling form fields (et al) instead of using accessibility best-practices, you make low-vision users have fits. By expanding forms, some users can’t complete them and never succeed at what you would call a “basic task”.

    Usability should not be traded for glam. Use undo and reduction of interaction in place of modals and Ajax. Accessibility over wizardry. Substance -and- style, but substance over style. These are the principles of UX. And for those of you looking for authors, try Kathy Sierra, Robert Hoekman, JJG and this really awesome book called “Democratizing Innovation” by Erik von Hippel. Take two Tuftes and call me in the morning.

    -Anon

  • http://wutworks.blogspot.com Jeremy Olson

    Anon, thanks for following up.

    Your points on accessibility are very valid and I think we should all consider them if accessibility is our priority (which it probably should be, but probably isn’t).

    In general, I agree about discoverability but I differ with you on specifics. In general, yes, we don’t make users jump through hoops to discover functionality and, yes, this forces us to limit our functionality to a core set but I think there are certain contexts where things like showing options on :hover work best. For example, I’m glad Basecamp doesn’t show every option next to every task: “Trash, Edit, Move, Comment”, it would be repetitive and would clutter up the screen, making the app less usable, more confusing (too much going on). I think Basecamp has done a good job at widdling down functionality to the fundamentals, these tools are very basic operations that can’t be thrown out. They seem to have found that discoverability is not a problem because, chances are that the user’s mouse is going to hover over a task before too long (as tasks take up nearly the entire width of the page); and if the user hasn’t hovered over by chance and they want to edit the task, they are bound to point their mouse over the task.

    I also think the importance of discoverability is relative. The iPhone’s interface isn’t very discoverable but they used ads to show off how to use it, so everyone “gets it”. Also, I think discoverability is most important on websites (where people may only use it once) and a bit less so on web apps (though it is still very important).

  • Dmitry

    Joshua: Thanks for your reply. Your argument seems to be for not using dialog/popup/modal boxes at all, rather than modal vs standard dialog box. I agree with what you’re saying though — in the case of Action Method this could be a good approach.

    Anon: Thanks for the comment. I don’t see why you can’t share your thoughts on somebody else’s blog though — isn’t that exactly what this comments feature is for? :)

    I don’t see how the methods above conflict your points. You say that users don’t know what they want. I agree. That’s why its the job of the designer to guide them and let them know what they want and what’s available. These techniques aren’t about hiding away valuable functionality — it’s about removing those extras that may not be necessary for a beginner to get going, but would be useful later on. By streamlining the default interface you make its function and usage more obvious — there is just less stuff to figure out. By reducing and concealing the extras in an elegant manner you also allow the more experienced users to quickly access advanced functionality. This isn’t crippling — it’s just optimizing.

    Most of it is about context. You don’t need 10 upload fields in Gmail to attach a file. You attach a file and then expand the form to attach some more. You don’t need to see all the “reply” and “favorite” buttons in every Twitter message; you only need them when you’re about to use the action, and they conveniently appear when you hover over the message. I don’t see any style or glam here, it’s just about making things simpler. I agree with reduction of features, but you will arrive at a point where you can reduce the features no longer, and at that point you can “reduce” the UI.

  • Anonymous

    Ok, guys, last comment and then I’m going to go actually read this blog. Congrats, Dmitry, you’ve hooked a reader… and they say Stumblers aren’t sticky… :)

    Dmitry & Jeremy, your comments are exceedingly sane and you are not the UX designers I’m worried about taking this stuff the wrong way. Jeremy, you’re very right about Accessibility not being a focus for UX/UI designers, which is why I’ve taken this hard-line stance on it. Obviously I’m a mass-market designer… I guess niche designers can make their own choices.

    As for discoverability… there are a few companies I’ve seen doing this extremely well, and while 37signals is the common example, it’s not mine. Ebay has been doing wonderful things with this concept. Google, unsurprisingly, is really good at this. Really, the question is about audience. If your audience is first-time users or you’re planning to reach a mass market (instead of a predominately webdev audience) you should optimize your site differently than this.

    Every feature is a potential point of failure, and it’s more important that the user succeeds at the task than is impressed with the UI. That’s all I’m saying. :hover is fine when used appropriately as are many of the other techniques. I’ve even recommended modal dialogs before, but these are exceptions, not rules.

    Thank you guys for the rousing discussion. I’m off to learn more about WebDesignerDepot. I’ll be back around, and posting under my real name. :-)

    -a

  • http://wutworks.blogspot.com Jeremy Olson

    Anon, it was fun (btw, I’m a newbie here too). I agree that these (as well as most UI elements) should not be taken as absolute rules (“ahhh [enlightened], now I’m going to change all my text into icons!!!!”) but, rather, are exceptions (especially if we are talking mass market). Every UI element must be examined thoughtfully and in context (which includes the website’s audience), and not used simply because its on a page from a reputable web design blog.

    Now that I’ve got your attention, I’m wondering if you have any thoughts on edit-in-place interfaces? The highest profile example is Flickr’s edit-in-place UI for certain elements, video: http://uipatternfactory.com/p=edit-in-place/. I’ve been doing some research on this because I’m toying with the idea of using the technique extensively (which I have haven’t seen many examples of) in a web application aimed at tech-savvy users. The web app has many small fields (no large text areas) and I’m thinking it may be a good match.

  • http://www.togomix.com djo

    I like this post . thats hot

  • Pingback: Friday Focus: 02/27/09 | Devlounge

  • Pingback: Weekly Links | Shaun Preston

  • http://duduzerah.blogspot.com dudu from brazil

    I think simplicity is ‘almost’ always good.. There are certain cases, like commercial applications, where the user works all of day in the company system… He don’t need simplicity.. he needs high performance design, full of tools and functions to be more productive at past of weeks… at the beginning is difficult, but after he get expert on that system he we’ll have all tools in just a click.

  • Pingback: 7 Interface Design Techniques to Simplify and De-clutter Your Interfaces

  • http://www.pixelsvsdots.com Joe Arcuri

    Great tips, keep them coming.

  • Pingback: 7 técnicas para simplificar diseños — Tablosign

  • Jon

    From a programmers point of view, it would be great for each point to have links to how each is acheivable for example modal forms = http://dev.iceburg.net/jquery/jqModal/

  • Sathish

    awesome post…. really learned a lot of things…..

  • Pingback: Best of the Web: February - NETTUTS

  • http://jason.karns.name Jason Karns

    I generally agree with Anon’s points about Usability and Accessibility (which is a false dichotomy). Accessibility IS usability. Accessibility benefits EVERYONE. How many power-users do you know who never (rarely) use a mouse? Well, using many of these techniques hinders this. I’m not saying we shouldn’t use these types of interfaces, but that care should be taken to ensure that they can be used under different circumstances. Can you use your entire site without touching a mouse? Can you use the entire site with a stylish on a Tablet PC? These are the kinds of things so many designers skip over in their effort to make the majority of users go ‘Ooooh’. Using Twitter as an example, it would be simple enough to make the icons ‘tab-able’ while keeping them hidden. Allow them to become visible when they or the entire ‘tweet-line’ receive focus. But they don’t, so you can’t use their site without a mouse. To me, that’s an utter failure.

  • Pingback: links for 2009-03-10 | Team Kane Street : Alex Rainert and Karen Bonna Rainert

  • http://www.riaguy.com Koistya `Navin

    Good tips! Thanks.

  • http://www.feedweaver.net Feedweaver Your RSS reader

    Cool tips.

  • http://technopaper.blogspot.com Abdel

    Good post! Thanks for the tips. I will apply these ideas in my work.

  • http://www.junglescripts.com/ Adam Winogrodzki

    Really a Great post ! very informative!

  • http://www.branditsolutions.com/ web development

    Very impressive post. Thanks for sharing

  • http://www.webcoursesbangkok.com Carl – Web Courses Bangkok Instructor

    Totally love this post, very useful!

  • http://notquitewrong.com/rosscottinc/ Rosscott

    Awesome! Thanks!

  • http://www.10list.net Top 10 Annoying office phrases

    Good list, although these are optional, they should be used as vital parts of website development/design. A more usable website would more than likely be more sucessful with it’s visitors and it’s visitors are more likely to recommend the site to others. If only Myspace read this list before doing their redesign.

  • http://www.cheapwebhostingseller.com Hosting boy

    In my opinion simplicity is always best.simplicity is often thrived for in user interface design. Most people dislike complexity in devices and software.You can utilize these techniques in web design to make your websites simpler and less cluttered.Hide the controls which never be used by utilizeing Javascript. I think a thoughtful edit-in-place UI combined with hover UI could significantly simplify a web applications.Its good to remove those extras that may not be necessary for a beginner to get going, but would be useful later on.

  • http://diaryofatechguy.beetlesolutions.com michael

    great tips

  • http://nwds-ak.com Alaska Web Design

    Good job putting this altogether. I like the tip of putting the label into textboxes. Problem occurs if you let users edit their content and you load their saved content. Often, it is intuitive, but sometimes not.

    I have used all these techniques at one time or another. Great job.

  • http://abrcity.com/ abrcity

    nice tips my friend

  • Anno

    #23.
    I agree. I just got my masters in hci and have conducted more usability tests than I care to remember. Most of this article is a simple bundling together of current trends and fads without any evidence or research to back it up.

    I’ll repeat that part—evidence. research. Greatly needed before you make outrageous claims.

    I especially hated the part about pre-populating forms. This has been shown to simply not work, to confuse users, to break UX. Hell even other design oriented sites such as smashing pumpkins and I believe a list apart even warn against this. Not to mention the polarbear book, etc.

  • http://www.squiders.com Web Design Kent

    Some good tips, thank you

  • http://www.sgolubev.com Sergei Golubev

    A really great post showing very useful techniques of the latest trends in UI design. Having a strong interest in User Experience area this article with such a relevant examples was an absolute pleasure to read!

  • http://motorolafans.info motorolafans

    Thank you very much for this mate! i was in a need of this information!

  • http://www.mediacake.net dan

    great tips, keep them coming….

  • http://izdelava-spletnih-strani-1a.blogspot.com/ izdelava internetnih strani

    The footer of the blog is simply one of the coolest i’ve seen. Nice work.

  • http://deepakghimire.com Deepak

    wow very nice tips. thank you for sharing.

  • http://www.cool-theme.com Joomla Templates

    Hi, great post. I have been curious about this matter,so thanks for posting. I will surely be subscribing to your blog.

  • vuxes

    Umm, I also beg to differ from the points in the article. Yes, simplicity is very important — and it’s very difficult to design a site that looks simple, unlcuttered, yet is rich in functionality. But “hiding” the controls/functionality is not the answer; it just drives users crazy. For example, I shouldn’t have to hover my mouse over an item before the options appear (re: twitter). Icons can add to the appeal of a site but they do have to be properly designed; there is nothing worse than icons that all look the same or don’t match their intended purpose. Probably the question we should ask whenever we add/substract UI controls/functionality is “Does this ‘solution’ answer a user’s potential question as he/she browses my site — or does it generate even more questions?”

    Of course, we all get used to a site’s quirkiness with time and use — but it does not hide the fact that we also keep getting this stab of irritation that we have to keep figuring things out, even if it just takes us a milisecond to do so.

    Love your site! Keep up the good work!

  • http://www.articlesvana.com/reverse-phone-lookup Reverse Phone Lookup

    Actually footer of this blog is very nice.I like the way of presentation.

  • http://customwoodworkingbymichael.blogspot.com/2010/02/home-invasion-home-invasions-avoided.html bob mc alister

    As a relative newbie to all of this , I find this site extremely informative. I like the tip on the icons in particular since people can click and go ..real simple .
    thanks

    I am checking out the hosting you use also .

  • http://www.articlesbase.com/supplements-and-vitamins-articles/my-weight-loss-experience-with-the-acai-berry-diet-1726693.html Acai Berry

    It has got great theme and it is really very user friendly.

  • http://www.teethwhiteninginstructions.com Best Teeth Whitener

    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me.

  • http://dr-seusspoems.blogspot.com/2010/02/short-dr-seuss-poems.html jungjihoon86

    Good post! Thanks for the tips. nice blog

  • http://dr-seusspoems.blogspot.com/ dr sess poems

    It has got great theme and it is really very user friendly.

  • http://gemakkelijktandenbleken.nl/ tanden bleken

    It’s a great theme. I really like the section where you go over icons versus text. Keep up the excellent work. I subscribed to your rss feed.

  • http://www.elitetikibars.com Joe

    Fantastic! Thank you this is just the kind of information that is interesting to the reader. Keep up the good work.

  • http://www.fatlossdiet.org fat loss diet

    I’ve never considered Modal windows before and quite frankly wasn’t sure what they were. Great tips and nice design on your header.

  • http://www.surflifeswaves.com SurfLifesWaves

    Some great tips to keep us surfing!
    Keep them coming.

  • http://www.psyched.be/wordpress/ La Cinyc

    Another nice post indeed, thanks again.

  • http://www.lawncaresucks.com lawn care business

    As for discover ability… there are a few companies I’ve seen doing this extremely well, and while 37signals is the common example, it’s not mine. Ebay has been doing wonderful things with this concept. Google, unsurprisingly, is really good at this. Really, the question is about audience. If your audience is first-time users or you’re planning to reach a mass market (instead of a predominately webdev audience) you should optimize your site differently than this.

  • http://www.jasoncorns.com Jason

    Nice post, Dmitry. For #6, though – I would use extra caution when choosing icons over text when navigation is involved. A few other folks have noted in the comments that icons can easily lose meaning. This is something you must avoid in navigation; just see Vincent Flander’s “Web Pages That Suck” article on “Mystery Meat Navigation”. He has picked a few over-the-top examples to illustrate his point, but it is still a good point.

    http://www.webpagesthatsuck.com/mysterymeatnavigation.html

  • http://aext.net AEXT.NET MAGAZINE

    Great article for tips!

  • http://www.cooljaz124.com cooljaz124

    Yes, nice tips !!!

  • n

    I was kind of expecting to see techniques, whereas really these are UI patterns, not ‘techniques’. Still a nice little round-up, but doesn’t really help with improving your skill-set; just acts as a list of inspiration really.

  • http://www.hidheadlightkit.com HID Kit

    Great article! I really love the second paragraph, I know exactly what you mean! This site is great thanks again!

    Corey

  • http://reviewbonusdude.com Internet Marketing Product Reviews

    Your header is freaking tight!

  • http://www.applenyt.dk Kasper

    Wonderfull article. Simplicity is indeed the key to an interactive and understandable design.

  • http://www.positivesearchresults.com Benny Ruo

    all these techniques helped me a lot to perfect my design

  • http://scalablevectorgraphics.info Scalable Vector Graphics

    It is important to keep interface nice and simple as this promotes more userfriendliness. I hate messy interfaces with too many controls clogging up your screen.

  • TiTAN

    Nice article by the way, to be more generalist, Futur of web is not web browser (in my
    pov), futur is specific interface on specific device, and we can start create / adapt
    website for new device like Ipad, thinking about new navigation or presentation, etc etc.

    Soon (or allready), internet can be read from tv / phone / console / whatever is called in your hand, or in front of you.

    Be sure, we need to thinking user interface for more than “simple” web browser now,
    great work and (exiting) evolutions incoming for (us) webdesigners, and for sure
    all internet jobs :)

    All articles about usuability, ergonomy, like this article are welcome, thx for that ^^

  • http://www.heftelstudios.com Kawika

    Great post! Another reason why the KISS principle is still so relevant.

  • http://bibakis.com VangelisB

    A great post Dmitry. However I totally disagree on hovers. In fact I’ve written a post about why we all should drop using hovers right away. Maybe you’ll find my opinion a bit radical but I think it agrees with user point of view. Anyway have a look if you like here http://bibakis.com/post/why-web-designers-should-kill-the-hover-right-now-and-how-to-replace-it/

  • Robbie

    Office 2003 as an example of good design? Sorry, I lost confidence in your story right there. Office 2003 is an example an attempt at good Interface Design that has gone (horribly) wrong – it happens. I will concede that there are some great ideas in the interface, but by and large it now takes more interface actions to undertake any given task.

  • Mark

    “simplicity is often thrived for in user interface design”

    Thrived for?

    Maybe strived for.

  • Adam

    This web page is awfully busy for a post on simplicity in design. I finally installed readability to get rid of all the distractions!

  • Tolli

    All very solid points but keep in mind that the world is now slanting towards touch interfaces such as iPhone / iPad and anything using hover will simply not work there.

  • sachin

    Sounds great

    can u suggest some standard form ht and width proportionate.

  • http://blog.naijacomputernerds.com Chibex de Naija Computer Nerd

    I like the way the explains each design concept.

    Thanks for your good job.

  • http://vaporizer-store.net Michael Fever

    These are some good controls. I recently bought a bunch of AJAX books. It’s high time that everyone started revamping the shopping cart model to get rid of pages that submit. An entire eCommerce site could be developed using AJAX on a single page that never submits from entry, to categories to checkout. However, the SEO for this site would be terrible since Google has not caught up with AJAX. So of course, this presents more challenges! Do you strive for excellent looking form and usability, or ugly and SEO friendly. I give up. =)

  • http://www.owt-for-nowt.co.uk freebiejeebies

    Thanks for this i never realised how “cluttered” my interfaces was, hence the word “was” lol thanks again.

  • http://www.lawncarebusinessguide.com John

    Its great that you showed how to make your interface smaller so it hides advanced functionality of the program and takes out the obvious path to the concealed simpler interface.

    Thanks I learned a lot. Will be back to read more posts.

  • http://www.lawncarebusinessguide.com/ Lawn Care Busibess Guide

    I agree with: as the user fills them in, new ones are created underneath. This really simplified my interfaces

  • http://www.mosettistudios.it/ Promozione siti web

    Interesting post. I am totally against fancy flash websites and I think usability should always be taken into account before doing a website, and by the way I am a JQUERY lover which comes very handy for those things.

    Francy

  • http://internetsuccessgateway.com/ mlm business leads

    Wow, great tips,w hat a useful site. Will be coming back for more. Very useful.

  • http://ezinearticles.com/?Mobile-Marketing---What-Exactly-Is-It-And-Can-You-Make-Money?&id=5082078 mobile marketing

    These are some great tip’s, I will us some of these to simplify my website and make it more user friendly.

  • http://www.y8free.com Y8

    This web page is awfully busy for a post on simplicity in design. I finally installed readability to get rid of all the distractions!

  • http://www.phimosistreatment.com Jason Phimosis

    When interfaces change they can confuse things, but this one is rather simple. Hiding advanced functionality by making your interface smaller is a great idea!

  • http://implantsbreasts.net/ Roshan

    These 7 practical techniques are very useful for reducing unnecessary cluttering design for any web page.

  • http://www.richardramsden.com/turn_sour.html Richard Ramsden

    Yes, i believe that making a design simple can give a good impact to anyone. Making a lot of complexities can just make it looks untidy or not eye friendly.

  • http://www.squidoo.com/richard-ramsden Richard Ramsden

    Yes you are right! And i agree that making your design in a simpler for makes it more reliable and can be handled easily.

  • http://www.empirebeads.co.uk/ Beads

    Simple designs are often the best!

  • http://calypsobayreview.com.au/ Calypso Bay

    When choosing a designer, sometimes the crisp and clear-cut designs get the message across the best!

  • http://www.ericvandyke.com/ E

    I can dig it! Simplicity can’t be overwhelming and easy navigation.

  • http://www.techinreallife.com technology update

    I generally agree with Anon’s points about Usability and Accessibility (which is a false dichotomy). Accessibility IS usability. Accessibility benefits EVERYONE. How many power-users do you know who never (rarely) use a mouse? Can you use your entire site without touching a mouse?