meljun cortes jedi slides-4.5 interface design
TRANSCRIPT
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
1/47
Software Engineering 1
Design Engineering
Interface Design
TOPIC FIVE
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
2/47
Software Engineering 2
Interface Design
It is concerned with the designing elements that facilitate howsoftware communicates with humans, devices and othersystems that interoperate with it.
Interface design may be critical in determining how thesystem will be accepted by customers.
It encompasses:
Report Design
Form Design
Screen and Dialog Design
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
3/47
Software Engineering 3
When to use Reports?
Reports are used for audit trails and controls.
Reports are used for compliance with external agencies.
Reports are used if it is to voluminous for on-line browsing.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
4/47
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
5/47
Software Engineering 5
When to use Screens?
Screens are used to query a single record from a database.
Screens are used for low volume output.
Screens are used for intermediate steps in long interactive
process.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
6/47
Software Engineering 6
Report Design
Reports can be placed in an ordinary paper, continuousforms, screen-based, microfilm or microfiche.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
7/47
Software Engineering 7
Report Design Consideration
Number of Copies and Volume
Report Generation
Report Frequency
Report Figures
Media
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
8/47
Software Engineering 8
Report Design Guidelines
Adhere to standard printout data zones of the report layout.The data zones are the headers, detail lines, footers, andsummary.
Consider the following tips in designing report headers.
Always include report date and page numbers.
Clearly describe report and contents.
Column headers identify the data items listed.
Align column headers with data item's length.
Remove corporate name from internal reports for security purposes.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
9/47
Software Engineering 9
Report Design Guidelines
Consider the following tips in designing the detail line.
One line should represent one record of information. Fit details inone line. If more than one line is needed, alphanumeric fields aregrouped on the first line and numeric fields are grouped in the next
line. Important fields are placed on the left side.
The first five lines and the last five lines are used for the headersand footers. Do not use this space.
It is a good idea to group the number of details per page by
monetary values such as by 10's, 20's and 50's.
If trends are part of the report, represent them in graphic form suchas charts
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
10/47
Software Engineering 10
Report Design Guidelines
Consider the following tips in designing the detail line.
Group related items, such as Current Sales with Year-to-end Salesor Account number, Name and Address.
For numeric representation such as money, it would be appropriateto include punctuation marks and sign
Avoid printing repetitive data.
Consider the following tips in designing the report footer.
Place page totals, grand totals and code-value tables in this area.
It is also a good place for an indicator that nothing follows.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
11/47
Software Engineering 11
Report Design Guidelines
Consider the following tips in designing the summary page.
Summary pages can be printed at the beginning of the report or atthe end.
Select only one.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
12/47
Software Engineering 12
Developing the Report
Layouts1. Define Report Layout Standards.2. Prepare the Report Layouts.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
13/47
Software Engineering 13
STEP 1: Define Report Layout
Standards. Report Layout Standards are the standards used in definingelements of the report.
Sample Club Membership Maintenance Report LayoutStandards:
Report heading should contain title of the report, preparation date,club name and page number.
Body of report should have descriptive data on the left side andnumerical data on the right side.
Bottom of each page provides instructions or explanation of eachcode while bottom last page contains grand totals and indication ofno more pages to follow.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
14/47
Software Engineering 14
STEP 1: Define Report Layout
Standards. Sample Club Membership Maintenance Report LayoutStandards:
Important data are positioned on top of the document; then, left toright.
Codes are always explained when used.
Dates use MM/DD/YY format.
Use only logos on all externally distributed documents.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
15/47
Software Engineering 15
STEP 2: Prepare the Report
Layouts. Standards are used to guide the design of the report.
Format Convention Description
9 This means that the data is numeric. Thenumber of 9's indicate the digits.
Examples:
9999 a thousand number
999.99 a hundred number with twodecimal places
A This is a alphabet string. The number ofA's indicates the number of characters.
X This is an alphanumeric string.
MM/DD/YY This indicates a date.
HH:MM:SS This indicates a time.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
16/47
Software Engineering 16
Sample Report Layout
Ang Bulilit Liga Club
List Member by Status
Prepared : MM/DD/YYYY
Page 99
STATUS: XXXXX
MEMBER MEMBER MEMBER
NUMBER LASTNAME FIRSTNAME
9999 Xxxxxxxx Xxxxxxxx
9999 Xxxxxxxx Xxxxxxxx
9999 Xxxxxxxx Xxxxxxxx
Total Number XXXXX Members : 9999
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
17/47
Software Engineering 17
Forms Design
Forms are usually used for input when a workstation is notavailable.
It is sometimes used as a turnaround document.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
18/47
Software Engineering 18
Forms Layout Guidelines
Instructions should appear on the form except when the sameperson fills it over and over again. They are normally placedat the top of the form.
Use familiar words. Use positive, active and short sentences.
The answer space should be enough for user to comfortablyenter all necessary information.
Use the following guidelines for typefaces of the fonts.
Gothic
Simple, squared off, no serifs
Easy to read, even when compressed
Capital letters are desirable for headings
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
19/47
Software Engineering 19
Forms Layout Guidelines
Use the following guidelines for typefaces of the fonts.
Italic
Has serifs and a distinct slant
Hard to read in large amounts of long letters
Good for printing out a word or phrase
Roman
Has serifs but does not slant
Best for large quantities
Good for instructions Lower case print is easier to read than upper case. Use
upper case to call attention to certain statements.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
20/47
Software Engineering 20
Developing the Form Layouts
1. Define the standards to be used for designing the forms
2. Prepare sample forms.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
21/47
Software Engineering 21
STEP 1: Define Form Layout
Standards. A sample form layout standard definition: Paper size should not be bigger than 8 1/2 x 11.
Color Schemes
White copies go to the applicant. Yellow copies go to the club staff.
Pink copies go to the coach.
Important data should be positioned on left side of the document.
Dates should use DD/MM/YY format.
Logos are only used for all externally distributed documents.
Heading should include Page Number and Title.
Binding should use 3-hole paper.
Ruling should follow 3 lines per inch.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
22/47
Software Engineering 22
STEP 2: Prepare Form
Samples. Using the standard defined in step one, prepare samplecopies and present it to end-users.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
23/47
Software Engineering 23
Screen and Dialog Design
It is the task where boundary classes are refine to define thescreens and dialogs that the users will be using to interactwith the system.
Two Metaphor
Dialog Metaphor
Direct Manipulation Metaphor
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
24/47
Software Engineering 24
Screen and Dialog Design
Guidelines Stick the rule: ONE IDEA PER SCREEN. If the main ideachanges, another screen must appear.
Use the style guides in designing the screen layouts.
Remember that data items should have a screen name,always located at the same position for all screens, anddisplayed in the same way.
Keep user informed of what is going on. Use "XX%completed" messages or indicators.
It would be wise to always inform the user of the next step.Provide meaningful error messages and help screens.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
25/47
Software Engineering 25
Developing the Screen and
Dialog Design Prototype the user-interface. For each screen, design the screen class.
For each screen class, model the behavior of the screen
class with other classes. For each screen class, model its internal behavior.
Document the screen class.
Modify the software architecture.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
26/47
Software Engineering 26
STEP 1: Prototype the user-
interface. A prototype is a model that looks, and to some extent,behaves like the finish product but lacking in certain feature.
Horizontal Prototype
Vertical Prototype
Throwaway Prototype
Visual Programming Environment can aid in building theprototypes.
Style Guides are used to support consistency in building
screens. Java Look and Feel Design Guidelines
(http://java.sun.com/docs/codeconv/index.html)
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
27/47
Software Engineering 27
Screen Prototype ExampleAthleteMembership No:
AddressLot 24 Block 18, St.
Andrewsfield Quezon City
Postal Code2619
Date of Birth 24/9/1998
Gender
3456
Save
Delete
Cancel
Find...Last Name
First Name
De la Cruz
Johnny
Middle Initial A.
Male Female
AddressLot 24 Block 18, St.Andrewsfield Quezon City
2619
Last Name
First Name
De la Cruz
Johnny
Middle Initial A.
Guardian:
Postal Code
Postal Code 555-9895
Status Active
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
28/47
Software Engineering 28
STEP 2: For each screen,
design the screen class. The screen is represented as a class with the use of the JavaAbstract Windowing Toolkit (AWT) to support windowfunctions.
STEP 3: For each screen
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
29/47
Software Engineering 29
STEP 3: For each screenclass, model the behavior
with other classes. Identity the collaboration using the collaboration diagram.
It is possible to add screen classes to support the behavior.
In the example, additional screens and correspondingcontrollers are identified such as FindAthleteRecordUI andFindAthleteRecord.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
30/47
Software Engineering 30
Collaboration Diagram
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
31/47
Software Engineering 31
Additional Screen Prototypes
Athlete List
OK
Athlete ID Last Name First Name MI3303 Armstrong Mark L.3307 Brown Lione G.3312 Ferran Julius R.3318 Jones Simon R.3323 Napoli Ray F.3326 Robinson James S.3336 Schmidt John C.3343 Smith Allan A.3344 Smith Jacob F.3347 Smith Kenny S.3348 Smith Leo A.
Cancel
Find An AthleteMembership No:
Date of Birth 9/1/1998
Gender
Cancel
OKLast Name
First Name
Middle Initial
Male Female
To 9/30/1998
Status Active
STEP 3: For each screen
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
32/47
Software Engineering 32
STEP 3: For each screenclass, model the behavior
with other classes. Identify the sequence of the interaction using the sequence
diagram.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
33/47
Software Engineering 33
Sequence Diagram of Adding
an athlete
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
34/47
Software Engineering 34
Sequence Diagram of
Retrieving an athlete record
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
35/47
Software Engineering 35
Sequence Diagram of Editing
an athlete record
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
36/47
Software Engineering 36
Sequence Diagram of
Deleting an athlete record
STEP 4: For each screen
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
37/47
Software Engineering 37
STEP 4: For each screenclass, model its internal
behavior. The state chart diagram is used to model the behavior of the
screen class.
S C
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
38/47
Software Engineering 38
State Chart Diagram
Basic NotationInitial State
Final State
State
Transition
St t Ch t Di
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
39/47
Software Engineering39
State Chart Diagram
Enhanced Notation
Athl t R dUI St t Ch t
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
40/47
Software Engineering40
AthleteRecordUI State ChartDiagram
Fi dAthl t R dUI St t
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
41/47
Software Engineering 41
FindAthleteRecordUI StateChart Diagram
Athl t Li tUI St t Ch t
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
42/47
Software Engineering 42
AthleteListUI State ChartDiagram
STEP 5 D t th S
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
43/47
Software Engineering 43
STEP 5: Document the ScreenClass.
Attributes and operations are identified.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
44/47
Software Engineering 44
Event-action Table
It is a table format of the internal behavior of the screen class.
It is a table format of the screen's state chart diagram.
It lists the events and the corresponding action that occurswhen the screen class is used.
It is used to validate the state chart diagram and to test thecode of the screen.
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
45/47
Software Engineering 45
Sample Event-action Table
AthleteRecordUI Event-action Table
Current State Event Action Next State
- Access to the AthleteRecordUI
Screen
Display an empty Athlete Screen except foridentified screen elements with default values 1
1 enterTextField() Display the typed value inside the text field 2
2 clickStatusComboBox() Shows a list of athlete status 3
3selectFromList() Display the selected athlete status in the
display field 2
2 enterTextField() Display the typed value inside the text field 2
2 clickCancelButton() Show Exit Confirmation Dialog Box 5
5AnswerYES Exits the Athlete screen without saving any
data displayed on the screen-
5 AnswerNO Close the Exit Confrimation Dialog Box 2
... ... ... ...
STEP 6: Modify the software
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
46/47
Software Engineering 46
STEP 6: Modify the softwarearchitecture.
Replace boundary subsystems with the screen classes.
S
-
7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design
47/47
Software Engineering 47
Summary Report Design
Report Design Consideration
Report Layout Guidelines
Developing the Report Layouts
Forms Design
Form Layout Guidelines
Developing the Form Layouts
Screen and Dialog Design
Screen and Dialog Design Guidelines
State Chart Diagrams
Developing the Screen and Dialog Design