Designing iD Alpha0 of the new OpenStreetMap editor iD launches with a new design
We launched the Alpha0 version of iD two weeks ago, and with it, came a host of design changes. At this point, the basics are in place and the project is in a good place to start further refinement.
There’s now a simple layout with a comprehensive icon set and consistent button styles. I tried to keep things clean and straightforward for now. We can refine things later where we need to:
We added custom cursors to make mouse interactions feel more intuitive:
We implemented tooltips for inline help:
Map features, which are rendered in SVG, have been refined. I tried to make sure the markers, nodes, and ways were big enough to easily click and modify, but not so intrusive as to obscure the map. We added special hover and active states to make it clear when an element is selected or can be interacted with:
There’s a consistent style for modals that we use when we need to provide the user with more information or when an action is required:
We approached the project collaboratively: I started with a full mock-up of the application:
Which allowed me to easily try ideas out before implementing them:
Once I had a concept down I was happy with, I made issues in the issue tracker. Tom, John and I would refine the concepts, then we’d start on implementation. If the task was simple, like restyling buttons, I did most of the work myself. It took a while to get the hang of editing the DOM with d3.js, but now I can work with it more or less as though it’s HTML.
Shortcomings of the current design and plans for the future
iD is a functioning editor, but it’s far from finished.
For starters, the layout isn’t quite polished yet. Some parts of the site are flexible, others are fixed width. I’d love to implement a more cohesive system so elements of the UI fit together on a stronger grid. Right now the footer links feel a little too tacked on, and the tag inspector needs to be more carefully positioned and needs to have its behavior refined.
The built-in tag reference still has a long way to go before its as useful as it could be. There’s a issue on the topic open right now.
The SVG styles for map data are close, but still not complete. I’d love to have more consistent styles for selection across buildings, areas, and streets.
The most important & challenging design task that is yet to be tackled, is an easy to use preset interface for users who aren’t familiar with OSM’s tagging system. Discussion on the topic has already begun.
Lastly, we need a better onboarding experience for new users. There are a few ways to approach this: Do we want to create a pop-based step-by-step walkthrough? A help page? Should we simply try to make the interface more intuitive and the existing tooltips stronger so we don’t even need a walkthrough?
Over the course of the next few weeks, I will be working together with other iD contributors to refine existing concepts, propose new ideas, and help make sure everything’s implemented properly.
Join the design conversation by creating issues or providing input on the issue tracker. Or, if you’re feeling ambitious, fork the project and start playing around with the SVG source files! For questions you can always find me and other contributors on #ideditor on irc.oftc.net.
Devlogging work on the OpenStreetMap project by the MapBox team.
Much of this work is currently focused on improvements to OpenStreetMap funded by the Knight Foundation