HUMAN COMPUTER

INTERACTION
 TOPICS:
• MENUS
• NATURAL LANGUAGE
• QUESTION/ANSWER AND QUERY DIALOG
• FORM-FILLS AND SPREADSHEETS
• THE WIMP INTERFACE
• POINT AND CLICK INTERFACE
• THREE DIMENSIONAL INTERFACES
 COMMAND LINE INTERFACE

• A command line interface (cli) is a text-based

interface where you can input commands that interact
with a computer's operating system.
 MENU DRIVEN INTERFACE

• A menu-driven interface is a type of user interface where users

interact with a program or system through a series of menus.
These menus present options or commands that the user can
select, typically through the use of a pointer, keyboard, or
touchscreen, simplifying the interaction with the system.
 NATURAL LANGUAGE INTERFACE

• A NATURAL LANGUAGE INTERFACE is a user interface

in which the user and the system communicate via a natural
(human) language. The user provides input via speech or some
other method, and the system generates responses in the form
of utterances delivered by speech, text or some other method.
 TYPICAL EXAMPLES OF NATURAL
LANGUAGE INTERFACES INCLUDE:

• VOICE AGENTS THAT COMMUNICATE VIA

SPEECH. these agents may run on a computing device
such as a mobile phone, tablet, laptop or desktop computer.
They can be embedded in specialized hardware such as
consumer appliances, or the automation system of a vehicle.
 TYPICAL EXAMPLES OF NATURAL
LANGUAGE INTERFACES INCLUDE:

• CHAT BOTS IN WEB APPLICATIONS. Chatbots that

process natural language requests from the user. For example,
a customer service application available on an organization's
web site could offer a natural language user interface to
handle customers' inquiries. Not all chatbots are speech-
based, some text-based chatbots can let people use speech via
a keyboard dictation function.
 TYPICAL EXAMPLES OF NATURAL
LANGUAGE INTERFACES INCLUDE:

• INTERACTIVE VOICE RESPONSE (IVR)

SYSTEMS that interact with the user via a telephone
call. ivr systems accept speech or key pad input and
generating speech output.
 NATURAL LANGUAGE INTERFACES AND
ACCESSIBILITY

• Natural language interfaces can be made accessible users

with disabilities at the platform and application levels via
multiple modes of input and output.
• For example, some users with physical disabilities may need
speech input, while others may need a keyboard, switch
input, an eye tracking system, or some combination.
 QUESTION/ANSWER AND QUERY DIALOG

• It is the process by which user is asked a series of

questions (mainly with yes/no responses, multiple
choice, or codes) and so is led through the interaction
step by step.
 QUESTION/ANSWER AND QUERY DIALOG

ADVANTAGES
 Easy to learn
 Easy to use for naïve and novice users
 conversional systems
 Low memory
 QUESTION/ANSWER AND QUERY DIALOG

DISADVANTAGES
 Slow to use-need time to read
 Time to read
 Required valid inputs by the user
 limited support for going back to correct errors in early
questions.
 FORM-FILLS AND SPREADSHEETS
 It is a program that automatically fills in windows
form as quickly as they appear in the screen. It allows
you to automatically fill in those long, tedious web
form with a simple click of a button.
 Example: online shopping, resume submission.
Advantages:
1. Simplify data entry
2. Requires modest training
3. Permits use of form-management tools
 FORM-FILLS AND SPREADSHEETS

 Disadvantages
1. Can be tedious to correct mistakes
2. Require valid input in valid form
 FORM-FILLS AND SPREADSHEETS

 What is spreadsheets?
It is a computer application program that stimulates a
physical spreadsheet by capturing, displaying, and
manipulating data arranged in rows and columns.
Examples: Finance, Forms, School Grades and Fills
 THE WIMP INTERFACE
 WIMP stands for Windows, Icons, Menus and Pointers.
 WIMP is the style of graphical user interface that uses the
above-mentioned common widgets. It was invented at
Xerox PARC, popularised by the Apple Macintosh and
now available in other varieties such as the Microsoft
Windows operating system, the X Window System,
OSF/Motif, NeWS and RISC OS.
 WINDOWS
 A window is a rectangular area on the screen that displays the
contents of an application, such as a word processor application
or a web browser. It can contain text, icons, images, and graphics.
 Multiple windows can be displayed on the screen simultaneously,
and users can resize, move, minimize, maximize, and close
windows as needed. Windows have scrollbars functionality,
making it easier to scroll through long documents or contents that
cannot fit in a single window area.
 WINDOWS
 Windows functionalities are shown below:
 ICONS
 An icon is a small graphical symbol that represents an
application, a file, a folder, or a device. Icons are
typically displayed on the desktop or in a file
manager, and users can click an icon to launch an
application or open a file or folder.
 MENUS
 A menu is a list of commands or options that are
displayed on the screen when a user clicks on a menu
bar or a context menu. Menus are used to access an
application’s various features and settings, such as
File, Edit, View, and Help.
 MENUS
 Types of menus:
1. Pop-up menu
A pop-up menu, also known as a context
menu or shortcut menu, is hidden and
doesn't appear until the user right-clicks
on a specific selection. The menu appears
over the application and is oriented
vertically while the user clicks on an
item. It then disappears from the screen.
 MENUS
2. Graphical drop-down menu
In a graphical drop-down menu, clicking on an item --
which could be text, button or icon -- causes a list of new
items to appear. One example can be seen by clicking on
text such as "File" or "Edit" in the horizontal list at the top
of the screen in a Windows application. If there are no
sub-items, clicking on the item will simply execute the
indicated function.
 MENUS
3. Pull-down menu
Also known as a drop-down menu, the pull-down menu
is a popular choice for GUIs. When a user clicks on a
menu title, the menu items will appear to drop down
from that position and be displayed on the screen. Users
can then select the required option by clicking the menu
item or holding the mouse button down.
 MENUS
4. Moving bar menu
In a moving bar menu, the user selects options by
moving a highlighted bar over them. The menu bar can
be moved with a mouse, or by using the arrow keys or
Tab key on a keyboard.
 MENUS
5. Tear-off menu
In a tear-off menu, the menu can
be moved to another place on the
screen from where it was first
displayed. Usually, this menu is
moved from the top portion of
the window to the left, right or
bottom of the same window.
 BUTTONS
 A button is an interactive element that enables to get
the expected interactive feedback from the system
following a particular command. Basically, a button is
a control that allows a user to directly communicate
with the digital product and send the necessary
commands to achieve a particular goal.
 BUTTONS
Types of buttons:
 CTA Button- A call-to-action (CTA) button is an
interactive element of a user interface that’s aimed at
encouraging a user to take a certain action. This
action presents a conversion for a particular page or
screen (for example buy, contact, subscribe, etc.), in
other words, it turns a passive user into an active one.
 BUTTONS
 Text Button
it’s a button presented with a piece of text. It means
that the copy isn’t integrated into any shape, filled tab,
or anything like that. So, it doesn’t look like a button in
our standard understanding of this phenomenon in the
physical world. The copy is its only visual presenter.
 BUTTONS
 Dropdown Button
Dropdown button, when you click it,
displays a drop-down list of mutually
exclusive items. You can often come
across this type in the settings button.
When a user chooses one of the
options in the list, it’s usually marked
as active, for example by color.
 BUTTONS
 Hamburger button
It is the button hiding the menu.
When you click or tap it, the menu
expands. This kind of menu (and
button as well) got such a name due
to its form made of three horizontal
lines that look like a typical bread-
meat-bread hamburger.
 BUTTONS
 Plus Button
Being clicked or tapped, plus button
enables a user to add some new
content to the system. Depending on
the type of an app, it can be a new
post, contact, location, note, item in
the list – anything that is a basic
action for the digital product.
 BUTTONS
 Expendable Button
This button opens a variety of
options after being clicked or
tapped. It is one more way to set the
proper flow of interactions without
overloading the screen, which is
particularly important for mobile
interfaces limited in screen space.
 BUTTONS
 Share Button
With the high popularity of social
networks, chatting, and emailing, these
buttons simplify the process of
connecting an app or website content to a
user’s social profile. The button of this
type enables a user to share the content or
achievement directly to social networking
accounts.
 BUTTONS
 Ghost Button
Ghost button is a transparent button that looks empty.
That’s why it is also called “empty”, “hollow” or even
“naked”. Its visual recognizability as a button is
typically provided with a shape bordered by quite a
thin line around the button copy.
 POINT AND CLICK INTERFACES
 It is a graphical user interface where an action is
selected by placing a cursor over its depiction on the
display using a pointing device, and is then initiated
by clicking.
 POINTING VS. CLICKING
 Pointing is the action of using the mouse (pad, etc.)
to have the indicator on the screen (usually an arrow)
point at a specific spot - usually an icon a picture that
is a shortcut to opening what you wish to use. ‘
 Click(ing) is simply the action of pressing down on
the mouse pad (or item used in a similar way).
 THREE DIMENSIONAL INTERFACES
It is a new human-computer interaction, using this mode the
user can enter to a cyber space that virtually unlimited, and
interacting with inner objects in a natural harmony way.
This cyber space can describe things existing in the real world
(that is, "real things to virtual"). It can also describe the things
that entirely imaged or things that existing in the real word
but people can not touch (that is, "virtual things to real"). It
may also known as virtual reality environment.
 THREE DIMENSIONAL INTERFACES
3D virtual environment system has three features
which are Immersion, Interaction and Involvement,
which is called 3I characteristics.
The current 3D virtual environment system included:
Desktop, Half-physical, Visual Immersion, Augment
Reality, and Distributed Virtual Environment
 ADVANTAGES AND DISADVANTAGES OF 3D
UI
 Scenario context - 3D scenario enhanced the users’
comprehensive capabilities of dealing with
information, including awareness, perception,
learning and memory.
 Information architecture and layout- 3D UI
provides a new space for the organizing, bearing,
showing a more complex information.
 ADVANTAGES AND DISADVANTAGES OF 3D
UI
 Information visualization- graphics and
representation can make the users easier to understand
and identify the information.
 Interaction Experience- it can show a more
attractive new interactive way through breaking the
world restrictions.