Human Computer Interactions Lecture 1.pptx
- 1. Unit 1: Human Computer Interactions Shavin Gopee Multimedia Designer / lecturer / Educator
- 2. Introduction to Human Computer Interactions Human–computer interaction (HCI), alternatively man–machine interaction (MMI) or computer– human interaction (CHI) is the study of interaction between people (users) and computers. With today's technology and tools, and our motivation to create really effective and usable interfaces and screens. DEFINITION • "Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them."
- 3. Introduction to Human Computer Interactions - Goals GOALS • A basic goal of HCI is – to improve the interactions between users and computers – By making computers more usable and receptive to the user's needs. • A long term goal of HCI is – to design systems that minimize the barrier between the human's cognitive model of what they want to accomplish and the computer's understanding of the user's task
- 4. DEFINING THE USER INTERFACE User interface, design is a subset of a field of study called human-computer interaction (HCI). Human-computer interaction is the study, planning, and design of how people and computers work together so that a person's needs are satisfied in the most effective way. HCI designers must consider a variety of factors: • What people want and expect, physical limitations and abilities people possess, • How information processing systems work, • What people find enjoyable and attractive. • Technical characteristics and limitations of the computer hardware and software must also be considered. • The user interface is to the part of a computer and its software that people can see, hear, touch, talk to, or otherwise understand or direct. • The user interface has essentially two components: input and output. • Input is how a person communicates his / her needs to the computer.
- 5. Input components & Output Components Some common input components are the keyboard, mouse, trackball, one's finger, and one's voice. Output is how the computer conveys the results of its computations and requirements to the user. Today, the most common computer output mechanism is the display screen, followed by mechanisms that take advantage of a person's auditory capabilities: voice and sound
- 6. Input components & Output Components • The use of the human senses of smell and touch output in interface design still remain largely unexplored. • Proper interface design will provide a mix of well-designed input and output mechanisms that satisfy the user's needs, capabilities, and limitations in the most effective way possible. • The best interface is one that it not noticed, one that permits the user to focus on the information and task at hand, not the mechanisms used to present the information and perform the task.
- 7. Interacting with Computers To understand human–computer interaction one needs to understand computers! what goes in and out devices, paper, sensors, etc. what can it do? memory, processing, networks
- 8. A ‘typical’ computer system screen, or monitor, on which there are windows keyboard mouse/tablets variations desktop laptop PDA The devices dictate the styles of interaction that the system supports If we use different devices, then the interface will support a different style of interaction
- 9. How many computers … in your house? PC TV, VCR, DVD, HiFi, cable/satellite TV microwave, cooker, washing machine central heating security system can you think of more? in your pockets? PDA phone, camera smart card, card with magnetic strip? electronic car key USB memory try your pockets and bags
- 10. THE GRAPHICAL USER INTERFACE A user interface is a collection of techniques and mechanisms to interact with something. In a graphical interface the primary interaction mechanism is a pointing device of some kind. • This device is the electronic equivalent to the human hand. What the user interacts with is a collection of elements referred to as objects. • They can be seen, heard, touched, or otherwise perceived. • Objects are always visible to the user and are used to perform tasks. • They are interacted with as entities independent of all other objects. • People perform operations, called actions, on objects. The operations include accessing and modifying objects by pointing, selecting, and manipulating. All objects have standard resulting behaviors.
- 11. THE POPULARITY OF GRAPHICS A graphical screen bore scant resemblance to its earlier text-based colleagues. • Older text-based screen possessed as one dimensional • Graphic screens assumed a three-dimensional look. • Controls appeared to rise above the screen and move when activated. • Information could appear, and disappear, as needed. • Text could be replaced by graphical images called icons. • These icons could represent objects or actions • selection fields such as radio buttons, check boxes, list boxes, and palettes coexisted with the reliable old text entry field • More sophisticated text entry fields with attached or dropdown menus of. • Objects and actions were selected through use of pointing mechanisms. • Increased computer power. • User's actions to be reacted to quickly, dynamically, and meaningfully.
- 12. THE POPULARITY OF GRAPHICS • WIMP interface: windows, icons, menus, and pointers. • Graphic presentation is much more effective than other presentation methods. • Properly used, it reduces the requirement for perceptual and mental information recoding and reorganization, and also reduces the memory loads. • It permits faster information transfer between computers and people by permitting more visual comparisons of amounts, trends, or relationships; more compact representation of information; • Graphics also can add appeal or charm to the interface and permit greater customization to create a unique corporate or organization style.
- 13. CHARACTERISTICS OF THE GRAPHICAL USER INTERFACE A graphical system possesses a set of defining concepts. Included are sophisticated visual Presentation, pick-and click interaction, a restricted set of interface options, visualization, object orientation, extensive use of a person's recognition memory, and concurrent performance of functions. Sophisticated Visual Presentation: • Visual presentation is the visual aspect of the interface. It is what people see on the screen. • The sophistication of a graphical system permits displaying lines, including drawings and icons. • It also permits the displaying of a variety of character fonts, including different sizes and styles. • The display of 16 million or more colors is possible on some screens. Graphics also permit animation and the presentation of photograph and motion video
- 15. THE WEB USER INTERFACE The expansion of the World Wide Web since the early 1990s has been truly amazing. Once simply a communication medium for scientists and researchers, its many and pervasive tentacles have spread deeply into businesses, organizations, and homes around the world. Web interface design is essentially the design of navigation and the presentation of information. It is about content, not data. Proper interface design is largely a matter of properly balancing the structure and relationships of menus, content, and other linked documents or graphics. The design goal is to build a hierarchy of menus and pages that feels natural, is well structured, is easy to use, and is truthful. The Web is a navigation environment where people move between pages of information, not an application environment. It is also a graphically rich environment.
- 16. THE WEB USER INTERFACE Web interface design is difficult for a number of reasons. First, its underlying design language was HTML. HTML is limited in objects and interaction styles and did not provide a means for presenting information in the most effective way for people. Hence a series of coding systems were created to make the ultimate goal of a Web that feels natural, is well structured, and is easy to use will reach fruition. https://www.w3schools.com/
- 17. PRINCIPLES of creating good GUI Aesthetically Pleasing Provide visual appeal by following these presentation and graphic design principles: • Provide meaningful contrast between screen elements. • Create groupings. • Align screen elements and groups. • Provide three-dimensional representation. • Use color and graphics effectively and simply. Clarity The interface should be visually, conceptually, and linguistically clear, including • Visual elements • Functions • Metaphors • Words and Text Compatibility Provide compatibility with the following: - The user - The task and job - The Product - Adopt the User’s Perspective Configurability Permit easy personalization, configuration, and reconfiguration of settings. - Enhances a sense of control - Encourages an active role in understanding Comprehensibility A system should be easily learned and understood: A user should know the following: - What to look at - What to do - When to do it - Where to do it - Why to do it - How to do it The flow of actions, responses, visual presentations, and information should be in a sensible order that is easy to recollect and place in context. Consistency A system should look, act, and operate the same throughout. Similar components should: - Have a similar look. - Have similar uses. - Operate similarly. • The same action should always yield the same result • The function of elements should not change. • The position of standard elements should not change.
- 18. PRINCIPLES of creating good GUI Flexibility A system must be sensitive to the differing needs of its users, enabling a level and type of performance based upon: - Each user's knowledge and skills. - Each user's experience. - Each user's personal preference. - Each user's habits. - The conditions at that moment. Efficiency Minimize eye and hand movements, and other control actions. - Transitions between various system controls should flow easily and freely. - Navigation paths should be as short as possible. - Eye movement through a screen should be obvious and sequential. - Anticipate the user's wants and needs whenever possible. Control The user must control the interaction. - Actions should result from explicit user requests. - Actions should be performed quickly. - Actions should be capable of interruption or termination. - The user should never be interrupted for errors • The context maintained must be from the perspective of the user. • The means to achieve goals should be flexible and compatible with the user's skills, experiences, habits, and preferences. • Avoid modes since they constrain the actions available to the user. • Permit the user to customize aspects of the interface, while always providing a Proper set of defaults
- 19. PRINCIPLES of creating good GUI Forgiveness • Tolerate and forgive common and unavoidable human errors. • Prevent errors from occurring whenever possible. • Protect against possible catastrophic errors. • When an error does occur, provide constructive messages. Predictability • The user should be able to anticipate the natural progression of each task. o Provide distinct and recognizable screen elements. o Provide dues to the result of an action to be performed. • All expectations should be fulfilled uniformly and completely. Recovery A system should permit: - Commands or actions to be abolished or reversed. - Immediate return to a certain point if difficulties arise. Ensure that users never lose their work as a result of: - An error on their part. - Hardware, software, or communication problems Familiarity • Employ familiar concepts and use a language that is familiar to the user. • Keep the interface natural, mimicking the user's behavior patterns. • Use real-world metaphors.
- 20. PRINCIPLES of creating good GUI Transparency Permit the user to focus on the task or job, without concern for the mechanics of the interface. - Workings and reminders of workings inside the computer should be invisible to the user. Simplicity Provide as simple an interface as possible. Five ways to provide simplicity: - Use progressive disclosure, hiding things until they are needed - Present common and necessary functions first - Prominently feature important functions - Hide more sophisticated and less frequently used functions. - Provide defaults. - Minimize screen alignment points. - Make common actions simple at the expense of uncommon actions being made harder. - Provide uniformity and consistency. Responsiveness The system must rapidly respond to the user's requests provide immediate Acknowledgment for all user actions: - Visual. - Textual - Auditory
- 21. Why people have trouble with computers? Extensive technical knowledge but little behavioral training. • With its extensive graphical capabilities. • Poorly designed interfaces. • What makes a system difficult to use in the eyes of its user? • Use of jargon • Non-obvious design • Fine distinctions • Disparity in problem-solving strategies • an "error-preventing" strategy • Design inconsistency
- 22. Why people have trouble with computers? Typical psychological responses to poor design are: • Confusion: Detail overwhelms the perceived structure. Meaningful patterns are difficult to ascertain, and the conceptual model or underlying framework cannot be understood or established. • Annoyance: Roadblocks that prevent a task being completed, or a need from being satisfied, promptly and efficiently lead to annoyance. Inconsistencies in design slow computer reaction times, difficulties in quickly finding information, out dated information, and visual screen distractions are a few of the many things that may annoy users. • Frustration: An overabundance of annoyances, an inability to easily convey one's intentions to the computer, or an inability to finish a task or satisfy a need can cause frustration. Frustration is heightened if an unexpected computer response cannot be undone or if what really took place cannot be determined: Inflexible and unforgiving systems are a major source of frustration.