User Interfaces

You’ve stumbled upon my working notes. They’re kind of strange, so some context might help.

These notes are mostly written for myself: they’re roughly my thinking environment (Evergreen notes; My morning writing practice). But I’m sharing them publicly as an experiment (Work with the garage door up). If a note seems confusing or under-explained, it’s probably because I didn’t write it for you! Sorry—that’s sort of an essential tension of this experiment (Write notes for yourself by default, disregarding audience).

For now, there’s no index or navigational aids: you’ll need to follow a link to some starting point. You might be interested in §What’s top of mind.

From transactions to meetings, every event happens at a point or duration in time. Successful investigations need to understand how those events unfold, and how they’re linked.

KronoGraph is the first toolkit for scalable timeline visualizations that reveal patterns in time data.

The existing personal knowledge management tools are insufficient to help us process information, especially during web-based research.

The tree structure and unique file path inherited from analog metaphors encourage collection, not connection, of ideas.

They make it harder to reuse and cross-reference ideas, and easier to hoard information.

...Can building associations be more intuitive?
...Is playfulness possible?
...Can web discovery be an organic extension of the existing knowledge base?

Semilattice is a collection of system and interaction concepts for personal knowledge management tools.

• one of Research Themes at Ink&Switch
• UI should be just content, everything else directly manipulatable, any buttons and menus take up space that could be there for the actual data

Nutshell is a tool to make "expandable, embeddable explanations", like this! They can even be recursive. This lets your readers learn what they need, just-in-time, always-in-context.

What's more, you can embed explanations from other webpages and authors, even stuff written before Nutshell was made! This works because Nutshell doesn't require writing in a new format – just good ol' headings, paragraphs, and links. This way, you don't have to write all your expandable explanations from scratch: you can just build upon others', and others can build upon yours.

But why not links? Well, unlike links, Nutshell lets you include only the snippet you need, not the whole page. And instead of a jungle of new tabs, your reader stays on one page, keeping their flow of reading. Even if you interrupt a sentence, Nutshell recaps the sentence afterwards, so your reader never loses context.

Different they may seem, search, tags, folders, hyperlinks, and algorithmic recommendations are all really interface ideas trying to address the same fundamental problem: looking for the needle in an information haystack.

...When designing an interface for finding a note in a small pile of personal notes, or building an app to organize a small team’s working documents, most of the “finding stuff” interface ideas are in play. It’s in these situations where I want to make the argument: prefer interfaces that let the user incrementally move towards the right answer over direct search.

Humans are much better at choosing between a few options than conjuring an answer from scratch. We’re also much better at incrementally approaching the right answer by pointing towards the right direction than nailing the right search term from the beginning. When it’s possible to take a “type in a query” kind of interface and make it more incrementally explorable, I think it’s almost always going to produce a more intuitive and powerful interface.

I decided to take matters into my own hands and build a cinema selection website I always dreamed of...It’s a website that shows every movie screening in every cinema across the entire Germany. Every screening, every cinema, every movie. All in one long HTML table.

...There’s no logo. No menu. No footer. No pagination. No “See more”. No cookie banners (because no cookies). No ChatGPT/SEO generated bullshit. No ads, of course.

Why? Because people don’t care about that stuff. They care about function. And our UI is a pure function.

We don't necessarily need to constantly interact with people “around” us on the web. The sensation of being in the quiet companionship of someone else, like reading next to them in a cafe, is what we're missing. The sense of ambiently sharing space – of being co-present – while engaged in other activities is a staple of shared public spaces that we're still figuring out how to design in the digital realm.

• mapping huge spaces onto small screens seems to be one of fundamental problems in "UI"
• somehow free panning in x/y makes me feel like looking through a loupe - I don't get that feeling when scrolling only vertically though
• I'm curious how many and what kinds of projectors would I need to have a wall for doing/thinking

...

• another thing to keep in mind is the "data-ink ratio" idea from Tufte - for power users the best UIs allow for making a lot of information visible at once, with the least amount "UI cruft" possible
• another idea to gain pixel space is to filter out what's irrelevant
• maybe the problem is not so much about the size of the display, but about the DPI? (for reference: reMarkable 2 has 226 DPI, Apple iMac Retina 5k has 218 DPI, so only ~18% of what's possible on paper)

When I'm on a journey through a dark swamp of information, I want that same sense of reassurance that flight map gives me. I want to know:

• Where I am right now
• Where I'm going (and how long it's going to take to get there)
• Where I've been and how I got here

Most interfaces are decent at the first two...but very few interfaces do a brilliant job of the third need: showing me where I've been and how I got here. We can do it at small scales. Patterns like breadcrumbs help us navigate through website or wiki with lots of subpages, but those don't scale well beyond ~7 steps.

I’m now more inclined to attribute Looseleaf’s power to its visual texture than to some cognitive media-style abstraction. And the visual texture owes more to the beauty (yes, beauty!) of the original pdfs from the Vasulka Archive. Perhaps the demo is best understood not as a prototype generic tool, but as a specific curated experience in its own right, with form and content claiming equal importance in its overall success.

Even so, I think there are some general lessons that can be drawn from this demo:

• Content is not inert
• Visual texture lets content breathe
• Visual texture lets the eye wander without losing itself

Interfaces are becoming less dense.

...[Density is] It’s not just the way an interface looks at one moment in time; it’s about the amount of information an interface can provide over a series of moments. It’s about how those moments are connected through design design decisions, and how those decisions are connected to the value the software provides.

...UI density is the value a user gets from the interface divided by the time and space the interface occupies.

Android and iOS share a common problem: they copied desktop text editing conventions, but without a menu bar or mouse. This forced them to overload the tap gesture with a wide range of actions: placing the cursor, moving it, selecting text, and invoking a pop-up menu. This results in an overly complicated and ambiguous mess-o-taps, leading to a variety of user errors.

It’s less of a problem if you only do short bursts of text in social media or messaging apps. But doing anything more complicated like an email gets tedious. However, in my user study on text editing, I was surprised to find that everyone had significant problems and rather severe workarounds for editing text.

Some of my best friends are designers. But I think we can all agree that - however well-meaning - they can be a little obsessive. Whether it is fretting over tiny details, or trying to align to a grid which doesn't exist, or spending time removing useful affordances in the name of æsthetics - they always find a way to make something prettier at the expense of usability.

Google used to have some beautiful logos for its apps. Each had a distinct shape, style, and colour. Then, someone decided that they all needed a consistent visual language. And this mess was born.

By highlighting text and “starring” your selection, you can create a personal marker to a passage.

What you save is stored only on your specific browser locally, and is never sent to the server. Other visitors will not see your highlights, and you will not see your previously saved highlights when visiting the site through a different browser.

Unfolding functionality
MouseOver
MouseDragging instead of Value-Slider
Memory Dots / Five Favorites
Transparency & Shadows
Full Screen Mode, Rooms Metaphor
Workspace – Desktop
MetaWindow

“UI is a function of state” is a pretty popular saying in the front-end world. In context (pun intended), that’s typically referring to application or component state. I thought I’d pull that thread a little further and explore all the states that can effect the UI layer.

...In closing, hire people who are good at UI.

We ship small changes daily, and something major almost every week. Every year, it's almost like a new product. This incremental way of building the product is hugely beneficial, and often necessary — though it unbalances the overall design, and leads to design debt. Each new capability adds stress on the product's existing surfaces for which it was initially designed. Functionality no longer fits in a coherent way. It needs to be rebalanced and rethought.

...While the design debt often happens in small increments, it’s best to be paid in larger sweeps. This goes against the common wisdom in engineering where complete code rewrites are avoided. The difference is that on the engineering side, a modular or incremental way of working can work as the technical implementation is not really visible. Whereas the product experience is holistic and visual. You cannot predict which path the user takes. If you update just one module or view at a time, the overall experience becomes more disjointed. Secondly, if your goal is to reset and rebalance the whole product UI and experience, you have to consider all the needs simultaneously. An incremental approach doesn’t let you do that.

A Global Design System would centralize common UI components, reduce so much of this unnecessary duplication, integrate with any web-based tech stack, and create a connected vehicle for delivering front-end best practices to the world’s web experiences.

...Thanks to the tireless work of browser folks and standards bodies, I think that by and large we have most HTML elements and primitives in place to make most common web user interfaces. What we need now are more prefabricated UI components that abstract away much of the close-to-the-metal HTML and give developers composed, ready-to-use modules to drop into their projects.

• Stats ala Git/GitHub, with characters added and removed, and comments added. We’ve found that character count isn’t the right metric for prose, but word/sentence counts are better.
• Blobs as a visual representation. Several contigous paragraphs added will show as a large central circle, with small edits orbiting it. Red and green differentiate addition and deletion. We don’t love this solution, but we do think the problem of differentiating “one big edit” from “many small edits” is important.
• Minibar. The horizontal bar gives a sense for where in the document changes happened, and the section headers diagonally above give further orientation clues. We found this most helpful in longer documents.
• Sections stats uses the document section headers to infer the table of contents. Here we have the same +added/-deleted syntax, broken down by section.

Inter is a workhorse of a typeface carefully crafted & designed for a wide range of applications, from detailed user interfaces to marketing & signage.

Lynch puts forward five primitive elements: paths (e.g. streets); edges (e.g. uncrossable rivers); districts; nodes (e.g. street corners); landmarks (e.g. a recognisable building). Each element has an intuitive way to sketch it, as if on the back of a napkin.

...Lynch’s five primitives comprise a notation.

It’s composable. A small number of simple elements can be combined, according to their own grammar, for more complex descriptions. There’s no cap on complexity; this isn’t paint by numbers. The city map can be infinitely large.

Compositions are shareable. And what’s more, they’re degradable: a partial map still functions as a map; one re-drawn from memory on a whiteboard still carries the gist. So shareable, and pragmatically shareable.

Not only are maps in this notation functional for communication, but it’s possible to look at a sketched city map and deconstruct it into its primitive elements (without knowing Lynch’s system) and see how to use those elements to extend or correct the map, or create a whole new one. So the notation is learnable.

I’ve always understood one reason why development-led products turn out the way they do (bad): developers get excited by making something work. That’s the payoff. Once it works, the motivation for everything else dries up.

Building Tootbox, I’ve realised another reason: developers think in data. When you’re looking at database fields and need to design a way for users to fill them, the easy way out is a form that maps inputs 1:1 with those fields. This makes for a very uninspired UI.

...I once read that almost all software is just displaying lists of items. This is true. Think about Twitter; you follow a list of users, those users have lists of tweets, and those tweets have lists of likes. It’s lists all the way down.

Developing an app that allows users to add to lists and then displaying those lists back to them isn’t hard — at least not at first. And because it’s not very hard, everything else about making the product successful gets more difficult. What’s the angle? How is it different than the next thing? Messaging, marketing, and design are key differentiators. The only real difference between Goodreads and Letterboxd is the niches they’ve chosen.

Let me argue that the actual dawn of user interface design first happened when computer designers finally noticed, not just that end users had functioning minds, but that a better understanding of how those minds worked could completely shift the paradigm of interaction.

‘Often the most appropriate frame is the most invisible frame,’ says Peter Schade, head of framing at the National Gallery in London. The sentiment points to a paradox: the more Schade excels at his work, the less people will notice it. It’s only when tastes run counter to his own that we are reminded that how paintings are framed is always a choice, not an inevitability.

To get to our interview, I’m escorted through a discreet door in a gallery café into corridors rather like a hospital’s and then into a windowless workshop. Here, with the rumble of tube trains passing underneath, Schade creates, repairs and fits the frames that will protect masterpieces while also colouring our perceptions, whether we notice their effect or not.

...This work is a delicate balance of art and craft: the skill to create a perfect imitation of a carved baroque cherub, for example, and the aesthetic sensitivity to anticipate what effect it will have on an artwork.

What would it look like to support discussion around edits in a very low-formality way, without any need for branching layers or suggestion mode? This prototype was our attempt. The key ideas are:

1. Contributors just edit directly on the doc. No branches or drafts, no suggested changes.
2. After an edit session, you can retroactively supply rationale for particular edits, including grouping related edits together.
3. The primary author of the doc doesn’t need to approve or reject edits. But the rationale and grouping, plus the diff view, makes it easy to see what changed and revert things they don’t agree with.

Although groups are often spatially colocated (for example, a section rewritten) they might also be spread out across the document (for example, a term search-and-replaced, or addition of Oxford commas throughout the doc).

From using this prototype, we’ve found that seeing recent edits and being able to easily revert them feels very useful—it’s a form of undo that’s not limited to the time order that edits happened.

I work with my Remarkable template right next to my laptop screen every day. It functions a lot like a second screen - except getting things onto my tablet is a slightly slow process. What if there was a “second screen mode” that could be a combination of live-data and note taking?

This is called undesirable correlation. It looks like left panel (Detect language) asks you to drag and drop and right one (English) to choose a file.

In reality, both actions apply to the left one! Or to the entire UI, if you will.

Anyway, try to avoid.

If I were tasked with finding an icon that can be used to label an AI-related feature in a UI component, I’d likely pursue a set of icons more closely tied to the feature itself, such as the sparkle-donning envelope for AI-flavored email features. The sparkle is what suggests automation and whatever it is applied to it is the feature. Sparkles alone can mean too many things (and reek of marketing cruft).

...Some of this isn’t specific to AI but to iconography in general. The detail needs to be clear enough to convey meaning, but not so detailed that the meaning is lost when downscaled. The elements need to be recognizable at first glance but also avoid crossing into well-known commodities, like how the helix shape closely resembles the logos of React and The Big Bang Theory. The subject matter has to steer clear of creepy connotations or else suffer the fate of Uncanny Valley. These are all considerations to take into account when working with icons of any kind.

What I’m saying is: everybody knows how to center things. It’s trivial. And if you are lost, the knowledge is right there.

Yet, when we look at actual applications, we see that these methods are not used.

...Please pay attention. Please care. Bad centering can ruin otherwise decent UI, but a properly aligned text can make your UI sing.

Even if it’s hard. Even if tools make it inconvenient. Even if you have to search for solutions. Together, I trust, we can find our way back to putting one rectangle inside another rectangle without messing it up.

I, for one, want to live in a world of beautiful well-balanced UIs. I trust that you do, too.

It’s all worth it in the end.

I recently built an education tool.

Like other enterprising folk, I stumbled into a ethical dilemma: (1) my product probably shouldn’t be paywalled, but (2) I also don’t want to be poor.

My solution: uglify the UI for non-paying consumers.

While we wait for native switch support, I thought I would build a highly configurable switch component using :has(), container queries, Logical Properties and Custom Properties for fun and to show you how much goes into a truly flexible component. Let’s dig in.

Apple is the first major operating system vendor who had abandoned a four-decades-long tradition. Their new visionOS — for the first time in the history of Apple — will have round checkboxes.

How should we even call these? Radio checks? Check buttons?

Anyway, with Apple’s betrayal, I think it’s fair to say there’s no hope for this tradition to continue.

I therefore officially announce 2024 to be the year when the square checkbox has finally died.

Send feedback and bug reports
without leaving your website. Collect live website feedback from team, clients, and users.

Multiplayer mode and live cursors create the feeling that you’re sat with friends and teammates, so it's natural that designers started experimenting with them to improve product experiences. They've gone from default browser elements to becoming little components in themselves - they can be arrows, shapes, floating avatars, or videos that bring voices onto the canvas – depending on the user needs.

Hyperlinks should look different if it’s busy at the other end. Like: maybe they should be noisy, or glow, or have a yellow halo that gets bigger and bigger

Wavefont is a variable font with a Weight, Round, and Vertical Alignment axes for rendering data: waveforms, spectrums, diagrams, bars etc.

Figma is not a design tool. It is a drawing tool. That these get conflated demonstrates the shallowness of so much design practice.

A table of contents now automatically appears in documents that have at least two headings. This makes it easier to navigate long documents—like detailed project specs or meeting notes—to find what you need.q

Swimlanes bring a powerful new way to visualize your projects and issues on the board view. This highly requested feature allows you to group cards into rows based on different dimensions and instantly see how work is distributed across teams, projects, assignees, and other properties.

Just another usability and accessibility pro telling authors not to do the thing they continue to do.

I just added side notes to my blog, thanks to my move to 11ty (from the bloated mess that was Gatsby) and the wonderful sites and articles people have shared on the small web (as well as the power of view source) it's been easy and a pleasure!

I always want to add margin/side/foot notes to my posts, it's probably a sign of a bad excessively detail oriented writing style.

...I also added a little Gallery page of all the images on my site, given this is a pretty image focussed blog it's nice to have them all in one place.

A new timeline design layers in details to give a more accurate overview of project progress.

Milestones will now appear on project bars as long as they have a target or completion date. Represented by diamonds, milestones indicate status and can be hovered over or clicked on to show details. Milestones near each other collapse into a set, like on a map app.

• the right interface can have an incredible power

  • making something that was previously extremely hard, available to everyone (switching from Roman to Arabic numerals as an interface to mathematics)
  • making invention possible (Feynman Diagrams)
  • making Solving Things Visually possible (Cartesian Coordinates)
    • Data Visualization can be thought of as an alternative, sometimes more powerful, interface to data
  • working with the amounts of data for which we don't have enough Pixel Space (Collection-Browsing Interfaces)

• new powerful notations "stick around" and infect human thinking for generations

The idea is we want navigation links at some default level of color contrast. On hover, two different actions are triggered which results in the hovered link gaining more color contrast while the rest of the links lose additional contrast. It all adds up to something neat where we’re both emphasizing the hovered link and de-emphasizing the others in a single interaction.

On top there is a timeline, positions are still displayed chronologically, but users can also see connections.

Not only is this a different approach to browsing our own content, it is now possible to see patterns of my search queries and behaviors. In this way, our browser history does not only perform a retrieval function, but also writes a narrative.

I will finally understand why I ended up reading about the influence of plants on soil properties, when I started with a Texas BBQ query.

With this method, I am able to see at a glance how different pieces of information are connected, how they relate to each other and how I formed conclusions. I see how I actually cognized things that are relevant. It is not only about the goal, but also about the journey.

• Notion, Roam, Muse, file systems feel "fractal":
  • blocks within blocks in Notion
  • boards within boards in Muse
  • bullet points within bullet points Roam
  • folders within folders in file system
• hash-maps are also fractal
• Figma is not fractal - tabs, canvases and layers are all different things, and can't be nested ad infinitum
• fractal tools seem to give more freedom, but at a cost - how to Orient Myself in these possibly infinite structures

A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.

On the surface, implementing dark mode seemed like a straightforward front-end change: Simply swap every light color for a dark one. But we quickly discovered that the project was much more complex than that. We wanted to build a solution that wouldn’t just solve the existing need for a new feature, but would be flexible enough to scale with us as the product evolved. Doing so would make it easier to onboard new engineers, tackle unforeseen challenges, and introduce new themes down the road. The trick was developing an approach that would be easy to implement and maintain, while also ensuring that it was regression proof. In other words, we didn’t want to break things across the app while trying to experiment with different solutions.

Dark mode is now everywhere (this blog has it). It’s both accessibility-driven and aesthetically pleasing. But it often isn’t the highest benefit feature (and rarely, if ever, a feature that leads to product-market-fit).

...After you nail the core features, you can build things that further delight users (marginal benefit > 0). Sometimes the details can be differentiating. Perfectly crafted products make a difference (but never forget the core value proposition).

That means that every visual choice you make — layout, colors, typography, images — must be focused on getting a distracted, rushed, and emotionally-driven brain through their initial sub-conscious vetting and into the kind of systematic processing — detailed and focused review — you assume they’ll do initially.

Designing UI is designing an organization.

You can only design and make real a UI that matches an organization’s capabilities to deliver on its promise.

This is why startups are best suited to these kinds of radical UIs tailored to reality. Their entire organizational structure, which is small, can orient around a single idea and deliver on it — then build to scale.

Your UIs, and the real life experiences they deliver, can only ever be as good as an organization’s capabilities to deliver on them.

A Small Matter of Programming asks why it has been so difficult for end users to command programming power and explores the problems of end user-driven application development that must be solved to afford end users greater computational power. Drawing on empirical research on existing end user systems, A Small Matter of Programming analyzes cognitive, social, and technical issues of end user programming. In particular, it examines the importance of task-specific programming languages, visual application frameworks, and collaborative work practices for end user computing, with the goal of helping designers and programmers understand and better satisfy the needs of end users who want the capability to create, customize, and extend their applications software.

Mac(os)talgia is exploring my 2020 work-from-home routine with an added touch of nostalgia. How would have the same workflow looked like with the tools of today and the limitations of yesterday. Unreliable internet, little disk storage, macOS 9 and much more.

To understand the user interfaces on microwave ovens, you need to understand that microwave UI designers are aliens. As in, literal nonhuman aliens who infiltrated Earth, who believe that humans desperately want to hear piercingly loud beeps whenever they press a button.

...This is the same species of aliens that thinks humans want piercing blue lights to shine from any household appliance that might go in somebody's bedroom at night, like a humidifier.

...Nobody knows why they insist on hollowing out and inhabiting human appliance designers in particular.

In print the designer is god. An enormous industry has emerged from WYSIWYG, and many of the web’s designers are grounded in the beliefs and practices, the ritual of that medium. As designers we need to rethink this role, to abandon control, and seek a new relationship with the page.

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”

Usability and aesthetics usually go hand in hand. In fact, there is even what we call the “Aesthetic Usability Effect”: users perceive beautiful interfaces as easier to use and cut them more slack when it comes to minor usability issues.

Unfortunately, sometimes usability and aesthetics can be at odds, also known as “form over function”.

It seems tricky in that the lower you turn down the dial of opinionated-ness, the less useful you’re making the system. Sure, you’ll get some nice perks, but if you’re leaving people largely on their own to structure markup, you’re delivering less consistency, less design, more potential accessibility fails, and overall less value.
Maybe a way to summarize those last few points is “does a design system that tries to meet everyone’s needs actually meet nobody’s needs?”

Last week I saw several articles about the passing of human-computer interface expert Larry Tesler. Most of the headlines mentioned his invention of cut-copy-paste, but if you read more deeply one of the things he really emphasized was eliminating modal interfaces—he even got a vanity license plate that said “NO MODES”.

I realized this morning that this is exactly my gripe with the Workday timesheet application: it’s extremely modal, where the one we used to use with our in-house developed HRMS was almost completely modeless.

...In summary, this interface is almost completely modal: each page only lets you do one thing, and you have to click through pages and pages to complete the full task.

This is why Larry Tesler fought against modal interfaces: they make it harder to get the job done. And he had this figured out back in the 1970s. Too bad big software companies like Workday still don’t understand this, or don’t care.

<a href=“LINK_URL” target=“_blank”>
    LINK_TEXT
    <img aria-hidden=“true” src=“ICON_URL”/>
    <span class="visually-hidden”>Opens in new tab</span>
</a>

Let’s end the confusion between UI and UX. Let’s stop slapping sirens on children’s toys. Let’s prioritize personal goals over addiction. Let’s get our lives and our health back in balance by interacting with the real world instead of staring into a light, checking new notifications. Let’s think beyond screens.

The best result for any technology is to solve meaningful problems in impactful ways.

The best design reduces work.
The best computer is unseen.
The best interaction is natural.
The best interface is no interface.

A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound.

Riccardo Mori assembled a collection of screenshots of about boxes, many from really old apps. I miss cool about boxes — that’s where developers signed and got credit for their work.

Adept Fuyu-Heavy is a new multimodal model designed specifically for digital agents.

I have a love-hate relationship with marking up a Figma file. I take pride in adding the final touches to a design, thoughtfully making sure that all the specs and measurements are represented. Maybe it’s a text note, an arrow, or a quick callout, or maybe it’s extra context that communicates the intent behind a design choice as much as the design detail itself. Marking up a file can feel like a time suck, even though it can make a big difference in the product development process. And as designers spend valuable time writing, drawing, and manually organizing a file to make sure that every design requirement is accurately captured, developers spend an equal amount of time making sense of those designs, capturing context and gathering requirements to bring the concept to life.