Journal of Applied Mathematics, Islamic Azad University of Lahijan Vol.5, No.

19, Winter 2008

Significant Improvements to the User Interface

Design Process

Ali Sajedi1, Hamidreza Afzali2, Fariba Younesnia3

1, 2, 3
Department of Computer Engineering, Azad University – Lahijan Branch, IRAN,
2
Young Researchers Club of Islamic Azad University of Lahijan, IRAN

D
SI
Abstract

The user interface design is one of the parameters that identify the efficiency of softwares.
Experiences indicate that users prefer to use softwares with limited and integrated capabilities
rather than comprehensive software. In this case, this paper presents the foundational guidelines
of
on the basis of the technical options in the forms (e.g. accessibility, language setting, etc.) that
are applicable to all kinds of software environments from desktop to web-based and embedded
softwares. We expect this new aspect to be useful for designers to produce friendlier and more
acceptable interfaces.
ive

Keywords: UID, UID Package, Usability, Inheritance.

ch

1 Introduction

Not too long ago people were convinced to leave computers to computer
Ar

professionals. But nowadays people with little knowledge about computers can interact
with and enjoy computers as easy as clicking mouse buttons. Therefore it is clear why
they choose soft wares based on their appearance and environment.
Fast spread and advancement of computers and soft wares lead to new systems in which
users are able to choose between a set of special commands and a variety of hardware
and software tools. Sometimes they confront a complicated user interface.
User interface design (UID) is the design of computers, applications, mobile
communication devices and websites with the focus on the user’s integration and
experience [1], [7], [11]. UI design is involved in a wide range of projects from computer
systems to cars and commercial planes. All of these projects require some skills and
knowledge for the end-user [2], [12], [14]. In software engineering development process
is concentrated in separate phases such as requirements analysis, analysis,
implementation and test. UID is an important section in design phase.
Designing the UI needs to achieve the following cases:
*
Corresponding author
Email address: mafa_i@yahoo.com

57 www.SID.ir
A. Sajedi et al

• Functional requirements specification

• Determining the information architecture (e.g. a site map for web sites)
• Usability testing (by actual users)
• Collaborating with the graphical designer for building the GUI (Graphical
User Interface) [11]
The UI design deals with accurate drawing of shapes on the screen and recognizing the
position of interface objects (e.g. mouse pointer) which are usually time consuming and
repetitive actions. Therefore UID packages were employed. One of the first UI design
packages (Mac App system) lead to an 80% reduce in coding time.
According to [6], following benefits of using UI design tools appear noteworthy:
• Increasing design speed
• Simplicity of changes

D
• Concentrating on essential details of program rather than controlling the
interface
• Uniform design

SI
Nowadays, software interfaces are usually produced by UI design tools. These tools are
even permeated to website development. Increasing the number of visitors is one of the
goals that most web designers are seeking to reach it. Eye-tracking is a technique that
helps designers to know which sections of a webpage are read, glanced at or skipped
[1], [5]. The websites UI should be well-designed to reach this goal. So it is necessary to
of
ask some questions such as "which parts of the page are suitable for putting links?" or
"which part of the website causes the users leave it?" [1]. Answering these questions is
helpful to improve the usability of web sites. The mentioned study is usually done
through logical evaluation or interview.
ive

In next section some guidelines are discussed about the User-Interface Design (UID).
Then some valuable suggestions are offered to improve the User Interface design. A
Table is offered in the last section to evaluate the suggestions discussed in this paper.
ch

2 A Brief Description of Most Important Existing UID Guidelines

It is useful to consider some guidelines in the process of designing the User Interface
in order to achieve a proper UI. Some of the most important guidelines are discussed in
this section which cover concepts about consistency, flexibility, help system,
Ar

complexity of the system, metaphors and handling the waiting time.

• Consistency
By defining standards for wording and commands, they may be used in the whole
system. It is important to define a standard as it leads to lower training costs for users.
• Flexibility and efficiency of use
It is important to reduce the users waiting time as much as possible. An expert and a
novice user should be satisfied with the same system but in a different manner regarding
the user's experience. Brief and to the point instructions, text, comments and titles lead
to increasing the efficiency.
• Help and documentation
The help approach should be focused on the user’s request and there should be global
search capabilities to find information and directions for a word or command. Step-by
step guides and instructions are also helpful.

• Avoiding complexity

58 www.SID.ir
Journal of Applied Mathematics, Islamic Azad University of Lahijan Vol.5, No.19, Winter 2008

Users usually consider various subjects and make the form so busy. Putting only related
subjects in one form and then embedding suitable links between them is a way to
avoiding complexity [4].
• Metaphors
Good metaphors create visible pictures in the mind. According to [12], metaphors
usually evoke the familiar, but often add a new twist (for example recycle bin in
Microsoft windows). It is worthy that metaphors don’t cross cultural boundaries and
should be familiar to everyone.
• Reducing / handling waiting time
We should avoid long visual or aural acknowledging against button click and so on.
There should be animated latency symbols for actions that take between 0.5 to 2
seconds. Estimated waiting time should be shown for actions taking more than 2
seconds. For longer actions and are more than 10 seconds, there should be a large visual

D
indicator. Some options should also be considered for the user to cancel or continue the
action. Sometimes users do repetitive actions that lead to much waiting time. It may be

SI
done by redundant clicking on a button while the system is in latency. To prevent this
problem it is useful to disable some elements.

3 Valuable Suggestions to Improve UID

of
In this part we propound new useful suggestions to make easy-to-use and more
desirable interface for users. We also consider several main parameters to evaluate them
that are as follow:
1. Time to learn (The average time for a user to learn interaction with the
application)
ive

2. Rate of errors by users (The average number of errors produced by users)

3. Retention over time (The duration a user can retain the knowledge of working
with the system after a particular time)
4. User satisfaction (This parameter can be determined with conversation or
ch

question)

Suggestion 1: Leaving Error Management to Form's Components

There is a routine in many database-based applications that after defining users, their
Ar

access levels and permissions to database objects (tables, relations, etc.) is managed by
an inner layer that is named “role” [8],[9]. In this method, producing error messages is
originated from DBMS. We imply that all controls should be applied in the form of
access to the forms, menu option, button and other controls. It is possible by hiding or
disabling components and options. This way, the errors are prevented originally. In
other words, the system doesn't enter error prone states.

Suggestion 2: Functionality Driven, Not Data Driven

The approach in database-based applications is data driven, not functionality driven.
We believe that the functionality driven control is closer to end-users. This way,
controls are applied before triggering functionality, not in the progress of a transaction;
that will save the user time and reduce the computer load.

59 www.SID.ir
A. Sajedi et al

Suggestion 3: User Control and Customizing

User’s skills and desirable utilities should be contemplated in UI design. Some of
the useful applications are used by users with different social and skill levels (such as
“skilled/unskilled” or “novice/professional”). Then customize options should be set in
the UI. Users should be informed about the software’s goals and services, and have to
be able to choose software facilities at pleasure based on their abilities [3].
We suggest that the system should have different states and a basic state. Thus the user
can use them in confrontation to problems. Note that sometimes the previous state is a
lateral state and the user does not want to complete it. In such cases, the system should
automatically cancel any incomplete tasks and enter to the basic state. The entrance to
the basic state should be done by a predefined shortcut key to facilitate its activation.
The user should also be able to use an “emergency exit” in every unwanted tasks or
states.

D
Suggestion 4: Error Prevention
Users should be informed about probable errors that lead to incomplete operation.

SI
Consequently they should be able to revise their revenue to choose and apply options.
When an error occurs the users should find a way to correct their work and should never
lose it. In error prevention, some error messages or warnings should be determined to be
shown in appropriate places. The designer should not reference to a variable, address,
of
function or table and at least one solution should be suggested. Commit or rollback
commands can be used to prevent loss of changes. It needs appropriate changes in
instructions to control exceptions correctly such as indicating log files, temporary files
and tables, and commands to embed in the code. The code is referred to the solution
ive

instructions and can be triggered by the end-user or system administrator.

Suggestion 5: Inheritance in Designing Multilingual Forms

From the alignment and component size point of view in multilingual forms, we
should have components arranged properly when the language is changed. To achieve
ch

this goal we offer a new useful approach based on inheritance along with embedding
some events in the current forms. This way we design a child form class to handle
alignment and size issues in forms. This class inherits properties and events of all
current forms. However it needs to use a separate file to contain all text labels of each
Ar

form in each language. The new form is driven from this form.

Suggestion 6: Granting Efficiency With Regard to Elegance

According to [13], design and assigning commands for triggering them is an
important activity of the designer. In this case we offer two points:
First: This capability has to be considered that the user should be able to access
important commands while he or she is doing an action that losing it is undesirable. For
example in a movie player, users should have access to forward and backward
operations or be able to change the volume without leaving the full screen mode.
Second: In designing form, some levels should be defined for commands or actions
based on their importance and amount of utilization. Then consider simple shortcut keys
for actions with higher level, combined shortcut keys for mid-level actions and use form
menu options for the lower level actions. For example, considering “Delete” key for
delete, “Ctrl + Z” for undo and using a menu item for page number.

60 www.SID.ir
Journal of Applied Mathematics, Islamic Azad University of Lahijan Vol.5, No.19, Winter 2008

Suggestion 7: Minimize the User's Memory Load

The system should memorize the options, actions and conditions from previous parts
rather than the user. The least need to technical information is an important issue.
Besides, non-expert users’ capabilities should be considered.
The 4GL languages were initiated from this idea [10]. If all the desired functionalities
analyzed correctly and profoundly, we will have a comprehensive framework that in its
result the user is not worried about ''how to do the task” and can only focus on using the
offered knowledge by the software.

Suggestion 8: Designing Menu

A rapid way to identifying capabilities and efficiency of programs is refer to menus.
The important point in designing menu is categorizing menu items in levels according
to items priority and their relations. Do not expect the user to gather needed information

D
and tools. The user wants to do an action easily and as rapidly as possible. Thus we
need a control over the top layer to enable or disable some components and options. So
the user will see the required choices whenever and wherever needed.

4 Conclusion and Future Work

SI
Paying attention to good UI design can prepare the way of competition with other
software while the capabilities are the same. In this paper we went over to the guidelines
of
for designing an acceptable UI and defined main parameters to evaluate it. Then we
offered suggestions that can have effects on these parameters: increasing UI
competency, the suggestions that affect reducing Time to learn, Rate of errors by user
and increasing User satisfaction and Retention over time. According to the following
ive

table, offered suggestions have highest effects on two last parameters, particularly on
user satisfaction.

Table 1
The effect of guidelines on UI evaluating factors
ch

RATE OF
RETENTION USER
TIME TO LEARN ERRORS BY
OVER TIME SATISFACTION
USERS
Leaving error management
medium high low high
Ar

to form's component
Functionality driven not
medium high low high
data driven
User control medium high low high
Error prevention low high low medium
Inheritance in designing
medium medium low high
multilingual forms
Granting efficiency with
medium Low low medium
regard to elegance
Minimize the user's
medium medium medium high
memory load
Designing menu high Low medium high

61 www.SID.ir
A. Sajedi et al

It is mentionable that there are differences between desktop UI and web-based

applications. The clear UI design metrics is not offered yet. Thus defining usability,
understandability, expandability and other metrics are useful. We need to understand
and analyze new and extended requirements in applications.

References

[1] Teaching User Interface Design using a web-based Usability Tool, E. Arroyo, T. Selker, and W.
Wei,CHI 2006, ACM, Montreal-Canada, April 22-27, 2006.
[2] Group Exercises for the Design and Validation of Graphical User Interface, H. storrle, Modellierung'
2002, Tutzing, GL Lecture Notes in Information, 26.3.2002, pp.12.
[3] User-Centered Design Practices Management and Communication, A. Gaffar, N. Moha and A. seffah
Proceedings of HCII 2005, Human Computer Interaction International, Las Vegas, Nevada, USA,
2005.

D
[4] Analysis & Design of Model Based User Interfaces, P.J Molina, and H. Traetteberg, computer
science, Springer Netherlands, 2005, pp.211-222.
[5] Transfering knowledge of User Interface Guidelines to the Web, Tools for Working with Guidelines,

SI
D.L Scapin, J. Vanderdonckt, C. Farenc, R. Bastide ,CH. Bastien, C. Leulier, C. Mariage, P.
palanque, proceedings of International Workshop on Tools for Working with Guidelines
TFWWG'2000,Springer-Verlage, London, 2000.
[6] A Survey of Model Deriven Engineering Tools for User Interface Design, P. Medina, J. Luis, D.
Chessa, Sophie, And A. Front, computer science, Springer, Berlin, Heidelberg, 2007, pp.84-97.
[7] Using Rationale for Software Engineering Education, A.H. Dutoit, T. Wolf, B. Paech, L. Borner, and
of
J. Ruckert, proceedings of the 18th Conference on Software Engineering Education & Training
(CSEE&T 2005), IEEE Computer Society, 18-20 April 2005, pp.129-136.
[8] E. Role-Based Access Control Models, R.S Sandhu, E.J. Coyne, H.L. Feinstein and C. Youman, IEEE
computer, 29 Feb 1996.
[9] Role-Based Access Control for e-Services Integration, P. Lamb, R. Power, G. Walker LNCS Volume
ive

3729, Springer, 2005, pp. 816-828.

[10] Estimating size and effort in fourth-generation development, J.M. Verner and G. Tate, IEEE
Software, July 1988.
[11] Http://en.wikipedia.org/wiki/User_interface_design.
[12] Http://www.asktog.com/basics/firstPrinciples.html.
ch

[13] Http://www.useit.com/papers/heuristic_list.html.
[14] Http://www.ambysoft.com/essays/userInterfaceDesign.html.
Ar

62 www.SID.ir