For the past month, we've had our heads down on a series of incremental improvements to OpenStreetMap.org. This included a new sign up workflow, an improved map UI, a new data export screen and a full-featured 1.1 version of iD. Our goal for each one of those was to tighten the overall impression of the site and improve the experience for new contributors.
Saman presented at State of the Map US a sweeping vision for a ground-up redesign of OpenStreetMap.org, which got people fired up about thinking and talking about what the site could be. To match the pace of the project and find out early what works and what doesn’t, we have been taking an incremental approach to implementation, focusing on bite-sized improvements with big impact.
Here is an overview of the changes that were rolled out on OpenStreetMap.org and what is still to come.
Rolled Out
Form clean up. We replaced table-based layouts with CSS and introduced a common clean design, consistent margins and custom buttons to forms across the site. This instantly improved the impression of many screens on OpenStreetMap: sign up forms, comment forms, user settings, messaging UI and more.
New map controls. Over time, map controls like zoomers, layer switchers, and map key grew into a clutter surrounding the front page map. This change consolidated map controls into a single UI on the top right of the map, clarifing map interaction and freeing up valuable real estate on the screen.
Redesigned share/export UIs. Map permalinks, HTML embed, and image export features can be all found now within the "Share" panel of the new map UI. Before, this functionality was part of the data export panel. We've also added the often-requested ability to share links which include a marker.
With space freed up in the Export sidebar, we've added information about sources for OpenStreetMap bulk data - making data export functionality easier to find.
Hash-based permalinks. OpenStreetMap.org's URL now tracks the location of the map constantly with leaflet-hash. This means you can easily bookmark your location, and share it simply by copying the URL from the address bar.
iD 1.1. The iD 1.1 release brought important improvements that will allow it to replace the aging Potlatch 2 as the default web editor on OpenStreetMap. Specifically, 1.1 brings crucial performance improvements on Firefox and relation editing support, making it a full fledged editor for a broad audience.
Coming Soon
Improved sign up flow. This is a complete design review of the OpenStreetMap sign up process with the goal to create a more guided experience for new users. The account creation, contributor agreement, and confirmation pages have been redesigned and feature an adorable anthropomorphic globe by Saman.
The outdated and verbose welcome email was pared down to a single confirmation link. Once confirmed, the user lands on a welcome page that explains the basics of OpenStreetMap and encourages them to dive in and get started mapping. The starting point on the map is based on the HTML5 geolocation by default, but it can be also derived from location parameters from the referring URL. So, for example, Foursquare's "Edit OSM" button can link directly to a specific location on the map, and the sign up workflow will guide users smoothly through account creation and eventually place them at the expected location, ready to edit.
User menu. By replacing the list of links in the top left with a compact drop down menu, we can provide more functionality in a smaller, nicer looking package.
Still to Come
Next on our radar are a help landing page, a consolidation of the main page sidebar, and improvements to the site's responsiveness on mobile devices. Many of the changes build on each other, and all are designed to improve the onboarding experience and the overall impression of the site.
Between here and the upcoming State of the Map conference in Birmingham, UK we are going to be focused on these iterative improvements. We're looking forward to picking up a larger conversation about a vision for OpenStreetMap.org at the State of the Map - don't miss it!