Latest Posts (20 found)
Unsung Today

Anthony Hobday’s design references

Anthony Hobday is a product designer and I like his approach of cataloging and sharing references on his website. Here are some choice pages: I like this kind of rigorous practice, and if you’re doing that on your own, please consider sharing it with others, too! (And please consider letting me know.) As a reader, I find these fun to go through, as they light up different parts of my brain than most of other design resources. I probably missed some on the list above, so check out the entire site . (For example, Hobday also has a list of lightly categorized bookmarks and quotes about design .) (I added a new reference tag to capture resources like these.) #definitions #reference Uncommon, but useful design terms Notes on software quality and What is good craftspersonship? Notes on visual design and Visual design rules you can safely follow How interface changes with frequency of use Every interaction design concept and Every visual design concept Various interface design classifications Notes on design books

0 views
Unsung Today

DaisyDisk’s onboarding

Any Mac app that has to ask for system permissions has its work cut out for it. In a previous post I showed “the MacCharlie method,” which looked like this: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/daisydisks-onboarding/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/daisydisks-onboarding/1.1600w.avif" type="image/avif"> DaisyDisk, a disk cleanup app, does something different. First of all, I like that the app icon is animating here to indicate it’s movable. It’s a version of “jiggle mode” and while it would be frustrating to see it in a common UI surface (our brains our wired to be distracted by movement, especially in the periphery), this is a tab that you only click into to fix this: But something even more interesting happens. The moment you start dragging the icon, the app actually spawns System Settings, positions them close, and even opens them at the right pane… so you can just drag the icon over: I don’t believe I have ever seen anything like it before. This feels a bit aggressive, but I think it is… good? I now wonder, however, why do the instructions still tell me to do it by hand. What if they just had a wiggly icon saying, “start dragging it, and we’ll open Settings for you,” with only some fallback or manual option if wanted? #interface design #motion design #onboarding

1 views
Unsung Yesterday

Unsung Heroes: Super Sprint

I know, I know. I’m supposed to say iPod’s click wheel, or the Western Electric 500 rotary dial, or maybe the first Nest. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-heroes-super-sprint/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-heroes-super-sprint/1.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-heroes-super-sprint/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-heroes-super-sprint/2.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-heroes-super-sprint/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-heroes-super-sprint/3.1600w.avif" type="image/avif"> But, have you ever played Super Sprint? It was Super Sprint that had the first amazing rotary controller I’ve ever used, and the whole cabinet design told you the game was very well aware of that. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-heroes-super-sprint/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-heroes-super-sprint/5.1600w.avif" type="image/avif"> Super Sprint was a 1986 arcade game from Atari that was, in a nutshell: four cars (at least one computer-controlled), eight tracks, fast races. You might think that those wheels functioned similarly to a regular car steering wheel, but not really – they were much easier to spin, and needed to travel further to rotate the car. You wouldn’t steer delicately, but rather the opposite: you needed to throw the wheel violently in one direction, and then, at the perfect moment, stop it on a dime : So the huge wheels were not realistic. Neither were the cars. They accelerated rapidly – the gas pedal was your only other control – and had a ridiculous amount of understeer. Don’t let the size and intensity of the interface fool you, though: this was a very precise operation. The game was tight – Rollercoaster Tycoon tight or Excel 97 tight, a whole decade before them. In the world awash with slow computers, Super Sprint lived up to its name, laughing latency and delays in their faces. It’s hard for me, even today, to imagine something faster or tighter – and for even my contemporary work, it’s good to remember things can feel this way. And, on top of all that? Better-than-usual sound design , higher-than-usual resolution, shortcuts to reward really good players, and a bunch of great details and easter eggs. Super Sprint wasn’t Atari’s first attempt here – it was preceded by Sprint 2 , Sprint 4, Sprint 8, and Sprint One – and you could tell. It was designed and coded by Kelly Turner and Robert Weatherby, polished as hell, and might have been the first interface between the person, the hardware, and the software that really inspired me. It was almost as much fun to watch three good players compete, as it was to play yourself. But when I played it, it’s possible these were my first – please excuse me here – motor memories. Atari used the same wheel for other games, famous and obscure , but this was where it met its match in software. I can show that to you, but experiencing it is impossible from afar. Even perfect emulation can’t do it justice – there has simply never been a home controller that approached it. (I mean, the whole cabinet weighed 400 pounds!) But if you are ever in an old-school-themed arcade, look out for Super Sprint ( locations ), or its two-player cousin Championship Sprint ( locations ) – and give it a turn or two. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-heroes-super-sprint/8.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-heroes-super-sprint/8.1600w.avif" type="image/avif"> #direct manipulation #flow #games #history #performance #unsung heroes

0 views
Unsung 2 days ago

“…and at that point it stops being a system.”

A few nice moments that caught my attention in Marek Minor’s case study of designing icons for Cursor . The diagonals for “cancel/​wrong” icons are always backslashes, and all the “positive” icons are always slashes: There is a system that provides 1-to-1-and-only-1 mapping between a concept and an icon: The point of the table is that each “What’s the icon for [X]?” has exactly one answer, and keeps having exactly one answer as the product grows. Without it, a set slowly develops two icons for the same idea, and at that point it stops being a system. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/and-at-that-point-it-stops-being-a-system/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/and-at-that-point-it-stops-being-a-system/2.1600w.avif" type="image/avif"> And, on the page itself, a few nice blink-comparator -like vehicles with subtle text animations: #case study #iconography #system design

0 views
Unsung 2 days ago

Ivory’s account switching

Ivory is a Mastodon client, and their account switcher has a few interesting mechanics. The standard one is that you can tap on your avatar, and get a menu in response: But you can also drag down on the avatar, and get a different reaction: This, I believe, is meant to be a slightly faster way. The settings option is gone to simplify, and the whole thing looks and feels more… gestural, in lack of a better word. But I think it also serves one more purpose. The moment I saw this, I thought to myself “I wonder if I could just swipe on the icon itself?” and, lo and behold, this is actually possible: Why does it matter? I think for some power users of social media – perhaps people doing it professionally – you switch accounts all the time, and investing in this interaction being fast and smooth is important. This whole small interaction system feels similar to switching apps on a Mac. You can choose an app in your dock with a mouse (the slow, but well-lit way). You can then learn to use ⌘⇥ and hold ⌘ to get to it quicker from a temporary menu. Eventually, you will also start tapping ⌘⇥ quickly, skipping any visible UI surface altogether. There is also something great in seeing an interface that grows with you, or one where you can say “I wonder if…” based on your prior interactions and expectations, and the interface actually rewarding you for that thought. #flow #onboarding #system design #touch

0 views
Unsung 3 days ago

Responsive text and code

Many years ago, I put together a quick proposal of what I called “responsive text” for social proof: I think you get the idea – instead of dumb truncation, the underlying code could prepare a few strings conveying the information with different levels of specificity, and then the UI could choose the longest one that could still fit. This idea can apply in a few places. Here, in Figma, one of the menus switches to a more “compact” string that uses four-letter abbreviations and skips “weight” altogether – but only when there isn’t room for a verbose treatment. You can also compare it with the original, naïve truncation: Recently, I spotted Jake Archibald, developer working on Firefox, propose something in a similar vein – responsive code: I think this is a lot more clever and a lot more important. Mobile phones are everywhere. Wrapping code like regular text without understanding it makes it basically impenetrable, but preserving long lines and introducing horizontal scrolling is also frustrating – just in a different way: = 3x)" srcset="https://unsung.aresluna.org/_media/responsive-text-and-code/5-framed.1600w.avif" type="image/avif"> I can see Archibald’s solution be very helpful here if used well – and perhaps could inspire other kinds of solutions for similar problems (have you ever tried to read any table on Wikipedia on your phone?). #coding #typography

0 views
Unsung 3 days ago

Don’t show again (Taylor’s version)

An interesting take from a screen annotation app ScreenBrush – instead of a standard “don’t show again” checkbox modifying a button, it shows two buttons as a fork in a road: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/dont-show-again-taylors-version/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/dont-show-again-taylors-version/1.1600w.avif" type="image/avif"> I am not sure I have ever seen it laid out like this before, and I am not sure if it’s good, as it does force a user to make a choice where a choice might not be necessary. In case you are curious, Esc (or click away) is the equivalent to “Got it,” and Enter does nothing at all, which makes the interface somewhat incongruous – the “Don’t show again” button is positioned as a primary command, but takes more effort to invoke. But what is interesting to me in particular was seeing it next to all of these “Maybe later” buttons that litter user interfaces these days. People seem to generally despise those, and it is refreshing to see a modern UI with a button string that doesn’t hesitate. #attention #interface design #writing

0 views
Unsung 4 days ago

Got your back, pt. 8

A nice moment in iOS – even if you delete an app, you might still be on the hook for its subscription, so the operating system shows this right after deletion: = 3x)" srcset="https://unsung.aresluna.org/_media/got-your-back-pt-8/1-framed.1600w.avif" type="image/avif"> (Context for the screenshot: I’m only uninstalling Quiche Browser to reinstall it and get back to the pristine onboarding for the previous post .) #got your back #ios

0 views
Unsung 4 days ago

Unsung @ 500: Behind the scenes

(This is a meta post about this very blog . If that’s not interesting to you, skip to the next one!) A few people recently asked about my writing and publication process, so this post is for anyone who’s interested in that. My present goal is posting every day, and at least eleven posts a week. This is arbitrary and will change; I’m making sure I’m enjoying it, and paying attention to burnout. I have at this point hundreds of unfinished posts, or snippets of posts, or just two-three-four-word ideas. I try to jot them down whenever they pop into my head. Here’s a lil sample: = 3x)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/1.1600w.avif" type="image/avif"> How I choose to publish something on a given day is a bit of a mystery even to myself. I generally try to listen to what inspires me. I’m always excited when a blog post or a YouTube video arrives that makes me want to share it on the spot . The original idea for Unsung was to do only this kind of stuff, but that doesn’t happen as often. Sometimes, it’s your emails or messages that prompt a post (thanks!). Sometimes, I try to be strategic about “if I want to post about Y, it’d be good to first have posted about X” – for example, I needed to write about menu secrets before writing about Move Item Here ). But I try not to overthink it; once you start considering all the dependencies, it really becomes an escape room. I sometimes mark items with or or or – this is not markup, these are just words to help orient myself – but it’s kind of a mess. I made a dashboard to help me steer clear of blind alleys over time. Some patterns I’m trying to avoid: writing just from me instead of linking to other things, or relying too much on YouTube videos. Recently I noticed I wrote a lot about keyboards and old things, so I added a few charts to monitor these patterns, too. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/2.1600w.avif" type="image/avif"> I try to do both of these at once: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/3.1600w.avif" type="image/avif"> Get something out there even if I don’t feel it’s perfect, just to keep the momentum. This “pull stuff that’s boring/​push stuff out anyway” seesaw feels hard to navigate, but I think it’s important to practice and pretty universal to creative process. Lastly, I occasionally look at the stats of the weekly digests to see how I’m doing, but mostly they serve as celebration – yet another week of stuff in the books. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/4.1600w.avif" type="image/avif"> Infrastructure It’s really hard to say why I find things motivating, or how I know something is interesting, or even how I do my research – these feel personal or come from having thought about this kind of stuff for decades now. It’s really hard to give advice here. (“I’m an immigrant which often comes with a particular work ethic” or “my parents were not as supportive as they should be when I was growing up, so I try harder” are not particularly… actionable.) But one advice I will give: I invested a lot in infrastructure of the blog, so I can focus on writing, and I don’t get exhausted by menial production tasks (except those I like). For example, I have my own little markup language in Notes, so for example I can say and the dragged image or video get automatically framed without me doing anything else , so I can focus on writing. = 3x)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/5.1600w.avif" type="image/avif"> = 3x)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/6-framed.1600w.avif" type="image/avif"> Here are some other tags in my markup – I’ll let you figure out what they do. (I have to use different brackets here so they don’t get interpreted!) I also wrote a little app that’s a wrapper around and to allow me to quickly deal with image and video production as this is the least pleasant part of the job: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/7.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/7.1600w.avif" type="image/avif"> Having my own blog backend and frontend can be frustrating, but it also allows me to slowly improve things, which is important to me. I have a long to-do list of things that I want to do better, and I slowly chip away when inspiration strikes (or, when people report bugs). I want to try 120fps and P3 videos, more interactive elements, better information architecture, nicer visualization of keyboard and touch events. I have tons of bugs to fix. I recognize this flipflopping from previous projects – when I work on presentations, I sometimes switch over just to “making slides pretty” and this keeps me excited and still helps me figure out what I want to say, but in a roundabout way – and learned how important it is for me. I love that I get to improve a surface for my writing alongside doing the writing. I think it’s really cool this is even possible. I write in Apple Notes, mostly on my Mac (but occasionally on my iPhone on the go). This is an example of a published post in its natural habitat: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/8.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/8.1600w.avif" type="image/avif"> My general writing process is very messy – I start with specific ideas or links or even phrases and drop them in, and then I write around it. It always feels 20% done all the way until it’s 100% done; at this point I’m used to this curve. Here’s an example of a post I’m not working on actively, but kept adding to over the last weeks: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/9.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/9.1600w.avif" type="image/avif"> As I flesh a post out, I use a lot of TKs for future phrases and also to denote assets (images and videos) needed, and occasionally put to-do items in there, too. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/10.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/10.1600w.avif" type="image/avif"> Each note can also have a “graveyeard” section where I can keep random thoughts and that section doesn’t make it to the blog. I like keeping it in as a sort of artifact of messiness of the creative process. Here is it in a recently published note : = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/11.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-behind-the-scenes/11.1600w.avif" type="image/avif"> At some point during writing, I throw it over from Notes to the blog to see how it actually feels. I usually do it too early, intentionally. The writing in Apple Notes looks rough and the assets are always sized strangely; seeing the note how it will actually look gives me momentum. It also engages a different part of my brain, as I can more seriously think of how the images or videos help to tell the story. I occasionally revisit my goals and principles , but they’re mostly in my head. Once I decide to finish writing something, I try not to have more than 2–3 items in that state. I do not use AI in any way for writing; I am very protective of this thing I worked on for most of my life. If I use AI for research, it’s for simple Google-like questions, the answers to which I never fully trust. I write in Apple Notes, which I fell out of love with for actual note-taking. I code in Nova, although I struggle with some of its bugs and design decisions. I record screen with either native recording or CleanShot. I edit photos and videos with my little tool and command line, but I still occasionally reach out for Photoshop, which I’m not happy about. Anything else you’re curious about? Let me know! #about unsung Recognize that something I wrote or explored ended up not that interesting, and stop the presses. But I don’t delete these posts – maybe a better story or a more interesting take will save them in the future: Get something out there even if I don’t feel it’s perfect, just to keep the momentum.

0 views
Unsung 4 days ago

Unsung @ 500: Nine design details

(This is a meta post about this very blog . If that’s not interesting to you, skip to the next one!) Clicking or tapping on Newsletter or About links just above reveals the options in small drawers underneath, hopefully making it easier to engage without having to deal with new page opening, and so on: You can still ⌘-click on those links to open full pages. And the mouse cursor changes to the hand whenever you hold ⌘ to match the difference in behaviour: All the random posts are on a loop, so you can keep clicking to read the entire blog without ever encountering anything twice. (Well, at least if you do it in between post publications, as each new publication recomputes the random chain.) However, if you keep ⌘-clicking on “Random post,” each click will generate a different post, so you can spawn a bunch of tabs to read and then close them all. Even though Warbler (the body font) has old-style numerals, I turned them off so that the site doesn’t feel too old-fashioned, but also maybe too pretentious. In the title, I shortened the underline a bit so that it ends just at the base of the Y. (Wrapping that letter in a span also broke the kerning pair, so I had to compensate for that also.) You can press / or ⌘/ or ⌘K to get to search at any point. I used to do it by hand, but now every YouTube video link also shows the length of the video automatically. (This below is a static image and not a link.) = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-nine-design-details/8.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-nine-design-details/8.1600w.avif" type="image/avif"> 9. The diagonal dividing lines are aligned optically to the left spine on desktop, but slightly more to the center on smaller devices: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-nine-design-details/9.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-nine-design-details/9.1600w.avif" type="image/avif"> = 3x)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-nine-design-details/10-framed.1600w.avif" type="image/avif"> I also updated the Cursed knowledge page with some things I learned, and lightly updated Technical details – although with this one I usually wait to hear what people are curious about. #about unsung

0 views
Unsung 4 days ago

Unsung @ 500: The new design

Unless you’re reading via RSS, welcome to Unsung’s new livery! I dreaded even attempting the redesign, but as I was adding full-text search to the blog, I realized the previous simple frame couldn’t accommodate it – no matter what I did, the search felt bolted on. I suppressed my PM side, decided to scope creep, and the 500th postiversary provided a good arbitrary deadline. (This is post №492, so hopefully I’m not jinxing it.) One trick helped me. I decided to start the redesign coworking from a friend’s startup in a cool Chicago building, for the first time ever, hoping that the new surroundings will inspire me. It worked! = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/1.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/2.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/3.1600w.avif" type="image/avif"> Functionality The main impetus for the redesign was to recognize the blog’s growing body of work and make Unsung more evergreen, and something one could revisit in the future as a resource. Here’s what I did: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/4.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/5.1600w.avif" type="image/avif"> I also added a way to follow and comment on the blog posts on Mastodon and Bluesky , on top of existing RSS and weekly email digest. The first edition of Unsung was the default Montaigne styling (just so I could focus on writing and establishing a routine), and the second edition borrowed a lot from the design of my main site, Aresluna : = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/6.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/6.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/7.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/7.1600w.avif" type="image/avif"> For this first proper design of Unsung, I wanted something more distinct, something that wouldn’t feel too “computer retro,” and something that steered clear of the preeminent AI aesthetic . The fonts I chose: The color – well, didn’t you see me yearning for something evergreen above? Just kidding. I liked this factory green in a few places I spotted it recently, and I thought it felt appropriate, and beautiful in its own pedestrian way. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/8.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/8.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/9.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/9.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/10.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/10.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/11.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/11.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/12.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/12.1600w.avif" type="image/avif"> A lot of the design tenets of Unsung are still the same as before: no rounded corners, no shadows, no blurs, and a general distrust of symmetry. Plus, there are now a few more uneven surfaces. I could write some bs about how the sharp edges vis-à-vis the flowing neon text (and the neon-inspired icons I designed) represent the tension between craft and manufacture… = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/13.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/unsung-at-500-the-new-design/13.1600w.avif" type="image/avif"> …but, I don’t know. A lot of this design stuff is rattling around in different parts of the brain and doesn’t bubble up to the surface where words live. It just felt to me the contrast was fun. Because yeah, in addition to all the explicit and implicit goals, I also wanted to have a bit of fun and learn new things, and add a bit of delight, which hopefully you will spot here and there. I hope it makes both reading and navigating the blog more enjoyable. (Thank you to Naz Hamid and David J. Ross for their help with the redesign.) #about unsung There is now a “Random post” link – I’m hoping it becomes a delightful little way to poke around. There is also a search that can help you find an older post or navigate the site in a different way. The sitemap shows all the tags, now with light commentary. Posts that are in a series are now connected through navigation: The body font is David J. Ross’s Warbler , The sans serif working hard (and occasionally having fun) is David J. Ross’s Bild , The logo font that you will see pop-up occasionally elsewhere is Neonoir by Phospho Type foundry, with some modifications.

0 views
Unsung 5 days ago

“I would be very happy to see all kinds of text editors adopt this.”

Speaking of cut in File Explorer , Will McGugan, creator of the writing editor Ishmael , proposes doing the same thing for text editing – that is, leaving ghost text behind: I call it “Ghost Cut”, and it works like this: pressing Ctrl+X fades the selected text and makes it inert—you can’t click on the cut text and the cursor just kind of leaps over it, but it is still present in the document. Nothing is placed in the clipboard at this point and there is nothing to undo. If you decide you don’t want to paste then hitting Escape will restore the text to its active editable state. I do not think this is a good idea. It seems like McGugan proposes somewhat arbitrary reasons that cut and paste are “broken,” and to me the proposal fails even within his own framework: for example, it still doesn’t avoid the reflow, but moves it to the other side, making paste feel unstable (the included JavaScript playground feels disorienting to use). I think it also is at odds with the editor’s own about page , which talks about distraction and simplicity – and yet, what’s introduced here is a host of complex new things: a new visual state for cut text (that looks like AI autocomplete), some new logic to avoid moving into the cut text (which will also prevent easy selection adjustments), likely new confusion around undo, and a necessary new Esc gesture to get rid of a cut you decided not to pursue. But! There is something interesting in seeing this ghost text, and specific critique aside, it is fun to see experiments like these, with interactive explainers, poking at long-established interactions. Just yesterday, a second one appeared: an interesting new way to extend selection upwards – similar to double and triple clicking on text, but via the keyboard. This is the power of prototyping: sometimes seeing an idea you disagree with is the only thing that can unlock a different solution in your head. Let’s go back to cut and paste, though. You will notice that what’s listed as a precedent is not File Explorer, but Excel. It also doesn’t immediately remove selected cells on cut, but leave them in a temporary “possibly getting moved or removed” state first, only to have them disappear after paste: Why is that? I believe out of a similar principle, but a distinct reason that File Explorer too opts to leave a cut ghost behind. The stakes are higher in a different sense: cells refer to other cells. Were the removed cells to disappear immediately, you might witness the rest of the spreadsheet error out or show zeroes, as its formulas start pointing to emptiness. And it’s a good principle to generally avoid frightening your users. Here’s an example from Numbers, which doesn’t do ghosting, making cut a bad choice to do a simple move, as it doesn’t even recover after paste: #explainer #text editing

0 views
Unsung 5 days ago

Windows does it better, pt. 3: Cut in File Explorer

Dragging and dropping files with your mouse in the Finder is nice, but there are many moments you wanna reach for the keyboard instead. Finder supports that. You dragged the file to a wrong place by accident? ⌘Z can undo it in a jiffy. You already have the right windows open? ⌘C and ⌘V can start a copy faster than the fastest of mouse gestures. And for cutting, there’s always… = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/windows-does-it-better-pt-3-cut-in-file-explorer/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/windows-does-it-better-pt-3-cut-in-file-explorer/1.1600w.avif" type="image/avif"> …well, no, there isn’t. To the best of my knowledge, the Cut item in the menu never lights up around files or folders; you simply cannot ⌘X or cut in the Finder. I think I understand the reasoning here. Of the Fantastic Four that is ⌘ZXCV, it’s ⌘X that is the truly dangerous one. Putting something in a clipboard is always a balancing act – a moment of inattention, and ⌘X turns into Delete. We generally accept it for text because the stakes are not very high, and text undo is basically too cheap to meter . Even then, occasionally, disaster strikes. For files, the stakes are quite a bit higher. The creators of the File Explorer in Windows knew all that – yet, Cut still works there: The way this is done is that the file isn’t immediately removed and put on the clipboard. No, only the intention of cut is registered – one half of the handshake, if you will – but the file stays put and nothing happens until the deal gets closed via a subsequent paste. Or, almost nothing. There is a signal that ⌘X took effect – the cut files turn slightly transparent to indicate they put on their shoes and they’re ready to go. But if you don’t finish the paste, they become solid again the moment you cut something else, or when you restart the computer. (I wouldn’t be surprised if there’s a timeout, too, although I couldn’t verify that.) I am not sure why macOS doesn’t do it the same way, particularly since they have a half-finished state designed already, for copying larger selections: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/windows-does-it-better-pt-3-cut-in-file-explorer/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/windows-does-it-better-pt-3-cut-in-file-explorer/3.1600w.avif" type="image/avif"> This feels like a strange omission I don’t fully understand, particularly given that it was vintage Mac OS that put the ⌘XCV combination on the map: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/windows-does-it-better-pt-3-cut-in-file-explorer/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/windows-does-it-better-pt-3-cut-in-file-explorer/4.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/windows-does-it-better-pt-3-cut-in-file-explorer/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/windows-does-it-better-pt-3-cut-in-file-explorer/5.1600w.avif" type="image/avif"> What’s even stranger is that the Finder has a command to move files – but an unusual one, buried inside the secret area in one of the menus, as an ⌥ alt to Paste: It works. By putting the action on the other side, it avoids the “file floating in outer space” challenge, too. But it’s so undiscoverable that even though Move Item Here was introduced in 2011, I only learned about it a month ago as I started researching this more – and even though I know about it now, it still feels profoundly alien, being on the wrong side of the cut/paste continental divide. In a reversal of typical state of things, it feels to me is that it was Mac that did a simple/​cheap thing, and Windows that spent extra effort to dress it up into clothes of an existing Cut for reasons of familiarity, consistency, and better experience. Sure, a keyboard way to move files like Move Item Here is somewhat valuable, but nowhere near as valuable as a traditional cut, put under ⌘X ahead of ⌘V, working the same as everywhere else for years, even for decades, as one of the first denizens of motor memories all around the world. #finder #flow #keyboard #sins of our finders #system design #windows #windows does it better

0 views
Unsung 6 days ago

“A tricky problem I had to be thoughtful about.”

Phones grow big and their top edges inch closer and closer toward the horizon. Over time, iOS and apps moved some of the important surfaces to the bottom (for better or worse – I still struggle with seeing results and completions appearing above inputs), and the well-designed Reachability gesture helps, too. Still, the iOS web browser called Quiche Browser chose to tackle the problem, not the symptoms. It offers “Comfort Mode,” where you can ask it to move down the top edge of a bunch of surfaces closer to your fingers: = 3x)" srcset="https://unsung.aresluna.org/_media/a-tricky-problem-i-had-to-be-thoughtful-about/1-framed.1600w.avif" type="image/avif"> On top of that, true to the spirit of the app which revels in power-user customization, Quiche Browser allows you to decide precisely where the top should go in order to accommodate different people’s hands, and it even offers to do so per surface: These are the affected surfaces with the option off and on: The author, Greg de J., expanded on that on Threads : While designing Comfort Mode in Quiche Browser, a tricky problem I had to be thoughtful about: When you hold your phone in your right hand, favorite icons in the top left are harder to reach than ones on the right. Search suggestions don’t have this problem, since they span the width of the screen. That’s why favorites need to sit slightly lower than search suggestions, and why Comfort Mode lets you position both independently, so they all stay easy to reach one-handed. It’s an interesting idea and I wonder if it’s seeing a lot of use. The only design thought I had was: could the top space be filled or stylized so that this looks more intentional, rather than a potential rendering bug? Reachability does a good job of making it feel physical and adding a little arrow: Then again, given my job, my brain might be perfectly primed to see rendering errors everywhere. #ergonomics #touch

0 views
Unsung 1 weeks ago

The secrets of your menus

I’m curious if you know of this pattern that existed for as long as I remember. On a Mac, you can hold an ⌥ key (Option) whenever any menu is open, and often see more powerful, advanced, or faster variants of existing commands, helpful for a power user. Here’s Audio Hijack and Forklift: This is not limited to just ⌥. Here in Chrome’s increasingly impenetrable View menu , ⇧ (Shift) works the same way: And in the Finder’s File menu, both ⇧ and ⌥, and even the rare ⌃ (Ctrl) get to play: This feels like a nice, thoughtful extension of the command system. It’s clever, too – the key to reveal secret things is the same key you would use for their shortcuts, so you can make the connection either cerebrally or in your fingers. There are menus that treat it slightly differently, though. Here in Finder and Safari, you can see commands themselves changing when you press ⌥, no shortcut in sight: (By the way, a nice touch in the entire system: Once the menu gets wider to accommodate longer strings, it doesn’t shrink on key release.) And in other places, the modifier key only reveals an alternative shortcut for the same command: I have mixed feelings about this feature. On one hand, it has felt like dying art for a while now. Apple has never invested in the discoverability here, which I think kneecapped it. As far as I know, there is no hint these exist, and no way to see all of these options easily by clicking something on the screen. Even if you know the alternate name and you search for it, it doesn’t always reveal the key to press to see it natively: It’s not as much fun to keep pressing all the modifier keys in every menu to find out what might be hiding in there. I wonder if an alternate version where any modifier key reveals all would be better? (And more compatible with commands without modifiers changing anyway.) On the other hand, I really want this to spread its wings. In theory, the feature makes it possible to build up good motor memory habits, and understand some of the modifier key patterns: ⇧ often means “more,” and ⌥ (ironically) often means “alternate” (try ⌥ while selecting text on a Mac if you haven’t ever done it). It is also a clever way to accommodate power users without blowing up the menus for everyone else. And, once in a while, I have a truly glorious moment – like what happened to me last year. I scan a lot of documents, and merge them into PDFs using a database application called DevonThink. The process usually goes like this: I drag individual page files, select them, right click, and choose Merge: But at the end of that process, I am left with the extra original files I no longer need, so I have to select these, and then delete them: Not a big deal, but any “not a big deal” becomes a big deal if you have to do it dozens of times a month. Yet, only after years of doing it this way, I had a thought. More precisely, my fingers had a thought. Surely, more people must be facing this issue? So, on a lark, I pressed ⌥ with the menu open, and saw this: The precise option I needed was there all along, with a perfect label, hiding exactly in a place and under a key combination that was the first thing my fingers naturally tried. I smiled so much. It’s a really great feeling when you’re rewarded for learning a pattern, when your motor memory does the job for you, and when you sense you’re on the same wavelength as software’s creators. Someone was there ahead of me and cleaned up this rare path for me. #complexity #flow #keyboard #menus #onboarding

0 views
Unsung 1 weeks ago

The Swiss Cheese model, pt. 3

After two more serious posts in this series, I wanted to stop somewhere a bit more lighthearted and inconsequential. “Here’a a fun thing you can try,” begins this 13-minute video from Retro Game Mechanics Explained: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-swiss-cheese-model-pt-3/yt1-play.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/the-swiss-cheese-model-pt-3/yt1-play.1600w.avif" type="image/avif"> The premise of the parlor trick the video describes is a bit convoluted: I’ll let you watch the video for a nice explanation, but this I think is a good example of the Swiss Cheese model: Just like before, the absence of just one of these Swiss Cheese holes would prevent the bug from happening. But the holes line up perfectly. I found this whole thing kind of fun and delightful, and I actually understood why the creators of Mario decided to reset the game (with a small exception) on every game over – it’s brutal but elegant, and something I found myself wishing was easier to do during various projects I worked on in the last few decades. Of course, there might be an argument that this is such a highly manufactured scenario (how did anyone even find that out to begin with!?), and of limited value, particularly if you end up at a random level anyway. We will pull on that thread in a future post, because the story doesn’t end here. People who spend time hacking old games go way further than this. #bugs #super mario bros #youtube Get your Nintendo Entertainment system, put in the Mario cartridge, and power it on, without powering it off, grab the cartridge and replace it with the Tennis cartridge, start the game, wait until the music stops, then move around for a bit, take that cartridge out and put Mario back in, press A+Start and you will see that you will start at a random “invalid” level that doesn’t exist, which should not be possible. A+Start is real feature that allows you to continue the new game at the last level you finished (as opposed to Start, which always goes to Level 1). The NES allows you to take the cartridges out and put them back in while the machine is under power. The creators of Mario decided to make the game reset itself on every game over, and differentiate between cold boot and warm boot in a specific way. Tennis doesn’t wipe the memory on start. Tennis happens to change the memory in a very particular way that ends up being accidentally “compatible” with Mario. The Mario game doesn’t sanitize the level number on entry, so you can start on an invalid/​broken level.

0 views
Unsung 1 weeks ago

“You can always click on the mirror icon to turn it into… a mirror.”

You know how much I love simple and clean release notes , and I just stumbled upon these supercasual video release notes by designer Rafael Conde, and they made me smile. The video is just 45 seconds, and the following short thread is filled with a few other fun details of Conde’s app Hand Mirror. Particularly this one caught my attention – an about page mimicking software coming in physical boxes: There’s a lot more delight and perhaps even sugar in these than I usually link to – but hey, it’s Monday. #craft #release notes

0 views
Unsung 1 weeks ago

“This was not the first time the European Commission had attempted to correct for the permissions pollution.”

It seems sometimes that browsing the web these days is just constant closing of pop-ups and banners, and ignoring those that cannot be closed: Yeah, it is somewhat unfair to bundle the cookie banners into this list, but stripped down to the user experience, they are a nuisance – the road to hell is paved with tiny, slow close boxes. Nick Heer at Pixel Envy recently did the lord’s work of writing a succinct summary of recent efforts to fix this experience, and significant energy expended to derail those efforts. At the core of it is the Kill the Cookie Banner initiative , which might be somewhat unfortunate naming; while companies like Meta want to get rid of the cookie banners altogether to avoid having to ask the user for any permission (automatic opt in to data collection), the initiative goes the other way, killing the banner but not its plumbing. It proposes an uber cookie banner inside the browser settings that the user could set up once in a “fire-and-forget” way, and all the sites would have to obey automatically. The site also does a nice job explaining the problem and, if you are in Europe, offers a take action page. #attention #nick heer #web old school modals and in-page ads, Substack-style “subscribe to my newsletter”on-scroll pop-ups, cookie banners and popovers, (relatively new) VERIFY YOU ARE HUMAN, HUMAN_ interstitials.

0 views
Unsung 1 weeks ago

“I just chose words carefully.”

I don’t think anyone particularly enjoys typesetting in monospace. Regular text is okay – at least as okay as it can be: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-just-chose-words-carefully/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-just-chose-words-carefully/1.1600w.avif" type="image/avif"> Right aligning is also fine, as long as you don’t mind counting spaces, but centering already gets tricky, as you don’t have a half space to make things truly even: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-just-chose-words-carefully/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-just-chose-words-carefully/2.1600w.avif" type="image/avif"> And full justification is where things get particularly weird. The spaces are just too large, and cannot be distributed evenly, creating a really unpleasant feeling: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-just-chose-words-carefully/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-just-chose-words-carefully/3.1600w.avif" type="image/avif"> The solution used in typesetting elsewhere is hyphenation, but in monospace hyphenation also feels unpleasant, with the hyphens drawing too much attention to themselves (and subsequently messing up copy and paste): = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-just-chose-words-carefully/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-just-chose-words-carefully/4.1600w.avif" type="image/avif"> This is why you don’t see full justification in text files very often. But there is one more option. You can rewrite the text to choose only words that precisely add up to the line length to avoid any double spaces. This is exactly what rs1n did in the late 1990s for his guide to Super Metroid : = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-just-chose-words-carefully/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-just-chose-words-carefully/5.1600w.avif" type="image/avif"> It’s astonishing, as it goes like this on for 17,000 more words , each right margin perfectly ending on a letter, no twin spaces in sight. The author lightly covers in the FAQ at the bottom: What program did you use to justify the text? None. I just chose words carefully so that everything lined up on the right hand side. Everything was done with an ASCII editor. I’m sharing this mostly as a curiosity; some rewrites for physical books are par the course to avoid widows and orphans, but you don’t see them as much in onscreen writing. At the same time, who among us didn’t nod in recognition at least, having once spent hours massaging a button UI string or a tooltip just to get it to fit under the certain width in a densely packed interface? #text editing #typography #writing

3 views
Unsung 1 weeks ago

“An absolute bare minimum of interactivity”

I mentioned Atari’s Pong recently , a game often considered to be the first videogame ever. It wasn’t, and as a matter of fact, it was a clone of one of the games from the first home console Magnavox Odyssey , released earlier in 1972: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/an-absolute-bare-minimum-of-interactivity/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/an-absolute-bare-minimum-of-interactivity/1.1600w.avif" type="image/avif"> This is a 34-minute video by FrameRater walking through the console and all of its strange games: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/an-absolute-bare-minimum-of-interactivity/yt1-play.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/an-absolute-bare-minimum-of-interactivity/yt1-play.1600w.avif" type="image/avif"> I found it a very interesting case study. The Odyssey had a version of Pong before Pong – but it also had many other games that could be charitably described as “Pongs in disguise.” It all feels very, very convoluted for such a simple concept. You have to insert the right cart, tape an overlay to your TV of a certain size (the roll of tape is included), and understand the complex and poorly written instructions in the manual . Then, during the play time, you’d have to master the very strange controllers (left dial – horizontal movement, right dial – vertical movement), often do a lot of work that the console didn’t do (keeping track of collisions, or even scoring!), and deal will all sorts of accessories in the real world, like included cards, dice, stickers, and so on. You can admire the scope of this all – when life gives you Pong, you make a pongolade – but it all feels so clunky and convoluted, which the video catalogs in detail. But, in hindsight, it doesn’t matter if the included Pong (here, called Table Tennis) is good, right? Reader, Table Tennis wasn’t good at all. It wasn’t just the strange controllers, but also the really weird logic where you could twist the ball already in flight: Only looking at this made me realize, some 50+ years too late, the true power of Pong. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/an-absolute-bare-minimum-of-interactivity/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/an-absolute-bare-minimum-of-interactivity/3.1600w.avif" type="image/avif"> Pong didn’t bother with many games, with complicated rules, with the breadth of it all. It just did one thing really, really well. For the Odyssey, it seemed like a lot of games were about mastering the controller. For Pong, it was only ever about mastering the game . The interface was simple: you have one dial, so rotate it. The game was fun to play, with its logic both challenging and predictable. The instructions were sparse and barely needed anyway. There was automatic scoring, which Odyssey didn’t have. There were also sounds – turns out, people really liked sounds. The Odyssey was clearly an in-betweener, a complicated hybrid device weighed down by its well-intentioned maximalism. Pong was simple, attractive, optimized to the bone. I feel that it offers universal lessons, feeling eerily similar to iPod’s release in 2001 – focusing on just the few things that mattered, and doing them really, really well. #complexity #craft #games #history #youtube

0 views