...

{html}function showhide(section){ 
var ele=document.getElementById(section); 
if(ele.style.display!="block") { 
ele.style.display="block"; 
document.getElementById(section+"show").innerHTML = "Hide"; 
} else { 
ele.style.display="none"; 
document.getElementById(section+"show").innerHTML = "Show"; 
}}</script> 
{html}

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 some specific tasks:

2. Description of the initial prototype

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}<a href

{html}<a href="javascript:showhide('design1');" id="design1show">Show</a>{html}

...

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

{html}</div>{html}

{html}</div>{html}

...

3. 3. First Round Prototype Testing

...

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 3Task 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”

User 1 - Changes made to the prototype after this test:

...

Image Removed

...

• 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

...

Image Removed

...

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

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”

...

Image Removed

...

...

{html}</div>{html}

...

(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:

...

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:

...

{html}</div>{html}

...

“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”

User 3 - Changes made to the prototype after this test:

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}</div>{html}

...

“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 ‘Map’
Click on floor 1
“expected to see a list of events on the left”

Task 4: (Find info regarding red fish)

...

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

Changes made to the prototype:

{html}</div>{html}

...

{html}<div id="design3s" class="hidable">{html}

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}</div>{html}

...

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}<a href="javascript:showhide('design7');" id="design7show">Show</a>{html}

...

{html}<div id="design7" class="hidable">{html}

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.

...

{html}</div>{html}

5.2 Task 2 & 3:

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

{html}<a href="javascript:showhide('design8');" id="design8show">Show</a>{html}

...

{html}<div id="design8" class="hidable">{html}

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

...

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.

...

{html}</div>{html}

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}<a href="javascript:showhide('design9');" id="design9show">Show</a>{html}

...

{html}<div id="design9" class="hidable">{html}

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.

...