Day 6: First sketches of UI design
User story #1.1: Seeing places of my interest around me
As discussed in Day 2, My Ideal Map App will allow users to see their own places of interest around their current locations at once.
When the user taps the app icon on the home screen, the map will be shown, centered around the user’s current location (the leftmost sketch in the above scanned image). By default, the map shows all the places saved by the user, which is indicated in the list of chips at the bottom of the screen, where a chip labelled “All” is rendered in saturated color.
If the user wants to see only a certain type of places (e.g. cafes, because the user wants to take a coffee break), they can tap the chip entitled “Cafes” at the bottom of the screen. Which will only show the places tagged “Cafes” by the user (the middle sketch in the above scanned image), with the “Cafes” chip rendered in saturated color.
Due to the space limitation, only a few chips can be shown at the bottom of the screen. If the user has created more place types, the overflow menu (the three dots) will appear at the right edge. Tapping it expands the list of place types (the rightmost sketch in the above scanned image), laid out over the map. Once the user taps the relevant chip, tapping “Back to Map” on the bottom right returns to the map.
Well, maybe not on the bottom right but on the top right. I need to think hard about the meaning of each of the four corner of the screen. A pattern adopted by Google Maps is roughly as follows:
- Top-left: Cancel or Go back to the previous screen
- Top-right: Confirm the action
- Bottom-left: No particular meaning
- Bottom-right: Start a new set of actions (e.g. the floating action button)
Probably I should follow this pattern.
In general, English speakers read sentences from the left to the right and then from the top to the bottom. So the left-hand side, especially the top-left, belongs to the previous page while the right-hand side has an implicit meaning of “the end”.
The bottom-right indicates the last of all the pieces of information on a rectangle, which can also mean the least relevant to what’s shown on a rectangle. So placing a button to start a new action (that is, the least relevant to what’s shown on the current screen) at the bottom right makes sense.
User story #1.2: Reminding myself of the particular place of interest
Once seeing all the places of interest, the user may want to learn more about a particular place among them. Tapping the place mark does the job:
The place info panel shows up over the map, while the map around the tapped place (plus the user’s current location) will be shown at the top one-third of the screen.
The place info panel has the drag bar at the top middle. The user can drag this up to expand the place info panel, if necessary.
The place info panel shows the place name. In case Google knows that the place is closed permanently or temporarily, it’ll be indicated beneath the place name.
The place name is followed by the user’s own note about the place, which can include text links — the feature missing in Google Maps.
Shown below the note are the tags added by the user to the place, which can remind the user of other aspects of the place (e.g. cafes that also sell some products).
Further below is the opening hours provided by Google Maps. This information can be outdated. So the phrase like “by Google” should be added here.
The top right corner of the place info panel has the Google Maps’s DIRECTIONS icon button. Tapping it jumps to Google Maps app, showing the direction from the current location.
The top-right corner is probably the most appropriate position. This is the icon to tap after the user is convinced that he/she wants to visit this place now. As discussed above, the top-right corner tends to have an implicit meaning of confirming the current action. Seeing how to get there is like confirming that this place is where you want to visit.
User Story #2: Seeing places of interest around my destination
As discussed in this previous post, another user story concerns showing the places of the user’s own interest around their destination. This will be useful if the user is planning a forthcoming trip or moving on the way to the destination.
The UI for this user story will closely resemble what Google Maps currently offers. After tapping the app icon on the home screen, the map will be shown together with a search text field at the top. As the user is typing the name of a destination, the list of possible matches will be shown. Tapping one of them moves the map to the searched location around which the user’s own saved places, if any, will be shown on the map.
As in User Story #1.1, the bottom of the screen shows the chips of place tags so the user can choose which type of places to be shown around the searched location.
The search text field stays at the top of the screen, with the x button on the right edge, so the user can search for another place immediately.
Directly below the x button in the search field, there is an icon for the current location. Tapping it moves the map back to the user’s current location.
The current location button may be more appropriate to be positioned on the left, instead of on the right. It’s not the confirmation of the current action, that is, seeing places of interest around the destination. It’s more like going back to the previous screen, because by default launching the app will show the map around the current location.
User Story #3.1: Save a place of interest
As discussed in this previous post, the third user story is about saving a place of the user’s interest with the fewest number of taps.
Just like for User Story #2, this user story starts with the search of a place. Once the searched place appears on the map, the user can tap the + button to start the process of saving a place.
This + button can be at the bottom right corner, as the bottom right can mean starting a new set of actions. But then the button’s association with the searched place becomes ambiguous due to a distance between the center of the screen and the bottom-right corner of the screen. Maybe a better position for the + button is the searched place itself, as shown in the sketch above.
Tapping the + button will reveal the panel entitled “Save a place” (the middle sketch in the above scanned image). The top-left corner has an X button to cancel and go back to the map. The top-right corner has the “Done” button to save the place.
Below is a text field for the place name. The name provided by Google is shown by default. Unlike Google Maps, however, the user can customize the name.
Beneath the place name field is the list of checkboxes for tags (or filter chips). The user can add more than one tag to the place.
At the bottom is a text field for the user’s own note about the place. If the user enters an URL, it will automatically become a text link.
User Story #3.2: Save a place by tapping on the map
Instead of searching for a place, the user can also save any location by tapping on the map. This is useful for the kind of locations that Google doesn’t have a record for. Examples include bicycle parking lots, public rest rooms, and the great view points that the user personally discovers.
After tapping a location on the map, the + button appears where the user just tapped. This + button can be dragged by press-and-holding it so the user can fine-tune its exact location.
Once the user is happy about its position, tapping the + button will reveal the “Save a place” panel as in User Story #3.1.
User Story #4: Edit/Delete the saved place
As discussed in this previous post, the last user story is about editing and deleting the saved places.
The user can search for the place to edit/delete, just like for User Stories #2 and #3.1. The matched names of the user’s own saved places will be shown separately from, and above, the ones provided by Google.
Tapping one of these matched names will show the place info panel as in User Story #1.2. The place info panel shows the Edit and Delete buttons somewhere. Maybe the top left or the bottom right. I have to think hard about it.
Tapping the Edit button will show the Edit Place Info panel (the right sketch in the above image). It’s essentially the same as the one for saving a new place in User Story #3, maybe except that the Delete button will be shown on the bottom left.
Tapping the Delete button will show a confirmation pop-up, asking “Do you really want to delete this place?”, showing the name of the place to be deleted. The bottom left corner of the pop-up shows the Delete button, along with the Cancel button to the right. Or maybe the other way around to prevent the user from unconsciously tapping the bottom right corner. User interface design research should have test results on this topic. I need to look them up.
Once the user confirms the action by tapping the Delete button again, a snack bar shows up, saying “Deleted [place name]”, along with UNDO button. Just like Google Maps do, this snack bar will disappear in a few seconds.
