UXDESIGN.CC
Abstraction, combination, relation: how to visualize structure
How can we create a tool that represents our thoughts — adding as little as possible and losing nothing?“The acts of the mind, wherein it exerts its power over its simple ideas, are chiefly these three: (1) Combining several simple ideas into one compound one; and thus all complex ideas are made. (2) The second is bringing two ideas, whether simple or complex, together, and setting them by one another, so as to take a view of them at once, without uniting them into one; by which way it gets all its ideas of relations. (3) The third is separating them from all other ideas that accompany them in their real existence: this is called abstraction: and thus all its general ideas are made.” — John Locke, An Essay Concerning Human UnderstandingEvery day, our ideas are twisted by software . We kneel at the computer and go through a set of incantations — instead it should come to us on our terms. How, then, might we build a tool actually shaped like human thought?Lock’s passage above is a helpful foundation for us to discuss my design for such a tool: Coeus. I might summarize, and reorder, to: abstraction, combination and relation.Locke’s model of thinkingAbstraction means purifying an idea, free from anything irrelevant. Combination means to take several things and make something new. Relation means to set things side by side and look at them together.A screenshot from Coeus, showing links between the word “Abstraction” and a word, between the word “Combination” and a sentence, and between the word “Relation” and the aforementioned link between “Combination” and a sentence.An abstraction might be to take the word “prove” in the quote from Richard II in the screenshot above, and separate and define it without reference to its font, color, medium, what computer you’re using.*1A screenshot from Coeus, showing links between the word “Abstraction” and a word.Combination might be to take the individual words “My,” “brain,” “I’ll,” “prove” etc. to form a new thing which is meaningful in itself, i.e. a line from a play.A screenshot from Coeus, showing links between the word “Abstraction” and a word, between the word “Combination” and a sentence.As for relation, take this paragraph and the one below: they are together, one following the other, but they are not the same paragraph. They invite the reader to think about their relationship, such as a sequence of ideas in the case of paragraphs.For an example more specific to Coeus, see the relationship between the word “Relation” and the aforementioned link in the screenshot below:A screenshot from Coeus, showing links between the word “Abstraction” and a word, between the word “Combination” and a sentence, and between the word “Relation” and the aforementioned link between “Combination” and a sentence.How to visualize relationshipsWe want to build a tool that can represent all Locke’s modes of thinking. Our application, Coeus, is an attempt. And I will start by discussing how it represents relationships, because — relationships being so underrepresented in our software — this is a novel feature.Much of this work is based on the thinking of Ted Nelson. I recommend his books Computer Lib/Dream Machines and Literary Machines. The idea of visibly connected text is Nelson’s; this specific implementation and storage system is mine. I recommend also Nelson’s website and YouTube channel.In HSM, relationships (or connections) take two forms:Links (also called hyperlinks), which connect two or more different things.*2Reuses (originally called transclusions by inventor Ted Nelson), which is when one thing appears in two or more different places.*3A link connects the things it contains, a transclusion connects the things that contain it.As a relationship puts two or more things together, and thus together in our attention. Therefore, for any relationship, we need to show:The two or more things that are relatedThe fact that for this relationship it is them and not others.*4To indicate that a given item — e.g. a paragraph, a sentence — is related to something else, we draw a box around it. We chose outlining because it is unlike the most common formatting choices, to reduce confusion. Bold, italics, underlining and highlighting are all quite common we use all of them, sometimes in combination, to show links on the Web.*5A screenshot from Coeus, showing three links: first a link from a paragraph, second a link from a word, third, a link from a sentence. Note that the sentence link must outline the sentence and nothing else.How, then, do we show that the things in the boxes are connected? We do this by drawing a line between them. For now this is probably the most simple and unobtrusive approach.A screenshot from Coeus, showing two links, one between the word and a sentence (shown by outlining the endpoints and drawing a line between them), and from another sentence; the other endpoint of the second link is not shown, therefore no line of connection.We need a way to distinguish between links and reuses.*6 For now, we display reuses with hatched and links with solid lines. There’s no special meaning to this: one had to be solid and the other hatched.A screenshot from Coeus, showing a an article by Ted Nelson on the right and an article by me on the left, with an paragraph from Nelson’s article reused (quoted) in mine. The reuse is shown by outlining the common portions and drawing a line between them, all hatched to distinguish between reuses and links.Coeus users are encouraged of course to reuse material and present the same material on their screen more than once in different contexts. Any link referencing an endpoint on screen more than once requires that all endpoints be outlined and connected.A screenshot from Coeus, showing a an article by Ted Nelson on the right and an article by me on the left, with an article from Nelson’s article reused in mine. The reuse is shown by outlining the common portions and drawing a line between them, all hatched to distinguish between reuses and links. There is also a link from the word “hypermedia” to the reused paragraph, as such the word hypermedia has a box around it, with lines connecting to both instances of the repeated paragraph.In Coeus, the user is permitted also to create a link including one or more other links. To display this, we connect to links by drawing the line to the middle of the line connecting their endpoints. I am excited for this feature: I might send you a link between two links, each link connecting two pieces of text. This might mean something like, “take a look at the relationship between these relationships.”*7A screenshot from Coeus, showing three articles. In the middle and on the right are two academic papers, with a link between a sentence in each. A word in the article on the left links to the first link, connecting to the line between the two sentences.There are a few more unanswered questions, but I hope this made clear how — with a few simple modes of visualization — we can display structure that has been, as yet, impossible to express.How?The outline of the visuals above skipped a lot of the details of how reuse and relationships actually work in our mind and in HSM, for the purposes of giving you a handle. Keep holding that handle.As noted above, relationships in HSM come in two types: Links and reuses.ReusesA reuse is when the same thing is in two places. For example, the same paragraph might appear in two different documents.But those two articles don’t contain the same chunk of characters that we call the paragraph. Instead the paragraph is uniquely identified and these two articles both call for it.Edit the paragraph in one place, and those edits will be shown everywhere else it exists. These edits are not “synced”; the contents of the paragraph have changed, thus wherever it is shown, it will change.*9This operation should replace much but not all copy-pasting: a company mission statement should always be reused, because you always want the latest version. Conversely, were you archiving a version of your mission statement, you should obviously copy.A screenshot from Coeus, showing a paragraph from the HSM messagine book reused in an article, signified by outlining each paragraph in a hatched box, connected with a hatched line, to show that they are the same.Ownership persists, meanwhile. I can add your paragraph to my document, but I can’t edit what’s in it (unless you give me permission).Mixing documents is easy: take anything from anywhere on HSM and reuse it (respecting intellectual property, like copyright and Creative Commons) to create “compound” or “dynamic” documents.Compare this with the task of combining a word document, an email and text from a webpage into a single medium. Depending on your end goal and the number of items — and wrestling with formatting and line breaks — it might take ten minutes.More importantly, the combined item in HSM is alive. It naturally changes when its parts change, unlike the dead data created when you copy and paste.LinksThen we have the link, the inverse of a reuse: where a reuse connects several pieces of writing because it is in both, a link connects several pieces of writing because it contains both.If something is linked, whenever it is on screen in Coeus, the user can see how it is connected. Because links are displayed as discussed above, users can call up corpuses of articles, books, fragments, links, and visualize the network of information.A screenshot of Coeus, showing a paragraph from Wikipedia on Lugwig van Beethoven, with links from Beethoven to Mozart and from Beethoven to Haydn.Links are named and uniquely identified, meaning that we can search and filter them. Most information searches today start by reading articles then following links: with Coeus, you could start by finding an interesting link — signifying, say, an interesting analogy, then read the articles it connects.What do links mean?On the Web, links are visible only from one direction. If I link from my website to an article on Wikipedia, if I visit the Wikipedia article there is no evidence of the link. Web link thus mean something like “check this out.” This is a pixel in the image of possibility for what links can be.So what do links mean?HSM takes no position on this, beyond the fact that links are a way to show that several things are related. Our minds do the rest.Links can mean any of the following and more:Similarity/analogy —when things have a similar character, structure, etc.Implication — when one thing follows anotherContradiction — when one thing never follows anotherComparison — rather than stating that things are similar, a comparison invites the reader to identify similarities and differencesNavigation —“go here next”Dependency —“this can only happen after this” or “this thing needs this thing to work”Influence — when a change in one thing will call a change in another thingChange — “this becomes this”Why?Relationships put things together, that we might think about them together. When you store relationships and can search them in themselves and by what they connect, you are running your hand through the waters of our literary civilization. We cannot do this in the status quo, but we can with Coeus.I am drawn to connections because our society is unnerved by them. The barriers of the covers of books and the edges of pages keep some ideas in and some out: links kick down these barriers.The implicit norms of our literature suggest that there is only one way to read a text, only one point of view is sanctioned. I mean “point of view” literally, as in how you look at text: what’s at the start, what’s next, what’s at the end, what’s in what’s out.These boundaries are useful: it’s what I’m doing right now. I’m trying to get you to understand my idea, and I want to walk you through it. This is, of course, Locke’s combination: I am creating my article by combining words into sentences, sentences into paragraphs, etc. — these words, sentences, paragraphs and no others.But it would be depressing were this really the end; rather:Users (including the author) should be able to annotate any piece of writing for private or public purposes.They should be able to form links between a given piece of writing and others.Users should, with the correct permissions, be able to reuse writing — their own, others’ — including and beyond quotation.Connections carry risk: when your writing is open to be connected, it is open to ridicule and to glory. This seems to be a similar tradeoff to that of free speech and open societies, in which you can combine innumerable things, people and ideas.Locke noted that the act of making connections doesn’t combine the things connected into a new thing: two sentences, linked, don’t become one sentence. The link is just an invitation to look at things together.This throws up many doubts:What does this mean?What is the nature of this relationship?How much of this other text should I read?What if there are more links in the other text?Ted Nelson tells a particularly illustrative story, from his work on hypertext at Brown university. A colleague came to him, insisting that any hypertext document should only have one outbound link. Any more would be too much for the poor user to manage.Poking fun at this individual would be missing the point: we all underestimate the flexibility and capacity of people all the time. We even have nauseating folk sayings about doing so for a living.I think we should reach for this fear and try to understand it.Our fear is likely implicated in the poor implementation of relationships that we accept from the Web. Web links are stored in the webpage code and are therefore visible only from the page where they’re stored, not to which they point. In the Web world, getting a sense of all links is impossible, requiring visiting every webpage sequentially, when we could already have a database of all links if we had a plan from the start.Understanding — then getting over — this fear could mean minds more widely opened, ideas sharpened, vistas revealed.Abstraction and combinationI began with relationships because they are visually novel, but our story starts with abstract things combined into more complex things.HSM is special because it lets you store text as an abstraction. In HSM, text is stored as it is stored in the mind. Everything that matters to the user is, so to speak, a thing in itself.How do we achieve this?IdentityIdentity is the answer to the question:How do we set things up such that everything that matters to the user can be called for:In its entiretyWith nothing elseIncluding the latest updatesWhile being sensitive to the capabilities of the user’s system?*8You might call this, loosely, a function: the input is the identity of some piece of text, the output being the text satisfying the criteria above. At any given point in time and for a given user, the function has one output.This is the foundation of HSM: to store text in a way that uniquely identifies everything that matters to the user. Given a unique identity, the user can get what they want.Compare this to the status quo: If I wanted to send you the first line of Abraham Lincoln’s Gettysburg address, I would need either to:Send a webpage such as linked above and say, “Go to paragraph six,” which would would violate rule 2, 3 and 4.*9Copy and send somehow, which would often violate rule 2 (due to extraneous formatting), 3 (this will be dead text, never again to be updated), and perhaps even 4.I mean to say that the word “liberty” in the Gettysburg address is unique:Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. [emphasis mine]When I say something like, “when Lincoln says ‘liberty’” I am not referring to the word liberty also in the Declaration, or any other instance. I mean that word in and only in the Gettysburg address. It’s natural therefore that we give any unique piece of text a unique identity.CombinationCombination in HSM is simply the act of assigning a new identity to a list of existing identities, such as a list of words in a new sentence. Given this identity, we can see what words are in the sentence, and where the sentence is (possibly in more than one place).*10FormattingWe need to abstract away from numerous encumbrances affixed by word processors. For example, by default, most word processors presume to:Break writing into a series of pagesMake you choose a font and text size (or more precisely chose for you, and you can change it or live with it)With email and PDF as accomplices, have us wrestle pointless line breaksPlain text editors are better at much of this, but they lack important features available only in word processors, like tables, tables of contents, footnotes, headings, etc.Painfully, many such applications make no distinction between formatting and structure: if you past a table “without formatting” into many word processors, it will paste the text without formatting, and without the table.The table is to the application “formatting” — it’s not, it’s structure. There’s no way to create and manage sections; instead all we have are “headings” which are just big and bold text that only hint at actual structure.A text handling system should allow the user to abstract away from these things:Writing would be in pages only if the user requests it, such as for printingFonts should be optional. Of course, everything that goes on the screen is in a font, but the user deserves the right to put “I don’t care” or “default” under font. The same goes for size: absent pages, text size is largely a distraction, best handled by the user to achieve something consistently readable, or (if the writer needs to say something with size) consistently via “styles.”*11We need to abstract away from PDF and email.Don’t mistake this for anti-formatting or even anti-pagination bigotry (or even high-minded asceticism). I think these things are wonderful, but a. they are rarely necessary from the beginning, b. it is possible to get by without them entirely, and c. when you use them it should be your choice.Thus, text— which is today dead, endlessly and unnecessarily duplicated, and comes always with an entourage — will be both parsimonious and alive.ConclusionI think that many of the absurdities and struggles that our society faces are down to our having poor tools to express relationships. Text, which — trapped on paper and in paper simulation applications — is linear and hierarchical.Any document therefore, 1. destroys any connections not part of its priorities, 2. fixes the prejudices and perspectives of the author and their media organization in the form of what comes first and what is at the top of the hierarchy.If your not careful, this will give you a fixed perspective and a fixed mind.Therefore, in place of this stricture, I recommend richness of expression and flexibility. This is why I am creating HSM and Coeus.*1 I’m not saying that “thought” means precisely the same however it is rendered. Rather, the quality that is the same about thought regardless of its color, medium, etc. is its abstract nature.*2 I say two to make things easiest to approach: links can connect more than two things, and even just one thing (which would be more akin to a label) and a thing can even link back to itself (self-reference).*3 “Transclusions” is a great word, but I will stick with reuse for now to keep the absent-minded-professor feel as low as I can.*4 Coeus also shows the connection’s name, type and unique ID: I think this is important, but nonetheless extra.*5 This avoids a constant annoyance when working on the Web: the more visible the link, the more bizarre the formatting (and vice versa). This is to say nothing of formatting getting confused with links or formatting getting left over from link that is no longer there. Finally, the visualization of a link endpoint isn’t achieved on the level of regular text formatting. Rather the visuals are an overlayed (or “drawn”) on already formatted text.*6 It’s not sufficient to rely on the fact that a reuse is the same text, in that a link could be between the same words but not the same identity: say between “Liberty” in the Declaration of Independence and the Gettysburg address.*7 At this point in the development process, all links in HSM make no distinction between their endpoints, i.e. if I link from Haydn to Mozart, there’s no explicit difference between how the link treats the two concepts. Of course, there’s a host of reasons why one would want to, many referenced above: chains of causation, logical inference, dependency, etc. At a near point in the future, therefore, we will implement directionality, simply by marking one or more endpoints as different from their others in the same link. This relationship could be indicated in a numver of ways. For now, arrowheads seem the most clear way to express such a directional relationship. Of course, here, it can get political and particular where do we put the arrowhead? Beethoven looks to Haydn as a teacher, but Haydn passed his knowledge to Beethoven. This seems unavoidable. There’s another sense of “to” and “from” that relates to a sequence of travel. For instance, if I click a Web link, I go to where it points. So it feels like I’m going from here to there. In Coeus, the equivalent is always true: if I were there, I could see where to click to get “here”. As such, to and from could be any of a link’s endpoints, it depends only on where you are.*8 For example, a user might be working on an old machine capable only of ASCII, so an ASCII version should be sent.*9 This address is unlikely to be updated, but it might be, much other writing is updated all the time, even centuries old writing with new scholarship.*10 This is all stored independently: I might type out a given paragraph in one document, add it to another document, then remove it from the first. The paragraph will survive. Indeed I could delete all reference to it, and it would remain itself: searchable, linkable. If I want to delete it, I delete it.*11 The prime use for font size is expression, e.g. headings are bigger than body text, and size difference among headings indicates structure. This should be organized in a “normal, big, bigger” sort or relationship, with the normal size settled upon together with the user as something small but comfortable. The only justification for a fixed size is if you’re working with a fixed size of paper or in rare cases screen.Abstraction, combination, relation: how to visualize structure was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.