Human

Computer
Interaction (HCI)
Interaction styles
 Interaction Styles
 There are different ways a user can communicate with
a computer system and a computer system can
communicate with a user. These are called interaction
styles.

 An interaction style is a collection of user interface

controls and their associated behavior. The interaction
style provides both the look (appearance) and feel
(behavior) of the user interface components, indicating
the way a user will communicate with the system.
 Interaction Styles

 There are several interaction styles from which a

designer can choose. The most common are as
follow:

• Command line
• Menu selection
• Form-fill
• Direct manipulation
• Gestural Interaction
And other
 Command Line
 The command line interface was the first
interactive dialog style to be commonly used.
 It provides a means of directly instructing the
system, using function keys on a keyboard (F1, F8,
etc.), single characters, abbreviations, or whole-
word commands.
 When the user types characters onto the screen,
they appear as a line across the screen, hence the
term “command line.
Command Line
 Command Line
 One limitation of command line UIs is that the
commands need to be remembered, as no cue is
provided to indicate which commands are available.
 So users have to remember command sequences,
which are often cryptic with complex syntax.
 Commands are often unclear and vary between
systems, causing the users to become confused and
making commands difficult to learn.
 Command Line
 Users’ frustration with command line interfaces
often occurs because of the memory and typing
demands and the low tolerance of errors shown by
this type of interface - a confusing error message is
often the consequence of a single typing mistake in
a long command.

 The use of consistent and meaningful commands

and abbreviations can help alleviate this problem.
 Command Line
 Command line interfaces are better for expert users
than for novices. For expert users, command
languages provide a sense of being in control.
 Users learn the syntax and can express complex
possibilities rapidly, without having to read
distracting prompts. However, error rates are
typically high, and training is necessary. Error
messages and online assistance are hard to provide
because of the interface (command) concepts and
syntax.
Menu based Interaction
 Menu based interaction avoids many of the
problems associated with command line interfaces. A
menu is a set of options from which the user must
choose.
 Typically, the interface displays the options as menu
items or icons and the user indicates a choice with a
pointing device or keystroke, receiving feedback that
indicates which option he or she has chosen, and the
outcome of the command being executed.
 Menu based Interaction
 Menu selection does not have to be visual. When you
telephone a bank, for example, it is common to have
speech interfaces, which require you to choose between
several options.
 Menus are effective because they offer cues for user
recognition rather than forcing the users to recall the
syntax of a command from memory.
 If the items are meaningful to the users, then menu
selection can be rapid and accurate.
 Menus are especially helpful for contextual actions
 Menu based Interaction
 If the items are hard to understand or appear similar
to each other, users can become confused and make
errors. This means that if menus are to be effective,
their names or icons should be self-explanatory.
 Menu based interaction is particularly effective when
users have little training, or are unfamiliar with the
terminology, or need help to structure their decision-
making process.
 Menu based Interaction
 On the other hand, the same
decomposition process can be too rigid
for some users, and it may slow the
knowledgeable frequent user.

 With the careful design of complex

menus and techniques such as
shortcuts, menu-based interaction can
become appealing even for expert users.
 Guidelines for designing Menu based
Interaction
 Use flow of tasks and interaction to
organize menus.
 Give menu items titles that reflect their
functions.
 Group items meaningfully.
 Avoid lengthy menus.
 Order menu items meaningfully.
 Use short names for menu items.
 Use consistent grammar, layout, and
terminology.
 Consider the screen’s size when deciding
the number of menu items.
 Form-Fill

 If your interface has to gather a lot of information

from the user, then it often helps if you provide a
form to fill in. An example is the web page which
collects complaint information about Internet
content from Internet users.
Form-Fill
 Point to consider for Mobile Form-
 Fill : Whichever type
Text entry is difficult
of phone you use, entering text on a
mobile device isn't easy. A recent study by
Blink looked at typing on four types of
mobile devices, and found no real
advantage for any of them. Users get
familiar with their current device, and
prefer its method.
 Put labels above the fields: The
Baymard Institute points out one way you
can help users: put the labels above the
fields. Then they can see the label as they
type on the narrow mobile window.
 Point to consider for Mobile Form-
 Left Aligned Field Fill
label
 Point to consider for Mobile Form-
 Top aligned FieldFill
Label:
 Guidelines for Designing Form-Fill
Interfaces
 Give meaningful labels to the fields.
 Give familiar field labels (use the users’
language).
 Provide comprehensible instructions.
 Incorporate a logical grouping and
sequencing of the fields.
 Present a visually appealing layout for the
form.
 Use consistent terminology and
abbreviations.
 Provide white space and boundaries.
 Guidelines for Designing Form-Fill
Interfaces
 Allow for convenient cursor movement.
 Provide error correction for individual
characters and the entire field.
 Provide error messages for unacceptable
values and error indicators as soon as
possible (prompt error messages should
identify the field the error
occurred in and why).
 Indicate required fields.
 Direct Manipulation
 Direct manipulation (DM) interfaces
allow users to interact directly with the UI
objects — for example, dragging a file
from one folder and dropping it into
another
in Microsoft Explorer, as illustrated in
Figure.
Direct Manipulation
 Direct Manipulation
 In Direct Manipulation interfaces, the keyboard
entry of commands or menu choices is replaced by
manipulating a visible set of objects and actions. This
is usually achieved by using a continuous input
device, such as a mouse, pen, or joystick or a finger
on the touch screen.

 DM interfaces exist in many application areas,

including word processing, desktop publishing,
computer-aided design (CAD), flight simulation,
virtual reality systems, and video games.
 Direct Manipulation
 DM interfaces often use icons and
metaphors to enable the users to develop
an accurate mental model quickly. This is
true, for example, for dragging a file from
one folder to another.
 Direct Manipulation
 DM interfaces are based on the idea that
users should be allowed to manipulate UIs
in a way that is analogous to the way they
interact with task objects in everyday life.
In this way, they represent a more natural
and familiar
mode of interacting with the
representation of the task objects.
 Benefits of Direct Manipulation
 Novices can learn basic functionality
quickly,
usually through a demonstration by a
more
experienced user.
• Experts can work rapidly to carry out
a wide range of tasks, even defining new
functions and features.
• Error messages are rarely needed.
• Users can immediately see if their
actions are furthering their goals, and,
if not, they can simply change the
direction of their activity.
 Direct Manipulation
 Users experience less anxiety because
the system is comprehensible and
because actions are so easily reversible.
 Users gain confidence and mastery
because they are the initiators of action;
they feel in control, and the system
responses are predictable.
 Gestural Interaction
 Gestures and bodily postures are a
natural part of social communication and
interaction between humans.
Gestures
 Navigational gestures: It helps users to move around and
explore options.
 Action gestures: They are similar to scrolling, selecting etc.
 Transform gestures: They transform an element’s size,
position, and rotational features.
 Gestural Interaction
 Gestures are movement of
– Finger(s)
– Hand
– Arm
– Foot, Head, Body
 Two basic variations:
– Touch gestures (done on a touch-
sensitive surface)
– Air-based gestures (without a touch-
sensitive surface)
Touch gestures
 Tap
 Double Tap
 Drag and Drop
 Slide
 Fling/Flick
 Touchdown and
Hold/Long press
 Two finger slide
 Rotate
 Pinch and Spread
Air gestures
 Air gestures
Swiping left or Function: Swipe left or right to switch between pages, music, or pictures.
Gesture: Swipe left or right over the screen with your palm or back of the
right hand.

Swiping up or Function: Swipe up or down to switch content.

Gesture: Swipe up or down over the screen with your palm or back of the
down hand.

Taking a Function: Take a screenshot of the entire screen.

Gesture: Make a fist straight in front of the screen.
screenshot

Mute Function: Mute or unmute the system volume.

Gesture: Face the screen and place the forefinger near the middle of the
lip.

Performing an Function: Perform an operation in a certain scenario, such as

playing/pausing a video and answering a call.
operation Gesture: Press forward with your palm.

Dragging up or Function: Adjust the volume.

Gesture: Pinch the thumb with forefinger and move up or down.
down

Dragging left or Function: Fast forward or rewind media content.

Gesture: Pinch the thumb with forefinger and move left or right.
right
Other interaction technologies
 Voice interaction
 Stylus-pen

 Gaze Gesture (eye-tracking in Head-mounted

display HMD)
 virtual reality and augmented reality

Future?
 Case Study: Comparing interaction types between Google
Search (instructing) and Google Maps (exploring).
Paradigms in Interaction Design
 Paradigms reflect the guiding principles for interaction design.
 Examples: Desktop computing, ubiquitous computing, mobile-
first design.
 Activity: Discuss how mobile-first design influences app
development (e.g., Snapchat's mobile-focused interface).