1 high level design phase user interface example

1

High Level Design Phase

User Interface Example

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


Consider the MMD First requirement

1. 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 GUI1.2 The solution window occupies the

rightmost 1/3 of the GUI1.3 Buttons to perform matrix operations

will appear at the top of the GUI1.4 A status bar to contain error messages

will appear at the bottom of the GUI


GUI: from first requirement

STATUS BAR

BUTTON AREA

PROBLEM WINDOW

SOLUTION WINDOW


GUI: display of problem/solution

152

413

764

217

342

385

369

755

10149


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


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


GUI: MMD 1-6

T

217

342

385

233

148

725

+ - X BY

T SYM


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


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


GUI: MMD 1-7

43 BY

8

3

5

221

163

721

+ - X BY

T SYMRESULT


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


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.


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


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

+ - X T

BY SYMRESULT

SAVE

SELECT

REMOVE


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


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


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


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?


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

+ - X T

BY SYMRESULT

SAVE

SELECT

REMOVE

STATUS

Input

1 high level design phase user interface example

Documents