Assesment of Online Bank GUI based on User Experience Evaluation

A Case Study

Malgorzata Plechawska-Wojcik

and Kamil Kolodziejczyk

Institute of Computer Science, Lublin University of Technology, Nadbystrzycka 36B, Lublin, Poland

Keywords: User Centered Design, User Experience, Online Banking, Web Personalization.

Abstract: The paper presents a case study of User Centered Design (UCD) assessment. The case study is aimed to

design and test GUI of online banking application. The procedure is multistep, based on UCD phases. Case

study implemented such methods as Contextual analysis, Heuristic evaluation, Prototyping and extended

iterative User test. The paper outlines contain description of applied methods and results including survey

summary and users recommendations. The adjusted version of GUI is also presented.

1 INTRODUCTION

Intuitive and functional interface becomes one of the

most important requirements for modern web

applications. To fulfill this requirement User

Experience (UX) needs to be regarded in the process

of application development. According to recent

research (Isomursu et. al, 2012) the expanding role

of User Experience Design became more and more

industry relevant. Interface adaptation to user needs

and recommendations and its personalization is a

key factor of today ICT project, especially web

applications (Prenzel and Ringwelski, 2012). Impact

of UX on ITC, business and projects has been

explored by numerous authors (Dhir and Al-kahtani,

2013, Blomkvist, 2005; Chamberlain et al., 2006;

Dayton and Barnum, 2009; Detweiler, 2007).

User Experience has an interdisciplinary

character. A designer needs to: have psychological

knowledge, know principles of ergonomics,

understand the technology and, that is the most

important one – have empathy. The ability to

understand the needs of future users increasingly

becomes a key factor in the success of the resulting

product.

In recent years in the European online banking

market we can observe a trend of offering customers

modern interfaces, formed under the principles of

User Experience. Their projects present new insights

into GUI (Graphical User Interface) design.

These changes were initiated by the rapid

popularization of tablets and smartphones.

Applications had to adapt to different resolutions

and conditions (Resmini and Rosati, 2011).

In addition, mobile devices made it easier to use

the Internet by less experienced users, who expect

mostly intuitive solutions. Especially for them it was

necessary to put more attention to the overall GUI

usability and to apply User Centered Design (UCD).

The aim of the paper is to apply a set of UCD to

design and test GUI of online banking application

2 USER CENTERED DESIGN

User Centered Design is the methodology applied to

create useful, ergonomic products. It requires

understanding of the target users and needs to meet

their expectations. This aim can be achieved by

putting the user into the center of the design process.

The task of the designer is to focus the attention on

user and simultaneously consider capabilities and

limitations of used technology (Rubin, 2008).

UCD consists of a number of methods dedicated to

involve users in the process of the project designing

and evaluating. UCD is divided into five phases:

 Planning (i.e. Contextual analysis)

 Requirements analysis (e.g. in-depth interviews,

analysis of existing solutions)

 Design (e.g. prototyping, heuristic evaluation)

 Implementation (e.g. lo-fi prototyping)

 Tests (e.g. heuristic evaluation, usability tests)

Simple is an interesting example of UCD-based

online bank (Figure 1). The main objective of this

startup is to provide a personal account equipped

365

Plechawska-Wojcik M. and Kolodziejczyk K..

Assesment of Online Bank GUI based on User Experience Evaluation - A Case Study.

DOI: 10.5220/0005109203650370

In Proceedings of 3rd International Conference on Data Management Technologies and Applications (DATA-2014), pages 365-370

ISBN: 978-989-758-035-2

 2014 SCITEPRESS (Science and Technology Publications, Lda.)

with innovative web and mobile services. A lot of

attention was paid to fulfill requirements gathered

from users. That is why Simple is sometimes

referred as "Anti-bank".

Home page is focused on presenting transaction

history in a way to make quick and efficient

searching. The horizontal menu enables to display

statistics and to sort data. Its location remains

unchanged for all pages, but the searching panel and

supportive buttons adjust to currently presented

information.

Other interesting feature is Safe-to-Spend, a

function that shows the available funds. It is

calculated based on the free funds, planned expenses

and saving plans. This solution reduces visual clutter

by focusing on what is important for the user.

Figure 1: Bank Simple.

3 APPLIED METHODS

The most important methods applied in the case

study are: Contextual analysis, Heuristic evaluation,

Expert Analysis, Prototyping and User tests.

3.1 Contextual Analysis

Contextual analysis of the project consists in

preparing a detailed description of the target user

and cases of application usage. Performing surveys

and in-depth interviews enables to understand the

future users profile and user requirements.

It allows to detect the expectations and

requirements of the project. In many cases it enables

to discover latent user needs and, as a result, they

allow to better understand their motives.

3.2 Heuristic Evaluation

Heuristic evaluation is a popular method of suability

checking. It allows to evaluate the interface based on

a set of established guidelines called heuristics.

Unlike usability testing which needs to be performed

with end users, heuristic evaluation can be made by

everyone, regardless of skill level (Martin, 2012).

Evaluation enable to assess the conformity of the

application with heuristics to identify and eliminate

inconsistencies in the project. Consequently, tests

usability performed later are more effective.

The most common set of heuristics is a list

created by Jakob Nielsen (Nielsen, 1994). It

contains:

 Visibility of system status

 Match between system and the real world

 User control and freedom

 Consistency and standards

 Error prevention

 Recognition rather than recall

 Flexibility and efficiency of use

 Aesthetic and minimalist design

 Help users diagnose, and recover from errors

 Help and documentation

3.3 Expert Analysis

In order to obtain the results in a web application

testing, the conglomerate of expert analysis might be

applied. The expert analysis criteria applied in the

paper contain the detailed list of areas and subareas

with questions assigned to each point. The group of

main areas contains (Milosz et al., 2013):

Application interface, Navigation, Feedback and

Content. Detailed list of questions is presented in

Table 3 in the paper’s results sections. Table 1

presents the grading scale used to assess each

evaluated assessed area.

3.4 Prototyping

Prototyping is a technique consisting in creating

mock-ups (interface schemas). They allow to detect

any potential problems with the application early on.

They present the look of individual application

elements and enable performing heuristic evaluation.

They assure minimum cost of changes. Minor

modifications of the interface can result in

significant changes in the implementation. It

contributes to a significant increase in production

costs (Mathis, 2011).

3.5 User Test

User test is the best way to verify the effectiveness

of the interface. It shows if the application is

DATA2014-3rdInternationalConferenceonDataManagementTechnologiesandApplications

366

understandable to users and what areas might be

difficult to navigate for them (Mathis, 2011).

Table 1: The grading scale applied to the LUT list.

Grade Description

Critical usability errors were observed,

preventing normal usage or discouraging

user from usin

the application.

Serious usability issues were

encountered, which may prevent most

users from task realization.

Minor usability issues were observed,

which if accumulated may have negative

impact on user performance.

Single minor usability issues were

observed, which may have negative

impact on user work quality (e.g. poor

readabilit

o usability issues influencing either

user performance or work quality were

identifie

In order to ensure the effectiveness of the test it

is necessary to define the most important tasks for

users (Allen, 2012). Only one user should be tested

at a time. Thinking aloud protocol might be applied

in order to achieve better results.

4 CASE STUDY

The presented case study describes the analysis of

created GUI of online banking application.

Performed multilevel analysis consisted in: Planning

and requirements analysis, GUI Design and

implementation and Usability testing.

4.1 Planning and Requirements

Analysis

Contextual report was the result of the planning

phase. Table 2 focuses on general information about

members of chosen user group, their abilities and the

tasks they need to perform.

At the end of this phase competitive analysis was

conducted to understand possible solutions for main

problems and to locate potential unaddressed issues.

In result twenty EU online banks were subjected to

cognitive walkthrough and heuristic evaluation.

4.2 GUI Design and Implementation

During the design phase two low-fidelity interfaces

were prepared (presented in Figure 2 and Figure 3).

They show two different approaches to fulfill the

project requirements.

Table 2: User type description.

User t

pe Bank account owners

Skills and knowled

Training and experience

in the business processes

early all experience

Experiences

Using other product with

similar main functions

Majority familia

Using products with the

same interface style

Majority familia

sical attributes

Age 14+

Typical age 16

–

Gende

50% male, 50% female

Motivations

Attitude to

ob and tas

motivate

Attitude to the produc

Var

List of tasks

Tasks

identified

 Checking transaction history

 Making money transfer

 Making payment

 Expense analysis

 Credit card management

Tasks for

usability

evaluation

 Checking transaction history

 Making money transfer

 Expense analysis

Ten experts representing the target user group

were selected to test both solutions. They filed the

survey presented with collected data in Table 3.

The results conclude that the overall assessment

of both interfaces was good. The second interface

got a slightly higher score. In addition it was

considered a more interesting alternative. Although,

its readability could use improvement. Moreover,

feedback section shows users weren't as sure about

what needs to be done to complete each action.

4.3 Usability Testing

Based on the user feedback the second interface was

improved and redesigned as a high-fidelity mock-up

(Figure 4) dedicated for the usability testing.

AssesmentofOnlineBankGUIbasedonUserExperienceEvaluation-ACaseStudy

367

Figure 2: First interface.

Figure 3: Second interface.

Figure 4: High-fidelity mock-up.

Conducting expert analysis helped to reduce the

number of potential issues, thus making the study

more effective.

Usability testing consisted of two series of

studies. They were separated by the design phase,

which focused on fixing the most important issues

discovered during the first round of tests.

Table 3: Results of Expert analysis.

Questions

Interf

Application interface

4.4 4.425

Is the interface readable? 4.7 4.4

Are the interface elements

arran

ed properl

4.4 4.4

Is it consistent? 4.6 4.7

Is it clear why the interface is

arranged this way?

3.9 4.2

Navigation

4.4 4.5

Is the access to all sections and

functions easy and intuitive?

4.3 4.4

Is it easy to get around the

application?

4.6 4.5

Is the menu eas

to use? 4.5 4.5

Is it easy to find required

information?

4.5 4.4

Is the navigation well planned?

4.1 4.7

Feedback

4.15 4.2

Is it easy to perform all the main

actions?

4.2 4.5

Is it clear what needs to be done

to perform each action?

4.1 3.9

Content

4.35 4.4

Are labels and headlines easy to

understand?

4.5 4.6

Is the application content easy

to understand?

4.4 4.8

Is there an access to all actions

you consider necessary?

4.5 4.4

Is it possible to customize the

interface based on your needs?

4 3.8

The entire interface

4.353 4.413

Five people participated in the first study. Their

experience in online banking varied from average to

high. Each subject received a set of tasks to perform

using the mock-up. They were also asked to think

aloud during the test.

Instructions were put in a form of typical

everyday scenarios, which required users to perform

tasks chosen during the contextual analysis.

The list of tasks contained such items as:

1. Making a regular money transfer from the main

account and saving the wire as a new template.

2. Making a self-directed money transfer between

personal accounts.

3. Checking details of one of the incoming

transfers.

4. Changing primary account in the sidebar.

5. Checking current week expenses summary.

Each test took place at participants home, on

personal computer. The session length varied from

DATA2014-3rdInternationalConferenceonDataManagementTechnologiesandApplications

368

ten to twenty minutes, and was followed with post-

test interview about the overall experience.

The goal of this round of tests was to verify

reactions and feelings about the interface. It also

allowed to identify the most apparent issues.

Prototype was appreciated by the participants.

The widget with quick access to the main account

was assessed as helpful. All users admitted they

check the history after each transaction. That's why

the integration between new money transfer form

and the history view was considered useful.

Two issues took place during each session. Users

weren't sure how to switch their account in the

widget and they had problem with editing money

transfer form. For a few participants proximity

between elements led to confusion and some

phrasing proved to be ambiguous.

Table 4 presents task completion rate for the

study. The average rate for a task was 76.67%. It is

worth noting, that the most important tasks got

100% completion rate.

Table 4: Task completion rates for the first study.

Task 1 2 3 4 5 All

Making a money transfer

1 1 1 1 1 100%

Saving it as a template

0 1 0 1 1 60%

Making a self-directed transfer

1 1 1 1 1 100%

Finding particular transfer

1 1 1 1 1 100%

Changing primary account

0 0 1 1 0 40%

Checking average spending

0 1 0 1 1 60%

Based on user findings a list of needed changes

was created. It contains such items as:

 Main menu needs visibility improvement

 Money transfer should be easier to edit

 Information architecture should be improved to

emphasize the connection between search,

filters and the activities

 Widget should provide easier way to switch

between accounts

The list of changes for the interface, based on the

summary of findings, was used to improve the

prototype. It consisted of a total of twelve

improvements that needed to be addressed in five

areas of the mock-up.

The second series of tests was conducted in

a laboratory setting. It focused on discovering

remaining usability issues. Improving the mock-up

allowed to invite unexperienced users as well.

Eight participants were asked to perform the set

of instructions on the revised interface. Each test

took place on a computer connected to eye-tracker.

This allowed to obtain more accurate data.

Table 5 presents task completion rates for the

second study. This time the average rate was

95.83%. Usability tests helped to improve the

interface and to achieve much better results.

Table 5: Task completion rates for the second study.

Task 1 2 3 4 5 6 7 8 All

Making a money transfer 1 1 1 1 1 1 1 1 100%

Saving it as a template 1 0 1 0 1 1 1 1 75%

Making a self-directed transfer 1 1 1 1 1 1 1 1 100%

Finding particular transfer 1 1 1 1 1 1 1 1 100%

Changing primary account 1 1 1 1 1 1 1 1 100%

Checking average spending 1 1 1 1 1 1 1 1

100.0

Collected data was used to generate series of

heat-maps visualizing eye fixations for specific areas

of the interface.

Figure 6 presents heat-map for the first five

seconds of the test. The biggest hot-spot was

detected over the widget. This is where the most of

the attention was focused during the first task.

Average time until the first fixation is shown in

Table 6, to present users' behavior in more detail.

Figure 5: Heat-map.

Table 6: Average time until the first fixation for Main

Menu (M) and Widget (W).

1 2 3 4 5 6 7 8 All

M 197.5 141.8 4.6 91.6 131.7 3.9 3.3 8.3 72.8

W 0.6 0.4 35.7 1.8 2.23 2.9 0.9 5.2 6.2

AssesmentofOnlineBankGUIbasedonUserExperienceEvaluation-ACaseStudy

369

As concluded by the heat-map, widget grabs

more attention. However, some people decided to

focus on main menu, even though the widget could

also be used to complete the task.

Similarly to previous study, a list of needed

changes was created. It contains such items as:

 The button for sending money transfer should

be more visible

 Emphasize the fact that the money transfer form

has three steps instead of one

 Search and filters should have visible labels

 Search results list should have visible label

The list will be the foundation for the final

design phase, which will result in creating the final

graphical design for the application.

5 CONCLUSIONS

The paper provides evidence for the positive impact

User Centered Design can have on a designed

interface. The process equips designer with the

necessary tools to come up with appealing solutions

that will benefit users. It helps to gain better

understanding of users' habits and expectations.

That's the reason why the interface, created as

a result of the case study, brought positively-

surprising experience to the usability study

participants. We trust that applying user centered

approach is a necessary step towards crafting better

interfaces for the users.

User Centered Design is an iterative process, that

is why our case study project was subjected to two

series of design, implementation and testing phases.

Second series of studies helped to eliminate all

important issues and get optimised design solution.

REFERENCES

Allen, J., Chudley, J., 2012. Smashing UX Design:

Foundations for Designing Online User Experiences,

John Wiley & Sons Ltd, Chichester.

Blomkvist, S., 2005. Towards a Model for Bridging Agile

Development and User-Centered Design. Human-

Centered Software Engineering — Integrating

Usability in the Software Development Lifecycle.

Human-Computer Interaction Series, 2005, 8, IV, 219-

244.

Chamberlain, S., Sharp, H., Maiden, N., 2006. Towards a

Framework for Integrating Agile Development and

User-Centered Design. Extreme Programming and

Agile Processes in Software Engineering. Lecture

Notes in Computer Science, 4044/2006, 143-153.

Dayton, D., Barnum, C., 2009. The Impact of Agile on

User-centered Design: Two Surveys Tell the Story.

Technical Communication, 56 (3).

Detweiler, M., 2007. Managing UCD Within Agile

Projects. interactions 14, 3, 40-42.

Dhir, A., Al-kahtani, M, 2013. A Case Study on User

Experience (UX) Evaluation of Mobile Augmented

Reality Prototypes. Journal of Universal Computer

Science, vol. 19, no. 8 (2013), 1175-1196.

Isomursu, M., Sirotkin, A., Voltti, P., Halonen, M., 2012.

User Experience Design Goes Agile in Lean

Transformation -- A Case Study. VTT Tech. Res.

Centre of Finland, Finland.

Martin, B., 2012. Universal Methods of Design: 100 Ways

to Research Complex Problems, Develop Innovative

Ideas, and Design Effective Solutions, Rockport

Publishers, Beverly.

Mathis, L., 2011. Designed for Use, The Pragmatic

Bookshelft, Dallas.

Milosz M., Plechawska-Wojcik M., Borys M., Laskowski

M., 2013. Quality Improvement of ERP System GUI

Using Expert Method: a Case Study, 6th International

Conference on Human System Interaction, in print.

Nielsen, J., 1994. Heuristic evaluation. In Nielsen, J., and

Mack, R.L. (Eds.), Usability Inspection Methods

Prenzel A., Ringwelski G., 2012. Design of Human-

computer Interfaces in Scheduling Applications.

Proceedings of ICEIS Conference, pp. 219-228.

Resmini, A., Rosati, L., 2011. Pervasive Information

Architecture: Designing Cross-Channel User

Experiences. Morgan Kaufmann Publishers.

Rubin, J., Chisnell, D., 2008. Handbook of Usability

Testing, Second Edition: How to Plan, Design, and

Conduct Effective Tests, Wiley Publishing Inc.,

Indianapolis.

Thomas, C., Bevan, N., 1996. Usability Context Analysis:

a Practical Guide, National Physical Laboratory,

Teddington.

DATA2014-3rdInternationalConferenceonDataManagementTechnologiesandApplications

370