20.1 Functional Parts of Computer-based Systems System analysis can be regarded as a process for understanding the current system. The conclusions drawn.

20.1 Functional Parts of Computer-based

Systems System analysis can be regarded as a process for understanding the current system.

The conclusions drawn during the analysis form the basis for the system design and other subsequent development activities.

System design provides solution to a problem. Functional parts of a computer-based system:

Hardware platform Software Input Output User interface Database structure Data processing Data control Data security and system security


Systems Functional parts of a computer-based

system:

The functional parts of a computer-based system


Systems Hardware Platform

Hardware platform chosen for a system is based on the expected workload generally.

Hardware platforms differ mainly in computational power and storage capacity.

The advanced technology at the time of making decision affects the type of hardware chosen for a particular system.

It is important to choose appropriate processors, main memory, storage devices, input and output devices to meet the system requirements.

Supporting services (e.g. routine and preventive maintenance) are important for critical systems such as banking systems.


Systems Software

Controls how the computer runs and stores the important data.

Three ways to acquire the software for a system: Developing custom software Purchasing commercial, off-the-shelf (COTS)

software Employing an application service provider

(ASP)


Systems Software

Advantages of developing custom software by in-house programmers or systems analysts:

Cater for special business needs. Totally owned by the organization

Disadvantages: Long development time High cost High risk Maintenance has to be done by in-house staff.


Systems Software

Advantages of purchasing commercial, off-the-shelf (COTS) software:

Lower initial and maintenance cost Reliability and functionality can be guaranteed.

Disadvantage: System functionality may not meet all user

requirements. development time.


Systems Software

Advantage of employing an application service provider (ASP):

No need for the organization to hire or train a group of IT staff

Disadvantages: General control of company data and client data may

be sacrificed. Project will have to be suspended or delayed if the ASP

ceases to operate.


Systems Input and Output

Input of a system: Capital Manpower Information Hardware

Input comes from the environment where the system exists.

Input will then be turned into output by system processes.

Output of a system: Information, products or services delivered by the

system


Systems

The command line interface of DOS (left) and the graphical user interface of Windows (right)

User Interface A place where users interact with the system Graphical, textual and auditory information the

system presents to the user. Methods it provides for the users to control the

system Classified into:

Command line interfaces (CLIs) Graphical user interfaces (GUIs)


Systems User Interface

CLIs are used in operating systems like MS-DOS and UNIX.

In CLI, a user needs to enter various commands via the keyboard to control the system.

GLIs are used in newer operating systems like Microsoft Windows and Mac OS X, and portable electronic devices.

GLI allows users to input commands by selecting menu options or clicking buttons using the mouse.


Systems Database Structure

A centralized data store Enables data to be entered, stored and updated

effectively and efficiently. Database terminology:

Table A collection of related records

Record A collection of related fields about an entity

Key A field (or a combination of fields) which can be used to

uniquely identify a record


Systems

Field name Data type Field length

st_name Text 30

st_id Text 5

st_class Text 2

st_num Numeric 2

‘Student_Record’ table

Database Structure Example of the database design of a school

attendance:


Systems

Field name Data type Field length

late_date Date N/A

late_time Time N/A

st_id Text 5

‘Late Record’ table

Database Structure Example of the database design of a school

attendance:


Systems Data Processing

Converts inputted data of a computer-based system into useful output.

Includes data entry, tabulation, sorting, search, modification, calculation and analysis.

Inputted data: ‘raw materials’ Output produced: ‘product’

Data processing of a school attendance system


Systems Data Control

A measure used to increase the correctness of data Garbage-in-garbage-out (GIGO)

Incorrect input produces incorrect output. Errors can occur during:

Data collection Data processing Data storage Output of information

Example: Requiring a user to input his password twice during the

set-up of an account


Systems Data and System Security

All computer-based systems are valuable assets and must be protected from damage and unauthorized access.

Common security measures: Setting login systems Installing a firewall Anti-virus software Backing up data regularly


Systems Data and System Security

All computer-based systems are valuable assets and must be protected from damage and unauthorized access.

Common security measures: Setting login systems Installing a firewall Anti-virus software Backing up data regularly

20.2 User Interface and Human-computer

Interaction Human computer interaction (HCI)

The interaction between the user and the computer User interface determines the usability of the

system, i.e. how easy it is to learn and use the system.

User interface is defined as everything that comes into contact with the user.

Physically Perceptually Conceptually


Interaction Three Aspects of a User Interface

Physical aspects All the physical devices that the user touches Include standard input devices, and all other physical

components that the user needs to complete the task. Perceptual aspects

Everything the user sees or hears Include all the data, information, program menus,

toolbars, instructions, text and graphics displayed on the computer screen.

Conceptual aspects What the user needs to know when using the system Include the operations available in the system, the

necessary procedures to perform a task and the related regulations.


Interaction Three Aspects of a User Interface

The three aspects of a user interface in a school library system

Physical aspects Perceptual aspects Conceptual aspects

User


Interaction Different Types of User Interfaces

Ergonomics HCI and user interface design have derived from

general studies of human interaction with machines Two major components of a user interface:

Presentation language: computer-to-human interaction Action language: human-to-computer interaction

Examples of user interfaces:Command line interface (CLI)Graphical user interface (GUI) Web-based user interface (WUI)

The role of human-computer interaction


Interaction Command Line Interface (CLI)

Users are required to input the exact commands from a keyboard to control the system.

Advantages of the CLI: Relatively low hardware requirements Can be installed on a wide range of computers.

Disadvantages of the CLI: Users must learn and memorize the syntax rules of the

commands. Difficult for inexperienced users to use Incapable of handling multimedia information


Interaction Command Line Interface (CLI)

A program development environment (Turbo Pascal 7.0) with a text-based interface

Inputting commands in a command line interface


Interaction Graphical User Interface (GUI)

Features users windows, graphical icons, menus with lists of commands and the use of a pointing device.

Four components of GUI (WIMP): Window Icon Menu Pointer

Advantages of the GUI: Users are not required to memorize or type commands

in order to execute programs. Superior in presenting graphical information

Disadvantage of the GUI: Lower efficiency and productivity for experienced users

who are proficient in command


Interaction Graphical User Interface (GUI)

The GUI of a Windows application (left) and the GUI of a smartphone (right)


Interaction Web-based User Interface (WUI)

Accepts input and provides output through web pages displayed in a web browser.

Advantages of the WUI: Does not require special software other than a web

browser is needed. Can provide consistent system interfaces for different

platforms.

A web-based document system

Source: http://docs.google.com


Interaction Other User Interfaces

Examples: Touch screens Styluses Speech recognition and synthesis

Becoming increasingly popular Touch screens and styluses are commonly found on

PDAs, mobile phones and tablet PCs. A speech recognition system can recognize a user’s

voice and convert it into text or system commands. Users with limited mobility can benefit a lot as they

do not need to use a mouse or a keyboard.


Interaction Guidelines of User Interface Design

Two basic principles to ensure good interaction between the users and the system:VisibilityAffordance

Visibility All available system control must be visible to users. The control object should provide immediate feedback

to indicate that they are working properly. The control objects should have different appearances

for selected and non-selected states.



Affordance Appearance of a system control object should give

essential clues on its functionality. Considerations of designing the output screen of a

system: Menu design Screen layouts User navigations Headings Data fields Data validations Error and help messages Fonts, colours and styles



- Menu Design Determines the way of navigation. Shows users the least number of steps required to

get from one screen to another in the system.

The design of the menu structure of a school attendance system(Level 1 is shown only)



- Consistent Screen Layout System screen should not be divided into too many

different parts. Each screen or window should follow a consistent

layout design. The buttons and logos on different screens should be

placed in similar positions for easy navigation. Avoids using different icons for the same purpose in

a system.

Avoid using different icons for the same purpose in a system



- Consistent Screen Layout

A login page

The screen layout design of a school attendance system

A main menu page



- User Navigation Pays attention to the arrangement of the input fields

Users should be allowed to move from one field to another using the mouse, the ‘Tab’ or the ‘Enter’ key.

Focus may also automatically move to the next field if the current field is fully filled.

The navigation control of an online book enquiry system



- User Navigation Provides some user-friendly features to facilitate

navigation More related information can be automatically

displayed in a list based on the available information inputted by the user.

The Autocomplete feature provided by a search engine

Source: http://www.google.com



- User Navigation The access control of the system should be carefully

examined. Different users may need different access rights for

the same system. A specific navigation structure should be developed

for each type of user and the appropriate authentication method such as user ID and password should be adopted accordingly.



- Heading Displays system identification and the name of the

function being used on the top of the screen.

The design of headings and sub-menus of a school attendance system



- Data Field Input and output fields must be carefully and neatly

placed on the screen. Consideration should also be given to the field length

and field types. Places a label next to each input field so that the

input content can be identified. Indicates whether a field is mandatory or optional.



- Data Field

The design of labels and input fields of a school attendance system



- Data Field

The design of labels and input fields of a school attendance system



- Data Validation Avoids producing incorrect output (GIGO). Increases the correctness of the inputted data. Other data validation methods:

Length check Range check Format check Type check

Selecting a valid date from a calendar



- Error and Help Messages Informs the user for incorrect input. Error messages must be prepared during the screen

design.

Validating an online registration form — An error message is displayed when the login name is omitted.

Source: http://www.google.com



- Font, Colour and Style Using different fonts, colours and styles to highlight

important information The background colour and style of an application

should match its nature and should not distract the user.

Too many colours and styles can be unattractive and confusing.



- Font, Colour and Style Using different fonts, colours and styles to highlight

important information The background colour and style of an application

should match its nature and should not distract the user.

Too many colours and styles can be unattractive and confusing.

20.3 Fundamental Structured Design

System Process One of fundamental elements in system design Should be shown in a standard way to all system

designers. Provides a good reference point for when the system

is updated at a later date. Systematic ways of representing system processes:

System flowchartStructure chartData flow diagram (DFD) Data dictionary


System Process

Systematic tools used in system design


System Flowchart A graphical representation of various processes, files,

databases and associated manual procedures in a system

Aims at provide a high level view of the system design.

Illustrates the complex relationships between input, processes and output.

Uses the same set of symbols as the program flowchart.

But also includes additional symbols to illustrate the sequence of the system processes and the overview of data flow.


System Flowchart

Common system flowchart symbols


System Flowchart

The system flowchart of a school attendance system


Structure Chart A graphical representation of the relationships

between different modules of a system A top-down decomposition of the proposed functions

of a system Does not show the system logic. Describes the interaction between independent

modules and the data passed among them.


Structure Chart

The structure chart of a school attendance system


Structure Chart Module

Basic component for identifying a function Calling module

A higher level module that sends data to a lower level module

Called module Lower level module

Lines Connecting the modules indicate the calling structure

Little arrows Showing the data or control information passed

between the modules


Structure Chart

Common symbols in a structure chart


Structure Chart Data couples

Represented by an arrow with a circle at one end. Can be a single data item or higher-level data

structure. Control couple

Represented by an arrow with a darkened circle. Contains internal information for indicating certain

results.


Structure Chart

A detailed structure chart of a school attendance system


Data Flow Diagram (DFD) A valuable graphical modelling tool for a system Shows all the main requirements of a system. Shows the process of data flowing through the

system instead of the hardware involved. Shows the program logic. Four symbols of the data flow diagram:

External entityData flowProcessData store


Data Flow Diagram (DFD)

Symbols of the data flow diagram


Data Flow Diagram (DFD) External entity

A component that can send data to or receive data from the system

Also called a source or destination of data which is considered outside the system boundaries

Data flow Shows the movement of data from one point to

another. Can be one-way or two-way flow. Should be labelled with a noun.


Examples of processes

Data Flow Diagram (DFD) Process

Represented by a rectangle with rounded corners Represents a transformation of data. Data flow leaving a process is always labelled

differently from the one entering the process. Should be labelled with a clear name indicating its

purpose. A unique reference number is assigned to each

process. Data store

Represents the location where data is stored.


Data Flow Diagram (DFD) Additional considerations in drawing a data flow

diagram Data flow can only occur between the following pairs of

components:

Examples of valid data flows


Examples of valid and invalid data flows


diagram The only way data can go to or from a data store is via

a process:



diagram Data flow lines should not cross each other. Duplicated external entities and data stores can be

included to avoid line crossing. The notation of the data flow diagram is simple and

easily understood by users and system designers. Data flow analysis allows system designers to

examine the data before and after a process.


Context Diagram (Level 0 DFD) The construction of a set of data flow diagrams

begins with the design of a context diagram (level 0 DFD).

Describes the essence of a system. Represents the top-level diagram in a set of data

flow diagrams. Contains only one process (with process ID zero) that

represents the entire system. Major data flows between the system and all

external entities are shown in a context diagram. Data stores that represent the inner details of a

system should not be shown.


Context Diagram (Level 0 DFD)

The context diagram (level 0 DFD) of a school library system


Context Diagram (Level 1 DFD) A context diagram can be decomposed into a level 1

DFD Includes further system details. Input and output of a context diagram remain

unchanged. The only process is decomposed into lower level

processes and data stores. Once the major processes have been identified, data

flow lines connecting the processes and the external entities can be identified.



A partially completed level 1 DFD of the school library system


Context Diagram (Level 1 DFD) Appropriate data flow lines within the system can

now be constructed to connect the data stores with the processes.

The level 1 DFD of the school library system


Context Diagram (Level 2 DFD) Each process in a level 1 DFD can further be

decomposed to create a more detailed level 2 DFD. Appropriate data flow lines can be constructed

between the processes, entity and data store. Decomposed processes cannot produce output or

receive input that is not in the upper level process. Decomposition process can be repeated for other

remaining processes of the system to form a full set of level 2 DFDs.



The level 2 DFD of the process ‘2.0 Process search book’

Data dictionary Organizes and documents the data described in a

DFD systematically. A collection of descriptions of the data objects or

items in a system Contains names, descriptions, types, contents and

associated processes of data. Helps systems analysts to understand the data items

involved. Created by examining the contents of the data flows,

data stores and processes of a DFD


Data Structure and Data Element Data contents decomposed into small data

structures or data element Data structure

Consists of data elements which are self-defined and cannot be further decomposed.

Example: Student record Data element

Example: Student name


Data Structure and Data Element


Hierarchy of data structure

Data Structure Conventions Usually described by mathematical expressions


Symbols of data structure

Symbol Meaning Example

= Is composed of Telephone = Area code + Local number

+And Total mark = Test mark + Examination

mark

{ } Repetitive elementsBorrow record = Student ID + 1 {Book ID}( A student is allowed to borrow at most 6 books.)

[ ] Either/or Sex = [Male/Female]

( ) Optional elementAuthor = Name + Sex + Date of Birth + (Date of death)

6

Data Structure Conventions Usually described by mathematical expressions


Symbols of data structure

Symbol Meaning Example

= Is composed of Telephone = Area code + Local number

+And Total mark = Test mark + Examination

mark

{ } Repetitive elementsBorrow record = Student ID + 1 {Book ID}( A student is allowed to borrow at most 6 books.)

[ ] Either/or Sex = [Male/Female]

( ) Optional elementAuthor = Name + Sex + Date of Birth + (Date of death)

6

20.4 Gantt Chart

What is Gantt Chart? One of the simplest planning tools for system

development projects The duration of each activity is represented by the

length of a bar.

An example of a Gantt chart for a system development project

Completed task

Uncompleted task

20.4 Gantt Chart

Gantt chart can be drawn to show the progress of the system development.

Steps of drawing Gantt chart: Identify the tasks involved and estimate the time required

for each task. The tasks are listed from top to bottom in the correct

sequence. The increased workload generated by the concurrent tasks

must be factored in. The advantages of using a Gantt Chart:

Allow a project manager to make a realistic assessment on the progress and the completion time of a project.

Allow a project manager to concentrate on the resources to be allocated to each activity.

Dependencies of various activities in a project can be easily shown.

Concurrent activities can be easily shown.

20.4 Gantt Chart

Gantt chart can be drawn to show the progress of the system development.

Steps of drawing Gantt chart: Identify the tasks involved and estimate the time required

for each task. The tasks are listed from top to bottom in the correct

sequence. The increased workload generated by the concurrent tasks

must be factored in. The advantages of using a Gantt Chart:

Allow a project manager to make a realistic assessment on the progress and the completion time of a project.

Allow a project manager to concentrate on the resources to be allocated to each activity.

Dependencies of various activities in a project can be easily shown.

Concurrent activities can be easily shown.

20.1 Functional Parts of Computer-based Systems System analysis can be regarded as a process for understanding the current system. The conclusions drawn.

Documents