Human Computer Interaction for interAct

A basic goal of HCI is to improve the interaction between users and computers by making computers more usable and receptive to the user’s needs.

User Interface designing is a sub area of Human Computer Interaction. The design should be centred around the user and his requirements. The golden rule in User Interface designing is “Know your user”. So before starting the design should gather the user requirements including his personal desires. Then the user satisfaction could be maximized and the user will not refuse the system.

Human Emotions

User should not be stressed by the User Interfaces. So the UI should be kept simple as possible according to KISS, keep it simple as possible.

Human are prone to errors. There are two types of errors in the study of Human Computer Interaction. Those are slips and mistakes. In slips user know what to do and how to do but he might do some other thing than expected. The target should be enough in size to do the required operation. So the controls should be designed in enough size to facilitate dragging and dropping and on clicks.
Users do mistakes when they do not know what to do. So there should be help pages and proper documentation to guide the user.

Display Devices

The designed UIs should be displayed in various display devices like monitors, mobile screen, touch sensitive display. The resolution or number of pixels on screen and aspect ratio, ratio between width and height should be considered before sending the UIs for a device. Color depth and anti aliasing or soften edges using shades of colors should be considered when developing the user interfaces.

Input Devices

We are dealing with PC and mobile so we have to consider the input devices, touch pad, track ball, cursor keys, mouse, touch screens and keyboards(QWERTY). User Interfaces should provide the facility to deal all the types of users. The beginners might be slow and after some learning user expect to do the same work in less time. So keyboard short cuts should be provided targeting those users.

Selecting the colors

The colors should not be used to convey the messages because 8% of men and 1% of women are color blind and they are not able to understand the difference between some colors. Usually red is used for important things and blue should not be used for important things.

Aesthetic pleasing

Aesthetic pleasing can be achieved by adding only the required controls and the user preferred colors. The design should facilitate the designer to select the colors for the end user.


Square ended strokes are good on screens so it is recommended to use san-serif in UIs. Lowercase enhance the readability. Uppercase should only be used for individual letters and non words.

WYSIWYG – What You See Is What You Get

The designed UIs could be run on sandbox environment first to give the designer a feeling about how it is displayed in the real environment. Android emulator is integrated to the interAct IDE in order to support the mobile view. The UIs should be automatically adapt the user interface into the mobile environment by having paging with navigation.

Input validation

The controls should have input validation. This can be automatically done using HTML5 input type validation but only the latest version of Opera support all the features of HTML5. Google chrome browser supports most of the features, Mozilla firefox supports very few features and Microsoft Internet Explorer does not support HTML5.

The improvements to the UIs can only be measured by a user survey.


Author: Harshani Nawarathna

Sri Lankan woman in Computing

One thought on “Human Computer Interaction for interAct”

  1. Very Interesting article Thanks. Any references? What are the prospectives of doing a very good UI with netbeans/dreamweaver? By the way, Your instructions of making jarsper work with a servlet are spot on. Thank you


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