Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

10 Useful Web Application Interface Techniques

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time. [Content Care Nov/25/2016]

In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications.

You may want to take a look at the following related articles:

1. Interface elements on demand Link

Simplicity is important in user interface design. The more controls you display on the screen at any time, the more time your users will have to spend figuring out how to use your interface. When there is less choice, the available functions become more apparent and are easier to scan. Simplifying an interface isn’t easy though, especially if you don’t want to limit the app’s functionality.

Kontain search
When you click on the search link in Kontain’s search box, a similar drop-down menu appears. So, if you need to narrow your search, you can use the menu to select the sort of content you’re looking for. Tucking these options away simplifies the search box.

One way of making things simpler is to hide or conceal advanced functionality. Find out the most commonly used functions of your interface and tuck away the rest. You can do this with pop-up menus and controls, which are very common on desktop software. For example, if your search bar has advanced filters, put them away in a special drop-down menu at the end. If users need those filters, they can enable them with just a couple of clicks. Deciding what to keep and what to conceal isn’t a simple task, though, and will depend on how important and how frequently used each of the controls is.

CollabFinder search
When you click on the search link in CollabFinder, you aren’t taken to a different page. Instead, the search box controls drop down, allowing you to begin your search straight away.

2. Specialized controls Link

It’s important to select the right interface controls for the situation. Different situations can be handled in different ways, and certain controls are better at their intended task than others.

Backpack calendar picker
Backpack has a compact calendar date and time picker for selecting a reminder date.

For example, you can select a date by using drop-down lists for day, month and year. Drop-downs aren’t very efficient, however, when compared to a calendar picker, where you can click directly on a day you want. Calendar pickers also help you see the days, weeks and months (and especially workdays and weekends) more easily and so allow you to make a more informed decision more quickly than you would with a simple drop-down list.

MyBankTracker APY Calculator
MyBankTracker’s APY calculator features easytouse slider controls for quickly trying out different projections.

Another good example of this are sliders. Yes, you can always input a number manually, but for certain situations, slider controls do a much better job. Not only are they easy to use — just click and drag — but you can also see how your selection fits between the minimum and maximum of an available range.

3. Disable pressed buttons Link

One of the problems Web applications encounters with forms is the submission process. With very simple forms, if you click the “Submit” button twice or more very quickly, the form will be submitted two or more times. This is obviously problematic because it will create duplicates of the same item. Preventing duplicate submissions isn’t very hard, and it is essential to do this for most Web apps.

There are two tiers to this safeguard: clientside and serverside. We won’t go through the server-side safeguard here because this will vary depending on the programming language you use and your back-end architecture. What you should essentially do is put in a check to ensure during the processing stage that whatever is being submitted is not a duplicate, and if it is to block it.

Yammer disabled button
Yammer disables the “Update” button while your new message is being submitted.

The client-side stage is much simpler. All you have to do is disable the “Submit” button the very moment it is clicked. The easiest way to do this is to add a piece of JavaScript to the “Submit” button like this:

<input type="submit" value="Submit" onclick="this.disabled=true" />

Of course, we would advise you to also implement server-side checks to be sure that duplicates don’t get through.

4. Shadows around modal windows Link

Drop shadows around pop-up menus and windows aren’t just eye candy. They help the menu or window stand out from the background by reinforcing its dimensions. They also block out the noise of the content beneath the window by darkening the area around it with a shadow.

This technique hat its roots in traditional desktop applications and helps the user to focus his/her attention on the appearing window. Since most modal windows aren’t as easy to distinguish from the main content as in desktop applications, shadows help them to appear closer to readers, because the window appears to be three-dimensional and lay above the rest of the page.

Digg login window
Digg’s login window has a thick shadow around it to block out the noise of the page beneath.

To achieve this effect, designers often create a container with a transparent PNG-image as background and place the content inside the container – with equidistant padding on all sides of the box. Another option is to use a background image with transparent borders and position the content box within this box using absolute positioning. This is exactly what Digg does — this is the image they are using (dialog.png). And this is the markup and CSS-style they are using:


  <div id="container">
    <div style="display: block; top: 236px; opacity: 1;" class="dialog">
      <div class="body">
            <div class="content">


.dialog {
    position: absolute;
    left: 50%;
    margin-left: -315px;
    width: 630px;
    z-index: 100001;

.dialog .body {
    background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
    padding: 40px 13px 10px 40px;

Alternatively, you can also use JavaScript-based lightboxes or drop shadows using CSS3-attributes we’ve described earlier5, but you need to be aware that Internet Explorer won’t support them.

Basecamp project switcher
Basecamp’s project switcher window has a large soft drop shadow that helps the menu area stand out.

5. Empty states that tell you what to do Link

When you’re designing a Web application, it’s important not only to test it with sample data, but to ensure that it looks good and is helpful when there is nothing there yet. You should design the empty states.

When there is no information for a page or query yet, a helpful message telling the user how to start could go in that empty space. For example, a project management application’s home page may list the user’s projects, but if there are no projects yet, you could provide a link to the project creation page. Even if there is already a button to do that on the page, an extra bit of help doesn’t hurt.

Campaign Monitor empty state
Campaign Monitor points you in the right direction when you start building an email campaign.

This technique encourages users to actually try out the service and proceed directly with using the service after registration. Guiding the user through single steps of the application may help him or her to understand what advantages the application offers and if it’s useful or not. It is also important to present most important options to the users and only them — it doesn’t make sense to overflood them with numerous options. Keep in mind that users usually want to get a more or less concrete idea of what is offered to them, but they don’t want to jump into details — they have neither time nor interest in it.

Using empty states to motivate users and animate actions, you can significantly reduce the amount of “drop-outs” and help your potential clients to gain a better understanding of how the system works.

Wufoo empty state
Wufoo’s forms page has a large, friendly message inviting you to create a new form if none yet exist.

6. Pressed button states Link

Many Web applications have custom-styled buttons. These are anchors or input buttons that have custom images assigned as their backgrounds. The default input buttons may not be suitable in some cases, and the text links are sometimes too subtle. The challenge is, when you make your links look like buttons, they should act like buttons — and this includes having a “pressed” look when the user clicks on them.

This isn’t a purely visual tweak. Giving instant feedback to the user will make the application feel more responsive and bring the experience closer to what the user experiences on desktop applications.

You can add a pressed button state with CSS by styling the active pseudo-class of the link in question. So for example, if your anchor has the class add_task_button, you can style its active class by targeting add_task_button:active.

Highrise button pushed
Buttons in Highrise actually show a pressed state when you click on them, providing the user with a satisfying responsive feel.

Some people who haven’t yet signed up to your application will inevitably end up on the log-in page. They likely want to try out your application but can’t find the registration page in a hurry. Perhaps they’ve tried accessing a feature that’s only available to registered users.

Delicious sign in
Don’t have a Delicious account? No problem; a signup link is provided on the Delicious login page.

Goplan sign in
Goplan has a nice colored button on the login page pointing to the signup page.

Make things easy for these folks by placing a registration link on your login pages. If they haven’t got an account yet, they shouldn’t have to look for a registration page. Our studies confirm: 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe).

8. Context-sensitive navigation Link

It’s important to think about what the user expects to see and what they need in every given context. You don’t need to display the same navigation controls everywhere because users simply may not need them in every situation.

One of the best examples of context-sensitive controls is the recent change in the Microsoft Office 2007 interface, in which the default set of toolbars was replaced by ribbon controls. Each tab on the ribbon holds different controls relating to a particular activity, be it editing graphs, proofreading or simply writing. Web applications can also benefit from such context-sensitive controls because these controls help unclutter interfaces by showing only what the user needs, not everything that’s available.

Lighthouse sub-navigation
Lighthouse features a familiar tabbed navigation menu; however, it also has a second level of menus right under the set of tabs. This level displays only the items associated with the active section of the website.

9. More emphasis on key functions Link

Not all controls hold the same importance. For example, on a screen for creating a new item, you may have two buttons: “Create” and “Cancel.” The “Create” link is more important because that’s what the user will be doing most of the time. Only rarely will they need to cancel the screen. So if these controls are located side by side, you may not want to give both the same emphasis.

Lighthouse create or cancel
The “Create ticket” button in Lighthouse. You can see the “cancel” link next to it, in plain text. The button not only commands more importance but also has a larger clickable area and is easier to spot because of its frame.

To shift emphasis to the “Create” link, we can simply use different styles or types of controls. Some applications use the form input button for the create action, and have the cancel action as a text anchor. This not only gives the create button more clickable area, it also helps to grab the users gaze better when they’re looking for it.

10. Embedded video Link

While pictures and text are a great way to communicate and teach your users about your app’s features, video can be an even better alternative if you have the resources to produce it. Video has been gaining popularity on the Web in recent years. For Web apps, videos are generally used on the marketing website as a kind of screencast to show off a product’s features; however, this isn’t the only way to use video.

GoodBarry video
GoodBarry features a video screencast on its front page showing off the product. It also uses screencasts inside the app to teach people on how to get started.

Mailchimp video
MailChimp includes tutorial videos right on the admin panel to help out new users.

Some Web apps use video inside the application itself to teach users how to use certain features. Video is a fantastic way to quickly demonstrate how your product can be used, because it is easier to consume than a page of text, and it is also much clearer because the viewer can see exactly what to do.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

↑ Back to top Tweet itShare on Facebook

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. Additionally, you can read his thoughts on design, art and practical philosophy over at his personal blog.

  1. 1

    Jennifer Farley

    January 12, 2009 10:25 pm

    Very good collection. Interface design for web apps is something I would like to get more involved in and have been reading a few books, but I think this is a very clear overview and very helpful.

  2. 2

    very interesting and satisfying article! This is the stuff that I visit SM for!

  3. 3

    Superb post!

  4. 4

    thats amazing

  5. 5

    very instructive post, thanks!

  6. 6

    Liked the look of Kontain’s site until I realised the whole site is written using flash. Nice ideas however most of the site could be recreated using JQuery.

  7. 7

    Very useful post. Thanks, smashing!

  8. 8

    Wow, well done. Excellent apps dude!

  9. 9

    Thanks for the tips !:)

  10. 10

    Great sutff! Keep up the good work!

  11. 11

    Great article. The pressed button state is one of that little things that improves the user experience, the feedback for virtual actions.

  12. 12

    nice articles…

  13. 13

    Barry Chapman

    January 13, 2009 5:50 am

    In response to #3:

    Disabling the submit button in that manner will prevent the form from even being submitted. The best practice would be to call a handler function that will perform the following: (as an example)

    1. var form = document.getElementById(“formname”);
    2. form.submit.disabled=’true’;
    3. form.submit();

    This syntax may not be completely correct, so please do not critique it – I am merely showing best practice!

  14. 14

    Nouman Saleem

    January 12, 2009 9:01 pm

    bookmarked for upcoming site reference :}

  15. 15

    Good article, until you featured Lighthouse as an example of good UI. Lighthouse has got to be one of the hardest-to-use apps I’ve come across recently.

    Other than that, well done. I like the examples of search UIs.

  16. 16

    ultimate .. disabled submit button tip was very handy

  17. 17

    Great tips. I am always looking for ways to make our application more intuitive. It always surprises me to see 37 Signals products highlighted for good design. They have great “elements” but the complete apps are usually not that great. I guess each to his own!

  18. 18

    Excellent article… Thanks!

  19. 19

    Shuja Shabandri

    January 12, 2009 10:30 pm

    I love sliders, but having a small text field next to it as an alternative would help those using the devices like iPhone. Or at least alternative control should be enabled using browser detection.

  20. 20

    Loved it.

  21. 21

    Great post, always looking for well designed apps for inspiration, bookmarks set accordingly

  22. 22

    Thanks for the tips!

  23. 23

    Another great one. Thanks guys.

  24. 24

    Very useful information! Keep up the good work!

  25. 25

    Oh jeah, i love thoose “insider” or “professionell” tips!

  26. 26

    Awesome article, some very useful stuff here for taking useful web apps even further.

  27. 27

    “Interface elements on demand” is just bad bad bad. How does the user know what’s available? He does not! The user first has to check out everything to know where the functions are. That’s why such flyout things are bad. You can’t glance over a page and see everything.

    • 28

      Julian- In some cases I would agree, but certainly not in all cases. With sites whose users typically visit repeatedly (email sites, online bill pay, etc), on demand elements are quite useful in keeping a clean interface while providing easy access to lots of functionality.

      Thanks for the article!

  28. 29

    WOW! Thank you for the article.

  29. 30

    Nice article suitable for the novice as well as the more experienced. A few possible additions:
    – simple and clear instructions
    – context sensitive help
    – breaking complex tasks into smaller steps

  30. 31

    fuck on demand interface.

    that just slows down the user. only good hint here that are still not common sense is #5.

  31. 32

    Awesome! Very good collection of information. Thanks

  32. 33

    Scott deVries

    January 13, 2009 6:27 am

    Some good tips here!

  33. 34

    Good tips… thanks for inspiration :)

  34. 35

    This article is very informative and interesting. Really good tips!

  35. 36

    Brenley Dueck

    January 13, 2009 7:56 am

    Nice Tips! Interface design is a key part to a website


  36. 37

    I like having a signup link in the login form. One thing I do not like is sites where the assumption is that if you aren’t logged in, you aren’t signed up. That is, they give you a signup sheet with a link to the login page. This is frustrating for existing users.

  37. 38

    Ricardo Sousa

    January 13, 2009 9:55 am

    Great article as you get us used to :)

  38. 39

    To make the submit button disabling trick work in Safari 3, I had to add ‘submit()’ to the onclick, so it looks like this: onclick=’this.disabled=true;submit()’

  39. 40

    Well done! Most informative. Keep ’em coming!

  40. 41

    Thanks for the positive comments everyone, I’m glad you liked the article.

    Thanks for the pointers Barry and Morgan. I must confess, Javascript isn’t one of my strengths :)

    Julian: Regarding hiding elements in point 1. This is tricky because if you don’t hide elements, then you’re at risk of showing too much stuff on the screen at the same time. Putting too many things on the same plate will make it difficult to swallow. The more controls and options you have, the longer people will spend figuring out what to do and finding what they need. If they spend too long, they’ll get frustrated.

    Simplicity is achieved through thoughtful reduction, so if some controls aren’t used very often, it may be worth tucking them away somewhere. Because javascript is used to reveal them, they’re only a click away though, so you’re not going to lose much functionality. At the same time, you’ll get a simpler and cleaner interface. Deciding what to hide and what to keep is your task as the designer :)

  41. 42

    Bookmarked! What a good array of techniques!

  42. 43

    Manuel Bertelli

    January 13, 2009 12:45 pm

    Nice tips!!! Tks!!!!

  43. 44

    It’s posts like these that make smashingmag my all time favourite blog

  44. 45

    very useful post!

  45. 46

    useful post, thnx.

  46. 47

    Thanks for the tips!

    Here are some more :
    – no scrollbars within scrollbars (youtube…)
    – don’t scroll your navigation away
    – put the same button at the same place every time
    – put the active button on the left, cancel next to it, then the rest
    – enter submits, esc cancels (onkey event)

  47. 48

    Thanks for this info.
    Simple things that help tremendously… :)

  48. 49

    Brilliant article, thank you! Especially loving the kontain search box, good one!

  49. 50

    Antonio Wells

    January 14, 2009 5:09 am

    This was awesome, I’ve been looking for a non JavaScript intense way to disable a click button while the page was processing.

  50. 51

    A nice list of some helpful tips, except for disabling buttons using the inline onclick attribute. ;)

    @Antonio- this is a JavaScript solution. You only write your code as the attribute’s value.

  51. 52

    Great article. Love the topic!
    Thank you Dmitry and Smashing Magazine.

  52. 53

    Hi .. I like that backpack date and time picker.

    how do i get that free on for jquery :)
    any idea ? :)

  53. 54


    January 14, 2009 3:56 pm

    Interface elements on demand? Nooooooo!!! When you hide the features a user uses least frequently, you instantly make it difficult for them to find them — since they are infrequently used, the user often forgets where they are, and then has a nightmarish time finding them. Just say noooooo!

  54. 55

    The “Empty states that tell you what to do” tip is great, and is also a good idea for traditional apps.

  55. 56

    very good tips, I would say the admin of this site should pay some attention and look into using less advertising space, more than half of this page has nothing to do with the article!!!!!!

  56. 57

    WoW! Thanks a lot for all those techniques ! Bookmarked for later!

  57. 58

    Ashutosh Sharma

    January 14, 2009 9:06 am

    great stuff! really good tips! thanks.

  58. 59

    Thnx Smashing… Great and usefull TIPS!

  59. 60

    Fantastic article. Love you work. :)

  60. 61

    great stuff! really good tips! thanks.

  61. 62

    nice tips.good reasoning.

  62. 63

    The very simply fix for submit buttons is great, I will be using this all the time now. Thanks SM

  63. 64

    9. More emphasis on key functions – the example with button and link

    It’s not so much importance factor as protocol factor. The button in this example send’s the form by http POST request and cancel-link goes directly to different page by http GET request, and the element to be used is told in HTML specifications

  64. 65

    i love sites that don’t send you to a login page but have the login/register control fly out when clicked. i’m still waiting for dotnetnuke 5 to mature a bit more–we finally get to play with jquery! that’ll go a long way towards being able to build the items on the list.

  65. 66

    Great! Good education

  66. 67

    Abdulsalam Alasaadi

    January 17, 2009 10:37 pm

    Great article.. we want more

    many thanks

  67. 68

    Great article! Thanks for your help :)

  68. 69

    Thanks for the tips !:) VERY USEFULL

  69. 70

    This is really awesome. Love the way everything is explained.
    Thanks a lot,

  70. 71

    nice article thanks

  71. 72

    thanx a lot

  72. 73

    Well done. Great tips!

  73. 74

    Andrew Cairns

    February 1, 2009 4:35 am

    nice tips. thanks

  74. 75

    Great article with some very usefull tips. Also some nice up-to-date examples! Is it ok for me to post this article on my own blog?? Of course i’ll be naming and linking to original author.

  75. 76

    Excellent tips..Thanks a lot. Keep going with good works….

  76. 77

    good article.
    i agree with #9 (More emphasis on key functions), but what do you do when you have two equally important functions?

  77. 78

    Very-very cool!!

  78. 79

    great…. i like it… :)

  79. 80

    I really think first time screens with a sign up page are a great way to go especially for early life of websites. You want to get as many people on the site as possible. Couldn’t a developer use a cookie to send a first time user to a sign up page and then return users to page with a log-in tab, or just have a modal window for each. What does the community think?

  80. 81

    Amazing article.Thank you very match

  81. 82

    Excellent points. You seem very knowledgeable on this topic.

  82. 83

    sorry last comment was just as a testing action of this site.

  83. 84

    Great Tips. Enjoyed reading your post.

  84. 85

    yup, we are using every one of those and a couple more.
    Good post guys

  85. 86

    Saurabh Bansal

    February 4, 2010 10:48 pm

    Nice piece of Information, capturing the best of the trends in industry. Keep up!! And Thanks…

  86. 87

    Great article – very well thought out. Thank you!

  87. 88

    imran Hafeez Panhwar

    April 30, 2010 7:46 am

    I like the last one, which off-course will proved to be most interactive and has greater returns associated in terms of marketing.

  88. 89

    Great! bookmarked it.

  89. 90

    sharik siddiqui

    May 28, 2010 3:07 am

    Thanks for such a great tips…..

  90. 91

    Very helpful tips, Thanks!!

  91. 92

    Interface elements on demand “yes, yes, yes”. I get all the points about the user not knowing where things are etc. But the idea behind elements on demand is to make it a natural discovery process for the user. I emphasize the word natural. One of the examples given here was a search box with a menu revealing the filter options, the user would naturally discover this because in their mind they would be thinking “i need to search” (so they place their cursor in the search box), next they would enter the keyword and hit search. If they are unhappy with the results or if they start to think “hey i would like to search by a specific field” then they would look for the filter option (making it a natural discovery process). However by this time they may have already performed a search thus boosting their confidence that they won’t “stuff things up”.

    Alternatively the same search form example used in this article could display all of the options on one page and make it harder for the user to work out what they need to do, in order to perform a simple search.

  92. 93

    Your articles are very interesting an informative, but when the page loads and you begin to read the picture at the top loads and pushes stuff around. Very annoying.

  93. 94

    Nice !
    I Like IT…

  94. 95

    gonna spend some time here… nice one :)

  95. 96

    I was expecting something a little more, something out-of-the-ordinary.

  96. 97
  97. 98

    Thanks for the good tips !:)

  98. 99

    Nice tips! Really helpful.

  99. 100

    Nice combination of techniques to improve on my future sites. :)

  100. 101

    anand rathore

    April 27, 2011 11:44 am

    very helpful post.. thanks..

  101. 102

    Over 2 years old and still completely relevant. Thanks for the post, especially the example images of real sites in action.

  102. 103

    Prashanth M

    May 23, 2011 10:55 pm

    Indeed a nice way to design a web on users point of view. Hope this would help many to rethink on their website design.

  103. 104

    I Like point-9. We have rest button at our application which is the same size of other Buttons which created some time problem to the Users

  104. 105

    Very Informative . I dont know why i have found that there are no technical documents or research being done on usability or ease of use perspective of UI interfaces. Any how this one is a really useful resource. I wish to put my points in order to generate a well structured document for User Interfaces.

  105. 106

    I’m sorry, but Office ribbons as an example of *good* design? In what universe? The one where it’s OK that the command that you want is NEVER on the ribbon that is currently showing? (And I really do mean never.) The one where it’s admirable that you can’t customize the ribbons at all? The one where it’s fine to randomly hide commands if the window isn’t big enough? If you think all of these are acceptable UI behaviors, or at least only minimally annoying and outweighed by some imaginary benefits, then you clearly haven’t ever actually *used* Office.

    The fundamental principle that I wish UI designers would learn is that they are NOT smarter than their users. *Only* the user knows what he wants to do, and a UI that pretends to read his mind but gets it wrong is way worse than a UI that merely waits for input.

  106. 107

    very useful post. Thanks for the good tips.


↑ Back to top