Map UI/UX
Brainstorming for my Critical Making final project
As I am hoping to utilize a web based map for my final project for Critical Making class, I took this opportunity to explore the UI/UX of various maps on other websites.
I began by searching any websites that I could think of that might include a map functionality, and examining their similarities and differences. Every site that I found either used Mapbox or Google maps to create the embedded maps on their site. I think I like the look of the Mapbox maps better, and from what I can tell from messing around with my Mapbox account, they are fairly easy to customize.
Below are six examples of different maps that I found, and what I like about each. They are all fairly similar, but subtle differences make a big impact.
Atlas Obscura map
If you search for a location on Atlas Obscura, you can choose to see a list view or look at a map. Points of interest appear as the dark green locators, and if you click on a locator a box pops up with a brief overview of the site and chances to mark it in various ways on your account. I think the pop ups are a bit busy looking, but its also nice that you can mark spots without leaving the page.
Patagonia store locator
I like the simplicity of the Patagonia store locator, made with Mapbox. The muted background colors make the points and the pop ups stand out more. I also like the clarity and simplicity of the icon key (red for Patagonia stores, black for all other retailers).
Lonely Planet top attractions
This is another Mapbox map from a Lonely Planet location search. I like the customized Lonely Planet icon, the simplicity of using only the one icon in a bright color. I also like the simplicity of the pop up box, and the side bar that corresponds with the icons. If you click on a location from the side bar, the corresponding icon on the map opens up.
Airbnb accommodations
This map from airbnb.com is formatted similarly to the Lonely Planet map above, but there is more information showing, so it looks busier. I like that the pop up here has a bit of a drop shadow that makes it stand out from the background of the map. Prices are used as the map locators. The pop ups and the items in the side bar both have a “like” icon to save the item.
Maptia editor’s picks
This map appears on the editor’s picks page of maptia.com, and also uses Mapbox. I like the customized icon that matches the Maptia logo. I also appreciate the simplictiy of the map background, but I think it is actually a little too simple; I would have preferred more border lines to designate countries. The pop up looks quite similar to the Lonely Planet pop up, but with a darker color scheme. Like the Lonely Planet and Airbnb pop ups, you can’t lose the pop up, it closes automatically when you click away.
Ritz Carlton hotel locator
The hotel locator on ritzcarlton.com uses a Google map. I think this is fairly boring and strangely formatted. The far left alignment of the title on the pop up looks like a mistake.
