Developing a user-friendly online banking interface.rjh/courses/IntroductionToHCI/... · Module:...

The University of Birmingham

Developing a user-friendly online banking interface. 28 November 2016

Members Jacob Smith Kavita Patel

Ken Chan Oktay Aslantas

Module: 06-21253 Introduction to HCI Group: 7

Contents

Contents 1

Introduction & project description 3

1. Review of related work 4

1.1 Why online banking? 4

1.2 Why a good online user interface? 5

1.3 Key principles and features of online banking interfaces 5

1.3.1 Design principles 6

1.3.2 Usability & Trust 7

2. Review of existing systems 8

2.1 Case study 1: Chase Bank 8

2.2 Case study 2: HSBC 11

2.3 Case study 3: ING Bank 16

2.4 Case study 4: Santander 19

2.5 Conclusion 22

3. Analysis of user's requirements 23

4. First generation prototypes 27

4.1 Rationale 27

4.2 Prototypes 27

4.3 Evaluation and conclusions 36

4.3.1. Middle aged user evaluation 36

4.3.2. Elder user evaluation 40

4.3.3. Young user evaluation 42

4.4 Conclusion 45

5. Second generation prototype 47

5.1 Evaluation of tools for constructing prototype 47

5.2 Description of prototype 48

5.3 A plan for the evaluation of the prototype 58

1


5.4 Results and Conclusion 61

Summary and recommendations 63

References 66

2


Introduction & project description Online banking has become a familiar part of our daily lives. No longer do people need to go to the bank to tend their banking activities, or have to call the telephone number of the bank to do telephone banking. These methods of banking still exist, but have become shadows in comparison to the abilities and possibilities that come by using online banking. From simply checking your balance to making transfers to friends and family overseas, and from looking up your current mortgage statements and diversifying your investment portfolio, all can be done by using online banking. Many banks offer online banking, but these online banking interfaces all differ from each other. From design elements to the structure of the page, they are all different, and each has their own way of working. One interface can be focused on friendliness and have a minimalistic design, but will be limiting in providing information and knowledge for the more experienced user. The other interface can be too complex with many menus and submenus that contain many different pages with different sorts of information as well. These online banking interfaces can be very easy for the student who uses it, but hard to grasp by the more elderly user, whereas the middle aged user would long for more flexibility.

The solution for these hardships, that the different age groups experience, would lay in the fact that an online banking interface designed to keep the interest of all age groups in consideration would be more successful in achieving positive user experience. To come to this solution a new online banking interface was designed, after analysing different current online banking interfaces, and taking the successful elements and implementing them in the new online banking interface. This new online banking interface would then be tested and compared to the age groups, and could potentially deliver a much more positive user experience of all age groups.

3


1. Review of related work To inform the project it is necessary to understand the underlying principles and methodologies that are both currently used and those which are not currently used but ought to be. This section first outlines the benefit of online banking before providing an overview of the key principles, techniques and features that should be considered by online banking interfaces. Ideally, these criteria would all be satisfied by current online banking interfaces.

1.1 Why online banking? “The impact of e-banking on a bank size in the US is evaluated in Sullivan and Wang (2005). They claim that Internet makes it easier to serve and communicate with clients. Moreover, it saves costs for banks on conducting low-value-added transactions. Largest banks face higher demand for their services, thus, are more likely to figure out a cost saving opportunity, adopt Internet banking first, and enjoy further increase in size. In long run, when innovation reaches

smaller banks, the banking industry converges to new post-innovation steady state distribution.”

The impact of internet banking on the user of banking services , Grui Anton, Pg. 1

The two main attractions of online banking benefit both the user and the firm:

1. Reduced costs on services such as transferring money between account, which increases the speed of transactions and the overall number of transactions. For the user, this saves time and facilitates easier, less stressful financial transactions. For example, the user no longer has to make a physical journey to the bank (nor pay necessary travel expenses) and he no longer has to hold a checkbook or physically write checks. Because transactions are faster, the bank is able to facilitate more transactions in a working day which leads to additional revenues and general cash flow. This implies they are able to provide all their users (regardless of whether they bank online) better services and better rates for transactions.

2. Improved financial management because user accounts can be monitored round the clock and on the go. For the user, improved control over finances means individuals will be able to track and understand their financial decisions, transactions and potential debts owed. This is both a matter of necessity and convenience. The use of an electronic system means that banks are able to save on physical resources (both the production and disposal of paperwork is costly). But it also means that all users’ transactions can be tracked and managed. This facilitates easier

4

http://www.kse.org.ua/download.php?downloadid=390


risk management and fraud prevention for the bank since it will be easier to spot those users who are making odd transactions, or those who are at risk of for example defaulting on their debts. Online banking has the legitimate potential to reduce labour costs by encouraging electronic activity instead.

1.2 Why a good online user interface? Although it seems like the answer to this question is intuitive it can be helpful to address this question head-on. Since online banking facilitates the user and the bank, having a good online user interface is a win-win situation (provided the costs of improving it are not outweighed by the benefits of doing so). An argument that will perhaps seem less “economic” however is that a good online banking user interface will improve the experience of both parties. To some users this will be undeniably irresistible (Gehrke, 1999)

On top of this, banks would probably like their customers to feel safe when using their services. If it is difficult to believe that banks want this because managers have a moral compass which drives them to host a safe financial environment, it is possible that this would offer the banks customer recognition (and a larger customer base) and legal safety (for, if their processes aren’t safe, they could be liable for any damages to individuals caused). When customers use the internet, they are mostly using it in their own homes where they feel most comfortable. This is a key advantage of having a good and safe online banking system.

1.3 Key principles and features of online banking interfaces As far as internet banking interface is concerned, there are definitely features that appear more prominently across different service providers than others (Eze, 2014). These features can be grouped differently depending on their purpose.

The literature review highlighted five main principles underlying good online banking interfaces, as detailed below.

Maintenance of security

This is definitely of top priorities for players in the Banking sector, in which client relationships are built on the foundation on trust and confidentiality (Mukherjee & Nath, 2003).

Session timeout mechanism is a common feature according to Eze’s findings, which tackles the problem of maintaining security in what is a dynamic environment. Given the data-sensitive nature of online banking, it’s no surprise that such system is in place for security reasons (Xie et al, 2002).

Maintenance of trust between user and the firm It is imperative for trust to be maintained between the user and the bank. This way online banking can be a service that is welcomed to the user, and one that he wishes to continually

5

http://staffweb.worc.ac.uk/DrC/Courses%202010-11/Comp%2021003100/Worksheets/Determinants%20of%20successful%20website%20design-paper%20for%20seminar%20activity.pdf


use as part of a lifestyle routine. Tailor towards all user bases It is clear that this principle has not always been adhered to, and that the functionality of online banking interfaces have focused more on some types of consumers compared with others.

Younger customers and customers with high salaries tend to use online banking services more (Grui, pg. 22). This is in line with:

● Youth being more acquainted with internet technologies ● Higher income leaves users leaving more money in their accounts, yet moving

money around so there’s a demand for convenient low-cost remote transactions

Because of this bank interfaces may follow the above principles but may have a tendency to tailor their services towards younger audiences. Lower income and elderly individuals can be missed from the market, or their needs may not be properly tended to. It is possible that an additional underlying principle is to cover the whole range of audiences (as is what one would hope for any service with a wide potential audience).

Incorporation of search engine Eze finds that the Search Engine function appears in all five of his samples of Nigerian internet banking systems. The search function helps in improving customer relations through ease of dynamic navigation (Ahn, Ryu, Han 2006), it can therefore be grouped as Navigation tool along with features such as Menus.

Opportunity to provide feedback Finally, another popular feature found in online banking interface is Feedback submission (Eze, 2014). This reflects the user-centric nature of the design of internet banking systems. Banks must value any input the users of these platforms have and aim to incorporate these requirements into future development/refinement processes. This should be classified as a tool of communication between users and developers, whose aim is to design a product well suited to the goals of the end users (Bodker, 2000).

1.3.1 Design principles Additional principles relate to successful website design more generally, but can be directly applied to online banking interfaces (Gehrke, 1999). Many studies have suggested websites should trend towards simplicity with the aim to improve consumer experience.

Apart from loading speed, which has been argued to be the most important factor to any website, this report suggests considering the following short principles:

● Clearly show all relevant information (eg. Account number, name, date…) ● Use clear, readable font ● Write in English with possible translation buttons ● Provide contact information on each page ● Use simple background colours and textures ● Reduce complex animations

6

http://www.kse.org.ua/download.php?downloadid=390


● Create a Frequently Asked Questions page ● Use distinctive hot buttons ● Generate a confirmation page after a completed transaction ● Use an auto responder

1.3.2 Usability & Trust Having a website with excellent usability will gain the user of that website trust. Satisfaction is a key element here. (Flavián, C, Guinalíu, M & Gurrea, R, 2006). The satisfaction that the user knows how to navigate through the website, how to perform certain actions, and to feel satisfied and confident that the completed actions are done with sufficient (perceived) knowledge and speed. Perceived is in brackets here, this is because often the user believes it has the know-how and skill to figure out a website and it’s structure. This is not usually the case. Usually, the website is designed and built in such a way that interpreting, understanding and navigating through the website seems very intuitive and easy to do. This makes the user believe that it understands the website accordingly, feeling satisfied and confident of using it again the next time (B.M. Muir, N. Moray, 1996).

This satisfaction and confidence is key to develop trust in the user of using the website more often, and without errors. To build, and maintain this trust, in general terms, the following factors are considered: - The ability of easily understanding a system, its functions and its interface. - The speed of which the users can find the button, page or piece of information they are searching for. - The ability of the user to understand where the user is, and where they have to click to navigate to a specific place in the system.

These are essential parts of an online banking interface. Having the trust of the user, and giving the user the confidence to use the online banking interface. Honesty is directly related to information transparency, according to Nielsen (1994). This means that having greater usability favours greater transparency, which directly links to increasing the trust of the user. Fleming (1984) states that websites can be divided into six different categories, according to their navigation designs. Online banking interfaces fall under the information sites as the primary goal of the interface is to display information, and the second goal being able to adjust the displayed information. The interface should be obvious and self-explanatory, eliminating any question marks the user might have, as is the first law of usability, according to Krugs (2006). The online banking interface should be easy to read, easy to navigate through and be very clear in communication, to increase it’s usability and gain more trust from the users.

7


2. Review of existing systems To learn about where the project could improve online banking interfaces, the interfaces of four banks were assessed against the principles and features deemed important. This section of the report includes four detailed, individual case studies of existing systems. It then concludes with an overview of learning points: bank’s key successes and failures in providing a good online interface.

2.1 Case study 1: Chase Bank Chase bank aims to facilitate an easy online banking experience through their user interface. They incorporate a fluid interface with fancy animations which is similar to their mobile app.

One key feature of the mobile app is that it does not allow screenshots to be taken once logged in as a form of added security. This cannot be accomplished as easily with on a web browser banking page due to the freedom users have on their own computers. A user is likely to prefer having full control over their online banking, although something such as taking screenshots may not be an important one.

The dashboard offers a minimalistic overview of the account holder’s financial information, using a clear readable font and good font size. Simple colour schemes are used, which relate to the bank’s brand image.

The page is split into key sections, which provide visual definition about what type of information could be found in each box: An overview of account details to the left; A direct hot-link about security and account alerts underneath that; More account details to the right followed by two boxes underneath on pending transactions and transaction history.

The largest and most visible aspect of the page is the user’s current balance (left hand side). Other user information is less difficult to find, such as the account holder’s name, the account number and other relevant details.

A notable feature is that upcoming payment due dates appear on the screen twice: once flashing in the header and also in the center of the screen in bright red. This is an obvious attempt to help users manage their finances and will lead towards a healthy level of trust between the user of the bank.

8


Figure 1a

Homepage of Chase online banking user dashboard.*

* Personal information has been blocked out.

Attempting to actually navigate to different areas of website proved slightly confusing with the current interface (Figure 1b). As a user one of the biggest detractors is the lack of options relevant to the user’s requirements. There is no fast way to navigate to:

● A log of historical bank statements ● Account and display settings and other options

While the “Move money” and “Connect with Chase” headings seem intuitive, the “Explore Products” one is less so. After being a customer for years, it is easy to click Credit Cards underneath this menu believing that it will direct the user to a page about the user’s credit cards. Instead, it is an advertisement for more of Chase’s products. Once logged into their online banking page, users are probably most likely to be interested in their current products and credit cards. The trust between users who frequently click Credit Cards in error and the firm could be undermined.

9


A solution to this could be to hide the subheadings Credit Cards , Checking accounts and Savings accounts under the ‘More’ list. Since this is likely to be unfavourable for banks, who would likely have an interest in fully advertising their additional products, an alternative solution could be to change the subheading to Find Credit Cards , Other Chase Credit Cards and/or to change the font colour to something duller so that users’ eyes are not drawn immediately to the subheading. Each of these options would reduce the number of clicks in error, while allowing the bank to advertise their product.

Figure 1b

Navigation: side menu display (first glance).

10


2.2 Case study 2: HSBC In contrast to the dashboard of Chase Bank, the interface for HSBC’s online banking platform is highly textual with the aim of including a wealth of information in the page (Figure 2a).

The main background colour is plain white and the page has a general grey / dark grey theme, a combination that is rather soothing with mild colour contrast. Similar to Chase, the colour scheme has been chosen to match HSBC’s brand image.

The main page is again split into several key sections (albeit for slightly different purposes compared with Chase).The main body of the home page (middle section) gives the summaries of different financial products (e.g. Pension, Investments). These tabs appear even if the user is not a client of these services.

On the right hand side are three boxes containing a link to message inbox, personal documents (although it is not clear what these are from the heading), and personal details and preferences including the user’s contact information.

On the left hand side is a list of many options under the headings ‘My Accounts’, ‘Ideas and offers’, and ‘Apply for… (other products)’.Here it is easy to get confused due to the sheer amount of information and poor display choices. The following suggestions could improve user experience:

● The font can help offer clarity. Bold only the headings, or make headings a separate colour. This will provide visual focus for the consumer to quickly navigate to what they are interested in.

● Graphical arrow for each heading could rotate downwards, as is common on many websites, to show when a menu has been expanded.

● Subheadings should be renamed to flow from the heading title. For example, it does not make intuitive sense when reading “Apply for…” “Start Saving”. This could be changed to “Apply for…” “New savings Account”. Other subheadings repeat “Apply for” – therefore, the user reads the heading “Apply for...” “Apply for a Credit Card”. This is simply sloppy.

● New headings could be considered, with a reorganisation of subheadings. It is not clear if, and probably not true that, a user would need to fill in an application to tell HSBC if they are travelling abroad. A new “Travel” heading could for example home the “Tell us you’re travelling” and “Buy travel money” subheadings.

Nonetheless, the menu layout somewhat adds to the ease of navigation. Figure 2b displays the main page for making transfers. Again the layout is highly textual. We cannot see the amount involved in each of the previous transfers, this makes going over previous transactions rather inconvenient. On the left hand-side, we can see the sub options after the “My accounts” tab is expanded. Again, there’s no sub group within. Different functions that are generally used at varying frequencies are confusingly grouped together (e.g. “Make a payment” and “Stop a cheque”).

11


Clicking on the “Go to My messages” tab on the right redirects the user to a new page ,where one can review and write messages to HSBC (Figure 3). In the list of messages, a mail icon is located next to the subject to indicate each message’s read/unread status. This is a good feature as the use of intuitive icon help the users to see critical information instantly (Yan, 2011). The use of graphical icons is definitely an area HSBC should develop its internet banking interface towards.

After advancing into the “My messages” page, the two sections on either side of the page remain unchanged, the access to other services is still possible on the left-hand side etc. On the top left, the user’s current account balance appears. This is seen as the most essential piece of information users require and HSBC have recognized this by ensuring it is in fact located somewhere on every page of the interface, whether in the main body of the page or on the side as a supplement.

An obvious downside at this point is that it is not obvious how the user may return to the previous page. A better navigation-friendly set of tools is needed, especially for older users who may find it difficult to move in-between pages (Morrell, 2002).

The bottom of the page includes a series of buttons and graphics for links to the “Help & Support”, “Find a branch” and various social media platform pages (Figure 6).

HSBC has incorporated a feedback pop-up, activated with a button, which features an old fashioned and dull looking form. You can rate, for example, the design of the interface on a scale of (Unsatisfactory) to (Excellent). While this is an excellent feature as a key priority according to the literature review, HSBC’s choice of design is unhelpful. The – and ++ markers add a significant amount of clutter to the page. It may be much more logical if numbers are used instead e.g. 1 to 5, with just one row in the header rather than having it repeated after every question. Nevertheless, the short length of the survey may provide an incentive for user to complete the form leading to high response rates (Burchell & Marsh, 1992).

Finally, the “Find a branch” button opens a page with a Google Map API (Figure 6). The system seems straightforward to use. The user types in their postcode and markers appear on the map representing the nearest branches to your chosen location. Tick box options allow the user to filter out branches with special facilities such as disabled access and Saturday hours. Users are then able to narrow their searches down to results that really target their needs.

12


13


14


15


2.3 Case study 3: ING Bank ING Bank is one of the major banks in The Netherlands, having a combined market share of >65% together with the ABN Amro Bank and Rabobank.

However, looking at the popularity, neither of those banks perform well in polls. According to research conducted by the national consumer’s union, ING was rated 6th out of 8 banks that were polled, Rabobank was rated 7th and ABN Amro was rated 8th. The main reason for the low rating is that the three banks are relatively expensive compared to other, cheaper banks. To combat this, ING makes the effort to be as customer friendly as possible. This can be seen in their online banking interface.

The online banking interface of ING is very clear and minimalistic, without compromising in showing the essential and relevant information you would expect from your online banking experience. Similar to the previous case studies, the colours chosen reflect ING Bank’s brand image.

To rise in user ratings, you need to earn the trust from your users (Klaassen, R.). Klaassen also states design guidelines, split in four categories; information design, navigation design, graphic design and experience design. These categories can be summarized into the following design guidelines:

- Group items on the page that will save space and create more order. - Ensure that the navigation bar has enough space and there is nothing else in the bar except for buttons and text relating to navigation through the website. - Avoid excessive linking to other parts of the website, keep the goal of each page simple - Keep buttons, structures and menu’s in a consistent style and colour throughout the website, to ensure familiarity in using the site while being on different pages. - Optimize the website for different user groups, from juniors to seniors and from colorblinds to bad sighted. For example: implement a button to increase font size and a button to change the color scheme of the website.

These are valuable guidelines to be used in an online banking interface, and many of these aspects can be found in the interface of ING Bank. ING Bank tries to earn the trust of their users by displaying their online banking interface as clearly as possible. The bank introduces a friendly and informational relationship with the user: On the main page, the first thing the user is confronted with is a question box, asking: “I’m sure you have better things to do in your day, what can I do for you?” (Figure 3a).This is an effort to persuade users that the bank works for them, and does not exist just to earn money as a corporation.

16


Figure 3a

Welcome message for ING Bank online banking dashboard.*

* Translation: Welcome, I’m sure you have better things to do in your day. What can I do for you?

In Figure 3b the main online banking interface is displayed. There is almost no clutter and it is extremely transparent. It is very simple, with just a menu with buttons showing on the top of the screen, and the main information displayed underneath that. On the right side a small section with a couple of links and a banner is displayed. The links are for more information about their banking experience, and a special customers’ discount on ING services. Apart from that, nothing else is visible, which makes the interface very clear.

In Figure 3c the user can see the messages screen. This clearly shows messages in a clear font, without anything else distracting the user. Not having any clutter also gives the pretense that the environment the user is in is a safe environment, this also gains the trust of the user (Yousafzai, Pallister, Foxall, 2007).

It is notable that ING Bank have taken a simplistic approach because most users only require basic online banking, such as checking their balance, making transfers and setting up Direct Debits. The downside of this is the fact that users looking for advanced options must navigate through the page, through what might look like unnecessary steps, to do what they intended. The tabs across the top of the page help the user to find pages relevant to Saving, Credit cards, Investing, Loans and Insurance.

There are also some features which are not necessarily aimed at an advanced audience. Such other features which exist on the previous case studies but are not present on the ING interface are:

● Finding a nearby branch ● Frequently asked questions ● New products and services the bank has to offer

17


Figure 3b

Homepage of ING Bank online banking user dashboard.

Figure 3c

Messages page for ING Bank’s online interface.

18


Figure 3d Savings screen for ING Bank’s online interface

2.4 Case study 4: Santander Santander is a British bank owned by the Spanish Santander group. It is one of the UK’s largest banks and was voted one of the best banks for customer satisfaction in a poll carried out in 2014 (MoneySuperMarket, 2014).

In order to achieve high satisfaction, the bank has tried to ensure its online banking is safe and does not pose any security threats to its customers. To do this they have a three-step logging in process, as well as a ‘one-time passcode’, required whenever a customer wants to transfer money along with security software enabled when using the website. Additionally, they show the last unsuccessful log -date at the top of the page, as seen in Figure 1. This helps to alert the authentic user on any illegal use of their accounts by others.

Figure 4a (below) shows Santander’s online banking homepage. The layout is fairly simplistic with many graphical features based on Santander’s signature colour, red. Consistent with all case studies in this report, this matches Santander’s brand image. The red is used in a subtle way and the colour may have been used as it brings immediate attention to whatever it highlights. It can also be thought of as bringing energy and heat to a page. This is paired with a grey colour scheme throughout its website.

A potential downside to the interface is that it may appear to be too simple. For example, the ‘Unread messages’ line does not stand out immediately, and can therefore be missed or regarded as unimportant. When receiving messages, a user may prefer to have a notification which is highlighted.

19


In a similar fashion to ING Bank’s interface, Santander’s website is laid out with different tabs at the top and a corresponding menu on the left hand side. The right hand side has distinct icons which allow the different actions users can opt for. A drop down box is also implemented near the body of the page for accessing more details options related to a specific account.

Figure 4b shows the ‘Savings Goals’ feature, which allows users to enter an amount they are trying to save by a certain date. This idea is extremely useful for individuals who wish to start saving and control/reduce excessive spending. Similar mechanisms have been developed in recent years to help individuals resist various bad habits and temptations, such as smoking. The mechanisms’ theoretical foundation in behavioural science and behavioural economics, initially provided by Thaler and Suntein (Sunstein, 2008; Thaler & Sunstein, 2008), is considered so strong that the UK now has a Behavioural Insights Team to help individuals make better decisions for themselves.

While Santander’s effort is commendable, however, when entering the required information, there is no link to save the data, and so the ‘summary’ is almost pointless. The help page suggests that users need to link the savings goal to an account, but there is no obvious way to do this and proves to be confusing for a small task. A recommendation is to provide a dropdown menu to allow the user to select which account they would like to link the savings goal to (although no account should be an option), and a button which allows the user to save their goal.

Figure 4a

Homepage of Santander’s online banking user dashboard.

20

https://www.amazon.co.uk/Nudge-Improving-Decisions-Health-Happiness/dp/0141040017

https://www.princeton.edu/~tleonard/reviews/nudge.pdf


Figure 4b

Savings goal feature on Santander’s online banking website.

In order for an online banking system to be successful there are numerous guidelines which can be followed and can be observed within Santander’s interface. Here are a few which can be seen on Santander’s website.

1. Prominent links to other pages – This allows users to navigate their way around the site quicker. In the case of Santander, there could be more options in this section; such as a direct link to the help page or frequently asked questions.

21


1. Intuitive site navigation – ‘Effective sites utilize “mega menus” to drive people to a 2nd and 3rd level deep from one click, as well as site search, internal page navigation and breadcrumbs to further assist users’

2. Good content management systems – This ensures that the website meets the needs of its users and allows for personalized content. The tools available on Santander, such as its quick money transfer and saving goals allow users to make better decisions with their money and allow them to save time.

2.5 Conclusion The online banking interfaces that were analysed are all user focused systems. They all use their company design, which include the color schemes and structure of the page, and their company language, which is the way the website ‘speaks’ to the user. By having this recognizable element in the online banking interface, the banks ensure that the user is always in a familiar environment, not having left the trustworthy and safe environment of the bank's website. Chase Bank and HSBC both focus their online banking interface on providing information and freedom of use for the user, enabling them to see all the information they might need without navigating to another page and being able to do so directly when they need to. This is beneficial for the the middle aged user, which is experienced in current day technologies, and has no issues using online interfaces such as these, whereas the younger user might find it useless, as the user wants to perform more basic actions compared to the middle aged user. The elderly user would find it too complex, having menu menus and buttons to click on, and too much information on one page for the user to process. Having everything split and on a friendly note would be more beneficial for the elderly user. ING Bank and Santander Bank are good examples of this. The online banking interfaces of these banks are more user-friendly focused, with soft coloured pages and friendly language to welcome them to the interface. Each page only contains the relevant information to that page, and the interface does not overload the user with irrelevant information the user is not seeking at the moment. By having the different sections of online banking split in clear and simple menus the users, especially the elderly user, will find it easier and more satisfying navigating through the different pages, being able to understand the process and design of each page along the way. Features to implement in the second generation prototype

The features and design elements that are implemented in the first generation prototype that can be implemented in the the second generation prototype are based on several criterias. These criterias are based upon the compatibility between the different persona’s. The young user would prefer to have efficiency in the use of the online banking interface, as the user is busy with studying and has little to no free time. Time spent paying bills and sending money to friends should therefore be a process that consumes as little as possible amount of time. Developing screens where the user can directly click on menu buttons to advance and transfer money or to pay bills would be the most beneficial for the young user. Having ‘repeat’ menu’s is also an element that would be in the interest of the young user.

22


Buttons such as “Pay utilities bill”, which automatically sends the correct amount to the bank account of the correct receiver with one click. Next to that, the interface needs be present as a mobile application as well, but that is out of the scope of this research. The middle-aged user is a user that longs for more (in-depth) information about all their existing bank accounts. From the main banking account to their savings account, mortgage, loans and investments. Having all the information of all these accounts on a single overview would be most beneficial for this user, as the user is common with these products and services, and knows exactly where to look, what to look at and what kind of information is needed. This user is more capable of working with interfaces that are more complex than the interfaces that are developed for the younger and/or elder user. The elderly user is a user that has many similarities with the young user, except for the fact that the elder user is less in a hurry than the younger user, and wants to do basic actions within the online banking interface. Sending money to the children and paying bills would be one of those actions. As the older user has less experience with online interfaces, it would be most beneficial for the user to have a simple and guiding interface, that is very clear from the very start of using the interface. Clear colours, clear button shapes and logical flow between pages are key elements that have to be implemented in the online banking interface.

23


3. Analysis of user's requirements

To develop prototypes that will deliver valuable information about which elements are needed to create the most optimal prototype, for all age groups, there needs to be three personas developed. Each persona represents an age group. This persona contains key information points, such as background information (age, occupation, technology skill level), goals (goals that the persona wants to reach using the specified technology), frustration (current issues the persona has with the technology), and description (a general overview what kind of person the persona is). These personas also have scenario’s: possible actions the persona wants to perform whilst using the technology. These scenario’s explain what the persona exactly wants to do, and which points the persona faces when he/she cannot complete the action.

- The first persona is the young persona. This is a persona that’s in the 18 – 30 age group. This persona is a (recently graduated) student, and focuses its online banking activities mainly on paying bills and sending money to friends. This persona generally does not have the need to see information about saving, mortgages and/or investments yet, and wants to be able to check their balance, transfer money and pay bills most efficiently, without having to go through multiple pages.

- The second persona is the middle-aged persona. This persona is between 31 and 65 years old, and is considered to be a person with adequate knowledge of online banking and technology in general. This persona uses online banking for checking the balance and paying bills, just as the young persona, but also to check their current mortgage payments and debt, the loans they currently have and the investments the persona is currently holding. This persona has the need for complete information about all accounts and services they have at the bank.

- The third persona is the elderly persona. This persona is over the age of 65 and is considered to be a senior and not very experienced with current (new) technologies. This persona finds using complex and detailed interface difficult to understand, and therefore requires a friendlier and simplistic interface design. The elderly persona mainly sends money to family, and sometimes checks the mortgage payments or loan payments that are left. The bills that have to be paid all go through Direct Debit, and are set up by the companies that deduct the money or family/friends that set them up for the elderly persona.

24


25


26


27


4. First generation prototypes These are the first generation prototypes developed for the most optimal online banking interface for a specific age group. Each prototype is designed with focus on one persona , a description of a user of a specific age group or life phase. These three personas are divided by age group; as there is a young, middle aged and old persona. Each online banking interface has been designed keeping the interests, knowledge and motives of one persona in mind.

4.1 Rationale By developing first generation prototypes based on personas who are based on specific age groups it is possible to compare these prototypes to each other, figuring out which element of the online banking interface is best to use in the second generation prototype. These elements may be different from each other, as each element was designed with a specific persona (or age group) in mind. Combining these elements, and finding compromises between elements that can not be combined, ensures that the second generation prototype will contain all elements that are needed to make users of any age group comfortable with the online banking interface; easy in usability, trustworthy and giving enough information as the users’ needs.

4.2 Prototypes Elderly user

This prototype is aimed for the more elderly user, who usually have more difficulties reading, understanding and finding certain elements on a web page (National Institute for Aging, 2016). This includes clear headers, large buttons and large, clear text fonts. Another important aspect of senior friendly web-design is consistency in structure and colour (Hager, Kibler & Lauren, 1999). Having certain buttons in the same shape and colour, to having a menu that does not move in place and does not change in choice and goal. Next to that, having an interface with menu buttons and structures that seem logical to the user, for example: previous page literally goes to the page the user saw previously, and not a section the user was in before it entered the current section).

The prototype has been created with this information in mind. Big and recognizable buttons are used, with similar color schemes throughout every screen the user visits. Clear, easily readable text is shown on each button and content and a logic walkthrough in every screen is shown, guiding the user through the tasks the user wants to execute.

28


Figure 1

Figure 1 shows the main screen an overview is visible of the user, with information about the balance of all his accounts, easily readable without anything else distracting the user from the main goal of the page, which is informing the user about its accounts and balances.

A menu on the top shows which sectors the user can go to. From Banking, to Saving, Lending and Investing. The activated sector has an orange line around the button, clearly indicating that this is the sector the user is currently in. The menu on the left clearly shows the user is on the Overview page, which is an orange button, compared to the grey, similar looking buttons underneath it.

29


Figure 2

This is the second page the user can go to, which is sending money to another bank account. As the user can see, nothing on the page has changed except for the menu on the left, which is now on “Payments”. It is highlighted in orange to indicate the user is on that part of Banking now, as the Overview button is now greyed out, indicating the user is no longer on that page. The Banking button on top of the screen is still highlighted orange, and the other buttons highlighted grey, indicating the user has not left the Banking sector of this online banking interface yet. Within the Payments section, the user can simply choose, or enter, who to send the amount of money to, and when this payment has to be done. A button saying “Send” simply sends the money to the account the user wanted to send it to.

Figure 3

30


Figure 4

31


On this screen it is clearly visible that the user has moved on to the “Savings” sector of the page, as that button is now highlighted orange, instead of the “Banking” sector, which has now turned grey. The menu on the left has adjusted accordingly to the sector, indicating which parts the “Savings” sector are relevant and can the user navigate to.

Figure 4

On the top right corners of the previous screenshots, three stripes were visible, indicating (usually on mobile web design) that there is a menu if you click on it. It was chosen to be a mobile design looking menu button to be in sync with any other mobile website or application that uses these “hamburger” menu buttons. By having the same design on all platform, the user can easily learn once how to use it, and be able to use it on any device or platform. Clicking the menu gives the user more options, such as finding a branch, making an appointment and viewing more advanced options.

32

https://www.nia.nih.gov/health/publication/making-your-website-senior-friendly


Young user

This prototype was created for the “young person” persona. The prototype shows the interface as the user attempts to complete two actions, making a transfer and performing a transaction record check.

In this interface, a global navigation menu is located on the left hand side. The idea of a global navigation menu is that it’s always there regardless of which page the user is browsing. The global navigation menu has proven to be much more efficient and provides a more flexible path mechanism than a simple selection menu (Yu & Roh, 2002). The global navigation menu includes options such as “Summary”, “Make a transfer” and “Activate new card” etc. Similarly, the “Log-off” button on the top right has a global presence. This allows the user to safely log-off from his internet banking session whenever he feels like.

On the top right of each page (excluding Fig 1 the Home page, which is the first page), a “Previous page” button is found. This is part of the web design as opposed to the traditional to the traditional “Back” button found in most web browsers. The “Previous page” button not only allows the user to return to the previous page, it also updates the server with regards to the user’s action of returning. This eliminates the “Back-button problem”, a phenomenon many experience in making online purchases (Nielsen, 1999).

Whilst making a transfer (Fig 2 to Fig 4), a double entry for recipient account information (Fig 3) is required. This is in place for error prevention purposes. The second entry of the double entry is located in the page after the page on which the first entry was made. We reckon this will minimise the chances of the user copying and pasting information across the two entries (Enders, 2013), which would effectively defeats the purpose of a double entry system.

On the home page (Fig 1), after clicking on one of the Accounts button in the body, the user will be transferred to the account summary page (Fig 5). A list of historical transaction is presented here and the user can define which period he wants to examine. After selecting 07-10-16 (7th October 2016) using the drag down box, the page is updated (Fig 6) and only transactions occurred after the 7th of October 2016 are displayed.

After two minutes of inactivity, an inactivity timeout window pops up (Fig 7) and reminds the user that the system has been left idle. The system then automatically logs-off unless the user intervenes by clicking on the “Stay logged-on” button. This prevents an unintended user to take advantage of an idle system with a dishonest intent. As the inactivity timeout window appears, the remaining contents on the page are blurred so they cannot be read. Again, this reinforces a notion of data privacy and helps to induce trust within the user (Casalo et al, 2007)

33


34


35


36


Middle aged user

Susan is a middle aged online bank user who has a high income and very busy day-to-day lifestyle. The purpose of this prototype is to provide this type of user more online options so that they’ll be able to accomplish their banking needs solely online without having to take time out of their busy schedule to visit the bank. This prototype goes through one such task of converting from one currency to another and receiving the payment by mail by providing quality service. One of the biggest issues found reported is that customers have shown dissatisfaction with their banks where banks are just not delivering service promises, often times regarded as second rate (Robert Johnston, 1997).

The prototype begins with the “Welcome Screen.” This screen is supposed to be a familiar screen for the user and provide a level of trust by displaying the bank’s name, fine print, and copyright holdings that Susan would like to see before entering in her private login details. One of the biggest issues found reported is that customers have shown dissatisfaction with their banks where banks are just not delivering service promises.

Once logged in, the screen follows the same colour scheme as before to continue with the theme of trust the bank wants to incite in its user. Displayed on this screen are a set of tabs along the upper side that provide navigation through different choices that the user would find useful. On the left side there is a brief display of the current account selected that includes the account holder name, sort code, account number, available balance and balance as of the previous night. Beneath that is a heading for recent activity that displays what is going on in regards to rentals, loans, and investments that Susan has ventured in. The middle of the screen displays all accounts which are checking and savings and the details in a much larger and more legible format so that it’s easy to see that Susan’s balances are immediately.

37


There are buttons next to them for previous statements and to perform online transfers.

Since Susan’s goal is to transfer money from one currency to the next, she will select an “Online Transfer” which brings her to another familiar page. By having an entire page devoted to accomplish this single task we aim for Susan to perceive the service easy to use by having the tasked siloed. When consumers perceive a service easy to use they are more likely to adopt using this service regularly (Rakesh H M, Ramya T J, 2014). This page allows her to accomplish the type of transfer needed through selecting a choice from the drop down menu, which account to utilise, the amount of money in the beginning currency and finally to what currency she would like to convert the beginning amount to. There is a convenient “Calculate” button in order to let Susan know that only the conversion amount will then be calculated and a transfer will not be complete.

This next screen allows Susan to choose the address she’d like to collect the money from with even the added option to add a new address since we know she is often on the go. There’s also a delivery option based on the urgency of the request. Cost has a significant relationship with Susan’s adoption of online banking utilising this service (Sohrabi, Nathan, Yee, 2012) therefore aims should be to keep the costs low. Furthermore, the final amount to be received has been calculated and displayed in a great big box with the option to “Confirm” that this is what Susan would like to accomplish. To help illustrate that money will be deducted from the account, there is a balance after conversion transfer displayed to the left and a live exchange rate to the right so that Susan could even verify that the amount she is receiving is correct.

Once confirmed Susan will be taken to another page that summarises each of her choices with the option to return to the main account overview. She will also receive email confirmation that this task has been completed by her.

4.3 Evaluation and conclusions The prototypes were analysed using an heuristic evaluation. Different elements of an online banking interface, such as consistency, user control, efficiency of use, and aesthetic design, were taken as anchor points of the heuristic evaluation. The first generation prototypes were then analyzed based on these points and were then given points in ‘severity’. These points, on a scale of 0 to 5, reflect the points the prototype needs to improve on, with 0 meaning almost no room to improve and 5 meaning plenty of room to improve. Each score is analysed in the table next to it.

4.3.1. Middle aged user evaluation This prototype has been made for the middle ages persona (Susan), who is in-between the old persona use case scenario and the young persona use case scenario. Susan is a middle aged woman who is familiar with technology and uses it; from her computer usage daily at work to her mobile phone with which see checks her e-mails, chats with her family and looks up information.

38


This prototype is a friendly looking prototype, with a welcoming screen at which Susan can log in alongside with security options to reset her password or contact the bank for more help with her security. After logging in, you progress to the overview page, at which enough information for the average user is displayed, while not having too little or too much. The main balances are shown, alongside all the relevant information regarding the bank accounts Susan owns. Next to that, there are approximately 3 menus which the user can use to navigate through the different pages of online banking. This may be too many, as each menu is displayed at a different position on the page, and they are of different dimensions as well. This may be confusing to the user, taking in doubt whether having 3 menus is necessary to display all the relevant data.

The transaction page is a lot more simplistic compared to the main overview. The page only displays the necessary forms and information to make a transaction, removing all menu’s and other structures that were on the overview page beforehand. This is inconvenient for the user, looking at a situation where the user might want to move directly to the calendar screen, where all transactions are planned, but can not, as the user has to first navigate back to the main overview. This is inconvenient and annoying for all age groups, limiting the usability and speed of navigation of the online banking interface.

Other pages, as the ‘Delivery Pickup’ page, are designed in a similar fashion as the transaction screen, and therefore also as under promising compared to the main overview screen.

Advantages

- This online banking interface seems very welcoming and extensive in displaying information and the possibility to navigate through the interface. It has a high number of menus displayed in the overview screen, giving the user the possibility to navigate straight to a page where the user wants to be, without having to navigate through other pages first.

- The interface ‘communicates’ with the user, by asking questions and guiding the user through the page, from making a transaction to asking when the user wants the transaction to be done. This makes the life of the user easier, as the user no longer has to remember and think about these things whilst making a transaction.

Disadvantages

- The prototype lacks structure and design elements, making it a very bare bone skeleton of an interface, rendering the evaluator of the prototype unable to evaluate certain aspects of the online banking interfaces to existing interfaces and other prototypes. Having a more structured design, with more design elements, makes the prototype easier to read and understand.

- The prototype has a high number of menus, which can confuse the user when the user is first confronted with it. The main overview screen has three different menus, each differing in size and position. This forces the user to look at each menu and decide which menu it needs to progress to the destined page. This costs time, and confuses the users more than needed.

39


- On other pages, such as ‘Delivery Pickup’, the prototype seems to get rid of all the menus that were present on the overview page, only displaying a button and a line of text saying ‘Go to previous page’. On other pages, such as ‘Transfers’, the line of text disappears, only to display ‘Back’. This is inconsistent and confuses the user, as ‘Back’ could mean back to the main section, but could also mean back to the last visible page for the user.

Having all menus removed also renders the user unable to navigate quickly to another section of the online banking interface, forcing the user to navigate all the way back to the main overview, from which the user then can navigate to the page the user wanted to.

Heuristic Severity Comment / Discussion

Visibility of System status 0 The system is always connected to the internet, and requires this connection to be able to be functional to the user. The system also logs the user out after a period of inactiveness. This is a helpful feature of the interface, protecting the user from fraud if the user forgets to log out.

Consistency and standards 5 The interface is inconsistent between its main overview page and its other pages, such as ‘Delivery Pickup’ and ‘Transfers’. The menus disappear and the buttons to go back to the previous page are different in shape and text – this makes the user unable to navigate easily and swiftly through the interface.

Error Prevention 4 The transfers- and delivery pickup page should both include a security option to confirm the details of the transaction before progressing and completing the action, as the user may input the wrong details and not being aware of it.

Match between System

and the real world

1 The interface is very friendly towards the user in a textual fashion, wishing the user a good morning or night according to the time the user is logged in, and guiding the user through the banking interface by asking questions about what the user exactly wants to do.

User control and freedom 3 The user is restricted in navigating through the online banking interface whenever the user wants to, as the menus disappear after the user navigates away from the

40


overview pages. This restricts the freedom and user control of the online banking interface.

Recognition rather than

recall

2 The menus disappear in certain pages and the back button changes in shape and text -> this inconsistency makes the user unable the memorise every page in a similar fashion, where all the menu and button elements are always at the same location and have the same shape. By changing there location, shape, and existence of these elements the user then has a harder time being familiar with the interface and being able to simply recognize all the elements, rather than having to search for it and try to recall from memory where the elements are.

Flexibility and efficiency of

use

3 Having the menus removed and buttons change in shape and size drops the efficiency of the interface. The user can not remember where certain elements are, as they are different in every page, and sometimes not present at all. The user then has to remember what the structure of each page was, and is forced to always navigate back to the overview page to be able to use the menu once again.

Aesthetic and minimalistic

design

1 The interface seems very minimalistic and helpful in providing information. The prototype has very few design elements to show this, but in its current form looks very efficient in delivering the information to the user.

Help users recognise,

diagnose and recover from

error

2 There is no recovery screen on the interface, not helping the users through an error they might occur whilst using the interface. The interface is, however, friendly in its language towards the user, and guides the user through the steps on the pages – this can be compared to helping them recover from an error.

Help and documentation 2 There is no help button or section visible on the interface – but as there are three menus on the overview page it can be assumed that the help section is placed on one of those menus. The transfers and delivery pickup screen show no menus, and therefore show no help or

41


documentation screen, which may render the user having inadequate knowledge to use the visible screen, and forcing the user back to the main overview screen to then proceed to go to the help section and get the necessary help.

4.3.2. Elder user evaluation This prototype is quite similar to the prototype 2 in terms navigation. Both of these

prototypes have a global menu (a menu that exists in the same position regardless of

which page the user is browsing). This prototype has a local menu and it’s something

that the other two prototype do not have.

The prototype was made for an elderly person (Trevor) and you can definitely tell that

efforts have been put into the details of the design to accommodate its target

audience. For example, an average font seems much bigger than the fonts of the young

person prototype. The use of coloured edges in both the global and local menu help to

remind the user which page he is browsing currently. This is especially useful for elderly

users, who might lose track whilst browsing through a complicated web system as he

switches from page to page.

The use of graphical illustra on of informa on (pie chart) is also something the other

two prototypes have not included. Graphical illustra on of data helps information to be

easily digested and it should be considered as something that really targets users of all

age. Any user may find it hard to visualize data and this is definitely more than an age

related phenomenon.

Albeit the large and readable fonts, the all equally sized texts may not immediate draw

the user’s a en on to the more essen al informa on on a page. For example, the font

size of the remaining balance is the same as that of the welcome message in the first

screen. The account balance and the welcome message obviously have different levels

of practical importance to the users, this could be addressed through using different

font sizes/style.

Advantages:

- The global and local menus assist the user in navigating through a complex system

that others plenty of informa on and func onality.

- The expandable side menu (a.k.a. a hamburger menu) on the top right provides even

further naviga on shortcut without hindering on the simplicity of the page. The

represen ng icon of the expandable menu also corresponds to that used widely in

mobile phone app. The user’s exis ng experience from using mobile phone apps

42


becomes cross pla orm experience. This can reduce the learning me necessary for using

our interface.

Disadvantages:

- Lack of an error preven on mechanism. Within the “Transfer” section of the system,

the user is only required to enter the transac on details once.

If the wrong input is made, the transfer might end up going to an unintended recipient.

This should be addressed as elderly users may not be familiar with using keyboards.


Visibility of System status 0 Inter-page navigation on this interface relies solely on the user’s device’s connection to the internet. For activities such as making transfers, since the request is sent to a central inter-bank clearing system, it’s impossible to provide a status report for it.

Consistency and standards

2 The global menu provides a standardised mean of navigation across the interface’s main sections. Nevertheless the local menu, which changes may prove to be confusing to an elderly user. There is a trade off between accessibility and layout/content consistency. Nevertheless, the use of the “hamburger” menu icon allows user to draw cross-platform experience to assist in the learning phase whilst using our system.

Error Prevention 3 The lack of a double entry system and a confirmation screen in the Payment section may lead to the wrong details to be entered by the user without the user noticing. The drag-down box that lets users to select a recipient account based on previous transfers somewhat partially solves the issue.

Match between System and the real world

0 The “hamburger” menu gives access to traditional banking services that the user should be familiar with. These include “Book an appointment”, “Speak to a professional” and “Branch finder”. These have real life relevance. The textual information are mainly short sentences. The question mark in “Who to transfer to ?” is

43


a great example of the system’s resemblance to as if the user is being served by a human staff.

User control and freedom 0 The previous page button allows user to backward navigate without running into the classic “Back-button issue”.

This is especially useful for elderly users who may often click on the wrong button whilst learning to use the system.

Recognition rather than recall

2 The use of graphical icons for each item in the menus may help the user in identifying them. This could help in improving browsing efficiency, particularly for elderly users who may have trouble reading.

Flexibility and efficiency of use

1 The two dimensional menu design maximises accessibility especially in a system where huge volumes of information are displayed. The menu design is a good means of categorising information and functionality. Different font sizes can be used to differentiate levels of importance of items.

Aesthetic and minimalistic design

0 A consistent and simple layout that involves menu tabs in various shapes (to distinguish between global and local menu). An activated tab is labeled with an orange outer.

Help users recognise, diagnose and recover from error

2 An error message should be displayed during invalid actions (such as transfer an amount above the balance).

Help and documentation 0 A “Help” (“Meer”) option has a consistent presence on the left hand side menu.

4.3.3. Young user evaluation The prototype analysed here is designed with a younger user in mind. The young user would like to make a transfer and check the history of their previous transfers. During this analysis we will discuss what makes this prototype good and where we can provide improvements if necessary.

44


On the first figure, there is a homepage that displays account information, login information, and a menu located on the left-hand side. The font used is simple and larger where it’s thought the user would want to turn their attention to most. The menu and login information screen is a universal theme that stays the same regardless of the action taken. The part of the page that does change is denoted by an inner rectangular box which we will take note of in the coming figures. Having a section of the screen that doesn’t change is a strength because users like seeing recurring themes because they’re part of building familiarity with the brand. It’s a modern approach that younger users will be familiar with most. In this scenario an online balance transfer is being made so using the menu on the left we select to “Make a transfer.” The screen is familiar, but with new items found in the changing rectangular section. Here, there are boxes to fill in an amount of money, account number, sort code, reference. There is a dropdown menu for you to choose the account where the originating balance will be drawn from. An intuitive design choice is to include a “Previous page” button in case the young user wants to make any amendments to their choices. Once complete the user can move on to the “Next step” where the transfer can be confirmed. Another intuitive design that most younger users will be interested in is actually seeing where their money is going. The “Current AC” button on the menu will bring the user to their transaction history. The button could use a different name as it isn’t clear where that button would bring the user. “Transaction History” is a more intuitive name. What is good is a date range that the user can choose from dropdown menus so that they can view transactions beginning at that date, then scroll through the pages. Finally, there is detection due to inactivity in which the user will be automatically logged off unless they click the button to stay logged in. This is a great security measure in order to prevent unauthorized usage regardless of where the user is. An extra feature to think about would be to include a button to “log off now” so that it would take fewer steps for the user to exit their online banking page. Overall, it’s not explicitly clear this prototype has a younger user in mind. This isn’t necessarily bad because younger users aren’t looking for anything from their banks except a familiar, easy to use, and trustworthy experience. Younger users want to see how much money they have and how their money is being withdrawn or deposited to their accounts. That is why this is an overall a strong design.

Advantages:

● Simple menu layout that remains the same when utilising different functions the bank offers

45


● Large underlined text to get the user’s attention towards the item being displayed

● Previous page buttons for amending any details within the main activity window ● Confirmation screen when making transactions ● Ability to view transactions from any date range ● Security feature that will automatically log the user off when inactivity is detected

Disadvantages:

● The “Current AC” button isn’t a clear label ● A “to:” date range would be useful to help with clutter in displaying transaction

history ● Having a “logout” button would be more intuitive on the security detection so that

the user can logout more efficiently ● There could be more account holder information displayed on screen


Visibility of System Status 0 There is sufficient information displayed on the main window that alerts the user of current activity including login information. An internet connection must be maintained in order for any action to be taken.

Consistency and Standards 1 The global menu helps the user be familiarized with the options they have available. The only issue of clarity is what the “Current AC” button will display.

Error Prevention 1 There is a “previous page” button which allows for amendments to be made. There is also a confirmation screen that summarises choices made.

Match Between System and the Real World

0 The language used is familiar and follows real world conventions.

User Control and Freedom 2 There aren’t any options available to the user to completely cancel any action being taken. They can use the “previous page” button which isn’t always intuitive.

Recognition Rather Than Recall 0 As this is an incredible simple user interface with a recurring theme it should be easy to recognize.

Flexibility and Efficiency of Use 1 Having a recurring menu provides efficiency of use as well as a the option to go back for amendments providing flexibility. However, if the user is prompted that they will timeout then they have to choose to stay logged in then manually log out.

Aesthetic and Minimalistic Design

1 There is no irrelevant information, but rarely extra information. For example if the user wants to see only a

46


select date range for their transaction history.

Help Users Recognize, Diagnose, and Recover From Error

1 An inactivity dialogue is very useful to help against unauthorized access as well as the confirmation summary when making transactions. There is still room for the user to input incorrect information and confirm that it is correct.

Help and Documentation 3 Unfortunately, there is no help and documentation to be found. There is an option to contact the bank, but it is unknown if there are proper channels for issues using the online banking interface.

4.4 Conclusion The analysis of these prototypes show that it is key to consider all age groups and all possible motives of these age groups while designing an online banking interface. From structuring the main menu’s and content screens to the colours chosen and the type language in the text written, everything is key to deliver an optimal and positive user experience while an using online banking interface. The key points of these heuristic evaluations can be concluded by collecting the average of each point, and then comparing it to the scale of 0 to 5, with 0 being no big improvements needed, and 5 being severe improvements needed. The points where severe improvements are needed are mainly the consistency and standards, user control, flexibility of use and freedom, and the help and documentation points. These points focus on the consistency of design and structure in each screen the user of the online banking interface progresses to, the control the user has to manipulate the interface, the flexibility and freedom the user has to perform any action at any time and navigate to any page at any time, and the supply of sufficient help and documentation that is clearly indicated and accessible on any screen. These are the points the second generation prototype has to focus most on, and make sure that the user has a positive experience using the second-gen prototype.

The other points that were already implemented in such a way that the user has a positive experience using the prototype were mainly the match between the system and real world, aesthetic and design, and the recognition rather than recall. This means that the first generation prototypes already a design that matched doing real life banking. This can mean from the structure and the steps the user has to take in real life to do banking, compared to the steps and structure the user has to take in an online banking interface. Next to that, the design and the structure were designed in such a way that it pleased the user's’ eyes and made the user able to recognize the pages and design, rather than having to recall it. This makes the user able to memorize the steps, thus making them able to progress through the interface much faster and much more efficiently.

47


48


5. Second generation prototype

5.1 Evaluation of tools for constructing prototype

In depth consideration was put into the pre-construction phase of our second generation prototype. The prototype was generated through a process known as wireframing, in which we aim to build a low fidelity model of our online banking interface. Several factors were taken into consideration, these included time/effort involved, our ability to operate our tool of construction and making trade-offs between the benefits of each tool given the purpose of our prototype.

When creating the second generation prototype, we considered our analysis from the first generation prototype. The tool that we used for generating the second generation prototype was Balsamiq® Mockups. Mockups is a very convenient tool for wireframing and for creating a blueprint for a web page or a software interface during early stages. Mockups allows users to have access to predesigned shapes and icons that can form the design of a software interface. More personalised content can be added through the use of annotation as well as text boxes. Balsamiq® Mockups is also free for anyone to download and it’s also integrated with Google Drive - a cloud storage platform our team has chosen for easy mutual access to our files. All these benefits point towards using Mockups as our main tool for this phase of our project.

Other than Mockups, we have also previous considered other options. There are a number of tools online that serve this purpose. We first considered Adobe Photoshop, a very powerful software for graphical design. We then came to the conclusion that it was not a suitable choice of software since it’s a relatively complex to operate. Not everyone within the team knew how to use Photoshop and as we all aimed to take part in creating this 2nd generation prototype it seemed like an unlikely option. Another downside of using Photoshop is that the purpose of our prototype is to build around and reiterate the functionality and human-friendly aspect of our program. Photoshop would be an excellent tool if we were to focus on the aesthetics, such as colouring and texture, however this is not a primary concern for us.

Microsoft (MS) Paint was also amongst the candidates. It is definitely the easiest to use of out of the four. Everyone within the team has plenty of experience in using MS Paint and so a prototype built using MS Paint would allow everyone to take turns in modifying. One huge disadvantage of using MS Paint is that it does not have a concept of grid lines, making aligning items (e.g. Text boxes, shapes) very difficult. Especially for our prototype where we have multiple pages with standardised features, these are difficult to attain under a MS Paint environment.

The final candidate was an online mockup making tool called FrameBox. FrameBox is a free online web interface that gives it users the freedom to design UI. FrameBox is completely free which made it a strong candidate in our selection process. An obvious downside of FrameBox is that it doesn’t come with an icon set, thus restricting our ability to include

49


graphical indicators to assist our users. Of course, it should be noted that FrameBox requires internet connection, which again constricts its flexibility as a software.

5.2 Description of prototype

Figure 1 is the first screen that appears after the user has logged into the interface. We refer to this as the homepage. Here, various important and essential information is displayed, such as account balances of different accounts and messages to be read by the user. Note how the account balances are in bold and underlined. This is how we differentiate the levels of importance of different information (e.g. Balance is of primary importance, Account numbers are of secondary importance). The global menu (1) allows users to switch between “Banking”, “Savings” and “Loans”. The global menu remains the same throughout navigation. The local menu (2) is a subset of each of the options in the global menu. Its content differs depending on which tab on the global menu is selected. Last log-in dates (3) are displayed on the top right of the page. On the top right, a “Log off” button (4) has a global presence. Next to each option on the local menu, an icon (5) is located to display each button’s functionality through a graphical manner.

50


The Banking (Currencies) (Figure 2) page is where the user can buy foreign currency using funds from their accounts. The first thing that should be noticed is the “Go back” button (1), the purpose of which will be further discussed later on. An activated button (2) on the local menu becomes blue. A detailed list of cross-currency conversion rates (3) is also displayed at the bottom of the page. (4) is where the user decides what foreign currency to buy, how much to buy and using which account’s funds. Drop-down boxes are used so users can only use funds from a selection of his personal accounts and a predefined universe of foreign currencies. The “Amount” box accepts any decimal numerical input.

51


Fig 3 (1) shows a concrete summary of the options the user had previously chosen and also the amount of local currency (under the currency exchange rate) to be deducted from his account. (2) is another drop-down box for the user to pick either “First class delivery” or “Standard Delivery”. (3) gives user the opportunity to enter the address to which he wants the physical foreign currency to be delivered to.

52


(Fig 4) This page largely resembles the previous page (Fig 3). (1) requires the user to re-enter the delivery details. The “Confirm” button (2) can only be clicked if the details entered in Fig 4 match what was entered in Fig 3.

53


Fig 5 This page appears after the “Payment” option is selected under the “Banking” tab. The user can make transfers to an external account from his own accounts. (1) is a drop-down box for the user to select which account to transfer from. (2) and (3) pose two ways for the user to specify which account to transfer to. (2) is another drop-down box for the user to select from a pre-defined list of accounts, to which he had previously made transfers to. On the other hand, (3) is for entering the details of a new account manually.

54


(Fig 6) If the user chooses to manually enter account details, this page will appear. As a confirmation page, this largely resembles Fig 5. (1) shows a summary of what the user had previously entered and (2) displays a double entry field, where the user must re-enter the account details. The “Confirm” button (3) can only be clicked if the details entered in (2) match that stated in (1).

55


(Fig 7) This page appears when the user selects “Transactions” on the left hand side under the “Banking” tab. This section of the interface displays a list of historical transactions (money flowing in/out) of an account. (1) shows the remaining balance of the account. (2) presents the details of each transaction with information such as date and amount involved. (3) is a filtering tool that uses drop- down boxes. The user can specify a calendar date and after clicking on the “Filter” button, the page is updated (see Fig 8).

56


(Fig 8) After specifying a date (e.g. 15 May 2016), the list of transactions on the screen will be updated. In this case, the only transaction occurred after the 15th of May 2016 will appear.

57


(Fig 9) This is a Help page located under the “Banking” tab. At the bottom of the page, many further links are available to lead users to pages where more specific instructions are given.

58


(Fig 10) Whilst using the interface, if at any point the system is left idle for more than 3 minutes, an “Inactivity detected” window will appear. This also blurs all the other information on the screen and a 60 seconds countdown will begin. The blurring feature is inherited from one of the first generation prototypes. It demonstrates the interface’s focus on data privacy which is of paramount importance in the internet banking space (Casalo, 2007). The user can override this and stay logged on by pressing the “Stay logged on” button.

59


(Fig 11) If the information entered by the user during the confirmation phase does not match what was entered previously, an error message appears and the user must re-enter the information again after clicking on the “OK” button.

5.3 A plan for the evaluation of the prototype Persona driven heuristic analysis

In this section, we aim to evaluate our second generation prototype against the ten heuristics we have used previously. The prototype will be assessed within the context of usage detailed within the scenarios of our three personas. Examining our prototypes this way will allow us to demonstrate the strengths of our design and also discover any potential area of improvement in order to enhance user experience, particularly for users similar to those characterised in our scenarios.

The evaluation could have been carried out with real persons as opposed to the personas we had created. It could have been done by asking volunteers to test the prototype and then make note of any error observed. The volunteers could then give feedback through surveys and the results could have been analysed. However we chose to use our own personas as this can provide results specific to what we have created.

Below states each user scenario and which diagrams represent it. This individual task directed analysis shows the user performing specific tasks relevant to them as discussed earlier in the report.

60


1) Susan – Buying foreign currency online (Fig 1, Fig 2 to Fig 4, Fig 9)

2) Gareth – Searching for Student Finance payment in transaction history (Fig 1, Fig 7 to Fig 9)

3) Trevor – Making a transfer to his grandchild (Fig 1, Fig 5 to Fig 6, Fig 9)

Visibility of System status

The system relies solely on internet connection. When a user completes a task such as making a transfer, the order is sent instantly to the bank, which then processes it within the inter-bank market. This is completely beyond the scope of the user.

Once the system has been left idle for more than 3 minutes (Fig 10), a 60 seconds count down begins for an automatic security log off. The counter is in numeric form and is updated every second and it’s very easy to understand.

Consistency and standards

The design of a using global and local menu throughout our interface has achieved cohesive standardisation. The “Go Back” button is also located at the same position throughout the experience.

1) The “Enter delivery address” section is always located near the bottom of the page and other transaction details are located above. All buttons related to progressing to the next stage of the process are placed on the bottom right of the page.

2) Given the simple objective of trying to go over a list of previous transaction, the layout of the page is relatively straight forward with a standardised format for listing transaction record.

3) Moving from the homepage (Fig 1) to the “Payments” page (Fig 5) might be slightly confusing for Trevor because the layout of the information changes completely. This is inevitable because of the different types of information that need to be displayed on different pages.

Error Prevention

Double entry forms have been incorporated when users are asked to input important information. If the information entered on the two separate occasions do not match, the system will not proceed as it assumes a human error has occurred.

1) For Susan, whilst purchasing foreign currencies the delivery address must be entered twice. This is critical as a wrongly entered address may result in an unsuccessful delivery of cash. When selecting the ‘go back’ button to re-enter her address, there is a chance she could press the ‘Log off’ button as they are fairly close. This could be an area for improvement with relocating this button to avoid error.

2) For Gareth’s case, since the action he wishes to take carries little chance of an error. One possible human mistake he may make is that since the “Sender/Receiver” field (Fig 8) is located far away from the “Amount” column, he may have difficulty in matching the values from those two columns at a glance.

3) For Trevor, who is known to be prone to making mistakes whilst operating computer systems, extra safety functionalities have been incorporated. Besides the double entry (Fig 6)

61


required on manually entering recipient account details, he can instead choose to pick from a drop-down box (Fig 5), a previously known account to transfer to. This not only minimises the scope of making human errors but also saves a lot of time.

Match between System and the real world

A welcome message is displayed on the homepage (Fig 1) and the message changes depending on the time of the day. Since internet banking is a digitalised form of presentation of a traditionally human-driven service, it’s important for a touch of human to be observed whilst using operation of the interface.

1) For Susan, she is looking for an experience that is similar to her previous experience of exchanging currency at her local post office branch. Phrases such as “I want to buy:” closely resemble a real-life service experience. The cross-exchange rate table is also something she would expect to see and read from in a post office branch.

2) For Gareth, the experience of reading through a record of transaction is almost identical to reading the monthly bank statement he receives through the post.

3) Trevor is very familiar with the traditional way of retail banking. Going to the branch in person and be served by an actual human being. Each of the required field to be filled in are labelled with a question-like statement such as “Who do you want to transfer to?”. This captures the user’s attention in the most human-like manner possible.

User control and freedom

The system provides access to viewing and managing various aspects of the user’s daily banking operation (e.g. Savings, Loans). There is definitely a trade-off between the level of user freedom and reduction in chances of human error that needs to be attained. Given the straightforward objective within our scenarios, relatively few unconventional options have been made available to the users. This on the other hand helps to reduce the chances of e.g. mis-inputting information. Since banking is a sensitive area as it involves money, extra attention during operation of such system is needed.

Recognition rather than recall

The use of icon, which was surprisingly overlooked in our first generation prototypes, should be convenient for all three users during the navigation of the system. The buttons are also labeled with text that are easily interpreted and are meaningful, unlike the use of abbreviation, which was pointed out as a weakness in one of our first generation prototypes. An activated button on the local menu is coloured differently to others. This constantly reminds the user where she is at.

Flexibility and efficiency of use

1) For Susan, it would be more convenient if she could see a real time currency converter as she enters the amount she wants to buy in the foreign currency stated. This would save her time from having to do the calculation herself using the exchange rate from the table below.

62


2) For Gareth, he can use his own extra knowledge (e.g. roughly when the Student Finance payment was made) and incorporate that into his usage (filtering the transactions by date) of the system to speed up the process. As an area of potential improvement, he might want to even search the by entering name of the sender/receiver. The remaining balance, albeit clearly visible on the top right of the page (Fig 7), it is located far away from the list of transaction. It seems slightly unnatural as the balance and the transaction record should be information that are complementary to each other.

3) For Trevor, as a non-tech savvy person who is slow at inputting data using a keyboard, the fact that he can re-select a previously entered account saves him a lot of time. In one sense, having to enter a new bank account twice may prove to be very time-consuming to him, it remains to be a fundamental feature that we want to keep because of the severity of any potential mistake.

Aesthetic and minimalistic design

The plain coloured background and similarly coloured menu buttons are aesthetically soothing with minimal visual contrast. Other than the, when activated, blue coloured button (which is needed because its aim is to catch the user’s attention) the rest of the page seems well integrated because of its monotonic colour scheme. The simplistic icons add to the ease of navigation without causing too much visual distraction for the user. The way the global menu tabs are placed on the top also resemble the old-fashioned section tabs on paper folders.

Help users recognise, diagnose and recover from error

For Trevor and Susan, the double entry system detects discrepancy between the information the user enters (e.g. Address and account detail). Once detected, a message will appear (Fig 11) and the user must re-enter the information again. For Gareth, it’s more straightforward. If he selects the wrong date for filtering, he only needs to select the correct data to filter once again. Nevertheless, only himself knows the correct date he wants to select, therefore the system will not be able to notify him if he made an error whilst doing do.

Help and documentation

As pointed out in two out of three of our first generation prototypes, no “Help” options were available and it was found to be essential, especially for a platform that is capable of multiple functions. A “Help” button is located on every local menu (Fig 1) and once clicked a page containing problem resolving instructions is displayed (Fig 9). Further links to more granular ways to seek help are located at the bottom of the page. Nevertheless, the “Help” page seems slightly overloaded with text-based information and a system with better step-by-step guidance to specific solutions should be considered.

5.4 Results and Conclusion The second generation prototype was created to achieve the following:

63


- Show basic functions and tasks specific to the three personas, enabling us to give constructive criticism for future adjustments.

- Combine all the advantages found from the first generation prototype with improvements to create a fully functioning second generation prototype.

-Using Balsamiq®Mockups to generate the prototype in an efficient and standardised manner.

The persona driven analysis test was carried out to understand the strengths and weaknesses of the prototype, from each persona’s perspective. It showed many positive attributes of the system, along with a few small areas of inadequacy.

It is inevitable that some errors will still remain for certain features. For example, when considering confusion for the elder persona, or when looking at visibility of system status, if the internet connection were to disconnect the user would just have to log back on.

One of the problems found was related to the location of the ‘log off’ button. It is located closely to the 'Go Back' button and mistakes can be made when in a rush, especially for the elder persona. It would be simple to relocate the button to the middle of the screen to avoid such confusion. A further adjustment could be to change the wording of the 'Go Back' button as evidence from the first generation heuristic suggested there was some confusion with the meaning. It could mean go back to the previous page or go back to the home page. A better option would be renaming it to 'Previous page', so it's function is more indicative.

With regards to the aesthetic issues, these do not come as a large problem as there are close to none. Perhaps the font size of the last log on could be increased for easier reading, especially for the older user.

When considering the evaluation from the first generation prototype, the help and documentation section was deemed to be the worst for the young persona and was given a score of 3. This has been updated to now include more information regarding problem solving, but again has areas for improvement as discussed above. The elder and middle user found the error prevention in the first generation to be the severest, giving it scores of 3 and 4 respectively. However the double entry system now overrides this problem, ensuring only accurate information can be submitted.

When looking at consistency and standards, the middle aged user found this to be the worst aspect and found navigation fairly difficult. This has been modified in the second generation prototype so that, for example, the 'next' button is always in the bottom right corner. The way certain information was displayed has been changed so that it is now in the form of a drop down box, making it neater and easier to read. These changes allow for easier and swift navigation around the interface with low chances of confusion.

One area of sufficient improvement, as mentioned above, is in relation to the efficiency of use. Implementing a real time currency calculator would be beneficial when purchasing currency as it would save the user looking up the current rates.

We chose not to test our prototype with the real life personas, however this could have provided unbiased feedback and potentially shown hidden errors. This could be noted for further improvements.

64


65


Summary and recommendations

As a group we have set out to improve a user’s online banking experience and we believe we have done just that. This is our greatest achievement. There were many conflicting ideas in regards to the approach for this task. These ideas had manifested into prototypes of different personas after careful review of related work and existing systems. The ideas are strong because each of us had put thought and care when it came to selecting who we were designing for and what we wanted to accomplish in our overall prototype for these users.

Our prototype is concise, easy to use, and very straight forward. This is achievable for each persona we have selected and the problems they would like to solve:

● Young and frugal ● Middle-aged with a high income ● Elderly and not so tech-savvy

The young user will enjoy the fact that the bank’s landing page is a summary of their balances. They may not make much use of the Savings feature just yet, but the Loan feature will be useful to those attending university. The younger user will also be able to navigate their transaction history from the sidebar menu or check their loan history with a simple click of a button.

With the middle-aged user they will feel most comfortable with the bank’s interface as they will have spent more time on it monitoring their own funds frequently. The Savings and Loans feature will also be of great use with how easy the user will find navigating between these accounts. Processing a transaction to convert their currency has also never been easier due to the scenario we have addressed.

The elderly user could have the most trouble with the interface because they tend to be the least tech-savvy user type. Still, we are confident that our interface will be straightforward in that they will be able to, for example, easily transfer money to one of their grandchildren. There has been much thought placed into this prototype to avoid clutter and information overload which could overwhelm an elderly user. It shows a degree of thoughtfulness to a user we have found neglected.

One notable accomplishment was implementing a security feature when incorrect information has been entered to hide any sensitive data on the screen. We did not encounter other banks using this in our review of existing systems. Along with a time-out function for when the user becomes inactive so that they are automatically logged out, we feel that these are great security measures. Another great aspect about our design is having highlighted menu items based on the activity displayed on the screen. The colour scheme is easy to read for all types of users while any inactive windows or options are greyed and therefore not being used. We have included pie charts as well which we have found not all banks use and are extremely easy to read by all users.

66


With that said, we feel strongly we have addressed the issue in building a better online banking interface. Balsamiq provided us with a tool to create a minimal, consistent, and flexible interface that will be easy to begin using right from the start.

A feature that could potentially be considered is a user behaviour analytics system. Such system would be based on advanced Machine Learning algorithms, analysing historical user behaviour data (e.g. Previous actions taken) using learning methods the likes of Bayesian reasoning. Based on historical user patterns, the system can model a regularised set of behaviour for each user (Lee, McCartney, Santos, 2001) and the our system can alert the user whenever his/her choice of action deviates from the predicted pattern. For example, in our elderly user persona if the user were to select and transfer to account B, whilst his most recent transfers were mostly made to account A, the system would flag his action and a pop-up window would appear to ask for confirmation. Similarly in our middle aged persona, if the user were to purchase USD (US Dollars) after having been a frequent buyer of JPY (Japanese Yen) in the past according to the system, his/her action would require extra confirmation. The feature would greatly reduce the probability of making a human errors and shall also help user to diagnose and recover from such errors. These highlight the limitation of our double entry system, namely its inability to prevent mistake if the drop-down box were used rather than entering details manually.

Another data driven design feature may analyse the path of choice of the user when trying to achieve an objective (e.g. “Making a Transfer” or “Buying Currencies). The system then develops a good understanding on for example, which buttons and in what sequence would a user click to reach his/her desired page. Such information should then be factored into our user interface design process and help the design team to maximise user browsing efficiency through optimising the path mechanisms for the users whilst navigating.

User behaviour data driven UX designs have proven to be more user-friendly than its global, non-user specific counterpart in many academic literatures (Dembczynski, Kotlowski, Sydow, 2008). A user behaviour driven approach would be particularly effective in the internet banking space given personal nature of its use (e.g. It’s unlikely person B would be logged-in as person A in an online banking system). Therefore, it’s safe to say that most captured behaviour can be accurate predictors of future actions. An obvious downside is that before the feature can be implemented, sufficient user behavioural data must be gathered for analytical purposes. If a user is an infrequent user then this feature might be of little help to him, either as the feature is not implemented or worst still, if inaccurate predictions are forced out of insufficient sample data.

Project Analysis

Our design choice was definitely the preferred option. Interfaces in online banking are an issue that the largest corporations and banks in the world are trying to address all the time. Due to the scope of the project we began evaluating mobile and online banking applications. Upon working further, we were able to narrow down our project to address online banking interfaces. This was a good thing because we were able to address current issues that millions of user are having challenges with each day when performing simple tasks in online

67


banking. For example, our main goal was to build an intuitive design that would require little to no learning curve for any user.

Meetings were scheduled once a week including feedback sessions when the majority of the group could be present. During the meetings, we took down notes of what needed to be accomplished and discussed amongst ourselves regarding who would do which tasks. We were all very focused so it was not difficult staying on task and addressing each topic that needed to be completed by the following week. Having a week-by-week syllabus on what we should accomplish was instrumental for us staying on target so that the majority of the work was done prior to the week that the project was due. The best part about working together was that we were all open to criticism and welcomed each other providing input on the work each other had accomplished.

The early stages of the report were difficult regarding the research. In our feedback sessions we were told that we needed to include more theory and that was what we had set out to do. There was plenty of research regarding mobile banking interfaces which posed the issue of finding specific literature based on desktop online interfaces.

With regard to the personas, we were hesitant at first with deciding to create only three instead of four due to our group size. We decided upon a set three we would use and quickly began work on drafting their pages up. One critique that we had received was there needed to be some more detail in the scenarios. After addressing the issues, we reaffirmed which scenarios from each persona that we wanted to conceptualise into a first generation prototype. Having found the literature reviews and images that we did, the prototypes were then not too difficult to draft. These allowed us to create thoughtful prototypes that would address the issues in the chosen scenarios.

Helpful input during our feedback sessions allowed us to easily hone in on our second generation prototype. We decided to use Balsamiq because of how simple it looked to use through demonstrations in lecture. The product was also free to use for 30 days which helped us make a final decision to use that software. What we did not realize at first was that Balsamiq also has integrated support with Google Drive which was our collaboration tool of choice for submitting work. This made collaborating on the second generation prototype a smoother task.

The approach to the project was overall positive. We as a group put forth our best effort to get work done. There definitely were differences in approaching the project for example that we wanted to change. In the beginning we were all working on the same tasks because we felt that was a fair way to distribute work so that everybody would be doing an equal amount of work each week. We found that it resulted in all of us doing more work than what needed to be done so we improved on that by simply addressing what would meet the demands of each week’s assignment schedule. Upon working further, we found that our schedules and busy personal lives would become more complex. In order to challenge this, we adapted by distributing work based on the availability of each other and being flexible with dates when we wanted tasks to be done by. Overall we stuck to a rigid schedule to complete a project we can confidently say will improve the lives of users in need of a better online banking interface.

68


References - Avinandan Mukherjee, Prithwiraj Nath, (2003) "A model of trust in online relationship banking", International Journal of Bank Marketing, Vol. 21 Iss: 1, pp.5 - 15

- Ahn, Ryu & Han (2007) “The impact of Web quality and playfulness on user acceptance of online retailing” Graduate School of Management, Korea Advanced Institute of Science and Technology, 207-43 Cheongryangri-Dong, Dongdaemun-Gu, Seoul 130-012

69

http://www.emeraldinsight.com/author/Mukherjee%2C+Avinandan

http://www.emeraldinsight.com/author/Nath%2C+Prithwiraj


- B.M. Muir, N. Moray. (1996). Trust in automation: Part II, Experimental studies of trust and human intervention in a process control situation. 429-460.

- Burchell, B. & Marsh, C. Qual Quant (1992) 26: 233. doi:10.1007/BF00172427

- Byeong-Min Yu, Seak-Zoon Roh (2002) “The effects of menu design on information-seeking performance and user's attitude on the World Wide Web” Journal of Information Technology, Volume 53, Issue 11, 2002, Pages 923–933

- Casalo, Flavian Guinalir (2007) “The role of security, privacy, usability and reputation in the development of online banking”

- De Angeli, A (2006) “Interaction, Usability and Aesthetics : What Influences Users' Preferences?” DOI: 10.1145/1142405.1142446

- Dembczynski, Kotlowski, Sydow (2008) “Effective Prediction of Web User Behaviour with User-Level Models”

- Flavián, C, Guinalíu, M & Gurrea, R. (2006). The role played by perceived usability, satisfaction and consumer trust on website loyalty. http://www.sciencedirect.com/science/article/pii/S0378720605000169. Retrieved on 18-11-2016

- Hager, D, Kibler, C, & Lauren, Z, (1999). The basics of user-friendly Web design. http://search.proquest.com/docview/219179502/fulltextPDF/89378521C2F84F28PQ/1?accountid=8630. Retrieved on 18-11-16

- J. Enders (2013) “Double entry of form field” Formulate Information Design

- J. Nielsen (1999) “User interface directions for the web” Communications of the ACM, Vol. 42 No. 1, Pages 65-72 10.1145/291469.291470

- J. Nielsen (1993) “Usability Engineering” Morgan Kaufmann Publishers Inc. San Francisco, CA, USA ©1993

- J. Fleming (1984) “Web Navigation: Designing the User Experience” 1st Edition September 1998 1-56592-351-0

- Krug, S. “Don’t Make Me Think: A Common Sense Approach to Web Usability” (2006), Berkeley, CA: New Riders, Second Edition

- Lee, McCartney, Santos (2001) “Learning and Predicting User Behavior for Particular Resource Use”

- Maryam Sohrabi, Julie Yew Mei Yee, Robert Jeyakumar Nathan, (2012), “Critical Success Factors for the Adoption of e-Banking in Malaysia”

- Morrell (2001) Older Adults, Health Information, and the World Wide Web L. Erlbaum Associates Inc. Hillsdale, NJ, USA ©2001 - pg. 209

70

http://www.sciencedirect.com/science/article/pii/S0378720605000169

http://search.proquest.com/docview/219179502/fulltextPDF/89378521C2F84F28PQ/1?accountid=8630



- Robert Johnston, (1997), "Identifying the critical determinants of service quality in retail banking: importance and effect", International Journal of Bank Marketing, Vol. 15 Iss: 4 pp. 111 – 116

- Rakesh H M, Ramya T J (2014), “A Study On Factors Influencing Consumer Adoption of Internet Banking in India”

- R. Yan, “Icon Design Study in Computer Interface,” Procedia Eng., vol. 15, pp. 3134–3138, 2011.

- S. Bodker, "Scenarios in user-centred design-setting the stage for reflection and action," Proceedings of the 32nd Annual Hawaii International Conference on Systems Sciences. 1999. HICSS-32. Abstracts and CD-ROM of Full Papers, Maui, HI, USA, 1999, pp. 11 pp.-

- Wei Xie, Hairong Sun, Yonghuan Cao and Kishor S. Trivedi (2003) “Optimal Webserver Session Timeout Settings For Web Users”, Department of Electrical and Computer Engineering, Duke University, Durham, NC 27708

71


Developing a user-friendly online banking interface.rjh/courses/IntroductionToHCI/... · Module:...

Documents

Transcript of Developing a user-friendly online banking interface.rjh/courses/IntroductionToHCI/... · Module:...