System Design
Designing the Human Interface
Input processes
Navigation mechanisms
Output screens and reports
Designing Databases
System interfaces
System architecture
Classic Design Mistakes
Reducing design time
Feature creep
Switching tools in mid-project
Design Considerations
Novices – ease of learning
Experts – ease of use
Understand the underlying business function
The DFD will provide a checklist of user tasks to
include in the interface design
Use a modular design
External Design Factors
User related
Task related
System related
Environment related
Designing Interfaces and
Provide features that promote efficiency
Build an interface that is easy to use
Designing Layouts
Standard formats similar to paper-based
forms and reports should be used
Screen navigation on data entry
screens should be left-to-right, top-tobottom as on paper forms
Menus should be broad and shallow
with menu items grouped by interface
objects rather than actions
Types of Menus
Menu bar
Always on screen
Tool bar
Remains on screen until closed
Drop down menu
Disappears after one use
Pop up menu
Disappears after one use
Tab menu
Remains on screen until closed
User Interface Controls
Dialog or text box
Appears when user clicks on a command button
Toggle button
Used to represent on or off status
Check box
If several items can be selected from a list
Radio buttons
If only one item can be selected from a set of
mutually exclusive items
Drop down list
A one-line box that opens to reveal a list
Permits users to type as well as scroll the list
Designing Human-Computer
Error handling
Designing Forms and Reports
System inputs and outputs are produced at
the end of the analysis phase
Precise appearance was not defined during this
Forms and reports are integrally related to
DFD and E-R diagrams
Forms and Reports
A business document that contains some predefined data
and may include some areas where additional data are to
be filled in
An instance of a form is typically based on one database
A business document that contains only predefined data
A passive document for reading or viewing data
Typically contains data from many database records or
Principles of input design
Use on-line and batch processing
Capture data at the source
Source data automation
Minimize keystrokes
Use default values and lists
Types of Input Devices
Keyboard and Mouse
Telephone and voice
Touch screen
Video input
Digital camera
Electronic whiteboard
Handheld computer pen
Designing Data Entry Screens
Never require data that are already online or that can
be computed
Always provide default values when appropriate
Use character replacement when appropriate
Always place a caption adjacent to fields
Make clear the type of data units requested for entry
Provide formatting examples
Automatically justify data entries
Provide context-sensitive help when appropriate
Functional capabilities
Cursor control capabilities
Editing capabilities
Exit capabilities
Help capabilities
Types of Data Errors
Adding characters
Deleting characters
Entering invalid data
Reversing the sequence of characters
Validation Tests
Expected values
Missing data
Check digit
Batch Controls
Audit Trail
A record of the sequence of data entries
and the date of those entries
Providing Feedback
1. Error and Warning Messages
Explain the reason and suggest corrective action
2. Confirmation message
If the user selects a potentially dangerous choice
3. Acknowledgement Messages
Provide information to reassure the user that
action has taken place
4. Delay message
If an activity takes more than 5 seconds
5. Help message
Help Guidelines
 Help messages should be short and to the
 Information in help messages should be easily
absorbed by users
 It is useful to explicitly show users how to
perform an operation
Providing Help
Context-Sensitive Help
Enables user to get field-specific help
Users should always be returned to
where they were when requesting help
Types of Help
On Help
On Concepts
On Procedures
On Messages
On Menus
On Function keys
On Commands
On Words
Principles of output design
Understand report usage
Real time versus batch reports
Manage information load
Provide the information needed, not the
information available
Minimize bias
Presentation of information should mach
the way that information is used
Designing Forms and Reports
Follows a prototyping approach
Requirements determination
Who will use the form or report?
What is the purpose of the form or report?
When is the report needed or used? How
often must it be updated?
Where does the form or report need to be
delivered and used?
How many people need to use or view the
form or report?
Printed Output
Detail reports
Exception reports
Summary reports
Deliverables and Outcome
Design specifications for forms/reports
1. Narrative
2. Screen Design
3. Testing and usability assessment
Design Guidelines
Use meaningful titles
Describe content and use
Date to identify the current version
Date to know when the data was valid
Include meaningful information
the needed information
the right amount of detail
Balance the layout
Adequate spacing and margins
Label all data and entry fields
Design an easy navigation system
Display page numbers
Use sparingly to draw user to or away
from certain information
Blinking and audible tones should only
be used to highlight critical information
requiring user’s immediate attention
Methods should be consistently
selected and used based upon level of
importance of emphasized information
Displaying Text
Display text in mixed upper and lower case
and use conventional punctuation
Use double spacing if space permits. If not,
place a blank line between paragraphs
Left-justify text and leave a ragged right
Do not hyphenate words between lines
Use abbreviations and acronyms only when
they are widely understood by users and are
significantly shorter than the full text
Formatting columns, rows & text
Sort in a meaningful order
Place a blank line between every 5 rows in long
Similar information displayed in multiple columns
should be sorted vertically
Columns should have at least two spaces between
Allow white space on printed reports for user to
write notes
Use a single typeface, except for emphasis
Use same family of typefaces within and across
displays and reports
Avoid overly fancy fonts
Formatting Data
Right-justify numeric data and align columns
by decimal points or other delimiter
Left-justify textual data. Use short line length,
usually 30 to 40 characters per line
Break long sequences of alphanumeric data
into small groups of three to four characters
Designing Dialogues
Sequence in which information is displayed to
and obtained from a user
Minimize user effort
Consistency in sequence of actions,
keystrokes, and terminology
Three step process
1. Design dialogue sequence
2. Build a prototype
3. Assess usability
Interface Structure Diagram
Dialogue Diagram
 A formal method for designing and
representing human-computer dialogues
using box and line diagrams
 Consists of a box with three sections
1. Top: Unique display reference number used
by other displays for referencing dialogue
2. Middle: Contains the name or description of
the display
3. Bottom: Contains display reference numbers
that can be accessed from the current display
Initial prototype is designed from
Users review prototype design and
either accept the design or request
If changes are requested, the
construction-evaluation-request cycle is
repeated until the design is accepted
Assessing Usability
Heuristic evaluation
Uses a checklist of design principles
Walkthrough evaluation
Demonstrates prototype to users
Interactive evaluation
User navigates through the prototype
Formal usability testing
User works directly with the software
alone in a special lab
Internet Development:
Design Guidelines
Navigation via cookie crumbs
 A technique that uses a series of tabs on a
Web page to show users where they are and
where they have been in the site
 Tabs are hyperlinks to allow users to move
backward easily within the site
 Two important purposes
Allows users to navigate to a point previously visited
Shows users where they have been and how far
they have gone from point of entry into site
Internet Development:
Design Guidelines
Lightweight Graphics
The use of small images to allow a Web page to
be displayed more quickly
Forms and Data Integrity
All forms that record information should be clearly
labeled and provide room for input
Clear examples of input should be provided to
reduce data errors
Site must clearly designate which fields are
required, which are optional and which have a
range of values
Internet Development:
Design Guidelines
Template-based HTML
Templates to display and process common
attributes of higher-level, more abstract
Creates an interface that is very easy to

similar documents