Latest Posts (20 found)
Unsung Today

“I want to code; I’m not looking to make lifestyle choices.”

Robin Sloan : I still use Sublime Text for all of my programming and all of my newsletter-ing. […] The app is simple and superfast; I have it set up exactly the way I like it […], and it’s difficult for me to imagine ever switching to anything else. Here is a piece of software as sturdy and obedient as a cast-iron pan. Sloan links to a piece by David Bushnell about Sublime Text, who writes: I don’t know who develops it and I don’t care. All I know is that I can place my text cursor and read the surrounding code without a bombardment of popovers, pop-unders, pop-left-and-rights, pop-inlines, pop-in-and-out-too-fast-to-sees. […] The perfect dev stack is a collection of software that each does one job and doesn’t suffer main character syndrome. I want to code, I’m not looking to make lifestyle choices. I don’t want a bloated everything app. Don’t get me started on the “unified toolchain” plague! Show me the latest VC-backed build tool and I’ll show you ten lines of PHP that does a better job. If you’re fed up of the absolute state of things, Sublime Text still works. This is all very much in line with the post about TextEdit from a while back . I do care who develops good software since, at the very least, I want to give them credit. This is the best I could find , if you too are curious. It was prompted by someone asking: I’ve been a Sublime Text user for over a decade, and now a Sublime Merge user, too. But it occurs to me that I know almost nothing about the team/​company behind it. I wonder if this is a nice example of the (quiet) posture of the company matching the (utilitarian) personality of the software it is making. #coding #culture #software evolution #text editing

php Php programming Programming
0 views
Unsung Yesterday

iPod’s circular apps

iPhone’s home button and then the swipe up home gesture are so important and well done that they probably need to be covered as Unsung Heroes , but I wanted to mention something else today as we’re revisiting the whole “app icons in squircles” story ( my most recent post + Louie Mantia’s post ). The first iPhone in 2007 put apps as squircles on the home screen, and it also put a matching shape on the home button: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/ipods-circular-apps/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/ipods-circular-apps/1.1600w.avif" type="image/avif"> The shape on the button didn’t survive very long. It was removed starting with iPhone 5S in 2013, which introduced Touch ID – I guess it wasn’t possible to print the icon atop the button without sacrificing the finger detection quality. Then, in 2017, the button itself disappeared with the iPhone X. The iPod Touch was the iPhone without the cellular radio – it was made from 2007 to 2019, supported all the same apps as the iPhone, and sported a home button with a squircle up until the end. (Ironically, despite its name, it never got a Touch ID.) = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/ipods-circular-apps/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/ipods-circular-apps/2.1600w.avif" type="image/avif"> But there was another iPod that entered the app fray. It was the iPod Nano, whose last edition from 2012 had a home button – except it looked slightly different: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/ipods-circular-apps/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/ipods-circular-apps/3.1600w.avif" type="image/avif"> What was the reason? I don’t know if Apple ever explained it, but I believe the idea was that this iPod did not have downloadable apps, nor the App Store, nor even iOS. Those were all built-in apps, and I imagine Apple wanted to indicate visually that they’re different. Because it wasn’t just home button. The apps – eight of them, across 2 pages, although you could rearrange them! – all sported circular icons: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/ipods-circular-apps/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/ipods-circular-apps/4.1600w.avif" type="image/avif"> I don’t know if this approach was in any way effective, but I found it a funny little footnote. #apple #iconography

ios iOS design Design hardware Hardware
0 views
Unsung 2 days ago

The first notch is magical

Some years ago, the inimitable channel Technology Collections posted a 17-minute video about the peculiar design quirk of ceiling and room fans – they usually order their options Off → High → Medium → Low rather than the more natural Off → Low → Medium → High. The video is a bit off topic for this channel, but check it out if you’re interested how sometimes weird physics considerations influence design in the real world: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/yt1-play.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/yt1-play.1600w.avif" type="image/avif"> In the video, the host also talks about the more natural order that typically looked like this: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/1.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/2.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/3.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/4.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/5.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/6.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-first-notch-is-magical/6.1600w.avif" type="image/avif"> I wonder if you recognize this kind of an interface. I have a distinct memory of it from radios (where “zero volume” would mean “off”) and from TVs/early computer displays (where “zero brightness” meant “off,” too). There was something special about these controls that stuck in my memory, motor and otherwise: this tangible, heavy click when you ventured outside or back into “off,” almost as if you had to break the interface itself. I thought this, too, was a convention from an old analog time. Yet, I keep occasionally finding the “the first notch is special” interfaces on screen. Sometimes, they are pretty literal translations of the concept, like when you adjust the key repeat rate in macOS: Or, similarly, when you choose the dock magnification: But sometimes they are a bit more conceptual. Here, Nova treats the first notch of the zoom scale as a “list” option: Or: The new horizontal tabs in Chrome allow you to resize to whatever width you want. Below 125px, however, they snap directly to the minimum 55px width, a one-off “column view” with streamlined and purely iconographic controls: These all have pros and cons, too. On the con side, just like the fan or volume controls, they miss any memory since turning them off physically moves the knob away from any “value”; if on/off was a separate button, you could just leave the radio at your preferred volume and never touch it again. They also won’t be as discoverable as a separate onscreen toggle would be. (Here’s an example of a more classic treatment from the Nothing Phone.) Pros? They are compact. They allow you to change from “off” to a value in one quick gesture, skipping an explicit “on” step. You could even argue they are simpler also in a visual sense. But also, they are a bit… magical. I don’t know. That’s what to me unifies those old physical controls and their newer digital equivalents – they’re a little extra, a little different, a little special. They break the monotony of a predictable interface built out of boring, identical components. (Although, sadly, not a single onscreen example above uses haptics!) And I think that’s kind of nice. Not just in the very functional sense of breaking up the UI through shape coding etc., but also in a sense of making UIs more interesting. Speaking of volume, macOS used to show it as a sort of a HUD, using a treatment that borrowed from both the “first notch is special” radio knobs, and from early onscreen interfaces in TVs: But after 20+ years, macOS Tahoe changed it so it now looks this way: I can understand the argument that this is more consistent, and that it even teaches you – by proximity – that Control Center is what these controls call home. Yet I can’t help but think (and it seems I am not alone ) that this is so boring and exactly how Windows would approach things – and that this change, just like the squared icons , is how macOS lost one more bit of magic. #apple #craft #hardware #interface design #real world #youtube

design Design hardware Hardware
0 views
Unsung 2 days ago

Seeing like a state

The post about the dark mode toggle reminded me of two similar things rattling in my brain. On the positive side, here’s a delightful interaction from macOS. I can easily maximize the window to take up half the screen, but the moment I start dragging it, it recalls and nicely restores itself to its original size: macOS designers correctly figured out that the window being maximized or half-maximized is a state – but it has to be a state dressed up as a size. The button entry point is the “state” version. But on the way in, there is also a more natural “size” version: you can have the window snap and maximize to half screen when you drag it to the right edge. And on the way out? You just saw it. You don’t have to switch the state to “non maximized” first, and you don’t have to restore to the original size by hand. Here’s a bad example – one of the macOS’s horrible settings pages: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/2.1600w.avif" type="image/avif"> So far, it seems good. Some of the toggles are on, some off. You not only see a position of the switch change, but also the track under the switch is a different color to help you disambiguate. Nice. But now look what happens when I toggle off the second option, which the third and fourth option rely on: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/3.1600w.avif" type="image/avif"> Processing this dialog visually, does it look like “on, off, disabled off, disabled on,” or does it look like “four toggles, each one inexplicably with a different shade of gray”? There are many solutions here: some visual, some IA, some systemic. Also, I use the graphite accent color, which somewhat exacerbates the issue, although it’s there with any accent color. But I wonder if one of the challenges here is that someone thought it’s important to show the state of the toggle even if it’s disabled, and everything else followed from that. This feels similar to the dark mode essay in that there will always be someone making that argument, and that argument will always feel stronger, because it will feel like it’s backed by logic. The system will make sense as a diagram. Each of its parts will come from a logical conclusion. So did the tri-state dark mode toggle . Or the Power/​Sleep/Wake keyboard buttons. Or Abort, Retry, Fail in DOS. Arguments for systemic completeness are always going to be easier to make than arguments for thoughtful simplicity. I sketched two possible solutions. They’re not the best ones, and you might recoil at them, since either one is a compromise. But that’s the point. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/4.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/5.1600w.avif" type="image/avif"> #complexity #interface design #system design

design Design web-development Web Development
0 views
Unsung 2 days ago

“Solving a largely imaginary user goal”

On her blog, Lea Verou makes a case that each user-facing website dark-mode toggle should only ever show two options , but in a smart way. The challenge is that any dark mode toggle needs to actually accommodate three options: dark, light, and the default “whatever the system says” (which can be always dark, always light, or change with the time of day ). Many toggles simply pass that complexity onto the user: I want to get something out of the way: I don’t think Verou’s article as an article is fully successful. I feel like it spends a great amount of words to explain something not entirely as complex, and even the interactive playgrounds felt slightly too rigid and altogether confusing. If you care about (interactive) explainers, it might be an interesting case study in and of itself. But I am very much much onboard with the proposal and the line of thinking it represents. Verou suggests a “smart” dual state toggle, which still allows the website to follow the system, but shoves the complexity of the “whatever the system says” branch into the crevices between visible UI. Here’s how I understand it: This toggle will feel compromised, and you might immediately find some rare use case it doesn’t fully support – maybe attached to an imaginary user, or even an internal user. But Verou is absolutely correct in her insistence to fight through that: Tri-state toggles are implementation-driven UI. One of the most common UX mistakes is designing UI around the underlying data model instead of user goals. Good interfaces abstract away the underlying model and expose a model that aligns with user goals (unless of course these happen to coincide, which is rare). Now, it’s just a dark mode toggle. It might not seem like a difference between a smart dual state toggle and an explicit tri-state toggle is that much. But: A similar example might be that of PC keyboards in the late 1990s, which also exposed system complexity and pestered people with Power/​Sleep/Wake keys: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/solving-a-largely-imaginary-user-goal/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/solving-a-largely-imaginary-user-goal/3.1600w.avif" type="image/avif"> Computers do not do that anymore, simply having a smarter singular power button, piped to a more sophisticated logic underneath. #complexity #dark mode #keyboard #web The smart toggle only has two options: light and dark. Mechanically, clicking or tapping the toggle brings you to the opposite option. Simple. If your new option is the opposite of system (e.g. you switch the page to dark mode if your system is in light mode), it will stay in that theme forever, no matter what the system does in the future. If your new option is one that currently matches the system, it will then continue following the system in perpetuity (e.g. it’s back to the default behaviour). “Whatever the system says” is not just one extra option. It’s also one extra weird option. It doesn’t feel like the other two. It’s seemingly repetitive. It’s often unclear what it does before clicking. It’s not obvious where to put it in order. Verou doesn’t mention this in her post, but even just seeing the word System next to Light and Dark feels complicated. (Auto is slightly better.) The cognitive load here might be larger than it seems. What is an interface if not a collection of a million challenges, each one seemingly insignificant on its own? Trivial things add up. One compromise here and one cheap decision there, and soon you’re talking real money. Thinking deeply about something like this gives one practice of dealing with complexity elsewhere, and facing even more difficult challenges where the stakes are higher and the compromises larger.

design Design web-development Web Development User Experience
0 views
Unsung 3 days ago

“Microsoft’s most ambitious attempt to reinvent the start screen”

From Marton Barcza at TechAltar, a good 12-minute video analyzing what went wrong with the famed Live Tiles that Microsoft was pushing throughout most of the 2010s: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/microsofts-most-ambitious-attempt-to-reinvent-the-start-screen/yt1-play.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/microsofts-most-ambitious-attempt-to-reinvent-the-start-screen/yt1-play.1600w.avif" type="image/avif"> Now, among Windows Phone fans the pervasive opinion is that Live Tiles have failed because Microsoft did a poor job with them, which I think is at least partially true – after all, even many key Microsoft apps like Skype had broken Live Tiles half the time, the Windows 10 start menu was filled by Microsoft with Live Tiles that were clearly just animated ads rather than showing you something actually useful, and the company of course never built out any of their advanced interactive concepts either. But while all of that might be true, the fact that every major company has walked away from this idea and nobody else has picked it up since, means that there probably are more fundamental problems with this idea. And I can think of three distinct ones: Barcza goes on to talk about some specific interactions and problems, and arrives at the conclusion that Live Tiles ended up at this unpleasant intersection where they’re tried to be icons, widgets, and notifications all at once, not doing a particularly great job at either task. That, and there were also challenges with the design primarily being mobile-first, and struggling surviving a jump to a large screen. (Live Tiles were abandoned in the 2017, at which point desktop Windows reverted back to what it was before, and the mobile/​tablet lines were altogether disbanded.) What I found interesting in watching this today is that it feels Apple has made some similar mistakes in their Liquid Glass approach and wider platform unification desires (see: macOS Settings). Both these and Live Tiles attempted to create A System Of Systems, and both ended up occasionally feeling like they awkwardly crowbarred some wider concepts into places where they didn’t truly belong. If it helps with your further research, I understand Live Tiles were part of a bigger UI effort called Metro and started in earnest with Windows Phone . #apple #change management #complexity #touch #windows #youtube user experience, form factors, and horizontal integration.

design Design business Business mobile Mobile
0 views
Unsung 4 days ago

Xcode’s clever minimap

Minimaps are an interesting UI element because they often feel very exciting – something about things being small, or responsive, or maps just being cool? – but fail to actually be useful. I find minimaps for coding particularly tricky because, at least in my world, code all looks very much the same from far away. Seeing a thumbnailed/ greeked version of it felt just like a more expensive and distracting version of a regular scrollbar, without any benefits. But Xcode does something interesting. It allows you to use to create a sort of a “header” for the minimap anywhere you want: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/xcodes-clever-minimap/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/xcodes-clever-minimap/1.1600w.avif" type="image/avif"> The minimap then shows those headers not greeked, but as human-readable text: I thought this was clever, allowing you to see the bird’s eye view of the code not just in the most obvious visual sense, but also as a sort of “table of contents,” adding so much more utility. This, of course, is technically no longer a “zoomed out view” but then again, it’s not that there is some sort of rule that it has to be. As a matter of fact, quite the opposite; it all reminded me of the famous London subway map by Harry Beck, which also broke the expectations in a similar way. The original, geographically accurate map of London’s tube looked like this: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/xcodes-clever-minimap/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/xcodes-clever-minimap/3.1600w.avif" type="image/avif"> Beck decided to take liberties with the geography and reimagine the map as a diagram to help the travellers, and ever since he’s done so in 1933, many transit maps followed suit: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/xcodes-clever-minimap/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/xcodes-clever-minimap/4.1600w.avif" type="image/avif"> #coding #text editing

programming Programming
0 views
Unsung 4 days ago

“It’s unclear how Sopwith escaped to the general public.”

Sopwith is a 1984 videogame made by David L. Clark for the original, seminal IBM PC model 5150 . It sports the distinctive 4-color CGA palette and an equally distinctive PC speaker soundtrack. It’s also one of the oldest videogames still in active development, and I was surprised how enthralled I was learning about it. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/its-unclear-how-sopwith-escaped-to-the-general-public/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/its-unclear-how-sopwith-escaped-to-the-general-public/1.1600w.avif" type="image/avif"> (First of all, you can play Sopwith in a browser . Choose “single player” and then “novice” first for the game to tell you about its unusual keyboard control scheme.) The current maintainer of the effort is Simon Howard. He wrote about Sopwith’s interesting history ; I love appreciate this kind of approachable and caring preservation of obscure titles. The history is worth a read. From that, I learned a fascinating factoid. The game was intended as a demo for networking hardware, and the original author didn’t realize the game was “in circulation” for many years: Intended as a trade-show demo, it’s unclear how Sopwith escaped to the general public. David L. Clark didn’t even discover until around 2000 that it had “gotten out”. Little did he know, Sopwith had been circulating for years in collections of early games for the IBM PC. Only a couple of years after the first version was released, ads were appearing in magazines like PC Magazine advertising Sopwith for sale as part of collections of games for the IBM PC The modern edition started by Howard is called SDL Sopwith (SDL being a cross-platform graphics library ): SDL Sopwith is directly derived from the source code to the original DOS versions, and still includes changelog comments that date all the way back to 1984. What I particularly liked about the contemporary Sopwith is its guiding document/​philosophy page , also worth checking out in full. Here are some choice principles: There is something in all this that I feel a lot of software could learn from – not just vintage games. I appreciated Howard being thoughtful about growing Sopwith without forgetting its roots, but also with understanding that some things have changed since 1984. You could imagine remixing “The goal is to be a great old game rather than a mediocre modern game” to something like: Better be a great focused app than a mediocre sprawling app. Lastly, how did I learn about Sopwith? Howard shared this charming installation visual with me: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/its-unclear-how-sopwith-escaped-to-the-general-public/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/its-unclear-how-sopwith-escaped-to-the-general-public/2.1600w.avif" type="image/avif"> #change management #games #history #software evolution Sopwith has a long history that deserves to be honored and preserved. By default, the game should always play like the original DOS version. That means the gameplay in particular should be the same, without any significant differences. Someone who has just discovered the project should find it to be a delightfully accurate recreation of the game they may have played when they were younger. […] Some new features can be enabled by default, as long as they are subtle, unintrusive, carefully considered and can be turned off. An example is the medals feature. The game will never try to be “something it’s not”. This means that it will always have four color CGA graphics, PC speaker sound effects and a low resolution display. It will never add (for example) hi-res sprites or 3D models, digital sound effects or MP3 music. The goal is to be “a great old game” rather than “a mediocre modern game”. New features should be fun and recognize the comical aspects of the game. Features should be carefully considered before being incorporated, not just added arbitrarily and thoughtlessly.

gaming Gaming open-source Open Source
0 views
Unsung 5 days ago

When commit means cancel

A strange thing happens when you press Enter on an empty item in a list in most text editors – the entire list item disappears: This feels counterintuitive. Isn’t Enter for committing and adding more things? Wouldn’t Backspace be the right key to press to break a list? Yes, and no. I am not sure who invented this pattern (I spotted it first in Word 95), but that someone understood a strange interaction contract existing in text editing – Enter is actually an escape hatch. In text editing, no matter where you are, you can always press Enter multiple times to just create more room for writing. In an app that doesn’t cancel a list on Enter, you can face a terrifying moment where you get stuck in a list, and getting stuck is never fun. This principle feels so useful that I see more and more apps apply a version of it for other things. For example, in many modern text editors pressing Enter after a headline returns you to regular text, just so it’s not as easy to get stuck in a headline style: #errors #flow #keyboard #text editing

programming Programming design Design frontend Frontend
0 views
Unsung 5 days ago

“Some guy named Paul”

An interesting 20-minute Config talk from the Instagram designer Rose McManus: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/some-guy-named-paul/yt1-play.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/some-guy-named-paul/yt1-play.1600w.avif" type="image/avif"> It covers some of the same areas we recently talked about: diacritics and Polish S (and a fun video about English conventions from a while back ), but it tackles them on a higher level. McManus talks about how people express themselves via their usernames, how that changes in various countries of the world and for what reasons, how it intersects with some UI considerations, and how people use it creatively – and also, sometimes, abuse it. This is the K-pop star IU. Uh her Instagram handle is “dlwlrma.” And I think at first this maybe seems already like complete hyperreality, like it’s bearing no relationship with her Hangul name, or even with her stage name. But actually, I think this is at the third stage of Baudrillard’s theory because really “dlwlrma” is Lee Ji-eun’s Hangul name typed out on a Korean keyboard but backwards, distorted, while that keyboard is set to render Latin characters, almost like a cipher. And then her display name is her Hangul name typed out with one of the characters changed, so it’s like a pun. I didn’t feel the talk stuck the landing – in the end, I wasn’t very sure why the decision that was made was made. But there’s a whole lot of stuff before that was fascinating and thought-provoking. #conference talk #localization #youtube

culture Culture design Design media Media
0 views
Unsung 1 weeks ago

Asana’s fascinating Tab shortcuts

If you’re a professional web app, your key shortcut situation is not to be envied. Once the operating system grabs the ⌘ shortcuts it requires (⌘M to minimize, ⌘H to hide, ⌘Q to quit, etc.), the browser has its turn, claiming everything from ⌘R, T, N, L, W for tab operation, to ⌘F, P, O, and S for other things. And then, some input controls inside the browser also need to listen to ⌘Z and XCV, and maybe even A (select all), B (bold), and I (italic). At this point things feel barren, and some web apps start reaching instead for less common modifier keys (⇧, ⌥, ⌘⇧), and others go straight to no modifier zone, or override those of the above shortcuts that they can. Each approach, of course, has its own set of challenges . It’s perhaps not a surprise that someone got fed up, and that someone was people working on the project management tool Asana, which did something relatively unique: it promoted Tab to be a modifier key. The video shows me using Tab+K to like tasks, Tab+Return to open a sidebar, Tab+Q to add a quick task, and Tab+H to return home. Here’s the entire official shortcut list, with Tab shortcuts emphasized: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/asanas-fascinating-tab-shortcuts/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/asanas-fascinating-tab-shortcuts/2.1600w.avif" type="image/avif"> What’s fascinating about choosing Tab is that the key already has so much to do: On top of that, repurposing a key to be a modifier key – especially one that already has a job or two – will also have a long tail of strange consequences. And, Tab is only on one side, which could wreak havoc with the ergonomics of keyboard use. (You are, technically, always supposed to use the modifier key with the opposite hand to the hand you’re pressing the main key with.) I am not ready to hate it quite yet. Tab is not the worst key to use in this context, as it’s really the only available big key other than Caps Lock, which is impossible to mess with on the web. The other big keys – the spacebar, Return, and Backspace – would be radioactive for this purpose. The asymmetry issue? Anecdotally, I understand that both right-handed and left-handed people most often use the pointing device (mouse or trackpad) with their right hand, and consequently often prioritize left modifier keys anyway. Here is how Asana solves some other challenges: What’s interesting and I bet the main reason Asana approached it this way, is that Tab is a separate little island, far away from other modifier keys – and thus not just without any preexisting conflicts, but also impossible to confuse with other modifier keys. Asana could have kept all the shortcuts above but substituted Tab with Ctrl on a Mac and Alt on a PC, but those would then be packed among many other similar-feeling keys . (There is a price for this isolation, as Tab backfires the moment you have to combine it with other modifier keys. Asana doesn’t do it very often – I have only seen Tab+Shift+D, G, and F – but I wish they didn’t do it at all.) Overall, I’m surprised how positively I feel about it. If you use Asana a lot, I’d be curious how Tab-based shortcuts feel to you. If you work at Asana, I would love to know if you consider these a success. The only thing that seems to be missing is an option to go back to regular shortcuts if needed, for people who might want it for motor control reasons. (It is possible to achieve that with tools like Karabiner Elements, but that tool is really unpleasant to use.) Oh, also. Tab+B does this, because, well, “tabby.” Cute. #easter eggs #ergonomics #keyboard #web it moves focus to the next UI control, it indents a bullet point or even just text, it accepts an autosuggestion or a placeholder (and similar things ). When you press Tab to move focus around, the action can now only take place on key up, not key down, so tabbing (or, indentation of bullet points) feels slower . When you hold a regular modifier key and then change your mind and simply release it, no action occurs. But Tab already has a job as a regular key (tabbing or indentation, depending on context), so if you change your mind, something will still happen. This might be annoying. (You can press Tab+Esc or Tab+Space for a safe cancel, but that doesn’t seem very intuitive, especially in a moment of panic .) An action only on key up also means there can be no repeat when holding Tab. I am not sure how important this is, especially in the context of accessibility.

web Web ai AI
0 views
Unsung 1 weeks ago

The monkey lives again

Speaking of computers that used to stop running if you looked at them funny , a few years ago, I wrote about the Monkey app that was there on the original Mac. Many software engineers will recognize the premise – Monkey was just a chaos script randomly pressing mouse buttons and keys during the night hours, and if the computer crashed because of Monkey’s random actions, the team would be able to reproduce it and try to fix it. I was also inspired to try a Monkey-like approach for something creative. In hindsight, it’s a very Unsung post , so you might enjoy it! Also, in the post, I showed this boring version of Monkey: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-monkey-lives-again/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-monkey-lives-again/1.1600w.avif" type="image/avif"> Since then, I discovered a different version with its own icon, perhaps designed by Susan Kare: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-monkey-lives-again/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-monkey-lives-again/2.1600w.avif" type="image/avif"> (If creative use of randomness rings a bell, here’s also an earlier Unsung post about a different take .) #apple #history #marcin wichary #process #qa testing

testing Testing programming Programming
0 views
Unsung 1 weeks ago

You only get one chance to make a zeroth impression

Contra the previous post , just spotted this “Same settings, new look!” callout in Firefox, on a page I have never visited before, talking about a feature I have never used: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/you-only-get-one-chance-to-make-a-zeroth-impression/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/you-only-get-one-chance-to-make-a-zeroth-impression/1.1600w.avif" type="image/avif"> I mentioned this once – when you get someplace new, everything is new. This redesign announcement’s conditions were engineered poorly, because they didn’t even consider people who didn’t use the feature before the redesign. I keep thinking of the very old computers from the 1940s, 1950s, and even 1960s, where the challenge wasn’t what to do with the computer, but with keeping the computer running. There was a machine called JOHNNIAC which gained a nickname “pneumoniac” because it refused to work on a warm day. On many other computers, there was a daily ritual of finding which of the vacuum tubes blew up and had to be replaced. Some teams had a literal downtime tax; they knew and communicated in advance that 40% of the days the machine would not be up to the task, consumed by tweaks and repairs to bring it just to the state of being ready to do work . When I look at those kinds of pop-ups and callouts, I think how we’re unwillingly recreating the very same conditions. I deeply believe people are exhausted not just by changes in software , but also constant questions, pop-ups, unnecessary notifications, “STOP 2 END,” emails to unsubscribe from, unsubscribes that don’t work the first time, and so on. Software should not require the user to occasionally click on buttons just to keep it running. #attention #onboarding

ui UI web Web design Design
0 views
Unsung 1 weeks ago

One and one thing only

I wanted to show you a year’s worth of messages from my barber’s software, because this is what software should be. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/one-and-one-thing-only/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/one-and-one-thing-only/1.1600w.avif" type="image/avif"> No spam, no upsells, no growth hacks, no unwelcome cuteness or puzzling verbosity. It’s so curt and straight to the point it should be set in a 1970s Helvetica: The appointment’s tomorrow. Any questions?

web-development Web Development design Design
0 views
Unsung 1 weeks ago

“Insights and ideas emerge from that interface.”

From Robin Sloan : Yet we should never forget that the product of work isn’t only the work — it’s also the worker. Doing the work changes you; the up-close expe­ri­ence trans­forms your capa­bil­i­ties and even your desires. Insights and ideas emerge from that interface, and I believe the agent mae­stros lose a lot — too much — when they take their big step back. But I suppose this is just my temperament, which I’ve written about before . I don’t merely want things done; I want to do them. #ai #craft

career Career ai AI
0 views
Unsung 1 weeks ago

“Next up? You know it. You hate it. It’s the invisible wall.”

Tangentially related to the previous post , this 8-minute video from CrowBranch is a fun tier list of various ways games try to keep you in bounds: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/next-up-you-know-it-you-hate-it-its-the-invisible-wall/yt1-play.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/next-up-you-know-it-you-hate-it-its-the-invisible-wall/yt1-play.1600w.avif" type="image/avif"> The limits here are I believe unrelated to precision, and rather to wanting to keep the player within a controlled, designed environment. (We once covered a story of this backfiring horribly , and also talked about skyboxes and streaming .) The video also made me want to see people – especially designers with less experience slash less baggage than I have – doing a tier list of e.g. common interface elements. Or maybe I should make such a video… #errors #games #youtube

design Design gaming Gaming entertainment Entertainment
0 views
Unsung 1 weeks ago

“This is a sphere getting exponentially angrier as time passes.”

When you learn computer science, at some point you encounter floating-point numbers in all their peculiar glory. Floating-point numbers allow you to store values that are extremely huge or extremely tiny, but that comes with a strange price. The number is still just a number with a regular limited precision, but is accompanied by a floating point – another number that just says how many zeroes to put after or in front. In effect, when your number is millions, you get a precision of thousands. When your number if billions, you can only count in millions, and so on. This makes intuitive sense, in a same way a billionaire doesn’t care about pocket change. (Go to a floating point visualizer , and you will see you can input 9000004 and 9000005 and 9000006 with no problem, but add one more zero and 90000004 will be rounded down to 90000000, and 90000005 up to 90000008. Bigger numbers get even less precise.) This has a strange effect when it comes to videogames or graphic software: The further you move something away from the origin of your universe – where X and Y are 0 – the more you have to worry about its internal precision. This is not a problem in real world. You can send a tiny, incredibly meticulous watch screw far beyond the solar system and back, and it will do fine. But now jump to the digital world, assume Earth is 0:0 – apologies to Copernicus – and now the further away you go, the more the floating point moves to the left, and at some point the precision of the number on the other side runs out; a value that can express billions of kilometers is too coarse to even consider millimeters. This is a fascinating problem which is visualized nicely in this short video . This is what happens when you move an object with its constant internal precision further and further away: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/this-is-a-sphere-getting-exponentially-angrier-as-time-passes/yt1-play.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/this-is-a-sphere-getting-exponentially-angrier-as-time-passes/yt1-play.1600w.avif" type="image/avif"> There are ways around this – you can increase the precision, introduce a “floating offset,” have two precision centers around two floating points, or do a bunch of other things – but each one will cost you. So, sometimes, the best solution is the simplest one: do not allow the numbers to get too big. And this is why Adobe Illustrator, Figma, and I bet at least a few other tools that promise infinite canvas, actually stop you if you stray too far away from the center. Precision is like atmosphere, the canvas says, thinning out the further you go. We cannot promise your structural integrity will survive going past a certain point, so we won’t allow you to do that. Here’s Figma, where I at some point the canvas stops following your scroll commands: The first invisible X value is 131,072 and it’s not a surprise it’s one of these numbers that will look very, very familiar. It seems like a huge enough value, but if you consider a slide in a slide deck is 1920×1080, it’s not as infinite as it might initially seem. And this is also why – in part – Figma Slides manually wraps you after 20 slides: #graphics #youtube

programming Programming
0 views
Unsung 1 weeks ago

“Gravity is worth asking about.”

I’ve enjoyed John Gruber’s posts about ads appearing on an increasing number of Apple surfaces: the App Store, Apple News, and – soon, perhaps – Apple Maps. (Just for reference, here’s an example of such an ad.) = 3x)" srcset="https://unsung.aresluna.org/_media/gravity-is-worth-asking-about/1-framed.1600w.avif" type="image/avif"> In a post earlier this week , Gruber likened ads to stickers on laptops, and shared a fun Steve Jobs story: That’s what those stickers on PCs are: they’re ads. Intel pays for the “Intel Inside” stickers that booger up PC laptop palm rests. Longtime readers will recall that back in August 2007 , Apple held a Town Hall event to introduce new iMacs and some iLife and iWork software updates. In a post-event Q&A (imagine that), Bob Keefe of Cox Newspapers asked “Can you say why you all are not participating in the Intel Inside program, putting the stickers on your new or previous Macs?” This question was so absurd from the perspective of those who covered Apple closely that it prompted outright laughter. […] The 2007 exchange went as follows: Keefe: Why are you not participating in Intel Inside program and not putting stickers on your Macs? Jobs: Uh… what can I say? We like our own stickers better. (In case it’s not clear, this was a joke; Apple didn’t and doesn’t put any such stickers on their products.) In May, Gruber posted about Apple’s ads , too, and brought up the zero-one-infinity rule : I feel like a variation of Zero-One-Infinity is a good rule of thumb for ads, too. From the perspective of users — and probably developers — zero was the best number of ads for Apple to show in App Store search results. One was worse but acceptable. But now that they’re showing more than one, they’re on their way to infinity. They’ve started down the slippery slope. Remember when Google only showed one ad in search results? “Slippery slope” is a perfect term. But I wanted to add something here. In my experience, in the realm of UI, there is no middle notch. I’ve seen it time and time again… the moment you open the door to One, Infinity starts exerting its pull: Here are two examples I’ve been thinking about recently: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/gravity-is-worth-asking-about/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/gravity-is-worth-asking-about/2.1600w.avif" type="image/avif"> This – screenshotting in iOS – was originally just one fork: Save or Delete. Now it’s a staggering five options I have to choose from, every time, even if I never touch four of them: Once you wedge one thing in the door, it’s really hard to stop. My theory is that this is because digital interfaces are pretty much all infinitely extensible. There will always be a way to add one more button, one more link, one more setting, one more ad. If something doesn’t fit, you make it smaller. If making it smaller looks bad, you add a scrollbar. If a scrollbar doesn’t feel right, there’s always overflow. Not only it’s very hard to create interfaces that have limitations, but a bad decision is not just precedent – it’s code that can be copied and reused. Existing code always had tons of… well, gravity, even before LLMs. And so, products grow complex without anyone intending them to; a new team adds just one more thing, which in isolation always feels like nothing to worry about. The Hick’s Law , the extra mental load , the complexity all grow in between those moments, in a no-man’s land no team typically feels responsible for. The logic is always circular: Why would the team adding a third option have to do something a team adding a second option didn’t have to do? Why would the team adding the second option worry in advance about option number 5? This is why it’s important to hire and recognize people who will understand that those limitations have to be imposed arbitrarily, and empower them to be able to say, “Let‘s not add this. We like our own stickers better.” = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/gravity-is-worth-asking-about/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/gravity-is-worth-asking-about/4.1600w.avif" type="image/avif"> (My MacBook does have a sticker, which I bought and put on it since for some reason I find it really funny.) #complexity #system design adding just one setting will send a message that We Do Settings Now and more settings will follow, one uncomfortable exception followed by weeks of deliberations will inevitably open the door to subsequent mindless exceptions, one cheap or lazy approach can spread through the interface like rust, subconsciously telling people “cheap and lazy solutions are okay here.” This right click menu in Chrome started with just one fork (new window or new tab) – now there are three alts that I have to choose between, every single time, even if I only ever use one option: This – screenshotting in iOS – was originally just one fork: Save or Delete. Now it’s a staggering five options I have to choose from, every time, even if I never touch four of them:

marketing Marketing programming Programming rust Rust business Business
0 views
Unsung 1 weeks ago

“Rather than fighting my tendency to type these two characters in my omnibar, I neutralized it.”

An interesting short story from Ernie Smith at Tedium, who ventured out to do the opposite of what we usually cover on this blog – disrespect his motor memory : Recently, I made a realization: I have been unwillingly addicted to Facebook for a long time, and it’s not even because I like Facebook. Rather, it’s because I find it an extremely easy URL to type into a modern web browser’s omnibar. This sounds crazy, but the first two letters, f and a, are on the home row, and I don’t really rely on bookmarks, but my browser’s history function to type in URLs. This creates a sort of recency bias. If I type in the same URL a lot, it’s the one that pops up the most. And so, if I’m at a browser with no clear idea of what my intent for the next page I load up, I inevitably type in “fa,” which would suck me in. […] So, what I ended up doing was creating a URL that does nothing but forward to Google News. […] The result is that whenever I type in my new Facebook URL, I go to a news aggregator, which is inevitably what I was using Facebook for anyway. A week later, and my Facebook usage has gone down considerably. There is something really interesting about creating your own URL. Smith doesn’t disclose his, but you can imagine it’s something like that just redirects to a news aggregator. If creating a new URL is too difficult, there are always other options: Wanna go to fatberg.com every time you load your computer? Or maybe faxtoy.net ? This is a good example of some of the challenges with “recent” interfaces I am such a big fan of . If you’re designing recents and you think they can turn against the user or otherwise get in their way, it’s good to offer not just a “clear recents” feature that gets rid of them all, like here in Apple’s Music… = 3x)" srcset="https://unsung.aresluna.org/_media/rather-than-fighting-my-tendency-to-type-these-two-characters-in-my-omnibar-i-neutralized-it/1-framed.1600w.avif" type="image/avif"> …but also individual clears, like here in Bluesky: = 3x)" srcset="https://unsung.aresluna.org/_media/rather-than-fighting-my-tendency-to-type-these-two-characters-in-my-omnibar-i-neutralized-it/2-framed.1600w.avif" type="image/avif"> I don’t know if this is true for all the browsers, but in Chrome and Safari, you can also clear individual suggestions this way: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/rather-than-fighting-my-tendency-to-type-these-two-characters-in-my-omnibar-i-neutralized-it/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/rather-than-fighting-my-tendency-to-type-these-two-characters-in-my-omnibar-i-neutralized-it/3.1600w.avif" type="image/avif"> Smith writes a bit more about the addictive nature of computers, but I’ll let you read on your own . #attention #keyboard

c# C# web-development Web Development design Design
0 views
Unsung 1 weeks ago

What it says on the tin

Nice moment in Slack and Medium – when logging in, the login code that arrives via email is already there in the subject, in addition to hiding inside: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/what-it-says-on-the-tin/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/what-it-says-on-the-tin/1.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/what-it-says-on-the-tin/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/what-it-says-on-the-tin/2.1600w.avif" type="image/avif"> This feels good for two reasons. One is the obvious one: you see the code earlier, it might show up in a notification, etc. But also, this should prevent multiple login codes to be threaded as a “conversation” inside your email client, since threading is based on the email subject – and threaded utility emails can be really confusing. #flow #security

security Security
0 views