Rejigging the OpenStreetMap browse page

Posted by mcld on 21 September 2013 in English (English)

On OpenStreetMap, I find the /browse/ pages really useful for getting a quick summary of an “object” in the map. It shows when it was edited, shows all the tags, etc.

However, I have two issues with it:

  • The use of space isn’t ideal. There’s plenty of unused space which I don’t think is entirely deliberate (of course whitespace is good sometimes) - and the interesting information often gets pushed down below the fold as a result.
  • The browse pages have enough information that they should be generally useful, not just as a diagnostic tool for mappers, but maybe for people who want to share the details of the pub they’re going to, or whatever. The main impediment to this is that the initial impact of the page is fairly unfriendly and technical.

I believe the layout can be rearranged in a way which doesn’t remove any of the information that mappers need, but which makes the browse pages more accessible and friendly and hopefully generally useful. This would encourage more casual users to see the tags we have, and… fix them :)

So the main objectives are:

  • Make the main heading a bit more approachable, making the “name” (where available) a bit more primary than it currently is.
  • Make the “Tags” section a little bit more visually primary (more approachable to newcomers than changeset).
  • Make the “last edited” info more compact - it doesn’t need to be a four-row tabulation, but can be as a sentence “Last edited [date] by [user], (version [v] in changeset [c])”. It makes sense to put the “View history” link at the end of this too. Also, it’s more approachable to have the last-edited-date converted to something like “2 months ago”, and for full info it’d be good to have the full date tooltippy.
  • Try not to do anything that prevents experienced mappers from getting a visual overview of the more technical info, such as history, XML link, edit links etc.

Work so far is in my github branch called “browsepage”.

I’ve written a bit more on my own blog including screenshots.

I really think the “Last edited N decades ago by Thor” is much more approachable than the current table of metadata. The other stuff I’ve done is less dramatic, but I like the way it gives a bit more priority to the tags and makes room for plenty of them in a screenful.

Comment from xeen on 21 September 2013 at 22:26

I like your suggestions and hope to see them merged at some point. It’s nice to see people contributing to the facelift. While at it: have you tried how it looks if the tags and their values were put in a table? I don’t necessarily mean to add borders to it, but rather align the tags/values on the equal sign. The reason I ask is that browse-pages are very similar to the history-ones and those need a face lift, too, and it would be teriffic if the designs would “match up”. (Also I once saw an history approach where changes were presented in a table, which was easier to read than the current approach). Anyway, I guess making the history page easy to read is a completely different undertaking so please do sumbit your patch once you’re satisfied with it – as I wrote before, I like it :)

Comment from Zartbitter on 22 September 2013 at 08:36

I like your suggestions, too. Your design looks cleaner than the original one. But as xeen wrote, having the tags aligned as in a table will be even better.

Login to leave a comment