User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm having a trouble using space in Google Maps InfoWindow. I am required to display the building address, image, two (2) sentences about the building, and a couple of icons near the More button.
What is the correct way, in terms of tested visual design, to display the information in the given, small, space?
I think the problem is not just down to the whitespace itself (whitespace is good), but the alignment and spacing of the items in the infowindow. In particular the rather raggedy right hand side and also around the title area where there is also a little more whitespace than necessary in proportion to the rest of the window.
You could try layout out the elements to give cleaner more aligned edges and the whole result will fill neater. You could also try banding the description area background to give the more button (and icons) a sense of their own space, and to draw out the ragged right hand edge of the text to the side of the box. You could also justify the text, but that has other issues with readability and awkwardness of spacing on narrow columns.
As you can see from the bottom of the map, I was able to shunt the vertical size down by 20px meaning slight less of the map is lost behind the window.
I don't think you need to worry too much about whitespace under the address, especially as addresses vary in length and complexity. And in any case there's also scope there to add other information (eg telephone number, popularity/importance rating, links) without further affecting the layout.
If you want to find out more about this sort of thing, read up on the Gestalt laws of grouping, continuance, proximity, closure, and related laws such as that of common regions and connected elements and I can't recommend enough the Universal Principles of Design by Lidwell, Holden and Butler.
We had a similar conversation when creating the InfoWindow for the BCParks map. BC Parks asked for the park name, park class, established date, description, reservation link, park photo and 4 park amenity icons to be displayed. ex.
For JusticeBC, we focused on also providing a clean look on mobile devices. In this project I used the screen width to modify the layout of the InfoWindow. For desktops the InfoWindow would behave like the BCParks example and for narrower (mobile/tablet) devices, the image would be placed below the courthouse information. ex.
There is no such thing as an unused space*.
Try that :
*I recommend you this article of Mark Boulton about whitespace
