General Principles of User Interface Design and Websites

Bhaskar N U, Prathap Naidu P, Ravi Chandra Babu S R & Govindarajulu P
International Journal of Software Engineering (IJSE), Volume (2) : Issue (3) : 2011 45
General Principles of User Interface Design and Websites
N. Uday Bhaskar udaynagella@gmail.com
Department CSE, RGMCET,
Nandyal, 518501,INDIA
P. Prathap Naidu prathap_nd@yahoo.co.in
S.R. Ravi Chandra Babu ravichandrababucse@gmail.com
P.Govindarajulu pgovindarajulu@yahoo.com
Department Computer Science, S.V.University
Tirupati, INDIA
Abstract
User Interfaces have gone a major transformation since 1970s, all this was possible because of
the advances in HCI and related technologies. The Principles of User Interface design has
contributed much to the change that we see in the present day user interfaces and predominantly
the web interfaces of various websites. This paper presents the various General Principles of
User Interface Design and their relevance for present day web interfaces with full length analysis.
Each principle is investigated over five different types of web interfaces with 30 different websites
per type. The various properties that contribute to the principles have been investigated
thoroughly and their statistical values are reported in their entirety.
Keywords: Aesthetics, Clarity, Consistency, HCI, User Interface.
1. INTRODUCTION
The ability to design user interface so that it attracts the users attention and enhances the user
experience is always a challenge that the UI designers face. In this continuous race to develop
attractive user interfaces comes the help of the user interface principles to a great extent. It has
been argued that the general user interface guidelines regain slight modifications that are specific
to a system for effective results [1]. With the rapid growth in the use of web has resulted in
discovering the fact that simple web presence does not guarantee attracting visitors to an
organization website [2].
The esthetics of the user interface is the predominant factor in gaining the users attention and
laurels. Careful application of esthetic concepts can aid acceptability and learnability [3]. In a
research [3] by David Chek Ling Ngo,, et al. esthetic measures have been investigated [and
successfully published] by taking 14 important characteristics, namely, balance, equilibrium,
symmetry, sequence, cohesion, unity, proportion, simplicity, density, regularity, economy,
homogeneity, rhythm, order and complexity [3]. California Digital Library (CDL) follows a set of
user interface principles when selecting information services vendors on behalf of the entire
university of California [4].
This paper presents various principles of user interface design that are general and also reports
about these general principles as such their extent of presence in the modern web user

interfaces. The data and values presented here are obtained during a case study explained in
section 2 of this paper.
2. CASE STUDY
The study has been carried out by students of Human Computer Interaction course, in the final
semester of four year under graduation program. Students have been distributed among 30
batches; each batch consisting of minimum of 4 students and maximum of 5 students.
The investigative form of study has been carried out over five categories of web user
interfaces, namely,
a) Social network website interfaces
b) Job site interfaces
c) Shopping website interfaces
d) Stock trading website interfaces
e) E-mail interfaces.
The student batches were given forms consisting of user interface principles, properties,
characteristics that need to be investigated over the respective website interfaces, and asked to
fill them accordingly. The student batches have selected over 150 different popular websites that
come under these five different categories. Each batch will investigate one web user interface per
category, making 30 web interfaces per category for all batches. The duration for the study
carried out was around 3 months. Every batch worked for minimum 3 hours per week in the
college laboratory, investigating various user interface aspects of their selected web interfaces.
The investigative form of study by the HCI students brought interesting and broad details about
various user interface properties, characteristics, principles. We present all these in detail in the
following sections of this paper.
3. GENERAL PRINCIPLES
The design goals in creating a user interface are described below. They are fundamental to the
design and implementation of all effective interfaces, including GUI and Web ones. These
principles are general characteristics of the interface, and they apply to all aspects. They are
derived from the various principles described in [5], [6, 7], [8], [9, 10, 11], [12], and [13].
3.1 Aesthetically Pleasing
A design aesthetic, or visually pleasing composition, is attractive to the eye. It draws attention
subliminally, conveying a message clearly and quickly [14].Visual appeal is provided by following
the presentation and graphic design principles to be discussed, including providing meaningful
contrast between screen elements, creating spatial groupings, aligning screen elements,
providing three-dimensional representation, and using color and graphics effectively. Good
design combines power, functionality, and simplicity with a pleasing appearance [14]. The graph
shown in figure1 shows the percentages of pleasing felt by the users.
FIGURE 1: Aesthetically Pleasing
In Social Networking interfaces, 26% of overall aesthetics is contributed by providing meaningful
contrast between screen elements, 24% by proper grouping of elements, 24% by the proper
alignment of screen elements and groups, 3% by three dimensional representation and 22% by

effective and simple usage of colors and graphics. The Aesthetically pleasing property was at
75.2% for all the investigated Social Network web interfaces. In Online Shopping website
interfaces, 26% of overall aesthetics is contributed by providing meaningful contrast between
screen elements, 25% by proper grouping of elements, 22% by the proper alignment of screen
elements and groups, 7% by three dimensional representation and 19% by effective and simple
usage of colors and graphics. The Aesthetically pleasing property was at 76.2% for all the
investigated Shopping website interfaces.
As of Job site interfaces, 27% of overall aesthetics is contributed by providing meaningful contrast
between screen elements, 28% by proper grouping of elements, 24% by the proper alignment of
screen elements and groups, 1% by three dimensional representation and 20% by effective and
simple usage of colors and graphics. The Aesthetically pleasing property was at 71.8% for all the
investigated Job site interfaces. In Stock trading website interfaces, 26% of overall aesthetics is
contributed by providing meaningful contrast between screen elements, 23% by proper grouping
of elements, 21% by the proper alignment of screen elements and groups, 9% by three
dimensional representation and 21% by effective and simple usage of colors and graphics. The
Aesthetically pleasing property was at 71.2% for all the investigated Stock trading website
interfaces.
With E-mailing interfaces, 26% of overall aesthetics is contributed by providing meaningful
contrast between screen elements, 24% by proper grouping of elements, 24% by the proper
alignment of screen elements and groups, 2% by three dimensional representation and 24% by
effective and simple usage of colors and graphics. The Aesthetically pleasing property was at
71.8% for all the investigated Stock trading website interfaces.
3.2 Clarity
The interface must be clear in visual appearance, concept, and wording. Visual elements should be
understandable, relating to the user’s real-world concepts and functions. Metaphors, or analogies,
should be realistic and simple. Interface words and text should be simple, unambiguous, and free of
computer jargon [14]. The graph in figure 2 represents percentage of clarity felt by the user in
different types of web interfaces.
FIGURE 2: Clarity
With the interfaces of Social networking sites, 26% of overall clarity is contributed by visual
appearance, concepts & clear wording, 22% by visual elements understandable in relation to the
user’s real-world concepts and functions, 20% by simple interface words and text, 15% by
unambiguous text and wording, 17% by words free of computer jargon. The overall clarity stood
at 74.4% for this category of web interfaces. For the interfaces of Online Shopping websites,
26% of overall clarity is contributed by visual appearance, concepts & clear wording, 24% by
visual elements understandable in relation to the user’s real-world concepts and functions, 24%
by simple interface words and text, 9% by unambiguous text and wording, 17% by words free of
computer jargon. The overall clarity stood at 78.2% for this category of web interfaces.
For the interfaces of Job sites, 26% of overall clarity is contributed by visual appearance,
concepts & clear wording, 26% by visual elements understandable in relation to the user’s real-

world concepts and functions, 27% by simple interface words and text, 9% by unambiguous text
and wording, 12% by words free of computer jargon. The overall clarity stood at 74.2% for this
category of web interfaces. For the interfaces of Stock trading websites, 25% of overall clarity is
contributed by visual appearance, concepts & clear wording, 22% by visual elements
understandable in relation to the user’s real-world concepts and functions, 22% by simple
interface words and text, 16% by unambiguous text and wording, 14% by words free of computer
jargon. The overall clarity stood at 74% for this category of web interfaces.
Coming to E-mailing websites, 26% of overall clarity is contributed by visual appearance,
concepts & clear wording, 21% by visual elements understandable in relation to the user’s real-
world concepts and functions, 25% by simple interface words and text, 13% by unambiguous text
and wording, 15% by words free of computer jargon. The overall clarity stood at 73.4% for this
category of web interfaces.
3.3 Compatibility
The aspects of compatibility that have been investigated are [14]:
a) User compatibility, b) Tasks and job compatibility, c) Product compatibility.
The graph in figure 3 depicts user’s understanding of compatibility among various web user
interfaces.
FIGURE 3: Compatibility
For user interfaces of Social Network sites, 64% of overall compatibility is contributed by the
functions/tasks provided in the user interface, that are related to the work user wanted to perform,
36% by the user feel towards the screen and the way it is structured. The students felt
compatibility is only up to 66% in all the investigated user interfaces of this category. For user
interfaces of Online Shopping sites, 72% of overall compatibility is contributed by the
compatibility is only up to 60% in all the investigated user interfaces of this category.
With the user interfaces of Job sites, 78% of overall compatibility is contributed by the
compatibility is only up to 58.5% in all the investigated user interfaces of this category. For user
interfaces of Stock trade sites, 65% of overall compatibility is contributed by the functions/tasks
provided in the user interface, that are related to the work user wanted to perform, 35% by the
user feel towards the screen and the way it is structured. The students felt compatibility is only up
to 67.5% in all the investigated user interfaces of this category.
In the user interfaces of E-mailing web sites, 71% of overall compatibility is contributed by the
compatibility is only up to 60% in all the investigated user interfaces of this category.

3.4 Comprehensibility
A system should be understandable, flowing in a comprehensible and meaningful order. Strong
clues to the operation of objects should be presented. The steps to complete a task should be
obvious. Reading and digesting long explanations should never be necessary [14]. The graph in
figure 4 depicts various levels of comprehensibility felt by the users in the 5 different web user
interfaces investigated.
FIGURE 4: Comprehensibility
In Social Network sites, for the user interfaces, 49% of overall comprehensibility is contributed by
the screen and it’s elements that are understandable & meaningful, 51% by providing strong
clues while doing operations or tasks, 0% by long explanations. The overall comprehensibility
stood at 57.3% for this category web interfaces. In Online Shopping web sites, for the user
interfaces, 46% of overall comprehensibility is contributed by the screen and it’s elements that are
understandable & meaningful, 40% by providing strong clues while doing operations or tasks,
14% by long explanations. The overall comprehensibility stood at 70.3% for this category web
interfaces.
In Job sites, for the user interfaces, 48% of overall comprehensibility is contributed by the screen
and it’s elements that are understandable & meaningful, 36% by providing strong clues while
doing operations or tasks, 16% by long explanations. The overall comprehensibility stood at
62.3% for this category web interfaces.In Stock trade web sites, for the user interfaces, 43% of
overall comprehensibility is contributed by the screen and it’s elements that are understandable &
meaningful, 41% by providing strong clues while doing operations or tasks, 16% by long
explanations. The overall comprehensibility stood at 71% for this category web interfaces.
In E-mailing web sites, for the user interfaces, 52% of overall comprehensibility is contributed by
the screen and it’s elements that are understandable & meaningful, 35% by providing strong
clues while doing operations or tasks, 13% by long explanations. The overall comprehensibility
stood at 59% for this category web interfaces.
3. 5 Configurability
Easy personalization and customization through configuration and reconfiguration of a system
enhances a sense of control, encourages an active role in understanding, and allows for personal
preferences and differences in experience levels. It also leads to higher user satisfaction [14].
Some people will prefer to personalize a system to better meet their preferences. Other people
will not, accepting what is given. Still others will experiment with reconfiguration and then give up,
running out of patience or time. For these latter groups of users a good default configuration must
be provided [14]. The graph in figure 5 shows configurability levels among different web
interfaces.

FIGURE 5: Configurability
For Social network user interfaces, 58% of overall configurability is contributed by the availability
of customization, 42% by the availability of personalization. The overall configurability stood at
62% for this category web interfaces. For Online shopping user interfaces, 63% of overall
configurability is contributed by the availability of customization, 37% by the availability of
personalization. The overall configurability stood at 35% for this category web interfaces in the
study. For Job user interfaces, 52% of overall configurability is contributed by the availability of
customization, 48% by the availability of personalization. The overall configurability stood at 48%
for this category web interfaces. For Stock trade user interfaces, 57% of overall configurability is
contributed by the availability of customization, 43% by the availability of personalization. The
overall configurability stood at 50% for this category web interfaces. For E-mailing user interfaces,
49% of overall configurability is contributed by the availability of customization, 51% by the
availability of personalization. The overall configurability stood at 73.5% for this category web
interfaces.
3.6 Consistency
Consistency as said by Galitz [14] can be achieved by:
A system should look, act, and operate the same throughout. Similar components should:
— Have a similar look.
— Have similar uses.
— operate similarly.
■ The same action should always yield the same result.
■ The function of elements should not change.
■ The position of standard elements should not change.
Design consistency is the common thread that runs throughout these guidelines. It is the cardinal
rule of all design activities. Consistency is important because it can reduce requirements for
human learning by allowing skills learned in one situation to be transferred to another like it. The
graph in the figure 6 depicts consistency levels for various types of web user interfaces
investigated.
FIGURE 6: Consistency

When studying the concept of consistency in Social network web interfaces, 32% of overall
consistency is contributed by the similar components having similar look, 26% by similar
components having similar uses, 29% by same actions producing same result in different
times/pages/sections, 13% by changing standard elements positions. The overall consistency
stood at 56.75% for this category of web user interfaces. When studying the concept of
consistency in Online Shopping web interfaces, 29% of overall consistency is contributed by the
similar components having similar look, 25% by similar components having similar uses, 33% by
same actions producing same result in different times/pages/sections, 13% by changing standard
elements positions. The overall consistency stood at 58.25% for this category of web user
interfaces.
When studying the concept of consistency in Job web interfaces, 35% of overall consistency is
contributed by the similar components having similar look, 19% by similar components having
similar uses, 24% by same actions producing same result in different times/pages/sections, 22%
by changing standard elements positions. The overall consistency stood at 48.25% for this
category of web user interfaces. When studying the concept of consistency in Stock trade web
interfaces, 30% of overall consistency is contributed by the similar components having similar
look, 24% by similar components having similar uses, 34% by same actions producing same
result in different times/pages/sections, 12% by changing standard elements positions. The
overall consistency stood at 54.25% for this category of web user interfaces.
In E-mailing web interfaces, 27% of overall consistency is contributed by the similar components
having similar look, 24% by similar components having similar uses, 37% by same actions
producing same result in different times/pages/sections, 12% by changing standard elements
positions. The overall consistency stood at 59.5% for this category of web user interfaces.
3.7 Control
Control is feeling in charge, feeling that the system is responding to your actions. Feeling that a
machine is controlling you is demoralizing and frustrating. The interface should present a tool-like
appearance. Control is achieved when a person, working at his or her own pace, is able to
determine what to do, how to do it, and then is easily able to get it done [14]. The graph in the
figure 7 shows levels of control felt by the users among various web user interfaces.
FIGURE 7: Control
With the user interface of Social network web sites, 26% of overall control is contributed by the
property that actions are carried out only on user requests, 26% by actions that are performed
quickly, 14% by the availability interruptions or terminations for the actions being carried out, 14%
by the interruptions due to errors, 20% by the availability of different modes of interaction. The
overall control stood at 61.8% for this category web user interfaces. For the user interface of
Online Shopping web sites, 28% of overall control is contributed by the property that actions are
carried out only on user requests, 26% by actions that are performed quickly, 22% by the
availability interruptions or terminations for the actions being carried out, 9% by the interruptions
due to errors, 15% by the availability of different modes of interaction. The overall control stood at
60.8% for this category web user interfaces.

For Job web sites, 29% of overall control is contributed by the property that actions are carried
out only on user requests, 25% by actions that are performed quickly, 17% by the availability
interruptions or terminations for the actions being carried out, 16% by the interruptions due to
errors, 13% by the availability of different modes of interaction. The overall control stood at 66.8%
for this category web user interfaces. For the user interface of Stock trade web sites, 27% of
overall control is contributed by the property that actions are carried out only on user requests,
27% by actions that are performed quickly, 17% by the availability interruptions or terminations for
the actions being carried out, 14% by the interruptions due to errors, 15% by the availability of
different modes of interaction. The overall control stood at 67.4% for this category web user
interfaces.
Coming E-mailing web sites, 30% of overall control is contributed by the property that actions are
carried out only on user requests, 27% by actions that are performed quickly, 20% by the
availability interruptions or terminations for the actions being carried out, 13% by the interruptions
due to errors, 10% by the availability of different modes of interaction. The overall control stood at
63.4% for this category web user interfaces.
3.8 Directness
Tasks should be performed directly. Available alternatives should be visible, reducing the user’s
mental workload. Directness is also best provided by the object-action sequence of direct
manipulation systems. Tasks are performed by directly selecting an object, then selecting an
action to be performed, and then seeing the action being performed [14]. The graph in the figure8
shows the levels of directness felt by the users for different web user interfaces.
FIGURE 8: Directness
For the user interfaces of Social network sites, 29% of overall directness is achieved by making
alternative actions visible, 34% by providing immediate effect/result of the actions performed on
objects, 37% by providing tasks that can be performed directly. The overall directness stood at
82.6% for this category of sites. For the user interfaces of Online shopping web sites, 27% of
overall directness is achieved by making alternative actions visible, 37% by providing immediate
effect/result of the actions performed on objects, 36% by providing tasks that can be performed
directly. The overall directness stood at 86.3% for this category of sites.
With the user interfaces of Job sites, 28% of overall directness is achieved by making alternative
actions visible, 37% by providing immediate effect/result of the actions performed on objects,
35% by providing tasks that can be performed directly. The overall directness stood at 73.6% for
this category of sites. For the user interfaces of Stock trade sites, 27% of overall directness is
achieved by making alternative actions visible, 37% by providing immediate effect/result of the
actions performed on objects, 36% by providing tasks that can be performed directly. The overall
directness stood at 81% for this category of sites.
For E-mailing sites, 21% of overall directness is achieved by making alternative actions visible,
40% by providing immediate effect/result of the actions performed on objects, 39% by providing
tasks that can be performed directly. The overall directness stood at 73% for this category of
sites.

3.9 Efficiency
Eye and hand movements must not be wasted. One’s attention must be captured by relevant
elements of the screen when needed. Sequential eye movements between screen elements
should be predictable, obvious, and short. Web pages must be easily scannable. All navigation
paths should be as short as possible [14]. Avoid frequent transitions between input devices such
as the keyboard and mouse [14]. The graph in figure 9 shows the users perception of efficiency
among different web user interfaces.
In the user interfaces of Social network sites, 31% of overall efficiency is contributed by making
eye & hand movements between the controls/components easy, 17% by short navigation paths,
23% by providing sequential eye movement through the screen and 28% by frequent transition
between input devices. The overall efficiency stood at 64% for this type of user interfaces. In the
user interfaces of Online shopping sites, 30% of overall efficiency is contributed by making eye &
hand movements between the controls/components easy, 17% by short navigation paths, 26% by
providing sequential eye movement through the screen and 27% by frequent transition between
input devices. The overall efficiency stood at 67.25% for this type of user interfaces.
FIGURE 9: Efficiency
For the user interfaces of Job sites, 32% of overall efficiency is contributed by making eye & hand
movements between the controls/components easy, 14% by short navigation paths, 24% by
input devices. The overall efficiency stood at 72.25% for this type of user interfaces. In the user
interfaces of Stock trade sites, 31% of overall efficiency is contributed by making eye & hand
With the E-mailing sites, 31% of overall efficiency is contributed by making eye & hand
3.10 Familiarity
Familiarity as said by Galitz [14] can be achieved by:
■ Employing familiar concepts and using language that is familiar to the user.
■ Keeping the interface natural, mimicking the user’s behavior patterns.
■ Using real-world metaphors.
The graph in the figure 10 shows familiarity levels perceived by the users in different web
interfaces.

FIGURE 10: Familiarity
For the user interfaces of Social network sites, 55% of overall familiarity is contributed by
providing a language known to the user, 45% by making interface look like real–world situation.
The overall familiarity stood at 84% for this type of user interfaces.For the user interfaces of
Online shopping sites, 51% of overall familiarity is contributed by providing a language known to
the user, 49% by making interface look like real–world situation. The overall familiarity stood at
79.5% for this type of user interfaces.
Coming to Job sites, 56% of overall familiarity is contributed by providing a language known to
the user, 44% by making interface look like real–world situation. The overall familiarity stood at
85.5%. For the user interfaces of Stock trade sites, 44% of overall familiarity is contributed by
providing a language known to the user, 56% by making interface look like real–world situation.
The overall familiarity stood at 69.5% for this type of user interfaces.
In E-mailing sites, 56% of overall familiarity is contributed by providing a language known to the
user, 44% by making interface look like real–world situation. The overall familiarity stood at 72.5%
for this type of user interfaces.
3.11 Flexibility
Flexibility is the system’s ability to respond to individual differences in people. Permit people to
choose the method of interaction that is most appropriate to their situation. It is also accomplished
through permitting system customization [14]. The graph in the figure 11 shows flexibility levels
perceived by the users in different web interfaces.
FIGURE 11: Flexibility
For the user interfaces of social network sites, 67% felt that system is flexible enough when
personalizing for their preferences. In stock trading sites, the flexibility stood at 65%.Forthe user
interfaces of online shopping sites, the flexibility felt is around 64%. For the user interfaces of job
site the flexibility stood at 65% and for the e-mail site it was around 69%.
3.12 Forgiveness
People will make mistakes; a system should tolerate those that are common and unavoidable. A
forgiving system keeps people out of trouble [14]. People like to explore and learn by trial and
error. A system oversensitive to erroneous inputs will discourage users from exploring and trying
new things [14].

Prevent errors from occurring by anticipating where mistakes may occur and designing to prevent
them. Permit people to review, change, and undo actions whenever necessary. Make it very
difficult to perform actions that can have tragic results. When errors do occur, present clear
instructions on how to correct them [14]. The graph in the figure 12 shows various levels of
forgiveness felt by the users.
FIGURE 12: Forgiveness
In the user interfaces of Social network sites, 38% of overall forgiveness is contributed by system
helping the user to correct when he/she makes error, 22% by preventing user from making errors,
40% by providing constructive messages when error is occurred. The overall forgiveness stood at
73.3% for this type of user interfaces. In the user interfaces of Online shopping sites, 37% of
overall forgiveness is contributed by system helping the user to correct when he/she makes error,
25% by preventing user from making errors, 38% by providing constructive messages when error
is occurred. The overall forgiveness stood at 64% for this type of user interfaces.
As of Job sites, 38% of overall forgiveness is contributed by system helping the user to correct
when he/she makes error, 22% by preventing user from making errors, 40% by providing
constructive messages when error is occurred. The overall forgiveness stood at 62.66% for this
type of user interfaces. In the user interfaces of Stock trade sites, 38% of overall forgiveness is
contributed by system helping the user to correct when he/she makes error, 22% by preventing
user from making errors, 40% by providing constructive messages when error is occurred. The
overall forgiveness stood at 61% for this type of user interfaces.
In the user interfaces of E-mailing sites, 36% of overall forgiveness is contributed by system
helping the user to correct when he/she makes error, 25% by preventing user from making errors,
39% by providing constructive messages when error is occurred. The overall forgiveness stood at
75% for this type of user interfaces.
3.13 Predictability
Anticipation, or predictability, reduces mistakes and enables tasks to be completed more quickly.
All expectations possessed by the user should be fulfilled uniformly and completely [14]. The
graph in the figure 13 shows various levels of predictability felt by the users.
FIGURE 13: Predictability

For the user interfaces of Social network web sites, 51% of overall predictability is contributed by
the property that the user’s expected result is matching to the actual result of actions, 49% by
providing results of the actions uniformly and completely. The overall predictability stood at 90%
for this category web site interfaces. For the user interfaces of Online shopping web sites, 46% of
overall predictability is contributed by the property that the user’s expected result is matching to
the actual result of actions, 54% by providing results of the actions uniformly and completely. The
overall predictability stood at 88.5% for this category web site interfaces.
As of Job web sites, 46% of overall predictability is contributed by the property that the user’s
expected result is matching to the actual result of actions, 54% by providing results of the actions
uniformly and completely. The overall predictability stood at 81.5% for this category web site
interfaces. For the user interfaces of Stock trade web sites, 49% of overall predictability is
contributed by the property that the user’s expected result is matching to the actual result of
actions, 51% by providing results of the actions uniformly and completely. The overall
predictability stood at 89% for this category web site interfaces.
In the user interfaces of E-mailing web sites, 50% of overall predictability is contributed by the
property that the user’s expected result is matching to the actual result of actions, 50% by
providing results of the actions uniformly and completely. The overall predictability stood at 92%
for this category web site interfaces.
3.14 Recovery
Recovery should be obvious, automatic, easy and natural to perform. Easy recovery from an
action greatly facilitates learning by trial and error, and exploration [14]. The graph in the figure 14
shows various levels of recovery felt by the users.
FIGURE 14: Recovery
In the user interfaces of Social network web sites, 46% of overall recovery is contributed by the
‘redo’ of actions users have just done, 54% by providing the option to go back to the previous
action when user stuck in moving forward or doing next action. The overall recovery stood at
65.5% for this type of web user interfaces. In the user interfaces of Shopping web sites, 43% of
overall recovery is contributed by the ‘redo’ of actions users have just done, 57% by providing the
option to go back to the previous action when user stuck in moving forward or doing next action.
The overall recovery stood at 74% for this type of web user interfaces.
Coming to the user interfaces of Job web sites, 46% of overall recovery is contributed by the
‘redo’ of actions users have just done, 54% by providing the option to go back to the previous
action when user stuck in moving forward or doing next action. The overall recovery stood at 54%
for this type of web user interfaces. In the user interfaces of Stock trade web sites, 35% of overall
recovery is contributed by the ‘redo’ of actions users have just done, 65% by providing the option
to go back to the previous action when user stuck in moving forward or doing next action. The
overall recovery stood at 43.5% for this type of web user interfaces.
For E-mail web sites, 36% of overall recovery is contributed by the ‘redo’ of actions users have
just done, 64% by providing the option to go back to the previous action when user stuck in

moving forward or doing next action. The overall recovery stood at 69% for this type of web user
interfaces.
3.15 Responsiveness
A user request must be responded quickly. Feedback may be visual, the change in the shape of
the mouse pointer, or textual, taking the form of a message. It may also be auditory, consisting of
a unique sound or tone [14].
FIGURE 15: Responsiveness
For the user interfaces of Social network websites, 35% of overall responsiveness is contributed
by system rapidly responding to user’s request/actions, 24% by providing
feedback/acknowledgement of user actions through VISUAL clue, 39% by providing feedback
through TEXTUAL clues and only 2% by providing feedback through AUDIO clue. The overall
responsiveness stood at 54% for this category of web user interfaces. For the user interfaces of
Shopping websites, 34% of overall responsiveness is contributed by system rapidly responding to
user’s request/actions, 20% by providing feedback/acknowledgement of user actions through
VISUAL clue, 37% by providing feedback through TEXTUAL clues and only 9% by providing
feedback through AUDIO clue. The overall responsiveness stood at 56.75% for this category of
web user interfaces.
In Job websites, 38% of overall responsiveness is contributed by system rapidly responding to
user’s request/actions, 15% by providing feedback/ acknowledgement of user actions through
VISUAL clue, 43% by providing feedback through TEXTUAL clues and only 4% by providing
feedback through AUDIO clue. The overall responsiveness stood at 48.75% for this category of
web user interfaces. For the user interfaces of Stock trade websites, 30% of overall
responsiveness is contributed by system rapidly responding to user’s request/actions, 25% by
providing feedback/acknowledgement of user actions through VISUAL clue, 35% by providing
feedback through TEXTUAL clues and only 10% by providing feedback through AUDIO clue. The
overall responsiveness stood at 61.25% for this category of web user interfaces.
With E-mailing websites, 32% of overall responsiveness is contributed by system rapidly
responding to user’s request/actions, 24% by providing feedback/acknowledgement of user
actions through VISUAL clue, 38% by providing feedback through TEXTUAL clues and only 6%
by providing feedback through AUDIO clue. The overall responsiveness stood at 60% for this
category of web user interfaces.
3.16 Simplicity
Provide as simple an interface as possible.
■ Five ways to provide simplicity [14]:
— Use progressive disclosure, hiding things until they are needed.
• Present common and necessary functions first.
• Prominently feature important functions.
• Hide more sophisticated and less frequently used functions.
— Provide defaults.

— Minimize screen alignment points.
— Make common actions simple at the expense of uncommon actions being made harder.
— Provide uniformity and consistency.
FIGURE 16: Simplicity
In the user interfaces of Social network websites studied, 23% of overall simplicity contributed by
providing common and prominent features/functions at the first sight, 21% by making
sophisticated and less frequently used features/functions to hide or can be accessed by
performing interaction, 16% by providing defaults, 23% by making common actions simple and
17% by uniformity & consistency of the screen items and interactions. The overall simplicity stood
at 70% for this type of web user interfaces.
For Online shopping websites studied, 23% of overall simplicity contributed by providing common
and prominent features/functions at the first sight, 19% by making sophisticated and less
frequently used features/functions to hide or can be accessed by performing interaction, 16% by
providing defaults, 23% by making common actions simple and 19% by uniformity & consistency
of the screen items and interactions. The overall simplicity stood at 81.2% for this type of web
user interfaces.
Coming to Job websites studied, 20% of overall simplicity contributed by providing common and
prominent features/functions at the first sight, 18% by making sophisticated and less frequently
used features/functions to hide or can be accessed by performing interaction, 20% by providing
defaults, 24% by making common actions simple and 18% by uniformity & consistency of the
screen items and interactions. The overall simplicity stood at 76.4% for this type of web user
interfaces.
As of Stock trading websites studied, 20% of overall simplicity contributed by providing common
and prominent features/functions at the first sight, 22% by making sophisticated and less
frequently used features/functions to hide or can be accessed by performing interaction, 14% by
providing defaults, 21% by making common actions simple and 23% by uniformity & consistency
of the screen items and interactions. The overall simplicity stood at 78.4% for this type of web
user interfaces.
The user interfaces of E-mailing websites studied, 24% of overall simplicity contributed by
providing common and prominent features/functions at the first sight, 17% by making
sophisticated and less frequently used features/functions to hide or can be accessed by
performing interaction, 17% by providing defaults, 23% by making common actions simple and
19% by uniformity & consistency of the screen items and interactions. The overall simplicity stood
at 73.6% for this type of web user interfaces.
3.17 Groupings
Grouping screen elements aids in establishing structure, meaningful relationships & meaningful
form. In addition to providing aesthetic appeal, Past research has found that grouping aids in
information recall and results in a faster screen search. The study by Grose, Parush, Nadir, and

Shtub found that providing groupings of screen elements containing meaningful group titles was
also related to shorter screen search times [14].
The grouping principle stood at 74.6% for Social network web user interfaces, 77% in stock
trading web interfaces, 74% in E-mailing interfaces, 76% in online shopping web interfaces and
77% in job site interfaces.
3.18 Grouping Using White Space
Galitz [14] suggests to provide adequate separation between groupings through liberal use of
white space and also asks to carefully consider the trade-off between screen white space and the
requirement for page scrolling.
Grouping with white spaces was at 17% in social network website interfaces, 16% in stock trading
site interfaces, 16% in E-mailing user interfaces, 16% in online shopping user interfaces, and
21% is in jobsite interfaces.
3.19 Grouping Using Borders
When grouping with borders, Galitz [14] asks to (a) incorporate line borders for: (i) Focusing
attention on groupings or related information. (ii) Guiding the eye through a screen.
(b) Not exceed three line thicknesses or two line styles on a screen. (c) Create lines consistent in
height and length. (d) Leave sufficient padding space between the information and the
surrounding borders. (e) For adjacent groupings with borders, whenever possible, align the
borders left, right, top, and bottom. (f) Use rules and borders sparingly.
In Web page design: (i) Be cautious in using horizontal lines as separators between page
sections. (ii) Reserve horizontal lines for situations in which the difference between adjacent
areas must be emphasized.
Grouping with borders was at 24% in social network web interfaces, 19% in stock trading web
interfaces, 24% in E-mailing web interfaces, 24% in online shopping user interfaces and 16% in
job site interfaces.
3.20 Focus and Emphasis
Galitz [14], recommends to apply a visual emphasis technique to highlight the most important or
prominent parts of a screen. An emphasized element should contrast with the rest of the screen,
calling the user’s eyes to it.
To provide emphasis, various techniques such as [14]: (a)Higher brightness (b) Reverse polarity
or inverse video(c) Larger and distinctive font (d) Underlining (e) Blinking (f) Line rulings and
surrounding boxes or frames (g) Contrasting color (h) Larger size (i) Positioning,
(j) Isolation (k) Distinctive or unusual shape (l) White space can be used in a systematic and
pleasing fashion.
The values in Table 1 shows different emphasis techniques and their instances among various
web interfaces investigated.
Focus/Emphasis
Techniques
Social
network
sites
Stock
trading
sites
E-mail
sites
Online
Shopping
sites
Job
sites
Higher brightness 79 84 80 80 80
Reverse polarity 42 74 35 53 35
Larger & distinctive font 84 89 70 100 100
Underlining 32 47 60 50 40
Blinking 32 37 15 45 20
Contrasting color 89 89 80 84 75
Unusual shapes for
important elements
32 53 45 40 40
TABLE1: Focus and Emphasis

4. CONCLUSION
The user interface principles stands good even after many years of their introduction. The only
difference is that they take different forms with core aspects of the principles standing strong. This
has made the websites studied popular even with low values for some of the principles
investigated. The study has revealed the existence of these principles in various forms and the
importance of their existence for a user interface to be attractive and efficient. The vast list of
statistics reported in this paper helps to understand the principles’ individual presence in different
type of web interfaces and also the popularity of those user interfaces among the users.
5. REFERENCES
[1] Mosier JN, Smith SL (1995) Application of guidelines for designing user interface
software. In Perlman G, Green GK, Wogalter MS (eds). Human factors perspectives on
human-computer interaction: selections from Proceedings of Human Factors and
Ergonomics Society annual meetings, 1983-1994. HFES, Santa Monica, CA, pp 34-37.
[2] Shacklett, M. Gauging, Website performance. Credit Union Magazine, 67, 6, 2001, 60-62.
[3] David Check Ling No, Lian Seng Teo, John G. Byrne “Evaluating Interface Esthetics”,
Knowledge and Information Systems, (2002) 4: 46-79.
[4] California Digital Library (CDL), “User Interface Principles”, www.cdlib.org/ vendors/
Interface_Principles.rtf, Society for Scholarly Publishing 26th Annual Meeting 2004 (June 4,
2004).
[5] Galitz, W.O. (1992). User-Interface Screen Design. Wellesley, MA: QED Publishing Group.
[6] International Business Machines Corporation (IBM). (1991). Systems Application
Architecture Common User Access Advanced Interface Design Reference (SC34-4289).
[7] International Business Machines (IBM). (2001). “Cost Justifying Ease of Use.”
http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/23.
[8] Mayhew, D.J. (1992). Principles and Guidelines in Software User Interface Design.
Englewood Clifs, NJ.Prentice Hall
[9] Microsoft Corporation. (1992). The Windows Interface: An Application Design Guide,
Redmond, WA: Microsoft Press.
[10] Microsoft Corporation. (1995). The Windows Interface Guidelines for Software Design.
Redmond, WA: Microsoft Press.
[11] Microsoft 2001, msdn.Microsoft.com.library, 2001.
[12] Open Software Foundation. (1993). OSF/Motif Style Guide. Englewood Cliffs, NJ: Prentice Hall.
[13] Grose, E., Parush, A., Nadir, R., and Shtub, A. (1998). “Evaluating the layout of
graphical user interface screens: validation of a numerical computerized model.”
International Journal of Human-Computer Interaction, 10 (4)343–360.
[14] Wilbert O. Galitz, “The Essential Guide to User Interface Design, Second Edition”, Wiley
India Edition.

General Principles of User Interface Design and Websites

More Related Content

Similar to General Principles of User Interface Design and Websites (20)

More from Waqas Tariq (20)

Recently uploaded (20)

General Principles of User Interface Design and Websites