OSM website UI concept...

beejamin · 2011-03-16T21:52:49.000Z

Hi all,

First, I’d better introduce myself: My name is Ben, and I’m a UI designer and web developer from Australia. I’ve been using the maps more and more, mostly through wikipedia referrals, and more recently for planning cycling routes around my home town.

While using the site, I’ve been thinking that there are some simple ways to simplify and improve the user interface. I’ve attached some concepts of what such a refresh could look like - these are very quick sketches, and of course, I have only my own knowledge of the site to go on. Still, I hope they show some of the potential for a streamlined interface, with a clearer structure and hierarchy. The concepts show a UI which would be a straightforward change from the existing version - they’re not a complete re-think, by any means.

OSM Logo concept

So, what do you think? Could someone point me to the right people to speak with?

Thanks!

Richard · 2011-03-16T23:42:45.000Z

Usually when I see this kind of thing I think “oh crap, not again”. But actually, this is probably the first one I’ve liked.

The forum is a useful resource but not a whole load of people read it. You could try talking to people on IRC (http://irc.openstreetmap.org/ or via an IRC client), or perhaps best of all would be to e-mail the Foundation directly. E-mail Steve Coast, he’s chairman of the Foundation and is always bellyaching about how it’d be good to improve the design. You could also post to the mailing lists, but be warned, they can be a bit of a bearpit and you’ll get some really clueless comments.

But I like that - would be good to see it taken up.

JoshD · 2011-03-17T00:07:29.000Z

Great! I love the look! If I could apply it as is I would. We’ve got lots of great developers working on OSM, but I haven’t seen much of a focus on the UI side of things. If this sort of thing gets adopted by OSM, maybe next you can work on the UI for a social networking part of the site.

beejamin · 2011-03-17T02:36:48.000Z

Thanks guys - I did try emailing the communications group, but got bounced, and couldn’t work out who better to send it to. I figured someone here would know.

Thanks for the kind words, too. I’ll email Steve - thanks.

stephan75 · 2011-03-17T17:38:59.000Z

One interesting wiki page about this topic can be:

http://wiki.openstreetmap.org/wiki/Front_Page_Design

Maybe some ideas are already there …

But what about some progress in this topic??

beejamin · 2011-03-18T00:59:19.000Z

Thanks for the link, Stephan - there are some very good ideas there, particularly the stuff about more logical grouping of controls, and additional functions like adding markers, etc.

The additional concepts shown in the wiki page are, to my eye, not a huge improvement on the existing site. They don’t really create any hierarchy of elements - so that the map UI controls, and the site controls are an equal weight, which makes it hard to concentrate on on set of controls, and ‘blur out’ the other. There are a lot of situations where lines and groupings are shown that don’t really add anything to the clarity of the page, too.

One thing I’ve tried to minimise is Chart Junk (http://en.wikipedia.org/wiki/Chartjunk). The rule of thumb I work to is: wherever you create a distinction (by changing background, outline, font type, weight, size or colour, proximity to other elements, etc), do it for a reason, and don’t use more distinction than you need to. This tends to keep UI’s ‘calmer’ and less cluttered looking, even though you’ve got just as many elements in view at once.

One thing suggested in the forum is *“It’s a good idea to focus on one particular element, because I think we may end up making iterative improvements to the front page design, rather than any big bang redesigns (possibly), and so design ideas like this could be considered separately.” * - I really disagree with that approach at this stage. There’s not really a strong, cohesive theme to the visual side of the UI at this stage - working piecemeal will only cause things to become more disconnected and confusing.

I would suggest setting up a flexible, extendible visual style that can be logically built up with new functionality - that’s what this concept is aimed at. If we can take the existing functionality, apply a good, solid, and simple theme to it, maybe it will be clearer where the problems and areas for improvement are. If we’ve got a good foundation, working iteratively can be much more effective.

Richard · 2011-03-18T11:03:57.000Z

The rule of thumb I work to is: wherever you create a distinction (by changing background, outline, font type, weight, size or colour, proximity to other elements, etc), do it for a reason, and don’t use more distinction than you need to.

Good principle for cartography, too!

beejamin · 2011-03-18T12:04:32.000Z

Richard:

Good principle for cartography, too!

You’re right - and it’s no coincidence!

Paweł_Paprota · 2012-10-11T18:59:57.000Z

Sorry for resurrecting this from the dead but I just love this incremental improvement over current design.

@beejamin: are you still interested in working together to put this into CSS/HTML and then into Rails (I am a developer)?

scai · 2012-10-11T19:46:52.000Z

+1

Paweł_Paprota · 2012-10-19T16:40:44.000Z

Unfortunately the author has not yet responded to my e-mails and forum messages…

beejamin · 2012-10-19T21:14:29.000Z

Hey Pawel! Not sure what happened - I replied to your email about a week ago. I’ll put the response here as well:

Hi Pawel,

Thanks for your message, mate - I’m sorry, I had completely forgotten about this concept, and gotten busy with work, you know how it goes!

Since I posted the concept, I’ve been doing Rails dev myself pretty much full time, so I’m much happier with that side of things than I was then.

I would really like to get this back off the ground - but I’m really short on available time at the moment. What I had planned to do was build the concept out into a clickable static prototype, and then hand it off to/work with a dev to get it all working. I can definitely still do that, if that sounds sensible to you?

I’ve been doing a lot of my prototyping in HAML/SASS/Compass - is that a good fit for the OSM project? Obviously we can output HTML regardless of the templating we use, but if we can use the actual HAML layouts/views, then so much the better.

Paweł_Paprota · 2012-10-19T21:20:01.000Z

I’m not sure what happened with the e-mail but anyway - WOW this is great news that you are still interested. I would gladly work with a clickable prototype of this layout to get it into Rails.

Unfortunately the OpenStreetmap.org Rails application uses ERB for templates but I can take care of integrating HTML/CSS if you don’t have time.

Let me know how you want to proceed.

Thanks again for responding!

Paweł_Paprota · 2012-10-20T02:12:57.000Z

Ben, I thought on how to approach this thing and the main question for me is - could you work with the existing HTML/CSS code and change it so that it works with the new design? I think it would be best and easiest way to integrate it as it would allow to minimize code changes which is always good and also allow for iterative rollout.

Marqqs · 2012-10-21T09:55:09.000Z

beejamin:

So, what do you think?

Hi Ben,

thanks for your work! I like the new design - especially the new logo.

Tordanik · 2012-10-21T22:31:13.000Z

It’s a good thing that people are looking into website UI improvements, and I’m looking forward to results.

However …

Marqqs:

I like the new design - especially the new logo.

I would not bundle a new logo with these design changes. We had a logo update only recently, so if anything it should be the last thing to deal with when all the work on the actual website is done, and should be discussed separately.

Of course, changing the logo would need community approval. Aside from the large emotional impact, new logos also affect the value of existing merchandising and third-party websites.

Harry_Wood · 2012-10-30T19:04:40.000Z

I took the liberty of uploading this design to the wiki here. I also had to give a it title… “Embossed framed”, which obviously doesn’t capture the whole concept behind it in two words, but hey… it’s a title. Feel free to change it.

Having one gallery of various ideas is already quite useful, but we need to tidy up the rest of that wiki page a bit.

I’ve also put your logo design on here. That’s another messy old wiki page which was actually an abandoned attempt at foundation logo design, but a lot of the designs ended up involving redesigning of the main OSM project logo. Anyway I agree with Tordanik that this might best be kept separate.