Now that iD, the open source map editor, is live on OpenStreetMap.org we are investing in the details to make editing the map even easier and more intuitive. We are days away from the new release of iD version 1.1, here is a preview of the new user interface improvements you can expect.
New hover state for previewing features. On hover, we hide buttons, form elements, and links for a distraction-free view.
We've done away with the slide-in sidebar, trading a bit of map space in order to provide a new way for users to interact with map features: hover over a feature, and you'll see a summary of its attributes before clicking. Once you click, the summary fields smoothly transition into editable form fields. The hover state is useful for quickly scanning a region of the map for missing or incorrect tags: a simple, easy task for new users looking to get their feet wet with OSM editing. The persistent sidebar also brings performance improvements as we no longer need to push the map over to make way for the sliding sidebar.
There are a few details to this interaction that I'm particularly proud of. In hover mode, forms with multiple options collapse into a single field, succinctly showing the correct value. Then, on click, that field expands to include all the options. Watch the transition on the "structure" field on the subway:
REXML could not parse this XML/HTML: <p><iframe class="vine-embed" src="https://vine.co/v/bY1h5g7V9HH/embed/simple" width="480" height="480" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script></p>
We're currently in the concepting stage for the "default" state - what do we show in the sidebar if the user isn't hovering over anything? There's an issue open about this now.
REXML could not parse this XML/HTML: <p>One of the other details we'll be rolling out with 1.1 is a more intuitive way for users to change the feature type on a feature that's already been defined. Just click on the icon in the header to get back to the full feature listing:<p> <p><iframe class="vine-embed" src="https://vine.co/v/bY1MDn2q0Ve/embed/simple" width="480" height="480" frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script></p> <p>This is small sample of some of the UI changes that are coming on the horizon for iD. From the beginning, one of our top priorities has been to make this tool as elegant and user-friendly as possible, and there's still plenty of work to do on those fronts. Expect tools for editing relations, a revamped save work flow, and more, soon.</p> <p>To give the most recent, cutting-edge iD build a test run, head to <a target="_blank" href='http://openstreetmap.us/iD/master/'>openstreetmap.us/iD/master</a>.<p>