You are not logged in.

#1 2011-03-16 22:52:49

beejamin
Member
Registered: 2011-03-16
Posts: 5

OSM website UI concept...

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
OSM Logo concept
OSM Logo concept

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

Thanks!

Offline

#2 2011-03-17 00:42:45

Richard
Member
From: Charlbury, UK
Registered: 2007-04-24
Posts: 415
Website

Re: OSM website UI concept...

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. smile

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. sad

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

Offline

#3 2011-03-17 01:07:29

JoshD
Member
Registered: 2011-03-02
Posts: 17

Re: OSM website UI concept...

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. wink

Offline

#4 2011-03-17 03:36:48

beejamin
Member
Registered: 2011-03-16
Posts: 5

Re: OSM website UI concept...

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.

Offline

#5 2011-03-17 18:38:59

stephan75
Member
Registered: 2008-05-28
Posts: 2,888

Re: OSM website UI concept...

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??

Offline

#6 2011-03-18 01:59:19

beejamin
Member
Registered: 2011-03-16
Posts: 5

Re: OSM website UI concept...

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.

Offline

#7 2011-03-18 12:03:57

Richard
Member
From: Charlbury, UK
Registered: 2007-04-24
Posts: 415
Website

Re: OSM website UI concept...

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!

Offline

#8 2011-03-18 13:04:32

beejamin
Member
Registered: 2011-03-16
Posts: 5

Re: OSM website UI concept...

Richard wrote:

Good principle for cartography, too!

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

Offline

#9 2012-10-11 19:59:57

Paweł Paprota
Member
From: Zebrzydowice
Registered: 2012-05-02
Posts: 254
Website

Re: OSM website UI concept...

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)?

Offline

#10 2012-10-11 20:46:52

scai
Member
Registered: 2011-11-20
Posts: 166
Website

Re: OSM website UI concept...

+1

Offline

#11 2012-10-19 17:40:44

Paweł Paprota
Member
From: Zebrzydowice
Registered: 2012-05-02
Posts: 254
Website

Re: OSM website UI concept...

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

Offline

#12 2012-10-19 22:14:29

beejamin
Member
Registered: 2011-03-16
Posts: 5

Re: OSM website UI concept...

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.

Offline

#13 2012-10-19 22:20:01

Paweł Paprota
Member
From: Zebrzydowice
Registered: 2012-05-02
Posts: 254
Website

Re: OSM website UI concept...

I'm not sure what happened with the e-mail sad 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!

Offline

#14 2012-10-20 03:12:57

Paweł Paprota
Member
From: Zebrzydowice
Registered: 2012-05-02
Posts: 254
Website

Re: OSM website UI concept...

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.

Offline

#15 2012-10-21 10:55:09

Marqqs
Member
Registered: 2011-01-01
Posts: 724

Re: OSM website UI concept...

beejamin wrote:

So, what do you think?

Hi Ben,

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

Offline

#16 2012-10-21 23:31:13

Tordanik
Moderator
From: Germany
Registered: 2008-06-17
Posts: 2,708
Website

Re: OSM website UI concept...

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

However ...

Marqqs wrote:

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.


OSM in 3D: OSM2World

Offline

#17 2012-10-30 20:04:40

Harry Wood
Member
From: London UK
Registered: 2007-05-29
Posts: 147
Website

Re: OSM website UI concept...

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.

Offline

Board footer

Powered by FluxBB