1. Interaction Styles Interface Widgets

2. What are Interaction Styles?  A Collection of interface objects and associated techniques from which an interaction designer can choose when designing the user interaction component of an interface.  This includes the look (appearance) and feel (behavior) of interaction objects and interactions between interaction objects from the user’s view.

3. What are Interface Objects?  WIMP  Windows, Icons, Menus and Pointers – Forms, Menus, Boxes, etc.  Desktop Metaphor – Windows interface is a desktop. – Papers that are manipulated by the user.

4. Two Camps of Interaction Styles?  Direct Manipulation – User directly manipulate interface. – User has most control.  Agent Interface – Agent or computer has most control. – We will discuss this later.

5. Interface Widgets Windows

6.  A screen object that provides an area for presentation of, and interaction with, other interaction objects.  Place holder for interface objects.  Windows are the Paper in the Desktop Metaphor.

7. Windows  Primary, or active, window – Window with focus or the working window. – It is usually on top.  Secondary, or inactive, windows – Windows in the background. – Available, but not active.

8. Windows  Microsoft Windows – Active window determined by mouse click.  X-Windows – Mouse determines active window.

10. Windows: Design Guides  Too many windows. – Window management. – Use multiple windows when it is necessary. – Users get disoriented.  Coordinate color to identify function. – Information window is blue, test window is green.

11. Interface Widgets Menus

12.  A list of items from which one or more selections are made by the user.  Types of menus: 1. Radio Buttons 2. Pop Up 3. Pull Down 4. List Box 5. Cascading 6. Palette 7. Dynamic

13. Radio Buttons  Choices are exhaustive and mutually exclusive.

14. Pop Up  Menus that appear in different places on the screen base upon the location of the mouse or cursor. Pop Up menu in Microsoft Windows Environment

15. Pull Down  Menus found at the top of the screen, usually, their title is always visible. Pop Down menu in Netscape Navigator

16. List Box  Looks like a field with the selected option visible or contains a visible list of options. COMP 6620 COMP 7620 COMP 7930 COMP 8620

17. Cascading  Also called walking menus, behaves like a sequence of pull down menus. Cascading menu in Netscape Navigator

18. Palette  Iconic menus Palette menu in Adobe Photoshop

19. Dynamic  Menus where the choices are runtime dependent. – Choices may be gathered from a database based upon user access.

20. Menus: Design Guides 1.Use meaningful groupings of menu choices. 2.Use meaningful ordering of menu choices. – Alphabetical – Preference 3.Use brief, but descriptive titles. 4.Allow shortcuts (this is built in for most)

21. Interface Widgets Forms

22.  A screen containing labeled fields that are to be filled in by the user.  Form Fields 1. Text 2. Menus

23. Text  An open box that allows the user to enter data.  Numeric versus Alphanumeric versus Alphabetic  Default Values  Required versus Optional Values  Dependent Values

24. Text Name: Career Goal:

25. Menus  A list of items from which the user selects.  Numeric versus Alphanumeric versus Alphabetic  Default Values  Required versus Optional Values  Dependent Values

26. Forms: Design Guides 1.Layout, Layout... Layout. 2.Existing paper forms do not convert directly into electronic forms, in most cases. 3.Use visual cues for form fields, i.e. focus. 4.Labels must be consistent and meaningful. 5.Use logical navigation between fields, ordering. 6.Support editing and error correction. 7.Use default values where necessary. 8.Given instructions for mandatory fields.

27. Interface Widgets Boxes

28.  Small windows that are used for messages, text entry, commands and user control.

29. Entry Box  Small window that displays a message to the user and accepts input.

30. Dialogue Box  Composite interaction box that can contain other interaction objects.  Two types of dialogue boxes 1. Modal 2. Modeless

31. Modal Dialogue Box  Preemptive box  Supports sequential dialogue  User must respond before moving on

33. Modeless Dialogue Box  Nonpreemptive box  Does not force the user to respond before moving on

34. Netscape help box is a modeless dialogue box.

35. Boxes: Design Guides 1.Use brief but meaningful messages. 2.Use logical grouping and ordering of objects. 3.Use visual cues to separate groups. 4.Layout, Layout … Layout. 5.Use defaults. 6.Boxes should appear and disappear properly.

36. Interface Widgets  Support object oriented programming. – Software Engineering  Must have your interface toolbox.