CS 275Tidwell Course NotesPage 16 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!

CS 275Tidwell Course NotesPage 17 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.

CS 275Tidwell Course NotesPage 18 GUI Idioms In recent years, numerous idioms have developed in the field of computer application interfaces. Idiomatic Phrasing “Back” means “Return to the directory address that the user was viewing prior to the current one” 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 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”

CS 275Tidwell Course NotesPage 19 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?

CS 275Tidwell Course NotesPage 20 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.

CS 275Tidwell Course NotesPage 21 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.

CS 275Tidwell Course NotesPage 22 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.

CS 275Tidwell Course NotesPage 23 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.

CS 275Tidwell Course NotesPage 24 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.

CS 275Tidwell Course NotesPage 25 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. 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. Execute

CS 275Tidwell Course NotesPage 26 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.

CS 275Tidwell Course NotesPage 27 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.

CS 275Tidwell Course NotesPage 28 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.

CS 275Tidwell Course NotesPage 29 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.

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

CS 275Tidwell Course NotesPage 31 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.

CS 275Tidwell Course NotesPage 32 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.