University Institute of Engineering

DEPARTMENT OF COMPUTER SCIENCE &

ENGINEERING
Subject Name: Software Engineering
Subject Code: 23CST-206
User Interface Design

Er. Jagmeet Kaur

E8387
ASSISTANT PROFESSOR DISCOVER . LEARN . EMPOWER
CSE

09/12/24 Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh Univer 1

sity
 User Interface Design

• User Interface Design Activities

• GUI Implementation Tools

• command line interface (CLI)

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 2

 User Interface Design Activities
• There are a number of activities performed for designing user
interface. The process of GUI design and implementation is alike
SDLC. Any model can be used for GUI implementation among
Waterfall, Iterative or Spiral Model.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 3

 User Interface Design Activities

• A model used for GUI design and development should fulfill these
GUI specific steps.
• GUI Requirement Gathering - The designers may like to have list of
all functional and non-functional requirements of GUI. This can be
taken from user and their existing software solution.
• User Analysis - The designer studies who is going to use the software
GUI. The target audience matters as the design details change
according to the knowledge and competency level of the user. If user
is technical savvy, advanced and complex GUI can be incorporated.
For a novice user, more information is included on how-to of software.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 4

 User Interface Design Activities

• Task Analysis - Designers have to analyze what task is to be done by the software
solution. Here in GUI, it does not matter how it will be done. Tasks can be
represented in hierarchical manner taking one major task and dividing it further
into smaller sub-tasks. Tasks provide goals for GUI presentation. Flow of
information among sub-tasks determines the flow of GUI contents in the software.
• GUI Design & implementation - Designers after having information about
requirements, tasks and user environment, design the GUI and implements into
code and embed the GUI with working or dummy software in the background. It
is then self-tested by the developers.
• Testing - GUI testing can be done in various ways. Organization can have in-
house inspection, direct involvement of users and release of beta version are few
of them. Testing may include usability, compatibility, user acceptance etc.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 5

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 6
 GUI Implementation Tools
• There are several tools available using which the designers can create entire GUI on a mouse click.
Some tools can be embedded into the software environment (IDE).
• GUI implementation tools provide powerful array of GUI controls. For software customization,
designers can change the code accordingly.
• There are different segments of GUI tools according to their different use and platform.
• Example
• Mobile GUI, Computer GUI, Touch-Screen GUI etc. Here is a list of few tools which come handy
to build GUI:
• FLUID
• AppInventor (Android)
• LucidChart
• Wavemaker
• Visual Studio
Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 7
 User Interface Golden rules

• The following rules are mentioned to be the golden rules for GUI design
• Strive for consistency - Consistent sequences of actions should be required in
similar situations. Identical terminology should be used in prompts, menus, and
help screens. Consistent commands should be employed throughout.
• Enable frequent users to use short-cuts - The user’s desire to reduce the number
of interactions increases with the frequency of use. Abbreviations, function keys,
hidden commands, and macro facilities are very helpful to an expert user.
• Offer informative feedback - For every operator action, there should be some
system feedback. For frequent and minor actions, the response must be modest,
while for infrequent and major actions, the response must be more substantial.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 8

 User Interface Golden rules

• Design dialog to yield closure - Sequences of actions should be

organized into groups with a beginning, middle, and end. The
informative feedback at the completion of a group of actions gives the
operators the satisfaction of accomplishment, a sense of relief, the
signal to drop contingency plans and options from their minds, and
this indicates that the way ahead is clear to prepare for the next group
of actions.
• Offer simple error handling - As much as possible, design the
system so the user will not make a serious error. If an error is made,
the system should be able to detect it and offer simple, comprehensible
mechanisms for handling the error.
Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 9
 User Interface Golden rules

• Permit easy reversal of actions - This feature relieves anxiety, since the user
knows that errors can be undone. Easy reversal of actions encourages exploration
of unfamiliar options. The units of reversibility may be a single action, a data
entry, or a complete group of actions.
• Support internal locus of control - Experienced operators strongly desire the
sense that they are in charge of the system and that the system responds to their
actions. Design the system to make users the initiators of actions rather than the
responders.
• Reduce short-term memory load - The limitation of human information
processing in short-term memory requires the displays to be kept simple, multiple
page displays be consolidated, window-motion frequency be reduced, and
sufficient training time be allotted for codes, mnemonics, and sequences of actions.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 10

 Command line interface (CLI)

• A command line interface (CLI) is a text-based user interface (UI)

used to view and manage computer files.
• Command line interfaces are also called command-line user interfaces,
console user interfaces and character user interfaces.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 11

 Prompts and commands

• There are hundreds of different commands available in a command

line. The set of commands may vary dramatically between operating
systems or applications.
• The following is a list of commands in the Microsoft task
configuration and automation framework PowerShell:
• Get-Date: Retrieves the current time and date.
• cd: Used to change directories.
• Stop-Process: Terminates one or more system processes.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 12

 Prompts and commands

• Although some commands operate alone, others require the use of

arguments. The argument follows the command and provides
additional details or specifics.
• For example, the cd command tells the OS to change to a different
directory, but the command line must include the name of the desired
directory path, as well.
• For example, a full command with an argument appears as:
• cd \documents\user

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 13

 CLI advantages and disadvantages

• The advantages of a command line interface are:

• granular control of an OS or application;
• faster management of a large number of operating systems;
• ability to store scripts to automate regular tasks; and
• basic command line interface knowledge to help with troubleshooting,
such as network connection issues.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 14

 Disadvantages
• The disadvantages of a command line interface are:
• GUI is more user-friendly;
• steeper learning curve associated with memorizing commands and
complex syntax/arguments; and
• different commands used in different shells.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 15

 CLI versus GUI

• The graphical user interface is the most popular user interface today. A
GUI uses windows, menus and icons to execute commands.
• A mouse is the most common way to navigate through a GUI,
although many GUIs allow navigation and execution via a keyboard.
• One example of a GUI-based application is Microsoft Word.
• A user can change options for page layouts and styles by selecting the
corresponding icon with a mouse or keyboard.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 16

 CLI versus GUI

• Administrators who manage thousands of systems or user

configurations will find a GUI far less efficient than a CLI.
• But a simple CLI command can easily adjust configurations for a large
group of systems at once.
• Commands and arguments can also be combined and saved, then
executed as a script each time that specific action -- or comprehensive
set of actions -- is required.
• The CLI is the preferred tool for many enterprise-wide systems
management tasks.

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 17

 References

• https://www.tutorialspoint.com/software_engineering/software_user
_interface_design.htm
• https://www.usability.gov/what-and-why/user-interface-design.html#
:~:text=The%20best%20interfaces%20are%20almost,get%20things%2
0done%20more%20quickly.
• https://www.elegantthemes.com/blog/resources/10-rules-of-good-ui-
design-to-follow-on-every-web-design-project

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 18

THANK YOU

Er. Jagmeet Kaur, Asst. Prof., CSE, Chandigarh University 19