We’ve been giving Shareabouts a lot of attention lately and have published quite a few releases. The CSS has been completely rewritten to improve the mobile experience and simplified to make customization easier. And some lingering layout bugs were squashed too. Here’s a summary of what we’ve been up to…
UI Refresh + Streamlined Workflow
On instances of Shareabouts running a version older than 3.7.0, you’ll see crosshairs letting you know where the pin will be dropped when you click the add-a-location button. The crosshairs were necessary for mobile devices because once you dropped the pin, there was no opportunity to reposition it while filling out the form. Seeing some locations added to the default map center made it clear to us that the workflow for adding locations on mobile wasn’t as intuitive as it should be.
So we got rid of the crosshairs altogether and now there’s one workflow for all devices: drop a pin, drag to position, complete the form. For this workflow to work on mobile, we ditched the full-height map in the mobile layout, in favor of a responsively-sized map that’s always accessible while filling out the form.
Old Shareabouts (left) vs New Shareabouts (right)
Previously, you had to wait for all the map data to load before you could use Shareabouts. But now we’re loading places onto the map asynchronously. This allows the map to load before the data, so the user can interact with the app while the data populates the map in paginated chunks of a configurable size. And the new progress bar lets users know when the map is complete.
Testing, Testing, Testing
We thoroughly tested Shareabouts recently with groups of users, and in all the popular (famous & infamous) browsers. We’re now pretty confident about our browser support. And the feedback we got from user testing was crucial in confirming our assumptions and driving decisions for future work. Here are a few stand-out issues we discovered in user testing and questions we’d like to explore…
- The concept of opening/closing pages can be a bit confusing—especially on mobile when the app loads with a start page already open. Do start pages need some sort of “Get started!” action button that closes the page?
- The add-a-location button could be more accessible (visible when pages or place details are open). How would this increase/effect submission?
- Signing in with Twitter/Facebook must be encouraged from the start. Users are less likely to do it the more interact with the app. What are the benefits of signing in and how can we leverage those to increase sign in?
- When you load the app with a URL that goes directly to a place, the map now zooms to an appropriate level. When you share a place, your friends can more easily spot it in the crowd.
- Content blocks have been added to the main template—which can be extended by flavors. No more overwriting
index.htmljust to add an image to the header or a legend to the sidebar. Upgrading just became much simpler.
- We’ve improved form validation with support for mobile browsers (and some support for IE8/9).
getOffsetCenterfunction is no more. The center of the map is always in the center of the map, allowing for major zooming & panning improvements.
What’s next for Shareabouts? We’d love to hear your feature suggestions.