Front Page Design

The OpenStreetMap front page (a.k.a "The Map") has really stood the test of time in many ways. It was designed in a bar in London by Tom Carden about 3 years ago and the CSS and HTML were done by Mikel Maron from that. Maybe it's time for a refresh. So the point of this page is to gauge if there is a need to refresh the front page and get it to communicate better and move design elements around or just leave it be. Feel free to hack on this page.

Note that there are plenty of other Minor UI Fixups needed elsewhere throughout the site (That's before we even consider the UI of the editing software).

Contents 1 Should the Front Page be redesigned? 1.1 If so, what should change? 1.2 What's good about the existing page? 1.3 What could be improved? 1.4 What design elements should be in the page? 1.5 What layout/colour schemes should be used? 2 SEO 2.1 Do we want to optimise for some other search terms? 2.2 If so, What terms? 3 Some designs 3.1 Green buttons 3.2 All at the top 3.3 Olive buttons 3.4 Side arrow buttons 3.5 Fat top bar 3.6 Big style selector 3.7 Portal Page 3.8 Comments 3.9 map layer experiments 4 Accessibility 5 See also

Should the Front Page be redesigned?

If so, what should change?

• Often mentioned: Even on 1024*768 full screen you have to scroll down to enter a search term. On smaller screen/window sizes you won't even see the search box. - Ulfl 09:08, 3 March 2009 (UTC)
  • But as the search box effectively doesn't work I am reluctant to make it any more prominent until we can expect that it can handle the current load, never mind the extra load that more prominence will bring. TomH 10:18, 3 March 2009 (UTC)

Search is the most important thing - it has to work effectively. --Markus 12:59, 3 March 2009 (UTC)

• • ... Finally done after more tan two years ... --Stephan75 20:45, 23 May 2011 (BST)

• The export / permalink features should merge, and include the ability to add a marker TomChance 09:40, 3 March 2009 (UTC)
  • I think we should avoid mixing up a redesign of what we have with adding enhancements like the ability to include a marker when exporting - we can do that at any time either in the current layout or a new one. TomH 10:20, 3 March 2009 (UTC)
    • Fair point, but worth keeping future features in mind to make sure the design can clearly accommodate them TomChance 12:27, 3 March 2009 (UTC)

sending a link with marker (or track!) is very important for users. --Markus 12:59, 3 March 2009 (UTC)

• • “link” could display a permanent link and HTML as it does with Google Maps and Multimap. This would be a familiar interface for many.—Sward 21:45, 3 March 2009 (UTC)
    • “Export” could be taken from the main view, and simply an advanced interface accessed via a more simple “link” interface. I have had people ask me how they can download map images even with the link in the main view right in front of their eyes, so this isn’t necessarily a good idea. If link and export are merged, wording such as “share” sounds a little more intuitive, something I might immediately gravitate to if I wanted to do either.—Sward 21:53, 3 March 2009 (UTC)

• Quick links to download the current view of the map in various formats on the main map view, avoiding the need to go through the export interface, would be nice. Similar to how Trac’s wiki lists the other formats that can be downloaded at the bottom of each page (more than just “plain text” if you add plugins for other formats).—Sward 22:00, 3 March 2009 (UTC)

• As with some of the mockups, the three tabs to do with the map (view, edit, export) should be grouped and much more prominent. TomChance 09:40, 3 March 2009 (UTC)

+1 --Markus 12:59, 3 March 2009 (UTC)

• Generally UI elements need to be grouped more logically, the mockups below are a step in the right direction but they still put items together that are unrelated. Here's a quick attempt at grouping:
  • View map / edit map / export map (major functions)
  • Search / change style / show map key / share current view (map view functions)
  • Shop, blog, news, wiki, about, diaries (miscellania to do with the project & community)
  • login / register (my account)
  • GPS traces (to go under the edit map tab, see other comment) TomChance 09:58, 3 March 2009 (UTC)

• Vertical space is at a premium, but I do think it's worth using some to get the search bar out of the side bar to the top(ish). Full screen button for the map would be good too. Chillly 11:34, 3 March 2009 (UTC)

• Most of the focus on a redesign are how the map is displayed. There's should be more the wider project as a whole. At present we have two link to "Blog" and "Help/Wiki". We should have
  • Space for news / donation drive
  • Space showing featured image / mapper / application
  • Events
  • Links to wiki, blogs, resources, community.

What's good about the existing page?

• The map is really big and prominent! TomChance 09:41, 3 March 2009 (UTC)
• The design is very similar to wikipedia, instantly conveying the idea that the map is editable wiki-style. This is important familiarity for any visitors who get the idea of wikipedia. Particularly important is having 'view' and 'edit' side-by-side as the first tabs, but also page layout and colour choices in general. -- Harry Wood
• Big map, Wikipedia-layout (familiary recognition value): Tabs, and maybe left bar. --Markus 12:59, 3 March 2009 (UTC)
• Most non-map stuff is located to the left, which fits well in widescreen. Putting more things above the map would make the map quite narrow. --Erik Lundin 12:53, 8 March 2009 (UTC)

What could be improved?

• The OpenLayers UI elements could be more prominent, as in mockups 1-3. TomChance 09:43, 3 March 2009 (UTC)

• More plain language! Words like 'permalink' are understood by bloggers and techies, but Google and Multimap both just use "link" with a little symbol, and CloudMade have "share", which will be understood by bloggers and the rest of the population. TomChance 09:51, 3 March 2009 (UTC)

+1 --Markus 12:59, 3 March 2009 (UTC)

• Multilingual support --PerroVerd 13:04, 3 March 2009 (UTC)

• OpenStreetBugs integration --Steffenvogel 13:24, 3 March 2009 (UTC)

• Simple & clean version for mobile devices --Steffenvogel 13:24, 3 March 2009 (UTC)

• Use the Zoom zoom zoom map library instead of openlayers, just because the zoom is cooler. Ivansanchez 13:59, 3 March 2009 (UTC)

• The tabs "GPS Traces" and "User Diaries" don't make sense as tabs because they are not alternative views of the map. I'd be inclined to have "Normal", "Cycle", "Edit" as tabs, then some other navigation interface for "Search results", "Map Key", "Export", "View Data" which controls the sidebar. It should probably default to the search layout with the text "OpenStreetMap is a free editable map..." where the results would be. --Rjmunro 00:04, 5 March 2009 (UTC)

• Less links - If you try to navigate without a mouse, you need over 20 tabs to reach "permalink".

• Accessibility! Use Bobby conform webdesign. --Lulu-Ann 20:00, 14 March 2010 (UTC)

What design elements should be in the page?

1. Language Selector! Avila.gas 18:02, 10 March 2011 (UTC)
2. view map
   1. search (guaranteed prominent at first sight on the upper left!)
   2. scale
   3. coordinates <ctrl-c>
   4. measurement tool
   5. set marker (with textbox)
   6. build a track by hand
   7. import a track
   8. map key (possibility to turn on/off)
   9. set route end marker i.e. a second marker. After this is set, a menu should appear where the user can choose a routing engine and / or routing options. Open source routing engines may not be production quality and / or may not support the complete planet, but that may change in the future and we don't want to change the user interface when that happens.
3. export map
   1. link the map with marker/track

I think this belongs in 'view map', you wouldn't think of sharing a link as exporting and it needs to be more prominent. TomChance 13:47, 3 March 2009 (UTC)

Agreed, it should be in the main place for browsing the map, and easily identifiable. I also go with changing “permalink” wording to “permanent link”, “link”, or “share”.—Sward 21:42, 3 March 2009 (UTC)

1. 1. send by mail (URL or PNG)
   2. export as different formats
2. contribute to map
   1. bug reports
   2. edit with Potlatch
   3. link to editing wiki page (JOSM, Merkaator, techniques, etc.)
3. Community

Changed from "wiki", just takes user straight to wiki front page to see news, events, etc. etc. TomChance 13:47, 3 March 2009 (UTC)

1. 1. what is OSM
   2. help
   3. getting involved
2. language
3. login

What layout/colour schemes should be used?

• Wikipedia-layout, OSM colours. --Markus 12:59, 3 March 2009 (UTC)
• Accessible for the color blind. --Lulu-Ann 20:01, 14 March 2010 (UTC)
• Try this bookmarklet on openstreetmap.org: javascript:var%20s=document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://dl.dropbox.com/u/12923490/Forums/rebuild.js';void(0); --Hind 13:40, 12 April 2011 (BST)

SEO

The other thing we can improve is OSMs search ranking (Search Engine Optimisation). If you search Google etc for "openstreetmap" you have no problem... but there are other words or phrases we could optimise the front page for like "free maps" or "make map".

Do we want to optimise for some other search terms?

We need to get http://gazetteer.openstreetmap.org/ working as an interconnected list of nodes with maps surrounding each one. That way people will find OSM when searching for things on the map, not just searching for "a map". --Rjmunro 14:02, 5 March 2009 (UTC)

If so, What terms?

• "free maps"

Steve 03:34, 3 March 2009 (UTC)Do map/maps plurals work the same when doing SEO?

• "free map"
• "make maps"
• "make map"
• "build map"
• "edit map"

Higgy 18:36, 8 March 2009 (UTC) Google Trends should help answer this. As 'free map' and 'free maps' are most popular by a long way it's best optimising for these. Get the terms into meta tags (title, description, keywords), a couple of paragraphs of text, h1, h2, etc.

Some designs

User:Steve asked CloudMade designers to have a quick hack around with the front page to see what it might look like. If we build a consensus then we can put a design brief to them and get something really nice out of it. Feel free to comment on what's good/bad about these hacks:

Green buttons

All at the top

Olive buttons

Side arrow buttons

Fat top bar

More recent design with accompanying blog post (and comments)

Big style selector

- Design from User:LastGrape with live mock-up and accompanying blog post (and comments)

Portal Page

This design is of a different concept than the previous ones on this page. It does not provide a map on the first page, but aims to provide an overview of OSM for newcomers. The map however, is only one click away and can be fullscreen (except for maybe a search and stuff). The design is based on this design.

Comments

'Thin top bar' is the best. It's a nice and clean design with a lot of space for our map. However it needs a link to the wiki, the layer selector should stay where it is currently (to keep the Openlayers look&feel). It should be investigated if it looks good to move the items in the bottom bar to the top bar to free even more space for the map or as an alternative display information about the item under the cursor in the bottom bar (this might put a big load on the server and should carefully considered). Perhaps the edit button should instead be a Tab next to "Map" to keep it wikipedia-like. "GPS Traces" could be hidden somewhere. --R2D2 12:02, 3 March 2009 (UTC)

+1 --Steffenvogel 13:26, 3 March 2009 (UTC)

The closeable yellow box with intro text is an interesting idea, because it would solve one of the most pressing problems, that the sidebar uses too much vertical space (You only see this problem when not logged-in). Obviously it should not appear when logged in, and also when passing parameters for showing a particular map. Trouble is, despite these measures, I imagine it might end up being annoying for regular vistors / OSMers. -- Harry Wood 12:03, 20 March 2009 (UTC)

I share Harry's concern, but think the problem can be solved if the box only pops up when you visit the page without any path after the host name and it remain closed (by setting a cookie) the first time the user closes it. Then you'd only have to see it once per computer/browser and you could still send location URLs to people without annoying them. -- Einarr 13:09, 29 July 2009 (UTC)

My favorite, personally, is the first row, it's not a drastic change, but it adds some nice color, and it keeps the Wikipedia layout. It was mentioned you wanted "Wikipedia-layout, OSM colours" -- Adrian L C (new developer)

map layer experiments

Ken Vermette's map layer experiments (click for fullsize).

top-left: most transparent controls, all white, black popout top-right: most transparent, mixed controls (button emphasis), white slideout middle-left: opaque controls, all-white, opaque slideout middle-right: opaque controls, mixed controls, more transparent slideout bottom-left: emphasis on draggable elements, more transparent slideout bottom-right: same as middle-right, but more opaque slider again

I've created several mockups of another GUI layout for the map layer specifically (not so much the remainder of the site), I don't want to hijack the page so I'll post it below; If there's a set that's liked, I'll be happy to slice and export it as early as within the week. The only major programmatic changes that would be required are moving around the buttons to compensate for the overlap they would have (imagemap?) the the possible addition of the "joystick" ball in the middle of the buttons, which might be used for freescrolling (a la 'Bing' maps) -- Ken Vermette (also new, HELLO EVERYONE!! :D ) 11 August 2010

Hi Ken. Welcome! 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. There are other more radical ideas for showing different layers on the page more prominently. Maybe one step at a time is a good idea.

The existing layer and zoom controls are implemented as part of OpenLayers, so I guess the suggestion of a freescrolling joystick control would be one to put to the OpenLayers developers (a separate but overlapping developmer community)

For something we can easily drop in to the osm front page what we'd actually need is an OpenLayers 'theme' I guess. At the moment we use the default OpenLayers theme with dark blue controls. Another nice one is this black theme from mapbox.com. Beyond the minor flower arranging considerations here, I particularly like their re-design of the '+' symbol. I think it shows the layers idea better. As a really minor step, we could adopt that but in blue.

-- Harry Wood 19:10, 5 November 2010 (UTC)

Accessibility

I have written a guide for blind users to download OSM XML Exports for use with LoroDux navigation from the Front Page using a screen reader. There is a problem to access the frame with the search result with the most common Screenreader JAWS. I am in contact with a JAWS developer and hope I can soon report how to fix the page so that it becomes fully accessible. If you have any questions, contact me. --Lulu-Ann 14:17, 10 June 2011 (BST)

See also

• UX
• User:Pumbur/Re