Chapter 7: Focusing on Users and Their Tasks Use Cases and User Interfaces (slides modified by Allen Tucker)

1. Object-Oriented Software EngineeringPractical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks Use Cases and User Interfaces (slides modified by Allen Tucker)

2. 7.1 User Centered Design • Software design should focus on the needs of users. • Design software based on an understanding of the users’ tasks • Ensure users are involved in the design processes • Design the user interface following guidelines for good usability • Have users work with prototypes • Obtain user feedback about GUI functioning and on-line help Chapter 7: Focusing on Users and Their Tasks

3. 7.3 Developing Use-Case Models of Systems • Use caseanalysis describes typical sequences of actions that users perform while completing given tasks • A use case model consists of • a set of use cases • a diagram showing how they are related • A use case includes only actor-computer interactions. • Not actor-actor interactions • Not internal computations of the system • A use case should be as independent as possible from any particular user interface design. Chapter 7: Focusing on Users and Their Tasks

4. Use case diagrams Register in Course Add Course Offering Registrar Add Course Enter Grade for Course Student Find information about course Instructor Chapter 7: Focusing on Users and Their Tasks

5. UML Use Case Diagrams in Eclipse Chapter 7: Focusing on Users and Their Tasks

6. An Eclipse Use Case Diagram (see workspace260/Registration) Chapter 7: Focusing on Users and Their Tasks

7. Use case diagrams: Extensions, Generalizations and Inclusions • Extensions make optional interactions explicit and handle exceptional cases. • By making separate extensions, the basic use case remains simple. • Generalizations represent several similar use cases. • Much like a superclass in a class definition. • Inclusions allow one to express commonality between several different use cases. • Enable avoiding repetition in multiple use cases. • Much like instance variables in a class definition. Chapter 7: Focusing on Users and Their Tasks

8. Example of extension, generalization, and inclusion Chapter 7: Focusing on Users and Their Tasks

9. How to describe a use case • Name: A short, descriptive identifier for the use case. • Actors: People who can perform this use case. • Goals: What are the actors trying to achieve? • Preconditions: State of the system before the use case. • Postconditions: State of the system after the use case. • Related use cases. Where does this use case fit in the system? • Description: a short and precise summary of the events. • Steps: What actions occur and in what order? Chapter 7: Focusing on Users and Their Tasks

10. Example Use Case (addACourse) • Name - addACourse • Actors - any student • Goals - to add a course to his/her course record • Preconditions - • Courses, course record, and transcript are available for viewing • transcript satisfies course’s prerequisites • course record is not already full • course record does not already contain the course to be added • course’s time slot does not conflict with the course record • course is not already filled to capacity • Postconditions - • Either 1-6 are satisfied, and the student is added to the course • and the course is added to the course record, • or 1-5 are satisfied (but not 6), and the student is added to the course’s waiting list, • or else no changes occur for the course or the course record. • The student is notified about the outcome. Chapter 7: Focusing on Users and Their Tasks

11. Example Use Case (addACourse continued) • Related Use Cases - registerInCourses, viewMyCourses, • viewCourseOfferings, viewATranscript • Description - a student has logged into the registration server and has obtained a class list and his/her course record. The student then selects a course to add to her course record and the system checks to be sure that the preconditions are met. • If so, the system satisfies the postcondition and notifies the student that the course has been successfully added. • If not, the system notifies the student that the course was not added, along with a reason (which of the preconditions was not satified). • Steps - this can be described with a UML sequence diagram. Chapter 7: Focusing on Users and Their Tasks

12. Another example use case Chapter 7: Focusing on Users and Their Tasks

13. Another example (continued) Chapter 7: Focusing on Users and Their Tasks

14. Example (continued) Chapter 7: Focusing on Users and Their Tasks

15. Example (continued) Chapter 7: Focusing on Users and Their Tasks

16. Example (continued) Chapter 7: Focusing on Users and Their Tasks

17. The modeling processes: Choosing use cases on which to focus • Often one use case (or a very small number) can be identified as central to the system • The entire system can be built around this particular use case • There are other reasons for focusing on particular use cases: • Some use cases will represent a high risk because for some reason their implementation is problematic • Some use cases will have high political or commercial value Chapter 7: Focusing on Users and Their Tasks

18. Use cases: benefits and drawbacks Benefits • They can help to define the scope of the system • They help plan the development process • They help develop and validate the requirements • They can be used to structure User Interfaces and On-line Help • They can guide the structuring of test cases Drawbacks • Use cases themselves must be validated • There are some aspects of software that are not covered by use case analysis. E.g., • Database design • System architecture (e.g., client-server) • Innovative solutions may be overlooked Chapter 7: Focusing on Users and Their Tasks

19. 7.4 Basics of User Interface Design • User interface design should be done in conjunction with other software engineering activities. • Use case analysis to help define the tasks that the UI must help the user perform. • Do iterative UI prototyping to address the use cases. • Results of prototyping will enable you to finalize the requirements. Chapter 7: Focusing on Users and Their Tasks

20. Aspects of usability • Learnability • The speed with which a new user can become proficient with the system. • Efficiency of use • How fast an expert user can do their work. • Error handling • The extent to which it prevents the user from making errors, detects errors, and helps to correct errors. • Acceptability • The extent to which users like the system. Chapter 7: Focusing on Users and Their Tasks

21. Some basic terminology of user interface design • Dialog: A specific window with which a user can interact, but which is not the main UI window. • Control or Widget: Specific component of a user interface. • Affordance: The set of operations that the user can do at any given point in time. • State: At any stage in the dialog, the system is displaying certain information in certain widgets, and has a certain affordance. • Mode: A situation in which the UI restricts what the user can do. • Modal dialog: A dialog in which the system is in a very restrictive mode. • Feedback: The response from the system whenever the user does something, is called feedback. • Encoding techniques. Ways of encoding information so as to communicate it to the user. Chapter 7: Focusing on Users and Their Tasks

22. 6.5 Twelve Usability Principles • 1. Always test with real users. • 2: Base designs on users’ tasks. • Use case analysis guides the UI structure. • 3: Ensure that sequences of actions are simple. • Minimize the amount of reading. • Group steps on the same page (few pages). • 4: Ensure that the user always knows what can be done next. • Make the most important commands stand out. • 5: Provide good feedback and effective error messages. • When something goes wrong help the user to resolve the problem. • 6: Ensure that the user can always exit, back up, or undo an action. • Make it easy to do. Chapter 7: Focusing on Users and Their Tasks

23. Twelve Usability Principles (continued) • 7: Ensure that response time is adequate. • Warn users of long delays; inform them of progress. • 8: Use understandable encoding techniques. • Use labels to ensure that codes are fully understood by users. • 9: Ensure that the UI’s appearance is uncluttered. • Avoid displaying too much, and organize information well. • 10: Consider the needs of different groups of users. • Ensure that the system is usable by both beginners and experts. • 11: Provide all necessary help. • Organize and integrate help with each task. • 12. Be consistent. • Use similar layouts and graphic designs for all user tasks • Mimic other successful UIs. Chapter 7: Focusing on Users and Their Tasks

24. Some UI encoding tools • Text and fonts • Icons • Photographs • Diagrams and abstract graphics • Colours • Grouping and bordering • Spoken words • Music • Other sounds • Animations and video • Flashing Chapter 7: Focusing on Users and Their Tasks

25. Example (bad UI) Chapter 7: Focusing on Users and Their Tasks

26. Example (better UI) Chapter 7: Focusing on Users and Their Tasks

27. 7.7 Implementing a Simple GUI in Java • The Abstract Window Toolkit (AWT) • Component: the basic building blocks of any graphical interface. • Button, TextField, List, Label, ScrollBar. • Container: contain the components constituting the GUI • Frame, Dialog and Panel • LayoutManager: define the way components are laid out in a container. • GridLayout, BorderLayout Chapter 7: Focusing on Users and Their Tasks

28. Example public class ClientGUI extends Frame implements ChatIF { private Button closeB = new Button("Close"); private Button openB = new Button("Open"); private Button sendB = new Button("Send"); private Button quitB = new Button("Quit"); private TextField portTxF = new TextField(""); private TextField hostTxF = new TextField(""); private TextField message = new TextField(); private Label portLB = new Label("Port: ", Label.RIGHT); private Label hostLB = new Label("Host: ", Label.RIGHT); private Label messageLB = new Label("Message: ", Label.RIGHT); private List messageList = new List();  ... } Chapter 7: Focusing on Users and Their Tasks

29. Example public ClientGUI(String host, int port) { super("Simple Chat"); setSize(300,400); setVisible(true); setLayout(new BorderLayout(5,5)); Panel bottom = new Panel(); add("Center", messageList); add("South", bottom); bottom.setLayout(new GridLayout(5,2,5,5)) bottom.add(hostLB); bottom.add(hostTxF); bottom.add(portLB); bottom.add(portTxF); bottom.add(messageLB); bottom.add(message); bottom.add(openB); bottom.add(sendB); bottom.add(closeB); bottom.add(quitB); Chapter 7: Focusing on Users and Their Tasks

30. Example sendB.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { send(); } }); } public void send() { try { client.sendToServer(message.getText()); } catch (Exception ex) { messageList.add(ex.toString()); messageList.makeVisible(messageList.getItemCount()-1); messageList.setBackground(Color.yellow); } } Chapter 7: Focusing on Users and Their Tasks

31. 7.8 Difficulties and Risks in UI Design • Users differ widely • User interface implementation technology changes rapidly • User interface design and implementation can often take the majority of work in an application • Developers often underestimate a GUI’s weaknesses Chapter 7: Focusing on Users and Their Tasks