Posts in Design (20 found)
Unsung Today

“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

design Design
3 views
Unsung 4 days ago

Medium’s writerly favicons

One of the small things I added to Medium in early 2016 was a change to the favicon: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/mediums-writerly-favicons/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/mediums-writerly-favicons/1.1600w.avif" type="image/avif"> It came from an observation about the writing process. When writing on Medium, you are likely to have a bunch of Medium tabs open with other posts, yours or otherwise, for reference… but you usually only have one tab you’re writing in. Why not make it extra visible so that you can easily come back to it? But there was a second, more emotional reason. Writing is hard. Many people never touch the “New story” button, on Medium or otherwise. I wanted the writers to feel extra amazing, with the interface itself giving them a nod of recognition. (Visually, the hollow draft icon was also meant to be a “scaffolding” of the published story icon.) I’d love to hear more about websites or web apps that are using favicons in a particularly useful or delightful fashion. If you have examples, I would appreciate a note! #details #iconography #marcin wichary #web

web-development Web Development design Design
0 views
Charalampos Kardaris 4 days ago

New font

I saw the iA Writer Quattro font and I liked it. So far, I was not explicitly using a font-family for this website and instead relied on the default sans-serif font provided by the browser. I thought it is time to change that and present a more unified experience for all readers. What do you think?

design Design
0 views
Jim Nielsen 1 weeks ago

A Sloppy Interface Is a Security Liability 

In his talk “Why AI Is Breaking Software Security As We Know It” ( my notes here ), Feross Aboukhadijeh talks about the Axios npm incident and how the maintainer got phished by succumbing to (amongst other things) a faux Microsoft Teams interface: this is the kind of thing that AI makes easy to do, because it can vibe code that whole fake Microsoft Teams interface pretty trivially You’ve probably seen these: interfaces designed to look like some other product in order to provide a facade of authenticity and exploit someone. What struck me in listening to Feross was this idea of how the quality of your interfaces can be a protection mechanism against attackers. I don’t know if I’ve ever heard someone say that out loud — interface and interaction design as a security control — but I’m saying it. Now, of course, not everyone will consciously notice the level of polish that world-class professionals imbue in digital interfaces. But some will. Personally, I’ve always used the quality and care of digital experiences as a heuristic for judging authenticity — and competency to be honest, e.g. “If this UI is so bad, what else will surely be bad?” Granted, it was a much more dependable heuristic before AI came along. But even now, I can still suss out slop and carelessness which is a skill that continues to be a reliable, protective form of digital literacy (for me). That’s all to say: a sloppy, careless approach to interface design not only hurts your brand in terms of customer perception, but it can be an attack vector. The easier it is to sloppily reproduce what you sloppily ship, the easier it will be for your product or brand to be leveraged as a vehicle for exploiting your customers. If everything you make was produced from a single prompt, then everyone else is one prompt away from imitating you. The easier something is to make, the more likely it’ll be in the genre of “easy to exploit”. One way to protect yourself (it’s not the only one way, security is never a binary “you are / are not secure”) is to do that extra work to make your experiences go above and beyond what you can easily get out of an LLM. The protection here is having an interface and experience that is hard to replicate with the same level of fidelity that discerning users will notice — things like micro-interactions, loading behavior, UI copy and voice, handling of edge-cases, etc. That’s the stuff that’s hard (and expensive) to fake because it’s hard (and expensive) to notice you need to fake it. tl;dr — Fidelity to craft is not only valuable from a product standpoint, but it’s also valuable from security standpoint. If attackers are going after low-hanging fruit, your fruit will be harder to reach if it’s up high. Reply via: Email · Mastodon · Bluesky

security Security design Design
0 views
Unsung 2 weeks ago

“I think there’s a lot of value in these.”

Speaking of user interface guidelines, developer Matt Sephton and others compiled many of Apple’s human interface guidelines , starting from 1980, all the way to 2014, including some goodies like early drafts, NeXT, Newton, and so on. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/1.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/2.1600w.avif" type="image/avif"> Elsewhere, designer Geof Crowl put together his own list that goes broad instead of deep, including style guides other than Apple’s, too. The list was made in 2020 and a few links are already broken, but there are some gems here like the modern Designing for Playdate , or the classic Zen of Palm from 2003. You can learn a lot just by grabbing one and scanning it. Let me add a few more I know of: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/3.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/i-think-theres-a-lot-of-value-in-these/4.1600w.avif" type="image/avif"> #interface design #mouse #principles #style guides Amiga User Interface Style Guide (1991) Magic Cap Concepts (1995) with a strange subtitle “Everything right is wrong again” Java Look and Feel Design Guidelines (1999) Windows Interface Guidelines for Software Design (1995)

design Design frontend Frontend programming Programming java Java
0 views
Unsung 2 weeks ago

“If nothing happened, you probably did not press the button quickly enough the second time.”

I like learning new things, and I like learning new old things. I was looking at Apple Human Interface Guidelines from 1987 and this passage caught my attention: The most common use of double-clicking is as a shortcut way to perform an action. For example, clicking twice on an icon is a faster way to open it than clicking once to select it, then choosing Open from the File menu; clicking twice on a word to select it is faster than dragging through it. I knew that double click an icon was a shortcut to the first action (typically Open), but I never really thought of double-clicking a word as a faster way to drag across to select it – even though, in hindsight, it makes perfect sense. Another vintage thing I learned of recently from a coworker is this, also covered in the 1987 HIG: If the user begins a double-click sequence, but then drags the mouse between the mouse- down and the mouse-up of the second click, the selection becomes a range of words rather than a single word. This doesn’t feel (to me) like a very pleasant gesture to perform repeatedly, but what feels nice about it is that it automatically snaps the selection to the endings of the words: Part of me would prefer this to be the default behaviour when selecting more than 3 words, or so, so you could be less precise. Anyway. The double clicking to perform default action applies to a lot of lists of things. Here are some examples from Scrivener, Word, and Lightroom – you can double click on each of these items to proceed, without having to select and click the button: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-nothing-happened-you-probably-did-not-press-the-button-quickly-enough-the-second-time/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-nothing-happened-you-probably-did-not-press-the-button-quickly-enough-the-second-time/2.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-nothing-happened-you-probably-did-not-press-the-button-quickly-enough-the-second-time/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-nothing-happened-you-probably-did-not-press-the-button-quickly-enough-the-second-time/3.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-nothing-happened-you-probably-did-not-press-the-button-quickly-enough-the-second-time/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-nothing-happened-you-probably-did-not-press-the-button-quickly-enough-the-second-time/4.1600w.avif" type="image/avif"> But sometimes the creators of such dialogs forget. Here’s Screen Sharing in MacOS, and a notification in Chrome where only the slow path is available – double clicking on items doesn’t do anything: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-nothing-happened-you-probably-did-not-press-the-button-quickly-enough-the-second-time/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-nothing-happened-you-probably-did-not-press-the-button-quickly-enough-the-second-time/5.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-nothing-happened-you-probably-did-not-press-the-button-quickly-enough-the-second-time/6.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/if-nothing-happened-you-probably-did-not-press-the-button-quickly-enough-the-second-time/6.1600w.avif" type="image/avif"> The tricky part about not being a good citizen of a shared user interface is that those omissions aren’t just local to your app – they can ruin the gesture in other places, as people’s fingers learn to distrust it in not just your app, but in general. (The quote in the title is from Apple Macintosh User’s Handbook .) #flow #mouse #text editing

design Design tutorial Tutorial
0 views
Unsung 2 weeks ago

Name pronunciation in Asana

A nice moment I spotted in Asana – you can quickly record your name pronunciation: As someone who has “How to pronounce my name” in the footer of his website, it’s much appreciated! The result appears as a simple icon next to your name: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/name-pronunciation-in-asana/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/name-pronunciation-in-asana/2.1600w.avif" type="image/avif"> For discoverability, if you spot this speaker icon on someone else’s profile yet, it shouldn’t be that hard to connect it to the microphone on your own profile that allows you to record: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/name-pronunciation-in-asana/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/name-pronunciation-in-asana/3.1600w.avif" type="image/avif"> #details

web-development Web Development business Business design Design
0 views
Unsung 2 weeks ago

Tap to top: Ivory

Safari broke tap to top for tabs (say it three times fast), and Bear added two-fingers gestures . Ivory – a Mastodon client for iOS – tries a different approach in a slightly different setting. The normal tap to top gesture works as expected, but tapping the top again returns you back where you were before: I believe this is meant to be a small gesture of help if you tap to top accidentally, yet I am not entirely sure it’s effective. Would you, in a moment of panic, decide to do the same thing again, after years where every other gesture like this in the entire system taught you those taps are idempotent ? It gets a little bit worse, too. There is another established standard of going to the top – tap the selected tab again. This works across the entire operating system, too. But Ivory changes it, requiring you to tap twice, not once: I don’t have access to the combined feedback of Ivory’s users, but I am much less of a fan of this than of Bear’s approach , as it doesn’t feel like it comes together as a system. At the bottom of the screen, the interface teaches you that you have to tap one more time than usual, likely putting in your fingers the idea that you just have to tap many times , especially if you never figure out it’s a double tap and not two taps that trigger the interaction. But then, at the top, this is how the interface reacts like this when you do exactly the same thing: It feels like a system that’s well-intentioned, but inconsistent not just with the rest of iOS, but also with itself. #system design #touch

ios iOS design Design
0 views
Unsung 2 weeks ago

Tap to top: Bear

I praised the note-taking app Bear before for its memory ; the app would always remember your last-visited note and the precise place within it, even if it had every right to forget it. But there is a general problem here: memory that kicks in when not expected can be frustrating, as you have to undo its results and “reset to normal.” For Bear that’s not a problem, though, right? The whole iOS has a nice “ tap near the top to scroll to the top ” gesture that would work here as well, making it easy to recover if you return to the note where you last happened to type. Except, with any writing app, the very bottom is as valid of a destination as the very top. Bear designers understood it and tried to solve it in a new way, by adding two gestures: a two-finger swipe up takes you to the very top, and a two-finger swipe down to the very bottom: It doesn’t quite work as well as I hoped – for some reason, it scrolls way too far down, and does feel a bit sticky mechanically. It’s also, like any complex gesture , not very discoverable. But here’s where Bear tries to help, by… adding even more gestures atop these two. There is a two-finger swipe left or right for jumping back and forward in history… …and even a two-finger tap to reveal a navigation menu. That last one feels like overkill to me, but there is something interesting about the app building an entire little universe of compatible gestures – “Come here for all your navigation needs!” – knowing that it increases the chances users will develop a habit of learning and using them. (The gestures also work whether you’re in view or edit mode.) I am curious, though: Would allowing to tap somewhere near the bottom edge not work as the “obvious” solution to get all the way down? #bear #system design #text editing #touch

mobile Mobile design Design
0 views
David Bushell 2 weeks ago

Valley Fold Ltd

I’ve already announced my new company half a dozen times by now. I figured it was about time I gave real details, so here’s the name and logo! Valley Fold is my new home for professional services… once I’ve finished the website. I’m not one for big splashy launches, I’ll probably just hit deploy and let people discover it. The brand and logo were designed by my very patient friend at Axia Create . George and I worked on concepts for several names, all of which I pre-emptively bought domains for (…ouch). Following feedback from trusted peers a clear winner stood out. Valley Fold happened to be the only name we both independently scribbled down early. For those unfamiliar, “valley fold” comes from origami, an art form that has partially defined my aesthetic since college days . (The website may have some spiel to explain.) After the grueling task of my indecisiveness — we’ve been discussing this for a year — George is away on holiday. That leaves me guessing how he designed the logo. Probably like this: I’m joking, obviously. That’s nonsense. The logo fits on a square grid. It’s a custom logotype adapted from an existing font. We created a new “V” and “Y” and tightened the corners across all characters. The “L” were narrowed and kerning snaps neatly to the grid. More importantly, I love it! I’ve been secretly rocking the logo as a web button all month. I had fun pixel aligning the logo at such a small size. The tail of the “Y” is offset to the left to avoid anti-aliasing. The web button side quest has delayed the actual website. I’ll show more of the brand when version one of the website launches. I’m aiming for early September. I’d like to spend months designing the perfect site but client work takes precedence. Thankfully I’ve been busy. I have to get something online soon though. The nice thing about websites is that you can redesign them again and again. Valley Fold is a big change but also a little one because my services remain the same. I’ve been making websites for coming on two decades now. Websites for real people! I plan to keep doing that for many years to come. Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds.

business Business marketing Marketing design Design
0 views
Unsung 2 weeks ago

Linear’s visual key feedback

The task manager app Linear does something interesting I have not seen before. In the keyboard shortcut tooltips, it highlights the modifier keys you already pressed, to give you confirmation you’re on the right track: I think this is nice, particularly given that the modifier key situation is kind of a mess , and particularly if you consider some keyboards present their modifier keys like this: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/linears-visual-key-feedback/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/linears-visual-key-feedback/3.1600w.avif" type="image/avif"> I think it’s valuable to offer a connection between your fingers touching keys and something happening onscreen in real time – similarly how the blinker arrow in your car pulses exactly at the same rate as the sound it makes, to help you connect the two. However, Linear does not do this in all the contexts: While the first two videos might be simply bugs, I am not sure about the last three. It’s entirely possible this was done intentionally because these surfaces – the menus, the command palette, and the keyboard shortcut pane – do not support actually invoking the shortcuts. (Pressing the listed keys would not actually achieve anything.) But I still wonder if this was a good call. One of the most important things for any new systemic pattern is building trust: making sure it’s consistently applied in all the nooks and crannies so that the user can understand what it does, learn to rely on it, and form the habit. Just one place where it doesn’t work might make it easy to just give up on it altogether. Perhaps this is an example of how hard it is to design a cohesive system, which in Linear’s case is compounded by the fact that a lot of shortcuts start with regular keys like G and O and P, exacerbating focus issues. Either way, it’s delightful to see someone doing something new in this space. #above and beyond #keyboard #system design

design Design
0 views
Unsung 3 weeks ago

Arno Beck’s art

I am generally not a fan of typewritten art, because at some point it all starts to feel a bit same’y, and the gimmick of using a typewriter as a paintbrush wears off pretty quickly. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/1.1600w.avif" type="image/avif"> But these drawings by German artist Arno Beck caught my attention, because it feels like they playfully remix three eras: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/2.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/3.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/4.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/5.1600w.avif" type="image/avif"> In case this interests you, in 2018 I gave a 46-minute talk called “The abridged history of having fun with keyboards” that’s a (hopefully fun) walkthrough of this whole space: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/yt1-play.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/arno-becks-art/yt1-play.1600w.avif" type="image/avif"> #art #conference talk #games #marcin wichary #youtube overtyping keyboard art (early 1900s), the sort of photorealistic smooth shading I most associate with ASCII/​ANSI art (1990s), big pixels from early home videogames (1980s).

culture Culture design Design gaming Gaming
0 views
yakko 3 weeks ago

How my vibe coded website looks like a designer made it

How I used coding agents to design the Railcode website as a non-designer — the prompts, the forks, the playgrounds, and the dead ends.

design Design ai AI web-development Web Development
0 views
Unsung 3 weeks ago

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 3 weeks 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 3 weeks 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 3 weeks 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 weeks 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 3 weeks 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 3 weeks 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