Foundations understanding users and interactions

457 views

Published on

HCI foundations: human computer and interaction

Published in: Engineering
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
457
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Foundations understanding users and interactions

  1. 1. Foundations: Understanding Users and Interactions Preeti Mishra Course Instructor
  2. 2. Types of Users: User Research  Social scientists have long realized that human behaviours are too complex and subject to too many variables to rely solely on quantitative data to understand them.  There are 2 approaches for User Research:  Quantitative  Qualitative
  3. 3. Qualitative Research  Qualitative research helps us understand the domain, context and constraints of a product  It also quickly helps us identify patterns of behaviour among users and potential users of a product much more quickly and easily than would be possible with quantitative approaches.
  4. 4. Qualitative Research  In particular, qualitative research helps us understand:  Existing products, and how they are used  Potential users of new or existing products, and how they currently approach  Activities and problems the new product design hopes to address Technical, business, and environmental contexts-- the domain--of the product to be designed  Vocabulary and other social aspects of the domain in question
  5. 5. Types of Qualitative Research  Stakeholder interviews  Subject matter expert (SME) interviews  User and customer interviews  User observation/ethnographic field studies  Literature review  Product/prototype and competitive audit
  6. 6. Persona
  7. 7. persona  description of an ‘example’ user  not necessarily a real person  use as surrogate user  what would Betty think  details matter  makes her ‘real’
  8. 8. Persona  personas are fictional characters created to represent the different user types that might use a site, brand, or product in a similar way  Personas are useful in considering the goals, desires, and limitations of users in order to help to guide decisions about a service, product or interaction space  A user persona is a representation of the goals and behavior of a hypothesized group of users. 
  9. 9. Persona  In most cases, personas are synthesized from data collected from interviews with users. They are captured in 1–2 page descriptions that include behavior patterns, goals, skills, attitudes, and environment, with a few fictional personal details to make the persona a realistic character  For each product, more than one persona is usually created, but one persona should always be the primary focus for the design.
  10. 10. Advantages  Help team members share a specific, consistent understanding of various audience groups. Data about the groups can be put in a proper context and can be understood and remembered in coherent stories.  Proposed solutions can be guided by how well they meet the needs of individual user personas. Features can be prioritized based on how well they address the needs of one or more personas.  Provide a human "face" so as to focus empathy on the persons represented by the demographics.
  11. 11. Steps to Persona  Finding the Users and Building a Hypothesis  Verification and Finding Patterns  Constructing Pesonas - Body (a photo or a description of how the person looks creates a feeling of the person as a human being, posture and clothing tells a lot about the person) - Psyche (we all have an overall attitude towards life and our surroundings which also influence the way we meet technology e.g. is the persona introvert or extrovert) -
  12. 12. Steps to Persona  Background (we all have a social background, education, upbringing which influence our abilities, attitudes and understanding of the world) - Emotions and attitudes towards technology and the domain designed for - Personal traits. This one is tricky, in fictional writing there is a distinction between flat characters and rounded characters. The flat character is characterized by having only one character trait which is reflected in all actions the character does and creates a highly predictable character close to the stereotype. The flat character is difficult to engage in. The rounded character has more than one character trait, is not predictable and easier to engage in.
  13. 13. Steps to Persona  Creating Scenarios As mentioned earlier, personas are nothing in themselves, it is when a persona enter a scenario they prove to be valuable. A scenario is like a story, it has a main character (the persona) a setting (somewhere the action takes place), it has a goal (what the persona wants to achieve), it has actions that lead to the goal
  14. 14. Our Project Manager For the Rest of the Course! Hopelessly incompetent at management. He does not understand technical isues but always tries to disguise this, usually by using buzzwords that he does not understand himself. Often lacks Ethics…
  15. 15. Work it out  Your company has taken up a project of designing display for a washing machine.  Assume front loading machine, low cost, specially for heavy wash, to be sold in developing and underdeveloped nations
  16. 16. example persona Betty is 37 years old, She has been Warehouse Manager for five years and worked for Simpkins Brothers Engineering for twelve years. She didn’t go to university, but has studied in her evenings for a business diploma. She has two children aged 15 and 7 and does not like to work late. She did part of an introductory in-house computer course some years ago, but it was interrupted when she was promoted and could no longer afford to take the time. Her vision is perfect, but her right-hand movement is slightly restricted following an industrial accident 3 years ago. She is enthusiastic about her work and is happy to delegate responsibility and take suggestions from her staff. However, she does feel threatened by the introduction of yet another new computer system (the third in her time at SBE).
  17. 17. cultural probes  direct observation  sometimes hard  in the home  psychiatric patients, …  probe packs  items to prompt responses  e.g. glass to listen at wall, camera, postcard  given to people to open in their own environment they record what is meaningful to them  used to …  inform interviews, prompt ideas, enculture designers
  18. 18. scenarios stories for design use and reuse
  19. 19. scenarios  stories for design  communicate with others  validate other models  understand dynamics  linearity  time is linear - our lives are linear  but don’t show alternatives
  20. 20. scenarios …  what will users want to do?  step-by-step walkthrough  what can they see (sketches, screen shots)  what do they do (keyboard, mouse etc.)  what are they thinking?  use and reuse throughout design
  21. 21. scenario – movie player Brian would like to see the new film “Moments of Significance” and wants to invite Alison, but he knows she doesn’t like “arty” films. He decides to take a look at it to see if she would like it and so connects to one of the movie sharing networks. He uses his work machine as it has a higher bandwidth connection, but feels a bit guilty. He knows he will be getting an illegal copy of the film, but decides it is OK as he is intending to go to the cinema to watch it. After it downloads to his machine he takes out his new personal movie player. He presses the ‘menu’ button and on the small LCD screen he scrolls using the arrow keys to ‘bluetooth connect’ and presses the select button. On his computer the movie download program now has an icon showing that it has recognised a compatible device and he drags the icon of the film over the icon for the player. On the player the LCD screen says “downloading now”, a percent done indicator and small whirling icon. … … …
  22. 22. also play act …  mock up device  pretend you are doing it  internet-connected swiss army knife … use toothpick as stylus but where is that thumb?
  23. 23. … explore the depths  explore interaction  what happens when  explore cognition  what are the users thinking  explore architecture  what is happening inside
  24. 24. use scenarios to ..  communicate with others  designers, clients, users  validate other models  ‘play’ it against other models  express dynamics  screenshots – appearance  scenario – behaviour
  25. 25. linearity Scenarios – one linear path through system Pros:  life and time are linear  easy to understand (stories and narrative are natural)  concrete (errors less likely) Cons:  no choice, no branches, no special conditions  miss the unintended  So:  use several scenarios  use several methods
  26. 26. Cognitive Psychology
  27. 27. What is psychology  Psychology primarily concerned with human behavior and the mental processes that underlie it.
  28. 28. Cognition  Process by which we became acquanted with things or in other words gain knowledge  Understanding  Remembering  Reasoning  Attending  Creating a new idea  How Humans and Computers interact with one another in terms of knowledge transmitted by them
  29. 29. Cognition  Also described in terms of specific process  Attention  Perception  Memory  Learning  Reading, speaking and listening  Problem solving, planning, reasoning, decision making
  30. 30. Experiential and Reflective  Experiential  We perceive, act and react to events around us effectively  Driving a car, reading  Reflective  Involves thinking , comparing and decision making
  31. 31. What is cognitive psychology  Cognitive psychology sees the individual as a processor of information  In much the same way that a computer takes in information and follows a program to produce an output.  Cognitive psychology compares the human mind to a computer, suggesting that we too are information processors and that it is possible and desirable to study the internal mental / mediational processes that lie between the stimuli (in our environment) and the response we make.
  32. 32. What Goes inside the head Perceiving Thinking Remembering Learning Planning a meal Imaging a trip Painting Writing Composing Understanding others Talking to others Manipulation others Making decisions Solving problems daydreaming
  33. 33. Information Processing …  Lets look at how humans process information  Identify the following:
  34. 34. So what was it ?  Was it :  An elephant ?  A Tiger  An Apple  Ice cream  Ice cream Of course
  35. 35. How come we all Recognized them as Ice Cream  Behind the scenes of Information processing in Humans:  Input Channels Sight, hearing, touch, smell, taste  Encoding information from environment in some kind of internal representation  Internal representation is compared with memorized representations (Comparison)  Concerned with deciding on a response to the encoded stimulus (Response Selection)  Organizing response and necessary action (Response Execution)
  36. 36. Information Processing Analysis  Trace mental operations in the following??  Example Retrieving a friends phone number  Identifying friends Name  Retrieving meaning of words  Understanding the meaning of set of words given in the exercise  Retrieve number from memory  Generate plan and formulate the answer  Recite digits or write them down
  37. 37. Human Information Processing Model
  38. 38. Information Processing Approach There are four major theories of how we humans process information: • Stage approach • Levels-of-processing theory • Parallel distributed processing theory • Connectionistic models
  39. 39. The focus of this model is on how information is stored in memory. The Stage Theory The model is based on the work of Atkinson and Shriffin (1968) and proposes that information is processed and stored in three stages: • Sensory memory • Short-term memory • Long-term memory
  40. 40. The Levels-of-Processing Theory The Levels-of-Processing theory is based on the work of Craik and Lockhart (1972). The major proposition is all stimuli that activate a sensory receptor cell are permanently stored in memory. According to these researchers, the issue is not storage, but retrieval.
  41. 41. Rather than hypothesize that information is processed in stages, Craik and Lockhart believe that retrieval of information is based on the amount of elaboration used as information is processed. The Levels-of-Processing Theory
  42. 42. The parallel-distributed processing model states that information is processed simultaneously by several different parts of the memory system, rather than sequentially as hypothesized by Atkinson-Shiffrin. Parallel Distributed Processing Theory The stage-theory model discussed in this course differs slightly from that first proposed by Atkinson and Shriffin in order to incorporate this principle.
  43. 43. Connectionistic Theory The connectionistic model proposed by Rumelhart and McClelland (1986) extends the parallel-distributed processing model. This model emphasizes the fact that information is stored in multiple locations throughout the brain in the form of networks of connections.
  44. 44. Connectionistic Theory It is also consistent with the levels-of-processing approach in that the more connections to a single idea or concept (i.e., the more extensively elaboration is used), the more likely it is to be remembered. It is one of the dominant forms of current research in cognitive psychology and is consistent with the most recent brain research.
  45. 45. The Information Processing Approach While there is much disagreement among the various schools of thought related to how human beings process information, there are a few general principles about which almost all researchers agree:
  46. 46. The Information Processing Approach Limited capacity assumption The amount of information that can be actively processed by the system at a given point in time is constrained in some very important ways. Bottlenecks, or restrictions in the flow and processing of information, occur at very specific points.
  47. 47. The Information Processing Approach Control mechanism Required to oversee the encoding, transformation, processing, storage, retrieval and utilization of information. Not all of the processing capacity of the system is available; an executive function that oversees this process will use up some of this capability. When one is learning a new task or is confronted with a new environment, the executive function requires more processing power than when one is doing a routine task or is in a familiar environment.
  48. 48. The Information Processing Approach Two-way flow of information As we try to make sense of the world around us, we constantly use information that we • gather through the senses (often referred to as bottom-up processing) As we try to make sense of the world around us, we constantly use information that we have stored in memory (often called top-down processing)
  49. 49. The Information Processing Approach Genetic preparation A human infant is more likely to look at a human face than any other stimulus. Language development is similar in all human infants. The human organism has been genetically prepared to process and organize information in specific ways.
  50. 50. Human perception, attention, memory
  51. 51. Visual perception  Humans capable of obtaining information from displays varying considerably in size and other features  but not uniformly across the spectrum nor at all speeds
  52. 52. Visual perception  How long did it take to recognize the Dalmation?  Only after you knew what you were looking for?  After recognizing the Dalmation, what else could you see?  Interpretation of the scene is possible because we know what Dalmations, trees, etc. look like -- active construction of the image.
  53. 53. Example:  You are traveling down a road you never been on before, up ahead you see an octagonal red sign with white letters near an intersection.  The sign has a vine growing on it, and all you can read is "ST_P.“ These letters alone are meaningless, however taken in its context and using knowledge from past experiences you infer that it is a stop sign.  This is example of constructive perception because it required intelligence and thought to combine sensory information, a red octagonal sign with "ST_P" in white letters at an intersection, and knowledge from past experiences, stop signs are red octagonal signs with "STOP" in white letters placed at an
  54. 54. Effect of context on perception  When presented with ambiguous stimuli, our knowledge of the world helps us to make sense of it -- same with ambiguous info on computer screen  Constructive process also involves decomposing images into recognizable entities: figure and background
  55. 55. Figure and Ground  White horses  Black horses?
  56. 56. Figure and Ground  Escher art often plays with figure/ground
  57. 57. Camouflage  Figure so similar to ground that it tends to disappear
  58. 58. Mental Models and User Models
  59. 59. What is a Mental Model  It was first mentioned by Craik in his 1943 book, The Nature of Explanation. (Craik, 1943)  a mental model is an internal scale-model representation of an external reality  a mental model is a set of beliefs about how a system works. Humans interact with systems based on these beliefs. (Norman, 1988)  A mental model contains minimal information. It is unstable and subject to change
  60. 60. Usability  Usability is a quality attribute that assesses how easy user interfaces are to use.  The word "usability" also refers to methods for improving ease-of-use during the design process  The standard further defines the components of the usability definition:  Effectiveness:  Efficiency:  Satisfaction:  Learnability  Retainability  efficiency of use  user satisfaction of a product
  61. 61.  Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?  Efficiency: Once users have learned the design, how quickly can they perform tasks?  Memorability: When users return to the design after a period of not using it, how easily can they re-establish proficiency?  Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?  Satisfaction: How pleasant is it to use the design?
  62. 62. Why are Mental Models Important to Usability?  Usability is strongly tied to the extent to which a user's mental model matches and predicts the action of a system.  However, sometimes the technical capabilities of a system have no resemblance to objects in the world.  HCI practitioners have produced a large body of guidelines and heuristics used to design systems that are easier for people to understand and use. (Nielsen,1993)  Through various design methods, we can build cues into a system that help users create new, accurate mental models. 
  63. 63. Designing for usability  For usability follow these three design principles:  Early focus on users and tasks  Empirical measurement  Iterative design
  64. 64. Early focus on users and tasks  The design team should be user driven and in direct contact with potential users.  Several evaluation methods:  personas,  cognitive modeling,  inspection,  inquiry,  Prototyping  testing methods may contribute to understanding potential users.
  65. 65. Empirical measurement  The emphasis of empirical measurement is on measurement, both informal and formal, which can be carried out through a variety of evaluation methods:  Test the system early on, and test the system on real users using behavioural measurements.  This includes testing the system for both learnability and usability.  It is important in this stage to use quantitative usability specifications such as time and errors to complete tasks and number of users to test, as well as examine performance and attitudes of the users testing the system.  Finally, "reviewing or demonstrating" a system before the user tests it can result in misleading results.
  66. 66. Iterative design  Iterative design is a design methodology based on a cyclic process of:  prototyping,  testing,  analyzing, and  refining a product or process.  Based on the results of testing the most recent iteration of a design, changes and refinements are made.  This process is intended to ultimately improve the quality and functionality of a design.
  67. 67. Iterative design  The key requirements for Iterative Design are:  identification of required changes,  an ability to make changes,  and a willingness to make changes.  When a problem is encountered, there is no set method to determine the correct solution. Rather, there are empirical methods that can be used during system development or after the system is delivered
  68. 68. Interaction
  69. 69. Introduction  As stated in the last lecture, HCI is neither just the study of humans nor just the study of technology it is the bridge between the two.  Over here we will consider `the bridge', the interaction between the human and the computer.
  70. 70. Interaction basics  Communication between user and computer is called INTERACTION  Translation between user and computer may fail so the use of models of interaction came into picture  Model of interaction can help us to understand exactly what is going on in the interaction and identify difficulties
  71. 71. Terms of Interaction  Goals  Domain  Task  Task Analysis  Computation Aspects  Task Language
  72. 72. Terms of Interaction domain – the area of work under study e.g. graphic design goal – what you want to achieve e.g. create a solid red triangle task – how you go about doing it – ultimately in terms of operations or actions e.g. … select fill tool, click over triangle
  73. 73. Terms of Interaction  Users want to achieve goals in some domain.  Operations in the domain are tasks.  Task analysis investigates the problem in terms of domain, goals, intentions, tasks  The system and the user have different languages  The core language describes computation aspects of the domain  The task language describes psychological aspects of domain
  74. 74. Models of Interaction
  75. 75. Why develop a model for interaction?  Why develop a model for interaction?  To help us to understand an interactive dialogue.  To identify likely difficulties.  To provide a framework to compare different interaction styles.
  76. 76. Stages of Action  What makes something difficult to do?  – What are you trying to do?  – What ways can you achieve it?  – How do you execute one of those ways?  – What happened as a result?
  77. 77. Interactive Cycle  Interactive cycle is divided in two major phases:  Execution  Evaluation  These are further divided into seven stages:
  78. 78. Interaction Model 1: Norman’s Model (Already visited in Unit 1)
  79. 79. Stages of execution cycle (Already visited in Unit 1)  Norman's execution-evaluation cycle most closely matches our intuitive view.  establishing the goal { task language; imprecise  forming the intention { specfic  specifying the action sequence  executing the action  perceiving the system state  interpreting the system state  evaluating the system state with respect to the goals and intentions
  80. 80. Interface Problems  Since the human and computer do not recognise the same concepts (speak the same language) interfaces cause problems. These problems can be described in terms of:  gulf of execution { difference between user determined action formulation and the actions allowed by system  gulf of evaluation { difference between physical presentation of system state and user expectation
  81. 81. What are Gulfs?  The distance between the mental representations of the person and the physical components and states of the environment  Illustrates difficulty in deriving relationships between mental intentions and interpretations and the physical actions and states
  82. 82. Bridging the Gulf  These gulfs can be `bridged':  users can change to suit the interface  designers can design knowing the user  users can change their interpretation of system responses  designers can change output characteristics
  83. 83. Human error  Difference between :  Slips(better GUI) and mistakes(understanding of system)
  84. 84. Human error - slips and mistakes slip understand system and goal correct formulation of action incorrect action mistake may not even have right goal! Fixing things? slip – better interface design mistake – better understanding of system
  85. 85. Interaction Model 2: Abowd & Beale model
  86. 86. Abowd & Beale model  Norman's model concentrates on the user's view of interaction.  Abowd & Beale model User and System communication through the interface.
  87. 87. Using Abowd & Beale’s model user intentions  translated into actions at the interface  translated into alterations of system state  reflected in the output display  interpreted by the user general framework for understanding interaction  not restricted to electronic computer systems  identifies all major components involved in interaction  allows comparative assessment of systems  an abstraction
  88. 88. Interaction problems: Language Translation Difficulties  User - Input: (articulating a goal) How easy is it to translate a goal requirement into the input language? e.g. {Difficult: bank of light switches, stovetop element controls { Easy: virtual reality system  Input – System Can all system stimuli be articulated by user language? { Consider remote control (or front panel) with limited functions.
  89. 89. Interaction problems: Language Translation Difficulties  System - Output (execution & evaluation) Can system output device provide a complete view of system state? e.g.{ Consider document editing with limited view of data  Output - User (interpretation by user) Is information presented to user in a way that is easy to interpret. e.g.{ Difficult to read unmarked analog clock. { Difficult to observe result of hierarchical system eg: copying using command line interface
  90. 90. Interactivity & Interaction Context  Interactivity is the defining feature of an interactive system  In older systems, order of interaction is pre-emptive. Newer systems still have some of these features.  Of course all interaction occurs in some wider social and organisational context People are usually involved and there are issues of desire to impress,competition and fear of failure.  Motivation will reduce if systems do not match requirements but new technology may increase motivation if systems are well designed and integrated with the user's work.
  91. 91. Anthropometrics Ergonomics
  92. 92. Anthropometrics v/s Ergonomics  What is ANTHROPOMETRICS ? The study of the human body and its movement. The study of the human body and its movement, often involving  research into measurements relating to people.  It also involves collecting statistics or measurements relevant to the human body, called Anthropometric Data.
  93. 93. Anthropometrics v/s Ergonomics  What is ERGONOMICS ? The study of people and their relationship with the environment around them. When anthropometric data (measurements / statistics) is applied to a product, e.g. measurements of the hand are used to design the shape and size of a handle, this is ergonomics.
  94. 94. Thus..  Anthropometrics is the comparative study of human body measurements and properties.  Ergonomics is the science of making the work environment safer and more comfortable for workers using design and anthropometric data.
  95. 95. Question??  How is anthropometric data used to produce an ergonomically designed hair dryer?
  96. 96. Solution  Anthropometric data (measurements) are used to determine the shape of handle and distance to be held from head.  Designed for average size hand.  The length of lead is determined from anthropometric data (length of average arms and average height of users).  The hair dryer is now ergonomically designed.
  97. 97. Ergonomics: the arrangement of controls  Controls can be and laid out in various ways:  functional : task related controls grouped together  sequential :layout in order of use  Frequency : common controls easy to access  Other factors  Controls should be easy to reach  Controls should not be so close to each other that they hamper usage  { `Dangerous' controls should be hard to reach -prevents accidents
  98. 98. Ergonomics: the arrangement of controls  Control layout is important:  { Safety critical systems: poor layout ) disaster!  { Routine applications: poor layout ) inefficiency, user dissatisfaction,  poor mental model building etc..
  99. 99. Ergonomics: the physical environment & health issues  Unsatisfactory working conditions can at best lead to stress and dissatisfaction and at worst harm workers' health. Some factors to consider:  physical position : should be comfortable  temperature : should not be extreme  lighting : should be low-glare & sufficient  noise : should not be excessive; high levels hamper perception  time : don't expect extended use of an interactive system
  100. 100. Ergonomics: Colour  Colour is a powerful cue, but it is easy to misuse.  It should not be applied just because it is available.  Topics (consider these topics for further study on colors):  Colour Vision & Perception  Principles & Guidelines
  101. 101. Few Examples..  Avoid the simultaneous display of highly saturated, spectrally extreme colors.  Explanation: Frequent refocusing causes visual fatigue. Don't use reds with blues, or yellows with purples, unless one or more are desaturated.  Example: Reds/oranges/yellows/greens can be viewed without refocusing, but the combination of cyans/blues with reds is fatiguing.
  102. 102. Few Examples..  Use redundant cues to augment color coding.  Explanation: To compensate for variation among users, color memory, and other perceptual problems, vary shape, font, etc. in addition to color.  Example: To represent different types of objects in diagrams, show one as dark green circles, another as yellow squares, etc. Refer to the support document on color usage is provided on BBLMS for further study
  103. 103. Interaction Styles
  104. 104.  Computers are used to proceed information and the information is needed by people  people and computers have to interact.  Different computer applications (programs) follow different styles of the interaction,
  105. 105. Example…  If we want to replace a word by other word how would this action be performed in two different environments:
  106. 106. In Unix based NIX standard stream text editor "sed"
  107. 107. MS Word for Windows:
  108. 108. We will proceed as..  Recognise six main interaction styles.  Determine the interaction style(s) used by a computer application.  Describe pro's and con's of any interaction style for a specific application and for a specified user group.  Evaluate the interface of a given application regarding its usability.  Suggest improvements of application's interaction style, based on a set of guidelines.
  109. 109. Major Interaction Styles 1. Command line. The user types in commands for the program, usually one at a time. The program executes the commands and returns feedback, if necessary. MS-DOS and UNIX use this style. 2. Question and answer. The application asks questions and when the user provide by answers all necessary data, the application gives the results. Sometimes these are called "walktrough and use" applications. 3. Menus. Possible user actions are listed on the screen and the user can select one of them. Gopher is an example and most MS Windows applications also include menus.
  110. 110. Major Interaction Styles 4. Form filing. The user type the data in specific fields, similar to the fields on a paper fill-in form. Many office and database applications use this style. 5. Graphical direct manipulation. The objects used in application are graphically represented on the screen and the user can manipulate them directly by pointing, clicking, dragging, typing, etc. Most windowing systems, or GUI's (Graphical User Interface) are based on graphical direct manipulation.
  111. 111. Command Line Interface
  112. 112. Introduction  When a command line interaction is used, the user types in commands for the application  usually one at a time, the application executes them, if possible, and gives some feedback to the user.  In this case, the interaction becomes just a dialogue, in which the human is the active side.
  113. 113. Example  "sed" editor is a typical program with a command-line interface.  MS-DOS and UNIX operating systems use this style
  114. 114. Advantages:  Cheap. Easy to develop and suitable for slow machines and communication lines.  Flexible. Suitable for experienced users
  115. 115. Disadvantages  Low visibility. Difficult for novice and casual users  Difficult error corrections.  Text-only data representation.
  116. 116. Guidelines for good Command Line Interface  1. Offer maximum flexibility  Conduct task analysis to determine the necessary commands  Provide a way to combine and execute sets of commands.  2. Facilitate command remembering  Use meaningful, descriptive names.  Follow "de facto" standards.  Use options for small modifications in command's behaviour.  If abbreviation are necessary, make them consistent when possible.  Use consistent format of the command line.  Provide on-line help  3. Facilitate error correction.  Provide a way to edit and replay last command.  Give feedback on both successful and unsuccessful commands
  117. 117. Graphical Direct Manipulation
  118. 118. Introduction  The direct manipulations applications represent the data as graphical object on the screen.  These objects can be manipulated directly by a mouse or another pointing devices, thus performing operations on the application's data.  Usually these applications are implemented as window systems.
  119. 119. Example  The system responds immediatelly to the user actions by changing appearance of the objects - for example recycle bin becomes full, when a document is put into it.
  120. 120. Guidelines  1. Regarding the screen design  Use relatively less arbitrary metaphors to respresent objects  Display only objects which can be manipulated at the given time  Represent the state of the object too, possibly by color coding.  Keep consistency by putting common objects at the same place on all screens.  2. Regarding the interaction design  Make interactions as direct as possible by using selecting, dragging, etc.  Make operations reversible when possible.  Issue a "warning" message before any destructive operation.  Always display clearly marked object for exiting program  Provide keyboard shortcuts for most often used commands.  3. Regarding the user support  Provide both context-sensitive and object-sensitive help.
  121. 121. Advantages:  Easy to understand and execute  Flexible. Suitable for experienced users  Meaningful icons and graphics for non computer user  High visibility
  122. 122. Disadvantages  Costly  Heavy Interface
  123. 123. Menus and Navigation
  124. 124. Introduction  Set of options on screen for choosing the action. Use for selecting actions or among options for data entry.  Pull-down menus  Pop-up menus  Hierarchical menus  Design issues :  Use standard menus for standard actions (Help, open, close, save, save as .. , print, Undo, Copy, Cut, Paste, Clear)  Organize menu items in logical order (alphabetic , size, grouping)  Changing (adaptive menus) can be difficult (the content of the invisible menu list can change according to actions) - for example files that you have used recently (e.g. word).  Menu items can be activated or inactivated according to possible options in the current situation.
  125. 125. Example
  126. 126. Advantages  shortens learning -reduces keystrokes -structures decision making -use of dialog-management tools -easy support of error handling -can guide through task
  127. 127. Disadvantages  -presents danger of many menus -may slow frequent/expert users -consumes screen space -requires rapid display rate
  128. 128. Form Fill
  129. 129. Introduction  Form on screen with a set of fields - check-boxes - buttons - menus, for data entry of action selections. Typically select a set of actions or enter a set of selections and press GO (or SUBMIT or ENTER ...) Two basic approaches Form is filled and then the data is sent to the application for actions  Every field entry is sent to the application - checking possible before every item is entered
  130. 130. Introduction  Design issues  Layout  Sizes of fields  Types of fields  Help text (for the form - for each field)  automatic advancement (from field to field)  Cancel (what does it mean in the situation)  Corrections (one field - all fields)  Corresponding paper-form (for example order entry)  Pre-filled fields - initial values
  131. 131. Example
  132. 132. Advantages  simplifies data entry -requires modest training -gives convenient assistance -permits form-management tools
  133. 133. Disadvantages  -consumes screen space -may require more computer skills-
  134. 134. Natural Language
  135. 135. Introduction  Speech is seen as the ultimate interface  Problems  – “Time flies like an arrow”  – “Life is a nice beach”  – World knowledge not always appropriate  Current solution  – Unambiguous sub-set  • Cellphones
  136. 136. Example
  137. 137. Advantages  relieves burden of learning syntax -spoken NL allows busy hands
  138. 138. Disadvantages  requires clarification dialog -may require more keystrokes -may not show context -is unpredictable due to ambiguity -spoken harmed by noise
  139. 139. Few more…
  140. 140. Three dimensional interfaces  virtual reality  ‘ordinary’ window systems  highlighting  visual affordance  indiscriminate use just confusing!  3D workspaces  use for extra virtual space  light and occlusion give depth  distance effects flat buttons … … or sculptured click me!
  141. 141. Spreadsheets  first spreadsheet VISICALC, followed by Lotus 1-2-3 MS Excel most common today  sophisticated variation of form-filling.  grid of cells contain a value or a formula  formula can involve values of other cells e.g. sum of all cells in this column  user can enter and alter data spreadsheet maintains consistency
  142. 142. WIMP Interface The most common interaction style in PCs
  143. 143. WIMP in PCs  Most common interaction style on PCs  Windows  Icons  Menus  Pointers / Mouse  Elements of WIMP:  windows, icons, menus, pointers  buttons, toolbars, palettes, dialog boxes
  144. 144.  default style for majority of interactive computer systems, especially PCs and desktop machines
  145. 145. Windows  Areas of the screen that behave as if they were independent  can contain text or graphics  can be moved or resized  can overlap and obscure each other, or can be laid out next to one another (tiled)  scrollbars  allow the user to move the contents of the window up and down or from side to side  title bars  describe the name of the window
  146. 146. Icons  small picture or image  represents some object in the interface  often a window or action  windows can be closed down (iconised)  small representation fi many accessible windows  icons can be many and various  highly stylized  realistic representations.
  147. 147. Pointers  important component  WIMP style relies on pointing and selecting things  uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts  wide variety of graphical images
  148. 148. Menus  Choice of operations or services offered on the screen  Required option selected with pointer problem – take a lot of screen space solution – pop-up: menu appears when needed File Edit Options Typewriter Screen Times Font
  149. 149. Kinds of Menus  Menu Bar at top of screen (normally), menu drags down  pull-down menu - mouse hold and drag down menu  drop-down menu - mouse click reveals menu  fall-down menus - mouse just moves over bar!  Contextual menu appears where you are  pop-up menus - actions for selected object  pie menus - arranged in a circle  easier to select item (larger target area)  quicker (same distance to any option) … but not widely used!
  150. 150. Menus extras  Cascading menus  hierarchical menu structure  menu selection opens new menu  and so in ad infinitum  Keyboard accelerators  key combinations - same effect as menu item  two kinds  active when menu open – usually first letter  active when menu closed – usually Ctrl + letter usually different !!!
  151. 151. Menus design issues  which kind to use  what to include in menus at all  words to use (action or description)  how to group items  choice of keyboard accelerators
  152. 152. Buttons  individual and isolated regions within a display that can be selected to invoke an action  Special kinds  radio buttons – set of mutually exclusive choices  check boxes – set of non-exclusive choices
  153. 153. Toolbars  long lines of icons … … but what do they do?  fast access to common actions  often customizable:  choose which toolbars to see  choose what options are on it
  154. 154. Palettes and tear-off menus  Problem menu not there when you want it  Solution palettes – little windows of actions  shown/hidden via menu option e.g. available shapes in drawing package tear-off and pin-up menus  menu ‘tears off’ to become palette
  155. 155. Dialogue boxes  information windows that pop up to inform of an important event or request information. e.g: when saving a file, a dialogue box is displayed to allow the user to specify the filename and location. Once the file is saved, the box disappears.
  156. 156. Limitations of WIMP GUI  Imposes sequential “ping-pong” dialog model: mouse and keyboard input, 2D graphics (sound?) output  deterministic and discrete  difficult to handle simultaneous input, even two mice  pure WIMP doesn’t use other senses: hearing, touch, ...  >50% of our neurons in visual cortex, but as humans it is very difficult for us to communicate without speech, sound...  Not usable for immersive VR (e.g., headmounted display) where you are “in” the scene: no keyboard, mouse…
  157. 157. Impedance-matching Limitations of WIMP GUI Limited Vision (Flat, 2D) No Speech No Gestures One Hand Tied Behind Back Limited Audio Limited Tactile
  158. 158. 1st Really successful WIMP implementation  Specifications Apple Macintosh 128K (1984-85)  CPU:MC68000CPU speed:8 Mhz  FPU:None  RAM:128k Dram not expandable  ROM:64k  Serial Ports:2  Floppy:1 3.5" 400k  Monitor:9" 512x384 square pixels built-in B/W  Power:60 Watts  Weight: 16.5 lbs.Dimensions: 13.6" H x 9.6" W x 10.9" D  System Software:Mac OS 1.0  Production:January 1984 to October 1985  Cost:$2,495
  159. 159. Elements of Dialog Design
  160. 160. think about dialogue what does it mean in UI design? Minister: do you name take this woman … Man: I do Minister: do you name take this man … Woman: I do Minister: I now pronounce you man and wife
  161. 161. Overview Dialog is the syntactic level of human-computer interaction (like a script, except users and computer have more choices).  Notations for dialog description  diagrammatic  textual  Dialog is linked  semantics  presentation  Benefits of formal descriptions Hi
  162. 162. What is dialog?  Much human dialog unstructured - grammar rules stop at sentence level (and sometimes before).  Examples of structured form of human conversation: script for play and marriage service.  Dialog with a computer is relatively structured and constrained (unlike in Star Trek).
  163. 163. What is dialog? w.r.to HCI  Structure of the conversation between the user and computer system.  Languages have 3 levels  lexical  syntactic <-- most user interfaces  semantic  Describe language at syntactic level, but…must be linked to semantics for implementation.
  164. 164. Dialog Design Notations  Notations for human-computer dialogs have roots in other branches of computing.  We do NOT use a programming language  Separation of dialog makes analysis easier  If separate from convoluted logic and calculations  Can change interface style  Design dialog prior to programming
  165. 165. Diagrammatic Notations  Heavily used  At a glance we can see structure of dialog  Problems with extensive or complex dialog structures
  166. 166. Textual Dialog Notations  Grammars  Production rules
  167. 167. Dialog Semantics  Purpose of dialog description  communicate with other designers  tool for thought early in design  For semantics we  leave reader to infer  annotate dialog notations with intended meaning of actions  formalize  for a contract or prototype
  168. 168. Dialog Analysis and Design : State Properties  Reachability  Can we get to desired state easily from current state  Basic check  More - “infinite loops”  Reversibility (undo)  Go back to a previous state  Dangerous states  Example: reformatting hard drive  Make them difficult, ask for confirmation, required user action to be inconsistent
  169. 169. Summary  Dialog can be difficult to analyze if we do not have separate description  Two categories: diagrammatic and textual  Properties of dialogs  action properties, state properties, presentation
  170. 170. Types of Systems/Interactions
  171. 171. End of Unit 2 Foundation: Understanding Users and Interface
  172. 172. Course Outcome Mapping  This unit of the syllabus helped in partially achievement of :  Course Outcome 1  Corse Outcome 2

×