I am building a website which allows visitors to peruse an interactive map of a group of buildings. Each building is divided into floors and rooms. I have been given a 3D map of the entire group of buildings (the "site"), but only 2D floorplan views of the individual buildings themselves. Each building has several identical floors. The client states that he can't get 3D views of each building from the architect, so the drawings I have are all that can be provided.

I have already created an image map overlaid onto the 3D site view, allowing the user to choose the desired building. Now, I'm looking for ideas on how to best present a multi-floor building to the user, allowing the user to see how many floors there are, choose a floor, then choose a room within that floor.

Thanks for any ideas.

1 Answer 1


What I would suggest is show a skewed, isometric view of the entire building to the user and let the user drag/slide a slider to the desired floor (ref. Image 1). A tooltip may slide along with the slider to indicate which floor is currently selected. Once the user stops sliding, this tooltip can transform into a confirm button to confirm selected floor.

enter image description here

Image 1

Then you can show a high level floor plan of the floor with all available apartments (ref. Image 2). Once the user select a particular apartment, you can then reveal the detailed floor plan for that apartment.

enter image description here

Image 2

Hope this helps!

  • 1
    As an advancement of this UI would be to show a "large thumbnail" of the floorplan as user slides up & down floors. This thumbnail would be click-able map of the rooms (as image 2). This allows user to (A) select right floor of interest more accurately (B) then immediately go from a floor to the room of interest (or browse overall floor).
    – Jason A.
    Nov 11, 2014 at 8:58
  • Excellent comments. I am currently drawing some 3d models to hopefully implement this type of selector. Thanks! Nov 11, 2014 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.