Andy Matuschak
patreon
A nascent art direction for Orbit
🕑 Added 2020-07-07 16:47:20 +0000 UTC(You may have received a duplicate notification for this post: Patreon lost all the images in the last one, so I had to recreate it! Bluh…)
So far, I’ve been using Quantum Country’s design language for Orbit, just to help me focus on all the architectural work I’ve had to do. That was a useful constraint for a while, but Orbit’s almost ready for its first publications, so now it’s time to switch gears: how might Orbit’s visuals reinforce its ideas?
Orbit has two enormous visual design challenges.
First: Orbit initially appears as an embedded “guest” inside some other publication. As a guest, it must behave itself! It shouldn’t clash with the host’s styling choices; it shouldn’t overly distract from the surrounding content. On Quantum Country, we just used the same design language for the interactive prompts and for the book itself. You collect prompts on Quantum Country, then review them on Quantum Country. But the model for Orbit is that you collect prompts on Quantum Country (and other places), then you review them all, in aggregate, in Orbit. This is much trickier! The reader navigated to Our World in Data (or whatever), but then this weird “Orbit” thing in the article is asking them to sign up, and later they’re getting an email from Orbit asking them to do stuff. So Orbit needs to introduce itself as a distinct “partner” entity while you’re reading the host publication. Orbit’s a research platform… but given these constraints, it needs to have a “brand,” to feel something like a “product.”
The other challenge is more of an opportunity: how might Orbit use visual language to transcend the Spockian, educationalist tendencies of tools in this space? How might we emphasize “engaging more deeply with what matters to you,” not “how much trivia can I memorize”? Spaced repetition memory systems make memory a choice, but retention is not valuable for its own sake. Memory is valuable insofar as it helps people do whatever gives their lives meaning. Unfortunately, the dominant culture around memory systems leans heavily toward memory for its own sake. You’ll see people who try to remember every detail of everything they read (“just in case”), but without seriously engaging with the texts in any other way. One gets the sense that they’re terrified of ever “losing” anything; you see the same obsession drive many “note-taking” enthusiasts. I don’t want to serve or expand that culture. But early adopters for my work will often come from that culture. This is a real hazard.
My visual design chops are not up to these challenges, so I was thrilled to collaborate with the wonderful Nio Ono for a few weeks in June on art direction for Orbit. (My thanks to Taylor Rogalski for the introduction!) I should be very clear that Nio is the hero behind the work you’ll see here: I brought a compass, but she drew the map! I’ll need to walk these trails myself in the coming months, so I’m writing this post as an exercise—to more deeply understand and interpret these visual ideas by explaining them to others.
Before we dive in: I realize that many of you have never interacted with nascent design work! Let me share a few words about how to engage with this material. The purpose of work in this phase is to open doors, to find some fingerholds in the problem space, to create momentum. Since this is a visual exercise, it’s particularly about exploring how certain aesthetic approaches feel. You’ll see imagery that looks like screenshots of interfaces, and it’ll be tempting to interpret them concretely, as interfaces. They are, in one sense… but they’re really about trying to see visual language, in context. Squint your eyes a bit; pay less attention to “interface” and more attention to vibe. This exercise is about exploring the textured interplay of symbols, type, grid, color, etc. There’s an annealing process between these visual primitives and the interface they inhabit. Before this sprint, I’d partially defined Orbit’s interface, but I couldn’t go further without developing the visual language. Likewise, we’ve now spent some time on the visual language, but we can’t go much further without taking some time to push the interface structure forward using these ideas. The design will go around in circles, teetering between form and function, before things finally settle.
Ethos
What’s Orbit’s “personality”? What ethos is it trying to communicate? To give us a rough compass, we started with this aspirational trio of principles:
earnestness, ardor, curiosity — not: duty, instrumentalism, grinding
Orbit helps you deepen your relationship with whatever you care about most. The activities are largely cognitive, but your relationship to the material is emotional. It’s for ideas and imagery that you could talk about all night. Orbit’s for the stuff which gives your life meaning.
Orbit is not about eating your broccoli. It’s not for things you think you “should” be engaged with, things which require you to summon your willpower. It’s not “educational” in tone. Orbit results in learning, but the goal isn’t to learn: it’s to be able to do something that brings you meaning, in the world.
wu wei, effortlessness, “trust the process” — not: inboxes, graphs, knobs
Putting something in Orbit is like gardening. You plant the seeds; you trust that they will grow and mature. You’re not terribly concerned about the specifics of when or how often you’re going to see a given item. You feel a kind of lazy confidence that the timing will be vaguely reasonable; that over time you’ll internalize everything you add; that over time items will move to longer orbits so that they don’t overstay their welcome. Your Orbit never feels “too full.”
Your daily Orbit practice is like your daily meditation practice. You’re never “done,” exactly, and you don’t have a progress graph going up and to the right. Like your meditation practice, you don’t and can’t ask for the specific outcomes of a specific exercise. But you show up, and you follow the breath, and over time, you see more clearly.
Orbit is not an inbox which demands grooming. It’s not a red badge with a three-digit number. You don’t “dial in” your Orbit items. You don’t obsessively track the “progress” of any one item (though you do feel some broader arc of “progress”).
diligence, seriousness, agency — not: complacence, passivity, deference
Meditation involves effortlessness at one scale but diligence at another. You show up for practice every day and follow the instructions, trusting that the activities will help you become wiser without understanding the exact mechanism. But that doesn’t mean that meditation is easy! If you’re not engaging seriously, fifteen minutes can slip by without you clearly observing a single breath.
Likewise, Orbit involves both effortlessness and diligence. You show up to your daily session without specific expectations or demands, but you engage attentively with what you find there. Orbit is ultimately a tool for serious people. It’s about going deeper, understanding more clearly; it’s about dissatisfaction with prior methods, with just hoping you’ll remember to think about something.
Authors sculpt the Orbit experience by providing prompts, but Orbit is a tool you must wield for yourself. It expects and rewards your own agency—in writing your own prompts, in remixing those given to you, in ditching ones you don’t care about, in molding the system to your values.
Visual themes and inspiration
Those principles are in tension! Seriousness vs. effortlessness; curiosity vs. diligence; earnestness vs. “trust the process.” But there’s a real thread running through them. Here are a few highlights from a lengthy set of themes and inspirations.
Gravity is both effortless and inevitable. It’s serious yet invisible. Visually, this connotes heavy and contrasting weights, perhaps stolid kinetics.
Poster by Joseph Müller-Brockmann, 1958
Celestial mechanics are appropriately wondrous, “trust the process,” precise. The name “Orbit” naturally suggests this direction, of course.
Poster by Laura Csocsán for Tempus Futurum
Contrasting geometry echoes the theme of heavenly bodies, injects some notes of curiosity in the context of structured rigidity
Kenzo Hara for hy-phen.jp
Analogous color suggests the nostalgic ardor of retrofuturism.
Poster by Bo Lundberg
A core identifying graphic: the starburst
The Voyager and Pioneer probes carry a metal plate with this starburst, designed by astronomer Frank Drake:
It’s a map of the solar system relative to nearby pulsars. It’s quite striking visually, but it also encodes a great deal of information: the lengths represent relative distance; the hashes encode the pulsars’ periods.
This figure (and others from—ironically—astrology!) inspired Orbit’s central identity: an information-rich starburst figure. There’s no fixed “logo”: this shape changes each time it appears, providing data visualization and navigation affordances. It’s a reflection of each user’s individual actions over time, but it’s distinctive and consistent enough as a motif to act as a recognizable “brand” symbol.
The tapering strokes create an optical illusion of a haloed star in the negative center. Weighty lines surrounding empty space echo the effortless action of “wu wei.”
Functionally, the starburst visualizes of a collection of prompts—maybe a set you’re reviewing that day, or a given book’s prompts, or a folder of prompts you’ve made yourself. Each prompt is a stroke; each line’s length represents a prompt’s intervals. A denser starburst represents a larger collection of prompts.
In the context of a review session, the starburst becomes a kinetic radial progress indicator element, ticking clockwise with each completed prompt, using color to indicate completed items:
When visualizing large collections, we can emphasize the line “tips” rather than the strokes (left). In dense list contexts, the starburst can “unwrap” into a vertical stack of lines, each still representing one prompt (right).
Type
We explored a variety of geometric sans serifs but ultimately fell in love with Dr, an oddball from Production Type. It’s all about contrasts: circles and rectangles; heavy lines and negative space; super-contrasting proportions. It’s distinctive but flexible enough to work with many host publication styles. We can scale the weights up and down with the type size to maintain a consistent stroke:
Notice also the grid structure: there’s a disciplined rhythm to this layout. A sense of “ruled” pages carries the diligence and effortless action themes.
In the images above, we see some semblance of interface begin to take shape, but as I mentioned earlier, these aren’t trying to be “screenshots”: they’re here to explore proportion and hierarchy.
For a logotype, we’d like something which echoes the bold geometry of Dr, but with enough distinctive details to stand on its own. It shouldn’t depend on the starburst for identifiability. This is the current favorite, a riff Nio drew on Herbus:
The dominant “o” keeps the focus on circles and the celestial theme; the “r-b” ligature continues that circular motion. The rectilinear “i-t” composition contrasts distinctively with the curved forms.
Iconography
It’s hard to get far with icon design when Orbit’s interface is this nascent: we don’t yet understand what all the core actions are and how they might be arranged. But Nio observed that there’s an interesting opportunity for icons to reflect the geometric type, the tapering strokes of the starburst, and the emphasis on negative space. This collage shows how “add”, “next,” “close,” and other common actions might consistently carry the visual language we’ve already defined.
Orbit does have one unusual core action we do understand well: revealing a prompt’s answer. That action presents an opportunity to do something unique and memorable—see the “eye” at right above.
Color
Reviewing prompts in Anki can feel a bit like driving on miles of straight, unchanging roads through endless, flat fields. Color offers an opportunity to introduce some dynamism. Since the rest of our visual elements have been fairly austere and disciplined, color is also a chance to underscore that first theme—passion, excitement, curiosity.
Nio constructed a color wheel which rewards surprising, apparently-anarchic combinations. (It also, somehow, maintains WCAG-accessible contrast in most useful combinations?!?)
In this rendering, the idea is that the interface’s color scheme changes throughout the day, reinforcing the ritual notion of the review session. Perhaps if you open Orbit in the morning you’ll see orange tones, in the evening rich purples. The starburst color feels unpredictable, but it follows a simple structure: backgrounds are drawn from the inner ring of the color wheel; the starburst color is the outer spot one notch counter-clockwise (a close analogous hue).
Another exciting potential use of color is to represent source contexts. That is: Quantum Country is purple, so maybe whenever prompts from Quantum Country come up in your review session, you see a splash of purple between the blue of Our World in Data and the yellow of a Tufte book. Spaced repetition prompts can feel quite atomized and detached from the original thing you actually cared about; this approach to color can reinforce the original emotional context.
The accents here play with a variety of hue angles, from analogous to quaternary to complementary. Is it too much? Maybe! This is what I was alluding to earlier: you really can’t tell in a static presentation like this. Bold solutions often feel much too aggressive “at rest” but exciting when “in motion.” If you tone graphic choices down to feel comfortable “at rest,” you’ll end up with something anodyne. I’ll have to actually live with it for a while to know.
The images above are depicting the in-app Orbit review experience—the place you go to review all the prompts you’ve collected from a variety of places. But as I mentioned at the start, Orbit must “behave itself” when embedded within host publications. We almost certainly can’t get away with these aggressive colors in that context, and we probably shouldn’t even try: review areas shouldn’t drag your gaze away from the surrounding prose.
But that’s OK. The same approach can be applied in a much more restrained fashion. Perhaps when viewed within Quantum Country, the same colors are used with restraint, but enough to create a connection with bolder use in the Orbit app.
Note that we emphasize the complementary green rather than the host purple, since our wheel’s purple may not quite match the host’s brand color. The background wash is a desaturated triadic relative.
I expect authors will ultimately need some presentation knobs for the embedded context. A design which feels balanced in one site will feel overwhelming in another. Will people be satisfied with choosing from Orbit’s color wheel, rather than using their precise brand color? Probably a monochromatic option should be available, particularly for places where the “brand color” is monochrome, like gwern.net.
My sprint with Nio is over, so the next steps are on my shoulders. I’ll now bring this visual language to life. I’ll use it for my daily SRS practice, and I’ll prototype how it behaves in various host publication contexts. I’m sure lots of things will break, lots of new questions will be raised, etc etc.
The platform’s making lots of progress week over week. I’d targeted the end of July for the first articles with Orbit prompts being publishable, and I still think that’s not wildly wrong. I’m looking forward to having more bandwidth to work with author-collaborators.
(Incidentally: “Orbit prompts”… are they “Bits”? Premature, maybe.)
In a real sense, if you enjoyed this work, you have yourselves to thank for it: I’m still operating in the red, but your collective patronage has slowed the burn enough that I can intermittently engage professionals like Nio. In fact, an upcoming post will share another exciting project with a different visual collaborator.
Comments
Andy Matuschak
Uh oh! Thanks for letting me know: if you're experiencing this, I'm sure others are too. I hope it's a matter of contrast ratios—I've been toning those down in recent iterations of the interface.
emmy
I still really like the art direction and your thought process around it. I'm confident that without the tapering it wouldn't hurt my eyes. I feel like I'm also getting used to it the more I look at it.
emmy
https://www.optimax.co.uk/blog/patterns-stripes-hurt-eyes/ The wavy image in this article also makes my eyes uncomfortable. Thus it is proven that I am not insane.
emmy
The starburst designs are physically uncomfortable for me to look at to varying extents, especially the one you use as your Patreon header. Feels like the center part lingers in my vision after I look away. The center also flickers weirdly while scrolling (I'm sure there's some weird technical explanation for this). I realize this is bizarre feedback and I feel like an insane person writing it.
Love where this is headed and the principles by which you are creating. As one who meditates I can appreciate the be-ingness of this project over the emphasis on doing.
This is beyond cool. Thank you for opening up your design process with Nio, Andy — it’s inspiring to read about.
Andy Matuschak
No, users will definitely be able to make their own. But the model is that almost everyone will be introduced to this practice via mnemonic texts. (caveat: personal prompts won't be available in the first few months—there's a bunch of additional interactions to define and polish for that workflow)
Andy Matuschak
That's an interesting prompt—thank you! I've been wrestling with that problem from a different direction: how to "smear" the size of review sessions such that days feel consistent but never overwhelming. So if you technically have 150 prompts due Monday, but 0 due the rest of the week, and we think 50 prompts is an "ideal" session size, we may just show you 50 on Monday, then another 50 on the following two days. But a better frame may be "throughput": averaged over a 1-week period or something, you want to be reviewing more prompts than you're adding, weighted by their age. So if you want to review 25 a day in that example, that's actually fine, so long as you keep it up. I'm not quite sure how to communicate that legibly. Now, to your point: to what extent does it make sense to encourage people to go "above and beyond"? Well, from a memory perspective, it's unhelpful to review material when you already have strong recall. But if you're engaging with a set of writing prompts, it's a very different story. A better mental model might be an infinite feed, ranked by time parameter, and with some suggested minimum. I'm not sure how to represent that with the design language here, but my instinct is that we can make it work. You'll see some allusion to varying parameters for review sessions in the "home screen" screenshot demonstrating different "routines": the intuition is that some items (like recall prompts) are best suited for contexts like "standing in line," while others (like writing prompts) are best suited for long, focused contexts.
Andy Matuschak
That's a fun aesthetic—thank you for the reference!
Is it the case that only other authors can come up with cards in Orbit, or would we still be able to make our own?
Love this post! Thanks for unpacking your thinking around design. Regarding use of color, another element to play with could be to use subtle gradient shifts to indicate progress through questions. The IOS game desert golfing has a wonderful slow gradient shift as you move across the holes (Sped up example: https://www.youtube.com/watch?v=oEGAt8gjcXs). Moment to moment you don't notice the color changing but periodically you step back and notice the shift.
"In this rendering, the idea is that the interface’s color scheme changes throughout the day, reinforcing the ritual notion of the review session. Perhaps if you open Orbit in the morning you’ll see orange tones, in the evening rich purples." Super interesting, love this to provide a consistent stimulus to help people turn their practice into a routine! One question I would ask is, beyond encouraging some minimum amount of behavior, is there some way in the design that you could ask the user to "do this much or more"? https://roamresearch.com/#/app/Rob-Haisfield-Thinking-in-Public/page/R6tuxqpwv
Putting in a vote to call Orbit prompts "launches" -- and I love the way this is going. Thanks for sharing!
