Trailz Update

It’s been a bit. But I can assure you we didn’t go on vacation. Quite the contrary.

Sam put on his white job-site helmet, rolled up the sleeves on his best gingham shirt, shimmied into his darkest pair of selvedge jeans and got to work architecting what will become our database. This will be where we store information that keeps track of the trails, steps, nodes and where the front-end requests that information from. Sam’s also working on the API to make them sing to each other in harmony. Our JSON structure will need to reflect the tree/node structure we’re currently working towards. Although we’ve been discussing the merits of other visualizations as well. Things that might lend themselves to the often chaotic nature of information gathering. We’re thinking that tree/node might be a little to straight forward.

(Side note: The vocabulary of what we’re doing is going to be important. Semantic clues are going to give the user a mental model of what’s going on. And the more clear the mental model, the less work they’ll have to do in order to start using the platform.)

I have been working on creating the Ux, front-end web development and learning d3.js, an extraordinary and powerful “data driven document” library that allows you create data visualizations like it ain’t no thang. Of course, that’s after you master it. At the current stage, I can confidently say that it is, in fact, a thang. But I’m getting there. And I’m enjoying it.

What we’re working towards is not the multi-view that we originally presented. That’s a long term goal. But for now we’ve condensed things down into a single view.

SingleView

This will be easier to understand the first time someone encounters it. And it still invokes the functionality and utility that we originally set out to create.


Cover image from http://www.adventurewomen.com/wp-content/uploads/2014/07/WP-Amazon-r.-aerial-view-through-rainforest-iStock_000001771644_Medium.jpg

Trailz Wireframes

Trailz (we’re taking suggestions for names…) is a project by myself and Sam Sadtler exploring better and more efficient collection and organization of the information you find and want to save on the internet. 

(header image from: http://www.adventure-journal.com)


It’s about that time of the term: mid. That means critiques, check-ins, and getting shit done. So for this week’s crit we presented the first serious set of wireframes/Ux documents.

Up until this point Sam and I have been talking about the purpose of the project, what we’d like to accomplish, and developing the codebase – essentially trying to get a sense of the what the thing is and get the basic functionality working. We’ve been so focused on the technology and the idea that we haven’t stepped back to think much about what the user experience is. And that’s really what we’re trying to improve on: the user experience of finding and saving information on the internet.

So here’s our first draft…

The Wireframes

This is the current state of your browser. Tabs. URLs. Images. Text. Video. Links to more of all of the above. Lots of information.

Some you want. Most you don’t.

Trailz_Ux-01

These are your bookmarks. It’s a mess. A tangle of nested folders. Search is “meh”…

Most of the great stuff you’ve saved is lost in the pile of info.

Trailz_Ux-03

Here’s your history. You’ve never looked at it. Unless you’re trying to get someone in trouble…

Trailz_Ux-08

Trailz is a Chrome extension that helps keep track of an organize the information you find online. It’s goal is to be useful for both directed search and free exploration. When you create a trail a sidebar appears and saves your current location, which appears as a node. New nodes are appended to the end of the list. Clicking on a node takes you to that site.

When a site (or information on a site is saved) Trailz automatically generates and saves a list of relevant, searchable keywords. This makes finding trails, pages, or info easier later. And will make nesting folders unnecessary later.

Trailz_Ux-04

Multi-valence nodes represent websites that you’ve saved multiple webpages within (e.g. www.site.com, www.site.com/about, www.site.com/imgs/coverart). Those nodes collapse and expand as needed. The filled-in node represents the page you’re currently on.

Trailz_Ux-06

You can have multiple trails open at one time, across tabs.

Trailz_Ux-07

If you don’t need to save an entire page, you can highlight text, select images or video and just save that information.

Trailz_Ux-09

Whatever you save ends up on a card within your trail. A “trailhead” view is a digest view of all the site and information you’ve saved. Here you can add/remove keywords, review information, make connections, annotate, and share.

Trailz_Ux-10

This “trailhead” view is the dashboard. It shows an overview of your trails and shows a bit of meta-data related to them.

Trailz_Ux-12

This view is a bit more dynamic. At a glance, it shows your saved nodes in a tree structure. You can see where your research intent or approach changed.

Trailz_Ux-13

Project Development Studio Update

Sam Sadtler and I continue our work on developing a smarter and more effective internet bookmarking system.


As of our first meeting, Sam and I divvied up the main components of the project. He’s taking the basic building blocks of the Chrome extension and (what we’ve been referring to as) the card structure. That’s just the combined information presented as a long-form node in the digest view of a trail. Things like URL, selected text and/or image, and user annotations. I’ve been working on implimenting a system to automatically capture relevent keywords from a bookmarked URL and create searchable tags.

I’m still wondering how I ended up with that task.

With Sam already fairly familiar with web development and javascript, I had a lot of catching up to do. (And that’s understating it.) So, I’ve been doing a lot of self-directed learning. Maybe too much. Who’s to say really? In the past two weeks I’ve worked my way through most of Dan Shiffman’s Programing A2Z course (big ups to Shiffman, as always), gotten much more comfortable with Javascript (ask me about callbacks), jQuery, node.js, reacquainted myself with HTML and CSS, and launched headfirst in SDKs and APIs with what’s probably going the secret sauce in our project, something called AlchemyAPI. It’s been a long couple of weeks. Productive, too.

At this point we’re on track to get on track any day now. It only took me half a day to build a prototype site and get Alchemy parsing URLs and returning keywords. Now I need to link the two and figure out an extensible pipeline that passes those keywords into a searchable database of bookmarks. Plus tie-in or refactor Sam’s work to start to bring everything all together.

I’m looking forward to another interesting, productive week.

Happy Trails?

Last week Sam and I met after a gentle nudge from Stefani. (Hi, Stefani. Thanks Stefani.)

We had a great two hour meeting over breakfast at a little Greek diner right in the neighborhood that Sam and I share. He had griddlecakes with syrup and crispy bacon. I had the breakfast special: two eggs (scrambled), home fries, toast (wheat) with jelly (grape; it’s all they have), and crispy bacon. We both had coffee. I take mine black. Sam likes his on the lighter side with a healthy addition of half and half. I got too many refills. He seemed like he had more self control.

We went back and forth for an hour or so outline ideas we were actively interested in pursuing and those that had long since disappeared into the smudged, greasy, folds of our notebooks. (Maybe his aren’t greasy. I can only speak for myself.  I tend to eat popcorn when I’m thinking.) Some of the ideas we pitched to each other were the same as the initial ideas we outlined in class. Some we came up with on the spot. Some seemed emergent from our shared interests.

We were both circling one theme in particular – organization in digital “space”. My ideas were more head-on aimed at this, Sam was rounding the corner with an idea that he had been thinking about for a while. Something similar to an idea I’ve been harboring re: internet bookmarks.

At their core the ideas were asking the same questions: Can we make better use of our internet browsing? Can we make the bookmarks we save (and often never go back to) more useful? How can we better follow our own process of searching, finding, and discovery on the internet. How can we continue to explore the promises of hypertext that Vannevar Bush presented in his seminal 1945 Atlantic article “As We May Think”?

Our idea, codenamed Trailz [sic], is a browser extension that traces your browsing path and helps you seamlessly capture and organize relevant information for easy reference later.

Functionality will (hopefully) include:

  • traceable search and link paths
  • material extraction (photo, video, text)
  • annotation
  • search by tag
  • path sharing
  • path editing

 

 

Project Development Studio Concepts

Header image generously (and auto-magically) provided by Ross Godwin’s word.camera.


I’m going to need a whole separate post to elucidate and probably work out the underlying thoughts behind these concepts. But for now, suffice it to say that I’d like to create several thematically-connected projects that explore the relationships between users and organization in digital “space.”

These are the first of hopefully many ideas that play with concepts of pattern, information, organization, data, structure, architecture, design, systems, notation, diagrams, semiotics, and ontology.

EcOSystem

This “operating system” assigns natural-world/biological characteristics to different file formats on a computer (e.g. .txt = migratory birds, folders = predatory hunters, .exe = mating mammals, etc…). The computer environment reorganizes itself to become a digital facsimile of a biological environment.

EcOSystem-01

QUAD

This is a continuation of a program that I began developing last year in Patrick Hebron’s Design Tool Studio. It’s a grid-based digital workspace that replaces the traditional desktop environment with a more flexible and useful tool.

FlexibleGrid-03

Mark->Up

An exploration into more efficient digital note-taking. How can we bend a text editor’s rules to allow us to compose text more like we compose thoughts?

MarkUp-05

Numerica10rder

A program that numerically organizes all of the binary data in a file.

Numerica10rder-04

Topographical Interface

This concept explores how a computer’s file structure might be mapped like a physical topography.

TopographicalInterface-02