...
- Map displaying possible tour routes & filter using a list of landmarks with checkboxes
- Show you a picture of the next landmark with description, direction (like a compass)
- Modifying a tour by making changes while following
*Screen #1 - * Linda has searched for tours in Cambridge, MA. A map is displayed with the three results. The tours are overlayed on top of each other, with different line styles (this could easily be changed to color, or some other distinguishing factor). The different stops along the tour are represented with dots or markers of some sort at their location. Tapping on one of them opens a popup with the location’s name, category, rating, reviews, pictures, etc. Clicking again would go to a more detailed view (perhaps on Yelp or another service), and clicking anywhere on the map would clear the result. Moving around on the map should re-do the search, such that tours on the current map are always shown.
- Learnability: This takes advantage of the external
- External consistency with
- Maps interface, so it supports
- standard actions (panning, pinch-to-zoom, search for locations, etc)
- Unclear whether or not the search is for cities (“Cambridge, MA”) or specific locations (“Thirsty Ear”)
- Stops along the tour
- Learnability: This takes advantage of the external consistency with a Google maps interface, so it supports many of the actions that users are used to taking (panning, pinch-to-zoom, search for locations, etc). It is unclear whether or not the search is for cities (“Cambridge, MA”) or specific locations (“Thirsty Ear”) so that should be disambiguated. It needs to be clear that the stops along the tour are clickable, but this can be achieved by using familiar Google maps icons.
- Efficiency: Several tours are overlaid on each other. This could either be useful for efficiency (seeing several at once), or a detriment (overloaded with too much information).
- Safety: On this screen, there are no binding actions. Any search can be repeated, and clicking to find out more information about a stop can be undone by clicking anywhere else.
Screen #2 - Clicking on the list icon at the bottom brings up a list of all the landmarks in the area that Linda has chosen. They have checkboxes next to them, such that they can be selected/deselected. Linda can choose the landmarks that she wants to be on her tour, and when she returns to the map view only tours containing all the landmarks she selected will be shown.
- Learnability: It’s unclear that clicking the list icon brings up a list of what you were already viewing on the map. These two views are more linked than that, so maybe they should be presented as such. Beyond that, the interface is similar to many others like it. There is a bar at the top to search (and this time it is clear what to search for), and the list items present check boxes are easy to interact with. It is not clear that you need to go back to the map to view the results, so perhaps a “View Results” button shoul dbe added.
- Efficiency: This view is not as efficient as viewing results on a map, but since the user selected to have the items appear on the map, it’s acceptable in this case. Perhaps there should be a “check/uncheck all” button in order to improve efficiency, or maybe long-pressing on a category icon (such as a martini glass for a bar) should give you the option to check/uncheck all items of that type.
- Safety: It’s very easy to immediately undo a “check” operation by simply clicking it again. However, if you check something and then do another search, it’s not clear how you can uncheck something that’s no longer visible. Perhaps there should be a “view checked” or “clear all checked” button to make this more apparent.
Screen #3 - Once a tour has been selected (how?), a compass points the way toward the next stop on the tour. There is also the name of the next stop, how far away it is, and more information about the stop. The compass will use the internal compass in order to point the arrow in the correct direction. Additionally, there will be a map in the lower section of the screen (with north always toward the top of the screen). It shows Linda’s current location and the location of the next landmark, and a suggested route for how to get there.
...
- appear clickable (or should) so that the users know how to get more information
- Efficiency
- Several tours are overlaid on each other to view lots of information at once
- Several tours could possibly lead to information overload
- Safety
- There are no binding actions on this screen
- Any search can be repeated
- Clicking to find out more information about a stop can be undone by clicking anywhere else
Screen #2 - Clicking on the list icon at the bottom brings up a list of all the landmarks in the area that Linda has chosen. They have checkboxes next to them, such that they can be selected/deselected. Linda can choose the landmarks that she wants to be on her tour, and when she returns to the map view only tours containing all the landmarks she selected will be shown.
- Learnability
- Clicking the list icon brings up a list of what you were already viewing on the map, which is not obvious (these two views are more linked than that, so maybe they should be presented as such)
- The interface has external consistency with many other "list views"
- The search bar at the top is clearly labelled
- The list items present check boxes, which users are likely to be familiar with
- It is not clear that you need to go back to the map to view the results, so perhaps a “View Results” button should be added.
- Efficiency
- Not as efficient as viewing results on a map (but since the user selected to have the items appear on the map, so it’s acceptable in this case)
- There should be a “check/uncheck all” button in order to improve efficiency
- Long-pressing on a category icon (such as a martini glass for a bar) should give you the option to check/uncheck all items of that type
- Safety
- Easy to immediately undo a “check” operation by clicking it again
- If you check something and then do another search, it’s not clear how you can uncheck something that’s no longer visible
- There should be a “view checked” or “clear all checked” button
Screen #3 - Once a tour has been selected from the map, a compass points the way toward the next stop on the tour. There is also the name of the next stop, how far away it is, and more information about the stop. The compass will use the internal compass in order to point the arrow in the correct direction. Additionally, there will be a map in the lower section of the screen (with north always toward the top of the screen). It shows Linda’s current location and the location of the next landmark, and a suggested route for how to get there.
- Learnability
- External
- consistency with a typical compass, as well as other applications that take advantage of a compass interface
- Ideally the movement of the compass needle will teach the user that it is actually pointing to the location
- The map
- provides more information (in a well-known format) if there is any confusion
- There are two mental models being presented here: the compass where the direction to the landmark is always at the top of the screen, and the map where north is always at the top of the screen. Perhaps it would be better to have a map/compass button at the bottom that switched between the two views, so that the user could take advantage of whichever one aligned best with his or her mental model
- Efficiency:
- The map
- recommends the fastest way to get to the desired location
- The compass provides real-time updating of the direction toward the goal
- Safety
- The only action that can be taken from this screen is to click a button at the bottom or find out more about the chosen landmark
- The compass button will always be in the bottom, so you can easily return
- Perhaps there should be a "cancel" button that stops tracking you and pointing you to the next landmark
Screen #4 - At any time during the tour, Linda can click the pencil icon on the bottom in order to edit the tour. All the landmarks on the tour will be shown, in the order they occur on the tour. Tour landmarks can be removed from the tour by clicking the “x” on the right side. Tour landmarks can be re-ordered by dragging them around by their handle on the left side. There is an “Add new stop” button that brings you back to the map interface, but a search reveals only landmarks (instead of tours). Selecting one of these would add it to the tour. Finally, there is a “Save tour” button that will save your tour as a new tour (to not overwrite the old one), after a dialog box that asks you to name the tour.
during the tour, Linda can click the pencil icon on the bottom in order to edit the tour. All the landmarks on the tour will be shown, in the order they occur on the tour. Tour landmarks can be removed from the tour by clicking the “x” on the right side. Tour landmarks can be re-ordered by dragging them around by their handle on the left side. There is an “Add new stop” button that brings you back to the map interface, but a search reveals only landmarks (instead of tours). Selecting one of these would add it to the tour. Finally, there is a “Save tour” button that will save your tour as a new tour (to not overwrite the old one), after a dialog box that asks you to name the tour.
- Learnability
- The draggable handles on the left provide affordances that you can drag the landmarks around
- Direct manipulation of the landmarks makes it easy to reorder them
- External consistency with an "x" to delete something
- It's not clear that the "Save tour" button will make a copy of the tour and save it, so that should be relabelled
- Efficiency
- Users can make all changes before having to "save" anything, to prevent unnecessary waiting
- No easy way to automatically order stops, perhaps by type or distance
- Safety
- No changes are committed, so you can quickly reorder, add, or delete a landmark if you didn't like your most recent change
- Perhaps an "undo" button should be added to automatically undo the last change
- Learnability:
- Efficiency:
- Safety:
Storyboard #4
- Some way to do search/filtering (slide-down, parameter search, etc).
- Ordered list of landmarks on the route potentially with a guide (landmark #, picture, name) with which step you’re on and perhaps with a small map
- Drag-and-drop tour ordering
...