Jiyeonstoppable
Group 3.png

Google Maps Usability Heuristics

google maps cover.png
 
 

Google Maps 10 Usability Heuristics

An analysis of Google Maps according to Nielsen’s 10 Usability Heuristics

 
 
 

overview

Context: Google Maps is arguably one of the major contributors and products that has brought the world closer together. It has given access to all corners of the world for those do not have the resources or means to travel through a virtual exploration of the world. Needless to say, it has also revolutionized the way many of us travel today by making a physical map, a GPS, or even a local tour guide no longer a requirement for traveling in a foreign land of foreign language speakers. Given how important a role Google Maps has played in traveling and globalization, I decided to do a Usability Heuristics following Jakob Neilsen’s 10 Usability Heuristics of both the web and mobile interfaces.

Timeline: 2 days

 
 

 

 1. Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Current location visible through blue dot. (Local view)

Current location visible through blue dot. (Globe view)

 

Google Maps indicates the user’s current location with a blue dot.

 

Shows real time status and ETA for each modes of transportation (Public transportation).

Shows estimated time and price for ride sharing services.

Shows real time motion of nearby taxis.

 

When navigating the direction from point A to point B, Google Maps gives out different modes of transportation, ranging from driving to walking to public transportation to ride sharing services to cycling, and even to flights. Alongside the different modes of transportation, Google Maps also gives out an estimated time for each mode, as well as the status of traffic, public transportation schedule, and nearby taxis.

 

Search result for Lebanon. Highlights searched location

Search result for Jordan. Highlights searched location

 

When the user searches for a location, Google Maps indicates the location clearly with a red border and highlight of the searched region, along with having the rest of the regions in the frame dimmed out.

 

Search result for Israel

Search result for Palestine

 

On the other hand, as can be seen above, regions in dispute and are less clearly defined are not highlighted nor bound with red borderlines. According to the Google Maps Help page, Google Maps displays “disputed boundaries [between places that don’t agree on a boundary] as a dashed gray line.” This indicates Google’s awareness of what a product as simple as a map may speak for, as well as its diverse users.

 
 

2. Match between system and the real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

 

Web Mercator Projection

(Note the Distortion of Sizes of Greenland and Africa)

3D Globe Projection with Accurate Sizes

3D Globe Projection with Accurate Sizes

3D Globe Projection with Accurate Sizes

 

In a quite literal sense, Google Maps positively exhibits the second of the 10 heuristics, as the function of a map is to map the real world. However, if we dig a little bit deeper into the technicality, Google Maps 2D uses the Web Mercator projection, where objects around the equator are to scale relative to one another, but objects closer to the poles are larger than they actually are. As a famous example that points out the distortion of a Web Mercator projection, Greenland appears larger than Africa, when in reality, Africa is about 14.5 times larger.

However, in August 2018, Google released a new projection for the desktop version of Google Maps in 3D globe mode, which preserves the spherical nature of the Earth at all zoom levels. With such 3D globe projection feature, the sizes of each continent are depicted more accurately.

 

3. User control and freedom

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

 

Screen after clicking on one of the Trader Joe’s locations on the list of results.

Screen after clicking on the left-pointing triangle.

 

Personally, I find it confusing whenever I view a location or images of that location and try to go back to the list. For instance, let’s think of a situation where I search for Trader Joe’s in Manhattan and click on the closest location on the list. If I wish to go back to the list, intuitively, I would click on the left-pointing triangle that looks similar to a backward arrow as a way to go back to the screen. However, clicking on that left-pointing triangle does not bring me back to the list, but rather just collapses the column. In order to navigate back to the list, I would have to click on the “Back to results” written in blue below the search bar. Unfortunately, those blue words do not stand out as much, and feels less intuitive than clicking on the backward arrow-looking triangle immediately adjacent to the search bar.

 
Screen Shot 2020-01-08 at 1.01.49 PM.png
 

Similarly, say, the user views the images of Alexandra Land in Arkhangelsk Oblast, Russia. There are two triangles that are placed on the left and right side of the title, “Alexandra Land.” The user may experience some confusing in choosing between the two buttons when they decided to leave this screen. In other words, undoing the action is not as clear and intuitive. A clearer distinction between the two different actions would be to have a maximization button that indicates that the photo will enlarge when clicked on in replacement of the left-pointing triangle, located on the right side of the column.

4. Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

 

Screen before clicking on “X” button (Desktop)

Screen after clicking on “X” button (Desktop)

Screen before clicking on “X” button (Mobile)

Screen after clicking on “X” button (Mobile)

 

In his 4th Usability Heuristic, Consistency and Standards, Neilsen distinguishes consistency into two kinds: internal consistency and external consistency. Internal consistency refers to maintaining consistency within a product or family of products, while external consistency refers to maintaining consistency outside of the product, such as the UI conventions adapted universally.

Revisiting the situation wherein a user searchers for Trader Joe’s, on the desktop version, clicking on the X button completely blanks out the entry and search results, and takes the user immediately back to a plain map at once. On the other hand, clicking on the X button on the upper left corner of a mobile device brings back the user back to the list of all “Trader Joe’s” nearby. This shows a conflict in internal consistency, as the same X button in the same situation leads to different results, causing potential confusion for the users.

 
Screen Shot 2020-01-08 at 12.41.41 PM.png
 

On the other hand, Google Maps does a great job on keeping external consistency with the UI language universally adapted in other products. It clearly labels the types of locations with various layers of information, from distinct and intuitive use of color to universally understood icons.

From a very basic level, highways are shaded in yellow, any water bodies are in light blue, grass fields are in green, streets and roads are in white, and buildings are in grey. The major highways, streets, and bridges are labeled on the map even from a zoomed-out viewpoint as shown above. And there is an appropriate use of icons for the types of location.

For instance, parks, zoos, and natural sites are labelled with a green tree icon, and shaded in the color green. Shops are labeled with a blue shopping bag icon, while grocery stores are labeled with a blue shopping cart icon. Monuments, historic landmarks, museums, and all other tourist attractions are all in an aqua color icon, subways are in light blue with a train icon, restaurants are labeled in an orange cutlery icon, bridges are labeled with a grey bridge icon, and hotels are labeled with a magenta bed icon. Throughout such use of consistent UI language, the users find it easier to understand the map without the need for much words on the screen.

 

5. Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place.

 
 

There are places that only natives would know what it is or how to spell. Say, “Duane Reade,” a drugstore that is unique to New York. In order to help those who recently moved to New York or tourists who are directed to Duane Reade for emergency medications to locate the nearest Duane Reade, Google Maps prevents the interaction problem, such as a typo, occurring in the first place by autocorrecting “Duain Reeds” into “Duane Reade.”

 

6. Recognition rather than recall

Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

 

Customized list

Customized labels

 

First and foremost, the use of lists and labels is one of the most convenient and prominent features of Google Maps, representative of its “recognition over recall” model. By allowing the users to create a list of their “Favorites,” “Want to go,” and “Starred places” and label their “Home” and “Work” addresses along with other frequently visited places, the users do not need to recall and type in the locations they visit frequently each time they need to find the directions. Through these features, the users are able to create a customized map tailored made just for them.

Relevant search results (bagel stores, in this case) nearby the user’s location.

 

When a user searches for one type of restaurant, Google Maps highlights in bold the nearby restaurants of the same category. As shown above, you can locate not only “Absolute Bagels,” which is the desired destination of the user, but also “Broadway Bagel” and “BO’s Bagels.”

 

Recognition is promoted by outputting a list of best pastel de nadas in Lisbon.

 

Above depicts an instance where Google Maps not only combines the search engine functionality with maps, but also promotes recognition over recall by doing so.

For instance, let’s say you received a recommendation for the best pastel de nada place in Lisbon from your Airbnb host. Google Maps promotes recognition for locating that place your host recommended with a simple search of “best pastel de nada in Lisbon” on the search bar, as it gives out a list of some of the top rated pastel de nada places. By giving extra help in remembering that information, the user can easily recognize the term. Especially for those whose mother tongue is not Portuguese, recalling that name would be less error-prone and less difficult with the help of this search engine-powered map.

 

All New York City drugstores are outputted.

 

The same follows for searching drugstores. Rather than requiring the users to remember the exact name of pharmacy brands in New York City, Google Maps outputs the list of all pharmacies with the simply enter of “NYC Drugstores,” requiring fewer context-provided cues than recalling would otherwise.

 

7. Flexibility and efficiency of use

Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

 
google search bar engine.png

Things to do - list of events happening in New York.

The search bar in Google Maps offers a basic search engine functionality, as you can search for “tourist attractions in NYC” and find a list of all tourist attractions. Furthermore, a user can discover places to go and things to do in a city they wish to discover, making it especially convenient for non-locals.

 

Surprisingly, the accelerator function used by Google search engines is not supported in Google Maps. On the Google web search engine, the “+” function would give out all results with both keywords linked with the “+” sign. The implementation of this shortcut would make the Google Maps search a more flexible and efficient process. Think of a scenario where the user is looking to visit both Trader Joe’s and Whole Foods Market, and wants to find the district that has both stores in proximity. In order to do so, the user would have to type in both Trader Joe’s and Whole Foods Market on two separate searches, moving back and forth, imprinting an image of the map with their memory or labeling them manually onto their map. A simple “+” function implemented on the map would enhance the user’s experience for a faster and efficient experience.

 

8. Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

 
ulaanbaatar.png
 

Google Maps does a great job giving a short phrase that describes the key features of the place underneath the name of the place. In this case, they have met the “minimalist design” aspect of the 10 heuristics. However, there are times it gives out more than enough information, such as the “Hotels” information of a city. A possible solution to this would be to allow the users to switch on and off a “travel” mode versus a “navigation” mode, so the signal to noise ratio is not as low.

9. Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

 

Typo Error message on Google Maps (desktop)

Typo Error message on Google Maps (mobile)

 

Error messages for typos in both the desktop and mobile interfaces are concise and clear in a sense that no technical acumen is required to understand what the mistake was. However, while the error message for the desktop interface gives an explanation for the potential cause of the error (“Make sure your search is spelled correctly,” “Try adding a city, state, or zip code”) as well as alternative solutions (“Try Google Search Instead”) or even the option to “Add a missing place,” the Google Maps mobile platform only gives out a simple notice that reads, “No results” and the only option the user can take is to click “OK”.

A solution for the mobile interface would be to give out a similar message such that the desktop interface does, offering potential reasons as to why such error may have happened, as well as alternative solutions to solving the error.

 

10. Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

 
 
 

Help page easily detectable on the menu bar (Mobile)

Clear instructions with easy-to-follow step-by-step guidelines (Mobile)

Clear instructions with graphics for support in explanation (Mobile)

Help page on menu bar (Desktop)

Help toolbox on desktop interface, organized by popularity of questions (Desktop)

Clearly labeled hyperlinks with an icon on the right. (Desktop)

 

First, starting from locating the help button, the two interfaces have them located on different locations. On the mobile interface, the “Help” button is easy to locate, as it is on the bottom of the menu bar, labeled as “Help & Feedback.” As for the desktop interface, per UI conventions, a user may expect to find the “Help” button on the very bottom, like on the mobile interface. However, the “Help” button, which is worded differently from the mobile interface (“Get help” on desktop vs “Help & Feedback” on mobile), is also in between other options, making it trickier to find.

On both the desktop and mobile interfaces, Google Maps walks the user through the process of looking for help. Once the user finds the Help page (which is easy to locate), the user can see the most “popular” help questions on the landing screen. The user is able to look for help for their specific needs by typing in keywords in a search box. Then, when the user finds the appropriate article that addresses their concern, they are guided with clear instructions with well-defined steps as well as graphics and icons to support them.