Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

Google Maps InfoWindow with title, building image, building address and descriptive text

share|improve this question
1  
good editing :-) making our answers king of wired... –  Gildas Frémont Apr 26 '13 at 19:32
1  
*kind of wierd? –  norabora Apr 26 '13 at 19:35
    
That is parapraxis, I feel like a connexion with Roger Attrill. Another excuse is that I am french so I suck in english :-) –  Gildas Frémont Apr 27 '13 at 9:55
add comment

3 Answers

up vote 7 down vote accepted

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.

enter image description here

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.

share|improve this answer
1  
What a great response! –  max Apr 26 '13 at 17:14
1  
Indeed it is, now I am ashamed of mine :-) –  Gildas Frémont Apr 26 '13 at 17:17
    
What does banding means? –  max Apr 26 '13 at 17:42
    
Thank you - and you are welcome! :-) By banding I just meant to stretch a rectangle behind the description from one edge of the window to the other, creating a band right the way across - the pale yellow area in the example above. –  Roger Attrill Apr 26 '13 at 17:55
add comment

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.

http://i.stack.imgur.com/ClkJA.jpg

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.

http://i.stack.imgur.com/jHxPW.jpg

share|improve this answer
add comment

There is no such thing as an unused space*.

Try that :

layout

*I recommend you this article of Mark Boulton about whitespace

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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