Posts

Lines become thought-space

/0 Comments/in /by

More thoughts on interface design… and fun with animated GIFs :)

Imagine that you’re looking at a large, complex network of connected nodes. As you hover over any line between two nodes, it draws the two nodes together, then splits and expands into a single thought-space enclosing its two seeds, thus:

Perpetual animated GIF showing two connected nodes, where the connecting line transitions into a circular bubble

A thought-space emerges from a line

On click, the single thought-space would enlarge so you could consider the two seed nodes and the descriptive resemblance in the centre.

…..

If you hover instead over a single node – say, one with three connections – you see a trio of connected thought-spaces emerge, like petals on a flower.

Perpetual animated GIF of a node connected to three others, where the connecting lines transition into circular bubbles

A trio of thought-spaces

Again, on click the view would enlarge.

…..

Once I’d animated those hand-drawn sketches, I thought my thinking about interface design would stop – at least until we’re actually building this baby. But no. Neurons kept firing; I developed a strong desire to visualise this thinking space in the simplest way, a line resoloving into a circle – or a circle-like pod thing.

So I fired up Processing and the online reference, and retrieved my neglected Processing textbook. It took me ages of fiddling and wondering why it was looking so skew-if to recall that the y axis starts at the top. Anyway, here it is – for your cognitive pleasure, the first born-digital animation of Sembl think-space – a pod:

A line transforms into a circle-like pod

It’d be way better if it faded gently out and then back to the line; as it is, it’s like a mouth that snaps shut just when you think it’s safe to explore :) But for now I’m spent.*

* Spent and yet, seeing a flip-book in my future…

Sketching data structure & interface

/7 Comments/in /by

Thinking about how in Sembl, the lines that connect things are not lines but, actually, circuits – because they are always already mutual, originating from and applying equally to both things – I started to imagine how the network of aggregated game data would look, and how you could interact with it to explore both the whole and its parts.

Pencil drawing of four ways of representing a network diagram, with the words 'A line resolves into a circle.'

In Sembl, node-connecting lines are actually circuits.

Lines between things could be spring-like. On hover, they could draw the two things closer and resolve into a circular facet or disc, perpendicular to the connecting line. You could click to enlarge the posited semblance.

In the next sketch I’m wondering if the data structure could really be this simple. Each semblance is linked to (its rating and) two things, which in turn have title/s and persistent identifiers (PIs).

Pencil drawing showing a resemblance and its rating between two things represented by their title/s and a persistent identifier

A resemblance and its rating are at the centre of two items comprising title/s and a link to their location.

The data is generated in the game and editable via a wiki, so we are also likely to capture metadata about who created it (username or IP address), and possibly also when, where etc – but those few fields form the foundation.