Trails is the upcoming main addition to ShiftSpace it is an an interface for mapping information in the world of ShiftSpace. the idea is that shift (ShiftSpace annotations/interventions/user-generated-content) left on different pages will be trailed together into information maps.
We have been drafting tons of mockups, trying to figure out how should it work, what would be compelling to use? What would be a way to sculpt Trails in a way that would facilitate the potential we see in it? What would be feasible to execute? What would be flexible enough to iterate on as we develop? and so on…
Here are a couple of images that shoe different takes on Trails, all had to be abandoned in the process for different reasons:
- These were early sketches from last year, when we thought of Trails as an individual space for mapping information across websites:
- Later in the process we decided Trails is a powerful concept and might be a much more powerful concept as something tied in to the whole system. We then attempted to have it be an interface available through the ShiftSpace console – trailing shifts created by users on different websites using different spaces (Notes, ImageSwap, Highlights, SourceShift, and so on…). These were some sketches or it:
- We constantly give presentations of ShiftSpace, which gets more people involved and allow us to test the ideas and get feedback from the audience. In order for us to present the concept of Trails, we had toprovide a conceptual mockup, so we made a couple of them, like this one:
- We really liked the way the website thumbnails kinda show the whole picture – illustrating the trails and providing a preview to the website. We thought that might actually be an interesting interface. Research have revealed there are a couple of venues we can pursue to achieve a database of webpage thumbnails. One was an open-source software running on a server, other was an open-source thumbnails directory, another option was WebSnapr or Snap Preview Anywhere, proprietary services which provides APIs to use their thumbnails with certain restrictions.
We actually contacted Snap and set the terms to an optional collaboration.
- On the interface front it was still not going very well, it seemed like even the minimal size offered by Snap was too big for us and doesn’t allow us much flexibility, the mockups didn’t seem to hit a breakthrough either:
- With ITP’s thesis getting near we decided to retreat to something simpler and more feasible in the given timeframe. The list view model is simpler to develop and is more scalable than the thumbnail based map views. We developed this:
- it even allowed us to maybe support thumbnail previews further don the line of development:
That’s as far as we got last week. We felt the trail view is a good and feasible solution, one we can definitely achieve by thesis time and while it is very simple, might allow us to learn more about trails towards future developments.
Yet, when we sat to work on it we encountered an unexpected problem. It was hard for us to work on it simply because it didn’t really excited us. It was allowing us to have the functionality we wanted but not the kind of user-experience we wanted. We decided to aim for high after all… Dan found this simple and powerful technology using Canvas Tag to generate page thumbnails on the fly on the client side (who said Firefox is not a good browser?), We also found a couple of Firefox extensions using it (like Tab Preview). So using it we might practically allow the user to easily browse through a visual history of her browsing without compromising her privacy(!).
Dan also came up with an idea for the interface that got me all excited about giving it another fresh attempt, one which we’re quite excited about now. Here’s a full user scenario of the interface we’re working on:
- The user will see the Trails icons in the console where she usually launches the shifts from:
- Hovering the empty icon, which means this shift is currently not trailed, allows you to start a trail from this shift:
- Hovering the empty icon, which means this shift there are trails available for browsing that use this shift as one of their nodes, allows you to browse existing trails or to start your own new trail using this shift:
- When the user chooses to start a new trail she enters the trail editor. The shift she just ‘came from’ is placed on the stage and a visual history of her shift creation is presented to her. This menu can also present a visual history of the latest browsed shifts (not necessarily authored by the trail’s author) or history of the latest pages browsed, even if those have not been shifted (Trails would allow to include unshifted pages too – using an ‘anchor shift’ only for the sake of trailing). When hovering a thumbnail, it moves a couple of pixels up and reveals the url of the page it was left on:
- When clicked/dragged to the stage, the thumbnail shrinks to 50% it’s size and is now ready for trailing:
- hovering any thumbnail on the stage resizes it back to 100% and reveals two icon: the trail icon and the shift icon:
- Hovering the Trail icon allows to start trailing (not sure about this hover effect, it will probably change soon…):
- After clicking the trail icon, a vector line (using Canvas Tag) is drawn from the shift icon to the point of the mouse position:
- Second click (or should it be drag+drop, or both? what do you think?) on the trail’s addressed shift trails them. Now we have a trail consisting of two shifts. Yay!
- And we can continue this process until we’re satisfied with our trail, dragging and dropping the thumbnails allows us to position them the way we want, making the composition of the trails a part of the authorship:
- Let’s give it a name, and save it (we can always come back and and continue authoring it later):
- We can now browse this trail, this is the way other users will see it too. Hovering the thumbnail, and then the shift icon gives us more information on the shift. Clicking it will take us there and open the shift automatically on the page:
We are still working the interface through, but we have a good feeling about it and are excited about working on it. I will keep updating this post as we iterate through the design and according to feedbacks I might get.