Lecture 03 - Norman Fundamental Principles of Interaction PDF

Norman’s Fundamental Principles of Interaction You will soon know: Design is difficult Many so-called human errors are actually errors in design Designers help things work by following fundamental principles of interaction Norman.. Don Norman who? Author of “The Design of E...

Norman’s Fundamental Principles of Interaction You will soon know: Design is difficult Many so-called human errors are actually errors in design Designers help things work by following fundamental principles of interaction Norman.. Don Norman who? Author of “The Design of Everyday Things” (1988) A cognitive scientist and engineer who has pioneered many ideas surrounding user-centered design Critiques and examines many everyday items as examples of problematic designs Identify design principles: a framework for discussing and thinking about everyday interactions Why we need to understand the Fundamental Principles of Interaction?  To prevent... The scientific study of mental disorder. Psychopathology is a term which refers to either the study of mental illness or mental distress or the manifestation of behaviours. ….mental distress as a result of design failure. Psychopathology in Our Daily Life Coffeepot for masochists. The French artist Jacques Carelman in his series of books Catalogue d’objets introuvables (Catalog of unfindable objects) provides delightful examples of everyday things that are deliberately unworkable, outrageous, or otherwise ill- formed.) Psychopathology in Our Daily Life To push or to pull? Psychopathology in Our Daily Life To pull or to push? Psychopathology in User Interface (UI) Umm, thanks for the warning, Inane dialogue but what should I do? boxes What happens when you cancel a cancelled operation? Psychopathology in User Interface (UI) Inane dialogue Do I have any choice in this? boxes To save or not to save? Psychopathology in User Interface (UI) More examples.. Inane dialogue boxes Fundamental Principles of Interaction Affordances Visibility constraints Mapping Feedback Transfer effects Cultural standards Conceptual models *This lecture materials are based on the article “The Psychopathology of Everyday Things” by Norman (1988) Affordances Perceived an actual properties of an object that give clues to its operation. Appearance indicates how the object should be used. Example: ✓chair for sitting ✓table for placing things on ✓buttons for pushing Complex things may need explaining, but simple things should not - when simple things need pictures, labels, instructions, then design has failed Affordances (example) Fundamental Principles of Interaction Affordances Visibility contraints Mapping Feedback Transfer effects Cultural standards Conceptual models Visibility constraints Limitations of the actions possible perceived from object’s appearance Provides people with a range of usage possibilities Which emergency door has better visible constraints? Visibility constraints in UI (example) Visibility constraints in UI (example) The arrows provides visible constraints Inform permissible operations for this restaurant app Visibility constraints Visibility constraints in UI Fundamental Principles of Interaction Affordances Visibility Mapping Feedback Transfer effects Cultural standards Conceptual models Mappings Relationships between controls and their effect.  Mappings in UI (example) Image Editing Tools When “crop” icon is clicked, the cursor turns into rectangle tool ready to crop the image. Mappings in UI (example) iOS Control Centre Fundamental Principles of Interaction Affordances Visibility Mapping Feedback Transfer effects Cultural standards Conceptual models Feedback The thing that happens right after an action is assumed by people to be caused by that action Feedback must be: o Immediate: Less than 10 seconds. o Informative: Not too little, yet not too much. o Need to be prioritized: Less important feedback maybe unobtrusive, but important (emergency) feedback need to capture the user attention. Feedback (Good example) Searching for destination in Waze app (left) and searching for hashtags in Instagram app (right) provide almost immediate feedback Feedback (Bad example) Effects visible only after Exec button is pressed OK does nothing! Awkward to find appropriate color level Fundamental Principles of Interaction Affordances Visibility Mapping Feedback Transfer effects Cultural standards Conceptual models Transfer effects People transfer their learning / expectations of similar objects to the current objects - Positive transfer :previous learning's also apply to new situation - Negative transfer :previous learning's conflict with the new situation Transfer effects - Negative transfer :previous learning's conflict with the new situation Transfer effects Positive transfer :previous learning's also apply to new situation Transfer effects Positive transfer :previous learning's also apply to new situation Fundamental Principles of Interaction Affordances Visibility constraints Mapping Feedback Transfer effects Cultural standards Conceptual models Cultural standards Populations learn idioms that work in a certain way - Red means danger - Green means safe Cultural standards (Bad example) Is the toilet door is locked or unlocked? (Sign in front of a toilet door on a train) Fundamental Principles of Interaction Affordances Visibility Mapping Feedback Transfer effects Cultural standards Conceptual models Conceptual models People have “mental models” of how things work This model allows people to mentally simulate operation of device Would this design of a bicycle work? Our mental models of how bicycles work can “simulate” this to know that it won’t work Conceptual models Designer could not talk directly to the user on how the system would work (conceptual model of the system). Designer communicated their conceptual model to user through system image. IF the system image (user interfaces) does not make the designers’ model clear and consistent, user will develop wrong conceptual model Conceptual models (Good example) Bookshelf iBook app interface Conceptual models (Bad example) FREE apps require credit card credentials to download. Summary Many so-called human errors are actually errors in design don’t blame the user! Designers help things work by providing a good conceptual model Affordances Feedback Visibility constraints Mapping Transfer effects Cultural standards Design to accommodate individual differences Decide on the range of users