Chapter 2: Organizing The Content

1. Chapter 2: Organizing The Content There are two primary ways to organize the planned content of your software application’s design: (1) Organize in the abstract by considering how the content of the actual application should be arranged. (2) Organize according to how the application’s information might be effectively presented to the user. These approaches are not mutually exclusive! Tidwell Course Notes

2. Idioms Scott McCloud’s 1993 book “Understanding Comics” explores the concept of idioms, interface components with meanings that have become familiar enough to users to no longer need elaborate explanations. Tidwell Course Notes

3. GUI Idioms In recent years, numerous idioms have developed in the field of computer application interfaces. Idiomatic Action Drag-And-Drop means “Move the selected file or folder and its contents to the designated folder in which it is dropped” Idiomatic Phrasing “Back” means “Return to the directory address that the user was viewing prior to the current one” Idiomatic Object Slider means “Vertically adjust the text in the associated list so more rows can be seen, either above or below what is currently displayed” Tidwell Course Notes

4. Nouns & Verbs Software applications use a mixture of objects that the user can examine and actions that the user can take. What are the objects and actions for this Mouse Properties application? Tidwell Course Notes

5. Organizing Objects When presenting objects to a user in an application, they are frequently organized into lists or tables that facilitate finding particular items wanted by the user. Tidwell Course Notes

6. Organizing Actions Whether presenting the user with action alternatives in a list, a grid, or a menu, it’s important not to overwhelm the user with too many options or too much wording. Tidwell Course Notes

7. Organizing Categories When presenting an extensive amount of material to users, an application might categorize the data into some kind of order or hierarchy that facilitates finding what one wants. Tidwell Course Notes

8. Organizing Tools An application that provides the user with access to various tools or utilities should avoid confusing the user regarding what the tool is or what it does. Tidwell Course Notes

9. Paging, Tiling, & Tabbing When there’s too much information in an application to fit inside a single window, several options exist... Using multiple windows can be very confusing to the user; having multiple windows visible simultaneously should be particularly avoided. Tiled panes consume screen real estate and can overwhelm beginners. Tabbed forms inhibit openness in the interface, forcing the user to search for desired information. Tidwell Course Notes

10. Pattern #13: Two-Panel Selector Simultaneously displaying a list of items and details about the user’s selection reduces strain to both the eyes and the memory Example: In this “Course Offerings” application, selections from the list of courses on the left result in the display of information about the selected course on the right. Execute Example: In Windows Explorer, selections from the list of folders on the left result in the display of the files contained in the selected folder on the right. Tidwell Course Notes

11. Pattern #14: Canvas Plus Palette Applications involving design or creation can be made easier to learn by using a “palette” of icons to modify a “canvas” Example: Microsoft Visio affords users the ability to design structures in the primary canvas pane, using standard components from the icon palette on the left. Tidwell Course Notes

12. Pattern #15: One-Window Drilldown When space is limited, the same interface region might be used for consecutive displays. Example: TiVo uses a simple menu-oriented interface driven by a remote control to allow users to proceed to the desired information or functionality. Tidwell Course Notes

13. Pattern #16: Alternative Views Allow users to modify the actual contents of the application display, according to their personal tastes Example: Windows Explorer allows users to display folder contents in a variety of ways: thumbnails, filmstrip, icons, details. Tidwell Course Notes

14. Pattern #17: Wizard Walking the user through the application one step at a time can facilitate providing the proper responses for the application Example: To ensure that a compressed folder is correctly decompressed, named, and stored, an extraction wizard leads the user through a step-by-step process. Tidwell Course Notes

15. Pattern #18: Extras on Demand Hide unimportant, less frequently needed information, but make it easily accessible Example: Windows Media Player has both a skin mode and a full mode, with additional text and controls. Example: In the “Course Offerings” application, the textbook information is accessible via a checked menu item, but could easily be hidden. Execute Tidwell Course Notes

16. Pattern #19: Intriguing Branches Providing mechanisms for users to access additional information, but without forcing them to do so, can make an interface more enjoyable Example: Adobe Acrobat provides ToolTips to clarify the meaning of the command icons, as well as a “How To...?” menu through which the user can obtain additional information. Tidwell Course Notes

17. Pattern #20: Multi-Level Help Providing multiple ways of accessing help information facilitates the use of an application Example: Microsoft Visual Studio provides VB2008 developers with numerous prompts and help screens for getting clarification on available methods, events, properties, and fields. Tidwell Course Notes