1 High Level Design Phase User Interface Example

Janice Regan, 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

Janice Regan, 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

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

Janice Regan, GUI: display of problem/solution

Janice Regan, 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

Janice Regan, 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

Janice Regan, GUI: MMD XBY TSYM

Janice Regan, 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

Janice Regan, 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

Janice Regan, GUI: MMD XBY TSYM RESULT

Janice Regan, 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

Janice Regan, 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.

Janice Regan, 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

Janice Regan, 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

Janice Regan, 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

Janice Regan, 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

Janice Regan, Consider the MMD  Requirements 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

Janice Regan, 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?

Janice Regan, 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