HCI Guidelines PDF

IT1906 HCI Guidelines Guideline Categories HCI principles are general and applicable to wide areas and aspects of human-computer interacti...

IT1906 HCI Guidelines Guideline Categories HCI principles are general and applicable to wide areas and aspects of human-computer interaction design, while guidelines tend to be more specific. Guidelines are a set of information intended to advise people on how something should be done or what something should be. In human-computer interaction, guidelines are straightforward and easy to understand but difficult to incorporate in actual design and implementation. One reason why guidelines are difficult to incorporate to an actual design and implementation is the numerous aspects to be considered, especially for enterprise systems. There are times when guidelines can even conflict with each other, which will require prioritizing on the part of the designer and developer. HCI guidelines are a set of recommended information used to direct HCI design and development. These guidelines can be divided into criteria and category. Even HCI guidelines are more detailed than HCI principles, there are no specific instructions on how to incorporate guidelines in HCI design. With this, Jennifer Tidwell compiled user interface design patterns in the form of guidelines (refer to Table 1). Jennifer Tidwell is a writer and a consultant in interaction design, information architecture, and pre-design analysis. She has designed and built user interfaces for companies such as Google and MathWorks. CRITERIA CATEGORIES EXAMPLE General HCI Design Display layout, information structure, soliciting Combining colors in designing a input, output visualization, design process and website, size of an icon practice, user experience, general aesthetic User Type Age/Generation, disability/accessibility, Kids, visually challenged, baby occupation, consumer group, culture, gender boomers, students, athletes, elders Platform/System Mobile/handheld, large display/virtual reality, Smartphones, desktop, kiosk, Setup public installation, operating system/network, embedded OS, cloud-based, MP3 embedded, desktop player, e-book Vendor/Organization Private, public, design style/identity NASA, iOS, Android, Windows XP Interface Style/ Windows, icon, mouse, and pointer (WIMP); Voice, gesture, multitouch, Modality Non-WIMP; 3D; Multimodal multimodal, menu driven, GUI/widgets Task/Operational Location, time, noise/lighting, bodily Office, outdoor, home, Context constraints automobile, subway, hands-free, classroom Applications Game, media, e-commerce, design/editing, Interactive interface of Facebook, social network service interface of Adobe Photoshop Table 1. Examples of criteria/category for HCI guidelines Source: Human-Computer Interaction, 2015. p. 14 It is not possible to list and explain all the guidelines that exist in all areas and discipline. Despite the differences in specifications, most guidelines are shared and can be understood in terms of higher level principles. Examples of HCI Guidelines Visual Display Layout (General HCI Design) Display layout, or page layout, is one of the focus of design guidelines. This concerns the organization of relevant information, both content and user interface elements, in one (1) visible screen or a scrollable page. 02 Handout 1 *Property of STI  [email protected] Page 1 of 3  IT1906 The display layout should generally be organized, manageable, and appealing. Here is a list of HCI guidelines for a Web page layout put forth by the U.S. Department of Health and Human Services for the U.S. government: Avoid cluttered display. Optimize display density. Place important items consistently. Align items on a page. Place important items at top center. Set appropriate page lengths. Structure for easy comparison. Choose appropriate line lengths. Establish level of importance. Use frames when functions must remain accessible. Taking User Input (General HCI Design) Crafty designs for taking user input, such as raw information and system commands, can improve the overall performance, especially time and accuracy, for high interactive systems. A high interactive system usually has a modern interface, which also pertains to a graphical user interface. Graphical User Interface (GUI) is an interface through which a user interacts with electronic devices such as computers, mobile devices, and other appliances. This interface includes elements like button, text box, menu, forms, icons, and other visual indicator representations to display information and related user controls. These are the HCI guidelines for facilitating data entry: Consistency of data-entry actions Design of forms and dialog boxes Minimal input action by the user Do not place semantically opposing entry or Minimal memory load on users selection options close together. Compatibility of data entry with data Match and place the sequence of data-entry display and selection fields in natural scanning and Clear and effective labeling of buttons hand-movement directions. and data-entry fields User with Disability (User Type) The World Wide Web Consortium (W3C), an international community where organization staff and the public work together to develop Web standards, published Web Content Accessibility Guidelines (WCAG) 2.1 in 2018. This set of guidelines covers a wide range of recommendations for making Web content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, and limited movement. Here is a summary of the guidelines: Perceivable – Information and user interface components must be presentable in ways users can perceive. o Provide a text alternative for non-text context. o Provide alternatives for time-based media. o Create content that can be presented in different ways without losing information or structure. o Make it easier for the user to see and hear content. Operable – User interface components and navigation must be operable. o Make all functionality available from a keyboard. o Give users enough time to read and use content. o Do not design content in a way that is known to cause seizure or physical reactions. o Provide ways to help users navigate, find content, and determine where they are. o Make it easier for users to operate functionality through various inputs beyond the keyboard. 02 Handout 1 *Property of STI  [email protected] Page 2 of 3  IT1906 Understandable – Information and the operation of user interface must be understandable. o Make text content readable and understandable. o Make Web pages appear and operate in predictable ways. o Help users avoid and correct mistakes. Robust – Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies. o Maximize compatibility with current and future user agents, including assistive technologies. Mobile Device (Platform Type) Smartphones are widely used nowadays. Usability and other user experience of mobile devices and applications have become more important. These are the specific HCI guidelines summarized by Tidwell: Fast status information, especially regarding the network connection and services Minimize typing and control on mixed input like buttons, touch, voice, handwriting recognition, virtual keyboard, etc Intense task focus to lessen confusion in a highly dense information space Large hit targets for an easy and correct selection and manipulation Efficient use of screen space. References: About W3C. (n.d.). In World Wide Web Consortium. Retrieved from https://www.w3.org/Consortium/ on May 14, 2019 Kim, G. (2015). Human-Computer Interaction Fundamentals and Practice. USA: CRC Press. Meaning of Guideline (n.d.). In Cambridge Dictionary. Retrieved from https://dictionary.cambridge.org/us/dictionary/english/guideline on May 10, 2019 Tidwell, J. (n.d.). Designing interfaces (2nd ed.). O’Reilly Media: https://designinginterfaces.com/about-the-book/ World Wide Web Consortium. (2018, June 5). Web Content Accessibility Guidelines (WCAG) 2.1. Retrieved from https://www.w3.org/TR/WCAG21/ on May 14, 2019 02 Handout 1 *Property of STI  [email protected] Page 3 of 3