High Level Design Phase User Interface Example

# High Level Design Phase User Interface Example

## High Level Design Phase User Interface Example

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
##### Presentation Transcript

1. High Level Design PhaseUser Interface Example

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. Consider the MMD • First requirement • The “Matrix Math demonstrator” must have a graphical user interface (GUI) with 2 main windows. 1.1 The problem window occupies the leftmost 2/3 of the GUI 1.2 The solution window occupies the rightmost 1/3 of the GUI 1.3 Buttons to perform matrix operations will appear at the top of the GUI 1.4 A status bar to contain error messages will appear at the bottom of the GUI

4. GUI: from first requirement BUTTON AREA PROBLEM WINDOW SOLUTION WINDOW STATUS BAR

5. GUI: display of problem/solution

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. 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. - X BY + T SYM GUI: MMD 1-6

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. 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. - X BY RESULT + T SYM GUI: MMD 1-7

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. 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. 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. - X T + RESULT REMOVE SAVE BY SYM SELECT 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 GUI: MMD 1-12

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. 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. 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. 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. GUI: MMD 1-15 - X T + RESULT REMOVE SAVE BY SYM SELECT 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 STATUS STATUS: INPUT: Input