1 / 20

High Level Design Phase User Interface Example

High Level Design Phase User Interface Example. Detailed Use Cases. Design (refine) your user interfaces following guidelines given in class (and textbook)

jwoo
Télécharger la présentation

High Level Design Phase User Interface Example

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related