html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list.

<style>
.hidable

Unknown macro: {display}


</style>
<script>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list.

function showhide(section){
var ele=document.getElementById(section);
if(ele.style.display!="block") {
ele.style.display="block";
document.getElementById(section+"show").innerHTML = "Hide";
} else

Unknown macro: { ele.style.display="none"; document.getElementById(section+"show").innerHTML = "Show"; }}

</script>

GR3 - Paper Prototyping

1. Scenario

Briefing
Two people with a kit arrive at the aquarium without a visit plan. They have limited time available because they are tourists in Boston. This web-based system is available through a mobile device to accomplish the most common tasks required by visitors.

Test
We asked a total of 7 users to solve a set of 4 tasks while pretending to be visitors to the Aquarium. We used two prototypes and some changes between user tests in order to improve the UI. The observations, changes, usability problems and prototypes are described bellow.

2. Description of the first prototype

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <a href="javascript:showhide('design1');" id="design1show">Show</a>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <div id="design1" class="hidable">

2.1 Tasks requested to the user:

1. Buy 2 tickets,
2. Find the location of the Little Blue Penguins,
3. Find the schedule of events about Penguins,
4. Find the location of a specific event,
4*. User finds a very interesting red fish in a tank and wants to get more details about that specie (added for the last user test of the first round).

2.2 Prototype functionality:

The following table presents all the screens used in this prototype desing.

The main screen has the options for searching for animals, buy tickets and see the Aquarium map.

Screen for buying tickets. The user needs to input the required information. We tried to ask for the minimum amount of information to speed up the buying process, specially because of the fact that this web-based UI will be used from a mobile device.

Confirmation Screen
This screen presents the confirmation number of the electronic transaction. This number will remain in the screen so that the user can just show the phone to enter the Aquarium with no need of taking notes.

*Aquarium Map. This screen is intended to be contain all information. The map shows the location of all animals and highlights the events of the day near to the appropriate location.
It shows one floor at a time and it's possible to select the floor (1, 2 or 3).*

Result of search query. When a user inputs a search query in the home screen search box, the result is shown using this layout: information about the specie, its location and a button to locate it in the map (map screen), and a list of events related to this specie.

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. </div>

3. First Round Prototype Testing

The first prototype was tested on 4 users. The results on usability issues are shown grouped by user-task:

3.1 User 1:

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <a href="javascript:showhide('design2');" id="design2show">Show</a>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <div id="design2" class="hidable">

User 1 - Observations:

Task 1: Buy 2 tickets

clicks Tickets
clicks text box, enters informations, tabs to go to next text box
repeats until form is finished, grabs ticket

Task 2: Find the location of the Little Blue Penguins

hit floor 2 look around
hit floor 3 look around
hit overview
hit floor 1
go to search type in ‘penguin’
go back to map
hit floor 2 and find it

Task 3: Find the schedule of events about Penguins

floor 1
click triangular symbol
click round symbol
tap outside to close all bubbles
click triangular symbol, see info about session
“It was hard to not confuse triangles and circles, they look alike”

Task 4: Find the location of a specific event

click on circles and triangles to read bubbles
“I expect the bubbles to close automatically when I click a different location”
click on section
“I would like if it at least said the name of the section”

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. </div>

3.2 User 2:

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <a href="javascript:showhide('design3');" id="design3show">Show</a>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <div id="design3" class="hidable">

User 2 - Observations:

Task 1: Buy 2 tickets

Click tickets
Starts filling out information
(The user thinks expiration date is for the tickets)
(The user realizes it’s for the credit card when he reads ‘security code’)
Picks Boston first, then changes to California (his home town)
Click Buy

Task 2: Find the location of the Little Blue Penguins

Search for ‘penguin’
Clicks on ‘look on map’
“I know I have to head over to that triangle now”

Task 3: Find the schedule of events about Penguins

Search for ‘penguin staff session”
“I can go it’s 4pm”
“I don’t know if the number of current attendees means there is no space left”
“I’ll now head over”

Task 4: Find the location of a specific event

(Confused, don’t know if to search)
Go to floor
Click on one of the symbols
“It should keep the titles for each one and more info should be on the legend”
“Legend is hard to find”
“Bubbles should be larger”
“Hover over should show titles”

Jeremy Comments:

Regarding ticket screen, “there is no info on the top”, “cc info and ticket information
should be separated”

Changes made to the prototype:
  • Added "today button" to save the typing time if this is the case (more common case)
  • Information about the payment method was separated to avoid confusion

  • The map legend was deleted because its meaning was not clear for the users. Showing now events more clearly

  • The name "events" is used instead of "related staff sessions" which was not a clear term

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. </div>

3.3 User 3:

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <a href="javascript:showhide('design4');" id="design4show">Show</a>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <div id="design4" class="hidable">

User 3 - Observations:

Task 1: Buy 2 tickets

“It’s touchscreen?”
Click tickets
Click ‘Today?’
Enter info
Click Buy
“Does it give me a QR code or something?”

Task 2: Find the location of the Little Blue Penguins

“I’m not sure if this map is for the inside of the building, or how to get here in Boston”
Click Map
Click ‘lookup on map’
“touch the penguin?”
“is this supposed to be floor 2?”
“there is no gps...”
“I’m distracted by these icons jumping slightly”

Task 3: Find the schedule of events about Penguins

(A home button is clearly needed for all screens)
Press floor 1
(Map now shows “events” instead of “sessions”)
“I thought the legend would list all things”

Task 4: Find the location of a specific event

Click floor 2
“I would walk go to map from home”

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. </div>

3.4 User 4:

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <a href="javascript:showhide('design5');" id="design5show">Show</a>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <div id="design5" class="hidable">

User 4 - Observations:

*Task 1: Buy 2 tickets *

Click tickets
Click ‘Today?’
Fills in form
Click ‘Buy’
“What is the price?!”
“Are there guest types?”
“I don’t know my confirmation number...”

Task 2: Find the location of the Little Blue Penguins

Click search
‘Penguin’
Click ‘lookup on map’
“Does it mean I’m here?”
“Where am I?”
“Are there directions?”

Task 3: Find the schedule of events about Penguins

“I want to go Home”
“There is no Home button”
Type “floor 1 events” in search
Click on ‘Map’
Click on floor 1
“expected to see a list of events on the left”

Task 4: (Find info regarding red fish)

Click on floor 2
Click on floor overiew
Click on section
(list of animal pictures show up)
“Is it a long list? It will be hard to find...”

Changes made to the prototype:
  • The ticket confirmation screen explicitly says that the confirmation number will remain in the screen so that the user is sure the information will remain there
  • The ticket drawing was eliminated to avoid redundant information

  • Added price in the screen. This price box is automatically updated when the user changes the number of tickets

  • Improved display of events over the map.
  • Added home button.

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. </div>

3.5 Usability issues:

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <a href="javascript:showhide('design3s');" id="design3sshow">Show</a>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <div id="design3s" class="hidable">

Being in the main screen, it was not obvious how to:

  • Find events schedule
    • Type "Penguin event" in search box?
    • Are events in the maps?
  • What is it possible to search for using the search option?

For Buying tickets:

  • The price is not displayed!
  • Better way to input the date, need of "today button"
  • Confusing what information is for the user or the credit card identification

  • Once the transaction was finished, the user felt afraid of losing the confirmation number
  • Some users didn't understand why the tickets was shown graphically and if there is any different with the confirmation number

Regarding the map feature:

  • The legend for types of information in the map was confusing. Is this a list?
  • ALL users expected the map to show your current location, but this will require some technology installed in the building.
  • Lack of home button.

Search result layout:

  • Good results in general
  • Lack of home button

Feedback from studio:

  • It's possible to assume that the Aquarium building has some technology to enable self-localization.
  • There are plugins to capture the credit card information from a phone picture. This could save the time of typing all the information for buying tickets.
  • For the task of finding the information of an unknown specie, it could be hard to identify form a set of small pictures.
  • Search box and home button need to be in all screens.

The detected usability issues are addressed in the second prototype.

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. </div>

4. Description of the second prototype

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <a href="javascript:showhide('design6');" id="design6show">Show</a>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <div id="design6" class="hidable">

4.1 Tasks requested to the user:

For the second round of user testing, we used the same set of tasks but including the task that was added for the last user of the first round (find information about an unknown specie). The tasks are as follows:

1) Buy 2 adult tickets and 1 kid ticket.
2) Find the Little blue penguins and go there.
3) Find the events (times-location) related to penguins today.
4) You saw a interesting red fish. You want to get information about it and find out its name. The only information you have is your current location.

4.2 Prototype functionality:

The home screen shows three options:1. Tickets, 2. Search Animals, 3.Map&Events.

1. Clicking on “Tickets” button takes the user to the buy tickets page that shows ticket info and asks the user to enter credit card info. After user clicks on “Buy” button, a ticket will be printed out, a confirmation email will be sent and the ticket information will remain at the lower-right corner of the screen.

2. Searching an animal will show the animal picture, information, location and related events, as well as the “Find it in map” button that leads to the map.

3. Clicking on “Map&Events” takes the user to the map page. The map is organized by each floor. Clicking on the floor number will show the map of that floor. The map shows tank number and small picture of the fish in that tank, as well as all the remaining events today. Clicking on a tank will show detailed info of the fish in that tank. And clicking on an event will show the detailed info of that event.

The following table presents the different screens in this prototype.

SCREEN

PAGE

1

2

3

4

5

6

7

8

Finally, the following diagram presents the interaction between all the screens:

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. </div>

5. Second Round of Prototype Testing

The second prototype was tested on 3 users. The results on usability issues are shown grouped by task:

5.1 Task 1:

  • Buy 2 adult tickets and 1 kid ticket

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <a href="javascript:showhide('design7');" id="design7show">Show</a>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <div id="design7" class="hidable">

Task 1 - Observations/Usability issues:

1. The user wants to know the price of each adult or kid ticket as well as who qualify as kids.
2. The word “Name” on page #2 is confusing when the user buying the ticket is not the credit card holder. .
3. One user asks why he needs to enter an email address and the corresponding privacy policy.
4. One user asks the difference between a confirmation number and ticket number. And she is unsure how to proceed to enter the aquarium.
5. There is no need to show ticket once inside the aquarium.

Changes:

1. On page #2, show adult and kid ticket price, and the maximum age of kid. Change word “Name” to “Cardholder Name”. Add “A confirmation email will be sent to this address after you buy the tickets.” beside the “Email” input box.
2. Change all “Confirmation number” to “Ticket number”.

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. </div>

5.2 Task 2 & 3:

  • Find the Little blue penguins and go there.
  • Find the events (times-location) related to penguins today.

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <a href="javascript:showhide('design8');" id="design8show">Show</a>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <div id="design8" class="hidable">

Observations/Usability issues:

1.The user suggests that it might be unnecessary to go to homescreen since she asks “Do I need to go back to home to find blue penguin?”
2. It’s unclear what “Find in map” button does. Does it show only the specie location or all the related event location?
3. After clicking on “Find in map” button, the map shows no tank number.
4. There are two ways of finding events. Either by searching animal or by clicking on “Map& Events”. It’s unclear if the two resulted maps will show the same events.

Changes:

1. Might add a search box on all pages to save the effort of going to the home screen.
2. Add tank numbers on all the maps.
3. On page #6, clicking “Find in map” button shows not only the specie location shown as pop up, but also all the remaining events location. But the events related to specie is shown as already poped up.
4. Clicking on “Map&Evenets” on home screen will go to the first floor of the aquarium and show all the remaining event icons.

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. </div>

5.3 Task 4:

  • You saw an interesting red fish. You want to get information about it and find out its name. The only information you have is your current location.

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <a href="javascript:showhide('design9');" id="design9show">Show</a>


html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. <div id="design9" class="hidable">

Task 4 - Observations/Usability issues:

1. It’s unclear if users could search “red fish” and find the fish info.
2. The individual tank shown on the map does not seem clickable since the user does not know that they could click on the tank to show the information of the species in the tank.
3. What does the button “Map&Events” on page #7 does? The user is confused by this button since she gets to this page through that button on home screen.

Changes:

1. The “search animal” function should return a list of related result(animal name, concise description and location). Clicking on one animal name will lead a page like page #6.
2. On all maps, show the tank that the user is currently at in a different color.
3. On all maps, mousing over a tank changes the tank background color and mouse icon to make the tank look clickable.
4. On page #7, delete “Map&Events” button and add a close icon for all pop-ups.

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list. </div>

  • No labels

1 Comment

  1. Unknown User (jks@mit.edu)

    • Prototype: 
      • Excellent photos of prototypes, and great job doing revisions both across and within user testing rounds
    • Briefing & scenario tasks: 
      • The task 'Find location of a specific event' seems ambiguous - which event? Looks like you improved this for round 2 testing though.
      • Along the same lines, a good high-level task you found in GR1 is: plan your afternoon at the aquarium. To do this, would be good to show users an overview of scheduled events happening at the aquarium, but this isn't in your application.
    • User testing observations: 
      • Good high-level takeaways.
    • Overall:
      • Couple small language/grammar things - using the word child instead of kid is a bit more formal, and probably a good idea for reports. Also, the singular of species is also 'species'.
    • Suggestions going forward:
      • Instead of today button, just fill in date to today by default
      • Small icons of species in tanks is probably too illegible / cluttered on a small display. Clickable, numbered tanks are a good idea for abstracting this information, but *named* tanks are even better - e.g. the tropical fish tank or the shark tank.
      • You mention 'hovering' over icons a few times, but remember, this is a mobile app, so there is no mouse. Users can only click.
      • Same point as I made in your scenario tasks section (overview of events): Viewing events in a typical schedule format might be very important for users who want an overview of events happening in the aquarium. Having to click every event icon on the map might be too tedious.