Prototype
Screen 1 - This is the home screen of the app. It is simple and straight forward. It has the logo of Torch and two buttons for the user. The first one brings the user to screen 2 (the tour search screen), and the second one brings the user to screen 9 (the tour creation screen).
Screen 2 - This is the tour search screen. It is a map view, with a search field and two tabs at the top. The user starts in the "View Map" tab. The "view tours" button on the bottom starts out greyed out, and there is a bit of explanatory text to help the user.
Screen 3 - When the user selects a landmark it looks like this. A picture and the name of the landmark appears and there is an "add to tour" button. Touching this adds this landmark to the list of landmarks that definitely be in tour.
Screen 4 - Selected landmarks appear as highlighted pins. When at least one landmark is selected, the text at the bottom has changed, and the "view tours" button is clickable.
Screen 5 - This is the other tab of the search interface. It lists the landmarks you have selected. They can be easily removed from this screen using the "x" on each of them.
Screen 6 - Once the user selects "view tours" they see a list of all the tours that contain their selected landmarks. The list items can be selected to view more detail and be chosen as the tour to follow.
Screen 7 - This is the detail view of a tour. It lists the landmarks that are part of the tour and there is a "begin tour" button to start when the user is ready.
Screen 8 - This is the screen to follow a tour. It is a split screen with a path highlighted in the map on the top half, and the list of landmarks in the bottom half. Selecting one of them will pull up a third party app (wikipedia or yelp, likely) to give info about that landmark. The arrows in the middle step through the steps of the travel route.
Screen 9 - This is the create tour screen. It is a map view similar to the search for tours screen. The bottom has a "save tour" button, which is partially obscured in this image. Adding landmarks to the tour is done the same way are selecting this when searching for a tour.
Screen 10 - As landmarks are added to your tour, the path is automatically created.
Screen 11 - To edit the tour, you can go to list view to rearrange them (by dragging the textured area of the left of each list item) or delete them using the "x".
Screen 12 - This is the screen to save your new tour. The fields are all editable and then saving the tour adds it to the tour database.
Briefing
Torch is a mobile application designed to help users find and follow walking tours of notable landmarks and attractions. Users can also create and submit their own tours.
Scenario Tasks
We gave users the following tasks.
- Find a tour of MIT's campus.
- Follow a tour around MIT's campus.
- Make a tour of MIT's dorms that includes Baker, East Campus, and Burton-Conner.
Observations of Original Interface
The list below is a summary of our observations from user studies. For more information, view the paper prototyping notes that we took during the trials.
- Task 1: Find a tour
- The home screen was not confusing, users knew what they wanted to click on.
- When presented with a blank map, users were unsure what to do to find a tour.
- Users thought that selecting landmarks for a tour felt like building a new tour. It was unclear that they were choosing search criteria.
- It was not clear that users should switch tabs to remove landmarks from their criteria.
- The "View Tours" button should be greyed out to indicate that it is not enabled at the start
- Task 2: Follow a tour
- Most users found the "Follow Tour" button easily, although one thought it should be more prominent
- Users did not know what their first step should be, as there was no path from their current location to the start of the tour.
- Users expected some sort of feedback as they moved around, such as highlighting the closest landmark.
- The arrows to flip through the directions were confusing, most users did not understand what they were for. One user was confused because left/right arrows were scrolling the directions up/down.
- Some users wanted the ability to edit the tour as they were following it, perhaps by removing landmarks or changing the order.
- Task 3: Create a tour
- Users remembered the "Create a tour" button on the home screen, and mostly knew to use the Android back button to get there. One user also wanted a virtual back button.
- Some users thought they might want to start with an existing tour and modify it, instead of starting a tour from scratch. Our application does not currently support that feature.
- One user added the landmarks in an inefficient order, but did not realize that the order you add the landmarks was also the tour order until the map drew the tour path. It was also not clear to the user to switch tabs in order to remove/reorder landmarks.
- The affordances on the landmarks in list view did communicate to the users that they could reorder the list.
- When adding a landmark that the users did not know the location of, it was clear to the users that they could search to find it.
- Some users felt that the list view and map view should be combined into one view, because they're so closely linked.
Observations of Revised Interface
The list below is a summary of our observations from user studies with a revised paper prototype. For more information, view the paper prototyping notes that we took during the trials.
- Task 1: Find a tour
- Users wanted to see a list version of all tours and have a way to filter that list, rather than start with the landmarks and then filter
- Users wanted to see routes shown/made based on user's location
- In revised interface, users were not confused about how to find a tour, and they knew what to do
- Users wanted to see a list version of all tours and have a way to filter that list, rather than start with the landmarks and then filter
- Task 2: Follow a tour
- Users found the "Follow Tour" button easily and knew what to do when following the tour (which was not the case before the revisions)
- Users felt the tour should react to user's location and give directions based off of geolocations
- Users felt there should be an easy way to modify tour once they had started following the tour
- Task 3: Create a tour
- Users remembered the "Create a tour" button on the home screen, and mostly knew to use the Android back button to get there.
- Users, however, thought it might be useful to have a quick button to get to home from other screens
- Users wanted to add custom locations
- Users wanted to take already known landmarks and add their own descriptions
- Users asked if there was an easy way to detail the expected spent time at each stop when creating a tour
- Users remembered the "Create a tour" button on the home screen, and mostly knew to use the Android back button to get there.
Prototype Iteration
Revised Interface Changes
- Screen #2 - Changed text next to "View Tours" button from directions to a display of the number of locations selected and the number of tours that contain those selections.
- Screen #2 - Populate the map with all the available landmarks.
- Screen #8 - Removed the arrows intended to move forward/backward between steps in the directions.
Post-Observation Changes
- Screen #3 - Changed "Select for Tour"
- Screen #7 - Added a "Modify Tour" button that takes users to the create tour area with the selected tour's landmarks already in place.
- Screen #8 - Added and "Edit" button that allows users to reorder the landmarks in the tour.
To Do
- Summarize observations into "usability problems"
- Describe interface revisions