CHAPTER

9
Designing effective
interfaces
for software systems

User Interface Design

Subtopics:-
9.1 Where is the user interface?
9.2 What is the user interface?
9.3 The design of interactive systems
9.4 Task Analysis

9.1 Where Is the User Interface?

User interface design creates an effective communication medium between a human and
a computer. A software engineer designs the user interface by applying an iterative process
that draws on predefined design principles. Today, user interface is found at almost every
place where digital technology exists, right from computers, mobile phones, cars, music
players, airplanes, ships etc. User interface is part of software and is designed such a way
that it is expected to provide the user insight of the software. UI provides fundamental
platform for human-computer interaction. UI can be graphical, text-based, audio-video
based, depending upon the underlying hardware and software combination. UI can be
hardware or software or a combination of both.

78 | P a g e C h a p t e r 9 : T h e U s e r I n t e r f a c e D e s i g n
The software becomes more popular if its user interface is:
• Attractive
• Simple to use
• Responsive in short time
• Clear to understand
• Consistent on all interfacing screens

9.2 What is the User Interface?

User interface is the front-end application view to which user interacts in order to use the
software. User can manipulate and control the software as well as hardware by means of
user interface. User interface design or user interface engineering is the design of user
interfaces for machines and software, such as computers, home appliances, mobile
devices, and other electronic devices, with the focus on maximizing usability and the user
experience. The goal of user interface design is to make the user's interaction as simple and
efficient as possible, in terms of accomplishing user goals (user-centered design).

Good user interface design facilitates finishing the task at hand without drawing
unnecessary attention to itself. Graphic design and typography are utilized to support its
usability, influencing how the user performs certain interactions and improving the aesthetic
appeal of the design; design aesthetics may enhance or detract from the ability of users to
use the functions of the interface. The design process must balance technical functionality
and visual elements to create a system that is not only operational but also usable and
adaptable to changing user needs.

User interface design requires a good understanding of user needs. There are several
phases and processes in the user interface design, some of which are more demanded
upon than others, depending on the project.
• Functionality requirements gathering – assembling a list of the functionality required by
the system to accomplish the goals of the project and the potential needs of the users.
• User and task analysis – a form of field research, it's the analysis of the potential users of
the system by studying how they perform the tasks that the design must support, and
conducting interviews to elucidate their goals.
• Information architecture – development of the process and/or information flow of the
system (i.e. for phone tree systems, this would be an option tree flowchart and for web
sites this would be a site flow that shows the hierarchy of the pages).
79 | P a g e C h a p t e r 9 : T h e U s e r I n t e r f a c e D e s i g n
 • Prototyping – development of wire-frames, either in the form of paper prototypes or
simple interactive screens. These prototypes are stripped of all look & feel elements and
most content to concentrate on the interface.
• Usability inspection – letting an evaluator inspect a user interface. This is generally
considered to be cheaper to implement than usability testing and can be used early
on in the development process since it can be used to evaluate prototypes or
specifications for the system, which usually cannot be tested on users. Some common
usability inspection methods include cognitive walkthrough, which focuses the
simplicity to accomplish tasks with the system for new users, heuristic evaluation, in
which a set of heuristics are used to identify usability problems in the UI design,
and pluralistic walkthrough, in which a selected group of people step through a task
scenario and discuss usability issues.
• Usability testing – testing of the prototypes on an actual user—often using a technique
called think aloud protocol where you ask the user to talk about their thoughts during
the experience. User interface design testing allows the designer to understand the
reception of the design from the viewer's standpoint, and thus facilitates creating
successful applications.
• Graphical user interface design – actual look and feel design of the final graphical user
interface (GUI). It may be based on the findings developed during the user research,
and refined to fix any usability problems found through the results of testing. Depending
on the type of interface being created, this process typically involves some computer
programming to validate forms, establish links or perform a desired action.
• Software Maintenance - After the deployment of a new interface, occasional
maintenance may be required to fix software bugs, change features, or completely
upgrade the system. Once a decision is made to upgrade the interface, the legacy
system will undergo another version of the design process, and will begin to repeat the
stages of the interface life cycle

9.3 The Design of interactive systems

At its broadest, an interactive system can be any technology intended to help people
complete a task and achieve their goals, however this could include things like pens, which
could help achieve the goal of leaving a message for a friend, so we tighten this definition
to be any technology incorporating some form of electronic logic designed to help people
complete the goals. Alternatively, we could define this as any complex system with a user
interface (IU).
80 | P a g e C h a p t e r 9 : T h e U s e r I n t e r f a c e D e s i g n
The design and usability of these systems leaves an effect on the quality of people’s
relationship to technology. Web applications, games, embedded devices, etc., are all a
part of this system, which has become an integral part of our lives. Let us now discuss on
some major components of this system.

To be usable a system needs to be effective. The system supports the tasks the user wants
to do. We could also consider other components to make things usable, efficiency,
learnable and memorable. Positive user experience, rather than usability has now become
the focus of the design of interactive systems, particularly as we have so many systems that
are for leisure, rather than for work. This expands usability to cover issues such as:
• Enjoyable
• Fun
• Entertaining
• Aesthetically pleasing
• Supportive of creativity

There are key principles of interactive system design which are:

• Learnability - how easy the system is to use
• Memorability - how easy is the system to remember how to use
• Consistency - to what extent are similar tasks conducted in similar ways within the system
(this will contribute to learnability)
• Visibility - to what extent does the system make it clear what you can/should do next
• Constraints - design the system so that users won't make mistakes and won't be led into
frustrating/irritating dead ends
• Feedback - provide good feedback on the status of the system, what has happened,
what is happening, what will happen.

The concept of Interaction Styles refers to all the ways the user can communicate or
otherwise interact with the computer system;
• Direct manipulation - is a human–computer interaction style which involves
continuous representation of objects of interest and rapid, reversible, and
incremental actions and feedback.

81 | P a g e C h a p t e r 9 : T h e U s e r I n t e r f a c e D e s i g n
 Direct Manipulation Advantages Direct Manipulation Disadvantages
Users feel in control of the computer and are The derivation of an appropriate information space
less likely to be intimidated by it model can be very difficult
User learning time is relatively short Given that users have a large information space,
what facilities for navigating around that space
should be provided?
Users get immediate feedback on their actions Direct manipulation interfaces can be complex to
so mistakes can be quickly detected and program and make heavy demands on the
corrected computer system

Example of Direct Manipulation Style

• Menu System – users make a selection from a list of possibilities presented to them by
the system. The selection may be made by pointing and clicking with a mouse, using
cursor keys or by typing the name of the selection.
Menu System Advantages Menu System Disadvantages
Users need not remember command names as Actions which involve logical conjunction (and) or
they are always presented with a list of valid disjunction (or) are awkward to represent
commands
Typing effort is minimal Menu systems are best suited to presenting a small
number of choices. If there are many choices, some
menu structuring facility must be used
User errors are trapped by the interface Experienced users find menus slower than
command language

Example of Menu System Style

• Command interfaces – User types commands to give instructions to the system e.g.
UNIX. This style may be implemented using cheap terminals. It is easy to process using
compiler techniques. Commands of arbitrary complexity can be created by
command combination. Concise interfaces requiring minimal typing can be
created.

82 | P a g e C h a p t e r 9 : T h e U s e r I n t e r f a c e D e s i g n
 • Form Fill-in - The form fill-in interaction style (also called "fill in the blanks") was aimed
at a different set of users than command language, namely non-experts users. When
form fill-in interfaces first appeared, the whole interface was form-based, unlike much
of today's software that mix forms with other interaction styles. Back then, the screen
was designed as a form in which data could be entered in the pre-defined form
fields. The TAB-key was (and still is) used to switch between the fields and ENTER to
submit the form. Thus, there was originally no need for a pointing device such as a
mouse and the separation of data in fields allowed for validation of the input. Form
fill-in interfaces were (and still is) especially useful for routine, clerical work or for tasks
that require a great deal of data entry.

Example of Form Fill-n style

9.4 Task Analysis

Task analysis is the process of learning about ordinary users by observing them in action to
understand in detail how they perform their tasks and achieve their intended goals. Tasks
analysis helps identify the tasks that your website and applications must support and can
also help you refine or re-define your site’s navigation or search by determining the
appropriate content scope. The purpose of task analysis are to answer the following;
• What your users’ goals are; what they are trying to achieve
• What users actually do to achieve those goals
• What experiences (personal, social, and cultural) users bring to the tasks
• How users are influenced by their physical environment
• How users’ previous knowledge and experience influence:
o How they think about their work
o The workflow they follow to perform their tasks

There are several types of task analysis but among the most common techniques used are:
• Cognitive Task Analysis is focused on understanding tasks that require decision-
making, problem-solving, memory, attention and judgement.
• Hierarchical Task Analysis is the procedure of disintegrating tasks into subtasks that
could be analyzed using the logical sequence for execution. This would help in
achieving the goal in the best possible way.

83 | P a g e C h a p t e r 9 : T h e U s e r I n t e r f a c e D e s i g n