meljun cortes jedi slides-4.5 interface design

7/31/2019 MELJUN CORTES JEDI Slides-4.5 Interface Design

1/47

Software Engineering 1

Design Engineering

Interface Design

TOPIC FIVE


2/47


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


3/47


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.


4/47


5/47


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.


6/47


Report Design

Reports can be placed in an ordinary paper, continuousforms, screen-based, microfilm or microfiche.


7/47


Report Design Consideration

Number of Copies and Volume

Report Generation

Report Frequency

Report Figures

Media


8/47


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.


9/47



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


10/47



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.


11/47



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.


12/47


Developing the Report

Layouts1. Define Report Layout Standards.2. Prepare the Report Layouts.


13/47


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.


14/47


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.


15/47


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.


16/47


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



Total Number XXXXX Members : 9999


17/47


Forms Design

Forms are usually used for input when a workstation is notavailable.

It is sometimes used as a turnaround document.


18/47


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


19/47


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.


20/47


Developing the Form Layouts

1. Define the standards to be used for designing the forms

2. Prepare sample forms.


21/47


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.


22/47


STEP 2: Prepare Form

Samples. Using the standard defined in step one, prepare samplecopies and present it to end-users.


23/47



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


24/47



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.


25/47


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.


26/47


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)


27/47


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


28/47


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


29/47


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.


30/47


Collaboration Diagram


31/47


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



32/47


STEP 3: For each screenclass, model the behavior

with other classes. Identify the sequence of the interaction using the sequence

diagram.


33/47


Sequence Diagram of Adding

an athlete


34/47


Sequence Diagram of

Retrieving an athlete record


35/47


Sequence Diagram of Editing

an athlete record


36/47


Sequence Diagram of

Deleting an athlete record



37/47


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


38/47


State Chart Diagram

Basic NotationInitial State

Final State

State

Transition

St t Ch t Di


39/47

Software Engineering39

State Chart Diagram

Enhanced Notation

Athl t R dUI St t Ch t


40/47

Software Engineering40

AthleteRecordUI State ChartDiagram

Fi dAthl t R dUI St t


41/47


FindAthleteRecordUI StateChart Diagram

Athl t Li tUI St t Ch t


42/47


AthleteListUI State ChartDiagram

STEP 5 D t th S


43/47


STEP 5: Document the ScreenClass.

Attributes and operations are identified.


44/47


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.


45/47


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


46/47


STEP 6: Modify the softwarearchitecture.

Replace boundary subsystems with the screen classes.

S


47/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 Guidelines

State Chart Diagrams

Developing the Screen and Dialog Design

meljun cortes jedi slides-4.5 interface design

Documents