1. 1 High Level Design Phase User Interface Example

2. Janice Regan, 2008 2 Detailed Use Cases  Design (refine) your user interfaces following guidelines given in class (and textbook)  Based on your refined user interfaces, add more user interface details to your use cases: Update your use cases to include new User interface information

3. Janice Regan, 2008 3 Consider the MMD  First requirement 1. The “Matrix Math demonstrator” must have a graphical user interface (GUI) with 2 main windows. 1.1The problem window occupies the leftmost 2/3 of the GUI 1.2The solution window occupies the rightmost 1/3 of the GUI 1.3Buttons to perform matrix operations will appear at the top of the GUI 1.4A status bar to contain error messages will appear at the bottom of the GUI

4. Janice Regan, 2008 4 GUI: from first requirement STATUS BAR BUTTON AREA PROBLEM WINDOW SOLUTION WINDOW

5. Janice Regan, 2008 5 GUI: display of problem/solution

6. Janice Regan, 2008 6 Consider the MMD  Requirement 2 – 6, enter operand then press operator then enter second operand  Requirement 2, Create matrix, operands are dimensions, operator is "BY"  need a BY button  Requirements 3-5, operands are matrices  Add need + operator button  Subtract, need – operator button  Multiply, need X operator button

7. Janice Regan, 2008 7 Consider the MMD  Requirements 2-6, enter operand then operator  Create symmetric matrix,  enter operand (dimension) then press the "SYM" button  Transpose matrix  Enter operand (matrix) then press the "T " operator button

8. Janice Regan, 2008 8 GUI: MMD 1-6 + -XBY TSYM

9. Janice Regan, 2008 9 Consider the MMD  Note that logically related functions are together  All operator buttons are grouped together for consistency  All binary operators are in the first row  All unary operators are in the second row  All operator buttons appear above the problem window where operators will be displayed  All operator buttons are labeled in a way that is clear to a user from the application domain

10. Janice Regan, 2008 10 Consider the MMD  Requirements 7-8, press the "RESULT" button.  To initialize calculation  To display operators and operands in the problem window  To display results in the result window press the  The "RESULT" button is a critical part of the UI

11. Janice Regan, 2008 11 GUI: MMD 1-7 + -XBY TSYM RESULT

12. Janice Regan, 2008 12 Consider the MMD  The "RESULT" button is a critical part of the GUI  It is placed in a central location  It is made larger to make it easier to locate  It is placed on the edge between the problem window and the results window as it solves the problem to be displayed in the problem window and determines the result to be displayed in the solution window.  It provides a way to quickly activate any calculation

13. Janice Regan, 2008 13 Consider the MMD  Requirements 7-8 are a design for the beginning middle and end of a calculation (sequence of actions) and cause the display of currently relevant information  Requirement 11 specifies that we should  be able to see a list of the matrices in the matrix database. This list should be displayed in the solutions window after pressing the "SELECT" button. Any one of the listed matrices can then be selected by clicking on it.

14. Janice Regan, 2008 14 Consider the MMD  Requirements 9-10 specify that we should be able to  save a matrix displayed in the results window to the matrix database by pressing the "SAVE" button  remove matrices (that have been selected as explained above) from the matrix database by pressing the "REMOVE" button

15. Janice Regan, 2008 15 GUI: MMD 1-12 a) 2 BY 2 Symmetric b) 5 BY 6 Matrix c) 4 BY 4 Matrix d) 5 BY 2 Matrix e) 3 BY 3 Symmetric f) 1 BY 1 Constant + -XT BYSYM RESULT SAVE SELECT REMOVE

16. Janice Regan, 2008 16 Consider the MMD  The "REMOVE", "SAVE", and "SELECT" buttons allow for interaction with the matrix database  All interaction with the matrix database is done from the results window  The buttons are associated with the results window by being above the results window in the GUI

17. Janice Regan, 2008 17 Consider the MMD  All interaction with the matrix database is done from the results window  The "REMOVE" and "SELECT" buttons are adjacent so the select matrix then move matrix sequence is simple  Requirement 12 is a "CLEAR" button that clears all information from the problem window and the solution window

18. Janice Regan, 2008 18 Consider the MMD  Requirements 13-15 specify error messages to appear in the status bar when specific conditions occur  Requirement 9 specifies statuses to occur in the status bar after matrices have been added or removed from the system.  The status bar is the bar at the bottom of the screen.  Add a label for clarity

19. Janice Regan, 2008 19 Consider the MMD  What is still missing?  How do we enter single operands like dimensions?  How do we enter calculations if we already know the matrices we wish to use as operands?

20. Janice Regan, 2008 20 GUI: MMD 1-15 STATUS: INPUT: a) 2 BY 2 Symmetric b) 5 BY 6 Matrix c) 4 BY 4 Matrix d) 5 BY 2 Matrix e) 3 BY 3 Symmetric f) 1 BY 1 Constant + -XT BYSYM RESULT SAVE SELECT REMOVE STATUS Input