Floor Selector

Floor Selector

What Problem Does This Solve?

User needs to select a floor/level in a 2-dimensional indoor map.

Why Use This Pattern?

Indoor maps are inherently 3-dimensional in that they usually include multiple floors or levels. When displaying a planar (2D) map users do not know which level they are looking at or how to select a different level. The Floor Selector provides this visual feedback while also allowing users to change the level.

When to Use This Pattern

Any 2-dimensional Indoor map needs a way to select the level/floor to be displayed. Sometimes regular maps turn into “indoor maps” after zooming to a large scale that has a building with indoor information or after explicitly selecting that building by clicking on it. This process can be considered a switch between regular (outdoors) view and indoors view.

What’s the Solution?

The Floor Selector is sometimes also referred to as level selector of floor picker. It consists of a series of buttons with labels to indicate the level. Labels are usually floor numbers (e.g. 1, 2, 3, etc.) or abbreviations of the level, e.g. L1 for Level 1 or GL for Ground Level. Using longer labels is acceptable if it doesn’t cover important content or can be reduced, e.g. through display in a dropdown.

Place the Floor Selector in a corner of the map, often at the bottom of the screen since that mimics the layout of a building. Select the ground floor by default unless it is triggered through a search or query that requires the selection of a specific floor.

Keep the height of the Floor Selector at a fixed maximum that doesn’t stretch across the full size of the map and keeps the number of buttons to 5 1/2 levels to not overwhelm the user with unnecessary options but cuts off the last option in case there are more than 5 floors. This will indicate to the users that they can scroll the list, avoid up/down arrows for scrolling.

Special Considerations

If your app provides a way to switch between outdoors and indoors through interactions like clicking/tapping a building to enter then displaying the Floor Selector is a good way to indicate “Indoors mode” and providing an extra button on top of the list of levels is the good method to exit the building again.

The Floor Selector is so important that it should be visible whenever the indoors view is active, even on mobile devices with limited space.

Examples

British Museum on Google Maps
British Museum on Google Maps

 

Indoor map on mobile device
Indoor map on mobile device
Makai, example of long labels
Makai, example of long labels

Leave a Reply