Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. 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. 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.

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.

Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS and Twitter1 Follow us on Twitter2.

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 search8
When you click on the search link in Kontain’s9 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 search10
When you click on the search link in CollabFinder11, 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 picker12
Backpack13 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 Calculator14
MyBankTracker’s15 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 button16
Yammer17 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 window18
Digg’s19 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:

(X)HTML:

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

CSS:

.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 earlier20, but you need to be aware that Internet Explorer won’t support them.

Basecamp project switcher21
Basecamp’s22 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 state23
Campaign Monitor24 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 state25
Wufoo’s26 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 pushed27
Buttons in Highrise28 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 in29
Don’t have a Delicious30 account? No problem; a signup link is provided on the Delicious login page.

Goplan sign in31
Goplan32 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 confirm33: 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-navigation34
Lighthouse3735 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 cancel36
The “Create ticket” button in Lighthouse3735. 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 video38
GoodBarry39 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 video40
MailChimp41 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.

Please take a look at the following related articles:

Discuss further techniques in comments! Link

Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. (al)

Footnotes Link

  1. 1 http://twitter.com/smashingmag
  2. 2 http://twitter.com/smashingmag
  3. 3 https://www.smashingmagazine.com/2008/08/11/5-useful-coding-solutions-for-designers-and-developers/
  4. 4 https://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
  5. 5 https://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  6. 6 https://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/
  7. 7 https://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-design/
  8. 8 http://www.kontain.com
  9. 9 http://www.kontain.com
  10. 10 http://www.collabfinder.com/
  11. 11 http://www.collabfinder.com
  12. 12 http://www.backpackit.com
  13. 13 http://www.backpackit.com
  14. 14 http://www.mybanktracker.com
  15. 15 http://www.mybanktracker.com
  16. 16 http://www.yammer.com
  17. 17 http://www.yammer.com
  18. 18 http://www.digg.com
  19. 19 http://www.digg.com
  20. 20 https://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
  21. 21 http://www.basecamphq.com
  22. 22 http://www.basecamphq.com
  23. 23 http://www.campaignmonitor.com
  24. 24 http://www.campaignmonitor.com
  25. 25 http://www.wufoo.com
  26. 26 http://www.wufoo.com
  27. 27 http://www.highrisehq.com
  28. 28 http://www.highrisehq.com
  29. 29 http://www.delicious.com
  30. 30 http://www.delicious.com
  31. 31 http://www.goplan.info
  32. 32 http://www.goplan.info
  33. 33 https://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
  34. 34 http://www.lighthouseapp.com
  35. 35 http://www.lighthouseapp.com
  36. 36 http://www.lighthouseapp.com
  37. 37 http://www.lighthouseapp.com
  38. 38 http://www.goodbarry.com
  39. 39 http://www.goodbarry.com
  40. 40 http://www.mailchimp.com
  41. 41 http://www.mailchimp.com
  42. 42 https://www.smashingmagazine.com/2008/08/11/5-useful-coding-solutions-for-designers-and-developers/
  43. 43 https://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
  44. 44 https://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  45. 45 https://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/
  46. 46 https://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-design/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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

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

    -1
  2. 2

    Superb post!

    1
  3. 3

    very instructive post, thanks!

    1
  4. 4

    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.

    1
  5. 5

    Very useful post. Thanks, smashing!

    2
  6. 6

    WoollyMittens.nl

    January 13, 2009 4:28 am

    Please… when you implement all this eye-candy, make sure that your page remains accessible: http://www.w3.org/WAI/

    -1
  7. 7

    Wow, well done. Excellent apps dude!

    http://www.privacy-web.us.tc

    -1
  8. 8

    Thanks for the tips !:)

    2
  9. 9

    Great sutff! Keep up the good work!

    0
  10. 10

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

    2
  11. 11

    cool,,
    nice articles…

    1
  12. 12

    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!

    3
  13. 13

    Nouman Saleem

    January 12, 2009 9:01 pm

    bookmarked for upcoming site reference :}

    -2
  14. 14

    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.

    -7
  15. 15

    ultimate .. disabled submit button tip was very handy

    -3
  16. 16

    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!

    2
  17. 17

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

    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.

    1
  19. 19

    Loved it.

    -2
  20. 20

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

    0

↑ Back to top