Dialog Design Windows Icons Mice and Pointers WIMP

Dialog Design: Windows, Icons, Mice and Pointers (WIMP) This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Jim Foley, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Comments directed to foley@cc. gatech. edu are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: June 2004.

Dialog Styles 1. Command languages 2. GUI, aka WIMP - Window, Icon, Menu, Pointer 3. Direct manipulation 4. Speech/Natural language 5. Gesture, pen UI Design - Georgia Tech 2

Agenda • Review of dialogue design issues • WIMP § Advantages, disadvantages § Design guidelines UI Design - Georgia Tech 3

General Issues in Choosing Dialogue Style • Gulf of evaluation / gulf of execution § Initial training required § Learning time to become proficient § Speed of use • Generality/flexibility/power • Locus of control - user or computer • Special skills - typing • Platform(s) § Screen space required § Computational resources required UI Design - Georgia Tech 4

GUI/WIMP • WIMP – Windows, Icons, Menus, Pointers • Predominant desktop interface paradigm (along with some direct manipulation) • Advantages: § Make a list individually or in a group UI Design - Georgia Tech 5

WIMP – In the Beginning • Doug Englebart’s Mouse UI Design - Georgia Tech 6

WIMP – In the Beginning • Xerox Alto -1973 § 606 x 808 monochrome display § Keyboard § 3 -button mouse § Optional 5 -key chord • Software § Draw - - - - § Bravo WYSIWYG text editor § Markup paint program UI Design - Georgia Tech 7

WIMP – in the Beginning • Smalltalk (Alan Kay) § Windows on Alto UI Design - Georgia Tech 8

Xerox Star - 1981 • Star § $15 k cost § Closed architecture § Lacking key functionality (spreadsheet) • Failure!! UI Design - Georgia Tech 9

Apple Lisa - 1982 • Based on ideas of Star • More personal rather than office tool § Still $$$ - $10 K to $12 K • Failure!! UI Design - Georgia Tech 10

Apple Macintosh - 1984 • • • Aggressive pricing - $2500 Not trailblazer, smart copier Good interface guidelines 3 rd party applications High quality graphics and laser printer • Success!!! § If at first you don’t succeed… UI Design - Georgia Tech 11

Windows Pros and Cons • Why are windows good (at least sometimes)? Are there problems with windows? Make pro/con list § Focus just on windows, not on menus and icons etc UI Design - Georgia Tech 12

Keep on Listing Pros and Cons • When done - go on… UI Design - Georgia Tech 13

Window Pros • Facilitate multi-tasking, which many people do. • Maps well onto overlapping sheets of paper on our desks, so is a familiar concept. • Makes computer usage easier for most of us. UI Design - Georgia Tech 14

Window Cons • Can make concentrating on a single task hard (that incoming mail…. ) • An extension of the cluttered desk : ) • May be unnecessary for dedicated-use environments that run a single application UI Design - Georgia Tech 15

Menus - Many Different Types • Pop-up (appearing, contextual) • Pie • Hierarchical/cascading • Radio buttons? ? • Pull-down UI Design - Georgia Tech 16

Pie Menus From Sim City UI Design - Georgia Tech 17

Hierarchical UI Design - Georgia Tech 18

Pop-up • Aka appearing or contextual § ‘Appear’ based on context cursor in – Type of object – Type of window • A hierarchical pop-up – over text object UI Design - Georgia Tech 19

Menu Pros and Cons • What is good about menus? • What is bad about menus? UI Design - Georgia Tech 20

Menu Pros & Cons • Pros § Simple to use – point and click – no typing § No memorization required – Recognition, not recall – Memorization helpful – which pull-down do I want? § Can constrain actions (limited set of choices + grayed out items) • Cons § Less direct user control - have to find correct menu / menu item § Not so extensible § May be slower than keyboarding for experienced users – Fix with accelerators UI Design - Georgia Tech 21

Menu Item Ordering • What rules do Mac, Windows, MS Office etc, use? • Make a list if you are by yourself or in a small group • Or suggest some in class UI Design - Georgia Tech 22

Menu Organization • • Create groups of logically related items Ensure that items are non-overlapping Keep wording concise, understandable Should include all commands? § ‘Hidden’ commands only for power users UI Design - Georgia Tech 23

Menu Item Order Strategies • • • Natural order (if exists) Time – e. g. Breakfast, Lunch, Dinner Numeric ordering – e. g. Point sizes for font Categorical - with visual separation Frequency of use Logical order of use Alphabetical - especially for long lists • Don’t change dynamically! • UI Design - Georgia Tech 24

A Good Menu Example • Logical grouping • Visual separation of groups • Disabled items “grayed out” • Shortcuts shown • … indicates leads to dialogue • Go forth and find some bad examples! UI Design - Georgia Tech 25

Key GUI/WIMP Ideas • • Window Pros and Cons Types of Menus Menu Pros and Cons Guidelines for ordering items in menus UI Design - Georgia Tech 26

The End Continue for supplemental material --> UI Design - Georgia Tech 27

Menu Order Experiment • Experiment with 64 common English words • Alphabetical binary tree all the way to flat 64 item menu • Performance improved as search tree flattened out § 9 sec. for binary, 4 sec for 8 x 8, about 3 sec. for flat categorized § 64 words at random worse than 64 categorized words • Snowberry et al, Computer Display Menus, Ergonomics 1983, 26(7), pp 699 -712 UI Design - Georgia Tech 28

A Bad Menu Example • Travel web page links: § § § Flight page 3 Best Itineraries Flights & Prices Timetables Fares • Which do you choose for reservations? UI Design - Georgia Tech 29

Example: Ya. ST UI Design - Georgia Tech 30