CONTENT BEYOND SYLLABUS

Title : Useful WEB Application Interface Techniques

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.

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.

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 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’s APY calculator features easy–to–use 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.

Today, too many websites are still inaccessible. In our new book
Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make
future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the
book now!

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: client–side and server–side. 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 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

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

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.