Paper Prototype And Videos

Tasks and questions


1)   What would you do if you want to know animal information?
2)   What would you do to find information about mammals?
3)   Select a mammal out of these animals.
4)   What would you do to learn more information about that particular animal?
5)   View the zoo map.
6)   View the current location from the zoo and select the location.
7)   Suppose you are near the elephants and now you want to see information about that animal.
      How would you do that from the zoo map.
8)   Close the animal information page
9)   Search for an animal
10) Search about elephants
11) How would you cancel what you were searching for?
12) Go to zoo events.
13) Select an event.
14) What would you do if you want to set a reminder for that event so you can get notifications?
15) Go to the zoo calendar.
16) Go to the gallery
17) Capture a picture from the phone camera to upload.
18) Upload the picture.
19) Select a picture from the photo gallery to upload
20) Cancel the loading image.
21) Go back and select a picture from the gallery.
22) Upload the image.
23) Go to news feed
24) View a news item
25) Go to the product catalog
26) Select a product and add to the cart.
27) Make the payment.
28) What would you do to purchase a ticket for the zoo
29) Select one ticket for an adult
30) Confirm and check out to make the payment.


Description about the non-technical user

Piumi is our non technical user. She is 25 years old and she is doing a management degree. It's been only a couple of weeks since she started using a smart phone so she doesn't have much experience in using android mobile applications. She admitted that 'whatsapp' is the only android mobile application she has used so far. She has never used the MGS application that we have been reviewing in the HCI module. She took about 13 minutes to complete the tasks (less time than the technical user) as she was not that keen on describing about what she was doing and the issues she encountered. But she was able to identify several breakdowns in the prototype.

Video (with the non-technical user)

Description about the technical user

Our technical user is Mario and he is 22 years old. He is doing a software engineering degree and he is familiar with android technology and applications. He has developed android mobile applications as well. He mentioned that he has used the application that we review in the HCI module. So the team decided to do the evaluation with him as he is an experienced user.

User took 16 minutes to complete the tasks given by the team, (taking more time than the non-technical user) since he did the tasks while he was describing what he was doing and pointing out the issues he encountered during the evaluation. He was able to find out several breakdowns in the paper prototype. 

Video (with the technical user)

 

                                   

Transcript I (summary)

(With the technical user)

1.      Interviewer: How can you view the zoo map?

2.      Interviewee: There’s no shortcut to view the zoo map or anything. So I’d click on the home and go to the zoo map.

3.      Interviewer: Now you have to view your current location in the zoo map.

4.      Interviewee: I’m not sure how to do that. I’d click on either this or this.(user looks confused and he points to two different places in the map)

5.      Interviewer: Now you have to go to zoo events. How would you do that?

6.      Interviewee: I’m guessing it’s in this one but it looks like a calendar so I’m not sure I’d click that and see.

(User taps on the icon that looks like a calendar)

7.      Interviewer: Now you have to select the events you are interested in.

8.      Interviewee: Okay how I can I do that? Should I just tap on the event?

9.      Interviewer: What would you do if you want to set a reminder for an event so that you can get notifications?

10.  Interviewee: I’ll just tap on this ‘set reminder’.

11.  Interviewer: Now you have to go to the zoo calendar.

12.  Interviewee: How do I go to the calendar? Should I check the main menu? (User asks for help)

13.  Interviewer: (Offers help saying) that’s not what we are expecting, from this interface you can get to the calendar.

14.  Interviewee: I’d click on this I’m guessing. There’s no specification as to how to get to the calendar.

15.  Interviewer: Okay let’s move on with the rest. This is the zoo calendar.

(Team proceeds with the rest of the tasks, ignoring the breakdown)

16.  Interviewer: Now you have to upload the image you selected from the gallery.

17.  Interviewee: I have to click ‘Done’ or ‘Upload’? I’m not sure what the difference is. I’m going to select upload.

18.  Interviewer: Now you have to select a product and add it to the cart.

19.  Interviewee: Okay I’ll add elephant show to the cart.

20.  Interviewer: Now you have to make the payment for it.

21.  Interviewee:  My total and all are not shown, so I’m not sure but I’ll click secure check out to make the payment but I didn’t get to select the number of tickets.

(Interviewee thought he was referring to zoo tickets so she mentioned that buying zoo tickets would be the next task, but later she realized he was referring to the tickets for the elephant show.)

Transcript II (summary)

(With the non-technical user)

1.      Interviewer: Now you have to view the zoo map.

2.      Interviewee: Is it here?

(There was a picture of a map of a country in the animal information page to indicate the animals’ country. User thought she had to select that and the team offered help saying that she has to go to the home page in order to get to the zoo map)

3.       Interviewer:  Your current location will be displayed in the zoo map. Now you have to select your current location.

4.       Interviewee: I think my current location is shown from this blue color thing.

(User looked confused what to select and she eventually showed the blue color location pointer.

5.      Interviewer: Now you have to go to the zoo gallery

6.      Interviewee: Is it this? (shows a wrong icon so the team helps the user saying she has to go to the homepage to do that)

7.      Interviewer: You have to go to your phone gallery and upload an image.

8.       Interviewer: I don’t know I’m confused. Is it this?

(Show the plus sign)



Breakdowns identified after the paper prototype

Image 1

Image 2

Image 3

Image 4

Image 5

Usability Evaluation Feedback Analysis

#	Prototype Screen	Reference	User’s feedback/ critical incidence/ problem	Reason for negative feedback / breakdown	Scope	Severity (High/ Medium/ Low) and Justification for giving it that rating	Way(s) to rectify and any Tradeoffs (i.e., why the fix might not work)
1	See Picture 1	22-23	User confuses the map of the animal’s country’s map with the zoo map. (when navigating from animal information to the zoo map)	The map looks prominent in the animal information interface which can mislead the non technical users.	This specific screen.	Low (because this problem occurs when navigating to the zoo map from this interface only and it tends to mislead the user only if he’s not careful)	Can make it look less prominent. If it looks small and not eye catching, user will not be confused. The map can be enlarged when the user clicks on it. Tradeoffs: at a glance users won’t be able to see how the population of that particular animal species has spreaded.
2	See Picture 2	28-29	When the user was asked to go to the phone gallery and upload a picture from that, user didn’t know what to tap on.	From the “+” icon, user doesn’t get the idea that it is to go to the phone gallery to select a picture and upload.	This specific screen.	Low (Since that particular interface doesn’t have that many icons, user will be able to guess that it’s the icon to go to the gallery.	Instead of having it as an image button it can be designed using  a text. Tradeoffs: the looks of the interface might degrade.
3	See Picture 3	3-4 24-25	When the users were asked to view the current location both the users didn’t go what to select	There are several pointed arrow like icons in the zoo map so the user cannot get the exact idea what to tap on.	This screen and the screen that appears when the user select a location.	High (If the user cannot get the exact idea of his/her current location, the user can get lost in the zoo as it sprawls over a huge land area.	Displaying a message saying “you are here” with a red arrow head at the location. Tradeoffs: takes up space on the interface, covering other locations in the map.
4	See Picture 4	21	When the user was asked to add a product for the shopping cart, user wanted to view the number of tickets he bought but the system failed to satisfy the requirement.	The interface has a button to add products to the shopping cart but it doesn’t know the existing amount in the shopping cart.	This specific screen	Medium (though it doesn’t show the existing number of products in this screen, when you go to the next screen to make the payment, you will be able to see that.)	Indicating the number of products in the cart currently, in a corner of the specific product. Tradeoffs: takes up space.
5	See Picture 5	16-17	User was confused whether to select “done” or “upload” after the image from the gallery loaded.	Both the words give out the same meaning. So the user might wonder what the difference will be between the two separate buttons.	Specific to this screen.	Low ( user will probably select either of it and anyway the image is loaded already)	Eliminating one button out of them. Tradeoffs: no tradeoffs

Interface Designs On a Paper

1) GPS Map of the zoo.

•  Mainly the Map took a long time to load and all the animal cages, washrooms, restrooms and other places in the zoo were not included in the zoo. So we decided that a clear map which includes all the important places in the zoo should be used when designing the interfaces.

  

  Option 1                            Option 2

  

  Option 3

  
  

Option Selected : Option 1

• Option 1 was selected because when you press the "+" sign you can navigate to other sections and when it pops out the other sections, the map won't get hidden. So it is more flexible and mobile users are more used to that kind of an interface.

2) How the GPS map shows the current location of the user.

• When we were doing the contextual inquiry, our user was not able to see the exact current location that he was in the zoo. We came up with options that gives the zoo visitor a clear idea about the current location. So the user will be able to walk around in the zoo without getting lost.

option 1

option 2 

option 3

Option Selected : Option 2

• We have decided to go with the option one as it shows the important locations in the map and your current location with an arrow head pointed to the location. Users can search for the place they want to go as well.

3) Upload Image

• An error message was shown when the user was trying to capture an image and upload and also when the user was trying to select an image from the gallery and upload. And also there was no option to see the photos the user had uploaded.

  

                                           option 1                   Option 2                    option 3                                                 

Option Selected : Option 3

• We decided to select the third option because we thought it'd be easy for the user if he/she could see the picture they uploaded and when you touch on the plus sign, user will be able to see the pictures in the zoo gallery. 1st option doesn't have any feature like that and the second option doesn't let the user to preview the image uploaded by them.

4) Searching for animal information

• During our contextual inquiry, the user was confused because there was no search bar to search animals by their names and the label names were there as well which was really confusing and non user friendly.

Option 1                        Option 2                   Option 3 

Option Selected : Option 2

• The most important thing is having a search bar so the users can search different animals by their names. Then in the option 2 we have categorized the animal groups as Amphibians, Birds etc. So it will be more easy for the user when they look for animals in the category that particular animal belongs to. And also having a larger image of the animal would be eye catching and user can scroll and see whether the animal they are looking for is there, even if they don't know the name of the animal. And an icon is used in front of the animal category, to increase the understandability. 

5) Viewing zoo News

• There wasn't anything in the daily special zoo news section and it was just a blank interface with a background color. We decided to enhance the user friendliness by adding images.

Option 1                            Option 2

• 

  Option 3

Option Selected : Option 1

• When you cage the news item with an image and its title it'd be more clear for the user and it will not look like it's scattered. 

6) Zoo Events

• The existing app doesn't give any sort of notifications, when the users subscribed to an event. An it doesn't show time the event starts We decided to have an interface which shows all the events with time, date and images and the users can subscribe to them and they can get notifications. And also they can check the location the event takes place, with the help of the zoo map.

Option 1                      Option 2                    Option 3 

Option Selected : Option 1

We have chosen the first option so we can give a brief description about the event with images and in the other two options, the details are not as clear as in the first option and  the details will be displayed in a small area. And also in the first option 1 you can easily swipe and go to the calender and see future zoo events.  

7) Home Page

• Our user found it difficult to navigate from one screen to another several times as there was no easy option to go to the home page or to another screen without pressing on icons and buttons many times. So we decided to come up with a proper home page to enhance the user experience.

Option 1                   Option 2                         Option 3 

Option Selected : Option 1

• We have chosen to go with the first option as it is more convenient for Android users and majority of the people use Android mobiles. And on the top left corner of all the interface there will be an icon which can navigate the user to the home page from any interface.

8) Booking a zoo event.

• In our contextual inquiry user was unable to book an event (adding it to shopping cart) and then edit it again easily as the current . So we came up with an interface which can make it easy for the user. And also pricing details were not displayed for the user. The current quantity in the cart was not shown either.

Option 1                     Option 2                     Option 3  

Option Selected : Option 3

•  Option one shows all the pricing details, the current quantity in the cart and the interface can be more clear to the user as all the information is not bundled up together and displayed.

9) Viewing the shopping cart.

• In the existing application the total price cannot be seen after you order products and you can't edit easily after you ordered a product. So to over come those issues we came up with three designs as given below,\

Option 1                    Option 2                         Option 3      

 Option Selected : Option 3

• We decided to select the third option as it gives the user more functions like it lets the user  not only to view the shopping cart but also to check out and go to the payment page and it shows the user the number of products bought with the total. And also user can see the existing quantity and he/she can edit as well. And as it has 4 tiles in a screen, user will not have to scroll down to see the total and their other bought items.

10) Making the payment

• User couldn't make the payment successfully and an error occurred when the user tried to pay. The app didn't ask for payment details either and the total to be payed was not shown as well.

Option 1                        Option 2                        Option 3    

  Option Selected : Option 1

• We decided to choose the option 1 as it looks more attractive and clear with the triangle shaped notification labels and this shows whether the payments was successful and it has an option which enables the user to get an email of the payment. The other two options look too common though they have similar functions.

11) The splash screen

• Additionally we thought of having a better splash screen as the current one looks cluttered and does not focus on the main aspects that should be included in the splash screen also it takes time to load the application since some functionality's inside the app takes time to load.

Option 1             Option 2                   Option 3        

  Option Selected : Option 1

• We thought of selecting the picture with the elephant as it is eye catching and elephant is a favorite animal of any animal lover without a doubt. And also it gives the idea of a "zoo" when you see elephants.

Contextual Analysis

Flow Model

flow model

Artifact Model

Cultural Model

Cultural Model

Contextual Inquiry and Think-aloud protocol

Contextual Inquiry and Think-aloud protocol


"Contextual inquiry (CI) is a user-centered design ethnographic research method. A contextual inquiry interview is usually carried out in the natural environment that the user uses the system and the researcher watches the user do their normal activities and discusses what they see with the user."
So the team visited Dehiwala zoo and selected a random visitor to carry out the research.

"Think-aloud protocol (or think-aloud protocols; also talk-aloud protocol) is a method used to gather data in usability testing in product design and development, in psychology and a range of social sciences (e.g., reading, writing, translation research, decision making, and process tracing)."
So the selected visitor was instructed to talk aloud while he used the app.

The team was able to film the user's facial expressions while he used the application and the screen was recorded as well.

screen recording


video of the interview

(Please note that the audio quality of the second video is considerably poor and a media player like VLC media player is recommended.)




Transcript  (time stamps are according to the screen recording video's time stamps)

00:00:00 -> 00:00:02
Darsha: Tell us your name.

00:00:03 -> 00:00:04
Interviewer:I'm Lakpriya from Moratuwa

00:00:05 -> 00:00:08
Darsha: Okay, go to our application. It says MGS.

00:00:09 -> 00:00:10
Lakpriya: Okay got it

00:00:11 -> 00:00:19
Darsha: Now you can see the home page of our application.
First tell us what do you feel about the interface of the homepage.

00:00:20 -> 00:00:21
Lakpriya: Yeah that looks fine for me.

00:00:22 -> 00:00:33
Darsha: And now we are giving you ten tasks to do,
and you have to say whatever the things you think when you use this application okay?

00:00:34 -> 00:00:35
Lakpriya: Okay sure.

00:00:36 -> 00:00:40
Darsha: Okay first task, you have to view the GPS map of the zoo.

00:00:41 -> 00:01:11
Lakpriya: Okay first thing, I cannot get an exact idea where you have to move
from here.
And a little description is there. Since there's an arrow I believe I have
to click on it. Okay here I go now I can see the interface ,
so what exactly  do you want me to do?

00:01:12 -> 00:01:13
Darsha: you have to view the GPS map of the zoo.

00:01:14 -> 00:01:17
Lakpriya: Okay I clicked on the map, the map is here.

00:01:18 -> 00:01:24
Darsha: Okay now you have to view your current location using this map.

00:01:25 -> 00:01:32
Lakpriya: Okay I believe i'm in here. There's a little arrow pointed in blue.
So I believe I'm there.

00:01:34 -> 00:01:42
Darsha: Is there a description or something? Does it say you are in front
of elephants?

00:01:43 -> 00:02:15
Lakpriya: I must say this is damn slow and frustrating to check this and no
I can't see any elephant path and I'm in a corner and I don't know which is
the exact place and whether this is giving the actual picture of where
i'm staying. So I'm not sure.

00:02:16 -> 00:02:27
Darsha: Okay moving on to our next task, you have to open the phone camera
from the application and you have to capture a picture and upload it

00:02:30 -> 00:02:54
Lakpriya: okay sure that looks easy, you want me to capture one right?
okay I can save the image so i'm gonna save it. and it gives an error, returns
an error saying internal error. I believe it's not working.

00:02:58 -> 00:03:04
Darsha: okay now you have to search for a picture from the gallery and you
have to upload it

00:03:15 -> 00:03:18
Lakpriya: okay and it gives the same error as an internal error.

00:03:20 -> 00:03:25
Darsha: okay now you have to search animals and view their information.

00:03:27 -> 00:03:39
Lakpriya: Ok I clicked on animal info tab and I really can't find a way
to browse the animal from here, it does say animal name,scientific name
that and this.

00:03:39 -> 00:03:41
Darsha: Tell us what do you think about the interface

00:03:43 -> 00:03:47
Lakpriya: It's more like just a text document for me.


00:03:50 -> 00:03:54
Darsha: Okay now you have to view special daily zoo news.


00:03:56 -> 00:04:12
Lakpriya: okay i'll revert back to home, I believe it's there and I can't
see anywhere like to view news and all so i'll navigate to more and yeah
there you go special events news, no news there, but still..


00:04:13 -> 00:05:09
Darsha: okay Now you have to book a zoo event from the event catalog

00:04:18 -> 00:04:17
Lakpriya: Since you want me to book it I believe it's in ticketing okay there
you go it says product catalog and I must say that it's really confusing
because I was at events and it's better if I can navigate to events directly
to book my catalog.
so according to this app I have to come back to my home page and I have to
go to ticketing and I have to select product catalog. even though i'm
gonna select one, it says there are three catalogs available.
elephant performance,joy rides,sea lion performance...hmmm i like joy
rides so i'm gonna select it.

00:05:11 -> 00:05:13
Darsha: okay now you have booked an event

00:05:14 -> 00:05:23
Lakpriya: give me a second, I didn't book it yet i went to joy rides,
it says currently in cart 1, quantity I have selected i'm gonna set it to 21,

00:05:23 -> 00:05:32
Darsha: okay that means you have viewed the shopping cart, that is our next
task, so you have viewed the shopping cart now you have to edit the booked
event.

00:05:36 -> 00:05:58
Lakpriya: okay the first thing I don't know whether i have booked one,because
it doesn't give me any feedback like that i have booked one,or it doesn't give
any option, it doesn't give any feedback from the app..so i'm not quite
sure whether I have booked one or not so how am I gonna edit it because
I don't know whether I have booked it.

00:05:59 -> 00:06:06
Darsha: okay we'll move to the next question, you have to make the payment
for the booked event and you have to check out.

00:06:07 -> 00:06:40
Lakpriya: Ok i'll go to the shopping cart because that's the way for me to do
the payment. Ok when I clicked on the shopping cart it says joy rides,
quantity 1 and it seems like something is saved in the app,,its a bit slow,,
okay  pay with paypal.. unfortunately MGS has stopped. I believe the app
has crashed

00:06:42 -> 00:06:53
Darsha: okay this will be our last task. you have to make a call to the
zoo from contact us through the application

00:06:54 -> 00:07:10
Lakpriya: okay I clicked on contact us, call zoo office,  call director,
let's make an inquiry..Ok i'm calling the zoo office. okay there you go, it
rings. yeah it's working, that was the easiest to do

00:07:11 -> 00:07:13
Darsha: so that's it, thank you very much for helping
00:07:14 -> 00:07:15
Lakpriya: you're most welcome.

  

Tasks and the Questionnaire

The mobile application developed for the National Zoological Gardens in Dehiwala (under entertainment software category) has been chosen by the team for the HCI paired project. The main feature of this application is giving a technological solution to navigate in the zoo without any confusion since the land area of the zoo spreads for more than 4acres. For this purpose a GPS enabled map is implemented so it helps the user to find his/her way around the zoo. Other than that this application is useful for educational purposes as well, since it provides information about thousands of species of animals. When you consider the other functions mainly it enables the user to maintain a gallery of zoo pictures and handles e-ticketing. The current application is not that user friendly and the team is hoping to give a better solution with a plenty of new features with rich GUI’S to enhance the user experience.

Tasks

1) View the GPS map of the zoo

2) View your current location from the map

3) Open the phone camera from the app, capture a picture and upload

4) Search for a picture from gallery and upload

5) Search animals and view their information

6) View special daily zoo news

7) Book a zoo event from the event catalog

8) View shopping cart and edit the booked events.

9) Do the payment for the booked events and checkout.

10)Try to make a call to the zoo from ‘contact us’ through the app

Questionnaire

1) View the GPS map of the zoo.

• Why do you need to view the zoo map?
• When would you want to view it?
• How do you understand your location viewing the map?

2) View your current location from the map.

• How do you view it?
• Can you view your current location from the map?
• Why would you need to view your location when you are in the zoo?

3) Open the phone camera from the app, capture a picture and upload.

• Why do you want to capture a picture in the zoo?
• When do you want to do it?
• How do you upload it?

4) Search for a picture from gallery and upload.

• Why would you want to search an image from the gallery?
• How do you perform the above task?
• When would you want to search from the gallery instead of just capturing it?

5) Search animals and view their information.

• Why would you want to search animal information?
• How do you search the animals?
• When do you want to search animal information?Is there any particular event?

6) View special daily zoo news.

• How do you view daily news?
• What do you want to see in zoo news section?
• When do you like to view the news section?

7) Book a zoo event from the event catalog.

• Why do you want to book an event?
• When do you like to book a zoo event?
• How do you book an event?

8) View shopping cart and edit the booked events.

• How do you edit the booked events?
• Why do you want to edit them?
• When do you want to book zoo events?

9) Do the payment for the booked events and checkout.

• When would you like to make the payment? Before of after the event?
• How do you make the payment?
• Why do you use the said method to make the payment?

10)Try to make a call to the zoo from ‘contact us’ through the app.

• When will you want to make a call to the zoo?
• How do you make the call?
• Why do you use a phone call to make the inquiry?