Human computer interaction chapter 2 interaction Styles.pptx

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.