Page 16 Chapter 2 Organizing The Content There are two primary ways to organize the planned content of your software applications design 1 Organize in the abstract by considering how the content of the actual application should be arranged ID: 655469
Download Presentation The PPT/PDF document "CS 275 Tidwell Course Notes" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CS 275
Tidwell Course Notes
Page 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!Slide2
CS 275
Tidwell Course Notes
Page 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.Slide3
CS 275
Tidwell Course Notes
Page 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”Slide4
CS 275
Tidwell Course Notes
Page 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?Slide5
CS 275
Tidwell Course Notes
Page 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.Slide6
CS 275
Tidwell Course Notes
Page 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.Slide7
CS 275
Tidwell Course Notes
Page 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.Slide8
CS 275
Tidwell Course Notes
Page 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.Slide9
CS 275
Tidwell Course Notes
Page 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.Slide10
CS 275
Tidwell Course Notes
Page 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.Slide11
CS 275
Tidwell Course Notes
Page 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.Slide12
CS 275
Tidwell Course Notes
Page 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.Slide13
CS 275
Tidwell Course Notes
Page 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.Slide14
CS 275
Tidwell Course Notes
Page 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.Slide15
CS 275
Tidwell Course Notes
Page 30
Pattern #18: Extras on Demand
Hide unimportant, less frequently needed information, but make it easily accessible
Example: In this
“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.Slide16
CS 275
Tidwell Course Notes
Page 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.Slide17
CS 275
Tidwell Course Notes
Page 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.