Interface Design Workshop Shad Valley Waterloo, 2003 (Day 2 of 4) Presenter: Danny Ho Advanced Interface Design Lab University of Waterloo.

Slides:



Advertisements
Similar presentations
User Interfaces 4 BTECH: IT WIKI PAGE:
Advertisements

Information Representation Need to break representations into component forms, for analysis and for design Establish a common language for discussion Few.
1 Human-Computer Interaction Screen Layout and Colour.
Displays Chapter 8. Key Components in Display Design.
Chapter 3: Understanding users. What goes on in the mind?
Annoy Your Users Less Session 202 Philip Wolfe, Lead Developer Farm Credit Services of America.
Designing Auditory Displays for Global Usability Breaking the Sound Barrier: Designing Auditory Displays for Global Usability Robert Tannen Logicon Technical.
Indycar Telemetry Data Acquisition Interface Danny Ho March 25, 2002 University of Waterloo Systems Design SD 542.
E-learning: Instructional Design Visual Design. Instructional Design The design of teaching and learning. How do you set up, structure and design the.
Alford Academy Business Education and Computing1 Advanced Higher Computing Based on Heriot-Watt University Scholar Materials GUI – advantages and disadvantages.
Perception and Attention. Information Processing Model  models human thought like its a computer.
James Tam What HCI (and this course) all about 1 1 These notes are based roughly upon the optional reading a Taxonomy of HCI optional reading
Chapter 3 Understanding users (adapted from the text’s materials)
A (Uncolorful) Lecture on Color for UI’s Use of Color in UI Design (not ready for distribution) laura leventhal.
©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15Slide 1 User interface design l Designing effective interfaces for software systems.
CS 5764 Information Visualization Dr. Chris North.
Cognitive and physiological design drivers Judy Kay CHAI: Computer human adapted interaction research group School of Information Technologies.
User interface design Designing effective interfaces for software systems Objectives To suggest some general design principles for user interface design.
1 Information Input and Processing Information Theory: Some times called cognitive psychology, cognitive engineering, and engineering psychology. Information.
1 User Interface Design CIS 375 Bruce R. Maxim UM-Dearborn.
The Psychology of Color
Human-centered design Human factors & interactive digital media design.
1. Human – the end-user of a program – the others in the organization Computer – the machine the program runs on – often split between clients & servers.
William H. Bowers – Designing Look and Feel Cooper 19.
Psychology of usability 1 User interfaces Jaana Holvikivi Metropolia.
Psychology of usability
1 Chapter 8: Displays System Display (the represented system) Mental model Senses Attention Perception.
Image and interface Pertti Saariluoma University of Helsinki.
Attention as a Limited Capacity Resource
Understanding Movement Preparation
KEY KNOWLEDGEKEY SKILLS  The principles and processes of learning as applied to the cognitive, associative and autonomous stages, including the role feedback.
User Interface Overview Jeff Offutt SWE 432 Design and Implementation of Software for the Web.
Text Lecture 2 Schwartz.  The problem for the designer is to ensure all visual queries can be effectively and rapidly served.  Semantically meaningful.
Principles of Good Screen Design
Metaphors for Learning  Learning involves strengthening correct responses and weakening incorrect responses.  Learning involves adding new information.
Usability Testing October 17, Overview Heuristic Evaluation and Usability Testing (25 min) Client Relationships – Lisa Lowthers (30 min) Review.
1 SY DE 542 Context and Salience (revisited) Design Phase 2 : Single Variable Constraints Jan. 31, 2005 R. Chow
VERITAS Confidential Graphic Design Shashank Deshpande VERITAS Software July, 2003.
CSCD 487/587 Human Computer Interface Winter 2013 Lecture 4 Human Cognition.
A-Level Computing#BristolMet Session Objectives#15 MUST define the term user interface SHOULD describe the characteristics of different UIs and suggest.
Corritore, MCIT Working Connections, June Introduction to Visual Design Dr. Cindy Corritore Creighton University ITM 734 Fall 2005.
The Role of HCI In IS Curriculum Ping Zhang School of Information Studies Syracuse University AMCIS’03 Panel.
Human-computer interaction: users, tasks & designs User modelling in user-centred system design (UCSD) Use with Human Computer Interaction by Serengul.
Comp 15 - Usability and Human Factors
School of something FACULTY OF OTHER Facing Complexity Using AAC in Human User Interface Design Lisa-Dionne Morris School of Mechanical Engineering
Understanding Users Cognition & Cognitive Frameworks
Human-computer Interaction Source: P.M.Heathcote A Level ICT Chapter 61.
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Group Discussion Design Elements Continued Readings in HCI, pp Monday.
Week 2-1: Human Information Processing
©2001 Southern Illinois University, Edwardsville All rights reserved. CS 321 Human-Computer Interaction Today Design Elements Readings in HCI, pp
3. THE LANGUAGE OF INTERFACE DESIGN. Design decisions at different levels of visual form LevelExample Pixel. Graphic atomsA, 3 _ graphic fragmentsWord,
Colors in Floral Design
Erin Ryan, Amy Brown, Joe Abernathy, Tara Ramsey AET 541/E-learning March 28, 2011 Garth Beerman.
Capabilities of Humans. Gestalt More than the sum of its parts.
Human Factors An Overview
Social – End of topic evaluation. Topic 2 – Cognitive Psychology Lesson one – Introduction to the approach and topic.
Ergonomics/Human Integrated Systems (Project 02)
Lesson 5 - Colour Schemes and Use in Displays
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
Chapter 6 : User interface design
Human Computer Interaction
Color Theory.
SY DE 542 Basic Design of Info Req’ts The Language of Interface Design
Chapter 7 Psychology: Memory.
Psychology of usability
CEN3722 Human Computer Interaction Displays
Attention as a Limited Capacity Resource
Fundamentals of Human Computer Interaction (HCI)
How consumers see the world and themselves
(the represented system)
Presentation transcript:

Interface Design Workshop Shad Valley Waterloo, 2003 (Day 2 of 4) Presenter: Danny Ho Advanced Interface Design Lab University of Waterloo

Today’s Topics Cognitive Ergonomics –Salience –Alarms Memory & Attention Display Representations –Information Representation (decomposition) –Forms of Reference (propositional, iconic, analogical) –Analog vs. digital

Cognitive Ergonomics SOME BASIC DEFINITIONS Psychology = the study of human behaviour Cognitive Psychology = the study of cognitive processes Engineering Psychology = Investigates (i.e. through research), the limits and capabilities of (human) information processing in the context of work and systems design

Cognitive Ergonomics (cont’d) Cognitive Ergonomics - "Neck-up" Ergonomics = The application of principles developed through engineering psychology research to the design and evaluation of cognitive tasks and systems development Physical Ergonomics -- "Neck-down" Ergonomics = The application of principles developed through kinesiology research to the design and evaluation of physical tasks Human Performance = For the purposes of this course refers to the performance on cognitive-based tasks (In reality almost all tasks have cognitive and physical components) Psychomotor Behaviour = The study of muscular activity resulting from mental processes

Brain vs. Mind WHERE DOES INFORMATION PROCESSING OCCUR? Mind = The capacity for thought, where thought is the integrative activity of the brain (mind is the electrical-chemical activity of the brain which produces conscious or higher level thought). Brain = The part of the central nervous system enclosed in the cranium of man and other vertebrates, consisting of a soft, convoluted mass of gray and white matter and serving to control and co-ordinate the mental and physical actions of the body.

Salience The degree to which a visual form stands out in relation to the other visible visual forms Salience is relational Each new form added changes the salience of all others

Salience example 1

Salience example 2

Salience Effective use of salience is about controlling what people see Perceptual Segmentation: what people see as a “unit” Salience: what “stands out” over other things in the display Foreground, background, alarms

Salience Perception is based on noting a difference Difference from a background, or from what was there before Salience is relative - adding another piece of information to the screen changes the salience of all the other pieces of information

Salience Is a function of movement size intensity hue saturation

General Principles Movement more salient than things that don’t move large and dull is not salient (background) large and bright is extremely salient (critical things) very bright colours (yellow) don’t have to be large to be noticeable

Approach Categorise objects as background or foreground Prioritise Foreground should be reserved for changing and dynamic information Start with low salient colours (like grey) and build up, layering

Design Errors with Salience Background layers that dominate foreground Fancy bright 3D graphics of things that never change Over use of colour to separate categories Under use of grey, overuse of colour, hues A static item is only informative once

Perceptual Segmentation Can allow large amounts of data to be processed easily People use relationships and organisation to process information into meaningful chunks Designer must group and organise the information

Reducing by Adding Organising often requires adding information to a screen x x vs. x x

Emergent Features

Old fashioned HCI Argues that you should keep things simple use only 7 colours, etc. Current approach is for more complex but coherent views

Alarms People tend to concentrate on 1 task at a time Alarms are for alerting Too many alarms and people will ignore (think car alarms!) annoying and operators will turn off Balance between alerting and annoying

Design Approaches Visual alarming –colour - yellow –salience - brightness, size –flashing - movement Auditory alarms –tones –buzzers

Alarms should... Be meaningful indicate the degree of the problem by varying its alerting characteristics allow the operator to figure out the problem if multiple alarms, only critical alarms should be presented (prioritisation)

Examples of Alarms/Salience Stove Display –Different foods cook for different times, design a display that best shows food preparation, heating, and well-doneness Coffee Maker –Best coffee is brewed at 85 degrees, +/- 10 degrees, and for maximum 8 min. Design a display that provides suitable feedback to the user. Breadmaker –Bread will crisp at 500 deg, be underbaked at 300 deg, and best duration for baking is 50 min. Design a display that warns of overbaked bread. Croissant Oven –Croissants are picky. At 350 deg for 5 min/100 grams of cookie mix, design a display that helps set the best cookie baking time