MODULE 3

GRAPHICAL USER INTERFACES (GUI)

3.1 Meaning of GUI

Recall, in HCI systems, interaction between humans and computer is made possible through the
following types of interactive interfaces namely Command-line Interface (CLI), Graphical User
Interfaces (GUIs), Voice-controlled User Interfaces (VUIs), Gesture-based Interface (GBIs).
Graphical User Interface is a type of interface where user interacts with the computer using
graphics or visual clue. Graphics include icons, navigation bars, images etc. The user can interact
with the system through the interface using mouse, voice, finger touch etc. It is a very user-friendly
interface and requires no expertise. Graphical components examples icons, cursors and buttons
can be enhanced with audio or visual effects like transparency to create a more user-friendly
graphical user interface. GUI is different from Command User Interface where there are no graphics
and users have to memorize the commands needed to perform a task and use the keyboard to type
such commands in order to interact with the system.
The main benefits of using GUI are user-friendly, simple to learn and users can customize the
interface to their preference. However, the system requires more resources to execute and
store the graphics. The main characteristic of GUI is WIMP. This is the use of Windows, Icons,
Menus, and Pointers to interact with the system.

In today’s times, graphical user interfaces are used in many devices such as mobiles, MP3 players,
gaming devices, smartphones etc.
The diagram below provides the position of the graphical user interface with respect to the computer
system −

The Position of GUI in Hierarchical Structure of System Components

In programming, say Python you can use PyGUI to crete GUIs. PyGUI, short for Python
Graphical User Interface Project, is such a framework. Developers may create apps with special
Python features using the interposing features of PyGUI, which allow them to write less code
between their apps and the basic resources of this pythonic GUI Platform. This GUI project is cross-
platform, so you may use it with Windows, Unix, or the most recent macOS software.

1
3.2 History of Screen Designs and GUIs
While developers have been designing screens since a cathode ray tube display was first attached
to a computer, more widespread interest in the application of good design principles to screens did
not begin to emerge until the early 1970s, when IBM introduced its 3270 cathode ray tube text-based
terminal. A 1970s screen often resembled the one pictured in Figure. It usually consisted of many
fields (more than are illustrated here) with very cryptic and often unintelligible captions.

• It was visually cluttered, and often possessed a command field that challenged the user to
remember what had to be keyed into it.
• Ambiguous messages often required referral to a manual to interpret.
• Effectively using this kind of screen required a great deal of practice and patience.
• Most early screens were monochromatic, typically presenting green text on black backgrounds.
• At the turn of the decade guidelines for text-based screen design were finally made widely available
and many screens began to take on a much less cluttered look through concepts such as grouping
and alignment of elements, as illustrated in the above figure.
• User memory was supported by providing clear and meaningful field captions and by listing
commands on the screen, and enabling them to be applied, through function keys. Messages also
became clearer.
• These screens were not entirely clutter-free, however. Instructions and reminders to the user had
to be inscribed on the screen in the form of prompts or completion aids such as the codes PR and
Sc.
Not all 1980s screens looked like this, however. In the 1980s, 1970s-type screens were still being
designed, and many still reside in systems today.

• Multiple properties of elements were also provided, including many different font sizes and styles,
line thicknesses, and colors.
• The entry field was supplemented by a multitude of other kinds of controls, including list boxes,
drop-down combination boxes, spin boxes, and so forth.
• These new controls were much more effective in supporting a person's memory, now simply
allowing for selection from a list instead of requiring a remembered key entry.
2
• Completion aids disappeared from screens, replaced by one of the new listing controls. Screens
could also be simplified, the much more powerful computers being able to quickly present a new
screen.
• In the 1990s, our knowledge concerning what makes effective screen design continued to expand.
Coupled with ever-improving technology, the result was even greater improvements in the user-
computer screen interface as the new century dawned.

The advent of graphics yielded another milestone in the evolution of screen design, as illustrated in
the above figure. While some basic "design principles did not change, groupings and alignment, for
example ,Borders were made available to visually enhance groupings and buttons and menus for
implementing commands replaced function keys.
The Xerox systems, Altus and STAR, introduced the mouse and pointing and selecting as the
primary human-computer communication method. The user simply pointed at the screen, using the
mouse as an intermediary. These systems also introduced the graphical user interface as we know
it a new concept was born, revolutionizing the human-computer interface.
 A user interface is a collection of techniques and mechanisms to interact with something.
 In a graphical interface the primary interaction mechanism is a pointing device of some kind.
 This device is the electronic equivalent to the human hand. What the user interacts with is a
collection of elements referred to as objects.
 They can be seen, heard, touched, or otherwise perceived.
 Objects are always visible to the user and are used to perform tasks.
 They are interacted with as entities independent of all other objects.
 People perform operations, called actions, on objects.
The operations include accessing and modifying objects by pointing, selecting, and manipulating. All
objects have standard resulting behaviors.

3
3.3 Elements in Graphical User Interface
Graphical User Interface makes use of visual elements mostly. These elements define the
appearance of the GUI. Some of these are described in detail as follows:
Window
This is the element that displays the information on the screen. It is very easy to manipulate a
window. It can be opened or closed with the click of an icon. Moreover, it can be moved to any area
by dragging it around. In a multitasking environment, multiple windows can be open at the same
time, all of them performing different tasks.

Picture of a Window

There are multiple types of windows in a graphical user interface, such as container window,
browser window, text terminal window, child window, message window etc.
Menu
A menu contains a list a choices and it allows users to select one from them. A menu bar is displayed
horizontally across the screen such as pull down menu. When any option is clicked in this menu,
then the pull down menu appears.

Picture of Menu with Icons

Another type of menu is the context menu that appears only when the user performs a specific
action. An example of this is pressing the right mouse button. When this is done, a menu will appear
under the cursor.
Icons
Files, programs, web pages etc. can be represented using a small picture in a graphical user
interface. This picture is known as an icon. Using an icon is a fast way to open documents, run
programs etc. because clicking on them yields instant access.
Controls
Information in an application can be directly read or influences using the graphical control elements.
These are also known as widgets. Normally, widgets are used to display lists of similar items,
navigate the system using links, tabs etc. and manipulating data using check boxes, radio boxes
etc.

Tabs
A tab is associated with a view pane. It usually contains a text label or a graphical icon. Tabs are
sometimes related to widgets and multiple tabs allow users to switch between different widgets.

4
Tabs are used in various web browsers such as Internet Explorer, Firefox, Opera, Safari etc. Multiple
web pages can be opened in a web browser and users can switch between them using tabs.

3.4 The Widgets

Screen Based controls, often simply called controls and sometimes called widgets. By definitions,
they are graphic objects that represent the properties or operations of other objects. Widgets include
the following: icons; pull-down menus; buttons; selection boxes; progress indicators; on-off
checkmarks; scroll bars; windows; window edges that let you resize the window; toggle buttons; and
devices for displaying information and inviting, accepting and responding to user actions.
How do widgets add value?
On websites, widgets can facilitate an interactive user experience. By making it easy to navigate a
website, widgets increase site traffic and capture customer data that can be used for product
development and customer service purposes. Data gleaned from user interactions with widgets on
websites is analyzed to improve business planning and decision-making.
Widgets encourage website visitors to stay on a webpage, rather than switch to another site, which
helps increase click-through rates, expose users to other parts of a company's website and product
offerings, and improve search engine performance and rankings.
Other ways developers can add widgets to engage customers include the following:
 adding a live chat function to interact with customers in real time;
 conducting surveys to collect user preference data;
 launching a call-to-action widget that uses pop-ups or other techniques to attract customers'
attention and invite them to sign up for a free newsletter or watch a video.
1) TextBox Control
The TextBox control is generally used for editable text, although it can also be made read-only. Text
boxes can display multiple lines, wrap text to the size of the control, and add basic formatting.
The TextBox control allows a single format for text displayed or entered in the control. In the figure
below the boxes following the labels Date Item Received and Item Descriptions are textbox controls
used to accept corresponding inputs.

Text Entry (Captions) For entry boxes

• Place a colon (:) immediately following the caption
• For single fields, caption can be located in front of upper left corner of the box. For multiple fields,
position the caption upper left of the box
For read-only boxes
• If the data field is long or about the same length, center the caption above the displayed textbox
• If the data is alphanumeric, short, or quite variable in length, left-justify the caption above the
displayed
• If the data field is numeric and variable in length, right justify the caption above the displayed.

5
Text Entry/Read-Only Controls (Fields)
• To visually indicate that it is an enterable field, present the box in a recessed manner
• Present read-only text boxes on the window background
• Break up long text boxes through incorporation of slashes(/), dashes (-), spaces, or common
delimiters
• Call attention to text box data through a highlighting technique
• Gray-out temporarily unavailable textboxes

2) Combo Box
A combo box is a commonly used graphical user interface widget. Traditionally, it is a combination
of a drop-down list, a drop down button and a single-line editable textbox, allowing the user to either
type a value directly or select a value from the list. The term "combo box" is sometimes used to mean
"drop-down list".

Default Display

List displayed when user clicks the dropped

down button
3) Command Buttons
This is a square or rectangular-shaped control with a label inside that indicates action to be
accomplished – The label may consist of text, graphics, or both. It could be single-word labels
whenever possible (Use two –three words for clarity, if necessary)

Command Buttons are use to provide

 fast access to frequently used or critical commands (for windows with a menu bar)
• access to all necessary commands (for windows without a menu bar) • Use single-word labels
whenever possible (Use two –three words for clarity, if necessary)

4) Toolbars

Toolbars provide easy and fast access to most frequently used commands or options across multiple
screens • Provide buttons of equal size.
Toolbars (Organization and Location)
• Place the most frequently used actions to the left or the top
• Keep related buttons grouped together
• Separate potentially destructive buttons from frequently chosen selections
• Permit user to reconfigure the button organization
6
• Position main features and functions bar horizontally across top of window just below menu bar
• Position subtask and sub features bars along sides of window
• Permit the location of the bar to be changed by the user
Toolbars (Active items, Button Activation and Customization)
• Make only currently available toolbar items available
• Temporarily not available items by displaying grayed out
• Highlight the button in some visually distinctive manner when the pointer is resting on it
• Call attention to the button in another visually distinctive manner when it has been activated or
pressed
• Permit toolbars to be turned off by user
• Allow the customizing of toolbars

5) Radio Buttons
A two part control consisting of the following – Small circles, diamonds, or rectangles and a Choice
descriptions. When a choice is selected, the option is highlighted whereas any existing choice is
automatically un highlighted and deselected

Radio Buttons (Defaults and Structure)

• If there is a default selection, designate it as the default and display its button filled in. Else, display
all the buttons without setting adopt
• When a multiple selection includes choices, display the buttons in another unique manner, such as
gray shadow
• Left-align the buttons and choice descriptions
• A columnar orientation is the preferred unless vertical space on the screen is limited
• Enclose the buttons in a border to visually strengthen the relationship
Radio Buttons (Organization, Related Control)
• Arrange selection in expected order or follow other patterns (frequency of occurrence, sequence
of use, or importance) • Position any control related to a radio button immediately to the right of the
choice description. End the label with an arrow
Radio Buttons (Captions)
• Display full spelled out in mixed-case letters, capitalizing the first letter of all significant words •
Columnar orientation – With a control border, position the caption:
6) Check Boxes
Each option acts as a switch and can be either “on” or “off” – When an option is selected, a mark (X)
appears within the square box, or the box is highlighted in some other manner – Otherwise the
square is unselected or empty(off). Each box can be – Switched on or off independently – Used
alone or grouped insets. It is usually used to set one of a series of mutually exclusive options
presented graphically or pictorially. It usually consume less screen space than textual equivalents

7
 Do not use – Where the alternatives cannot be meaningfully and clearly represented pictorially –
Where words are clearer than images – Where the choices are going to change.
7) List Boxes
This is a permanently displayed box-shaped control containing a list of attributes or objects from
which a single selection is made (mutually exclusive),or multiple selections are made (non-mutually
exclusive). It is characterized by unlimited number of choices. If the list content change, items will
be hard to find. List boxes are good for data that are – Best represented textually – Not frequently
selected – Large in number – Fixed in list length.

Clearly and meaningfully describe the choices available, presented in mixed case. Ensure left-align
into columns. Require no more than 40 page-downs to search a list – If more are required, provide
a method for using criteria. A List box must be long enough to display 6-8choices – If it is the major
control within a window, the box may be larger. When box can’t made wide enough to display longest
entry – Break the long entries with an ellipsis (…)
It can be single selection list box or multiple selection list box.

8) Progress Indicator
Progress indicator is a visual control element that displays an indicator showing the completion
progress of a task, typically displayed as a progress bar.
They use motion to bring to the user's attention how near completion the process is, such as
loading or processing data. They can also signify that processing is taking place, without reference
to how close to completion it might be.
Consider these three use cases where you might use a progress indicator:
 Loading content: While fetching content from a network, such as loading an image or data for a
user profile.
 File upload: Give the user feedback on how long the upload might take.
 Long processing: While an app is processing a large amount of data, convey to the user how much
of the total is complete.
a progress indicator can take one of the two following forms:
 Linear: A horizontal bar that fills from left to right.
8
 Circular: A circle whose stroke grows in length until it encompasses the full circumference of the
circle.

Linear Circular

Linear Circular

9) Carousel
A carousel is an interactive component used to display multiple pieces of content within a single
section, allowing users to navigate through images, text, or other media one at a time. A
carousel optimizes screen space by displaying only a subset of images from a collection of
images in a cyclic view. This layout is perfect for shopping apps, guaranteeing a clean and easy-
to-navigate experience on smaller screens. Below is an example of Carousel with alternate book
title options.

10) Date/Time Picker

A date picker, popup calendar, date and time picker, or time picker is a graphical user interface
widget which allows the user to select a date from a calendar and/or time from a time range.

At run time, the widget is displayed in a collapsed state. Clicking the calendar icon opens a calendar
view that displays selection drop-down lists in addition to the days for each month. The calendar
drop-down lists are combination boxes that support keyboard input. You can type a value to select
9
an item more quickly. The calendar button opens a pop-up calendar that enables you to select dates
interactively. Different controls are displayed on the calendar based on the date picker configuration.

2.4 GUI Design Principles

Generally accepted principles for Graphical user interface design are:
1. Aesthetically pleasing Structure: Provide interactive interface that is visually appealing to the users
by ensuring that the elements are set out in a meaningful way from the perspective of the users. Be
guided by the following presentation and graphic design principles:
 Provide meaningful contrast between screen elements.
 Create groupings – group information within a dialog box where possible
 Align screen elements and groups.
 Provide three dimensional representation
 Use colors and graphics effectively and simply.

2. Clarity The interface should be visually, conceptually and linguistically clear, including
 Visual elements
 Functions
 Metaphors
 Words and text
3. Consistency A system should look, act, and operate the same throughput. Similar components
should:
 Have a similar look
 Have similar uses.
 Operate similarly
 The same action should always yield the same result.
 The function of the elements should not change
 The position of standard elements should not change.

4. Comprehensibility A system should be easily understood and learned. A user should know the
following
 What to do
 What to look at
 When to do it
 Where to do it
 Why to do it
 How to do it
 The flow of actions, responses, visual preparations and information should be in a sensible order
that is easy to recollect and place in context.
5. Control The user must control the interaction.
 Actions should result from explicit user requests
 Actions should be performed quickly
 Actions should be capable of interruption or termination
 The user should never be interrupted for errors
 The context maintained must be from the perspective of the user.
 The means to achieve goals should be flexible and compatible with the user’s skills, experiences,
habits and preferences.
 Avoid modes since they constrain the actions available to the user.
 Permit the user to customize aspects of the interface, while always providing a proper set of
defaults.

10
6. Tolerance/Recovery (Forgiveness)
With respect to tolerance, the system should prevent users from making errors or provide easy
recovery when errors are made.
Therefore, the system should:
 Permit Commands or actions to be abolished or reversed.
 Permit Immediate return to a certain point if difficulties arise.
 Ensure that users never lose their work as a result of an error on their part or H/W, S/W OR
Communication problem
 Tolerate and forgive common and unavoidable human errors
 Prevent errors from occurring whenever possible.
 Protect against possible catastrophic errors.
 When an error does occur, provide constructive messages.

7. Predictability The user’s should be able to anticipate the natural progression of the task.
 Provide distinct and recognizable screen elements
 Provide cues to the result of an action to be performed
 All expectations should be fulfilled uniformly and completely.
8. Responsiveness The system must rapidly respond to the user’s requests. That is to say,
information must be sent back to user after their actions (i.e. feedback on every action)
 Provide immediate acknowledgement for all user actions
 Visual
 Textual
 Auditory

9. Simplicity: be guided by KISS principle i.e. KISS (Keep it simple and sweet) e.g. place an Open File
Option on a menu under File Tag. In line with this, the system should
 Provide as simple an interface as possible
 Provide defaults
 Minimize screen alignment points.
 Make common actions simple at the expense of uncommon actions being made harder.
 Provide uniformity and consistency
Five ways to provide simplicity:
 Present common and necessary functions first.
 Prominently feature important functions,
 Hide more sophisticated and less frequently used functions

10. Transparency
 Permit the user to focus on the task or job, without concern for the mechanics of the interface.
 Workings and reminders of workings inside the computer should be invisible to the user.

11. Compatibility Provide compatibility with the following:

 The user
 The task and job
 The product
 Adopt the user’s perspective
12. Configurability Permit easy personalization, configuration and reconfiguration of settings.
 Enhances a sense of control
 Encourages an active role in understanding
13. Efficiency
 Minimize eye and hand movements, and other control actions.
 Transitions between various system controls should flow easily and freely.
 Navigation paths should be as short as possible.
 Eye movement through a screen should be obvious and sequential.
11
 Anticipate the user’s wants and needs whenever possible.
14. Flexibility A system must be flexible to the different needs of its users, enabling a level and type of
performance based upon:
 Each user’s knowledge and skills.
 Each user’s experience.
 Each user’s personal preference
 Each user’s habits
 The conditions at that moment

2.5 Visually Pleasing Composition of GUI Elements

Provide visually pleasing composition with the following qualities: Balance, Symmetry, Regularity,
Predictability, Sequentiality, Economy, Unity, Proportion, Simplicity and Groupings.
Balance: Create screen balance by providing an equal weight of screen elements, left and right,
top and bottom.

Symmetry: Create symmetry by replicating elements left and right of the screen centerline.

Regularity: Create regularity by using consistently spaced column and row starting points for
widgets. Also use elements similar in size shape, color and spacing.

12
Predictability: Create predictability by being consistent and following conventional orders or
arrangements.

Sequentiality: Provide sequentiality by arranging elements to guide the eye through the screen in
an obvious, logical, rhythmic, and efficient manner.

Economy: Provide economy by using as few styles, display techniques, and colors as possible.

Unity: Create unity by using similar sizes, shapes, or colors for related information. Also by
leaving less space between elements of a screen than the space left in the margins.

Proportion: Create windows and groupings of data or text with aesthetically pleasing proportions.

13
Simplicity: Optimize the number of elements on a screen, within the limits of clarity. Minimize the
alignment points, especially horizontal and vertical.

2.6 GUI Toolkits

A widget toolkit, widget library, or GUI toolkit is a set of widgets for use in designing applications
with graphical user interfaces (GUIs). The toolkit itself is a piece of software that is generally provided
with an operating system, windowing system, or window manager which provides programs with an
application programming interface (API), allowing them to make use of widgets. Each widget
facilitates a specific user-computer interaction, and appears as a visible part of the computer's GUI.
A widget toolkit, widget library, GUI toolkit, or UX library is a library or a collection of libraries
containing a set of graphical control elements (called widgets) used to construct the graphical user
interface (GUI) of programs.
Most widget toolkits additionally include their own rendering engine. This engine can be specific to
a certain operating system or windowing system or contain back-ends to interface with more multiple
ones and also with rendering APIs such as OpenGL, OpenVG, or EGL. The look and feel of the
graphical control elements can be hard-coded or decoupled, allowing the graphical control elements
to be themed/skinned. Some toolkits may be used from other languages by employing language
bindings. Graphical user interface builders such as e.g. Glade Interface Designer facilitate the
authoring of GUIs in a WYSIWYG manner employing a user interface markup language such as in
this case GtkBuilder.
The GUI of a program is commonly constructed in a cascading manner, with graphical control
elements being added directly to on top of one another.
Most widget toolkits use event-driven programming as a model for interaction.[1] The toolkit
handles user events, for example when the user clicks on a button. When an event is detected, it is
passed on to the application where it is dealt with. The design of those toolkits has been criticized
for promoting an oversimplified model of event-action, leading programmers to create error-prone,
difficult to extend and excessively complex application code. Finite state machines and hierarchical
state machines have been proposed as high-level models to represent the interactive state changes
for reactive programs.

14
2.7 List of widget toolkits
In this section, we presents a list of widget toolkits (also known as GUI frameworks), used to
construct the graphical user interface (GUI) of programs, organized by their relationships with
various operating systems.

15