The development of the maps interface continues. A big part of this week was building out the database with MongoDB and expanding the API so that workspaces can be saved and retrieved, in addition to storing the individual maps. This project really focuses on creating and identifying relationship between multiple maps so I put the design iterations on hold until building out some of this infrastructural stuff. Now that I can save and load different configurations, it’s back to focusing on the interaction and information. When a group is selected, what is shown in the info panel? How to display and access different versions of a single workspace — does it auto-save, or can I bookmark important revisions?
The challenge of making 100 daily maps — or any creative project — is how to explore all the material generated in the process. How does the writing connect to the sketches connect to the initial brainstorm? How do you identify the ideas that weren’t pursued but latent with potential? How does one part of a project relate to another? Or relate to a different project entirely?
We often work using index cards taped to a wall. They’re large enough to capture a few sentences describing the central question; the interaction; a sketch — maybe a few frames of a storyboard or a rough wireframe; and a descriptive title. On the wall, surrounded by other cards, they’re like thumbnails in a typical ‘grid view’. They form groups with adjacent cards and can move around to form new relationships. For example, “Hand Drawn” (042) is part of the Hello Series, but also relates to other maps exploring the position of the body in space (“The ‘Oriented’ Self,” “Nine Spaces,” “Depth Drawing”). On a big wall, it’s easy to remake these groupings over and over.
However, it isn’t perfect. It’s difficult to return to previous states; you can’t double tap a card to get its ‘expanded’ view; relationships between cards have to be remembered; and it’s difficult for cards to exist in multiple groups simultaneously. What would a digital interface of this wall be like?
Are.na collection
Pinterest and Are.na serve as precedents for collection interfaces — but really, anything with an overall view coupled with a single-object detail view can serve as an example. However, these precedents don’t address the space and relationships between the whole and the single card. The ‘many’ view and detail view are extremes; there’s a thickness absent between these representations.
Technology creates the potential for objects to have multiple relationships. How can this multiplicity be seen together? Tags and categories are a typical way of identifying relationships, but interfaces tend to isolate them. In a detail view, you might see all the tags for an object, but when navigating to one of those tags, the other associated tags are momentarily forgotten.
Omnigraffle, the diagramming software, and Grasshopper, the parametric plugin for Rhino, also serve as relevant precedents in their grouping and linking functionality.
Known and Strange Places Interface
Using the ‘Known and Strange Places: 100 Maps’ project as a test case, we’re working on an exploratory interface. The ambition is to use it for:
Identifying and describing connections between the parts of a project;
Ordering and organizing those connections;
Viewing and editing connections in isolation as well as in relation to other connections;
Maintaining context at all levels of the interface; and,
Editing materials within a project as it continues to inform other work.
Over the past week, we’ve been sketching ideas and prototyping them in the browser.
Pop Up Details
The first prototype is a Pop-Up detail view. The first attempt falls into the problems described above: an abstracted grid view jumps to a detailed object view. Furthermore, the detail overlay obscures the context.
But, what happens when the details are draggable and moveable so that multiple objects can be seen in detail together?
The next step in this prototype is to add grouping functionality by making stacks with the detail-view objects. When an object-pop-up is dragged and placed on top of another pop-up, they form a group, appearing as stacked cards. The group can be named, reordered and described.
Split-Pop Up
Another iteration split the screen to prevent the obscuring of the context. As more objects were clicked in the grid view, the screen further subdivided.
In further iterations, each detailed aspect of the object was split into a separate panel to show more information associated with each object.
The next steps within this prototype are to allow for adjusting the individual panel sizes, move them around, and allow each panel to show information about a different project. A thumbnail from the grid panel can be dragged into one of the other panes, populating it with the corresponding information. This would allow for associating small aspects of different projects together.
Plans for the Week
The prototypes this past week focused on jumping from an abstracted many-object view to a detailed view. But critical to this interface is the space in-between — making groups and identifying the connections within them; that’s this week’s focus.
From January 10 to April 18th, I had a daily practice of mapmaking. The result is 100 days of known and strange places, or 100 days of interactive web maps, or 100 days of file exports, or 100 days of new walks, or…
The drawn line is linked to the camera’s position, rather than finger-position on the screen, therefore, the body is the drawing instrument. But objects, buildings, and people in the surrounding context also shape the drawing. To wind the path around a planter, one has to walk around the planter. To make a loop-de-loop, one has to stretch their arm up to the sky and then scrunch down to the ground.
Technicals
A continuous trail is made by drawing cylinders between spheres. Every time a new frame is read from the camera, a sphere is created and positioned 50 cm in front of the device. The previous position of the camera is saved so that a cylinder can then be drawn between the two points. The height of the cylinder is the distance between the previous and current positions.
Video Swap (074) randomly reshuffles the tiles of a video every five seconds to create a new composition of the same thing.
In reshuffling, expectations of continuity are challenged. The original composition of the frame is dominated by horizontals: the pavement, the grassy hill, the trees and sky. When these lines are fragmented, it becomes difficult to discern which pieces belonged where. It isn’t until people move through the frame that relative positions are understood.
Technicals
The map was built with p5.js as a website. Once the video is loaded, each frame is read as an image. Based on the number of subdivisions, the image is broken into a number of fragments using the image.get() function. The normal order of the cells is shuffled, and the fragmented images are placed according to the new locations.
