1 / 60

SY DE 542

SY DE 542. Basic Design of Info Req’ts The Language of Interface Design Jan. 24, 2005 R. Chow Email: chow@mie.utoronto.ca. TA. Munira Jessa Tel: xtn 4904 Email: mnjessa@engmail Office: E2 1303N (AIDL) Will grade Checkpoints # 3,4,5; one of the two reports

randi
Download Presentation

SY DE 542

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SY DE 542 Basic Design of Info Req’ts The Language of Interface Design Jan. 24, 2005 R. Chow Email: chow@mie.utoronto.ca

  2. TA • Munira Jessa • Tel: xtn 4904 • Email: mnjessa@engmail • Office: E2 1303N (AIDL) • Will grade Checkpoints # 3,4,5; one of the two reports • Between lectures, contact Munira FIRST for any course-related questions

  3. Case Study: Apollo 13 • April 1970 • NASA’s 3rd mission to carry humans to lunar surface • Oxygen tank explosion • Oxygen stores depleted within 3 hours; loss of water, electricity, propulsion system • Mission aborted but crew returned safely

  4. Apollo 13 • Mission controllers took 54 minutes before realizing that oxygen tank had exploded, and command module was dying … • Why?? • Look at snapshots of actual Mission Control screens and try to locate relevant data values … (Woods, Patterson, Corban, in press)

  5. Apollo 13 Discussion • Why was the explosion hard to spot? • No History / Trend information • Previous value • Increase / decrease / constant • Rate of Increase / decrease • No Limits / Critical Values information • Maximum allowable value • Normal value

  6. Context • A background for reading data • Turns data into information (with meaning) • Examples: • UV rating of 6 • Test score of 27 • Output temperature of 30 deg C (DURESS)

  7. Single Variable Constraints • Start with list of variables for each AH level • For each variable, ask: • What are the Limits? Min. / Max. / Both? • What is High vs. Low? • What is Good vs. Bad? • What is Safe vs. Unsafe?

  8. Context (cont’d) • Besides high vs. low, normal vs. abnormal • Point where action can be taken • Point where action will be taken (e.g., by automation) • Point where action must be taken

  9. Design Implications • Scale Ranges • Alarm Limits • Important Thresholds

  10. Redesigning Apollo 13 Displays

  11. Redesigning (cont’d)

  12. Redesigning (cont’d)

  13. Apollo 13 Discussion (cont’d) • Why else was explosion hard to spot? • Data overload • Many data values • Need for simultaneous monitoring • Need for continuous monitoring • Critical events may be of short duration

  14. Salience • What “stands out” in an interface • Consider what user needs first, second, third … • Direct attention accordingly

  15. Designing for Salience • Colour • Large size • Centred • Moving • Flashing

  16. Salience (cont’d) • What is more salient? • Red or Grey? • Neon Green or Dark Green? • High-pitch or Low-pitch Sound?

  17. Salience: Example 1

  18. Salience: Example 2

  19. Salience (cont’d) • Salience is relational • Each new form added changes the salience of all others • Direct attention, not monopolize • Salience as a need, not as a rule

  20. Levels of Visual Information Representation • Graphic Atoms • Graphic Fragments • Graphic Forms • Views • Workspaces (Woods, 1997)

  21. Graphic Atom • Smallest unit • A letter, digit, line, colour block • Design decisions: • colour, • size, • shape, • length, • thickness, • angle, etc. 3 A

  22. Graphic Fragments • Words, numbers, bars, scale, labels • Design decisions: • position, • content of numbers, words • relation to near fragments, (proportion, salience) • forms of reference temperature

  23. Forms of Reference • Different kinds of mappings between: • Visual Form • what something looks like • Representational Form • how it conveys meaning about the world to a user

  24. Visual and Representational Form • Visual Token (an atom or a fragment, etc.): • has a visual form & a representational form • Visual Token: • Word: e.g., Temperature • Visual Form: • Black, Arial font, lines and curves • Representational Form: • a variable, a measure of heat

  25. Forms of Reference • 3 kinds • 1) Propositional • 2) Iconic • 3) Analogical • Describe how the visual token relates between the user and the world

  26. Propositional Form • Relation between the token and the world is arbitrary • Token tells the observer about the world • Typically words, numbers, some graphics • Relies on stored knowledge such as language, numbers • Gives current state but little more “tells” arbitrary Observer Token World

  27. Iconic Forms recognizes • Depends on quality of visual form to look like the world • Token should evoke recognition • Relies on observer experience with the world • Typical “icons” looks like Observer Token World

  28. Analogical Forms captures natural constraint processes constraint • May or may not look like world • Typically graphs on contextual backgrounds Observer Token World

  29. Examples • Stop light propositional

  30. Airline departure and arrival signs iconic

  31. Stop Sign propositional STOP

  32. Stove Labels “REAR” “FRONT” propositional iconic

  33. Mixed Forms of Reference • Windows Recycle Bin • Recycle Bin • darkens/lightens • fills/empties • iconic • propositional • iconic

  34. Map • Propositional • Propositional • Iconic • Analogical • Words • Symbols • Landmark Images • Spacing and Scale

  35. Forms of Reference: Summary • Propositional and Iconic usually give 1 piece of information • Analogical usually gives many pieces • Representation is not right or wrong but changes the work of the observer

  36. Work involved in processing representations • Analogical perceptual • Propositional memory • Iconic recognition memory • (Propositional and Iconic both rely to some degree on knowledge in the head. Analogical leaves knowledge in the world.)

  37. Graphical Forms • Graphs, Indicators • Convey meaning • Design decisions: • Analog or digital forms • Context • Salience

  38. Analog vs. Digital • Digital: • uses propositional reference • set of numerical strings that describe the referent e.g. 100.91 • observer reads the information

  39. Digital Forms • often only current state is available • very difficult to display history of the referent • past or future states must be • remembered • calculated • displayed separately • memory and mental workload for user

  40. Design Requirements • Label/Identifier • The Value itself • Precision (# of significant digits) • Showing context • Normal / Abnormal? • Max / Min? • Change?

  41. Showing Context with Digital Forms Change the colour of the numbers for meaning e.g. red for alarms 123.45 123.45 Arrows to show rate and direction of change 123.45 Ratios to show performance relative to a target value 123.45 150.55 123.45 C Units also add context

  42. Analog • uses analogical reference • data is represented by a relationship between visual tokens on the screen • representation is not as direct as digital • requires the interpretation of a position in space

  43. Analog • Relationship is typically between: • an indicator, and • a reference scale • Reference scale = Frame of reference

  44. Aspects of Analog Forms • Movement of the indicator is in space and relative to landmarks • Landmarks are ticks, labels etc. • Movement depends on the type and grain of the scale • There are multiple possible frames of reference

  45. Frames of Reference 1-dimensional frame of reference 2-dimensional frame of reference indicator indicator scale scales

More Related