Download Human-Computer Interaction 1 and more Lecture notes Human-Computer Interaction Design in PDF only on Docsity!
IT86A-HUMAN COMPUTER INTERACTION
Page | 13 SPECIFIC HCI GUIDELINES Topic:
1. Guidelines Categories
2. Example of HCI Guidelines
a. Visual Display Layout
b. Information Structuring and Navigation
c. Taking user Input
d. User with Disability(Type of User)
e. Mobile Device (Platform Type)
f. Icons for Apple IoS and Fonts for Windows OS
g. Earcon: Design for Aural (Modality)Interface
h. Cellphones or Making Calls in Auto Mobile(Task)
Objectives:
• Discuss the Guidelines Categories of HCI.
• Describe the 9 Specific Examples of Human Computer
Interaction Guidelines
• Practice User Centered Interface Design
• Assess underlying compromises and trade off Interface
design in HCI
Content
1. Guidelines Categories While principles are very general and applicable to wide areas and aspects of human–computer interaction (HCI) design, guidelines tend to be more specific. Table 2.1 shows major criteria and areas for which specific guidelines can be of help in HCI design.
IT86A-HUMAN COMPUTER INTERACTION
Page | 14 Many guidelines in the categories listed in Table 2.1 have been put forth by a number of HCI researchers, practitioners, and organizations over the years and are considered to be reasonably objective. There is even an international standard; the International Organization for Standardization (ISO) 9241 document guides the ergonomics aspects of HCI designs, with topics covering visual display, physical input devices, workplace/environment ergonomics, and tactile/haptic interactions [1]. Broadly, we might divide the guidelines into two categories: (a) Domain specific (i.e., specific to user, platform, etc.) and (b) General HCI design. Note that these guidelines can be relevant and common across the different categories shown in Table 2.1. For example, guidelines for e-commerce application might also address different general
IT86A-HUMAN COMPUTER INTERACTION
Page | 16 given application. Thus, structuring the information and making it easy to move (or navigate) among the various items becomes a very important issue for high usability. Structuring information content and controlling the interface for the purpose of HCI is closely related to the principle of understanding the task. By understanding the task, we identify the sequence of subtasks and actions, and each task will be associated with information either for making input or for the resulting output. The task structure, action sequence, and associated content organization will dictate the interaction flow and its fluidity. In this way, only the right amount of information or control will be available at the right time. Aside from such internal structure, it is also important to provide external means and the right UI for fast and easy navigation. Fast and easy navigation means enabling the user to find the needed action (e.g., menu item) and information quickly. Here, we introduce a summarized guideline for the design of an easily navigated interface from Leavitt and Shneiderman [3]. “Navigation refers to the method used to find information within a Web site. A navigation page is used primarily to help users locate and link to destination pages. A Web site’s navigation scheme and features should allow users to find and access information effectively and efficiently. When possible, this means designers should keep navigation-only pages short. Designers should include site maps, and provide effective feedback on the user’s location within the site. “ “To facilitate navigation, designers should differentiate and group navigation elements and use appropriate menu types. It is also important to use descriptive tab labels, provide a clickable list of page contents on long pages, and add “glosses” where they will help users select the correct link. In well-designed sites, users do not get trapped in dead-end pages.” As a more concrete example, we illustrate two design patterns from Tidwell [2]. Note that as design patterns, very specific uses of UI elements are suggested addressing the concerned issue (Figures 2.2 and 2.3).
IT86A-HUMAN COMPUTER INTERACTION
Page | 17 What : “Put two side-by-side panels on the interface. In the first, show a set of items that the user can select at will; in the other, show the content of the selected item.” Use when : You’re presenting a list of objects, categories, or even actions.... You want the user to see the overall structure of the list...
. Physically, the display you work with is large enough to show two separate panels at once.... What : Show each of the application’s pages within a single window. As a user drills down through a menu of options, or into an object’s details, replace the window contents completely with the new page. Use when: Your application consists of many pages or panels of content for the user to navigate through.... For a device with tight space restrictions,... you may have a complexity limit. Your users [also] may not be habitual computer users—having many application windows open at once may confuse them.
IT86A-HUMAN COMPUTER INTERACTION
Page | 19 Figure 2.4 is a collection of guidelines use in applying these input methods to facilitate data entry a. Consistency of data-entry transactions: Similar sequences of actions should be used under all conditions (similar delimiters, abbreviations, etc.) b. Minimal input actions by user: Fewer input actions means greater operator productivity. Make proper use of single-key commands, mouse selection, auto-completion features, and automatic cursor placement rather than typing/pressing in the full alphanumeric input. Selection from a list (e.g., by a menu or by mutually exclusive radio buttons) also reduces possibilities of error. Avoid switching between the keyboard and the mouse. Use default values. c. Minimal memory load on users: When doing data entry, use menus and button choices so that users do not have to remember a lengthy list of codes and complex syntactic command strings. d. Compatibility of data entry with data display: The format of data-entry information should be linked closely to the format of displayed information (i.e., what you see is what you get). e. Clear and effective labelling of buttons and data-entry fields: Use consistent labelling. Distinguish between
IT86A-HUMAN COMPUTER INTERACTION
Page | 20 required and optional data entry. Place labels close to the data-entry field. f. Match and place the sequence of data-entry and selection fields in a natural scanning and hand-movement direction (e.g., top to bottom, left to right). g. Do not place semantically opposing entry/selection options close together: For example, do not place “save” and “undo” buttons close together. Such a placement is likely to produce frequent erroneous input. h. Design of form and dialog boxes: Most visual-display layout guidelines also apply to the design of form and dialog boxes. Note: M ost of these guidelines apply only when using mouse/ keyboard-driven GUI elements. Situations become more complicated when other forms of input are also used, such as touch , gesture , three-dimensional (3-D) selection , and voice. There are separate guidelines for incorporating such input modalities. D. Users with Disability (User Type) The W3C has led the Web Accessibility Initiative and published the Web Content Accessibility Guidelines (WCAG) 2.0 [5]. It explains how to make web content more accessible to people with disabilities. Web content generally refers to the information in a web page or web application, including text, images, forms, sounds, and such (Figure 2.5). The following is a summary of the guidelines: A. Perceivable
IT86A-HUMAN COMPUTER INTERACTION
Page | 22
- Minimize typing and leverage on varied input hardware (e.g., buttons, touch, voice, handwriting recognition, virtual keyboard, etc.)
- Fierce task focus (for less confusion in a highly dense information space)
- Large hit targets (for easy and correct selection and manipulation)
- Efficient use of screen space (with condensed information) Following is a similar set of guidelines available from the Nokia developer’s home page.
- Enable shortcuts (e.g., hot keys) for frequently used functions
- Keep the user informed of his or her actions
- Follow the device’s (vendor’s) interface patterns (positioning of the buttons and menus). Figure 2.7 shows another design pattern put forth by Google® for the Android mobile interface [7]. It concerns the limited and different sizes of a family of handheld devices (i.e., smartphones, padlike devices, mobile Internet devices, netbooks) and more specifically suggests the use of “panels” as a way to achieve usability under such hardware constraints.
IT86A-HUMAN COMPUTER INTERACTION
Page | 23 F. Icons for Apple® iOS and Fonts for Windows® XP (Vendor) Major vendors publish style guides for user-interaction elements to be used for applications running on their platform. For instance, Apple has published a design guideline document [8] that details how application icons should be designed and stylized:
- Try to balance eye appeal and clarity of meaning in your icon so that it is rich and beautiful and clearly conveys the essence of your app’s purpose.
- Investigate how your choice of image and color might be interpreted by people from different cultures.
- Create different sizes of your app icon for different devices. For iPhone and iPod touch, both of these sizes are required: (a) iPhone: 57 × 57 pixels and 114 × 114 pixels (high resolution) and (b) iPad: 72 × 72 pixels and 144 × 144 (high resolution). When iOS displays the app icon on the home screen of a device, it automatically adds the following visual effects: (a) rounded corners, (b) drop shadow, and (c) reflective shine. Another example is the suggested choice of fonts/sizes for Windows XP or applications based on it. These guidelines promote organizational styling and its identity and, ultimately, its consistency in user interfaces.
IT86A-HUMAN COMPUTER INTERACTION
Page | 25 Summary While most of the guidelines—specific or general—seem quite straightforward and are easy to understand, incorporating them in actual design and implementation is very difficult. Many guidelines are still at quite a high level, similar to the HCI principles, and leave the developer wondering how to actually apply them in practice. Another reason is that there are just too many different aspects to consider (especially for a large-scale system). Sometimes, the guidelines can even be in conflict with each other, which requires prioritizing on the part of the designer. For instance, it can be difficult to give contrast to an item for
IT86A-HUMAN COMPUTER INTERACTION
Page | 26 highlighting its importance when one is restricted to using certain colors, e.g., for a corporate identity purpose. Another example might be when attempting to introduce a new interface technology (e.g., touch gestures). While the new interface may have been proven effective in the laboratory, it still may require significant familiarizing and training on the part of the user. It is often the case that external constraints such as monetary and human resources restrict sound HCI practice. There is no straight answer to how such conflicts can be managed and how to incorporate all the requirements simultaneously, particularly under stringent external constraints. One must realize that all designs involve compromises and trade-offs. Experienced designers understand the ultimate benefit and cost for practicing sound HCI design. In spite of the acknowledged aspect of “black art” to HCI design (in which good judgments are made by experienced developers), the HCI guidelines still help greatly to ensure overall usability and performance. Self-Assessment Question: Quiz
- It is the main focus of design guidelines in HCI design.
- It is a HCI design guidelines that is closely related to the principle of understanding the task.
- This refers to method used to find information within a Web Site and it is used primarily to help users to find and access information effectively and efficiently. 4 - 9 Identify Guidelines use in applying input methods to facilitate data Entry:
- It is guidelines use in input methods to facilitate data entry that require the use of menus and button choices so that users do not have to remember a lengthy list of complex code and syntax.
- It is guidelines use in input methods to facilitate data entry that require proper use of single key commands, mouse selection, auto completion features and automatic cursor placement.
- It is guidelines use in input methods to facilitate data entry that require the use of consistent labelling.
