Exploring UI of map view in Yelp-like apps
Every app just has a map with red pins across the screen. Very usual. Very boring. Too mainstream.
There are many apps out there that help users search for nearby restaurants, gas station, grocery stores., etc. The map view is probably one of the most useful features in such apps with the least exciting user interface.
So, I decided to explore the UI of this map feature and came up with 4 innovative and daring designs.
The above 8 images are the screenshots of some of the apps that have similar product goals. They all want to direct users to the nearby restaurant or shopping mall. They all have a map view of the list with pins on them.
Why do people visit these apps?
- To see what places are nearby
- To see the number of miles it takes to reach there
- To see the ratings of that place
- To see how expensive this place is
What information can the yelp map feature let go of?
- The numbers on the pins. Why?
The numbers on the pins represent the numbers on the list associated with the places. The user has to remember the number he viewed on the list and then find that on the map. He has to toggle back on forth to do this. This aspect of the feature is strenuous and unnecessary because once you click on the pin, it is going to display the name of the location.
Once the user selects the pin, it displays all the information in the list view right there on the map.
- The address of the selected place. Why?
To minimize the amount of text in the small box in our already small phone screen.
You can pretty much guess the address because you are viewing a map and you can see the areas marked on it.
- The cuisine. Why?
According to a short survey I conducted among friends, I realized this information is not very important. So, if the user really needs to view the cuisine, he can view it in the list view.
Based on the above thoughts, I designed the following user-interfaces of the map view.
Design #1
- Here, the number on the pins represent the number of miles/minutes it takes to reach the place. (Yes! Uber!)This reduces the amount of text on the white box and also gets rid of the inessential numbers.
- The different shades of red represent how expensive the place is. The darkest shade of red being pricey and the lightest shade being not-so-pricey. This is of course for the same reasons as above. This makes use of the background color space in the pins and eliminates extra text for $ symbol. The trade offs here are color-blind users. So, instead of different shades of colors, different colors can be used.
Design #2
I would love some tindersque interaction to this feature! Because according to uxmag, Tinder has taken Mobile UX to a whole new level with its swipe feature that uplifts simplicity and usability. So, swipe left to choose another restaurant nearby and swipe right to open the location in Google maps.
Design #3
This is almost like a game console. Double tap on the name to view the next nearest location in the direction of the arrow. Swipe along the direction of the arrow to go to the selected location. This is just an idea. The visual design can be improved and redesigned towards each app’s design guidelines.
Design #4
Yo-yoing! Double tap on your location to unleash a red YoYo. Now drag it anywhere on the screen to see a white box pop up if there is a restaurant in that region. Let go off the YoYo if you are not interested in going to a restaurant anymore or if you want to zoom in or zoom out. Quickly tap on the popped up box to get directions to that place. The YoYo helps view the map without the pins cluttering it and also enables easy zoom-in and zoom-out without accidentally clicking on the pins. It also is just a quirky and fun UI of the map view.
