User interface design

User interface design is a crucial aspect of software engineering, as it is the means by which users
interact with software applications. It creates an effective communication medium between a human and
a computer. A well-designed user interface can improve the usability and user experience of an
application, making it easier to use and more effective.

User interface design begins with the identification of user, task, and environmental requirements. Once
user tasks have been identified, user scenarios are created and analyzed to define a set of interface objects
and actions. These form the basis for the creation of screen layout that depicts graphical design and
placement of icons, definition of descriptive screen text, specification and titling of windows, and
specification of major and minor menu items.

Golden rules used for designing user interface

The following are the golden rules stated by Theo Mandel that must be followed during the design of
the interface.
a. Place the user in control:
2. Define the interaction modes in such a way that does not force the user into unnecessary or undesired
actions: The user should be able to easily enter and exit the mode with little or no effort.
3. Provide for flexible interaction: Different people will use different interaction mechanisms, some
might use keyboard commands, some might use mouse, some might use touch screen, etc., Hence
all interaction mechanisms should be provided.
4. Allow user interaction to be interruptible and undoable: When a user is doing a sequence of actions
the user must be able to interrupt the sequence to do some other work without losing the work that
had been done. The user should also be able to do undo operation.
5. Streamline interaction as skill level advances and allow the interaction to be customized: Advanced or
highly skilled user should be provided a chance to customize the interface as user wants which
allows different interaction mechanisms so that user doesn’t feel bored while using the same
interaction mechanism.
6. Hide technical internals from casual users: The user should not be aware of the internal technical
details of the system. He should interact with the interface just to do his work.
7. Design for direct interaction with objects that appear on-screen: The user should be able to use the
objects and manipulate the objects that are present on the screen to perform a necessary task. By
this, the user feels easy to control over the screen.

a. Reduce the User’s Memory Load

2. Reduce demand on short-term memory: When users are involved in some complex tasks the demand
on short-term memory is significant. So the interface should be designed in such a way to reduce
the remembering of previously done actions, given inputs and results.
3. Establish meaningful defaults: Always an initial set of defaults should be provided to the average
user, if a user needs to add some new features then he should be able to add the required features.
4. Define shortcuts that are intuitive: Mnemonics should be used by the user. Mnemonics means the
keyboard shortcuts to do some action on the screen.
5. The visual layout of the interface should be based on a real-world metaphor: Anything you represent
on a screen if it is a metaphor for a real-world entity then users would easily understand.
6. Disclose information in a progressive fashion: The interface should be organized hierarchically i.e.,
on the main screen the information about the task, an object or some behavior should be presented
first at a high level of abstraction. More detail should be presented after the user indicates interest
with a mouse pick.
g. Make the Interface Consistent
8. Allow the user to put the current task into a meaningful context: Many interfaces have dozens of
screens. So it is important to provide indicators consistently so that the user know about the doing

k h h ld l k f hi h h i d h df h
 work. The user should also know from which page has navigated to the current page and from the
current page where it can navigate.
9. Maintain consistency across a family of applications: In the development of some set of applications
all should follow and implement the same design, rules so that consistency is maintained among
applications.
10. If past interactive models have created user expectations do not make changes unless there is a
compelling reason.

The UI Design Process

The UI analysis and design process is normally an iterative process and can be developed using the
spiral process model
There are four distinct framework activities
1. User task and environment analysis and modelling
2. Interface design
3. Interface construction
4. Iterative validation (evaluation, review)

Interface analysis

Involves 2 types of activities

a. User analysis
1. Since we have to put the user in command, their perception about the look and feel of the product
is to be examined.
2. Different type of user’s for the system need to be interviewed for this purpose.
3. Some times well designed questionnaire helps in getting the appropriate answer
4. The aesthetics, usability and other required characteristics of the UI is obtained from user’s
perspective
b. Task analysis and modelling

By referring Use case diagrams, activity diagrams, DFD and class diagrams, one need to understand

1. User actions for specific circumstances (includes exceptions)

2. Tasks and sub tasks for the normal functioning.
3. Which problem domain objects or data entities will be manipulated when the function is
performed.
4. What is the sequence of the tasks or the work flow
5. Any hierarchy of tasks involved

Above analysis provides inputs to the screen contents and its navigation.

Interface design steps

Define the interface objects and actions based on information obtained during UI analysis.
Define events (user actions) that will trigger the UI state to change and model this behaviour.
Illustrate each interface state as it will appear to the end user
Indicate how the user will interpret the state of the system from the information provided on the UI

The designer may sketch out the UI screens and fit the objects and actions into it.

The designer must

a. Follow the three golden rules for designing user interface

b. Model the interface the way it will be implemented
c. Consider the environment for display (technology, tools and OS etc)

UI Design patterns
UI Design issues and challenges

Response time – System response time has two important characteristics: length and variability. If
system response is too long, user frustration and stress are inevitable. Variability refers to the
deviation from average response time.
Help facilities - Almost every user of an interactive, computer-based system requires help now and
then. Modern software should provide online help facilities that enable a user to get a question
answered or resolve a problem without leaving the interface.
Error handling - In general, every error message or warning produced by an interactive system should
have the following characteristics: (1) describes the problem in jargon that the user can understand;
(2) provides constructive advice for recovering from the error; (3) indicates any negative consequences
of the error (e.g., potentially corrupted data fi les) so that the user can check to ensure that they have
not occurred
Menu and command labeling - The typed command was once the most commmon mode of
interaction between user and system software and was commonly used for applications of every type.
Today, the use of window-oriented, point-and-pick interfaces has reduced reliance on typed
commands.
Application accessibility – Has to cater for physically challenged people with assistive technology
Internationalization – Designer needs to make globalized software for possible localization based on
the country of use.

UI Design Evaluation

After the design model has been completed, a first level prototype is created.
The prototype is evaluated by the user, to get feedback about the efficiency of the interface.
In addition, if formal evaluation techniques are used (e.g. questionnaires, rating sheets), the
designer may extract information from these data.
Design modifications are made for next evaluation, based on user input.
The evaluation cycle continues until it is acceptable.
Sometimes structured questionnaire are used to get the user’s feedback.
To get quantitative feedback data, a time study analysis can be conducted.
During the time study, users are observed while interacting with system, and data is collected such as
Number of tasks correctly completed over a standard time period
Frequency & sequence of actions
Time spent looking at the display
Number and types of errors
Error recovery time
Time spent using help
Number of help references per standard time period
WebApp and mobile interface design

The user interface of a Web or mobile app is its “first impression.”

A poorly designed interface will disappoint the potential user and may, in fact, cause the user to go
elsewhere.
Because of the sheer volume of competing WebApps and mobile apps in virtually every subject area,
the interface must “grab” a potential user immediately.

Interface Design Principles and Guidelines

Anticipation - An application should be designed so that it anticipates the user’s next move. For
example, a user has requested a content object that presents information about a printer driver for a
new version of an operating system. The designer of the WebApp should anticipate that the user
might request a download of the driver and should provide navigation facilities that allow this to
happen directly.
Communication - The interface should communicate the status of any activity initiated by the user.
Communication can be obvious (e.g., a text message) or subtle (e.g., an image of a sheet of paper
moving through a printer to indicate that printing is under way).
Consistency - The use of navigation controls, menus, icons, and aesthetics (e.g., color, shape, layout)
should be consistent throughout.
Controlled Autonomy - The interface should facilitate user movement throughout the application,
but it should do so in a manner that enforces navigation conventions that have been established for
the application. For example, navigation to content requiring controlled access should be controlled
by userID and password.
Efficiency - The design of the application and its interface should optimize the user’s work efficiency,
not the efficiency of the developer who designs and builds it or the client-server environment that
executes it.
Flexibility - The interface should be flexible enough to enable some users to accomplish tasks directly
and others to explore the application in a somewhat random fashion. In every case, it should enable
the user to understand where he is and provide the user with functionality that can undo mistakes and
retrace poorly chosen navigation paths.
Focus - The interface (and the content it presents) should stay focused on the user task(s) at hand.
This concept is particularly important for mobile apps which can become very cluttered in the
designer attempts to do too much.
Human interface objects - A vast library of reusable human interface objects has been developed for
both Web and mobileApps.
Latency reduction - Rather than making the user wait for some internal operation to complete (e.g.,
downloading a complex graphical image), the application should use multitasking in a way that lets
the user proceed with work as if the operation has been completed.
Learnability - An application interface should be designed to minimize learning time and, once
learned, to minimize relearning required when the app is revisited
Readability - All information presented through the interface should be readable by young and old.
The interface designer should emphasize readable type styles, user-controllable font sizes, and color
background choices that enhance contrast.
Track state - When appropriate, the state of the user interaction should be tracked and stored so that
a user can logoff and return later to pick up where she left off.
Visible navigation - A well-designed interface provides “the illusion that users are in the same place,
with the work brought to them”

Software quality

An effective software process applied in a manner that creates a useful product that provides
measurable value for those who produce it and those who use it.
Effective software process – Establishes the infrastructure that supports building a high-quality
software product
Useful product - Delivers the content, functions, and features that the end user desires, in a reliable,
error-free way.

l S f i i i dd d l hi h li f i l i
 Value- Software organization gains added value as high quality software requires less maintenance
effort, fewer bugs and reduced customer support. User gains value as the product speeds up the
business process

McCall’s quality factors

Focus on three important aspects of a software product: its operational characteristics, its ability to
undergo change, and its adaptability to new environments.

Correctness - The extent to which a program satisfies its specification and fulfils the customer’s
mission objectives
Reliability - The extent to which a program can be expected to perform its intended function with
required precision.
Efficiency - The amount of computing resources and code required by a program to perform its
function
Integrity - Extent to which access to software or data by unauthorized persons can be controlled.
Usability - Effort required to learn, operate, prepare input for, and interpret output of a program.
Maintainability - Effort required to locate and fi x an error in a program.
Flexibility - Effort required to modify an operational program
Testability - Effort required to test a program to ensure that it performs its intended function.
Portability - Effort required to transfer the program from one hardware and/or software system
environment to another
Reusability - Extent to which a program [or parts of a program] can be reused in other applications—
related to the packaging and scope of the functions that the program performs.
Interoperability - Effort required to couple one system to another

ISO 9126 Quality Factors

The ISO 9126 standard was developed in an attempt to identify the key quality attributes for computer
software. The standard identifies six key quality attributes:

Functionality - The degree to which the software satisfies stated needs as indicated by the following
subattributes: suitability, accuracy, interoperability, compliance, and security
Reliability - The amount of time that the software is available for use as indicated by the following
subattributes: maturity, fault tolerance, recoverability.
Usability - The degree to which the software is easy to use as indicated by the following subattributes:
understandability, learnability, operability.
Efficiency - The degree to which the software makes optimal use of system resources as indicated by
the following subattributes: time behavior, resource behavior.
Maintainability - The ease with which repair may be made to the software as indicated by the
following subattributes: analyzability, changeability, stability, testability.
Portability - The ease with which the software can be transposed from one environment to another as
indicated by the following subattributes: adaptability, installability, conformance, replaceability.

Implementation issues

System implementation is the process where an executable version of the software is created.
Implementation may involve developing programs in high- or low-level programming languages or
tailoring and adapting generic, off-the-shelf systems to meet the specific requirements of an
organization.
This section explains following issues of Software Development:
a. Reuse Most modern software is constructed by reusing existing components or systems. While
developing software, one should make as much use as possible of existing code.
b. Configuration management During the development process, one have to keep track of the many
different versions of each software component in a configuration management system.
c. Host-target development Production software does not usually execute on the same computer as the
software development environment. Rather, you develop it on one computer (the host system) and
execute it on a separate computer (the target system).
Reuse

From the 1960s to the 1990s, most new software was developed from scratch, by writing all code in a
high-level programming language. The only significant reuse or software was the reuse of functions
and objects in programming language libraries.
Defn : It is an approach to development, based on the reuse of existing software.
By reusing existing software, the new systems can be developed more quickly, with fewer development
risks and also lower costs. As the reused software has been tested in other applications, it should be
more reliable than new software
It is now popularly used for business and scientific software.

Reuse levels

The abstraction level : At this level, the software is not reused directly but the knowledge of successful
abstractions in the design of the existing software is used. Eg- Design patterns and Architectural
patterns
The object level : At this level, the objects of existing software are directly reused from a library rather
than writing the new code. Eg using objects and methods of JavaMail library.
The component level: Components are collections of objects and object classes that operate together
to provide related functions and services. Users often have to adapt and extend the component by
adding some code of their own. Eg. Building user interface using a framework.
The system level: At this level, entire application system is reused. This usually involves some kind of
configuration of these systems. This may be done by adding and modifying code. Sometimes this
approach may involve reusing several different systems and integrating these to create a new system.

Reuse costs

The costs of the time spent in looking for software to reuse and assessing whether or not it meets user
needs.
Where applicable, the costs of buying the reusable software. For large off-the-shelf systems, these
costs can be very high.
The costs of adapting and configuring the reusable software components or systems to reflect the
requirements of the system that you are developing.
The costs of integrating reusable software elements with each other and with the new code that user
develops.

Configuration management

Configuration management is the process of managing a changing software system.

The aim of configuration management is to support the system integration process so that all
developers can access the project code and documents in a controlled way, find out what changes have
been made, and compile and link components to create a system.
Configuration management activities : There are three fundamental configuration management
activities:
1. Version management: where support is provided to keep track of the different versions of software
components. Version management systems include facilities to coordinate development by several
programmers. Care is taken that one developer does not overwrite the code that has been submitted
to the system by someone else
2. System integration, where support is provided to help developers define what versions of components
are used to create each version of a system. This description is then used to build a system
automatically by compiling and linking the required components.
3. Problem tracking, where support is provided to allow users to report bugs and other problems, and to
allow all developers to see who is working on these problems and when they are fixed.
Host-target development

Most software development is based on a host-target model i.e. the software is developed on one
computer (the host), but runs on a separate machine (the target).
In other words, there are 2 different platforms: a development platform and an execution platform.
A platform is more than just hardware. It includes the installed operating system plus other
supporting software such as a database management system, an interactive development environment
etc.
Development platform usually has different installed software than execution platform; these
platforms may have different architectures.

Development platform tools

An integrated compiler and syntax-directed editing system that allows you to create, edit and compile
code.
A language debugging system.
Graphical editing tools, such as tools to edit UML models.
Testing tools, such as Junit that can automatically run a set of tests on a new version of a program.
Project support tools that help you organize the code for different development projects.

Integrated development environments (IDEs)

Software development tools are often grouped to create an integrated development environment
(IDE).
An IDE is a set of software tools that supports different aspects of software development, within
some common framework and user interface.
IDEs are created to support development in a specific programming language such as Java. The
language IDE may be developed specially, or may be an instantiation of a general-purpose IDE, with
specific language-support tools.

Component/system deployment factors

Hardware and S/w req component : If a component is designed for a specific hardware architecture, or
relies on some other software system, it must be deployed on a platform that provides the required
hardware and software support.
The availability Req: High availability systems may require components to be deployed on more than
one platform. This means that, in the event of platform failure, an alternative implementation of the
component is available.
Component Communication: If there is a high level of communications traffic between components, it
is recommended to deploy them on the same platform or on platforms that are physically close to one
other. This reduces the delay between the time a message is sent by one component and received by
another.