Presentation on Human Computer Interaction

1. HUMAN COMPUTER INTERACTION
(IT 476)
Presented By : TEAM 5 ☺

2. AIM : THE AIM OF OUR STUDY WAS TO PRESENT A CASE STUDY ON A
BANK OF OUR CHOICE AND ANALYSE THE BANK ON THE TWO PARAMETERS
AS SHOWN
Analyse the basic
UI framework for
the Net Banking
system
Analyse the voice
guided response
system for the
telebanking system

3. METHODOLOGY
➢ Firstly, we analyzed the website by judging it on various parameters like visibility,
mappings, constraints, consistencies and wherever necessary, we suggested ways
where few parameters could be improvised. These parameters are the ones which
importantly constituted the norman’s model.
➢ For a better visual representation, we took screenshots at different points and we have
included them in the presentation just so the things can be understood better and so
that we could save time.
➢ Next, we have discussed few stages of action. We assumed an action a user is
supposed to perform ( for ex. lets say a cash transfer ) and we jotted down the steps
that user needs to perform to land on a successful transaction.
➢ We tried to present a demo of net banking via. screenshots, informative feedbacks,
concepts of reversal of actions and few other points all inspired by the shneiderman’s
model.
➢ Finally, with the help of a flow chart, we discussed we discussed about the Interactive
Voice Response(IVRS) of the HDFC bank and in the same way, analyzed the IVRS
system based on few parameters.

4. Operations/Actions undertaken
Using internet banking, we tried to analyze the steps a user had to perform
while carrying out three actions,
1. Transferring the money .
1. Recent transaction summary.
1. Net Banking mobile recharge
We assumed that the goal of the user was to perform these three actions and
accordingly, we analysed the steps needed to perform these three actions
successfully and then we judged the system based on various parameters.

5. Protocol Followed to transfer Money

6. View/Download recent transactions summary
Click on view/download
account statement
Enter account number, period and number
of transactions
Select format and click
on download button

8. PRINCIPLES USED FOR ANALYZING
❏ Application of knowledge
❏ simplification of tasks
❏ Visibility
❏ Mapping
❏ Constraint
❏ Error design
❏ Standardization

9. VISIBILITY
• Can I see it? The more visible functions are, the more likely users will be able to know
what to do next. In contrast, when functions are "out of sight," it makes them more difficult
to find and know how to use.
For example, keys on a keyboard are positioned in a way that they can be easily found out.
☺
---> While conducting our case study, we analysed that the online interface of the HDFC
bank had all the viable options to make payments, avail offers, etc. positioned as working
links which could be easily spotted by a customer. They were visible. The gulfs of execution
and the gulfs of evaluation were all taken care of.

10. FEEDBACK
• Feedback is about sending back information about what action has been done and
what has been accomplished, allowing the person to continue with the activity.
• Step 1 : Inquiring about the nearest HDFC branches around our location. We filled
in our location and we got the results about our query ( sending back information
about what action has been done)

11. FEEDBACK - STEP 2
• Step 2 : We got the information we wanted and after that we had the option to carry on with
our task(allowing the person to continue with their activity)
• When we explored options to shop and
pay bills online, we were updated at every
step as to what had to be done ahead
allowing us to continue with our activity.

12. AFFORDANCE
• To ‘afford’ means to ‘give a clue’. Affordance can be seen as an attribute of
an object which allows people to analyse as to how to use it. When the actual
and the perceived properties are same for an object, it gets easy for an user to
carry on.
• Step 1 : We went to HDFC website -→ Forms
Centre -→ NRI
1) Perceived properties: Contains data for
formalities related to filling
application.
2)Actual properties : Contains account
deposit/application forms, PIS application
forms, service related forms, etc.
Since both actual and perceived properties are same,
affordance exists.

13. MAPPING
• Mapping refers to the relationships between the controls and their effects in
the world.
---> Mapping is closely related to natural mapping. Only
difference is that in natural mapping, the user is provided with well organized controls for
which the user can easily perform tasks.
---> For example, as can be seen in the next slide, in the currently
existing interface of the HDFC system, the dropdown feature for some sections is
enabled.

14. GOOD AND BAD MAPPINGS
● Visiting the GOOD & the BAD mappings :
GOOD MODEL : Here, the ‘check eligibility’ and the other sections have a direct
visible
option to check eligibility for credit cards, loans, etc. making it a not-so-tedious task.
BAD MODEL : Here, the accounts and deposits sections and few other sections have
the drop down enabled making it a tedious task for the user to explore the site because
the things are not entirely visible at first sight.

15. CONSTRAINTS
● The design concept of constraining refers to determining ways of restricting the kind of
user interaction that can take place at a given moment
---> To find the near by ATMs, bank branches etc
Current Steps to follow:
1. Click Find your nearest
2. Choose the option of what you need to find
3. Add State and City Name
4. you will get the list of all the banks in the city and you
will have to search for your nearest one.
This is a constraint as the user has to perform so many
steps to know the location.

16. BYPASSING THE CONSTRAINT
Other option which can be chosen to find nearest banks -
1. Do login.
1. Accept to let your location to be known
via GPS service.
3. Now when the user use the option
“Find Your Nearest” it should show
all the ATMs or Banks or whatever
nearest to him. The user should not
enter the state and city name.

17. CONSISTENCY
● Consistency refers to designing interfaces to have similar operations and use similar
elements for achieving similar tasks e.g. using left mouse to select any type of graphical
object.
• HDFC uses consistent procedure for implementing similar activities, e.g. when we went
to the savings account section of the website via route - products -> Accounts &
Deposits -> Savings Accounts. We were able to see several options such as-
→ SavingsMax Account
→ Regular Savings Account
→ Women’s Savings Account
→ Kids Advantage Account
→ Senior Citizens Account
• These all savings account had an option to apply online, which was followed by process
of identifying user by signing in, if not signed in already.
• Then these all links provide users with forms with very similar structure and format,
which makes users to get familiar with the site’s format for any such similar account
activity and makes it an easy process for next times.

18. Stages of action: An approximate model
(‘ The Design Of Everyday Things’)
1 for goals, 3 for execution, 3 for evaluation:
●Forming the Goal
●Forming the intention
●Specifying an action
●Executing the action
●Perceiving the state of the world
●Interpreting the state of the world
●Evaluating the outcome
Activity Design
Interaction Design
Information
Design

19. NORMAN’S BASIC THEORY OF HUMAN ACTION
Gulfs of Execution and Gulfs of Evaluation
Reference :
http://learnline.cdu.edu.au/units/hit381/resources/popups/normantheoryofaction.html

20. FORMING THE GOAL
→ Goal: Build a website for the customers of HDFC bank to provide services like
•Immediate access 24/7
….. Internet Banking gives you the flexibility to manage your money at any time,
24/7, 365 days a year.
•Payments and transfers
….. Managing your money is easy. Pay your bills or transfer money in your
country or abroad
•Safe and secure
….Internet banking more secure as we don’t have to carry cash, everything is
done electronically
•Fast track applications
….. Applying for products through the Internet Bank is quicker.

21. FORMING THE INTENTION
●Access your balance, available balance and statement history any time
●Manage your credit card
●Set up regular payments and view Direct Debits
●Get an instant response to overdraft requests (subject to approval)
●Keep track of your loan or mortgage account

22. SPECIFYING AN ACTION
There are different actions that can be performed via HDFC banking website
● transferring money(DCT - Direct Cash Transfer)
● applying for different types of loans like car, house, gold etc
● opening various types of accounts like salary, current, savings etc
● applying for new debit/credit cards
● credit card payments
and many more….
But in our case study let us concentrate only on one action that the user
will be performing i.e. transferring money to another account
So our 3rd point of specifying an action becomes- “Transferring money”

23. PERCEIVING THE STATE OF WORLD
---> Means to verify if the system is in the desired state. We identified
the action and performed the action accordingly. So the system was
perceived to be in a state desirable for carrying out the specific
action.
----> For example, if a user intends to transfer money into the account
of another person, he is supposed to carry out some specific steps
which could be carried out only when the state of the system is
desirable.

24. INTERPRETING THE STATE OF WORLD
From the previously mentioned steps, we can interpret that the given
action to be executed on the system of the HDFC interface follow a
specific protocol in order to fulfill the desirability of the users.
Like this if all the actions which can be performed at the interface using
some protocol and the end result makes the user satisfied, the system is
desirable.
If the above requirement is not followed, the system would turn out to be
undesirable which would quite undesirably prevent the user from
initiating and carrying out a specific action and the perceiving step would
also be affected.

25. INTERPRETING THE STATE OF WORLD
From the previously mentioned steps, we can interpret that the given
action to be executed on the system of the HDFC interface follow a
specific protocol in order to fulfill the desirability of the users.
Like this if all the actions which can be performed at the interface using
some protocol and the end result makes the user satisfied, the system is
desirable.
If the above requirement is not followed, the system would turn out to be
undesirable which would quite undesirably prevent the user from
initiating and carrying out a specific action and the perceiving step would
also be affected.

26. NET BANKING MOBILE RECHARGE
To check status if customer recharged his mobile
To check operators available in region

28. EVALUATION OF THE OUTCOME
----> We tried to interpret the net banking services of the HDFC bank
according to the Norman’s model and suggested preferable changes.
----> For instance, the interface of HDFC smartbuy has a separate
section for offers thereby presenting no problem of advertisements for
the user when he/she is surfing the website.

29. Shneiderman's "Eight Golden Rules of
Interface Design"
•1 Strive for consistency- As discussed before consistent design is very important for keeping things
simple.
•2 Shortcuts for frequent users- As frequency of usage increases for a particular user, he/she should
be provided with shortcuts to interact with the interface in order to speed up his/her process.
•3 Offer informative feedback- Rich feedback is very important to be provided, as the users need to
know what is the status of any process they might have started, specially for the beginners.
•4 Designing Dialogs Providing with dialogs at the completion or proceedings of any serious matter
provides a sense of relief that the process up till now is successfully performed.
•5 Permit easy reversal of actions A good design always allows user to perform a easy undo or redo
i.e., easy reversal of recent changes.
•6 Offer simple error handling Design should be made in a manner that it restricts user to make any
serious error, and even if an error is made the system should be able to detect it and offer ways to
handle it.
•7 Support internal locus of control The system should give operators a feel of being in the middle
of the control center, that they act as initiators of actions rather than just responders.
•8 Reduce short term memory load Things that are connected to each other needs to be presented
in the same area rather than on multipage page displays or with heavy window motion frequency as
they increase load of our short term memory.

30. HDFC net-banking demo
The website has an
interactive demo to get
the user familiar with the
net-banking process.
There are two types of
demos, manual and
automatic. In manual, at
every step the user is
asked to select a link
and then the system
continues the
presentation and tells
the user how it works
and how to proceed.
Not only net-banking,
many other services
also have a demo to
assist the user.

32. Informative feedback

33. • For every query selected by the user there are a set of instructions, as to what it
means and its benefits.
• If even that doesn’t satisfy the user, there is also the option of ‘Know More’.
• There is also the option of talking to the customer care through Internet.

34. Easy reversal of actions
• The hierarchy is highlighted after every new link.
• The user can easily navigate back to whatever page he/she wants to go
back to.
• Even when the user pays online, there are tabs to go back and editview
the payment details.

35. Short term memory load reduction
Instead of making separate pages for every query, all of them are there on
the same page as dropdown menus.
The user has as option to read them one by one or expand them together.

36. Telebanking using
IVRS

37. Terms of Interaction In IVRS
• Domain
• Task
• Goal

38. Interaction Style
• Menu driven Interaction
• Input
• Feedback

40. Donald Norman’s Model
•Seven stages :
–user establishes the goal
–formulates intention
–specifies actions at interface
–executes action
–perceives system state
–interprets system state
–evaluates system state with respect to goal

41. Goal
• Accessing account information
• Cheque status
• Paying bills
• Report Complaints
• Transfer Funds
• Updating
• Learn about bank schemes

42. Execution
• User based on his intention, chooses from the option he is presented.
• He identifies the number on the keypad corresponding to his decision.
• He presses the key on the keypad of the phone.

43. Evaluation
• Based on the input key, user presented with suboptions or hears the results or
receives feedback.
• User processes the feedback.
• Based on the feedback,if user realises his goal he moves or else he chooses from
the suboptions.

44. Ergonomics
• Physical Environment
• Language of Communication
• Proper Categorizing Suboptions

45. SMS
Uses
Track payment and receipts
· Get Remainders
· Aware of the activities on your account
Cost
Savings Account: Rs. 15 excluding taxes per quarter.
· Current Account: Rs. 25 excluding taxes per quarter.
Alerts
Debit transactions.
· Credit in account.
· Weekly account Balance.
· Salary Credits.
· Utility Bill payment due Alert.
· Alert for cheque bounce.

46. Fees and Kind of Alerts
· Savings Account: Rs. 15 excluding taxes per quarter.
· Current Account: Rs. 25 excluding taxes per quarter.
· Debit transactions.
· Credit in account.
· Weekly account Balance.
· Salary Credits.
· Utility Bill payment due Alert.
· Alert for cheque bounce.

47. PROS and CONS
Cons :
1. language option is not present at first.
2.There are no options available to go back or undo the step.
3. time limit and repetition has to be taken care of.
Pros :
1.can penetrate rural areas where internet might not be available for e-banking.
2.Mobile banking is said to be safer than online banking