GNOME Bugzilla – Bug 741423
New mockups for Map Bubbles
Last modified: 2016-02-03 19:37:00 UTC
Created attachment 292588 [details] Map bubble with a bunch of stuff We are starting to add a bunch of stuff to our map bubbles. I think we need some new mockups to keep them uncluttered. The current mockups: https://raw.github.com/gnome-design-team/gnome-mockups/020b66b292801ae281c54cb71b11d2eea8536edf/maps/v2/markers-and-bubbles.png Attached below is an example of a current bubble in Maps which contains a bunch of stuff. There is also plans to include more stuff. Like email, phone, official website. So maybe some kind of split between address data and meta-data?
Ping.
Added to my todo
How about something like this? https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/maps/popup-expander.png Another alternative that I sketched out on paper only was to have a button spelling it out, like in the gmail sidebar: Less /\ More \/ But I think just the arrow should be enough.
I'm still undecided what should go over the fold, and what should go under it, especially where the postal code should go. As far as I can tell, it's fairly useless, unless you want to send mail there. On the other hand, in order to send that mail to the correct place, you need the whole address in the right order. A possible solution to that would be to put it in the right order as soon as you expand. Not sure what's best. Another thing I think we might want over the fold is the opening hours of a store or café, since it answers the question of not only "How do I get there?", but also "Can I go there Now?".
Awesome! Thanks! I think we do not want the postal address "over the fold". I feel we might go one step further even and remove the "county/state" and only have city. Opening hourse, hmm. How about an indication if it is open, if we have opening-hours? The tricky part with that is if we take time-zone into account or not :)
If we can do "Open now", that would be great. I was uncertain about how structured the data would be, but it seems OpenStreetMap have very strict guidelines about the format.
and I agree with what you're saying with regards to the postal address
Nice, also, having this folding option will allow us to hide the ugly spinner we show when fetching extra information.
So I played around a bit and will post 6 images... * Old Glassfabriken * New Glassfabriken, unexpanded * New Glassfabriken, expanded * Old Paris * New Paris, unexpanded * New Paris, expanded I have used icons. But probably not the ones we want to use in the end.
Created attachment 314279 [details] Old Glassfabriken
Created attachment 314280 [details] New Glassfabriken, unexpanded
Created attachment 314281 [details] New Glassfabriken, expanded
Created attachment 314282 [details] Old Paris
Created attachment 314283 [details] New Paris, unexpanded
Created attachment 314285 [details] New Paris, expanded
Not sure if having the expand button aligned with the share, route, and favorite buttons could be a bit confusing. Also, I'm not sure how to represent the postal codes, in the Glassfabriken example, it might look like the postal code is somehow part of the street address (16, 2xx xx). Maybe having it on it's own line might be more clear, but I guess this can be a bit tricky, and is probably locallity-specific (as in which country the address is located).
Andreas, any comments?
I think the icons, while being nice and compact, are a bit too cryptic and hard to understand compared to a plain text label. Is the clock the local time? What does the symbol of the two people mean? Is that a group?
(In reply to Andreas Nilsson from comment #18) > I think the icons, while being nice and compact, are a bit too cryptic and > hard to understand compared to a plain text label. Is the clock the local > time? What does the symbol of the two people mean? Is that a group? Yes, maybe (I just chose the best icons in the icon theme atm was not meant to be the final icons). It was just a way to de-clutter and create structure. How about the general removing of data? I looked at google maps and figured we can remove a lot of things that are obvious from context. Like state/area/country that sort of things. They are still in the detail string in the search popover but not in the bubble.
(In reply to Jonas Danielsson from comment #19) > Yes, maybe (I just chose the best icons in the icon theme atm was not meant > to be the final icons). It was just a way to de-clutter and create structure. I meant that icons in themselves are hard to parse and less clear compared to text labels. Is it a layout problem or a cluttering problem you're trying to solve here? > How about the general removing of data? I looked at google maps and figured > we can remove a lot of things that are obvious from context. Like > state/area/country that sort of things. They are still in the detail string > in the search popover but not in the bubble. Yeah, I like that idea.
Created attachment 320098 [details] [review] Add expanded area to place bubble Trim the information shown by default and move extra data to an expanded area.
Created attachment 320099 [details] Cast of expanding bubbles
Created attachment 320121 [details] [review] placeFormatter: Include less Much is given by context.
Created attachment 320122 [details] [review] Add expanded area to place bubble Trim the information shown by default and move extra data to an expanded area.
Created attachment 320130 [details] [review] placeFormatter: Include less Much is given by context.
Created attachment 320131 [details] [review] Add expanded area to place bubble Trim the information shown by default and move extra data to an expanded area.
Created attachment 320133 [details] Cast of expanding bubbles
we can use 'i' icon (U+1F6C8, CIRCLED INFORMATION SOURCE) instead of an arrow, solves ambiguity in upward or downwards, also more intuitive and we can make it toggle like favorites button (maybe?)
Created attachment 320272 [details] Cast of bubble toggle-expand
Created attachment 320273 [details] [review] Add expanded area to place bubble Trim the information shown by default and move extra data to an expanded area.
Created attachment 320277 [details] [review] Add expanded area to place bubble Trim the information shown by default and move extra data to an expanded area.
Created attachment 320281 [details] [review] Add expanded area to place bubble Trim the information shown by default and move extra data to an expanded area.
Created attachment 320282 [details] Moved the icon to right
Review of attachment 320130 [details] [review]: LGTM
Attachment 320130 [details] pushed as e09f5d3 - placeFormatter: Include less Attachment 320281 [details] pushed as be83f47 - Add expanded area to place bubble