I am designing a web app that requires that I display a map and a scrollable sidebar beside each other..like you have on youtube. The design issue I have is that, across other pages, I have padding: 0 100px set on the wrapper, but on the page that I'm displaying map, I would like to remove the padding and just use the whole page for the map.

Is this a potential UX disaster or it doe not really matter.

Display with padding.

enter image description here

Display without padding enter image description here


Adding white space makes for a better reading experience for a number of reasons, but with a map you can better serve your user by letting her get a sense of the place's geographical context by maximizing the map space.

For a page dedicated to a map functionality, I think it makes sense to:

  • retain the page header and main nav the same as on the rest of your site (including the padding);
  • if necessary include an abbreviated footer at the bottom of the browser (e.g. Copyright and legal notice links if you have any, but not any large lists of links);
  • let your map and map navigation tools take up the remaining space in the browser.
| improve this answer | |
  • 1
    Agree, and definitely think if executed properly it is by no means a UX disaster. In complete layman's terms, it is acceptable to show the full map, as long as there is enough space to click or scroll "out of the map" without clicking another link or button. – jvform Jun 29 '14 at 20:02

This is more of a UI problem rather than a UX problem. Here are my reasons for why you should remove the padding:

  1. The UX is not the same (blind guess) as it is on the rest of your website. The actions your user can make are quite different.
  2. Experience trumps aesthetic. If can make anything to ease your site's usage, do it.
  3. Make the app (map/list) occupy all of the available real estate. I'd remove the margin below the header and let the content be as big and accessible as possible, especially if the user will be interacting with the content. Establish the least possible amount of boundaries.
  4. Consider the viewport. There is no point in having inner paddings on mobile. Think about Waze or Gmaps: the map occupies as much space as possible, because more visible streets mean more and better context for the user.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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