CMT206 Human Centric computing

Coursework part 1

Contents
Application and User Description .......................................................................................... 2
Task Analysis .......................................................................................................................... 3
STN1 for use case1 ................................................................................................................ 7
STN2 for case 2 ...................................................................................................................... 7
Interface Prototype ............................................................................................................... 8
Alternative design................................................................ Error! Bookmark not defined.
References ....................................................................................................................... 28
 Application and User Description
An increasing number of commuters use mobile applications to buy tickets for public
transportation. An interesting study of commuters in major American cities such as
Boston and San Francisco found people are more willing to ride the bus or train
when they have effective tools to manage their commutes through apps providing
real-time information about transit schedules, delays and other services along the
routes.

The primary functions of this application will be:

 To select users location: typing or using google maps

 Select destination location: typing or using google maps
 Select means of transport: Bus or Train
 View available routes of selected destination
 Find nearby stops using user’s location using google maps
 And checking how often the bus or train leaves the station.

Persona
James Alden

Age: 30,

Work: Salesman,

Location: London

James lives in London alone outside the city center. He is a salesman and needs to
travel around the city all day visiting clients. He likes his job but he spends too much
time in the public transport, so he would like to use an app that will make his life a
little easier.

Frustrations:

 He spends to much time trying to find the right bus for his destination.
 He wastes time buying tickets at ticket counter.
  Save time from buying tickets at a bus or train ticket counter
 Find easily which bus or train needs to get
 Find when it departs
 Find how long the journey is
 And the nearest station

It is important to him that he uses an application which is effective at finding routes,

stations and departure time, in order to schedule his time more effectively, because
he has a lot of meetings every day around the city. It is necessary that he don’t miss
any of his meetings.

Task Analysis
Use Case
All Select type of Input User’s
Of the time transport or location/Input
view all destination
location
Most Check for Book and pay
Of the time nearby stations online or at the
station
Some Log in Select station
Of the time on the map and
view
instructions
Very Little Save routes
Of the time

Few Some Most All

Of the Of the Of the Of the
people people people people
Use Use case name: Find destination and book ticket Rating:
Case Must have
No: 1

Purpose: Allow users to input their location and destination location

Main Actors: User / Persona: James Alden Secondary

actors:
None

Preconditions: Application is open and GPS is turned on

Trigger: Click on location input and/or map

Description:
Basic flow:
User should:
1. See the location inputs and be prompted to enter location or open the map
2. Select type or transport or click to see all
3. See transports timetable and price
4. Select transport time
5. Book
6. Pay

Alternative flow:
1. Book only and pay at the station
2. Cancel booking

Extension: None

Related Use cases: None

Post conditions: New booking form downloaded to the user’s phone. It will be used from
the user to pass check in

Author:Vasilis Date: 25/02/2018

Tompazis
Use Use case name: Instructions to nearest station Rating:
Case Should have
No: 2

Purpose: Guide users to the nearest station

Main Actors: User / Persona: James Alden Secondary

actors:
None

Preconditions: Application is open and GPS is turned on

Trigger: Click the “Find station near me” button

Description:
Basic flow:
User should:
1. Click the “Stations” button
2. Select the nearest station on the map
3. See and follow instruction to the destination

Alternative flow:
1. Choose another station
2. Exit map

Extension: None

Related Use cases: None

Post conditions: Instructions given to the user

Author:Vasilis Date: 25/02/2018

Tompazis
STN1 for use case1

STN2 for use case 2

 Interface Prototype
Designing for Android Smartphones
The following design patterns follow the general heuristics and usability principles and also the
latest Android design guidelines and Google’s guidelines at materialdesign.io (2018).

Errors
The application has been designed in mind for error prevention.

In the Use case 1: the user must type a destination in order to get results in the text input and
click one of the them to move to the “Transport options” page. The same applies for the “Choose
on map” function. No errors can be made as there are no options for input aside from clicking
buttons.

In the Use case 2: the user just has to select one of the stations on the map and receive
instructions. Again no errors can be made as there are no options for input aside from clicking
buttons.

Use case 1: Find destination and book ticket

1. From the main menu User selects the search bar or the map to find destination
Use case 1: state 1, screen 1: Main page 1. Android Search bar to find
destination.
2. Icon for alternative search on
map.
3. Favorites categories.
4. Category of recent journeys.
Organizational system:
Location
Alphabet
Time
Category
Hierarchy
5. Bottom navigation bar
according to material design.
Usability Principles 2: Match between certain result. The design follows
system and real world
Usability Principles 4: Consistency and we can see from:
standards
Usability Principles 6: Error
prevention
Usability Principles 9: Aesthetic and
The system speaks the user’s
language with words, phrases
familiar to the user. The
information appears in a natural
and logical order. The search bar
uses a simple language asking the
user where he wants to go (what
is his final destination). Then the
“choose on map” icon follows
allowing the user to find his
destination on the map. The rest
of the content has simple
language.
The design is consistent using
distinct colors for icons, text and
categories, so the user can easily
distinguish what he icon or button
has to click in order to achieve a
the Google’s material design, as
- Search bar
- Bottom navigation bar
- Back button
- Single menu item states(3
 minimalist design
Use case 1: state 2, screen 2: User selects
location/destination
Usability Principles 3: User control and the auto completion whatever he
vertical dots)
Elements of each category of the
content have equal distance
following platforms standards.
There is also a bottom navigation
bar which the user can use it to
navigate easily to other pages of
interest.
Everything in the page is aligned
adhering to the “aesthetic and
minimalist design” principle.
The “Recent Journeys” category is
organized automatically by time
1. Android search bar and auto At this stage user can always press
complete. the back button to exit and return
to the main screen.
2. Android keyboard.
The system is consistent using the
platform’s guidelines: android
3. Back button following material auto complete and keyboard.
design style.
It is not possible for the user to
trigger any error, because with
freedom types he gets some sort of result
and if he doesn’t type anything
Usability Principles 4: Consistency and there is no button that can trigger
standards an error. There is only the back
button.
Usability Principles 6: Error
prevention The system is efficient and fast as
the auto completion helps user to
Usability Principles 8: Flexibility and find relevant results without
efficiency of use having to type the whole text.
Alternative flow: 1. Give instruction to the user. The system gives instruction that
Use case 1: state 2, screen 3: User selects the user needs to move the map
location/destination on map 2. Map. to find his destination.

3. Text displaying the At this stage user can always press

location/destination the user the back button to exit and return
selected. to the main screen.

4. “OK” button. The system is consistent using the

same colors and patterns in all
5. Back button pages of the application.

There is also error prevention

Usability Principles 2: Match between because the map always points a
system and real world location on the map, so If the user
clicks the button he will always
get a result.
Usability Principles 3: User control and
freedom The system is fast and efficient
because while the user is pointing
Usability Principles 4: Consistency and a spot on the map, automatically
standards generates a text with the current
destination under the map.
Usability Principles 6: Error prevention
Everything in the page is aligned
Usability Principles 8: Flexibility and adhering to the “aesthetic and
efficiency of use minimalist design” principle.

Usability Principles 9: Aesthetic and

minimalist design
Use case 1: state 3, screen 4: Displaying 1. Inputs that display the
transport options/timetable start point of the user’s
current location and final
destination at the top of
the screen.
2. Three buttons to choose
transport options.
3. Text that displays the
todays date and an icon
the user can change the
date.
4. A grid of icons and text
that display the timetable
of all the transports.
5. Again the bottom
navigation bar.
6. Back button
Usability Principles 2: Match between
system and real world
Usability Principles 3: User control and needs to do in order to change the
freedom
Usability Principles 4: Consistency and buttons indicate what the user
standards
Usability Principles 6: Error prevention circle arrows point out that if the
Usability Principles 7: Recognition
rather recall
Usability Principles 9: Aesthetic and
minimalist design
Organizational system:
Location
Alphabet
Time
Category
Hierarchy
The system uses simple language
informing the user for his current
location and final destination and
as well for the timetable and
prices.
There three buttons aligned
horizontally allowing the user to
change transport options. The
default is “ALL”. The user can
always press the back button or
the “Home” at the bottom
navigation bar to exit and return
to the main screen. So the user is
always one click from the main
page.
The colors are consistent
following the same pattern and
the buttons are visible to the user.
The system doesn’t allow any
errors as the buttons change only
the state of the app.
It is clear to the user what he
state of the app and move
forward to the next step. The 3
should click in order to change
type of transport. Also the green
user clicks them automatically
selects the certain ticket.
Everything in the page is aligned
adhering to the “aesthetic and
minimalist design” principle. The
time table is a grid layout.
The timetable is organized by
time.
Use case 1: state 3, screen 5: Displaying The design here is the same as the
transport options/timetable (Train) previous page, following the same
principles.
Use case 1: state 4, screen 6: Display 1. Text displaying booking
departure time and price. (of certain form
transport.)
2. Buttons to submit or
cancel the booking
The user can at any moment
cancel the booking and return
back to the previous page or click
the home button to return
“Home”.

3. Bottom navigation bar It is no possible for the user to

trigger any errors as there are
4. Android Back button only 2 buttons to book or cancel
the booking, and the links of the
Usability Principles 3: User control and bottom navigation bar.
freedom. Need a clearly marked
“emergency exit” Everything in the page is aligned
adhering to the “aesthetic and
Usability Principles 6: Error prevention minimalist design” principle.

Usability Principles 9: Aesthetic and

minimalist design
Use case 1: state 5, screen 7: Ticket booked 1. Pop up window informing user The pop up appears after the user
– Pop up window. that the ticket is booked and
he can pay now.
Usability principle 1: Visibility of
system status
Usability Principles 3: User control and
freedom. Need a clearly marked
“emergency exit”
Usability Principles 8: Flexibility and
efficiency of use
has clicked the book button, so it
can be noticeable what the user
has to do. It informs user that can
pay now or cancel the payment
and receive the ticket at the
station.
The user always can cancel
payment and return back.
The user is flexible to choose to
pay now using credit card or by
cash at the station
Use case 1: state 6, screen 8: Payment 1. Notification informing user
notification that the “Ticket Paid”.
Usability principle 1: Visibility of
system status
Usability Principles 2: Match between
system and real world
A notification appears informing
the user about the ticket payment
and the amount that he paid. The
notification disappears after a few
seconds.
The message is in a simple and
concise language following
Nielsen’s heuristics #2.
Use case 2: state 1, screen 1: Main screen – Main page of the app as the use case 1
The user sees the “Stations” button (and - state 1.
clicks it)
Use case 2: state 2, screen 2: A map comes 1. A header informing the user The user is informed about his
forward. what the status. status.

2. Below there is another header The system gives instructions to

telling the user what he needs the user needs to do in order to
to do. find the station on the map.

3. A map to navigate in order to The user can return to the main

find the station. menu by clicking the “Back”
button or “Home” in the bottom
4. Bottom navigation bar. navigation bar. So he is always
one click away.
5. Back button
There are no possible errors, as
Usability principle 1: Visibility of there are no inputs and buttons to
system status trigger errors. The user is just
moving the map to find location.
Usability Principles 2: Match between
system and real world

Usability Principles 3: User control and

freedom. Need a clearly marked
“emergency exit”

Usability Principles 6: Error prevention

Use case 2: state 3, screen 3: Displays map
with instructions to the destination
2. Bellow the map the app shows the distance walk. There are no
1. The page is the same as the The user once he finds the station
previous one. Here the app is on the map, he just clicks the icon
displaying the route the user on the map and the system
needs to follow in order to automatically displays the route
reach his destination. he needs to follow on the map
and the name of the station with
a text with the station and the extra buttons and is easy to use
distance of the current user’s and efficient.
location.

Usability Principles 8: Flexibility and

efficiency of use
 Alternative Design
Use case #1: Main page This design also follows the Android’s material design guidelines and
Nielsen’s heuristics.

In the alternative design the colors are the same as the previous design.
However the layout is different and the application has fewer phases to
display the desired results to the user.

This is the main screen. The user has most of the functions in the main
screen so he doesn’t have to navigate the app and change too many
pages to find information. The search bar and the transport options are
together on the top of the screen in the orange background so they can
be easily seen and found by the user.

Below those 2 is the map which is the second alternative way to find
destination. The app gives freedom and flexibility to the user to choose
between 2 options.

Below the map there are “Places” most used by the user, so he can find
them faster.

Choose destination

This is the main screen. When the user clicks the search bar a drop
down appears so the user can select a destination with the help of the
auto completion. The user doesn’t have to move to new page which it
reduces the number of steps he needs to do.

The app is carefully designed to avoid errors. The user has to type a
destination to get results, otherwise nothing will happen.

The design is the same as the above.

Use case #1: Transport options and This is again the main page. The user after he chooses the destination a
timetable pop up window appears in red background with white letters to create
contrast so it can be noticeable and readable by the user.

Again the user doesn’t have to leave the page so he just needs to click
the back button if he wants to display the whole main page.

Everything in the timetable content is aligned adhering to the “aesthetic

and minimalist design” principle and is written in clear and concise way.

Book Ticket After the user clicks the selects the desired ticket the pop up window
changes and displays, without moving from the main page, only the
ticket the user selected, with 2 buttons. The layout and the styling
remains the same. It is visible to the user that there are 2 options to
book ticket or cancel.
Use case #1: Payment After the user clicks the book button a pop up window appears
informing the user what needs to be done to proceed to the next step.
The Pop up box is shaded a different color. This is mainly because it will
draw the eyes to the message.

Payment Message
After the user clicks the payment button a message appears on the
screen under the ticket information, and informs the user that the
payment is done. It is in a green box, so it can make a contrast and be
visible to the user.
Use case # 2: Find stations- Main page Main page as in the Use case 1.

Show stations
The user after he clicks the “Stations” button on the menu bar, he
moves to a new screen with a map showing nearby stations using user’s
location. The layout and colors follow the system’s pattern. In the
orange box under the menu bar the user is being informed that he
needs to find a station. The stations appear in a blue color. No errors
can be triggered as there are no inputs or buttons, the user has only to
click the icon on the map and the system automatically will display the
instructions to the user which also makes it efficient and fast. The use is
only one click away to exit and return to the main menu. There is also at
the bottom of the page a link with the visited stations so the user can
speed up the process if he wants to find a station that he has already
visited.
Show instructions The user after he clicks the icon he wants, a pop up window shows up
with written and map directions. So it can be easy for the user to
navigate and choose which one wants to use. Everything in the written
directions content is aligned adhering to the “aesthetic and minimalist
design” principle and is written in clear and concise way.
 Usability Test
Introduction
We are going to test the design and the ease of use of 2 different prototypes of the same
application. It is an app that enables users to book ticket for bus or train from their
smartphone, find routes and nearby stations.

The primary functions of this application will be:

 To select users location: typing or using google maps

 Select destination location: typing or using google maps
 Select means of transport: Bus or Train
 View available routes of selected destination
 Find nearby stops using user’s location using google maps
 And checking how often the bus or train leaves the station.

We are going to test how effectively you can perform this tasks, how easily is to browse
through our app and find information.

Methodology
The test was done in the university’s lab using Balsamiq. For the usability test, 4 individuals
were used to do the prototype testing. They were computer science students and tutor labs,
3 males 1 female. I divided them into 2 groups the students and the tutors.

They were given some description of the prototype app to explain what the goal of the
application is and some instructions that can be found in Appendix. Then they started to do
the test. The 1st group of 2 students tested the main prototype and the 2 tutors the
alternative prototype in order to avoid the testers get familiar with one of the prototypes.

The scoring method that was used was the System Usability Scale (SUS). It consists of a 10
item questionnaire with five response options for respondents; from strongly agree to
strongly disagree. It allows us to evaluate a wide variety of products and services, including
hardware, software, mobile devices, websites and applications.

Benefits of using a SUS

SUS has become an industry standard. The noted benefits of using SUS include that it:

 Is a very easy scale to administer to participants

 Can be used on small sample sizes with reliable results
 Is valid – it can effectively differentiate between usable and unusable systems

Python was used for the data analysis and statistics. First we checked both of the data if they
are normal using the shapiro function. Then we used t-test to find whether or not the
difference between two groups’ averages reflects a “real” difference in the population from
which the groups were sampled. T-test was used because both data are normal. Then we
found the estimated range of average and plotted the graphs with the results.

RESULTS

The analysis of the data showed that both of data are normal. T-test was used to find the
difference between the 2 prototypes. There is no significant difference: p = 0.66, so p > 0.05.
The prototypes should be redesigned in order to draw conclusion. But both of designs have
high SUS score.

Main design: We are 95% confident that the true mean context lies within the interval
79,49 – 99,25.

Alternative design: We are 95% confident that the true mean context lies within the interval
78,87 – 97,37.

DISCUSSIONS AND CONCLUSIONS

The whole process of the usability test game me a good insight of what the users think about
the 2 design prototypes and how easy it is to use them. Although there are few things that I
would have changed or done in a different way. Before starting the designing process I
would have done a research about what the users would like to see at an application like this
so I can have a better idea of my designing process at the beginning. The 2 nd thing is that I
would have tested my designs with more users because 4 people are a very small number to
extract safe results. Additionally I would have tested the prototypes not only with computer
literate testers but also with regular people without any computer knowledge but that
wasn’t possible in my case. Although there is no significant difference between the
prototypes I would choose to redesign the alternative prototype because it has higher SUS
and the testers seemed to like and understand better this design.

Conclusion: because p > 0.05, there is no statistically significant difference between the
average SUS of the in Main prototype and the Alternative prototype.
APPENDIX-WRITTEN INSTRUCTIONS TO THE PARTICIPANTS
Hi everyone, thank you for taking the time to participate in this study. Before we begin, I’m
going to give you a brief overview of the test and how it will work.
This session is pretty straightforward.  I’ll be giving you a broad task to complete and then
asking questions as we go along. Before I tell you the task, I’ll be giving you a little bit of
context behind it, such as why you might be doing it and what you hope to achieve.
It’s really important to know that we are only testing the application not you. You can’t do or
say anything wrong here. Please feel free to let me know at any time if there’s something you
like, dislike, if you’re confused, etc. Also, I’d like you to “think aloud” as much as possible. By
that, I mean that I’d like you to speak your thoughts as often as you can. For example, you
may be looking at a page, suddenly see something you didn’t see before and want to click on
it. In that case, saying something like “this caught my eye so I’m going to see what it is” would
be very useful.

Today we’ll be showing you a prototype of a new experience and asking for your feedback
 We call this a usability study
 This prototype is a rough mock up that is not yet built
 The reason we’re showing you this is to get feedback before the team builds the real
version
 Don’t worry about breaking anything

If at any point you have questions, please don’t hesitate to ask. The test will not take more
than 5 min and you can stop at any time you want. Do you have any questions so far?
Ok, Let’s get started.
 References
Nielsen Norman Group (1995) 10 Heuristics for user interface design: Article by Jakob
Nielsen. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/ (Accessed:
1 March 2018)

Material Design (2018) Available at: https://material.io/ (Accessed: 25 February 2018).

Android Developer: https://developer.android.com/design/get-started/principles.html

(Accessed: 25 February 2018)

Top 10 transport apps for smarter travel: Article by Stuart Dredge. Available at:
https://www.theguardian.com/public-leaders-network/2016/sep/15/top-10-transport-apps-
smarter-travel