Aps11 design interface

AA
PP
SS
MODUL ANALISA & PERANCANGAN SISTEM
ARIF
RAHMAN
Desain Sistem:
User Interface

User Interface Design
Distinguish between different types of computer users and
design considerations for each.
Identify several important human engineering factors and
guidelines and incorporate them into a design of a user
interface.
Integrate output and input design into an overall user
interface that establishes the dialogue between users and
computer.
Understand the role of operating systems, web browsers,
and other technologies for user interface design.
Apply appropriate user interface strategies to an
information system. Use a state transition diagram to plan
and coordinate a user interface for an information system.
Describe how prototyping can be used to design a user
interface.

System User Classifications
Expert User – an experienced computer user
Spends considerable time using specific application
programs.
Use of a computer is usually considered non-
discretionary.
In the mainframe computing era, this was called a
dedicated user.
Novice User – a less experienced computer user
 Uses computer on a less frequent, or even occasional,
basis.
Use of a computer may be viewed as discretionary
(although this is becoming less and less true).
Sometimes called a casual user.

Commandments of User Interface Design
Understand your users and their tasks.
Involve the user in interface design.
Test the system on actual users.
Practice iterative design.

Human Engineering Guidelines
The user should always be aware of what to do next
Tell user what the system expects right now.
Tell user that data has been entered correctly.
Tell user that data has not been entered correctly.
Explain reason for a delay in processing.
Tell user a task was completed or not completed.
Format screen so instructions and messages
always appear in the same general display area.
Display messages and instructions long enough so
user can read them.

Human Engineering Guidelines (continued)
Use display attributes sparingly.
Default values should be specified.
Anticipate errors users might make.
Users should not be allowed to proceed without
correcting an error.
If user does something that could be catastrophic,
the keyboard should be locked to prevent any
further input, and an instruction to call the analyst or
technical support should be displayed.

Guidelines for dialogue Tone and Terminology
Dialogue – the overall flow of screens and messages for an
application
Tone:
 Use simple, grammatically correct sentences.
 Don’t be funny or cute!
 Don’t be condescending.
Terminology
 Don’t use computer jargon.
 Avoid most abbreviations.
 Use simple terms.
 Be consistent in your use of terminology.
 Carefully phrase instructions—use appropriate action verbs.

User Interface Technology
 Operating Systems and Web Browsers
 GUI
 Windows, Macintosh, UNIX, Linux, Palm OS, Windows CE
 Growing importance of platform independence
 Display Monitor
 Regular PC monitors
 Non-GUI terminals
 Growing importance of devices such as handhelds
Paging – Displaying a complete screen of characters at a time.
Scrolling – Displaying information up or down a screen one line at a time.
 Keyboards and Pointers
 Mouse
 Pens

Graphical User Interfaces Considerations
Windows and frames
Menu-driven interfaces
Pull-down and cascading menus
Tear-off and pop-up menus
Toolbar and iconic menus
Hypertext and hyperlink menus
Instruction-driven interfaces
Language-based syntax
Mnemonic syntax
Natural language syntax

A Classical Hierarchical Menu Dialogue

Pull-Down and Cascading Menus
menu
bar
Pull-down
menu
Cascading
menu
Ellipses indicates
dialogue box

Instruction-Driven Interfaces
Language-based syntax is built around a
widely accepted command language that can
be used to invoke actions
SQL
Mnemonic syntax is built around commands
defined for custom information systems.
Commands unique to that system and
meaningful to user
Natural language syntax allows users to
enter questions and command in their native

Special Considerations for User Interface
Design
Internal Controls – Authentication and Authorization
User ID and Password
Privileges assigned to roles
Web certificates
Online Help
Growing use of HTML for help systems
Help authoring packages
Tool tips
Help wizards
Agents – reusable software object that can operate
across different applications and networks.

Authentication Log-in Screen and Error
Screen

Help Tool Tip, Help Agent, and Natural Language Processing

Automated Tools for User Interface Design &
Prototyping
Microsoft
Access
CASE Tools
Visual Basic
Excel
Visio
Visual Basic Menu
Construction

Additional User Interface Controls

Additional User Interface Controls
Pointer
Label
Frame
CheckBox
ComboBox
HScrollBar
Timer
DirListBox
Shape
Image
Ole
SSTabs
TabStrip
StatusBar
TreeView
ImageList
DBList
DBGrid
PictureBox
TextBox
CommandButton
ListBox
VScrollBar
DriveListBox
FileListBox
Line
Data
CommonDialog
RichTextBox
Toolbar
ProgressBar
ListView
Slider
DBCombo
OptionButton

The User Interface Design Process
1. Chart the user interface dialogue.
State Transition Diagram– a tool used to depict the
sequence and variation of screens that can occur during a
user session.
2. Prototype the dialogue and user interface.
3. Obtain user feedback.
• Exercising (or testing) the user interface
2. If necessary return to step 1 or 2

SoundStage Partial State Transition Diagram

SoundStage Options and Preferences Screen

SoundStage Report Customization dialogue
Screen

Input Design & Prototyping
Define the appropriate format and media for a
computer input.
Explain the difference between data capture, data
entry, and data input.
Identify and describe several automatic data
collection technologies.
Apply human factors to the design of computer
inputs.
Design internal controls for computer inputs.
Select proper screen-based controls for input
attributes that are to appear on a GUI input screen.
Design a web-based input interface.

Data Capture and Data Entry
Data capture – the identification and acquisition of
new data (at its source).
Source documents – forms used to record business
transactions in terms of data that describe those
transactions.
Data entry – the process of translating the source
data or document (above) into a computer
readable format.

Data Processing
Data processing is all processing that occurs
on the data after it is input from a machine
readable form.
In batch processing, the entered data is collected
into files called batches and processed as a complete
batch.
In on-line processing, the captured data is
processed immediately
In remote batch processing, data is entered and
edited on-line, but collected into batches for
subsequent processing.

Input Implementation Methods
Keyboard
Mouse
Touch Screen
Point-of-sale terminals
Sound and speech
Automatic data capture
 Optical mark recognition (OMR)
 Bar codes
 Optical character recognition (OCR)
 Magnetic Ink
 Electromagnetic transmission
 Smart cards
 Biometric

Taxonomy for Computer Inputs
Process Method Data Capture Data Entry Data Processing
Keyboard Data is usually captured on
a business form that
becomes the source
document for input. Data
can be collected real-time.
Data is entered via keyboard.
This is the most common input
method but also the most
prone to errors.
OLD: Data can be collected
into batch files (disk) for
processing as a batch.
NEW: Data is processed as
soon as it has been keyed.
Mouse Same as above. Used in conjunction with
keyboard to simplify data
entry. Mouse serves as a
pointing device for a screen.
Same as above, but the use
of a mouse is most commonly
associated with online and
real-time processing.
Touch Screen Same as above. Data is entered o a touch
screen display or handheld
device. Data entry users either
touch commands and data
choices or enter data using
handwriting recognition.
On PCs, touch screen choices
are processed same as
above. On handheld
computers, data is sorted on
the handheld for later
processing as a remote batch.
Point of Sale Data is captured as close
to the point of sale as
humanly possible. No
source documents.
Data is often entered directly
by the customer or by an
employee directly interacting
with the customer.
Data is almost always
processed immediately as a
transaction or inquiry.

Taxonomy for Computer Inputs (continued)
Sound Data is captured as close to
the source as possible,
even when the customer is
remotely located.
Data is entered using touch-
tones (typically from a
telephone). Usually requires fairly
rigid command menu structure
and limited input options.
processed immediately as
a transaction or inquiry.
Speech Same as sound. Data (and commands) is spoken.
This technology is not as mature
and is much less reliable and
common than other techniques.
processed immediately as
a transaction or inquiry.
Optical Mark Data is recorded on optical
scan sheets as marks or
precisely formed letter,
numbers, and punctuation.
Eliminates the need for data
entry.
processed as a batch.
Magnetic Ink Data is usually prerecorded
on forms that are
subsequently completed by
the customer. The customer
records additional
information on the form.
A magnetic ink reader reads the
magnetized data. The customer-
added data must be entered
using another input method.
processed as a batch.

Taxonomy for Computer Inputs (concluded)
Electromagnetic Data is recorded directly on
the object to be described
by data.
Data is transmitted by radio
frequency.
processed immediately.
Smart Card Data is recorded directly on
a device to be carried by the
customer, employee, or
other individual that is
described by that data.
Data is read by smart card
readers.
processed immediately.
Biometric Unique human
characteristics become data
Data is read by biometric
sensors. Primary applications are
security and medical monitoring
Data is processed
immediately.

Automatic Identification: Bar Codes

Input Design Guidelines
Capture only variable data.
Not data that can be looked up.
Do not capture data that can calculated or
stored in computer programs as constants.
Extended Price, Federal Withholding, etc.
Use codes for appropriate attributes.

Source Document / Form Design Guidelines
Include instructions for completing the form.
Minimize the amount of handwriting.
Data to be entered (keyed) should be
sequenced top-to-bottom and left-to-right.
When possible use designs based on known
metaphors.

Internal Controls for Inputs
The number of inputs should be (to minimize risk of
lost transactions).
 For batch processing
 Use batch control slips
 Use one-for-one checks against post-processing detail reports
 For on-line systems
 Log each transaction as it occurs to a separate audit file
Validate all data
 Existence checks
 Data-type checks
 Domain checks
 Combination checks
 Self-checking digits
 Format checks

Common GUI Controls (Windows and Web)
Text boxes
Radio buttons
Check boxes
List boxes
Drop down
lists
Combination
boxes
Spin boxes
Buttons

Common GUI Controls Uses
Text boxes
 When the input data values are unlimited in scope
Radio buttons
 When data has limited predefined set of mutually exclusive values
Check boxes
 When value set consists of a simple yes or no value
List boxes
 When data has a large number of possible values
Drop down lists
 When data has large number of possible values and screen space is
too limited for a list box
Combination boxes
 When need to provide the user with option of selecting a value from a
list or typing a value that may or may not appear in the list
Spin boxes
 When need to navigate through a small set of choices or directly
typing a data value

Advanced Controls (mostly Windows
interfaces)
Drop down
calendars
Slider edit
controls
Masked edit
controls
Ellipsis
controls
Alternate
numerical
spinners
Check list
boxes
Check tree
boxes

Advanced Controls (mostly Windows
interfaces)

Automated Tools for Input Design and
Prototyping
Old Tools
Record Layout Charts
Display Layout Charts
Newer Prototyping Tools
Microsoft Access
CASE Tools
Visual Basic
Excel
Visio

Input Design Process
1. Identify system inputs and review logical
requirements.
2. Select appropriate GUI controls.
3. Design, validate and test inputs using some
combination of:
a) Layout tools (e.g., hand sketches, spacing
charts, or CASE tools.
b) Prototyping tools (e.g., spreadsheet, PC DBMS,
4GL)
4. As necessary design source documents.

A Logical Data Structure for Input
Requirements
ORDER = ORDER NUMBER
+ ORDER DATE
+ CUSTOMER NUMBER
+ CUSTOMER NAME
+ CUSTOMER SHIPPING ADDRESS = ADDRESS >
+ ( CUSTOMER BILLING ADDRESS = ADDRESS > )
+ 1 { PRODUCT NUMBER +
QUANTITY ORDERED } n
+ ( DEFAULT CREDIT CARD NUMBER )
ADDRESS = ( POST OFFICE BOX NUMBER )
+ STREET ADDRESS
+ CITY
+ STATE

Input Prototype for Video Title Maintenance

Input Prototype for Member Order

Input Prototype for Member Shopping

Input Prototype for Web Shopping Cart

Input Prototype for Web Interface

Output Design and Prototyping
Distinguish between internal, external, and turnaround
outputs.
Differentiate between detailed, summary, and exception
reports.
Identify several output implementation methods.
Differentiate among tabular, zoned, and graphic formats for
presenting information.
Distinguish among area, bar, column, pie, line, radar, donut,
and scatter charts and their uses.
Describe several general principles that are important to
output design.
Design and prototype computer outputs.

Internal Outputs
Internal output – an output intended for system
owners and system users within an organization.
Detailed report – an internal output that presents
information with little or no filtering
 Example: A listing of all customers
Summary report – an internal output that categorizes
information for managers
 Do not have to wade through details.
 Increasingly presented in graphical formats using charts
 Example: A count of customers by region
Exception report – An internal output that filters data to
report exceptions to some condition or standard.
 Example: A listing of customers with past due accounts

External Outputs
External outputs – an output that leaves the
organization organization.
Intended for customers, suppliers, partners, or
regulatory agencies.
Turnaround documents – an external
output that may re-enter the system as an
input.
Most “bills” and invoices include a stub to be
returned by the customer with payment.

Implementation Methods for Outputs
Printed output
Tabular output presents information in columns.
Zoned output places text and numbers into designated
areas
Screen output
Graphic output is the use of pictorial charts to convey
information and demonstrate trends and relationships that
cannot be easily seen in tabular formats.
Point-of-sale terminals
Multimedia
E-mail
Hyperlinks
Microfilm or microfiche

Taxonomy for Computer-Generated Outputs
Distribution
Delivery
Internal Output
(reporting)
Turnaround Output
(external; then internal)
External Output
(transactions)
Printer Detailed, summary, or
exception information
printed on hard-copy
reports for internal
business use.
Business transactions
printed on business forms
that will eventually be
returned as input business
transactions.
printed on business
forms that conclude the
business transactions.
Screen Detailed, summary, or
exception information
displayed on monitors for
internal business use.
displayed on monitors in
forms or windows that will
also be used to input other
data to initiate a related
transaction.
displayed on business
forms that conclude the
business transactions.
Point-of-Sale
Terminals
Information printed or
displayed on special-
purpose terminals
dedicated to specific
internal business
functions.
displayed on a special-
purpose terminal for the
purpose of initiating a follow-
up business transaction.
displayed on special-
purpose terminals
dedicated to
customers.

Taxonomy for Computer-Generated Outputs
(concluded)Distribution
Delivery
Internal Output
(reporting)
Turnaround Output
(external; then internal)
External Output
(transactions)
Multimedia
(audio or video)
Information transformed
into speech for internal
users.
Information transformed into
speech for external users who
respond with speech or tone
input data.
Information
transformed into
speech for external
users.
E-mail Displayed messages
related to internal business
information.
Displayed messages intended
to initiate business
transactions.
Displayed messages
related to business
transactions.
Hyperlinks Web-based links to
internal information that is
enabled via HTML or XML
formats.
Web-based links incorporated
into Web-based input pages to
provide users with access to
additional information.
Web-based links
incorporated into Web-
based transactions.
Microfiche Archival of internal
management reports to
microfilm that requires
minimal physical storage
space.
Not applicable unless there is
an internal need to archive
turnaround documents.
Not applicable unless
there is an internal
need for copies of
external reports.

Chart Types
Line charts show one or more series of data over a period
of time. They are useful for summarizing and showing data
at regular intervals. Each line represents one series or
category of data.
Area charts are similar to line charts except that the focus is
on the area under the line. That area is useful for
summarizing and showing the change in data over time.
Each line represents one series or category of data.
Bar charts are useful for comparing series or categories of
data. Each bar represents on series or category of data.
Column charts are similar to bar charts except that the bars
are vertical. Also, a series of column charts may be used to
compare the same categories at different times or time
intervals. Each bar represents one series or category of
data.

Chart Types (concluded)
Pie charts show the relationship of parts to a whole. They are
useful for summarizing percentages of a whole within a single
series of data. Each slice represents one item in that series of
data.
Donut charts are similar to pie charts except that they can show
multiple series or categories of data, each as its own concentric
ring. Within each ring, a slice of that ring represents one item in
that series of data.
Radar charts are useful for comparing different aspects of more
than one series or category of data. Each data series is
represented as a geometric shape around a central point. Multiple
series are overlaid so they can be compared.
Scatter charts are useful for showing the relationship between two
or more series or categories of data measured at uneven intervals
of time. Each series is represented by data points using either
different colors or bullets.

Output Design with an Old Style Printer
Spacing Chart

Output Design with a Modern CASE Tool

Output Design with a Report Writer Tool

Output Design with a Report Writer Tool
(continued)

Output Design Guidelines
1. Outputs should be simple to read and interpret.
 Include a title.
 Date and time stamp.
 Include sections and headings to segment information.
 Clearly label all fields and columns.
 Include legends for all abbreviations.
 Include only required information. Online provide methods to
expand and contract information.
 Report information in format that does not have to be
manually edited.
 Information should be balanced across the page or screen.
 Provide for easy navigation.
 Avoid computer jargon and error messages.

Output Design Guidelines
2. The timing of outputs is important.
• This can affect how the output is designed an implemented
2. The distribution of (or access to) outputs must be
sufficient to assist all relevant users.
• The choice of implementation method affects distribution
2. Outputs must be acceptable to the system users who
will receive them.
• Systems analyst must understand how the recipient plans to
use the output

Output Design Process
1.Identify system outputs and review logical
requirements.
2.Specify physical output requirements.
3.As necessary, design any preprinted forms.
4.Design, validate and test outputs using some
combination of:
1.Layout tools (e.g., hand sketches, spacing charts, or
CASE tools.
2.Prototyping tools (e.g., spreadsheet, PC DBMS, 4GL)
3.Code generating tools (e.g., report writer)

A Logical Data Structure for Output
Requirements
INVOICE = INVOICE NUMBER
+ INVOICE DATE
+ CUSTOMER NUMBER
+ CUSTOMER NAME
+ CUSTOMER BILLING ADDRESS = ADDRESS >
+ 1 { SERVICE DATE +
SERVICE PROVIDED +
SERVICE CHARGE } n
+ PREVIOUS BALANCE DUE
+ PAYMENTS RECEIVED
+ TOTAL NEW SERVICE CHARGES
+ INTEREST CHARGES
+ NEW BALANCE DUE
+ MINIMUM PAYMENT DUE
+ PAYMENT DUE DATE
+ ( DEFAULT CREDIT CARD NUMBER )
+ ( [ CREDIT MESSAGE, PAYMENT MESSAGE ] )
ADDRESS = ( POST OFFICE BOX NUMBER )
+ STREET ADDRESS
+ CITY
+ STATE
+ POSTAL ZONE

Tabular Report Design Principles
Design Issue Design Guideline Examples
Page Size Today the page sizes of choice are
standard (8½" x 11") and legal (8½" x 14").
Not applicable
Page Orientation Portrait orientation is often preferred
because it is oriented the way we orient
most books and reports; however,
landscape is often necessitated for tabular
reports because more columns can be
printed.
Page Headings At a minimum, page headers should
include a recognizable report title, date and
time, and page numbers.
Report Legends A legend is an explanation of abbreviations,
colors, or codes used in a report. In a
printed report, a legend can be printed on
only the first or last page. On a display
screen, a legend can be made available as
a pop-up dialogue box.
portrait
landscape
JAN 4, 2004
Page 4 of 8
Oversubscriptions By Course
REPORT LEGEND
SEATS – Number of seats in classroom
LIM – Course Enrollment Limit

Tabular Report Design Principles (cont.)
Column
Headings
Column headings should be short and
descriptive. Avoid abbreviations or include
a Report Legend
Self-explanatory
Heading
Alignments
Alignment should be tested with users for
preferences with a special emphasis on the
risk of misinterpretation of the information.
Column Spacing If columns are too close, users may not
properly differentiate between the columns.
If they are too far apart, the user may have
difficulty following a single row. Rule of
thumb is to use 3-5 spaces between each.
Self explanatory
Row Headings The first one or two columns should identify
data that differentiates each row. Rows
should be sequenced in a fashion that
supports their use. Frequently rows are
sorted on a numerical key or alphabetically.
NAME
XXXXXXX XXXXXX
AMOUNT
$X.XX
STATUS
X
STUDENT ID STUDENT NAME
999-38-8476 Mary Ellen Kukow
999-39-5857 Robert Flynn

Tabular Report Design Principles (concluded)
Formatting Data is often stored without formatting
characters to save storage space.
Outputs should reformat data to match
the users’ norms.
Control Breaks Groups of rows should be logically
grouped in the report. The transition from
one group to the next is called a control
break and is frequently followed by
subtotals for the group.
End of Report The end of a report should be clearly
indicated to ensure that users have the
entire report.
As stored: As output:
307877262 307-87-7262
8004445454 (800) 444-5454
02272004 Feb 27, 2004
*** END OF REPORT ***
RANK NAME
SALARY
CPT JANEWAY, K
175,000
CPT KIRK, J
225,000
CPT PICARD, J
200,000
CPT SISKO, B
165,000
CAPTAINS TOTAL
765,000
LTC CHAKOTAY
110,000
OTC DATA
125,000
LTC RICKER, W
140,000

Screen Output Design Principles
Screen Design
Consideration
Design Guidelines
Size The designer should consider the “lowest common denominator.” The default window
size should be less than or equal to the worst resolution display in the user
community.
Scrolling On-line outputs have the advantage of not being limited by the physical page. This
can also be a disadvantage if important information such as column headings scrolls
off the screen. If possible, freeze important headings at the top of a screen.
Navigation Users should always have a sense of where they are in a network of on-line screens.
Users also require the ability to navigate between screens.
Partitioning In Windows, zones are forms within forms. On the Internet, frames are pages within
pages.
Information
Hiding
On-line applications offer capabilities to hide information until it is either needed or
becomes important. Techniques include drill-down and pop-up dialogue boxes.
Highlighting Highlighting can call users’ attention to erroneous data, exception data, or specific
problems. Highlighting can also be a distraction if misused.
Printing Always provide users the option to print a permanent copy of the report.

Record-at-a-Time Output Prototype

Windows/Web Media Player Output
Prototype

Aps11 design interface

More Related Content

What's hot (20)

Similar to Aps11 design interface (20)

More from Arif Rahman (20)

Recently uploaded (20)

Aps11 design interface

Editor's Notes