Transcript Web Database Interactivity

1
What is HCI?
 Human Computer Interaction is a term used to
describe the interaction between a user and a
computer.
 ‘Computer’ is not just the PC, but also machines like
cash points, photocopiers or even a jumbo jet
2
Nature ofErgonomics
HCI
Cognitive
Psychology
& Human
Factors
Engineering
Social &
Organisational
Psychology
HCI
Design
Computer
Science
Artificial
Intelligence
Soft
sciences
Linguistics
3
The Importance Of HCI
A good design can ensure users carry out their tasks
 Safely - a jumbo jet pilot
 Effectively
 users do not video the wrong side
 Efficiently
 Users do not spend 5 minutes trying to find the
correct way to insert a cash card
 Well-designed systems can improve the output of
employees
 Enjoyably -a child learning mathematics
4
Consequences of poor interface design
 User frustration
 Low productivity
 Stress
 Under-utilisation of system
 Increased mistakes in data entry
 Poor volume of throughput
5
Designing Useable Systems
 Who will use the system
 What tasks they will be doing
 The environment
 What is technologically feasible?
6
Colour
 Colour is very effective for highlighting, but must
be used carefully.
 Colours have a meaning
 Red - danger / warmth
 Green – normality
 Blue – cold
 Colour can be used to make things easier to spot,
such as when you are overdrawn.
7
Colour and Design
 Use background colours carefully
 The screen should not contain too much bright
colour.
 Don’t use too many colours on one screen
 do not exceed 6 different colours
 Be consistent across the whole system
 one colour should not be used for more than one
purpose.
8
Colour Hints
 Colours which clash should be avoided e.g. purple
with pink.
 Care should be taken as 8% of men and 0.4% of
women are colour blind, and have difficulty with
colours such as green, red, and yellow.
9
Colour Hints (Cont)
 Colour can be used to convey greater amounts of
information more clearly e.g. air traffic control
 Colour should be used to improve user performance
 Colour and brightness effect perceived size. Warm
colours are larger (red, yellow). Cold colours are smaller
(blue, green).
 http://www.soc.staffs.ac.uk/sad/colour.htm
10
Bright Clashing Colours
Colours with insufficient contrast should be
avoided e.g. yellow and white
Avoid text over pictures
11
Presentation And Contrast
 Positive presentation is when the background is
fairly subdued, i.e. white background, dark text
 Negative presentation – dark background, white
text.
 A bright area on a dark background seems larger
than the reverse.
 Which is best???
12
Other
Factors
 Take care in spacing fonts, and choosing a
correct font for screen use.
 Letter Spacing
 |3 looks like a B. Space it out | 3
 Some fonts can be difficult to read, and should be
avoided.
 You must be careful how you word things, so
that they are not misinterpreted. – different
words can mean different things for different
cultures / countries
 Consider the lighting – Different levels of light
can affect the colours seen
13
Microsoft Access And HCI
 Form Design
 Report Design
 AutoExec Macros
 Autonumbers on forms
14
Memory
 Capacity
 STM : Miller’s magic rule (7 + -2)
 LTM : infinity?
 Modality
 STM : Acoustic, visual
 LTM : Semantic
 Permanency
 STM : decays
 LTM : permanent
15
 Aardvark
 Test
 Cat
 George
 Dog
 Tony
 Turtle
 Human
 Snake
 Alien
 London
 Outline
 Bristol
 Enrol
 Robbie Williams
 Student
16
Memory
 Primacy and recent effect
 Minimise distraction during tasks
 Do not overload STM
 Increase structuring of information
 Be consistent.
 Images are helpful when accompanied by text
 Avoid similar sounding names
 Material is far more easily recognised than recalled
17
Remember?
How many words?
Aardvark
Cat
Dog
Turtle
Snake
London
Bristol
Robbie Williams
Test
George
Tony
Human
Alien
Outline
Enrol
Student
18
Design Principles
 Useable
 Internally Transparent to the User
 Autoexec macro
 Guidance not control
 Predictability
 Reversibility
 Consistency
 Reduces learning load
 Increases recognition
19
Design Principles
 Compatibility
 Between user’s mental model & task model
 Economy
 Minimum number of steps necessary
 Structure
 To reduce complexity
20
Fonts
 Clear and not unusual. Some fonts can be difficult
to read, and should be avoided.
 Don’t use more than 2 fonts on a page
 Take care in spacing fonts - |3 looks like a B. Space
it out | 3
 You must be careful how you word things, so that
they are not misinterpreted.
21
Legibility
 Be concise. Icons need careful design in order to
be understood
 Avoid blinking, zooming or moving text
 Font Size to be readable
 Left Justified most of the text – can centre or
right justify a few lines for effect
 Sans Serif Fonts are more readable, but people
prefer serif fonts.
 Avoid Caps for text
22
Other Factors
 Spell Check
 People scan text
 People don’t like to scroll
 Don’t fill your pages with junk
 Error Messages – don’t do silly things -
http://www.iarchitect.com/errormsg.htm
23
24
Types Of User
 Assess the User Population
 Naive
 Novice
 Skilled
 Expert
 Frequency Of Use
 Regular
 Occasional
25
User Characteristics
 Familiarity with computer systems
 Frequency of use
 Technophobia
 Technomania
 Is it compulsory for the job or optional
 User physical abilities
 Working environment – space, light, noise
26
Style of Interface
 Command Prompt
 Menus
 Direct Manipulation interfaces
 Form Filling
27
Command Prompt
 DOS prompt / User types in command
 Gives Little Help To User
 User needs knowledge of commands
 Powerful / Faster method
 User can tell computer concisely what to do
 Allow new commands to be defined
 Lengthy learning curve / Difficult to program
 Inappropriate for inexperienced / infrequent
users
 Save screen space
28
Menus
 Item picked from a list on the screen
 Menu Types
 Pull Down, Pop Up, Full Screen, Bar
 Useful for limited alternatives
 Slow down interaction pace
 Take up screen space
 Difficult to meaningfully organise
 Groupings for menus should be
 mutually exclusive, easily identifiable
29
Menu






Good for novice users
Annoying for expert users (use shortcuts)
Reduce memorisation / Structure decision making
Shorten learning time of a new system
Show default selection
Sub menus can be used to expand choices (must be
apparent to users)
30
Direct Manipulation
 WIMP Interfaces
 Windows



Open more than one at once
Tile or cascade
Mimic a desk
 Icons

Direct and understandable
 Mouse
 Pointers
31
Direct Manipulation
 Dialogue Boxes
 Radio and check boxes
 List Boxes / Combo Boxes
 Scroll Bars
 Drag and Drop
 Hyperlinks
32
Direct Manipulation
 Actions which are:
 Rapid
 Reversible (undo or redo action)
 Incremental
 Suitable for all levels of interaction
 Immediately see if their actions are furthering their
goals
 Users experience less anxiety
 Users gain confidence & mastery
33
Form Filling
 Useful for data entry
 Layout similar to paper form
 Transition between paper and computer less
painful
 Must have
 Meaningful Title
 Relevant Fields with familiar names
34
Users / Interface
35
Useful Functions For all User Types
 Context-sensitive Help
 Accessible at any point. Should be specific to the
situation, clear and concise. More help should be
given to novice users.
 Good documentation
 User friendly, accurate, easy to use, no jargon.
Several types of manual including a detailed training
guide, a quick training manual, and a troubleshooting guide. On line help is often used instead of
manuals.
36
37
Normalisation
 Normalisation provides an algorithm for reducing
complex data structures into simple structures
 Formalised by set of rules known as Codd’s laws
 Tidying up the data so there is no data redundancy
 Ensuring data is grouped logically
38
Why Use Normalization?
 Relations formed by the process makes the data easier
to understand and manipulate.
 Provides a stable base for future database growth.
 Simplifies relations and reduces anomalies.
39
Stages of Normalization
 There are 3 stages:
 1st Normal Form – 1NF
 2nd Normal Form – 2NF
 3rd Normal Form – 3NF
 BCNF Boyce Codd Normal Form
 4NF also exists
40
First Normal Form – 1NF
 For a relation to be in 1NF all its attributes must be
atomic
 Each attribute must contain a single value not a
repeating group of values.
 Every non-primary key attribute must be functionally
dependent on the Primary Key.
41
Un-normalised data
Course Code
Course Desc
Employee Number
Name
Block
Room No
Date Joined Course
Allocated Hours
42
Un-normalised data





A list of fields needed for the system
E.g. Staff Development Course
All staff are released for two hours a week for staff dev.
Employees work at their own pace in a lab.
A total of six attributes are recorded about each employee
including their normal office location (block and room),
the date they joined the course and how many hours it is
planned for them to work on it.
43
First Normal Form (1NF)
 An entity is in 1NF if, and only if, it has an identifying
key and there are no repeating attributes or groups of
attributes
 To get to 1NF we must remove all repeating groups
(data elements)
44
First Normal Form (1NF)
 An entity is in 1NF if, and only if, it has an identifying
key and there are no repeating attributes or groups of
attributes
 To get to 1NF we must remove all repeating groups
(data elements)
45
Our Example
COURSE
Course Code
Course Desc.
EMP_ON_COURSE
Course Code
Employee Number
Name
Block
Room No
Date Joined Course
Allocated Hours
46
Second Normal Form (2NF)
 An entity is in 2NF if, and only if, it is in 1NF and has
no attributes which require only part of the key to
identify them uniquely
 To get to 2NF we remove part key dependencies
 All data items must be dependant on the primary key
47
Our Example
 Course is already in 2NF
 Emp_On_Course is not because
Attribute
Name
Block
RoomNo
Depends On
Employee No
Employee No
Employee No
Attribute
Date Joined
Hours
Depends On
Employee No + Course Code
Employee No + Course Code
48
So we..
Take out details that are linked only to employee into a
separate table
 If in any doubt, ask a question such as ‘Are these fields
affected when they join a course’
Attribute
Name
Block
RoomNo
Depends On
Employee No
Employee No
Employee No
49
Cont.
COURSE
Course Code
Course Desc
EMP_ON_
COURSE
Course Code
Emp No
Date Joined
Course
Allocated Hours
EMPLOYEE
Emp No
Name
Block
Room No
50
Problems
 Don’t loose Employees
 Block and Room Number are related, so if one is
updated the other will be affected.
 If the block names change, then the whole of
the employee records will have to be altered
51
Third Normal Form (3NF)
 An entity is in 3NF if, and only if, it is in 2NF and no
non-key attribute depends on another non-key
attribute.
 To get to 3NF we must remove attributes that depend
on other non-key attributes
 It removes any mutual dependence between non-key
attributes
52
Third Normal Form 3NF
 In other words:
 “The attributes is a relation in 3NF must depend on the
key, the whole key and nothing but the key” !
53
How to do that: Dependency
 Decide on the direction of the dependency between
the attributes
 If B determines A, then A is dependant on B
 If A depends on B, create a new entity, keyed by B, with
A as an attribute
 Leave B in the original entity and mark it as a foreign
key, but remove A from the original entity
54
Our Example: Dependency
 If, given a value for A, there is only one possible value for B,
then B is dependant on A
 Therefore, given a value for room no., there is only one
value for block. The same is not true vice-versa.
 Hence Block is dependent on Room No.
 Leave Room No in the original entity and mark it as a
foreign key, but remove Block from the original entity
55
Our
Example
 Hence the EMPLOYEE (2NF) entity becomes
EMPLOYEE
LOCATION
Employee No
Name
Room No *
Room No
Block
* Room No is a foreign key in the Employee
entity
56
Entity Relationship Modelling
Course
Emp_On_Course
Location
Employee
57
Functional Dependency Notation
The notation for functional dependency is:
A is the determinant
A
B
i.e. If we know a StudendId, we also know the associated
StudentName if they are functionally dependent on
StudentId.
The value of studentId uniquely determines the value
of StudentName.
58
Functional Dependency by
Transivity
 If
 A
B
 and
 B
C
 then
 A
C
 C is transitively dependent on A
59
Background
Keys
 Primary key
 Unique Identifier
 Can be made up of more than one attribute and then
is called a composite key
 If there is no obvious choice, use a number
 Foreign Key
 Does not belong to the entity
 Used to relate entity to entity
 A primary key in another table
60
ToNormalise
Follow 3 simple steps
1.
2.
3.
Remove all repeating data elements
Ensures data items are dependant on the primary
key
Remove all fields dependant on non-key fields
61