Graphical User Interface Design and Principles

Impressive user interface applications are visually clear and forgiving, they instill a feel of control in their users. Users can quickly...

Impressive user interface applications are visually clear and forgiving, they instill a feel of control in their users. Users can quickly observe the options and understand how to reach their goals and finish their task.

The impressive web site interface does not bother to the user with the source code of the system. User checks whether the task is accurately and continuously saved or not. Providing options for the user to go back or forward on any activity of his task at any time would be better. The impressive and efficient web sites and web services do a lot of work, while they just need little amounts information from the users.

Anticipation: Web site should try to meet the expectations of user requirements. It should not make users to search for necessary tools. The website does have to come up with the required information for every functioning step for the user.

Autonomy: The computer, website which is running in it and its interface and the work area belong to the user. But for user, this does not mean to toss out the principles. Users should be left free so that they can grasp efficiently and can gain mastery when they are placed in work. However, people do not feel free in the absence of all boundaries (Yallum, 1980).

  •       Using status notifications to make users aware and informed.
  •       Displaying status information updated and within easy view.

Color Blindness: Colors are used to convey information in the interface, but one should use clear color to convey the information to user. Most of the developers use color displays, but still the problem persists that is approximately 10% of human males, along with rare sprinkling of females who have slight color blindness in their vision.

Consistency: Certain principles are followed which give the interface designer many options to release a web application without interrupting the fields of consistency which are essentials to user.

Windows 8 One of the best user interfaces
 Stages of Consistency:                                                
1.      Interpretations of user behavior,
2.      Invisible structures in consistency,
3.      Small and simple visible structures.
4.      The look of a single application or services,
5.      A suite of applications.
6.      In- house consistency.
7.      Platform consistency.
Inconsistency: The important thing is, to be visually inconsistent when things go in other way but they have to be visually consistent when things work out in the same way.

Avoiding Uniformity: Objects have to be made consistent with their behavior. Objects that act differently and look different have to be created.
The important thing is to maintain consistency of user expectations.
The route to reach user thoughts is only by doing a test. Nothing replaces this.

Defaults:  These should be easy to remove: The options containing default values should be chosen selectively. Then users can replace the default values with the new values. The values are expected to be answerable.
The default word should not be used in any website. “Standard”, “Use Custom Settings”, “Restore Initial Settings” should replace it, or similar terms to pose and describe what actually will happen.

Efficiency of the user:
  •        User results should be concentrated but not the computers.
  •       Manpower costs a lot more than computers, whereas it appears as increase in computer productivity will result in increase of human productivity but the other way is true. While taking a decision over the efficiency of a system, we should have a fore look on the efficiency of the system.
  •      User should be kept busy: the highest expense in a business is cost of manpower.  When the user is kept waiting for a system to respond before he can proceed, money is being lost because of wait time.
  •      It is to increase the skill in a business or other organization must increase everyone’s skillfulness, not just the skill of a single group.
  •      The great efficiency of software is founded in the basic concepts of the software but not in the interface design of the website.
  •     Help messages should be written and should also be made responsive to the problem: good writing pays off big in comprehension and efficiency.
  •       Menu, text labels and button labels should have the key word(s) first.

Explorable Interfaces: 
  •       Users should be given well-marked roads and landmarks and then they can be asked to carry on their work as they wish without any worry.
  •      Explain the risk freeness, ease of use of the web sites. Users should not be trapped into a filed because of a service. They have to be given a chance to resist themselves. So this can allow both the new user and experienced user to finish their task as early as possible.
  •       Sometimes, we need to provide tracks.
  •      As nearer the developer reaches to the experience, he needs to take care of users.. One single use of the website for doing a unknown task need a lot more indications in the interface than a normal interface used by experts.
  •      Users have to feel home atmosphere by the offerings.
  •     The visual elements have to be stabilized to make the users navigate faster and should also act as land marks to make the users feel home.
  •      Actions should be made reversible.
  •     User always tries to cross the boundaries of navigation. But at times they like to check what happens if they do some risk oriented task and sometimes they do it accidentally. Their actions can be made reversible and can be allowed to carry on with their work.
  •      Always allow the option "Undo."
  •     To avoid the unsupported result one has to display the dialog like "Are you really, really sure?" which slows user.
  •     If the dialog's are not provided the user slows down even much. A case study proved that people will not make mistakes in risky environment but they make more mistakes only when they get more support. These people work very slow to avoid errors
  •       A way out should be given,One should not be made feel trapped. A clear way out should be shown.
  •       It should be made comfortable to stay in.

Fitt’s Law:        “Time to acquire a target is a function of the distance to and size of the target”.
 This is for representing the way of pointing, by hand or finger, or virtually. This to point an object on a computer screen using a pointing device. [in1954 by PAUL FITTS].

Fitt's law indicates the Mac’s pull-down menu should be five times faster than Windows menu and this is proved.

This law indicates that windows task bar which repeatedly and unnecessarily get into cursor’s way and is proved. This identifies that most quickly accessible target which is at the corners computer screen.
The pinned icons on top, bottom, sides and corners of the computer display and large buttons make the work go faster.

One lined toolbar with the icons bulging out at the edges of the computer screen will be faster than a double lined toolbar with icons carefully-applied on it with one pixel at the non-clickable edge.
Human Interface Objects: The human interface related objects, need not be the same as the one observed at object-oriented systems but these are included with trash bins, documents and folders. These all appear within in user activity field and are not mapped to any object-oriented item. The fact is that GUI’s are developed at non-object oriented areas.
  • The objects used in interfaces can be felt, heard, seen or can be perceived.
  • The human interface objects, which can be founded, are a bit familiar to graphical user interfaces. Objects that work out to sound or touch are less familiar. Accurate work has to be done in developing auditory icons.
  • The interface objects respond in a standard way of communication and behavior
  • These objects in the human interface should be understandable, self-consistent, and stable.

Latency Reduction:
  • Multi-tasking should be used to ignore latency.
Latency is avoided by user’s multi-tasking techniques, which can let them do their work at the same time, while computations take place in the background.
  • Latency should be reduced in user experience.
·         Indications for all button clicks by visual notes or audio feedback within no time.
·         Hourglass indications for every task, which takes time.
·         Animated display of hourglass so that users can understand system is not hanged.
·         A representative message to indicate the length of the wait time for any action, which will take longer than expected time.
·           Display to show actual length of time.
·         A message to show users that the task is engaged while they are waiting for long processes in order to save time.
·         The system should respond with a buzzer sound and visual indication upon its return after the process to let the users know the end of process
·         Repeated click of the buttons should be avoided. Because, in first case the low bandwidth and users press the button repeatedly and cause the things to run even bit slower.
  • Making the website work faster
The objects in any application if they are not useful to user should be removed ruthlessly.

Learn ability:
Applications cannot learn anything. Users have to go for them and gain mastery. While carrying out the tasks no matter even if they are simple will give the scope of learning.
Limiting the Trade-Offs.
Learn ability and usability is not avoidable. One can decide what is required, so that attack can be made. “Ease of learning automatically coming at the expense of ease of use is a myth”. [ by J Nielsen on 1 November 2005]

Metaphors Use of:
These enable the users to understand the things in detail of the conceptual model. These create visible picture in the mind of a user.
The metaphors are made impressive to user’s vision through sight, touch, sound and kinesthesia just by triggering the components in the user’s memory. These invoke the familiar objects but with a new style.
For example the Windows 95 operating system, which has the object, called briefcase acts like real world brief case. This briefcase keeps the electronic documents in it to make them portable.  These documents are updater automatically when the portable drives are connected to the machine.

Protect User’s work:
Users have to be ensured that they will never lose their work because of an error done by them or by Internet transmission problems or any other reason, which are unavoidable like power failure to the computer.

  • Text should be displayed in high contrasted colors. The best colors to display are black text on white pane. Grey panes should be avoided.
  • The text should be in a standard font size. Particularly some of the characters are for favorable display of labels and instructions. 
  • Attention should be given of elder people. Presbyopia is a state of hardness and less flexible lenses in the eye, which are combining with reduced light transmission into the eye. This will affect most people over age 45. One should not believe the young age eyes to make and take decisions.
Track State:
Browser-based applications exist in stateless environment; one should take the responsibility to track state.
Developer may need to know:
  • Whether it is the first time the user has been logged into the system
  • Where the user is from
  • Where the user is going
  • Where the user has been during this session
  • Where the user was when he left off in the last session
Developers can make use of the work carried by user to find out where the user has been.
The information of the existing state will be placed in a cookie of the computer the user is using, during the session of transaction service. Later on it is transferred and stored on the server when the user logout the web site. The users have to be given an option to logout at office and after going home they can take up exactly where he left the work at office.

Visible Navigation:
Invisible navigation in the websites should be avoided. Most of the users cannot understand and will not able to generate the overview; therefore they will become lost if asked to carry out the task.

The Web browser which displays impressive screens, good looking buttons of the web site which are displayed have an invisible gap in navigation. As one can only see a certain page he is on, but not the vast space between web pages. When users reach applications, developer must take care to reduce navigation space and make that navigation that is clear and natural.

Present an illusion so that users always stay in the same place, with the work brought to them. This not only eliminates the need for site maps and other navigational aids. This offers users a greater sense of mastery and autonomy in using web applications.

The capability and security are the main requirements of the user and the developer’s task is to provide them without the designers concern because the web is stateless. Therefore one can understand that web navigation is an invisible challenge.

*** This text is written after studying various sources as part of my internship. This research was for development of a Web Application project for my Masters Degree. 

You Might Also Like



Flickr Images