User Interface and Program Design

Lecture 8
The System Development Life Cycle
What is a detailed design?
Detailed design - specifications for components in proposed solution

Includes several activities

Input and
Database Program
output
design design
design
User Interface Design: Objectives
■ Describe several fundamental user interface design
principles.
■ Explain the process of user interface design.
■ Discuss how to design the user interface structure.
■ Explain how to design the user interface standards.
■ Be able to design a user interface.
Overview
 Introduction
 Principles for User Interface Design
 User Interface Design Process
 Navigation Design
 Input Design
 Output Design
 Applying the Concepts
Introduction
• Interface design: the process of defining how the system will
interact with external entities (e.g., customers, suppliers, other
systems).
• User interface design: defines the way in which the users will
interact with the system and the nature of the inputs and outputs
that the system accepts and produces.
• System interfaces: are designed as part of a systems integration
effort. They are defined in general terms as part of the physical
data flow diagrams (DFDs) and in the non-functional
requirements (operational requirements), and are designed in
detail during program design
Fundamental components of User interface
1. Navigation mechanism:
=> The way in which the user gives instructions to the system and tells it
what to do (e.g., buttons, menus).
2. Input mechanism:
=> The way in which the system captures information (e.g., forms for
adding new customers).
3. Output mechanism:
=> The way in which the system provides information to the user or to
other systems (e.g., reports, Web pages).
 Principles for User Interface design
 The goal is to make the interface pleasing to the eye and simple to use, while
minimizing the effort users expend to accomplish their work.
Principle Description
Layout Attractive - The interface should be a series of areas on the screen that are used
consistently for different purposes e.g. a top area for commands and navigation, a middle
area for information to be input or output, and a bottom area for status information.
Clarity/ Content Outputs should be self-explanatory. Users should always be aware of where they are in
awareness the system and what information is being displayed.
Aesthetics Visual appeal. Interfaces should be functional and inviting to users through careful use
of white space, colors, and fonts.
User experience ease of use and ease of learning
Consistency Consistency in interface design enables users to predict what will happen before they
perform a function.
Minimize user effort The interface should be simple to use.
Flexibility Provide Users with Help and Feedback
 User Interface Design Process
 The analysts examine the DFDs and use
cases in the analysis phase and interview
users to develop use scenarios that describe
users’ commonly employed patterns of
actions so that users can quickly and
smoothly perform the scenarios.
 Interface structure diagram (ISD) -defines
the basic structure of the interface e.g.,
screens, forms, and reports
 Interface standards the basic design
elements on which interfaces in the system
are based.
 Interface design prototype - for each of
the individual interfaces in the system, e.g.
navigation controls, input screens, output
screens, forms, & reports.
 Interface evaluation - determine whether
interfaces are satisfactory and how they can
be improved.
 Interface design
prototype
• Approaches:
1) Storyboards
2) HTML prototypes
Fig. A paper-based
3) Language prototypes storyboard. The
• An interface design storyboard shows hand-
prototype is a mock-up or drawn pictures of what
a simulation of a the screens will look like
computer screen, form, and how they will flow
from one screen to
or report.
another
• A prototype is prepared
for each interface in the
system to show the users
and the programmers
how the system will
perform.
HTML prototypes and Language prototypes
• An HTML prototype - is built with the use of Web pages created in HTML
• A language prototype - is an interface design prototype built in the actual language or
by the actual tool that will be used to build the system.
 Advantages and disadvantages of the IDP approaches
1. Storyboard - simulation 2. HTML Prototype - uses web pages 3. Language Prototype -
process, uses sketches on designed either directly in HTML or simulation process uses
paper of the screen layout indirectly by using another software programming language, such as
package Visual Basic, to create a prototype
• Advantages of the new system.
• Advantages
• Cheap
• User can appreciate an Advantages
• Quick appropriate look and feel of the  Coding for the prototype may
• Needs only paper, pen, product be reusable for the final
creative ability • Some simulations allow users program
• Reusability to enter data into forms  screens look exactly like the
• Disadvantages • Disadvantages final product
• Screens which are simulating  most look detailed
• Doesn’t provide the an interface that is not web
look and feel of actual Disadvantages
based may differ from the
screens  Slower to develop
final product coded in
• Very early part of the another language and not  More man-hours means greater
design phase, little detail offered for browser viewing expense
Interface evaluation
• Heuristic evaluation -- involves the development of a checklist of
principles of interface design to use in evaluating the prototype.
• Walk through evaluation -- People who will use the final system
are lead through the prototype by the analysts who demonstrates it.
The users are encouraged to suggest improvements to the interfaces
and these are noted.
• Interactive Evaluation -- people who are to use the system are
given access to it to work through it as individuals with the analysts
observing. The analysts document any confusion or problems users
experience with the prototype.
• Formal Usability Testing -- This testing process is used with
commercial software products and especially software developed by
large organisations.
Navigation Design
• The navigational design, showing how to move from one page to the
next using buttons, tabs, links, and pull-down menus
• The goal of the navigation system is to make the system as simple as
possible to use.
• Basic Principles - All controls should be clear and understandable
and placed in an intuitive location on the screen
o Prevent Mistakes
o Simplify Recovery from Mistakes
o Use Consistent Grammar Order
Types of Navigation Controls
• There are three basic software approaches for defining user
commands: Application layer - interface to the user (web browser,
SSH client, etc)
i) Languages - With a command language, the user enters
commands in a special language developed for the computer
system (e.g., UNIX and SQL both use command languages).
ii) Menus - A menu presents the user with a list of choices, each
of which can be selected.
iii) Direct manipulation - With direct manipulation, the user
enters commands by working directly with interface objects.
For example, users can change the size of objects in Microsoft
PowerPoint by clicking on objects and moving the sides, or
they can move files in Windows Explorer by dragging the file
names from one folder to another.
 Enhance the Interface
• A designer can include many
features, e.g.
• Menu bars, toolbars, dialog
boxes, text boxes, toggle
buttons, list boxes, scroll
bars, drop-down list boxes,
option buttons, check
boxes, command buttons,
and calendar controls, e.t.c.

Fig. A data entry screen for a student registration system

 Menus
• A designer can include many
features, e.g.
• Menu bars, toolbars, dialog
boxes, text boxes, toggle
buttons, list boxes, scroll bars,
drop-down list boxes, option
buttons, check boxes,
command buttons, and
calendar controls, e.t.c.

Fig. A data entry screen for a student registration system

Messages
 Input Design

 Input mechanisms facilitate the entry of data into the computer system,
whether highly structured data, e.g. order information (e.g., item numbers,
quantities, costs), or unstructured information (e.g., comments).

 Input design - designing the screens used to enter the information, as well
as any forms on which users write or type information (e.g., time cards,
expense claims).

 The goal of input design is to capture accurate information for the system
simply and easily
 Basic Principles
• Use Online and Batch Processing Appropriately
• Online processing - is most commonly used when it is important to have real-time
information about the business process. For example, when you reserve an airline seat, the
seat is no longer available for someone else to use, so that piece of information must be
recorded immediately.
• Batch processing - all the inputs collected over some period are gathered together and
entered into the system at one time in a batch. Some business processes naturally generate
information in batches. For example, most hourly payrolls are done by batch processing
because time cards are gathered together in batches and processed at once.
• Capture Data at the Source
• Source data automation refers to using special hardware devices to automatically capture
data without requiring anyone to type it e.g. use bar code readers to scan products
• Minimize Keystrokes
• The system should never ask for information that can be obtained in another way (e.g., by
retrieving it from a database or by performing a calculation).
Types of Inputs and validation
There are many different types of inputs e.g.
• Text - As the name suggests, a text box is used to enter text.
• Numbers - A number box is used to enter numbers.
• Selection Box - A selection box enables the user to select a value
from a predefined list.
 There are six commonly used types of selection boxes: check boxes, radio
buttons, on-screen list boxes, drop-down list boxes, combo boxes, and scroll
bars
Input Validation
• All data entered into the system must be validated in order to ensure
accuracy. Input validation (also called edit checks) can take many forms.
• Types of validation checks: completeness check, format check, range check,
check digit check, consistency check, and database check
User Input Options
 OUTPUT DESIGN
 Information is supplied as reports, responses to queries, or the recording of
transactions.
 Output design - designing both screens and reports in other media, e.g. paper
and the Web.
 Types of reports;
a) Detail reports - the details of the information e.g. listing of all sales
transactions for a month
b) Summary reports - present summaries of data. E.g. weekly sales report by
category, student enrolment per semester according to discipline.,
c) Exception reports - display information according to selected criteria. E.g.
the list of customers with payments more than 60 days
d) Turnaround documents - document that serves both as an output and later
as an input to the system e.g. power bill, credit card bill
e) Graphs
Program Design
 Program design - defines the programs that need to be written
and exactly what each program will do.

 The program design is used by programmers to write code.

 We first describe the structure chart, a helpful tool that illustrates

the overall organization of a program.

 Then we present the program specification, which contains

detailed information about each module of code.
Guidelines for modular programming
1) Keep each module to a manageable size (ideally including only
one function).
2) Pay particular attention to the critical interfaces (the data and
control variables passed to other modules).
3) Minimize the number of modules the user must modify when
making changes.
4) Maintain the hierarchical relationships set up in the top-down
phases.
Program logic
• System developers can use multipurpose tools to help them
translate the system logic into properly functioning program
modules.
• These generic/multipurpose tools include
• ERDs,
• Flowcharts
• Pseudocode,
• Decision tables, and
• Decision trees.
Flowcharts
• Flowcharts can be used to represent program logic and in
visualizing a modular program design.

• A flowchart represents logical rules and interaction

graphically, using a series of symbols connected by arrows.

• Using flowcharts, programmers can break large systems

into subsystems and modules that are easier to
understand and code.
Flowcharts (cont…)
• Basic flowchart
Structure charts
• Structure chart - A top-down representation of business
functions and processes. Also called an functional
decomposition diagram (FDD).

• Structure charts show the program modules and the

relationships among them.

• In a structure chart, symbols represent various actions or

conditions.
Structure charts (cont…)
• MODULE: A rectangle
represents a module.
• In the figure, vertical lines at
the edges of a rectangle
indicate that module 1.3 is a
library module.
• A library module is reusable
code and can be invoked from
more than one point in the
chart.
Example: Structure charts (cont…)
An arrow with an
empty circle
represents a data
couple.
Example: Sample of a Sales Promotion Policy

• Preferred customers who order more than $1,000 are entitled to

a 5% discount, and an additional 5% discount if they used our
charge card.

• Preferred customers who do not order more than $1,000 receive

a $25 bonus coupon.

• All other customers receive a $5 bonus coupon.

Pseudocode
• Pseudocode is a technique for representing program logic.
• Pseudocode is similar to structured English
• Pseudocode is not language-specific, so it can be used to
describe a software module in plain English without requiring
strict syntax rules.
• Using pseudocode, a systems analyst or a programmer can
describe program actions that can be implemented in any
programming language.
Pseudocode of the sales promotion policy
IF customer is a preferred customer, and
IF customer orders more than $1,000 then
Apply a 5% discount, and
IF customer uses our charge card, then
Apply an additional 5% discount
ELSE
Award a $25 bonus coupon
ELSE
Award a $5 bonus coupon
Decision trees and tables
• Analysts and programmers can use decision tables and decision
trees during system development, as code modules that
implement the logical rules are developed.

Fig. Sample decision tree that reflects the sales promotion policy
Coding
• Coding - the process of turning program logic into specific
instructions that the computer system can execute.
• Commonly used programming languages: Visual Basic, Java,
and Python
• Many commercial packages use a proprietary set of commands.
• As the trend toward Internet-based and mobile applications
continues, HTML/XML, JavaScript, Swift, and other web-
centric languages will be used extensively.
Coding (cont…)
• Integrated development environment (IDE) - make it easier to
program interactive software products by providing built-in
tools and advanced features, such as real-time error detection,
syntax hints, highlighted code, class browsers, and version
control.
• IDE examples: Apple Xcode and Microsoft .NET (commercial
packages), Eclipse (opensource)