De-emphasize User Interface Controls

Help people focus on the content by designing your application UI as a subtle frame for the information they’re interested in. Downplay application controls by minimizing their number and prominence. Consider creating custom controls that subtly integrate with your application’s graphical style. In this way, controls are discoverable, but not too conspicuous.

iPad Human Interface Guidelines

Every gradient you add to your interface makes it harder to use. The same goes for every drop shadow, rounded corner, background color, and button style. Don’t just add them because they look pretty.

This guideline should apply to every interface you work on. Design your interface to be as invisible as possible. Your users don’t want a sexy button style; they want the action that button performs. The action that hides behind that button is more important than how the button looks. Your content is what they want; not the text-shadow or background color.

Drop shadows, rounded corners, and gradients should exist to subtly increase the attractiveness of your interface, which can make it easier to use. A faint drop shadow under a button can subconsciously drive your user’s eyes to the apparently 3D button. Use these sparingly. Every button on your page shouldn’t be competing for the same attention. Emphasizing everything means nothing gets emphasized.

Pick which action or content is most important and emphasize only that, and do so with subtle effects.

10 comments

  1. Interesting post. I agree people want speed of use, like buttons that load fast, so on. Making something that creates interest for the intended user is the main goal. You do this by designing for that audience. At times a minimalist look works , but there are times it would turn away the intended audience. There is a “way to much” limit on every design, you as the designer need to know what that is for your audience…research. Great read…thanks!

  2. While I agree that UI elements shouldn’t compete for attention, I don’t think that every gradient and drop shadow makes an element more difficult to use.

    Subtle and well balanced 3D effects throughout a page can make the UI more intuitive and guide attention towards the right elements.

  3. Good advice, but it could be greatly illuminated with a few examples.

  4. I agree on the fact that ultimately, focus should be made on the actions performed by the buttons and other elements, not the elements themselves. But on the other hand, simple and well-integrated elements are what drive the users to click on ‘em and perform the action.
    The key is always the same : balance.
    Thanks for the article!

  5. sounds like a proposal to return to DOS like interface? Disagree with arguments.

  6. I agree for 50% of this post.
    Graphics element is necessary to return a correct affordance.
    Example,the stroke effect on your feed and search-lens improve afforndance? i think not. (sorry for my bad english)

  7. I too, disagree. While creating simple, usable webssite is necessary, i still think drop shadows make buttons look like, well, buttons. Input fields have a small shadow as well – helping people recognize it. So what you are proposing is black text, white background and a line here and there… And we are back in 1980s.

  8. I think user-interface should be human and a device’s interaction levels should fit the user instead of the other way around.
    Minimalist approach is just about focusing on what is important and removing every single clutter of what makes it fancy.
    Thanks for sharing some good thoughts on the topic.

  9. I’m in no way proposing only black on white text or a DOS interface. I think that would be much harder to use than an interface with subtle effects to make the elements look more human. I’m saying you should de-emphasize certain effects, not completely eliminate them.

    Here is an example to show you what I mean:

    http://kevinholesh.com/sandbox/deemphasize-user-controls/good-v-bad-button.png

    Which one do you like better? Perhaps at first glance, the second one attracts more attention. But imagine an interface full of those buttons. Each one would attract attention and end up distracting you from what you really want: the action behind the button.

    The first one still looks like a button, but the unimportant design effects (gradients, drop shadows, etc) do not distract as much from the action the button performs, which is the most important part.

  10. Excellent post, but I can’t help but feel that some comments may have missed the point. He’s not talking about not using gradients etc, only to keep in mind the complexity that they add to your interface when you do use them. If everything shouts as loud nothing gets heard.

Leave a comment