This is the online interactive map for the Irvine Spectrum, an outdoor shopping plaza. Immediately after arriving upon this page, it is plain to see that color is used to improve the aesthetic, draw attention, and assign meaning.
The parking availability meter uses a spectrum of colors from green to yellow to red to represent how open or full the parking lot is. The more green, the more open. This choice of colors is a form of surface mimicry, mimicking the colors of the stop light. It, therefore, makes the information appear more familiar and recognizable. Even without reading the labels, users can quickly identify that green indicates the path of least resistance because of their familiarity with stoplights, where green represents “go”.
Moreover, the visual quality of the colors draws the immediate attention of the viewer. This is considered a form of hierarchy since the colors make this portion of the page stand out above the rest and are likely what the user will first focus on when landing on this map. This makes sense because finding parking is the first thing people must do when going anywhere.
Looking at the right side of the page, the iconography is likely the next object of focus for the user. Using commonly recognized symbols to convey amenities allows the user to recognize their meanings immediately. However, in case the user is confused, hovering over the icon shows what the icon represents.
Iconography saves the user the hassle of having to read things out and makes it easier to identify these amenities on the map itself.
Overall, this map does a great job at promoting visibility for all its features and making it clear what each portion of the map signifies. The design is clean, visually appealing, and easy to use.
Dear Grace: Thanks for sharing this interactive map, apparently I’ve never used this one. I appreciate you providing a comprehensive review of multiple design principles used in this interactive map. The parking availability color spectrum is such a thoughtful design, except when I think about an actual user scenario, it makes sense to follow an actual digital sign that tells which specific parking spot is available. Hope you get to integrate these during your own map design.