<p>Published on <a href="https://blog.prototypr.io/designing-for-scale-94374dd6af14?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Arushi Singh </p>
<h4>Lessons from exploring Google maps</h4>
<p>As a UX designer at Microsoft, I am responsible for the UX research &amp; design for “<a href="https://azure.microsoft.com/en-in/services/network-watcher/">Network Watcher</a>” — a log analytics based monitoring platform for Microsoft Azure. This challenging project required me to visualize network data for large-scale computer networks including the network infrastructure assets and their core parameters such as connectivity, security, and performance. This was my first experience working on an enterprise product as a full stack designer. Moreover, it was also my first experience working on dynamic or real-time data of such a high sampling rate. In my previous <a href="https://blog.prototypr.io/solving-unsexy-problems-105791622e64">post</a>, I highlighted the challenges of working on an enterprise product. However, as part of the research, I ended up exploring a completely different product to get the right inspiration for the designs I was working on. I looked up to google maps as an example of how to handle large scale of data in a visual &amp; interactive format. I realized how maps have so much to teach us about scale, size, and complexity. Here are some broad categories of insights I gathered few months ago:</p>
<h4>Search</h4>
<p>It goes without saying that Google and Search are often used like synonyms. In fact, the word Google is a noun turned into a verb. That is why search in Google maps is well emphasized and easy to locate. This gives the user a hint that the primary navigation activity could be carried out directly using search. Even though search is a goal-driven interaction, it comprises of several layers of exploration to arrive at a satisfactory result. Nevertheless, search serves as the perfect starting point and gives the user more control over his/her navigation. As a result, the initial search box enables to do the first high level filtering from the world map to a location or region of interest.</p>
<p>Similarly, in a <a href="https://en.wikipedia.org/wiki/Computer_network_diagram">network diagram</a>, there can be thousands of devices hence it can get difficult to locate a specific one which might be causing an issue. If a user knows the IP address he could directly land at the device of interest rather than fishing though the whole web of information. Another advanced search experience could be if the user wants to create a query and search specific information like ‘devices(object) whose loss(metric) is greater than 80%(value)’.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NohEk7KpoZadrqtxn6OHfg.png">Search as the primary navigation for the map</p>
<h4>Filter &amp; Sort</h4>
<p>If there is nothing that is certainly growing in size in today’s world is, that is the amount of information. Therefore, search alone is still not the most efficient way to arrive at the most satisfactory result. In fact, many search engines including Google search are working on natural language understanding of search queries to get the specific result as fast as possible. Clearly, specificity of the results or information is crucial to the user.</p>
<p>That is why, filters and sorting ability aid a user to find the right information in the least amount of time. They make finding the needle in the haystack much easier if you can eliminate unnecessary information. It stems from the very fundamental human nature of selection by elimination. In maps, when searching for cafes, filters go beyond mere location and help us use more common attributes and concerns such as “open now”, “bar” etc.</p>
<p>Another such place where filter and sorting has a very important role is in the e-commerce domain where filters play a major role in the decision making of product purchase.</p>
<p>Network monitoring also draws similar parallels wherein large samples of network logs can be filtered based on various parameters to scope down the troubleshooting process.</p>
<h4>Using information overlays</h4>
<p>World map is a finite area with ever expanding information and Google maps treat this world map as the basic foundation for all its information. You can imagine how the overlays might be playing a critical role for its successful functioning. That is why, on top of this map, you can visualize terrains, cities, places as well as dynamic information my traffic. Eg. a cyclist will want to know if the terrain is conducive for cycling or a foodie would want to know the top rated restaurants near their house.</p>
<p>In the same way, network performance data can be overlaid on network traffic information which can be augmented by other metrics. This helps users find a bottlenecks in the network.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/600/1*coCe3_B6R-rB_6ALTpqDEQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*G_1Ga1RXZ9iZ165Ihk_wrQ.png">Subtractive and additive forms of seeing information using filters &amp; overlays.</p>
<h4>Maximize real-estate for the area of interest</h4>
<p>Goes without saying that the main interaction space on Google maps is the map itself. The information pane to the left, adds secondary information and aids navigation to additional features. No wonder, even with the left pane in expanded state, the map consumes almost 3/4 of the horizontal space so that the users can play around with it.</p>
<p>Borrowing from this, we made conscious efforts to always use the map or topology as the primary work area and all peripheral information is shown as overlays such that the user is not thrown out of context from the map view.</p>
<h4>Peripheral areas for contextual filters</h4>
<p>You will notice that small floating filter widgets appear at the bottom of the map in overlays such as traffic and bicycling (as shown in the figure below). However, they are not very consistent in interactions and might have a bit of a steep learning curve for the user. Some of them are a simple on-off toggle while some have richer capabilities. Nevertheless, they do provide control to the users who might want to correlate data such as how is the terrain contributing to traffic or how does the traffic on the same road change with the day and time.</p>
<p>In the case of network monitoring we capture data related to connectivity, performance and network traffic. We can overlay this information and use this to correlate data and troubleshoot issues. Eg. If there is an increased latency and increased number of flows which could be attributed to a load balancer which is receiving traffic much beyond its capacity. This could be remediated by increasing the capacity of that load balancer.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Tw67p-YhRc-5uh0EFpNO4g.png">Filter for Traffic &amp; Bicycling overlay. These filters and peripheral controls help in exploration.</p>
<h4>Contextual Zoom</h4>
<p>It is intriguing how maps uses zoom as a cue to bring relevant information to the forefront. For example, It progressively discloses details like roads, locations and other landmarks only when you are at the zoom level of a city. It is the access to the right information at the right time, in the right context which helps prevent information overload.</p>
<p>A similar reference can be used in a network map which emulates similar layers in a top down manner in the form of a datacenter, network, subnetwork and the devices which is the leaf most node of the network tree diagram.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KKGY8ZfAsrEAB3b_CrgVWw.png">Contextual zoom populates the same map with relevant information as per zoom level</p>
<h4>Visual Hierarchy</h4>
<p>Each time a map loads the search box draws your attention with a blinky cursor, so that you don’t get overwhelmed by the information displayed to you. It directs the user to the potential starting point of the interaction considering the interface offers more information than one can imbibe. Another example, although subtle, is the red pin which highlights the point of interest when an object is in a selected state in the map.</p>
<p>Similarly, in a network map we can use visual cues like shapes, size, colors, texture, form or symbols to carefully place visual bread crumbs for the users so that they are directed towards the correct path.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*m6JTRX6TOuACIRcNq79yfg.png">Notice the use of font size to maintain a sense of hierarchy in the textual content</p>
<h4>Legend</h4>
<p>What is a map without a key. Well, my personal google map usage (which is mostly for navigation) does not require me to dig into each of the information bits that are being offered to me. However, I feel there is a need to have an easily accessible legend which will help users understand what each symbol stands for. Although in some placed the contextual filters placed at the bottom center also act as the legend, some static symbols with no call to actions might need explaining sometimes. (<a href="https://productforums.google.com/forum/#!topic/maps/3v4Nlmf0sSs">Something other users noticed missing as well</a>!)</p>
<p>My purpose with this post was neither to evaluate Google maps as a product nor to critique its abilities. The idea was to demonstrate how one product from our everyday experiences can inspire us in designing a completely different product for a completely different user group. It is often hard to find information or inspiration for most enterprise products largely due to lack of access to the actual users, or inability to install or access the actual tools from the competitors. However, this experience of mine has certainly bridged this gap for me and enabled me to find inspiration at places where the product requirements expect the least from. Hope it helps my readers too. 🙂</p>
<p>Do leave your thoughts and comments below. I would love to hear more from you!</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=94374dd6af14" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/designing-for-scale-94374dd6af14">Designing for scale</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designing for scale

Lessons from exploring Google maps

Top Stories