Application of HCI Techniques for Developing a Web-based User Interface using AJAX


The main technologies which were adopted for this project were HCI and AJAX.
HCI stands for Human Computer Interaction; it is also referred as Computer Human Interaction (CHI); vaguely it is called Software Ergonomics. HCI mainly focuses on user-centered design and user-centered design is achieved when “people need not have to change the way that they use a system in order to fit in with it. Instead, the system should be designed to match their requirements.” HCI follows these principles:

1. Simple and natural dialogue
2. Speak the users’ language
3. Minimize user’s memory load
4. Be consistent
5. Provide feedback
6. Provide clearly marked exits
7. Provide shortcuts
8. Minimize the user’s slips and errors.
9. Provide help

AJAX stands for Asynchronous Javascript And XML. AJAX is a web method for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the data-source (server), so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page’s interactivity, speed, and usability; which are the main factors in order to make a design user-centered. AJAX is not a technology but a technique refers to a group of technologies. The main component of AJAX is “XMLHttpRequest” object in JavaScript language, used for exchanging data asynchronously as well as synchronously. AJAX also helps in real time updating of data that is any changes made at server-side will reflect in no time at client-side.

Other Technologies
Other technologies which were used for this project were XHTML, XML, JavaScript and CSS.

Development of the User-Interface
The development of the user interface can be divided into three main parts:
1. Dashboard design
2. Sidebar and Main display panel design
3. Header design

The main page of the user-interface is shown in the figure. This is the first page after user login. This user-interface is designed in such a way that a user does not need to click three times in order to navigate at any level. Dashboard is loaded synchronously when the whole page loads. The sidebar and header area is made static since a user requires it all the time while dashboard area is acts like a container to other pages and data. New data is loaded in dashboard area asynchronously.
Any window can be maximized by double clicking on the window or by clicking the link provided in the dashboard module named as Dashboard. The maximized window loads on top of the interface to save the time of the user by avoiding unnecessary loading. The maximized window shows the content of the smaller window in detail.

The following figure shows the area where the new content will load after clicking the “Schedule New Scan”. In the next figure we can see that the content is loaded which was requested by clicking “Schedule New Scan” button.

This whole process of loading takes very less time and user remains intact with interface. And also user finds it very easy to work with the application when he can get all the information required very fast and at one place with minimum number of modifications in the user interface. This also reduces the idleness of the user enhancing the continuity of the interaction between user and the interface. And also this is the maximum level of navigation required in this application but still if some data is required, it loads on the top of the interface as shown in the next figure. When clicked on the “[Click here to select]” link a small window loads avoiding any modification in the present interface.

Besides of designing a user-centered interface there are some other important parameters which are also taken care of:

  • The web application is cross-browser. It can run in any browser without any change in the basic structure of the application. It helps user in running the application on different platforms.
  • This application can run on any screen-resolution. The problem of resizing during the change of screen resolution is also taken care of. The application does not show any inconsistency at various resolutions.

One thought on “Application of HCI Techniques for Developing a Web-based User Interface using AJAX

  1. Lately I have been trying to find any kind of information for my project, but unsuccessfully. Now it seems like I finally found a lot. This is the greatest site among all internet-sources.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s