Faded Map Layout

Foursquare (iPhone)

 

What is it?

This is a layout pattern found in the Foursquare iOS app. In the 'Place Detail' view, the information container features a map that shows the location of that place or business, but it uses a rare layout treatment that fades the map behind other information displayed in the same container.




How does this interaction or pattern work?

The Foursquare app is a city guide app similar to Yelp, which allows users to browse business or places profiles, find their location, hours, location and other information.

When users navigate into a place/business detail, they see a view that conveniently aggregates all the information pertinent to that place.


Since showing and condensing such a significant amount of information into a narrow mobile view can be challenging, Foursquare opts to create a dedicated layout that fades the location map image behind other content like Address, Hours and Business Categories.


This treatment allows the app to show more information without relying on a fixed box boundary.




How does it help or delight the user?

Optimized Real Estate.

Mobile views can be very challenging when it comes to optimizing information density within the available viewport.
Apps like Foursquare depend on showing the right information in a succinct and clear fashion. Sometimes doing this comes at the expense of creating a mobile-friendly design.

In this case, Foursquare relies on an unbounded layout that shows the location map as a faded background image that blends with other relevant information like the Address and Hours.
This treatment allows Foursquare to display more information within a smaller container.

In contrast, a similar layout with a bounding box for the map would likely create a view with less density and less information.

Contribution by:


Click the bookmark to save to your favorites