User Interface (UI) Design

 UI design - is the process, in which designers use to build

interfaces in software or computerized devices, focusing on
looks or style used.

 Elements of UI design :- buttons to click, the texts, images,

sidebars, layouts, and sliders.

 Example : Google Docs

 Characteristics of a user interface
 Speed of learning. A good user interface should be easy to learn.

 Speed of learning is hampered by complex syntax and semantics of the command
issue procedures.
 A good user interface should not require its users to memorize commands.

 Speed of use. Speed of use of a user interface is determined by the time and
user effort necessary to initiate and execute different commands.

 Speed of recall. Once users learn how to use an interface, the speed with which
they can recall the command issue procedure should be maximized.
 Characteristics of a user interface

 Error prevention :-. A good user interface should minimize the scope of
committing errors while initiating different commands.

 Attractiveness :-. A good user interface should be attractive to use. In

this respect, graphics-based user interfaces have a definite advantage over
text-based interfaces.

 Consistency :-. The commands supported by a user interface should be

consistent. Consistency facilitates speed of learning, speed of recall, and
also helps in reduction of error rate.

 Feedback :-. A good user interface must provide feedback to various

user actions.
 Characteristics of a user interface

 Error recovery (undo facility). While issuing commands, even the

expert users can commit errors. Therefore, a good user interface should
allow a user to undo a mistake committed by him while using the
interface.

 User guidance and on-line help. Users seek guidance and on-line help
when they either forget a command or are unaware of some features of
the software.

 Whenever users need guidance or seek help from the system, they should
be provided with the appropriate guidance and help.
 BASIC CONCEPTS:
Mode-based interface vs. Mode-less interface

 A mode is a state or collection of states in which only a subset of all

user interaction tasks can be performed.

 In a mode-less interface, the same set of commands can be

invoked at any time during the running of the software.

 Thus, a mode-less interface has only a single mode and


 All the commands are available all the time during the operation of
the software.

 A mode-based interface, different set of commands can be

invoked depending on the mode in which the system is.
 Graphical User Interface (GUI) vs.
Text-based User Interface (TBUI)

 In a GUI, multiple windows with different information can

simultaneously be displayed on the user screen.

 This is perhaps one of the biggest advantages of GUI over

text-based interfaces.

 Iconic information representation and symbolic information

manipulation is possible in a GUI.
 GUI vs. T-BUI

 A GUI usually supports command selection using an attractive and

user-friendly menu selection system.

 In a GUI, a pointing device such as a mouse or a light pen can be
used for issuing commands.

 The use of a pointing device increases the efficacy issue procedure.

Advantages of Text-based User Interface (TBUI)

 A text-based user interface can be implemented even on a

cheap alphanumeric display terminal.

 Graphics terminals are usually much more expensive than

alphanumeric terminals.
 Types of user interfaces

 User interfaces can be classified into the

following three categories:

 • Command language based interfaces

 • Menu-based interfaces

 • Direct manipulation interfaces

 Command Language-based
Interface

 A command language-based interface – as the name itself

suggests, is based on designing a command language which the
user can use to issue the commands.

 The user is expected to frame commands in the language and

type them in appropriately whenever required.

 A command language-based interface can be made concise

requiring minimal typing by the user.

 Command language-based interfaces allow fast interaction with

the computer and simplify the input of complex commands.
 Menu-based Interface
 A menu-based interface is based on recognition of
the command names, rather than recollection.

 in a menu-based interface the typing effort is

minimal as most interactions are carried out through
menu selections using a pointing device.

 Advantage of a MBI does not require the users

to remember the exact syntax of the
commands.
 Direct Manipulation Interfaces

 Direct manipulation interfaces present the interface to the

user in the form of visual models (i.e. icons or objects).

 For this reason, direct manipulation interfaces are sometimes

called as iconic interface.

 Here, user issues commands by performing actions on

the visual representations of the objects,

 e.g. drag an icon into a trash box, for deleting the file.

 Advantages :
 the icons can be recognized by the users very easily, and
 that icons are language-independent.