The process of designing view layer classes is divided into 4 major activities : 1) Macro level UI design process (identifying view layer object)
2) Micro level UI activities: a) Designing the view layer b) Prototyping the view layer interface 3) Testing usability and user satisfaction 4) Refining and iterating the design.
Macro Level Process: Identifying View Classes By Analyzing Use Cases: The interface object handles all communication with the actor but processes no business rules or object storage activities. The view layer macro process consists of two steps: 1) For every class identified (see figure), determine if the class interacts with a human actor. If so, perform the . following; otherwise, move to next class 1.1) 1.2)
Identify the view (interface) objects for the class. Define the relationships among the view (interface) objects.
2) Iterate and refine.
Micro-Level Process: The view layer objects must be user driven or user centered. The following is the process of designing view objects: 1) For every interface object identified in the macro UI design process, apply micro level UI design rules and corollaries to develop the UI. 2) Iterate and refine.
Three UI design rules based on the design axioms and corollaries:
UI Design Rule 1.Making the Interface Simple (Application of Corollary 2) Rule 2.Making the interface transparent and Natural (Application of corollary 4) Rule 3.Allowing Users to be in control of the Software (Application of Corollary 1) 3.1) Make the interface Forgiving 3.2) Make the interface Visual 3.3) Provide immediate Feedback 3.4) Avoid Modes (Modal dialog, Spiral-loaded modes, Tool-driven modes) 3.5) Make the interface Consistent
The Purpose Of A View Layer Interface: Windows commonly are used for the following purposes: • • •
Forms and data entry windows. Dialog boxes. Application windows (main windows)
Guidelines for Designing Forms and Data entry Windows: 1) Identify the information you want to display or change: What kind of information will users work with and why? Do users need access to all the information in a table or just some information? In what order do users want rows to appear? 2) Identify the tasks that users need to work with data on the form or data entry window: Navigating rows in a table Adding and deleting rows Changing data in rows Saving and abandoning changes. 3) Guidelines to choose layout are: Use an existing paper form Consider using main window Use top left side of the form for frequently entered information Align fields at their left edges
Guidelines for Designing Dialog Boxes and Error Messages: 1) Your error message should be positive. 2) Your error message should be constructive. 3) Your error message should be brief and meaningful.
4) Orient the controls in the dialog in the direction people read.
Guidelines for the Command Buttons Layout: 1) Make the buttons consistent length. 2) Position the most important button as the first button in the set.
Guidelines for Designing Application Windows: 1) 2) 3) 4) 5) 6)
The File menu. The Edit menu The View menu and other The Window menu The Help menu Toolbars and status bars
Guidelines for Using Colors: 1) 2) 3) 4) 5) 6)
Use identical or similar colors to indicate related information. For an object background , use contrasting but complimentary colors Use bright colors to call attention to certain elements Use colors consistently Don’t use too many colors Allow user to modify color configuration
Guidelines for Using Fonts: 1) 2) 3) 4) 5)
Use commonly installed fonts Use bold for control labels Use fonts consistently within each form Don’t use too many font styles, sizes and colors. To emphasize text, increase its font size relatively
Prototyping the User Interface: Creating a user interface generally consists of three steps: 1) Create the user interface objects. 2) Link or assign the appropriate behaviors or actions to these user interface objects and their events. 3) Test, debug, then add more by going back to step 1.