Interface Components

1. Interface Components Dewan Tanvir Ahmed, PhD University of Ottawa dahmed@site.uottawa.ca

2. Chapter 10 Interface Components • The WIMP Interface • Windows • Icons • Menus • Pointers • Other Components • Lists • Controls • Display Components • Text Entry Components • Tool Containers Dewan Tanvir Ahmed

3. The WIMP Interface • Contemporary GUIs are sometimes called “WIMP” interfaces because they comprise • Windows • Icons • Menus • Pointers Dewan Tanvir Ahmed

4. Windows • GUIs are windowing interfaces: • they use rectangular boxes called windows to present the components of an application or the contents of a folder • Windowing was first demonstrated by the Xerox Alto and later incorporated into the Apple operating system and Microsoft Windows Dewan Tanvir Ahmed

5. Windows Multiple windows can pose management difficulties • Studies have shown that the advantages offered by windowing systems can be negated by excess window manipulation requirements Dewan Tanvir Ahmed

6. Windows – Window States • There are two types of window managers: • The operating system software • The user who must minimize, maximize, resize, access, and organize windows • Window States – once an instance of an Window is created • Maximized—The window occupies the whole screen • Minimized—The window is reduced to a button or icon • Restored – The window returns to its previous dimensions. Dewan Tanvir Ahmed

7. Windows – Window States • Restored—The window returns to the previous dimensions. The window also becomes resizable and can overlap other windows Cascading windows Tiled Windows Overlapping windows Interrupted cascade Dewan Tanvir Ahmed

8. Windows – Window States Tiled Windows Collectively occupy the entire screen Resized windows allow all program visible Window manager position themselves Each window retains its title and tool bars Windows become small, restricting visual content Allows drag and drop objects between windows Dewan Tanvir Ahmed

9. Windows – Window States Overlapping windows Positioned and sized by the user Each window maintains its size until altered by the user Active window overlaps all other windows A window becomes active when it is clicked Can see other windows partially Dewan Tanvir Ahmed

10. Windows – Window States Cascading windows A special type of overlapping presentation style Windows are placed by the system manager Efficient use of screen real estate Takes away positioning and sizing option from the user A window becomes active when it is clicked, and bringing it to the top Dewan Tanvir Ahmed

11. Windows – Window States Tiled windows afford drag-and-drop methods. Overlapping windows use screen real estate efficiently, but they can become overwhelming Cascading windows use screen real estate efficiently and can be used to create visual organization Maximized windows are visually less complex, but they require easy navigation methods to get from window to window Dewan Tanvir Ahmed

12. Windows - Components • Window Components • Most windowing systems use standardized windows that look similar and behave consistently Dewan Tanvir Ahmed

13. Windows - Components • Windows XP Window Components Dewan Tanvir Ahmed

14. Windows - Components • Mac OS X Window Components Dewan Tanvir Ahmed

15. Windows – Window Interfaces • Most windowing systems are standardized windows that look similar and behave consistently • Multiple Document Interface • Single Document Interface • Controlled Single Document Interface • Tabbed Interface • Detachable Tabbed Interface Dewan Tanvir Ahmed

16. Window Interfaces– MDI • Multiple Document Interface • The multiple document interface (MDI) is application-centric. • An MDI application launches a primary window that serves as the work space for all open documents Visual Studio 6 development environment: a typical modern MDI Adobe Photoshop: MDI under MS Windows. Dewan Tanvir Ahmed

17. Window Interfaces – MDI This interface has one primary window (PW) PW can have multiple instances of application documents each in a separate child window (CW) CW resides within the confines of PW CW is visually constrained Dialogue boxes are free floating – not constrained by PW Menus and toolbar are located on the PW Window manager puts a button on the task bar Switching between documents can only be done in the PW using the toolbar Multiple document interface—Adobe PhotoShop® application. Dewan Tanvir Ahmed

18. Window Interfaces – MDI • Advantages of MDIs: • They conserve system resources – only one instance of an application • They create minimal visual clutter – only one menu and toolbar for all documents • They provide a coordinated work space – all documents maximize, minimize and resize and close simultaneously • They allow multiple documents to be simultaneously visible – documents within the PW can be minimize, maximized, tiled, cascaded or overlapped Dewan Tanvir Ahmed

19. Window Interfaces – MDI • Disadvantages associated with MDIs: • Menus change according to the state of the active document • Document windows must remain within the MDI primary window • Child windows can be minimized within the parent window—This increases the visual complexity of the screen, which may have other open parent windows Dewan Tanvir Ahmed

20. Window Interfaces – SDI • Single Document Interface • Single document interfaces (SDIs) are document-centric; they open new primary windows for each instance of an application document Internet Explorer 6: a typical SDI application Dewan Tanvir Ahmed

21. Window Interfaces – SDI • SDI is a method of organizing graphical user interface applications into individual windows • Each window contains its own menu or tool bar, and does not have a "background" window or "parent" window • Applications which allow the editing of more than one document at a time, e.g. word processors, may therefore give the user the impression that more than one instance of an application is open. Dewan Tanvir Ahmed

22. Window Interfaces – SDI • Advantages of SDIs: • They are document-centric—The menus and toolbars refer only to the one child document window; this reflects the user’s point of view • They are less visually complex Dewan Tanvir Ahmed

23. Window Interfaces – SDI • Disadvantages of SDIs: • They do not provide a way to group diverse but related document windows • Related documents cannot be separated from other documents of the same file type • The task bar can become full when too many documents are open • Cycling between windows can become difficult Dewan Tanvir Ahmed

24. Window Interfaces – TDI • Tabbed Document Interface • A version of the MDI also called workbook • Incorporates the use of tabs to switch between documents • Some TDIs fix all document windows in a maximized state, and, therefore, no tiling or overlapping is possible • Others allow documents to be resized and minimized, which removes the tabs (becomes MDI) Firefox: TDI by default, can be SDI Dewan Tanvir Ahmed

25. Window Interfaces – TDI Dewan Tanvir Ahmed

26. Dialog Boxes Dialogue boxes provide a container for related, secondary functionality • A type of secondary window • Support less common tasks and provide sets of related functionality • Examples: • Alert box (title, message, OK button) • Tabbed property box Dewan Tanvir Ahmed

27. Dialog Boxes Text formatting dialogue—Windows XP Preferences dialogue—Mac OS X. Dewan Tanvir Ahmed

28. Dialog Boxes • Usage • To separate destructive, confusing, or infrequently used actions from tools • System can use to show critical message • User can remove or • Automatically after some time • Pattern • Have title bar, close button • No title bar icon • No sizing buttons • Cannot be resized by dragging the sides Dewan Tanvir Ahmed

29. Dialog Boxes – Modal/Modeless • Modal dialogues prohibit the user from doing anything until the issues raised by the dialogue are addressed • Clicking OK, or • Entering specific data that the program needs • Note • user can switch to another program • If tries to access another functionality in the same program - BEEP • Modeless dialogues allow the user to access all program functionality when the dialogue is visible • Behave like floating pallets No visual distinction between them even though they behave differently Dewan Tanvir Ahmed

30. Dialog Boxes • Problem – it obscures the information that is requested by dialogue • Solution – • Moveable dialogue • Transparent dialogue • Dialogues can be used for: • Setting and altering the properties of an object • Executing a function such as Save • Carrying out a process such as Copy • Confirming actions • Alerting the user about errors Dewan Tanvir Ahmed

31. Dialog Boxes – Expanding Dialogues • Expanding dialogues give experienced users access to advanced functionality Dewan Tanvir Ahmed

32. Panes, Frames, and Tabs Panes provide visual grouping for related functionality • Panes are an efficient way to provide functionality without forcing the user to navigate menus • Panes can be used to group related functionality, thereby providing a memory aid for the user A region internal to a Frame or another Panel. Used for grouping components together. Not bounded by a visible border. You can change background color of a panel to delimit it though. Dewan Tanvir Ahmed

33. Panes, Frames, and Tabs • Frames can be: • Resized by dragging the splitters at their edges • Minimized by clicking on their title bar • Frames are sometimes used in Web pages to create separate navigation areas Title bar Usually it contains Panels. A resizable, movable window with title bar and close button. Content pane Dewan Tanvir Ahmed

34. Panes, Frames, and Tabs • Difference between Panes and Frames • A Frame is an independent object which can exist on its own. It can contain one or more Panel object within it. • Whereas a Panel can not exist on its own. It needs a parent object like Frame/Window to be displayed. Dewan Tanvir Ahmed

35. Panes, Frames, and Tabs Panes and frames, Adobe Flash®. Dewan Tanvir Ahmed

36. Panes, Frames, and Tabs • Tabs increase the size of the dialogue by stacking layers on top of each other and allow more elements to be accessed from one dialogue • Stacked tabs move around to accommodate the different levels and they destroy location consistency (see next slide) Dewan Tanvir Ahmed

37. Panes, Frames, and Tabs Decreases dialogue’s predictability and consistency Dewan Tanvir Ahmed

38. Window Rationale • Designers need to: • Decide which type of interface to use • (MDI, SDI, or TDI) • Make sure that the window components are sufficiently related • Find the proper balance between having: • too many windows (each with only a few components and functions) and • too few windows (each with an overwhelming amount of components and functions) Dewan Tanvir Ahmed

39. Window Rationale Secondary windows must address a discernible need • Unnecessary windows can cause confusion and can add cumbersome window manipulation tasks • However, crowded windows can also be confusing Dewan Tanvir Ahmed

40. Window Rationale Avoid window clutter Windows should be created because of a need that cannot otherwise be filled Window components must be related Too many components in one window can be inefficient and confusing Too many windows with little functionality can create needless window manipulation tasks Dewan Tanvir Ahmed

41. Window Rationale • Tabs and/or panes can be used to organize window functionality • Frequently used components must be readily available • Less frequently used components can be placed in a secondary window • Windows must visually indicate activation state Dewan Tanvir Ahmed

42. The WIMP Interface - Icons • Icons are signs and represent a significant degree of cognitive complexity • Properly designed can enhance the user’s experience • Risk of being obscure and ambiguous See Chapter 11 Dewan Tanvir Ahmed

43. The WIMP Interface - Menus • Menu affords system functionality • Execute immediately or • Opens a dialogue with related functionality • Menu titles are always visible • Aid long term memory Dewan Tanvir Ahmed

44. The WIMP Interface - Menus • Issues involved in menu design • Menus are basically lists of options • Menu option lists can consist of any type of data but text usually works best • Options are generally indented in relation to the title • Frequently used items should be placed at the top • These lists can be ordered or unordered • Ordered lists can have a separate section at the top for frequently used items that might normally appear near the bottom • Time saving • Holding mouse and clicking the target may be time consuming • Provide Short-cut Dewan Tanvir Ahmed

45. The WIMP Interface - Menus • Menus – become standard feature of windowing environment • Behavior, labeling, position and structures • Peoples are accustomed • Structure • Menus should have at least two options; otherwise they should be combined with another menu • Menu options can be grouped using visual separators such as lines or backgrounds • Options that cause destructive actions should be isolated from other options Dewan Tanvir Ahmed

46. The WIMP Interface - Menus • Presentation • Consistency in placement, order, wording, highlighting etc. should be maintained • Titles and options must be unambiguous • Apple suggests using the standard menu titles and options because they are visually familiar and are used like icons. • Options should be listed in Title Case • Options should visually include indications of function keys and keyboard accelerators Dewan Tanvir Ahmed

47. The WIMP Interface - Menus • Behavior • Options should be highlighted when the pointer passes over them • Activated options should have a visual indication such as a check mark • If an option is not available, it should be made inaccessible and visually “grayed out” • Inaccessible (grayed out) options should remain on the menu in their usual location Dewan Tanvir Ahmed

48. The WIMP Interface - Menus • Secondary Menus • Menus can incorporate secondary, cascading menus to group related options • This simplifies decisions by limiting possible choices • However, secondary menus reduce option visibility • Options that lead to secondary menus should have visual indicators • Options that lead to secondary menus should have a visual indication such as an arrow • Options that lead to secondary windows should use an ellipsis • Menus can be detached and free floating or docked on the sides or bottom of the window Dewan Tanvir Ahmed

49. The WIMP Interface - Menus Menu titles must convey all the necessary information needed for a user to select one menu over another • The two most important characteristics of menu titles and options: • Descriptiveness • Consistency Dewan Tanvir Ahmed

50. The WIMP Interface - Menus • Galitz (2002) suggests guidelines for menu accelerators: • Supply a mnemonic for all menu items. • Use the first character of the menu item’s description • Underline the character in the menu • For duplicate – use the first succeeding consonant • Use industry standards when available • Control X, C, and V Dewan Tanvir Ahmed