Chp-4 User Interface Design

1. Introduction to oops concepts

2. Elements of good design
3. Eight golden rules for design
4. Features of modern GUI, Menus, Scroll bars, windows, buttons, icons, panels, error
messages etc.

Note: Case studies should be covered on the above topic

1. Introduction to oops concepts

Object means a real-world entity such as a pen, chair, table, computer, watch, etc. Object-
Oriented Programming is a methodology or paradigm to design a program using classes and
objects. It simplifies software development and maintenance by providing some concepts:
o Object
o Class
o Inheritance
o Polymorphism
o Abstraction
o Encapsulation
Apart from these concepts, there are some other terms which are used in Object-Oriented
design:
o Coupling
o Cohesion
o Association

1 Dr.Sunil Khilari
 o Aggregation
o Composition

Object
Any entity that has state and behaviour is known as an object. For example, a chair, pen,
table, keyboard, bike, etc. It can be physical or logical.
An Object can be defined as an instance of a class. An object contains an address and takes
up some space in memory. Objects can communicate without knowing the details of each
other's data or code. The only necessary thing is the type of message accepted and the type of
response returned by the objects.
Example: A dog is an object because it has states like colour, name, breed, etc. as well as
behaviours like wagging the tail, barking, eating, etc.
Class
Collection of objects is called class. It is a logical entity.
A class can also be defined as a blueprint from which you can create an individual object.
Class doesn't consume any space.

Inheritance
When one object acquires all the properties and behaviours of a parent object, it is known as
inheritance. It provides code reusability. It is used to achieve runtime polymorphism.

Polymorphism
If one task is performed in different ways, it is known as polymorphism. For example: to
convince the customer differently, to draw something, for example, shape, triangle, rectangle,
etc.
In Java, we use method overloading and method overriding to achieve polymorphism.
Another example can be to speak something; for example, a cat speaks meow, dog barks
woof, etc.

Abstraction
Hiding internal details and showing functionality is known as abstraction. For example phone
call, we don't know the internal processing.
In Java, we use abstract class and interface to achieve abstraction.

Encapsulation
Binding (or wrapping) code and data together into a single unit are known as encapsulation.
For example, a capsule, it is wrapped with different medicines.
A java class is the example of encapsulation. Java bean is the fully encapsulated class
because all the data members are private here.

Coupling
Coupling refers to the knowledge or information or dependency of another class. It arises
when classes are aware of each other. If a class has the details information of another class,
there is strong coupling. In Java, we use private, protected, and public modifiers to display
the visibility level of a class, method, and field. You can use interfaces for the weaker
coupling because there is no concrete implementation.

Cohesion
Cohesion refers to the level of a component which performs a single well-defined task. A
single well-defined task is done by a highly cohesive method. The weakly cohesive method
will split the task into separate parts. The java.io package is a highly cohesive package
2 Dr.Sunil Khilari
because it has I/O related classes and interface. However, the java.util package is a weakly
cohesive package because it has unrelated classes and interfaces.

Association
Association represents the relationship between the objects. Here, one object can be
associated with one object or many objects. There can be four types of association between
the objects:
o One to One
o One to Many
o Many to One, and
o Many to Many
Let's understand the relationship with real-time examples. For example, One country can
have one prime minister (one to one), and a prime minister can have many ministers (one to
many). Also, many MP's can have one prime minister (many to one), and many ministers can
have many departments (many to many).
Association can be unidirectional or bidirectional.

Aggregation
Aggregation is a way to achieve Association. Aggregation represents the relationship where
one object contains other objects as a part of its state. It represents the weak relationship
between objects. It is also termed as a has-a relationship in Java. Like, inheritance represents
the is-a relationship. It is another way to reuse objects.

Composition
The composition is also a way to achieve Association. The composition represents the
relationship where one object contains other objects as a part of its state. There is a strong
relationship between the containing object and the dependent object. It is the state where
containing objects do not have an independent existence. If you delete the parent object, all
the child objects will be deleted automatically.

Advantage of OOPs over Procedure-oriented programming language

1) OOPs makes development and maintenance easier, whereas, in a procedure-oriented
programming language, it is not easy to manage if code grows as project size increases.
2) OOPs provide data hiding, whereas, in a procedure-oriented programming language,
global data can be accessed from anywhere.
3) OOPs provide the ability to simulate real-world event much more effectively. We can
provide the solution of real word problem if we are using the Object-Oriented Programming
language.

What is the difference between an object-oriented programming language and object-

based programming language?
Object-based programming language follows all the features of OOPs except Inheritance.
JavaScript and VBScript are examples of object-based programming languages.

2. Elements of Good Design

Software Design is the process to transform the user requirements into some suitable form,
which helps the programmer in software coding and implementation. During the software
design phase, the design document is produced, based on the customer requirements as
documented in the SRS document. Hence the aim of this phase is to transform the SRS
document into the design document.

3 Dr.Sunil Khilari
The following items are designed and documented during the design phase:

 Different modules required.

 Control relationships among modules.
 Interface among different modules.
 Data structure among the different modules.
 Algorithms required to implement among the individual modules.

Objectives of Software Design:

1. Correctness:
A good design should be correct i.e. it should correctly implement all the functionalities
of the system.
2. Efficiency:
A good software design should address the resources, time, and cost optimization
issues.
3. Understandability:
A good design should be easily understandable, for which it should be modular and all
the modules are arranged in layers.
4. Completeness:
The design should have all the components like data structures, modules, and external
interfaces, etc.
5. Maintainability:
A good software design should be easily amenable to change whenever a change
request is made from the customer side.

Software Design Concepts:

Concepts are defined as a principal idea or invention that comes into our mind or in thought
to understand something. The software design concept simply means the idea or principle
behind the design. It describes how you plan to solve the problem of designing software,
the logic, or thinking behind how you will design software. It allows the software engineer
to create the model of the system or software or product that is to be developed or built.
The software design concept provides a supporting and essential structure or model for
developing the right software. There are many concepts of software design and some of
them are given below:

4 Dr.Sunil Khilari
The following points should be considered while designing Software:

1. Abstraction- hide Irrelevant data

Abstraction simply means to hide the details to reduce complexity and increases
efficiency or quality. Different levels of Abstraction are necessary and must be applied
at each stage of the design process so that any error that is present can be removed to
increase the efficiency of the software solution and to refine the software solution. The
solution should be described in broad ways that cover a wide range of different things at
a higher level of abstraction and a more detailed description of a solution of software
should be given at the lower level of abstraction.

2. Modularity- subdivide the system

Modularity simply means dividing the system or project into smaller parts to reduce the
complexity of the system or project. In the same way, modularity in design means
subdividing a system into smaller parts so that these parts can be created independently
and then use these parts in different systems to perform different functions. It is
necessary to divide the software into components known as modules because nowadays
there are different software available like Monolithic software that is hard to grasp for
software engineers. So, modularity in design has now become a trend and is also
important. If the system contains fewer components then it would mean the system is
complex which requires a lot of effort (cost) but if we are able to divide the system into
components then the cost would be small.

3. Architecture- design a structure of something

Architecture simply means a technique to design a structure of something. Architecture
in designing software is a concept that focuses on various elements and the data of the
structure. These components interact with each other and use the data of the structure in
architecture.

4. Refinement- removes impurities

Refinement simply means to refine something to remove any impurities if present and
increase the quality. The refinement concept of software design is actually a process of
developing or presenting the software or system in a detailed manner that means to
elaborate a system or software. Refinement is very necessary to find out any error if
present and then to reduce it.

5. Pattern- a repeated form

The pattern simply means a repeated form or design in which the same shape is
repeated several times to form a pattern. The pattern in the design process means the
repetition of a solution to a common recurring problem within a certain context.

6. Information Hiding- hide the information

Information hiding simply means to hide the information so that it cannot be accessed
by an unwanted party. In software design, information hiding is achieved by designing
the modules in a manner that the information gathered or contained in one module is
hidden and can’t be accessed by any other modules.

7. Refactoring- reconstruct something

Refactoring simply means reconstructing something in such a way that it does not affect
the behaviour of any other features. Refactoring in software design means
reconstructing the design to reduce complexity and simplify it without affecting the
behaviour or its functions. Fowler has defined refactoring as “the process of changing a

5 Dr.Sunil Khilari
 software system in a way that it won’t affect the behaviour of the design and improves
the internal structure”.

Different levels of Software Design:

There are three different levels of software design. They are:

1. Architectural Design:
The architecture of a system can be viewed as the overall structure of the system & the
way in which structure provides conceptual integrity of the system. The architectural
design identifies the software as a system with many components interacting with each
other. At this level, the designers get the idea of the proposed solution domain.

2. Preliminary or high-level design:

Here the problem is decomposed into a set of modules, the control relationship among
various modules identified, and also the interfaces among various modules are
identified. The outcome of this stage is called the program architecture. Design
representation techniques used in this stage are structure chart and UML.

3. Detailed design:
Once the high-level design is complete, a detailed design is undertaken. In detailed
design, each module is examined carefully to design the data structure and algorithms.
The stage outcome is documented in the form of a module specification document.

3. Eight golden rules for design

6 Dr.Sunil Khilari
1. Strive for consistency.
Consistent sequences of actions should be required in similar situations; identical
terminology should be used in prompts, menus, and help screens; and consistent colour,
layout, capitalization, fonts, and so on, should be employed throughout. Exceptions, such as
required confirmation of the delete command or no echoing of passwords, should be
comprehensible and limited in number

2. Seek universal usability.

Recognize the needs of diverse users and design for plasticity, facilitating transformation of
content. Novice to expert differences, age ranges, disabilities, international variations, and
technological diversity each enrich the spectrum of requirements that guides design. Adding
features for novices, such as explanations, and features for experts, such as shortcuts and
faster pacing, enriches the interface design and improves perceived quality.

3. Offer informative feedback.

For every user action, there should be an interface feedback. For frequent and minor actions,
the response can be modest, whereas for infrequent and major actions, the response should be
more substantial. Visual presentation of the objects of interest provides a convenient

7 Dr.Sunil Khilari
environment for showing changes explicitly (see the discussion of direct manipulation in
Chapter 7).

4. Design dialogs to yield closure.

Sequences of actions should be organized into groups with a beginning, middle, and end.
Informative feedback at the completion of a group of actions gives users the satisfaction of
accomplishment, a sense of relief, a signal to drop contingency plans from their minds, and
an indicator to prepare for the next group of actions. For example, e-commerce websites
move users from selecting products to the checkout, ending with a clear confirmation page
that completes the transaction.

5. Prevent errors.
As much as possible, design the interface so that users cannot make serious errors; for
example, gray out menu items that are not appropriate and do not allow alphabetic characters
in numeric entry fields (Section 3.3.5). If users make an error, the interface should offer
simple, constructive, and specific instructions for recovery. For example, users should not
have to retype an entire name-address form if they enter an invalid zip code but rather should
be guided to repair only the faulty part. Erroneous actions should leave the interface state
unchanged, or the interface should give instructions about restoring the state.

6. Permit easy reversal of actions.

As much as possible, actions should be reversible. This feature relieves anxiety, since users
know that errors can be undone, and encourages exploration of unfamiliar options. The units
of reversibility may be a single action, a data-entry task, or a complete group of actions, such
as entry of a name-address block.

7. Keep users in control.

Experienced users strongly desire the sense that they are in charge of the interface and that
the interface responds to their actions. They don’t want surprises or changes in familiar
behaviour, and they are annoyed by tedious data-entry sequences, difficulty in obtaining
necessary information, and inability to produce their desired result.

8. Reduce short-term memory load.

Humans’ limited capacity for information processing in short-term memory (the rule of
thumb is that people can remember “seven plus or minus two chunks” of information)
requires that designers avoid interfaces in which users must remember information from one
display and then use that information on another display. It means that cellphones should not
require reentry of phone numbers, website locations should remain visible, and lengthy forms
should be compacted to fit a single display.
These underlying principles must be interpreted, refined, and extended for each environment.
They have their limitations, but they provide a good starting point for mobile, desktop, and
web designers. The principles presented in the ensuing sections focus on increasing users’
productivity by providing simplified data-entry procedures, comprehensible displays, and
rapid informative feedback to increase feelings of competence, mastery, and control over the
system.

4. Features of modern GUI, Menus, Scroll bars, windows, buttons, icons, panels, error
messages etc.

8 Dr.Sunil Khilari
A user interface or UI is a process of interaction of the user with the computer, website, app
or any other screen. For example, the remote control is a hard device by which users can
interact with the TV screen. You can have any design on the screen and you interact with it.
The design that is displayed on the screen is the interface and you as a user interact with it.
You can interact with the screen by mouse, keyboard, finger touch, by voice command.
Take an example of a shopping app. You as a user place order on the app by interacting with
the app. You can select different options on the app, i.e. selecting a size, quantity, price,
delivery option. Finally, you complete your order on the app.

Diagram of User Interface

There are many types of user interfaces that we use on daily basis.
Types of user interface

Graphical user interface (GUI)

A graphical user interface (GUI) is a type of interface in which graphical elements are
displayed on the screen. The graphical elements are buttons, charts, tables, pictures, toolbars
etc. You open a website or desktop software and then interact with it by using a mouse and
keyboard. An example of GUI is Windows operating system, Mac OS, Linux. In this
operating system, the interface is graphical i.e. the windows we open have menus, toolbars,
buttons, pictures, icons etc.

Command-line interface (CLI)

9 Dr.Sunil Khilari
Command-line interface (CLI) is that interface in which we interact with the computer by
entering commands. An example of CLI is MS-DOS in Windows and terminal in MAC and
Linux. You can type commands to download files, copy files, move files, delete files etc.

Menu-driven interface
A menu-driven interface is a type of interface in which menus are displayed on the screen and
the user click on those menus to perform different tasks. In Windows, you can click on the
start menu and it displays other menus. Similarly, websites or apps also have a menu on top
or left of the screen. You can open other web pages of the website by clicking on menus. In
your car, the LED screen has also a menu’s by which you play a video or audio.

Form-based interface
A form-based interface is an interface by which the user fills a form and submits it to the
website. As you can see that any website has a contact us page. You fill a form on the
contact us page and that form is submitted to the admin of the website. Similarly, you have
heard about Google forms that are used to get data of users who fill the form. The HTML
forms have different fields like text field, text area; upload button, drop-down menus, and
radio buttons. These all are components of the form.

Examples of user interface

Some examples of the user interface are:-
 MS-DOS
 Windows OS, Mac OS, Linux OS
 Remote control
 ATM
 Virtual reality
 Speedometer
 Mobile app
 Website

==================================================================

10 Dr.Sunil Khilari