Posts in Design (20 found)
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 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
iDiallo 6 days ago

Invisible Problems

During the pandemic, we completed one of our largest projects at work. To celebrate, since we couldn't meet in person, we all ordered food on DoorDash and played an online escape room game together. We were on a Zoom call, helping each other out and having fun. The first challenge was to escape a jail cell. To escape, each of us had to find clues in our own cell to figure out how to open the doors. We each had to find an object that solved a piece of the puzzle, and once we put them all together, the door would open. As a first challenge, it was easy enough. Everyone found a brightly colored object in their room and described it to the team so we could piece it together. Everyone but one team member. "Come on, read it, man, we can win this." He froze. Someone jumped in to help: "Mine was the most obvious green object in the room. Just look for something bright. Maybe blue, or orange, something that seems out of place." He didn't respond. He just sat there, frozen on camera. We figured he was having internet connectivity issues. We waited a good five minutes before he finally found it, and we moved on to the next level. I didn't think much of that day. We finished the game, we had fun, it was great. He waited until our next one-on-one to explain what had actually happened. He panicked, and he was embarrassed. It turned out he was colorblind. We were yelling random color names at him, and he couldn't, for the life of him, see any of them. As far as I can tell, I'm not colorblind, and it never would have occurred to me that this was something to account for. Just last week, I learned about Vehicle Motion Cues on the iPhone, a feature that helps reduce motion sickness. I don't think I've ever experienced motion sickness myself, or at least never in a car. Watching a blind person navigate a website was eye-opening for me. I realized that many of my past design choices would have worked against their experience without my ever knowing it. The same goes for someone navigating a computer entirely by voice. I recently rediscovered Windows Speech Recognition, which I found pretty annoying for my own needs. But for someone who relies on it for all of their computer use, it's an essential tool. A coworker once mentioned, almost in passing, that she struggles to read certain fonts because of dyslexia. Tight letter spacing and low-contrast text make some of our internal tools nearly unreadable to her. I had picked those fonts because they looked good on a demo slide. It had never crossed my mind that a font choice could be the difference between someone reading a document easily and someone giving up on it entirely. In some of our zoom calls, a teammate would often ask if he could do audio only before the call. While it didn't bother me at all, the managers kept insisting on everyone turning on their cameras. But after he used the camera for a few minutes, his connection would start dropping. I just assumed he had slow Internet. But the reality was he was located in a rural area and he relied entirely on his phone's hotspot to connect to the internet. The zoom call was using up all his data in minutes. None of these problems were problems for me. That's exactly what made them invisible. Unless you are experiencing these issues, there's little reason to ever notice them. We tend to design our tools, our meetings, and our expectations around our own experience of the world, and then mistake that experience for the default. It takes a colorblind teammate freezing on a call, or a friend who can't ride in the passenger seat without getting sick, to remind us that "normal" was only ever normal for us. You can never anticipate every invisible problem in advance, that's impossible. But at the very least, we should remember that our own experience is rarely the default. We should be a bit more curious on how others experience the tools we build.

design Design culture Culture
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

“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
Jim Nielsen 1 weeks ago

The AI Aesthetic

Every zeitgeist comes with new design idioms unique to its challenges. Many of them disappear as fads change, but others bake themselves into deeper parts of existing software interaction paradigms. For example, there’s the hamburger menu (≡) which saw a proliferation during the rise of mobile due to the constraints around screen size. It has since spread to many other parts of software interaction design and will likely remain prevalent for a long time as a terse way of indicating “more menu-type content here”. As another example, before AI what were the connotations of the sparkle emoji ✨? Personally, I don’t know, but now it means AI. (AI = sparkles and rainbow colors — it’s funny when you think about it. They should’ve just thrown unicorns in there for the trifecta. AI = sparkles, rainbows, and unicorns ✨🌈🦄. Apt.) Some patterns are very specific to the interactions inherent to the nature of AI as a technology. For example: streaming text. This is a pattern made for and refined by chat interfaces, so it may not have tons of utility for reuse across other software interaction paradigms. Then there are other patterns that’ve been refined by AI interfaces and are starting to spread to other places in software. For example, the “shimmering text” which in AI land implies a kind of “thinking” but is being repurposed to indicate any kind of asynchronous task (thinking, fetching, computing, etc.). Then there are other influences my subconscious is picking up on. For example, a lot of AI apps use tiny icons. These are most obvious (to me) in desktop Electron apps because they clash with the system-level grain of applications . Take a look at this screenshot, where you have desktop AI apps on the left (Claude, Codex, Cursor) and macOS apps from Apple on the right (Finder, Photos, Mail). You can see how the AI apps all have much smaller, thinner icons than their native counterparts. Are tiny icons our collective future in interfacing with computers? (Personally, I hope not.) There are other aesthetics my brain associates with AI, like beige/cream colors, orange accents, and serif typefaces as well as whack-a-mole UI controls (you know, the ones where you click the toggle and the entire UI repaints and you have to move your mouse somewhere else in the UI to click the toggle again? The non-determinism of AI’s grain has seeped into its UI/X). It all makes me wonder what other aesthetics are being born out of this AI moment and how many will spread, take seed, and become part of common software interaction paradigms for years or decades to come? Reply via: Email · Mastodon · Bluesky

design Design ai AI
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

In between the lines

Over the years, I acquired this weird collection of almost-invisible, but important signifiers of when I know a product really focuses on craft and thinks about its users. I thought about one recently. Here’s what happens when you try to copy a long block of text from YouTube’s (otherwise very useful) text transcript pane: And here’s an analogous example from GitHub: GitHub’s arrives ready to go. YouTube’s throws in a lot of messy things in between the lines. Why does it matter? Because these both feel like places you’ll be copying a lot from, and dealing with a messy paste can feel so, so unpleasant. You have probably seen this chart before, from xkcd : = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/in-between-the-lines/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/in-between-the-lines/3.1600w.avif" type="image/avif"> This is the fabled automation trade-off, or the high fixed cost vs. low variable cost dilemma. Yeah, if you’re doing a lot of copy/​paste, you might invest in creating some sort of a clean-up step, or even going through a programming text editor which has multiple cursors or other casual automation . But what if you don’t do that often, or if you don’t even know how much time it’d take you to automate it? Then the investment seems scary or insurmountable, and you’re stuck doing something like this, time and again: And it’s really nice to encounter a place like GitHub, where the team was thoughtful enough to save you all this trouble. There is also an asymmetry that’s worth pointing out. I believe making this good doesn’t have to be a lot of work for people putting these surfaces together. Here’s me fixing the YouTube situation with two simple lines of CSS with : I don’t know if it’d be as easy for all big text block situations, but I think it’s good practice to look around a bit and think about what are tiny things that you can do on your side that will save your users minutes or hours of tedium (see also: recents and paste and even more recents ). #copy paste #selection #text editing

ui UI web Web css CSS design Design
0 views
Taranis 2 weeks ago

Sphinx of Black Quartz, Judge my Vow!

We've all heard the quick brown fox phrase as a means of demonstrating all of the letters of the Roman alphabet in a single phrase. Without question, "Sphinx of Black Quartz, Judge my Vow" is way cooler. I've been doing some type design lately. When you attempt this, it rapidly becomes clear that letter forms hardly ever exist singly. In practice, you need to consider adjacent pairs of letter forms. Unfortunately, there are a lot of these things, so if you take a naive approach it can take an impractical amount of time to consider every possibility. A common technique is to create kerning groups . This exploits the tendency for many letter forms to share similar shapes on their left or right side. For example, in many typefaces, O and D look similar on the right. M and N often look similar on both sides. The exact details depend on the design of the typeface, but broadly speaking this knocks down the search space considerably. It is also possible to make a further huge reduction by only considering pairs that actually appear in typical text. I'm not suggesting avoiding due diligence by at least eyeballing all possible pairs, but at the type design level it really helps to be able to get close quickly. So what I found myself wanting was a type design equivalent of a quick brown fox – a (hopefully short) phrase or at least list of words that exercises as many letter pairs as possible as compactly as possible. I came up with an algorithm: Of course, once the search fails to find any new pairs, you can stop iterating. It is guaranteed to terminate because any word list must contain only a finite number of distinct pairs. Note that this in and of itself will not guarantee to generate a truly minimal phrase – this would require a backtracking search, but a simple depth first search that terminates once no more pairs are found worked fine. The word list I used was the classic Scrabble dictionary. In principle any word list will work, but this is a good compromise between enormity and being big enough to have good coverage. The principle is general and will work for any language that has text that can be broken into words. It is possible to search either for all pairs or just a specific subset of pairs. I've included here what pops out when you search for all possible pairs, and specific results for each upper and lower case letter form. I've found that working through the large 'All pairs' list is an effective way to set the spacing for a new typeface, and works both for setting side bearing and for creating kerning pairs. Since the first words contain many pairs, progress is suprisingly quick, though it slows down as you get toward the end of the list. It takes a few passes to get to a point when things settle down and stop changing. These particular lists assume that you are using kerning groups. I've found that the letter form specific word lists are good when I have decided to modify a letter form and want to see it in context while I'm editing (Glyphs 3 is very good for working that way), and for adjusting spacing when I'm done. It lets me break the standard waterfall approach to type design, where letter forms are designed first, then side bearing, then kerning, with the assumption that you need to start over if you break that loop. By being able to look at all the consequences of modifying a single letter form it removes this problem. In conclusion, I've found this to work way better and faster than the more traditional approach of just inventing phrases on the fly. It's interesting when looking particularly at the All pairs section below that my blog's default typeface has a few spacing issues! (It's not one of mine!) ABSORBABILITIES absorbabilities Accountantships acknowledgement Chromatographed AGRANULOCYTOSES mistrustfulness OVEREXPECTATION Stupefyingly Allopolyploid MASSASAUGAS Consumptively Lukewarmnesses Camouflagic Benzaldehyde SOUTHWESTWARD HYPOTHYROIDISM Enfeoffed Crucifixion CONVOLVULUSES PSYCHOANALYZED Subjectivizing Unmuzzle Epimysium KAVAKAVAS Revokable Drawnworks Kolkhozniki Ultraexclusive Exoerythrocytic BOWWOWS BUZZCUT Foxskin Fylfots Duvetyne LAYAWAYS Scuppaug SUFFIXAL QUARTETTE Periwinkle Blitzkriegs Overgoverns Dekkos PAZAZZ Syzygy FOXSKIN Gyttjas Keyways Spurtle Upswung Azulejos Bombyxes Eggfruit jujuisms Asymmetry Awkwardly Bullsnake Afterworld CANDYTUFTS GEWURZTRAMINER Pleuropneumonia Laxly crojik Evzone KUDZUS Popgun Prajna Pulque TSKTSK Warsle Armsful Culprit Ekpwele Klezmer PURVEYS Skyjack Turfman Valvula ZYZZYVA ANEURYSM Ayurveda EARWAXES Fahlband NGULTRUM numchuck Zugzwang ANAPTYXES FALSEFACE GORGONIZE Workmanly Bradykinin Gewurztraminer Agma Atma Cwms Elhi FUJI gyve KOJI Owse Abmho Avgas Axman BUXOM BYWAY Dolce Etwee HAJJI Hijra Oxter Rowth Taxus Twyer Vodka Vulgo Amrita Bupkus Calmly Eczema Emdash EVZONE EXUVIA Frowzy Grosze GYTTJA Logjam Lynxes Offkey PYJAMA Slojds Tocsin Tsktsk TZETZE Ugsome Akvavit Apyrase Envying Flehmen Glowfly Goodman Gumtree Kumquat MUUMUUS OBVERSE Swayful Tramway WICKYUP Zemstva AASVOGEL BEJEEZUS Clerkdom Czarevna DIVVYING Dysgenic Fuelwood Krumkake NEWSWIRE Quadplex Rucksack Snapback SUBTEXTS Wrackful ZUGZWANG Pyroxylin Escarpment Yellowware OBJECTIFYING Auk Bye CWM cwm Eff Ewe Eye Hmm Ilk Imp Kye Oka Old Oms Ose Psi QAT Qat qat QIS qis Rya Tye Udo Uke Umm Use Uta Wud WYE Wye Yob Yuk Zoa Zzz Acme Ajar BUYS Cyan CZAR Djin djin Euro Ikat kbar KVAS Kvas LWEI Lwei Ogam Otic Pfft pfft Ptui QOPH Qoph qoph Smew Tzar Updo Uvea Vrow XYST Xyst Ylem Ywis Zyme ANGST Babka Banjo BAWTY Bumfs BWANA Bwana Civvy COLZA Colza Eject FJELD Fjeld fjeld GWINE Gwine gwine Hajji Hamza KOPJE Kopje Latke Llama Outgo Ozone Phpht Vying Xebec Zlote Afghan BLOWZY Boxful BUQSHA Buqsha CALXES Calxes Fizgig FOLKSY Gewgaw Gingko Ginkgo GROSZE Hepcat HOGTIE Hogtie Humvee INKJET Inkjet Ipecac Kishka KWACHA Kwacha LOGJAM MASJID Masjid MUZJIK Muzjik OFFSET Offset OUTVIE PAXWAX Paxwax QWERTY Qwerty qwerty Ramjet SAYYID Sayyid Subpar Svaraj svaraj Tmeses TOCSIN UPWAFT VIZSLA Vizsla VROUWS Walrus Yttria ALFORJA Alforja BLOWJOB Blowjob Ctenoid DOGVANE Dogvane Gjetost Gravlax HALFWAY Halfway KILLJOY Killjoy Laxness Mahjong MITZVAH Mitzvah Pirojki Sferics Sjambok Slumgum Sovkhoz SUBZERO Ufology Uxorial Backcast Fluxgate POXVIRUS Poxvirus Zwieback Rijstafel Sgraffiti PEROVSKITE Perovskite CATAMARANS LAYAWAYS KAVAKAVAS MASSASAUGAS BAZAAR COAXAL PAPACY FAJITA DEADBEAT Aah Aff Aga Ala Ama Ana Ape Ash Ate Auk Ava Awa Axe Aye Azo QAT Ajar Akee DUAD ABSORBABLE DISCOMBOBULATE DEBTS UPBYE SUBWAY LIGHTBULBS Baa Boa Bra Bub Bye Blab GYBE ISBA KBAR Bwana OBJET OXBOW RUGBY ABVOLT BAWBEE JAZZBO SACBUT OFFBEAT SUBZERO MICROCOCCAL SPECTACULAR EXERCYCLE SCOTCH MUCLUCS CALCSPAR Cab Cob Cru Cub CWM Cwm Clad Cyan CZAR Czar EXCEL BOBCAT EGGCUP HEPCAT MEZCAL OFFCUT SOWCAR Ctenoid BACKCAST MUDDLEHEADEDLY BANDWIDTH DOGDOM BALDERDASH ABDUCE ECDYSES Dab Doc Dry Dub Dye ADZE DJIN Djin UPDO ASDIC BAWDS CYDER DIDST Dwarf OUTDO ADVECT DIKDIK CHEFDOM HAVDALAH SAMIZDAT SEXDECILLION DEGENERATENESS OVERBEJEWELED REAPPEARED KEYSETS FEUED OYEZES CELOTEXES LAEVO Ear Eff Egg Eke Eld Eme End Eon Ess Eta Eve Ewe Eye Euro Exam Eject SHEQEL EFFORTFUL ALFALFAS LIFTOFF TURFSKI LEAFWORM ARGUFYING Fab Flu Fob Fro Fub Fyce PFFT AWFUL FJELD Fjeld NAKFA BAGFUL BOXFUL DAYFLY MISFED SOBFUL ENGAGINGLY BEGOGGLED GUITGUIT ARGYLE BUGSHA Gab Gnu Goa Gul Gym ALGA Glad AVGAS GWINE Gwine PYGMY AFGHAN FIZGIG GEWGAW GINKGO HOGTIE LOGJAM POPGUN SUBGUM ZIGZAG BUSGIRL DOGVANE Gjetost FLUXGATE THROUGHITHER ICHTHYOPHAGOUS PAHOEHOE SHUSHED GLUHWEIN WHEELHORSE RHOMBOHEDRA Had Hmm Hob Hub Hyp KHI BHUT Hwan ANYHOW EXHALE Hryvna MAHZOR MUZHIK TAHSIL MAHJONG OFFHAND BOSHVARK DIVISIBILITIES CICATRICIAL PIXIEISH KIWIFRUIT ZIZIT SAIYID FIFING QIVIUT GIGGING Ice Iff Igg Ilk Imp Ink Ion Ism Its Ivy Ikat Iwis Ixia Izar BIJOU Ipecac JUJUS HAJJES JOJOBA DEEJAY Jab Job Jug FJELD Jnana KOPJE OBJET GYTTJA INKJET LOGJAM MASJID MUZJIK PYJAMA ALFORJA BLOWJOB KILLJOY RIJSTAFEL KRUMKAKES SKOOKUM TICKTACKTOE WORKWEEKS ALKYD MUKLUKS HAWKSHAW Kab Koa Kue Kye DYKE Klik Knap KVAS Kvas BABKA LATKE BUPKES GINGKO INKJET Kwacha OFFKEY BRITZKA SOVKHOZ CELLULOLYTIC HALALAH GUILTLESSLY SYLVA GLEGLY AWLWORT BLACKLY CLEARLY PLUMPLY FLIMFLAM Lab Lob Lug Lye ALSO AXLE Lwei AZLON COLZA Llama CALXES GRAVLAX KILLJOY BIOENGINEERINGS UNSPECIALIZED definitizing AFFECTIVITIES Sociobiologist Lixivium Kiwifruit HYPOPHARYNXES Hybrid DOWNWIND UNUNUNIUM Lightweight shushed QIS qis BANJO INCONVENIENCING UNUNUNIUM ANTIOZONANTS UNBEKNOWNST SNYE LYNXES HORNWORM UNJUSTNESS GNU Nab Nob Nth Nub ACNE ULNA APNEA BONZE Ngwee Nyala COBNUT HRYVNA BIZNAGA HAFNIUM LAXNESS NONGONOCOCCAL PROTOZOAL FOXGLOVE POSTBOURGEOIS SOWCAR VOYAGE KOJI MUCLUCS POLYCYCLIC Dab Doc Dry Dub Dye Off Oka Old Oms Ose Ova Owe Oxo Ogam Otic QOPH Ozone UPPROPPED POSTAPOCALYPTIC IMPALPABLE PURPURA DYSPEPSY EKPWELE Pac Ply Pod Pro Psi Pub PYA Pya EXPO Pfft Ptui GAWPS KOPJE HATPIN HUTZPA MAGPIE SECPAR SUBPAR HALFPIPE EQUIVOQUE FAQIR BUQSHA BURQAS Qat Qua QOPH Qoph FIQUE SQUAB ACQUIT CALQUE QWERTY Qwerty MEZQUIT COTQUEAN EXQUISITE CARRYFORWARDS MICROPROGRAM PERVERTERS FIRSTFRUITS GEWURZTRAMINER BROWRIDGE PYRARGYRITE Rad Rob Rub Rya SRI KRIS VROW WALRUS ALFORJA CLASSLESSNESSES BIOSYSTEMATISTS TSUTSUGAMUSHI SALSAS SOURSOP UPSWEEP Sab Ska Sly Sob Sri Sty Sub Syn OWSE Smew Swab ANGST FUBSY AXSEED BUQSHA FOLKSY GROSZE MASJID OFFSET SVARAJ Svaraj TOCSIN VIZSLA Sferics Sjambok Sgraffiti PEROVSKITE STATUETTES OTOTOXICITY TSKTSK OUTJUTS SALTWORTS PTERODACTYL TZETZE SUBTEXTS CYTOLYTIC Tab Tod Try Tsk Tub Twa Tye EFTS Tzar BAWTY HOGTIE OUTVIE Tmeses FUZZTONE TUMULTUOUSLY CHAUTAUQUAS SUPERLUXURY BUZUKI FURUNCULOSES GUVS PUJA MUUMUUS PLEUROPNEUMONIA KUE Udo Ugh Uke Ulu Umm Uns Upo Use Uta VUG WUD YUK BUYS Uvea VROUWS Ufology Uxorial OVERVIVID AVADAVAT EVOLVE UVULA DIVVYING Vac Voe Vug GYVE KVAS Vrow Vying ABVOLT EVZONE OUTVIE SVARAJ DOGVANE MITZVAH POXVIRUS PEROVSKITE BOWWOWED AWKWARD NEWSWIRE CRWTH TWYER MUGWUMP CWM Wab Woe Wry Wud Wye HWAN LWEI YWIS BWANA BLOWZY PAXWAX QWERTY UPWAFT VROUWS BLOWJOB BUZZWIG HALFWAY MAXIXES EXTRATEXTUAL BUXOM COXAE XYST Xyst EXUDE PYXES Xebec AXSEED CALXES PAXWAX POXVIRUS SYZYGY XYLYLS MYXOCYTE BYWAYS ODYSSEYS GYVE KYAK PYJAMA BUTYRYL YUPPIFYING WYE Yag Yob Yuk BUYS Ylem Ywis VYING SAYYID Yttria PIZZAZZES MEZUZOT ZYZZYVA TZETZE ZUGZWANG GEWURZTRAMINER Zag Zoa Zuz Zzz ADZE CZAR Zyme COLZA Zlote BLOWZY EVZONE GROSZE MUZJIK VIZSLA MITZVAH SUBZERO Zwieback Catamarans Lackadaisically layaways Kavakavas Massasaugas haphazard Leafage Rajah Baobab Taxable Papal Aah Dab Ear Fab Gab Qat qat Sab Vac Wab Yag Zag Uakari Xanthan Absorbable Cobwebbier Thromboembolic bulbul Outbribe Inbye Objet Ebb Gybe Isba Kbar kbar Upby Abmho Babka Debts Oxbow Rugby Abvolt Bawbee Jazzbo Sacbut Sobful Subgum Subpar Ubiety Offbeat Subzero Micrococcal circumcircle Backchecks Acyclic Ectoprocts Excrescence Scotch Calcspar cwm Oca Acme czar Yclad Eggcup Hepcat Mezcal Offcut Sowcar Tchotchke Muddleheadedly Rhododendron dikdik dumdum Adjudge Goldfields Odyl Birdman Bandwidth Edh Udo Adze Updo Asdic Bawds Cyder Didst Outdo Vodka Advect Bedpan Dogdom Slojds Chefdom Ecdyses Bdellium Havdalah Samizdat Sexdecillion Degenerateness Peacekeeper Overbejeweled Semiretirement debriefed Vexednesses Bezel Feued Keyed Leva Cee Eek Ged Reb Tea Web Yea Zed Aeon Xebec Sheqel Effortful Alfalfas Infraspecific flimflam Aftereffect afghan Offkey offset Surfman Satisfying Pfft pfft Awful fjeld Nakfa Bagful Boxful Dayfly Halfway Sferics Ufology Engagingly Eggnogs gorgon Bigwigs guitguit Agma Ugsome eggfruit Polygyny Alga Ogam Avgas Afghan Fizgig Gewgaw Gingko Ginkgo Hogtie Logjam Popgun Zigzag Busgirl Dogvane Slumgum Fluxgate Sgraffiti Throughither Churchmanship Pahoehoe Adenohypophyses Schlemihls Shwa Phpht Whishts Pirozhki wheelhorse Aha Ghi Khi khi mho Ohm Rho rho Bhut Uhlan Anyhow Exhale Mahzor Tahsil Archfoe Fishgig Mahjong Offhand Boshvark Divisibilities minimizing Crucifixion Liripipe Wikiup Bigwigs Gaijin Rigidifying Kiwi Gieing Aid Cig Fib Pia Qis qis Sib Tic Via Xis Yid Zig Eide Aliya Uintaite jujus Hajjes jojoba jimjams Hijra Ajar Djin djin Banjo Eject eject Fjeld fjeld jnana Kopje Objet Gyttja Inkjet Logjam Masjid Muzjik Pyjama Slojds Alforja Blowjob Gjetost Killjoy Mahjong Pirojki Sjambok Rijstafel krumkakes knickknacks Skookum skinking Dikdiks Mukluks Workfolks Lekvar Awkward Ekpwele Sovkhoz Ticktacktoe kye Oka Uke Akee Dyke Ikat kbar Babka Latke Vodka Bupkes Folksy Gingko Ginkgo Inkjet Kishka Offkey Bookman Britzka Pirojki Backcast Cellulolytic Ultraliberalism Flawlessly Alkyls Mildly Elflike Calmly Glegly Atlatls Blackly Bulblet Cleanly clearly Illness Plumply Buhlwork Mantelshelves Old Sly Alga Alps Axle Elhi Klik Ylem Alcid Azlon Colza Llama Zlote Calque Calxes Walrus Gravlax Killjoy Dismemberment maximumly mommies Comsymps Mecamylamine Abmho Amnia Emcee Smegma Filmdom Umteenth Enmeshment Impartment Hmm Oms Acme Cwms Adman Axman Bumfs Dumka Gizmo Hamza Amrita Dimwit Humvee Ramjet Tmeses Upmost Bookman Cumquat Slumgum Surfman nonconcurrence Unthinkingly Annul Enwrap Ethynyl Onscreen Truthfulness Brainlessness Frenzy Grigri Prajna Unmitre Cracknel froufrou Sri Wry Envy Knap Vrow vrow Amnia Apnea Banjo Jinxed Biznaga Laxness Photobiological osteoporoses overencouraged Locoweeds Paduasoys Cookoff Damozel Volvoxes Leiomyoma Dojos Polycyclic Schizogony Gaol Befog Cafes Rewon Taxol Aah Boa Ear Eon Fab Fob Goa Kab Koa Qat qat Rob Sob Tod Udo Vac Wab Woe Yag Yob Zag Zoa Qoph qoph Aorta Xebec proprioceptor phospholipid Hypercomplex pappus Soupspoon Upfold Topwork Googolplex Apnea Bozos Kopje Convoy Popgun Doxology Woodpile Foretopman Eon Lob pya Rob Voe Yob Zoa Qoph qoph Upby Updo Phpht Bupkes Hepcat Inkpot Ipecac Subpar Equivoque Faqir Burqas Aqua qoph equal Fique Squab squab Acquit Buqsha Calque Cinque qwerty Cumquat Mezquit Oquassa Cotquean Exquisite Carryforwards Interferometric Grugrus Choirgirls Armrest Cryopreserve Protomartyrs Erst Orzo Urethra Darkroom Froufrou Browridge crossroad Sri Try Wry Kris Vrow vrow Hijra Walrus Alforja Classlessnesses Assistantship Cosponsorship skysurf Gypsyisms Armsful Coxswain Newsgirl Dullsville Ess Ose Psi Tsk Use Angst Buqsha Folksy Grosze Masjid Offset Tocsin Vizsla Rijstafel Perovskite Statuettes Antimitotic Ultrastructure tsktsk Atlatls Nortriptyline Etwee Gyttja tzetze Utmost Liftgate Extratextual Otic Ptui Bawty Comte Latke Artful Hogtie Outvie Yttria Ctenoid Fuzztone aquaculture Lugubriously Muumuus jujutsus Superluxury Buzuki Dufus Guayule Aurum Cuvee Pupus Queue Eunuch Fuckup Pawpaws Kue Rub Tub Vug vug Wud wud Yuk Zuz Overvivid Convolvuli Pavlova Avgas Chevre Evzone Divvying Gyve Kvas kvas Uvea Humvee Outvie Svaraj svaraj Dogvane Mitzvah Sovkhoz Poxvirus Perovskite Bowwowed Newswire Awkward awlwort Cwms Owns Swum Crwth Twyer Thwartwise cwm Ewe Hwan Lwei Ywis ywis Awful Bwana Gwine gwine Blowzy Dimwit Gewgaw Kwacha Paxwax Qwerty qwerty Upwaft Blowjob Buzzwig Halfway Zwieback Maxixes Extratextual Axle Boxful Myxoid Oxygen Axman Exude Axseed Calxes Jinxed Paxwax Laxness Uxorial Fluxgate Poxvirus Syzygy Xylyls Gypsydom Myxocyte Stymying Pyrargyrite Byways Dysthymia Cockneyfying Fyke Soyuz Hryvna pyjama Cyclohexylamine Aye Eye Kye kye Lye Rya Tye Wye wye Zyme Vying vying Sayyid Pizzazzes Tzitzis Mezuzot zyzzyva Azlon Zugzwang Kolkhoznik Gewurztraminer Zzz Czar czar Bonze Colza Gizmo Hamza Ozone Blowzy Evzone Fizgig Grosze Muzjik Vizsla Britzka Mitzvah Given a word list, look for the shortest word that introduces the greatest number of previously unseen pairs.

Zig design Design
0 views
Kev Quirk 2 weeks ago

Your RSS Reader Is Robbing You

by Antonio Santos Antonio opines that by using RSS feeds instead of visiting people's sites, we're robbing ourselves of enjoying the design many site owners have put a lot of work into. Read post ➡ On the other side of the argument is this post by Christian Cleberg where he argues that using RSS allows us to consume many different sites with typography that we prefer. Maybe the site's font isn't that nice, or it's too bright, too dark, too small. Using RSS normalises the design across all sites and allows readers to have the same experience across all the sites we read. I lean more to Christian's way of thinking, but I do regularly visit people's sites too, just to see the design and how it may have changed over time. It's a simple click of the post title on my RSS reader, Miniflux , so it's simple for me to get the best of both worlds. So I don't think our RSS readers our robbing us - we can have our cake and eat it. Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️ You can reply to this post by email , or leave a comment .

design Design
0 views
Unsung 2 weeks ago

Safari and system design, pt. 2

Around the time I was writing about iPhone’s Safari breaking the expected “tap to jump to the top” gesture , a conversation on social media pointed to yet another thing that this tab control does strangely. A typical use of Safari means two groups of sites: a regular set on the right, and “private” pages on the left (this is what Chrome calls “incognito mode”): = 3x)" srcset="https://unsung.aresluna.org/_media/safari-and-system-design-pt-2/1-framed.1600w.avif" type="image/avif"> As expected, you can tap on either label, and switch to the relevant group with ease: It also feels like you could slide it – and you can, except… …you immediately encounter a Scroll Lock problem . You are not dragging the pill – you are dragging what’s underneath the pill. To switch, you have to go the other way : You can immediately intuit some inherent unpleasant complexity of the whole system – not just in it “going the wrong way,” but also in how it creates room and then contracts it, in two separate steps, after you’re done. The reason is that you can actually have more site groups than just the initial two. You can even drag to where the new site group would be, and create it this way: I normally welcome these kinds of accelerators. But here, this feels overdesigned and confusing, as if someone drugged the tab instead of dragging it. The very same natural gesture – a left swipe – that should feel safe and send you to Private, will now put you in a scary new full-screen/​keyboard-out flow you almost never need. Why this relates to system design is that on/off toggles in iOS were recently redesigned to resemble oblong pills: = 3x)" srcset="https://unsung.aresluna.org/_media/safari-and-system-design-pt-2/6-framed.1600w.avif" type="image/avif"> = 3x)" srcset="https://unsung.aresluna.org/_media/safari-and-system-design-pt-2/7-framed.1600w.avif" type="image/avif"> Those do respond to dragging as you’d expect: Along the same lines, on the springboard pagination pill, dragging to the right means the next page: And so now the system is schizophrenic and identical-looking design primitives mean the opposite things. It’s as if the computer itself kept randomly pressing Scroll Lock for you, preventing you from developing a solid understanding of the system first, and motor memory second. I think the mistakes made here were twofold. First, the design overoptimized for two unnecessary things: people actually using site groups (not common), and ease of use in creating site groups (not important). My slightly cynical hypothesis is that this design presented really well in demos, which sometimes can derail a project. A more cynical theory is that this led to “accidental discoverability” that made the site group metrics look better . Second, and more important part: This particular design received an exception that it didn’t deserve. No one noticed the systemic challenge of similar UI elements doing opposite things, or people who did were not effective in pushing back. The metrics for new feature discovery are easy; the metrics for user confusion or frustration do not usually exist. This is how interaction systems slowly fall apart. As I mentioned in the first part , it is likely that Safari’s exception will now be treated as “blessed,” and start spreading further. Given enough time, more and more pills will go in whatever direction they want when dragged – and people will learn not to trust any of them. (I know the feature is actually called “ tab groups ” but I called it “site groups” intentionally, because otherwise it’s a tabbed control controlling tab groups, and things get confusing really quickly . Also, thank you to Martin Hoffman for initiating this post.) #flow #interface design #ios #process #system design #touch

design Design ios iOS
0 views
The Jolly Teapot 2 weeks ago

July 2026 blend of links

Some links don’t call for a full blog post, but sometimes I still want to share the good stuff I encounter on the web, in a short, quick format that fits with my schedule of raising a baby , summer activities, and a few ludicrous displays to watch. Things I would like to tell my 10 year old self (Winnie Lim) – Another really beautiful post from Winnie Lim, and this is one filled with precious pieces of advice. I was also moved by her own tribute to the late Om Malik. Ninety–ninety rule – When I learned about this, I immediately thought “ Oh, this is so good: I’m going to tell everyone I know that works in software about it ”. If you’re one of these people, sorry (not sorry) in advance. (via Gruber ) Robert Smith’s favourite songs from the 1980s – Excellent… [clears throat] curated list indeed, especially my cup of tea since it features no less than two songs written by Prince. (via Daniel Benneworth-Gray ) Wipr Filtr – Newest feature of my favourite content blocker: I want to describe it as a sort-of content filter but operated at the network level, so it’s not only efficient in Safari but other apps connected to the internet (something like that; pretty cool). GoldenEye Villa – Well, now this is a place I could see myself spending a year or two. Designing Friction – “ Friction drives our engagement. Friction, in this context, is not synonymous with either anger or conflict, nor is it malfunctioning technology. Friction is an essential ingredient that makes up our humanness and sparks human connection. Friction is a lively, intrinsic experience. ” (via Carl Barenbrug ) A.I. Economics for Dummies (McSweeney’s) – “ A few examples to help the average layperson understand the business side of A.I. ” This is gold. Meet the Sad Wives of A.I. – “ In New York, I had a friend who’s a teacher, a friend who’s a nurse, a friend in fashion, a friend in finance—and none of us talked about our jobs when we went out. Every time I go out in San Francisco, it feels like I’m at a work happy hour. I don’t get it. ” cc.me — email – In the context of iCloud’s Hide My Email being a bit shite , this is a very welcome service coming from the great folks at xmit (the tool I use to host this site); it shouldn’t be free, but it is. PopsicleBoat – “ A comment section for your blog, without you having to run a comment section. ” This makes a lot of sense to me. I don’t use comments on this blog, but I can see how this can be very useful on certain posts that would call for a more public exchange than just direct emails from readers. When I do need a place like this (especially since I’m not on social media anymore), this is certainly what I will use (also: no ads, no tracking).

ai AI design Design culture Culture
0 views
Unsung 2 weeks ago

Five moments in snapping history

Bear (a notetaking tool) has simple image resizing, with one extra nicety – if your images are near each other, resizing one will snap to the width of the other: In the Finder, columns snap to the width necessary to keep all the names untruncated – and not one pixel more: (Sidebar: This is also the only place I’m mentioning today that nicely uses the trackpad’s haptic feedback at the snap moment. I tried to indicate it in the video; this is not the final visual treatment I’m thinking of, but let me know if this kind of visualization of haptics feels useful to you!) macOS does something really interesting when you get its windows close to each other. Instead of typical snapping – pulling the thing you hold toward the other item like a magnet – it instead prevents you from going further for a while, in either direction. Perhaps the right analog here would be glue : If initially feels a bit funny, but I think I like it. It’s less aggressive and avoids needing some sort of cancellation (an option or a modifier key) if you don’t want it, because it never feels in a way. It also works for matching heights, like in Bear: In Figma, building atop regular snapping, we introduced something I awkwardly called “self-snapping”: if your objects are inside a container, the container will snap its padding to whatever it sees on the other side, without any explicit auto layout/​flexbox: I am sharing these five examples (and one from before ) because I think they exemplify a nice thing: precision without bureaucracy. In each case you could imagine an explicit heavy option somewhere in the menu… …that would feel slow and cumbersome. Instead, these take the freedom of direct manipulation and sprinkle just enough almost-invisible structure in a moment where that structure is undeniably useful. (Of course, you still might want explicit options somewhere in the menu or your command palette, if only for accessibility reasons.) I like that these quiet features have your back and make you look good, and that their creators understand that something almost aligned can feel worse than something completely misaligned. #bear #complexity #direct manipulation #interface design #mouse Bear: Set Image Width… macOS: Match Window Heights Finder: Restore Column Width Figma: Unify Padding

design Design frontend Frontend ui UI
0 views
Anton Sten 3 weeks ago

Working backwards

This weekend I visited a friend who studies at an art school. She showed me around the studios, walls covered in figure drawings, still lifes, and portrait studies in various stages of completion. It brought back memories from my own school years. I studied at Hyper Island 25 years ago, back when the program was called New Media Design, believe it or not. Different school, different medium, but the same feeling of a place where people are there to learn how to see. Because on paper, what she does and what I do have little in common. Design solves a problem. There's a user, a constraint, a business goal, someone waiting on the other end who needs to accomplish something. Art carries no such obligation. Donald Judd said it best in seven words: "Design has to work. Art does not." — Donald Judd That difference shapes everything. When I design something, my taste is in service of someone else's outcome. When my friend paints, the outcome is the painting. Neither is harder or nobler than the other, but they are different jobs. Still, the longer I walked around, the more I noticed how much of her training would make anyone a better designer. In one of the rooms, someone had taped up a printout titled "Good Habits." Four items: step back to look at your work from a distance, use a mirror or flip your piece upside down, squint to see the big shapes, take a break and clear your mind. That's painting advice. It's also a better summary of senior design behavior than most things I've read in design books. Understanding the big picture is often what separates senior designers from junior ones. Juniors polish the component in front of them. Seniors step back and ask whether the screen makes sense in the flow, whether the flow makes sense in the product, whether the product makes sense at all. And squinting has a direct design equivalent. In my book I write about the one-handed test, which came out of my work at Summer Health. A parent booking a doctor's appointment usually has one hand free because the other one is holding their child, and their focus is split at best. Squinting at a painting and using an app while bouncing a feverish kid do the same thing: they strip away the details and reveal whether the big shapes hold up. If the hierarchy only works for a calm person with two hands and full attention, it doesn't work. Next to the habits hung another printout: "Focus Glasses." Alignments, angles, measurements, implied lines. Ways of looking, each one training your eye on a specific relationship within the work. This is the essence of craft, and honestly, it's the skill I fear is going missing as more people design things through prompts. The tools will catch up on some of it. I already use a couple of skills in Claude Code to check that font sizes hold a sensible ratio, that spacing follows a scale. But a tool that checks ratios can't tell you what to look for when something feels off and the checklist comes back clean. That still takes a trained eye. David Hoang wrote about this recently in a piece called Training design senses . His argument is that taste and judgment don't arrive with a job title, they get built through deliberate practice, the way a musician or boxer trains. His first year of art school allowed no color: charcoal, still lifes, figure drawing, and copying the old masters. His advice for interface designers is to do the equivalent. Put a great screen on your canvas and rebuild it from scratch, noting the margins, the spacing, the type sizes, and asking why each decision works. He also passes along a line from a colleague that stuck with me: someone can have twenty years of experience at the same skill level. The thing that struck me most came at the end of the visit. My friend told me about an exercise where they take a finished painting and deconstruct it. They start with the final piece and step backwards through it, layer by layer, to understand how the result was actually achieved. The image below shows what that looks like in practice: the same composition as a sketch, as an underpainting, and as the finished piece, side by side on the wall. Samuel Hulick did something like this for products years ago. His site UserOnboard broke down onboarding flows screen by screen, annotating what worked and what didn't, and it's still online. At the time it felt like a clever content format. Walking through that studio, I realized it was the same exercise the art students do: take a finished thing and walk backwards until you understand how it was built. I wonder if we need more of this now, not less. We've reached a point where an idea becomes a prompt and a prompt becomes an app in the store in days. The finished result appears almost instantly, and nobody steps backwards through anything. Meanwhile these students spend weeks deconstructing a single painting to understand its structure. One of those groups is building the judgment to know why something works. I'm not sure it's the faster one.

career Career design Design
0 views