Useful Web Application Interface Techniques-I


Internet is migrated with more number of applications. Without a platform constraints or installation requirements, the software as a service model looks very attractive. Web apps should be simple, intuitive and responsive user interfaces to compete with desktop applications which let the user to get things done with less effort & time. Here, a collection of useful interface design techniques are listed below for your reference.

User interface design
The webmaster should create the user interface design in a simple way. If more controls displayed on the screen, the user finds difficult to figure out the usage of interface. If less choice is provided for the user, the functions become more apparent and easy to scan. An interface simplification is not that much easy, esp. while limiting apps.

The webmaster can hide or conceal advanced functionality by finding out the most used functions of the interface. It can be done using pop-up menus and controls which are common on desktop software.

Specialized controls
Selecting the right interface control for the situation is one of the most important criteria. Though different situations arise, certain controls should be intended to do the task better.

Disable pressed buttons
In the submission process, most of the web applications encounter a problem with forms. Sometimes, if you click the submit button twice or more times, the form will be submitted more times by creating duplicates of the same item. It is in the webmaster to prevent duplicate submissions which is essential for most of the web apps. It can be done using two safeguards, client side & server side. If you go through server side safeguard, it varies depending on the programming language & back-end architecture. Client side safeguard is much simpler. The user is required to disable the submit button, the moment they click the button. It can be done easily by adding JavaScript to the submit button.

For example:
<input onclick=”this.disabled=true” type=”submit” value=”Submit” />
It displays like:

Shadows around modal windows
The drop shadows around pop-up menus and windows helps to stand out from the background by reinforcing it dimensions. It blocks out the noise of the content beneath the window by darkening the area with a shadow. This technique helps the user to focus his/her attention on the appearing window. Most of the modal windows are not that much easy to distinguish from the main content as in desktop applications, but shadows help to appear closer to the readers as the windows appear three dimensional and lay above the rest of the page.

Designers create a transparent PNG image as background and place the content inside the container with equidistant padding on all sides of the box. The other option is using a background image with transparent borders and positing the content box with absolute position. This is what exactly digg does

(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:
view source
print?
.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;
}

The user can use JavaScript based lightboxes or drop shadows using CSS3 attributes.

+ There are no comments

Add yours