When considering the interaction styles of computers, it's important to analyze their efficiency, ease of use, and responsiveness. Among various styles like GUI (Graphical User Interface) and CLI (Command Line Interface), GUI stands out as one of the most efficient and user-friendly options. Its advantage lies in its visual representation, allowing users to interact with the system through intuitive icons, menus, and windows. GUIs offer a more natural and accessible way for users to navigate and interact with applications, reducing the learning curve and enhancing productivity. Additionally, GUIs provide immediate feedback, enhancing responsiveness and user satisfaction. Overall, GUIs strike a balance between efficiency, ease of use, and responsiveness, making them a preferred interaction style for most users.

1. Human Computer
Interaction (HCI)
Interaction styles

2. 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.

3. 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

4. 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.

5. Command Line

6. 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
ambiguous with complex syntax.
 Commands are often unclear and vary between systems, causing
the users to become confused and making commands difficult to
learn.

7. 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.

8. 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.

9. 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.

10. 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

11. 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.

12. 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.

13. 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.

14. 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.

15. Form-Fill

16. Point to consider for Mobile Form-Fill
 Text entry is difficult : Whichever type 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.

17. Point to consider for Mobile Form-Fill
 Left Aligned Field label

18. Point to consider for Mobile Form-Fill
 Top aligned Field Label:

19. 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.

20. 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.

21. 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.

22. Direct Manipulation

23. 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.

24. 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.

25. 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.

26. 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.

27. Gestural Interaction
 Gestures and bodily postures are a natural part of
social communication and interaction between
humans.

28. 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.

29. 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)

30. Touch gestures
 Tap
 Double Tap
 Drag and Drop
 Slide
 Fling/Flick
 Touchdown and
Hold/Long press
 Two finger slide
 Rotate
 Pinch and Spread

31. Air gestures

32. Air gestures
Swiping left or
right
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
hand.
Swiping up or
down
Function: Swipe up or down to switch content.
Gesture: Swipe up or down over the screen with your palm or back of the
hand.
Taking a
screenshot
Function: Take a screenshot of the entire screen.
Gesture: Make a fist straight in front of the screen.
Mute Function: Mute or unmute the system volume.
Gesture: Face the screen and place the forefinger near the middle of the
lip.
Performing an
operation
Function: Perform an operation in a certain scenario, such as
playing/pausing a video and answering a call.
Gesture: Press forward with your palm.
Dragging up or
down
Function: Adjust the volume.
Gesture: Pinch the thumb with forefinger and move up or down.
Dragging left or
right
Function: Fast forward or rewind media content.
Gesture: Pinch the thumb with forefinger and move left or right.