UI Design Principles: Character, Control, and Cognition (Chapter11 of Liu)
Character refers to the goal of creating aesthetic characteristics of GUIs, i.e., they must look good. This principle embodies at least two sub-aspects. First, each form or report (or web page) must be neat and clean with appropriate grouping of related information. It does not waste valuable screen spaces but at the same time, it does not look crowded. Second, across forms or reports (or web pages), there shows consistency in size, look, and location of controls such as labels, textboxes, buttons, etc.
Control refers to the goal of giving users a sense of self control when using the system, i.e., the users feel that they are in control of the system. This principle implies many sub principles. For example, after each user action, the system must provide feedback through words and signs, and users must be given option to reverse their action to go back to the previous state.
Cognition refers to the goal of helping users to overcome their limited cognitive capabilities when using the system. For example, users do not want to memorize and do not want to think, and so we should not design GUIs that count on their short-term memory or mental math. For another example, making decision is hard, and so we should avoid too many user choices, and present a clear task flow for users to follow instead. For still another example, people have perceptional or behavioral biases and so we should design GUIs to take advantage of their psychology to prevent errors and improve efficacies..
PowerPoint Presentation is based on the book Designing with the Mind in Mind
Collaboration Modeling Concepts:
- Message: an inter-object function call or command request
- Delegation: an object assigns a part of its own task to another object by sending a message to the helper object
- Collaboration: A group of objects work together through delegations to perform a task that no object can perform it individually
- Constraint: Object A can send to Object B only if A knows B.
Collaboration Modeling:
- Two Kinds of Models:
- Communication (or collaboration) diagram and Sequence diagram
- both are equivalent;
- a communication diagram represents object message calls spatially, whereas a sequence diagram shows message calls in time order;
- you just need one-if you have any one, CASE tools can automatically convert it into the other
- One sequence or collaboration diagram for each use case: the purpose of collaboration modeling is to enrich class diagrams:
- Each interaction in the use case description is translated into one of more operations by an object of a domain class, control class, or UI class.
- Use case models and class diagrams are combined to make a collaboration model, which in term modifies the class diagram with captured operations
- Process:
- Create a business class diagram, user interfaces, and possibly a control class (for coordination of complex business logic that involve two or more objects)
- Create use case diagrams
- Describe and validate each use cases along with user interfaces
- Create one collaboration model for each use case
- Add one representative of each class and each actor that are involved in performing the use case
- For each interaction, translated into message calls: Whatever the system does is translated into a task by a group of collaboration objects
- Convert each message into an operation and add the operation to the receiver object
Rhapsody for Sequence Diagrams:
Rhapsody enables you to create sequence diagrams in two modes:
- In analysis mode, you draw message sequences without adding elements to your class diagram. This enables you to brainstorm your analysis and design without affecting the generated source code. Once the design is finalized, you can realize the instance lines and messages so that they display in the browser, and can have code generated for them.
- In design mode, every instance line and message you create or rename can be realized as an element (class, object, operation, or event) that appears in the browser, and for which code can be generated. When you draw a message, Rhapsody will ask if you want to realize it. Click Yes to realize the message.
Rhapsody has a few peculiar features:
- To show execution occurrence, right click on message line and choose Add Execution Occurrences
- Create() and Destroy() are special kind of messages that create a new or destroy an existing object instances
- A reply message can realize an operation or event reception at the source (unlike other messages, which realize operations at the target).
- Interaction operators, which are included in UML 2.0, are used to group related elements in a sequence diagram. This includes the option of defining specific conditions under which each group of elements is to occur. Each interaction operator has a type, which determines its behavior, for example Opt, Par, or Loop. In addition, interaction operators can include a guard to specify specific conditions under which the path is to take.
- Timeout is a kind of self message that cause an object to wait for a time period, e.g., a dial tone waits for a user to dial. Time interval can specify the maximum amount of time that can elapse between two points.
- Example 1: Collaboration Diagram for Post Grade
To approach this example in particular and to understand the concept of collaboration in general (e.g., where to house the main operation and where to delegate sub-tasks), we create a class diagram first and try to implement a few key classes such as Section next. It will be apparent that the PostGrade screen should delegate the job of obtaining information to be pre-rendered to Section class. Even Section does not have all the information such names of students ready, Section can delegate the sub tasks to other objects it knows. Similarly, when saving grades, PostGradeScreen should delegate the job to Section, which in turn will delegate sub tasks to Student and Enrollment for updating GPA and grades respectively.
- Example 2: Sequence Diagram for Post Grade
After capturing messages as operations, the enriched class diagram is shown below:
- Example 3: Sequence Diagram for Take Food Order
Class Diagram:
- Example 4: Collaboration Diagram for Enroll Classes
Homework:
- Reading: Chapter 15 of LIU (2020)
- Exercises: Correctness Questions are online on ecourse.org, Question 3 of Chapter 15 (Hands-on)
|
