A little story I wrote to one of my thesis advisees. I wrote it in German and leave it up to your browser to translate it for you. You all have the tools now.

Lustiges Story: Mir werden die Möglichkeiten Word Dokumenten zu verarbeiten immer weiter eingeschränkt. Ich musste folgendes machen:

1. Doppelklick aufs Dokument auf dem Mac.
2. Das Editieren auf dem Mac ist mit meiner HFU-Lizenz nicht erlaubt.
3. Dokument im Office/Word für Web hochladen.
4. Dokument ist (anscheinend) in einem sehr alten Kompatibilitätsmodus gespeichert. Das Hinzufügen von Bildern (z.B. Unterschrift) wird im Web-UI nicht unterstützt.
5. Hinweis: das Dokument auf dem Desktop öffnen und im neuen Format speichern. GRUMMEL. 😡
6. Dokument an meinem Firmenkonto gesendet.
7. Windows Arbeitslaptop geöffnet und Dokument aus dem Mail runtergeladen.
8. Dokument in Word für Windows konvertiert.
9. Sichergestellt, dass das Dokument nicht mit Firmenverschlüsselung gespeichert wurde.
10. Zurücksenden ans privat E-Mail.
11. Nochmals runterladen und im Web-UI hochladen.
12. Bild vom Unterschrift endlich eingefügt und erfolgreich gespeichert.

Hoffentlich bleibt mir das Editieren im Web weiterhin eine Option.

This is how Apple gets its users to update to newer versions of its operating systems. I checked whether there were any updates and saw that Sequoia—which I still have installed because I am not interested in a whole new, worse UI—had an update.

Select to update MacOS Sequoia

I select to see information about updating macOS Sequioa and got the following dialog, cheerfully ready to “upgrade”.

Apple tries to trick me into upgrading to Tahoe

Stick it in your ear, Apple. I’m not interested.

When I reboot in a few minutes, I 100% expect to see it ask me to enable Apple Intelligence, which I’ve always been able to skip. I will continue to skip it for as long as I can but I realize that I am not in charge, not really.

I continue to avoid the Tahoe upgrade and the Apple Intelligence integration only because Apple allows me to.

For now.

This is a lament from the beginning of 2024 but it still applied in 2025 and will probably still apply in 2026.

It’s the start of a new year, so it’s time to download the yearly salary certificate.

I checked out the web site.

EnshittificationThe generated-documents folder is empty. Reload. Nothing. Switch to a different folder. Switch back. Now there are two folders, one for 2023 and one for 2024.

The documents are all called the same thing. If you download the document out of the app, it gets a nonsensical name.

The search doesn’t find more than two copies of the document with that name, instead of matching all 14 of them. How do you get to the other same-named documents?

When I close the web page, it asks me to save changes. What changes? I browsed documents. What changes?

I checked out the app.

The app purports to support FaceID, but it doesn’t work ….

I had forgotten my password, so I reset it with the web site. Now the app doesn’t work anymore. The login asks for a username and password, but also a database URL, so I can’t use that.

I log back in to the web site and look around. There are a bunch of icons all the way at the top left. None of them has anything promising. Along the top are more controls … nothing. All by itself, at the bottom-left is a sphere on top of an inverted hemisphere, which is probably a user. Click. Menu of options. “App-Registrierung”. That’s it. QR Code.

QR Code? What is that? Does it tell me where to look for a QR Code? Of course not.

There’s no search in the app. I can’t find the QR code.

So I download the documents one by one from the web site.

Once I had the documents downloaded, I renamed a bunch of them based on their contents and moved them.

Now iCloud won’t sync them back so that I can get to them from my other machine.

I’m out. No more for today.

A friend recently asked me to review their UI/UX design in a private app they’d written. I responded with the following in an e-mail, reproduced and lightly edited/extended here for limited posterity.

The following factors strongly influence and/or limit the kind of review I’ll be able to provide.

• You dropped the app into my lap with no introduction whatsoever. I don’t even know what the app is supposed to do.
• I don’t know what experience you have in UI/UX. I’m assuming not a tremendous amount, but that you have good instincts that can be honed.
• I will, as usual, start from, ‘in the beginning, there was nothing,’ and proceed from there.

Here we go.

Terms

UI UX Design

• UI is “user interface”, encompassing the look and feel of components in a UI
• UX is “user experience”, encompassing the underlying concepts, like how to handle lists, large lists, how to select items in a UI, how many items are represented with which controls, etc. There are even deeper concepts, like how to group controls, how to handle navigation, etc., etc., etc.

My qualifications (a short history)

A bit of history about me first. My experience in this whole area is as follows.

When I was coming up in the early-to-mid 1990s, there really were no UI/UX designers for most software projects. Everyone worked on their instincts. Projects were managed completely differently, with no bug trackers, so you can imagine that no-one really thought much about providing UI/UX guidance in any structured way.

It was left up to the programmers to decide how things looked, and programmers were the ones that had to start figuring out that UI and UX weren’t the same thing. Programmers started applying architectural rigor to UIs. You’d come up with common controls. You’d use a common palette. I remember hand-drawing hundreds of icons. I remember writing code to make the Windows 95 3D-look for our custom buttons because there was no standard support for icon buttons.

I built my own web site long ago, with a highly standardized framework and, hence, user interface driving it. I am a huge fan of CSS and, thus, consistency.

I’ve built a lot of software where we had to “wing it” and come up with a coherent UI/UX on our own because the client wasn’t willing to pay for an external designer.

I have often built UIs and UXs that I think are good enough, or even pretty good.

I know what the rules are, in general.

• Know what your use cases are.
• Know who your actors are (user capabilities).
• Be consistent.
• Lean on the platform wherever possible.
• Lean on metaphors that are well-known to the target culture.

For general-purpose software where you can’t control for the audience:

• Be aware that other cultures have different expectations.
• Be aware that people have wildly different abilities.

So, that’s the background on me and why I simultaneously believe that UI/UX designers are essential and also that I’m also pretty good at building coherent UIs. I’m at least pretty good/qualified at figuring out whether other UIs are coherent and coming up with what I think are reasonable suggestions for making them so.

Some background on UI/UX

Since I wasn’t told what the app does, I’m left to “discover” it on my own. This is one of the important dimensions of UX design: how “discoverable” are the concepts and features of a UI? How much external support and written guidance do you need to provide in order for a target user to be able to use the app as intended? How much of the app is discoverable? Do the discoverable features form a coherent layer of functionality that serves a target group, i.e., “use cases”?

Another interesting question is: is the goal of the app to be easily discoverable? For example, some games encourage reading the manual and figuring things out with more effort. For apps that straddle the world between productivity app and game, it’s worth thinking about and noting what the desired effect is. Perhaps a bit of frustration is what you’re going for.

Note that the entire app doesn’t have to have the same level of discoverability. Advanced use cases can be addressed with less discoverable UX. Those are what we would call “learnable” UI/UX. You aren’t likely to discover it on your own but, once shown, you can “learn” it relatively easily.

A lot of UI and UX machinery that we consider to be intuitive and coherent is actually based on patterns established in our operating systems, tools, devices, and apps over decades. These have often been refined over decades of hard-won knowledge about people with widely differing levels of access. The web standards are very much like this. You ignore these standard into which so many organizations have invested so much to your detriment. It’s often best to lean on these commonly understood visual languages unless there’s a strong reason not to.

Some stuff about your app

These are mostly just observations and questions I made about the app in question. I include them here to illustrate the style of the review.

General

• I tested the web version.
• The iOS version didn’t want to start; I didn’t investigate whether that’s a configuration problem on my end.
• The “About” page crashes for me, so I wasn’t able to learn what you think the app’s purpose is.

Use cases

• I’m not confident that I discovered the use case for the app.
• I can see these:

  • User wants to add an entry to a log.
  • User wants to view existing log entries.
  • User wants to see information about the application.

UX

• You have two different types of input controls (the first three are one type; the fourth and fifth are another type) and it isn’t clear why.
• On my laptop, the fourth and fifth inputs as well as the submit button do not appear on-screen (there’s a scroll bar).
• Given the scrolling, it draws attention to how much space the nearly empty header takes. What is its purpose?
• The bottom has three buttons that also take up about 2cm of vertical screen space. Are we sure that’s necessary?
• The validation is enforced, but not clear.

UI

• It’s not clear which fields are required.
• The line-breaks in the character-count widgets are odd.
• It feels like these could fit somewhere else that doesn’t use as much space.
• The color choices are unique, which is fine.
• The fore- and background colors do not have enough contrast to one another, which is not.
• The “Record” icon is a “save” diskette, which is a bit confusing.
• The “Log” icon makes sense for users of Git: is that your audience?
• Do you even need icons if you have text? What if you made the button look more like buttons?
• It is not clear that the “submit” button is disabled when you haven’t entered everything.

Recommendations

• Make sure that the submit button is always on-screen.
• Consider combining the header/footer to save space.
• This about whether you want to have two different ways of collecting text/showing character count.
• There are more responsive ways to do this with CSS grid layouts (which are perfect for apps like this).

The documentation page Stories of Web Users / How People with Disabilities Use the Web by W3C (WAI (Web Accessibility Initiative)) describes nine users, each of whom describes how they work with the Internet, as well as which assistive technologies they use to access text, audio, and video content. Each of them also has a list of use cases (“Barrier examples”), accompanied by solutions that would work for them and their particular restrictions.

Stories

The people range widely in capability.

There’s Marta, who is deaf and blind and who is “taking classes in fashion design and knows she will need to discuss her unique needs with the college since she will likely need class materials to be available on her braille display.”. I mean, she’s nearly blind and wants to be a fashion designer? Are we just not even trying to match capabilities to dreams anymore? I’m sure she has a sense of style but her ability to communicate it is not just limited, but just not efficient, no matter how accessible you make web sites or tools.

Lakshmi, who is completely blind, is a more typical example of a user who is completely dependent on a screenreader that only really works well with well-structured, semantically sound pages that clearly label all elements (either in the content itself or using ARIA), with headings and a logical structure that can be easily navigated.

There’s also Ade, who has limited use of his arms (and thus a pointing device). This the kind of ailment that could happen to anyone, should an accident temporarily rob you of the use of one or both arms. Keyboard navigation is paramount for Ade—and a lot of users at various times.

Elias has low vision, hand tremor, and mild short-term memory loss (he’s 85). This comes for all of us, if we’re lucky. Tiny text, silly contrasts, squirrelly fonts, and designers self-pleasuring themselves are the death of the web for these people. Large tables can be nearly unusable when zoomed beyond the size at which they were designed. Lexie, who has “deuteranopia and protanopia”, also has problems with contrasts that other people can easily distinguish.

Ian is autistic, for whom “[w]ebsites that spell everything out and don’t use metaphors are easier for me to understand.” This is one I’d not considered in terms of a disability, but only because much of the world speaks English, but at B2 level or much less. They will understand basic-to-intermediate communication but you can’t be breaking out idioms (there’s one right there) that are highly culturally dependent, or even generationally dependent. Ian’s not going to understand your clever quips.

This is where things get quite difficult. To what degree do you dilute your presentation? Do you want to make art or something that everyone can use? Or is it good to keep Ian and non-native readers/listeners in mind, just in case you can quickly and easily think of a way of making something that is both artistic and accessible. A win-win.

That also applies to users like Sophie, who has Down’s Syndrome and gets “confused and overwhelmed when I’m on a page that has a lot of text.” Look, maybe not everything is for Sophie, but this whole section makes me remember that non-native readers are also very limited in their ability to absorb text quickly—or at all. If the writing style is too complex, then they’ll be unable to use your site.

This doesn’t mean that you should write down to the lowest common denominator! It just means that you should keep it in mind, wielding your rapier wit and demonstrating your erudition where appropriate rather than partout. If you can’t control yourself—or don’t want to—then you can make sure that text is selectable and extractable so that LLM-based summarizers can manipulate it. This is a form of progressive enhancement as well—some readers will see the high-falutin’ version, while others will read a bare-bones summary, according to their needs and wishes.

This same need also comes from Dhruv, who is deaf. He needs accurate captions in order to participate in classes or watch videos. Controls that allow him to slow down the content or easily pause/restart it are also immensely helpful. This goes for people watching content who are either not so quick on the uptake, who tire more quickly than others, or who are viewing content in a non-native language.

Stefan has ADHD and dyslexia and falls somewhat into the same camp. I am much less a fan, though, of the rainbow-colored, karaoke-style-animated, and hard-coded captions right in the middle of the video that have begun appearing in many places, especially in short videos intended for dissemination on social-media networks like TikTok. This is not a progressive enhancement I find them incredibly distracting, pulling attention away from the actual video, which, for me, is often a demonstration of a programming technique.

We all need accessibility sometimes

Honestly, this is required reading for anyone building user interfaces. It really makes you think about what you’re building. My main takeaway is that we all have varying capabilities at various times. Throughout our lives, we will acquire and lose capabilities. Sometimes our abilities range throughout the day, or from day to day. Are you holding a baby in one hand? Can you navigate the site with the keyboard? Did you break an arm? Did you have surgery on your eye? Are you tired? Sick? Is your screen really small? Really big? Did you get interrupted while filling out a form? Are you working in a non-native language? This stuff affects us all, to varying degrees and at varying times.

Takeaways

My technology and design takeaways are,

• Rely on the platform as much as possible. It has excellent assistive support for built-in elements.
• This goes double for forms and form elements. Be declarative (is it required?) and provide input examples (placeholders).
• Keep it simple wherever possible.
• Animation and effects should be optional.
• Consider color and shape contrasts when grouping elements.
• Respect user preferences for less animation, high contrast, or anything else that you can set in a modern browser. Leaning on the platform of HTML/CSS will give you a lot of these things for free.
• Presentation should be consistent.
• Everything should be zoomable and responsive.
• Lean on well-established presentation conventions for the culture or cultures you’re addressing.
• Provide alternatives for images (captions) and videos (transcripts).
• Content should be well-written, in that it should not run on and should be divided into easily navigated, logical sections.
• Keyboard support is vital.
• Longer processes should be resumable (e.g., return to a form in-progress).
• Be careful with session timeouts. They’re usually unnecessary and may be far too short for some years, effectively blocking them from using your site.

I recently turned on two-factor authentication for my relatively rarely but still occasionally used Google account.

In the screenshot below, at the very top of the page, Google sure makes it seem like I need to finally add that phone number that Google has been begging me for … for, gosh, it’s gotta be decades by now. Now, they’re not just begging me, but are outright lying to me that I will no longer be able to use my account unless I divulge my phone number.

Is a phone number required for two-step verification?

I don’t wanna add a phone number, so I’ll click the other button to “Turn on 2-Step Verification.”

Phone number required to add two-step verification

Huh. It really looks like I need to add a phone number, right? At this point, only a stubborn, ornery, contrary sonofabitch would think otherwise.

Time to give up, I guess.

Oh, wait. I am one of them there stubborn, ornery, and contrary sonsofbitches.

For shits and giggles, let’s try scrolling down the page.

Authenticator app is available below the fold

Well, well, well. It turns out that there are other options. Let’s set up the authenticator app that I use for a lot of other accounts.

Beep. 🤖 Boop. 📟 Blort.

☑️ Done.

Is two-factor authentication enabled after I’ve added a second factor? Nope. You still have to “enable” it. I wonder why that would be?

Add a phone number can now be skipped

Oh. Duh. It’s so that they can try one last time to force me to add a phone number. Even though I’ve just added a two-factor option, Google still pretends that I need to add a phone number in order to be able to turn on two-factor verification.

Note that the dialog looks almost the same, except that there’s now a “Skip” button between the “Cancel” and “Next” buttons.

🖱 Click “Skip”.

Continue without a phone number

Wow. This is just pathological.

Google, buddy. You need help.

Just let it go.

Two-step verification enabled

Would you look at that. I guess two-factor verification does work without a phone number. I bet you feel pretty stupid about your overblown histrionics now, don’t you, Google?

What’s that? You say that 99.9% of your users ended up handing over their phone number under duress? I am not surprised.

Coda

At the top of the page, though, I still seem to have a problem with my account.

You (still) have security recommendations

I wonder what might be wrong now? I just cleared up the missing two-factor verification.

You will no doubt be utterly unsurprised to find out the reason.

We all know what it is.

The problem is … a missing phone number

Go away, Google.

Just go off in your corner and enshittify out of my sight.

There isn’t that much more to say than that it seems like a $4T company is incapable of making something as straightforward as music search work in anything approaching a comprehensible manner. The evidence is below.

I searched for the album Apple Cores by the James Brandon Lewis Trio. The top hit was Danny Elfman, for no discernible reason, followed by a smattering of completely random search results, like Greatest Love Story by LANCO, Sweet Child O’ Mine, a playlist called “Family Time”, another one called “Sing: ‘60s”, and another called “Rock in Spatial Audio.”

Search 'Apple Cores James Brandon Lewis Trio'

It’s like the query gave whatever mishmash of hot garbage and LLM that they’re using to search their database an aneurysm. You might think that this was a result of them not having that album, but that’s not the case. When I search for just Apple Cores, then the sought-for album and songs came up as the first hits.

Search 'Apple Cores'

This should be a straightforward match, no? It should be in an index. The index should have matched on the exact words. There is no magic needed. We’ve known how to perform these searches for half a century. I bet Apple is using “intelligence” for its queries and now it will sometimes get very obvious and easy things completely wrong for utterly unknown reasons. I hope it’s worth it. I doubt it, though.

Fielmann is a vendor of eyeglasses. Their stores are great! The people there are super-friendly and I’ve gotten nothing but great, well-fitted glasses from them. Their prices are absolutely fair and their customer service is top-notch.

However, their online presence is … not good.

Navigation debacle in 2021

Fielmann is also a repeat offender in terrible usability. I wrote about them in Fielmann: an online-store safari, where I described their nearly deliberately obtuse navigation.

Online-account madness

Somehow, I never wrote about how poorly their onboarding process was for existing customers when they merged their online contact-lens store into their eyeglasses store. Spoiler alert: there was none. I finally figured out how to merge my accounts and was able to order contact lenses from the main/combined store but it took several attempts.

This time, I was told that the account that I’d created no longer existed. My account at the old contact-lens site was still working but it only logged into what was very clearly a dead digital storefront. Instead of even trying to rescue my account, I just created a brand-new account, giving up on all of my order history and having to copy my lens product over by hand.

This is an international company with a large presence in the DACH region. This is after years. They’re just utterly incapable of managing their user accounts and handful of web sites.

Criminal font choices

Let’s take a look at how it has decided to design its order page.

Super-tiny fonts at Fielmann

Do you see how much whitespace there is? Do you see the giant padding in the “Bestellübersicht” (order summary)? The fonts are tiny in the breadcrumbs, in the fields, and in the summary. This is for a store that sells eyeglasses. Their customers—by definition—cannot see very well.

What’s the point of all of this nonsense? There is more than enough room for much more accessible fonts.

LacklusterIncompetent validation

They’re not only bad at accessibility but they’re also terrible at basic UX. There is no client-side validation, even though all browsers off that for free these days. I usually avoid checking any boxes unless forced to do so. I suspected that I would have to select the second one, but there was no visual indication that this field is required. On submission of the form, I initially didn’t see any change. The screen only scrolled slightly to bring that field more into view, leading me to suspect that this was the field that needed to be checked.

There's the error message

It was only after reloading the page and submitting again that I noticed the tiny, poorly aligned, and utterly innocuous error message thrown below the field like an afterthought. I added an arrow to the graphic to help you out. The screenshot below shows a closeup.

Closeup on the tiny validation message

“Dieses Kästchen ist ein Pflichtfeld [This checkbox is required]”

This is absolutely ridiculous and almost deliberately anti-accessible.

Way back in mid-February, on the night before the Super Bowl, I opened the SunriseTV web page in Opera to set up the recording. That worked just fine.

I left the page open on the recordings, so I wouldn’t forget about it in the morning, when I started working in home office. The next morning, I refreshed the page and was confronted with the following dialog box.

Sunrise TV: login not possible

I tried logging in again, but was denied again.

Had my account broken overnight? Had my subscription expired? No, of course not. The site opened in a different web browser fine. I was able to watch the Super Bowl from my recording. But what kind of crappiness is this? How does a web site completely forget that I have a subscription?

SunriseTV is one of the largest and most established television providers in Switzerland.

They still only let you record time slots, not actual shows or movies. If the Super Bowl slot ends at 04:30, then that’s when it stops recording.

SunriseTV seemingly has no idea when a program actually stops streaming. Or they don’t care about their customers at all.

The Super Bowl went into overtime, so my recording did not include the last ten minutes. Did they record the next slot automatically? Of course not. Why didn’t they include those ten minutes?

This happens all the time, but with recorded movies. You will often miss the last ten minutes because those are buried in the first ten minutes of the next time slot—and that’s not the one you recorded. The entire software is a basket case, not fit for purpose.

Nothing has changed or improved in the interim.

I use a Jabra 65 headset at work. I have both the one-ear and two-ear variants because I’m still trying to debug my way through a complete shutdown of Bluetooth functionality for the last couple of months.

I think the one-ear one is more comfortable because I can hear the rest of the office a bit. The two-ear one is extremely deadening and fits oddly on my head. It’s very noticeable and not very comfortable.

Jabra popped up a dialog today asking me how likely I would be to recommend Jabra headsets to anyone.

Zero.

I am 0% likely to recommend Jabra headsets.

I commented the following:

“Look, it’s probably Windows just as much as your headset, but I can’t use Bluetooth anymore, not for months now. Even before that, the mic and speakers would just mute themselves in what, for me, are completely unpredictable ways. More than half of my conversations would start with “can you hear me?” or “I can’t hear you.” followed by fumbling with sound and mic settings and muting/unmuting things that aren’t muted in Windows, but are, apparently, muted in hardware. I wouldn’t wish this experience on my worst enemy.”

When I submitted my comment, it told me that the checkbox was “required”. I did fill out the checkbox; it’s unchecked. What they mean is that it’s required that I check the box that agrees to the following:

Rate Your Jabra Product Experience − junk mail required

“I agree to terms and conditions and that Jabra, its parent company can contact me by email or advertising with discounts, news, partner updates and surveys. Jabra stores my name and e-mail along with cookies and other identifiers in line with the privacy policy. I can unsubscribe at any time.”

If you happen to hover over the text, you’ll see that, although the words “terms and conditions” are not highlighted in any way, they are sneakily linked to the full terms and conditions to which you’re agreeing, but in a way that does not in any way encourage people to investigate those terms and conditions because you can’t tell that they’re linked, unless you go looking for it.

Sneaky terms and conditions

So, if I want to tell them how shitty their products are, I have to agree to get “advertising with discounts, news, partner updates and surveys” from a company I wish I’d never heard of. Capitalism is going great.

Today, my headset—connected via USB because Bluetooth is still broken—starting cutting out both the sound and the microphone for about ten seconds whenever a chat message arrived while I was in a call. In case I’m not being clear, this is how I picture this whole contraption.

• It is 2024.
• I am using the most popular operating system in the world (Windows).
• I am using a connection technology that is at least three decades old (USB).
• I am using a headset from one of the most popular manufacturers in Europe, if not the world (Jabra).
• I am using the video-chatting client provided by the maker of the operating system (Teams).
• The combination above is incapable of simultaneously streaming the video call and playing a 400ms sound without turning off the whole shebang and laboriously reconstructing itself over the course of ten seconds.
• It is 2024.

🤦‍♀️ 🤦‍♀️ 🤦‍♀️

Sometime at the end of last year, I found a coupon for one free month of TacX, a cycling service offered by Garmin that integrates with their app to provide courses, routes, maps, and head-to-head competition online. I wasn’t interested in head-to-head or in doing anything that involved watching the app, but my own custom routes had grown a bit stale, so I decided to try it.

The coupon code worked just fine—even after almost five years—and I was registered.

Got in one good ride…

Then I got COVID and wasted a week not riding anywhere. After that, the weather at the end of the year was warm enough to cycle outside, so I did that instead.

I eventually rode my first course weeks later and it worked just fine. At the beginning of the year, I managed another ride, which was more fun than the first. You can see the map and a video showing you where you’re riding. It’s really not too shabby—at any rate, it was a nice change of pace from my “push this many watts for this long” one-hour-long rides.

Two weeks later, I got sick again, so I’d definitely burned through my coupon, having ridden only twice. By the time I was ready to try again, I’d forgotten that my account had almost certainly expired.

Extending a subscription at Garmin

How did I find out? I’d selected the second ride I’d done and said “do that again”.

The app showed me a modal dialog that informed me that this map is not part of my subscription. What? Did the app tell me that my trial period had expired? Of course not. Did it tell offer to let me sign up for another subscription? You know, did it try to sell me a subscription? Oddly…no. It just refused to let me ride on that course.

I was in a bit of a hurry. I’d gotten into a “riding mindset”. When I tell you I was a bit agitated, that’s an understatement.

I looked in the app quickly to see how to sign up for a subscription. Nothing.

I went to the web site. Logged in. Checked my orders. It only showed an order for a US map from last year. There as no sign of my recent subscription purchase (yes, it was free, but you’d think it would show up on my account).

There was literally nothing to indicate that I’d ever been subscribed—or how to subscribe again. I had to browse the web site to find their list of subscriptions and choose one for myself. The list was in German, of course, because Garmin has to use my location—rather than the language my browser asks it to use—to determine how it’s going to communicate with me.

I found the subscription and purchased it.

Does it show up anywhere? Nope.

No orders in my Garmin account

Fortune favors the bold

Brimming with confidence, I went back to the app and tried to load the course again.

Nothing. Same error message.

This happened a couple of times.

I’ll let you imagine the cursing. It was legendary.

After several tries over a couple of minutes, the course loaded and I was finally able to ride.

As a paying subscriber, this is what my app looked like.

No maps in Garmin TacX rideAhead − Cathedral of Santa Maria del Fiore − Built 1436

it’s just a little spinning loading-progress icon for the whole ride. I had the elevation profile at the bottom and the incline indicator at the top, but no video.

I rode that way because what else was I going to do? I don’t really watch the video anyway, but it’s not a good sign when the app works worse once you’re a paying subscriber.

Another incident: calibration

I’ve learned that this kind of behavior is not unusual. I’ve not had a single ride that just started smoothly, where the technology didn’t impose itself into the whole routine as an active participant, demanding attention rather than quietly being of service.

My most recent ride yesterday started with a calibration. I calibrate every time because, when I don’t, the software will track an odd number of watts, either undercounting even though the workout feels 25% more strenuous than usual, or just failing to record watts at all, either providing no resistance at all or providing completely random although always quite light resistance, independent of the program.

So, I calibrated. I’m better about remembering to turn on the TacX device by now, although the software chirpily tries to calibrate a device that isn’t even connected. It doesn’t notify you that this is the case, but it shows a different calibration procedure, which I’ve learned to recognize as indicating that I’ve not turned the device on. If it asks me to pedal up to 40kph, I know that the device isn’t even on. I can pedal all day, but it’s not going to calibrate a device that isn’t under power. When the device is on, it asks me to start pedaling up to 30kph.

I pedaled up to 30kph, then freewheeled as instructed. You’re supposed to leave the pedals alone until the calibration is complete. My foot hit a pedal by accident and the TacX claimed that the calibration had been invalidated. JFC. It showed a retry button.

Retry.

Pedal.

Nothing.

It doesn’t allow me to recalibrate. The “retry” button was just a joke on the part of the programmers—or perhaps a very hopeful promise of what might come in the future.

I went into the settings and started a manual calibration. That one worked.

I started the program and started pedaling. Nothing. It wasn’t showing any sign that the program had detected a device. The calibration had been successful, but the software was still off in its own little world.

Restart the program (not the app).

Off in la-la land.

I had to shut down the software and restart it, reselect the program, recalibrate, and was finally able to ride.

This is just how much fun it is to work with Garmin software.

Yes, there was a lot of swearing.

A friend had told me that they’d been to a concert on the previous Tuesday. At the time, I forgot to follow up during the conversation because we were distracted by other topics.

A couple of days later, I realized that I still didn’t know who they’d seen in concert. All I knew was the date. And, I realized I knew approximately where it was because I saw their walk to the venue on Strava. 🙌🏼

The purpose of today’s Internet is to facilitate commerce, not knowledge.

Even with the venue and date in hand, though, it’s not very easy to find information about past concerts in our Internet.

The Internet was conceived as a knowledge machine, but was nearly immediately coopted for commerce. It is so geared to tell us about stuff we can buy that search engines can only return links about upcoming events, with ticket sales.

Even the home pages of the venues themselves will tell you nothing about events that happened a few days ago. I couldn’t find a “this year’s events” calendar, to say nothing of a “past events” calendar.

Simply typing the venue name and the date, like “Volkshaus Zürich 16.01.2024” returned nothing useful. I gave up pretty quickly, as it was late.

In the morning, I tried again, typing “how to find out about past concert dates”, which returned me the Concert Archives, which has an easily browseable list of all concerts on a day, by venue, by city, etc. Now I know that my metalhead friend went to see Beast In Black / Gloryhammer / Brothers of Metal.

The Niterói Contemporary Art Museum (Wikipedia) was built in 1996. I don’t have much more to say about it, other than I just learned about it and I think it looks amazing. I dug up a few pictures from DuckDuckGo’ image search.

Beach view

Long view

Closeup, from below

View up the ramp

Long line

Swica is my private health-care provider in Switzerland. By all polls and evaluations, they have some of the best customer-care available. They also have a mobile app called Benevita for tracking some personal information.

Attempt #1: Registering via mobile app

Benevita offers to let me register an account. I chose an email that identifies the sender—it has a +-sign in it—and a generated password. The page told me that an error had occurred without telling me what I could do to correct the error.

Was it that the email isn’t supported? That happens sometimes, with stupid web sites that filter out perfectly legitimate and valid email addresses that use a pattern that’s been supported and encouraged in all major mail services for decades. Was it that the password was too long? That also happens with stupid web sites that don’t understand security in any realistic way.

Attempt #2: Registering via desktop web

So, I gave up on the mobile app because it was too complicated. I figured I would try with a web browser.

Unsupported browser message

Cool. Cool, cool, cool.

I’m using Opera, which is basically the Chrome browser, but without selling your soul to Google. It uses Chromium. It’s a shame that Swica’s web team is so terrible that they don’t understand that. Most sites that do something this stupid also offer to let you proceed at your own risk.

So, I’m a dozen minutes into trying to create a user account at my own insurance company because they have such terrible, terrible software. This is a national insurance company. Lots of customers and lots of money.

I load up Safari, guessing that this might be a supported browser.

It is.

Back to registering a user

I run into the same unknown error for creating the user account as I’d run into on my mobile device. On the web, though, it looks like there’s a small progress bar under the password field, where it’s validating it “live”. That looks OK.

I think the problem is the “+” in the email. But you know what would help? A goddamned validation-error message. This is not acceptable. It’s bad enough that large companies are filtering out perfectly valid emails provided by paying customers that would allow those customers to detect which mail is coming from Swica, but this site can’t even get out of its own way enough to actually come right out and say that that’s the problem.

Was it the problem?

Of course it was the problem. I had to debug Swica’s onboarding process for them. This is bullshit.

I get an activation email. The link opens the page in my default browser—Opera. Guess what? It works just fine. No more error message, as shown above.

I’m able to complete my registration process. As a final insult, they give you only 20 seconds to respond to the SMS confirmation before kicking you back to the “what’s your phone number?” page.

Connecting an already-connected tracker

Once I’m logged in to the Benevita App, it takes several seconds for the status to change. As soon as it changes to “logged in”, I’m informed that “your trackers has been successfully disconnected.”

What?

I didn’t ask to disconnect my tracker. I asked to log in.

What’s going on?

Time to put on my sleuthing cap again because Swica is utterly incapable of informing its users what its web sites and mobile apps are doing.

I bet this is what happened.

• I had my Garmin account connected, so that it was feeding tracking data to the app
• I didn’t have an account yet, so the data wasn’t benefitting me
• I created an account and logged in
• The app makes sure that my user’s trackers are enabled
• First, it disconnects any trackers associated with “another account”
• It doesn’t bother asking whether I’d like the previously configured tracker added to my account. It could also have explained that the existing tracker cannot be transferred because I’d have to reauthenticate it.

When I try to set up the tracker again, I get the following,

Brilliant software, Swica. Top notch.

At least the translations are pretty good. Except maybe for the “Now connect” button, which is obviously a direct translation of the German “Jetzt verbinden”.

Second time’s the charm, though.

Garmin’s OpenID provider

Now, I can connect to Garmin. There, I get to contend with Garmin’s janky login form, which disables the “login” button randomly, then clears the password when you click on it. Second time was the charm there, too, but this is ludicrously bad.

Final thoughts

This is what these globe-girdling firms can offer us? They can’t even get registration and login forms working?

Am I the only one to whom this happens? Or am I the only one complaining about it? Are the rest of you complacent? Do you no longer expect anything to work in a way that doesn’t waste your time?

Ironically, it’s my healthcare app that drives up my blood pressure.

The other day, Fortinet decided that it wanted to restart my computer. Fortinet is a commercial-grade, Fortune-500-level VPN solution built by a company that writes “Global Leader of Cybersecurity Solutions and Services” right in the title of its web page. It’s on the S&P 500. Their VPN client is their flagship product. It is a product that huge, important companies use to ensure the security of their data and communications.

This is what its restart dialog box looks like:

Fortinet restart message

My goodness, what a train wreck.

• First off, the dialog should absolutely not look like a script kiddie’s idea of a UI. How are people supposed to even imagine that this came from their commercial-grade security software?
• The UI does not use standard Windows controls.
• The translated button captions don’t fit.
• My Windows uses English as the display language.
• The German title tells me that my computer will be restarted in -2,147,483,648 minutes, which is the exact value of Int32.Min, so it’s clear where the value came from, but unclear why Fortinet thinks it’s OK to tell me that my computer will be started almost 4,083 years ago.
• That’s OK, because in the first line of the detail, it further informs me in German that my organization will restart my computer on the 31st of December, 9999 at one second before midnight.
• It’s not even done yet, because at the end of the message, in a slightly smaller font, Fortinet tells me that, OK, all kidding aside, your computer will be automatically restarted in about 17.5 hours.

This is neat. Now, I don’t know which one to believe: will my machine restart in the past, ~4100 years before it was manufactured? Or will it restart in ~8,000 years, when humanity has expanded into the galaxy? Or will it restart in about ¾ of a day?

The answer was, as the clever among you have guessed, none of the above.

The computer rebooted itself less than 10 minutes later, out of the goddamned blue, without even the by-your-leave of the Windows Restart Dialog. Just booted right back to the BIOS immediately.

This is the level of professionalism and software quality we can expect from a well-established, Fortune-500, computer-security company.

This is the kind of thing that dampens my hopes considerably when people splutter to me about the grand future of software agents, servicing our every need, writing all of our code, and generating all of our prose for us.

The same culture and society that produced the people that built the Fortinet software is building the software agents [1]. It’s hard to build up realistic enthusiasm for it not totally sucking ass, like everything else. [2]

I was looking up something [1] about my account in Microsoft Teams (Teams) the other day.

As I was looking at that, Teams showed me the following tip on the dropdown menu.

Update work hours?

Does it look like that? Does it really, Teams?

How could it possibly look like that if you’ve been paying attention at all?

Teams is on all day on my machine. When I log in at 07:00 every day, Teams is active. When I log out around 16:00 on a workday, Teams knows about it.

I work 07:00–16:00 on about 90% of my workdays. I’m really like the proverbial Swiss clock.

You would think that a silly feature like this would be able to detect that my hours are already set correctly (they are).

So what’s the problem? How can Teams get this so stupidly wrong?

How did this feature pass any testing at all, when it doesn’t work for the easiest case?

I’ve noticed the Apple Music search acting quite wonky over the last couple of years. It seems utterly incapable of finding certain songs, even when you enter the exact title and artist.

I’ve had cases where Apple Music has dozens of albums from that artist, so that I’m almost certain that the song is available. It just will not show it to me. In those cases, I’ve instead searched with DuckDuckGo using the same title and artist to find out the name of the album. With the album name in hand, I can select it in Apple Music and, lo and behold, there’s the song I was looking for with the title I’d entered.

I am mystified how marketing and search-algorithm tweaking can break a feature so fundamentally that a user it utterly unable to find things that are actually there. I don’t have any screenshots from one of those excursions—because the search has been a bit better in the last couple of revisions.

I have, however, recently had the following experience. The following screenshot shows something I’ve experienced a few times by now. [1]

Search for Here by Soccer Mommy

Can you see how the result for which I’d explicitly searched is perched shyly at the end of the list? What kind of design is this?

I’ve much more often seen the artist in the prominent first location, then perhaps the album on which the song appears in the second location, with the song itself in the third position.

I am using the operating system in en-US, which is a left-to-right language. Left position is the most prominent. How is it that the song for which I’d searched isn’t in the most prominent position?

Even in the case that I’ve outlined above—where the first and second positions are filled with valid, but less precise results—that would be silly; in the case shown in the screenshot above, it’s just laughably obvious that someone wants to boost “Waka Waka” and “Ride It”, for whatever reason.

Or maybe this is the boon provided by AI search results I’ve been hearing so much about. I, for one, welcome our new AI overlords and their boundless wisdom.

A major bank in Switzerland has an MFA that uses PhotoTAN. It took me dozens of attempts over three days to finally be able to register the app.

This isn’t the first time that this has happened. I’d reset my phone in July and I’d had to go through this for a couple of days then. When my partner reset their phone in August, it took days to register. In September, I’ve moved into a new phone and had to set up the app again.

• It often failed to even send an SMS
• 17 times it managed to send an SMS, but failed to register based on it
• The 18th time was the charm

This is for a banking app, to enhance security. I feel very secure knowing how buggy their server software is for registering devices.

Here are some screenshots of the SMSs that landed on my phone over three days. You can see that I even got a few false activation messages. They were false because the app very clearly indicated that the registration procedure had crashed the same as it had on the previous dozen attempts.

I’ve finally managed to register, but now my partner is setting up a new phone and is back on this server-error-500 treadmill. This is shockingly bad behavior for any software, but all the more so for a bank’s security mechanism.

What happens when you hate scrollbars so much that you forget what they were for in the first place?

You end up making a dropdown chooser that looks like this:

SmartVote Menu

The drop-down is for “level of education” and, for a few seconds there, I couldn’t figure out why the highest level of education available was Anlehre (“Apprenticeship” in German). If I hadn’t been familiar with the content, I wouldn’t have suspected that there were more entries.

Yes, you can see that there’s a bit more whitespace under the last item than before the first item, once you know what to look for. In the good, old days, though, we had an ugly-ass scrollbar that indicated unequivocally that there were more items in the list than just those shown. We have lost that ability with our new and improved UIs.

Instead of showing the entire scrollbar, the UI could include a little down arrow, perhaps on a non-client millimeter of vertical space near the top and bottom of the control. There’s space for it, at both top and bottom—you wouldn’t even have to add any space. Just include a little triangle at the top or bottom, perhaps centered or perhaps right-aligned, to indicate that there are more items.

SmartVote menu with indicator

This time chooser is obviously dumb—because it puts the hours in the wrong place.

A bad time chooser

But what about if it had two concentric sets of hours, with 1-12 on the inside and 13-24 on the outside? You could spin the “hand” to the right position, then adjust the radius to the inner or outer ring, depending on whether you were selecting e.g., 2 or 14.

You could even make a “little” hand that you could spin to the right position, like you were setting a cuckoo clock.

It's not a bug, it's a featureThe issue report Can’t edit Wiki after default branch policy applied (Microsoft Developer Community: Azure DevOps) is about a nice feature in Azure DevOps called Branch Policies that allows you to protect the default branch in a given repository, or in all repositories. If you have a lot of repositories, it’s quite convenient to be able to set it once for all of them.

However.

However, Azure DevOps also has a nice feature called the Project Wiki, which includes an online editor that makes editing easy enough for any user with even the most basic technical skill-set (whether developer, supporter, project manager, or product owner).

The Project Wiki is backed by a Git repository. As soon as you set a default branch policy for all repositories in a project, it affects this repository as well. If you protect the default branch, then users will only be able to edit the Wiki by cloning the repository, creating a branch, committing changes there, and then creating a pull request. This workflow locks out a considerable number of users who were able to participate before.

Microsoft closed this issue as “Not a bug” because they said that applying branch policies to all repositories is “by design”. What they actually meant was that they “will not fix” it. It’s a bug. There’s even a name for it: it’s called a leaky abstraction. Whereas users were able to edit the Wiki before without knowing anything about Git, with branch policies enabled, they are suddenly confronted with the underlying abstraction. It has “leaked”.

There are workarounds: instead of setting branch policies to protect the “default” branch, you can set your branch policy to apply to “master” or “main” (or both). This policy won’t apply to the Wiki repository because the default branch there is named “wikiMaster” (presumably for exactly this workaround).

The article The importance of having a design system by Reindeeraintreal (Reddit) shows the following UI elements from the gaming platform Steam.

The various UI elements of Steam

That looks pretty bad, right? There is no consistency at all.

However, the first comment is pretty astute: “Steam, being as successful as it is, makes me interpret this post as saying that having a design system is not important.”

Design’s not the only thing, that’s for sure. Market dominance definitely trumps design. But you could do your users a favor and lower the impedance incurred by using your product. In these days of security holes and phishing, a consistent design helps your users make smarter decisions, by default. If users can’t tell what your standard design is, then they can’t be alert to times when the standard design is not followed.

It’s kind of like when the U.S. had 3 (or 4?) different kinds of 20-dollar bills in circulation. That opened the door to counterfeiters not even having to try real hard because you could just say “oh, that’s the new $20 … don’t worry about it. I just got it from an ATM.”

For years, programmers have been searching for the one, true, perfect font for code. They keep making changes and coming up with dozens, if not hundreds of new fonts. Most of these are fixed-size, but some are proportional. Some have extra ligatures for common combinations, like ≠or ≥. Some look cursive, which I suppose is a matter of taste.

I saw one recently in a video presentation that seems like a big step backwards.

What is the point of making parentheses look so similar to square brackets? This is a silly aesthetic choice.

I’m consulting on a private project with a couple of friends. They use Discord for communication. It’s quite a nice app, but there is no app in the MacOS app store. When I search for it, Apple shows me the following, wildly irrelevant hits.

Discord in App Store

You could also just say that you didn’t find any hits, Apple. This isn’t even close. The top hit is a 1/5-star reviewed product, with one review. What is the point of ever even showing this product to anyone who didn’t search for it?

So I installed the product from a download instead. The first thing it did on startup is to ask for access to all keystrokes in all applications. What the hell, Discord?

Discord wants all keystrokes

This thing is a key-logger? What the actual hell? Or it wants to register global shortcuts, but not using the “approved” method. This is the probably the reason that it’s not in the App Store.

I’m very open to the possibility that it’s just me, but this kind of stuff happens to me all the time. I approach an app that the entire rest of the country manages to use every day and fail to make it work for me, even for the simplest tasks.

In the screenshot below, you can see what happened when I tried to run a simple search for a route from “Kempten” to “Basel”.

SBB can't even make a simple form

I’m mystified as to which field the form thinks should be filled out.

Maybe I’m in some A/B test where I’m the only person in the “B” group.

I wanted to watch a Swiss TV show that broadcast last Tuesday. I have a wealth of choices available to me.

UPC media box?

I have a “media box” from UPC, but it’s not connected because it draws too much power, even in standby mode. We (almost) never need its features, so we leave it off almost all the time. Maybe during the Olympics, we’ll hook it back up. We’ll see.

Anyway, I didn’t want to mess about with hooking up the media box—It’s not that difficult; I’d just have to connect the cable to that box instead of directly to the TV—but, as I wrote above, I have a wealth of options, so I tried something else.

ChromeCast?

I have a ChromeCast, so I figured it would be easy to play off of a device and cast to my TV. I’ve done it before. Although, not for a while now. There’s no reason it shouldn’t be working anymore, right? Right?

PlaySuisse?

I’d just learned about an option called PlaySuisse from a friend. It doesn’t offer to connect to the ChromeCast. That’s probably because I’m using the Opera browser.

Fine. Time to install Chrome on the laptop.

Fire it up. Log in to PlaySuisse. ChromeCast option is available!

Casting….

Casting…

Casting…

Yeah.

It’s connected, but it’s not going to play anything. Why would it?

Reload. The ChromeCast icon disappears.

Reload. It’s back!

Cast.

Casting…

Casting…

UGH.

SRF TV?

OK. One more option. Let’s go see if we can replay from SRF TV directly.

OK. It sees the ChromeCast. Let’s try…

Casting…

It’s on screen!

Cool. Now, can we turn on subtitles? [1]

Nope. You can only turn on subtitles when you’re not casting.

Disconnect. Turn on subtitles. Reconnect.

No subtitles.

UPCTV?

OK. One more shot.

There’s also Sunrise UPC with its own replay function. Hey, that can also cast to the ChromeCast. It also lets you set subtitles. Let’s go!

Hmmm…it’s 01:08:00 instead of 56:00. I guess for the pleasure of watching it via a web site that I pay for every month, I’m going to have to watch eight minutes of commercials. Neat.

Well, if it has subtitles, I guess I can fast-forward through the commercials.

It doesn’t. It doesn’t have subtitles.

OK. Fine. Back to the original source at SRF TV, where there are no subtitles, but also no commercials.

What have we learned?

This is really not so easy. I imagine many, many others wouldn’t have gotten this far and would have probably just watched it on their tiny phone.

I have a media box and I know I could connect it and probably get it to show my replay content directly. But now I’m wondering whether it would serve me eight minutes of commercials, like the web site.

Should it be this difficult? I’ve paid for all of these services, but they don’t do what I want. It’s no wonder that most people end up watching TV on whatever device they’ve managed to get a stream running on.

If we back up a bit, I understand that I’m complaining at a very high level. I’m talking about pushing Full-HD streams around to different devices. This is magic, right? That I even have three or four ways of watching a TV show that aired last Tuesday is already an inconceivable luxury compared to just 10 years ago.

But they just don’t interoperate in the ways that they’ve promised—and in ways that are entirely feasible if they weren’t all so focused on making you pay for more things. I know that a lot of these barriers are artificial, that they’re imposed by the bizarre collection of commercial interests that are involved every step of the way.

This is the way of the world. Technological promises without end. And we can’t even really get the easiest stuff right. This is why I’m always so skeptical of amazing new technologies. I fervently want them to work, but I worry that they’ll work pretty much like everything else: a bare minimum of functionality that just keeps you from canceling your contract. And that’s only because canceling would be another slog through a semi-functional technological process.

Everything’s a scam these days. Even when they provide some functionality—which is amazing compared to what we had decades ago—you still end up with a bad taste in your mouth, because there are even more amazing things that you’ve actually paid for and that they’re not delivering.

What I’m saying is, is that we could have even nicer things if everyone weren’t so damned concerned with the primary mission of shoveling money into their fat faces.

Hoo-boy, no wonder this app has a two-out-of-five-star rating on the App Store. It’s absolutely terrible.

This is one of the first pages I saw:

Cut-off options

I had used my Swiss ID card as my proof of identity during the purchase. Now, I was supposed to actually send a photo of it to UPC so that they could verify it. [1] Unfortunately, I couldn’t see my option in this list. I was not encouraged that the second button was labeled “Passp”. I clicked that first, thinking that maybe the app just thought that all forms of national ID were a passport.

Cut-off button text

The picture is definitely a passport and the button text says “Ne”, which is awesome and totally encouraging for an app that’s supposed to scan my most sacred documents.

I soldiered on, but the app failed to recognize my ID card in this mode. It detected the serial numbers (it flashed a green square around them), but then rejected the scan. Obviously, it would have been more useful for it to say, “it looks like you’re scanning an ID, not a passport. Shall I just verify that instead?” but MY GOD THAT WOULD BE WITCHCRAFT.

Instead, it chirpily warned me that I had only 4 tries left before … what? Before it just never let me get a UPC Mobile account? Why is it limited to 5 tries? Would they then automatically send me the stuff by mail and charge me CHF40.- for the pleasure? All because their app doesn’t work? Lovely.

So I went back out and tried again. [2]

Cut-off button text on entry page

I honestly don’t even know what “Al…et” might even mean, but I clicked it anyway. This is, by the way, a piece of software developed by a company with dozens of millions of customers throughout Europe. They probably cleared billions in profit this year (maybe because they save so much on development and testing costs). The thought is mind-boggling. It’s honestly no wonder we as a species can’t complete any task larger than making a 5-second TikTok video.

Happily—and for no known reason—the page where I get to select which type of ID I’d like to scan looked better the second time around.

Real options

Oh, hey! I have an ID in “credit card format”! Tap.

Cut-off button text on ID page

Cool, it’s nice to see that the cut-off text is still with us. I was worried that I’d discovered a whole part of the app that actually worked, even at a minimal level. [3]

I was finally able to scan my ID, but not before I got one of these:

Sorry Something did not work

At this point, I was just rolling with it and restarted the whole app. Jackpot.

This was such an encouraging experience with a new mobile-phone provider. [4]

The Strava “your year in review” is back in 2021. [1]

Strava Year In Review 2021

I just wanted to point out a couple of things:

1. This overview is only available on the mobile app. Desktop users are out of luck.
2. The overview and statistics is only available in animated form. You can’t stop the animation nor can you browse the pages in a normal fashion. The presentation is utterly and completely accessibility-unfriendly. You can only screenshot a page as it slides by.
3. Although the version from 2020 suffered from the same issues above, it at least managed to present the data in the units I have selected on Strava, which are kilometers and Celsius. [2] It managed to show my coldest activity in Celsius, but showed all distances and elevations in miles and feet, respectively.

I’m in the market for a mobile plan, so my wife forwarded me a link to this page at UPC:

Dein Persönliches Angebot

I’ve taken the liberty of adding some notes to the screenshot, but I’ll also list them here:

• They write that this offer is for me, personally, but there is no identifying information in the URL or cookies. This page looks the same in a private window. Stop lying to me, UPC. This offer is for literally anyone who stumbles across this page. [1]
• I was kind of shocked to see that WhatsApp is given preferential treatment by having its data excluded from the data cap. This means that people with a data cap have a strong incentive to use WhatsApp. How much did WhatsApp/Facebook/Meta pay for that, I wonder? My (infinitely patient) wife (waited for me to stop swearing and) informed me that this is the standard in Switzerland. [2]
• At any rate, what is the point of telling me about WhatsApp being “included” in one of the four main points of the plan when the plan is explicitly for unlimited bandwidth? Thanks, UPC, ∞ − WhatsApp Bandwidth still equals ∞.

I’ve used Google Meet twice in the last month. In both conversations, I exited the meeting room completely inadvertently and was forced to scramble back, profusely apologizing for my lack of technical proficiency.

It all starts with the Google Meet page losing focus, then “detaching” itself from the main window. This seems like a “feature” that prevents the user from switching tabs away from an open meeting. It’s bossy and intrusive.

The first time this happened, I ended up looking at a large video of myself in the main window. In a smaller, floating window, I saw myself again and the other person in a postage stamp overlaid on that. It was not a pleasant video-call experience, so I tried to reattach the video to get back to the way it was. One click and it hung up.

The second time it happened, it just showed the following, with my meeting continuing in the detached, floating window.

Tab is Detached

Being a naive and trusting person, I clicked the “Reattach tab” button. Instead of doing what it said, it summarily ejected me from the meeting room.

You Left The Meeting

Google reassured me that my “meeting is safe” but that I was no longer a part of it. I have no idea what sort of a feature they think this is.

It is entirely too easy to leave a meeting room. It doesn’t ask you whether you’re sure you’d like to leave. It just ejects you. It does so even if you do something innocent like try to get back to a usable version of their UI when they’ve split everything into floating and strangely sized windows.

I honestly can’t believe that this is a professional software used by dozens of millions of people, produced by a trillion-dollar company. Companies pay for this. With money 💰.

🤦‍♂️🤦‍♂️🤦‍♂️

It’s that time of year again.

It’s time to start biking indoors. 👎

That means the TacX comes out of the basement and I am, once again [1], confronted with the awfulness that is TacX Desktop. I fired it up and was confronted with all of the same bugs and UX missteps that I’d noted a year ago. It’s like the app hadn’t been updated at all.

I got suspicious because I have a friend who uses his TacX regularly and he wouldn’t put up with this crap…so what is he using? I searched the App Store again (MacOS) and found a TacX Training app as well as the TacX Desktop app I already had.

My only quibble with TacX Desktop is that they should kill it already. If they can pop up a notice every single time asking me to grant permission to use a sharing feature that I don’t want, then they could pop up a notice informing me that TacX Desktop is end-of-life and that I should switch to TacX Training instead.

There is no advantage to TacX Desktop that I can see. The only extra feature that I see is that you can create workouts directly in TacX Desktop whereas TacX Training sends you to the web site to do so. However, TacX Desktop doesn’t allow you to edit a workout, whereas the version in the cloud does. There is no local storage for TacX Desktop, so there is no real advantage to the feature: you’re still storing in the cloud. The editor in the app and on the web site look and feel exactly the same.

TacX Training DashboardThe TacX Training App seems fine, so far. I don’t use the movies or the training plans or anything but my own workouts. I have seen some user comments complaining about the “opponent” feature, but I’m not using that.

I’m not really interested in watching a video of the outdoors in the summer—I’d rather watch a more-distracting TV show or movie—or in competing against random people [2], or in a training plan that makes me sit on the bike for 90 minutes, pedaling at 50% or 68% power. If I’m going to sit on a bloody bike indoors, it’s not going to be for a recovery ride—I’ll just go for a walk or hike outside instead.

I’d offer the following suggestions to the developers, but that’s all I can think of right now.

• It would be great to be able to clone a workout, so that you can make a slightly longer/shorter/harder/easier version
• The ride is imported correctly into Garmin Connect, but the corresponding Sync to Strava doesn’t include the elevation change, for whatever reason. Maybe this is Strava, though.

Normally, in a UI, when you click or tap on a thing (e.g. a button), but complete the click or gesture away from that thing, the “tap” or “click” is not signaled. The gesture is ignored because the user did not complete the gesture, aborting the operation. That’s how we’ve been trained; if you press down on something by accident, just move off of it and release and you it won’t count as having been clicked or tapped.

DuoLingo Gems Purchase ScreenHowever, in the DuoLingo Settings screen—where they’re trying to get you to buy gems—that’s not the behavior. Pressing down on any of the gem packages will end up showing the “approve purchase” screen for the item you’d pressed down upon—it doesn’t matter where you complete the gesture. I require an approval for purchases, so it stops there and I can cancel. But, what if you don’t require approval? Or what if you have the setting on that says that approval is only required if it’s been fifteen minutes since your last purchase? Well, then, I imagine that you’ve purchased yourself a bunch of gems.

The reason I found this at all, was that this devious behavior is combined with another one: pressing down in the area with the gems packages, even to swipe up in what you’d intended as a scrolling gesture is, instead, captured as a tap gesture. The screen doesn’t move up or down with your gesture. It just kills the scrolling behavior there in order to turn every gesture there into a purchase. You can scroll by flicking the empty area with “Gems” in it or “Plus Items” in it, but not anywhere in between, where purchases are made.

So I hadn’t even tapped on one of the gem packages and then changed my mind as I was doing so! No, I’d simply been trying to scroll the screen and it tried to rope me into buying gems—it would, in fact, have auto-purchased gems if my settings hadn’t been so strict.

This is very, very sleazy behavior in an otherwise delightfully useful app.

…doesn’t mean you have to use light-green text on a white background.

Die Grüne Partei

The Fielmann eye-ware online store looks very nice. I’d bought glasses at the branch in Winterthur. They were great, with really good people with good advice. They have excellent prices. Their online prices are very good as well. They set me up with an account with my prescription, so I could order more contact lenses anytime.

Finding the online store

I returned to the site recently and found it to be very nice-looking, but considerably less friendly. It was subtly pushing me to use the app instead of the web site. It did all it could to keep from finding the online store from the web site. Look at this landing page:

Main page: where’s the login

When I clicked “Mehr Erfahren”, i was scrolled down on the same page.

Mehr erfahren clicked

There, I was still confused about where I could log in. It’s not at the top of the page, and here I can only create a new account, for free, but that doesn’t help me. I know I already have an account; how do I log in? The only other prominent option is to find a store, which is absolutely not what I want. I’m at their store. I just want to order contact lenses from it.

Do you see it? It’s at the bottom, innocuous and written in light-gray text on white? You know, on a web site that services customers who all have trouble seeing, by definition?

That’s the link.

Needful Things [1]

I jumped to the store and was able to log in. It’s a completely different site, relatively well-hidden. I felt like I was ordering contact lenses from the Silk Road on the Darknet.

The store itself is odd. Instead of offering products from which you can select, it just has a pre-selected shopping cart for you. You can add their suggestion to the shopping cart—or you can fuck off.

Pre-programmed and unchangeable shopping cart

So I added the pre-selected products to the shopping basket and removed the items I didn’t want. I wonder how many people do that? I suppose this trick works quite well for their older, blinder customers—those that are able to find the site at all, obviously.

Having another go

When I started writing this article, I went back to verify that it really was hard enough to navigate to warrant a rant about design.

As proof, I admit that I can no longer figure out how to get to the landing page at the very top. I clicked everything that made sense and none of it navigates there. I am fluent in German. That’s not the problem. The Fielmann site is just very non-intuitive.

So here’s the main home page. Where is the online store? Do they even have one? They really, really want me to find a “branch near me”. Have they not heard about COVID-19? Their stores aren’t even open, as far as I know.

Where is the online store?

I looked in the menus and found a link for buying contact lenses buried quite well. It’s like they don’t want you to buy anything from their site. Or they probably want you to download the app so they can pester you with push notifications.

At least they’re consistent with their design. With its light-gray, tiny fonts on white backgrounds, the menu is positively hostile to their primary customers: people who can’t see that well.

Where is the store?

That was only the first step. I’m still not at the store. I’m on the “buy contact lenses” page. Now I get to scan the page to find the “Order online” link all the way on the right, in a new ad-hoc toolbar, of sorts. Since I navigated here by clicking “buy contact lenses”, it’s an absolute feat for them to place the only worthwhile button in the least-noticeable place on the screen. I wonder if they design secret rooms in first-person shooters in their spare time?

First step to getting to the store

After clicking the “order online” link, I land on another page that looks nearly exactly like every other page I’ve already been on. I do appreciate that, once I’d expressed an interest in contact lenses, they stopped showing me stock photos of pretty people in glasses and…just started showing me stock photos of pretty people? Why is 90% of the page a hero picture of someone presumably wearing contact lenses, which I can’t tell from the picture, because that’s the point of contact lenses.

Anyway, now the “order online” toolbar button (?) is highlighted. I must be here? Lemme scroll down…

Online ordering: time to scroll

After scrolling down, I’m finally at a very similar—but slightly different—registration page from the one I’d found earlier. The REGISTER and FIND A STORE parts are still very prominent, but now there are two blurbs indicating the store’s URL, one at the top and one at the bottom and this time in black-on-white text, which feels like somebody must have fucked up. This is almost too easy now.

Yet another registration page

It’s almost like Fielmann is ashamed of their store. They seem to assume that they have no returning customers because I can guarantee you most of their customers create a new account every time and then painstakingly search out their products, squinting at the tiny writing on the side of their old contact-lens boxes to try to figure out what they need.

Either that, or they just order whatever Fielmann puts into their shopping cart and trust in God.

These are just two examples of the inundation of UX frustration on any given day.

TacX

TacX asks every time I start the app whether it can use my personal data for a feature that I never use.

TacX Requests Data

The language is not only supremely awkward but inspired in its use and non-use of punctuation (why ellipses rather than etc.?)

“To use live opponents, we will need to share some of your personal data, such as but not limited to you name, profile, picture, speed, watt/kg, what workout you’re doing,… with other people. Do you agree to us using this data in such a way?”

You’ll notice that “No” is not an acceptable answer to corporate overlords who already got a bundle of money for their machine and try to make its use contingent on my giving them data as well as money.

MacOS Big Sur

I am staying away from Big Sur for now, as I’ve heard that several features are still shaky. When the release notes for 11.2 include something along the lines of “make Bluetooth work better again”, then I’m not taking the risk.

However, Apple desperately wants me to upgrade, so they make it really difficult to avoid by hiding system updates for the system I have below the very prominent “upgrade” button.

System Update Pending

Can you see that “More info…” appears twice and that the one pertaining to the security updates for the actually-installed system is passive-aggressively in a slightly smaller font than the “More info…” for the operating system I don’t have?

I’d clicked on “More info…” in the morning and wanted to reboot during dinner. I mistakenly clicked on “Upgrade Now”, thinking it was the button to apply the system update I’d downloaded. Instead, Big Sur started downloading, the sneaky bastard.

Downloading Big Sur…

Even worse, that little cancel button to the right doesn’t do anything. You’re seeing 1.89GB downloaded because this is the second time I’m seeing the dialog—I triggered the upgrade again because I couldn’t believe what I was seeing. I had Activity Monitor open and found the process with an extremely long name that seemed related and killed it. The system preferences exited back to the main page.

It’s not clear to me whether the download continued in the background. When I just clicked it again as I was writing this article, the download is still unstoppable and it marches through the progress bar far faster than my connection would allow, so I’m pretty sure the sonofabitch just went ahead and downloaded 12GB to my machine somewhere. I’m also pretty sure that Time Machine picked it up and wasted a bunch of space on my backup drive as well. Thanks, Apple.

Both MacOS and iOS have system-wide notifications that use a red badge to indicate burning topics that need to be addressed.

On MacOS, the “Software Update” system-preferences panel has had a red badge on it since Apple released Big Sur was released six weeks ago. There is no way to turn off this badge without installing the upgrade. When they released a patch for my current version, the badge did not change, so I had no idea I had an update pending.

Similarly, iOS uses the red badge to indicate things that aren’t at all critical:

• Upgrade to the next major OS version
• Set up 2FA authentication
• Set up Apple Pay

None of these is critical and there is no obvious way to disable the badge without capitulating. It’s not that I don’t necessarily want to do any of these things, but that I don’t feel like doing them right now. These things are not a priority for me; they are a priority for Apple.

Apple is misusing its notification system. It’s primary purpose is no longer to alert me only about system-critical issues, but about neat stuff that Apple things I should do.

I haven’t found a way to ignore the major-version update on iOS. On MacOS, it seems that you can use the command line to disable the update, but that’s kind of extreme for my taste.

You can get rid of the badge for Apple Pay and 2FA by pretending that you’re going to totally do that thing, then bailing on it before you confirm anything. The badge eventually comes back, of course, but not for several weeks.

For the most-recent 14.3 iOS update, Apple went a bit crazy. This is a screenshot of my notification center from just yesterday afternoon.

OMG iOS 14.3 is available!

You can see at the bottom that there are several more notifications “stacked up” and waiting to tell me the exact same thing as the other dozen-and-a-half notifications.

A friend sent me a link to a video on Instagram. I don’t have an Instagram account, but was able to watch the video anyway. I watched it on a desktop browser. It looked like this:

It looks like I’m previewing a device UI using the developer tools, but I’m not. Instagram on the desktop looks like two phones next to each other, centered in the ample horizontal space. The video takes up only a third of the “phone” in which it’s displayed. Each of the “more posts” at the bottom has more area than the primary content.

This is modern design? This is what a multi-multi-multi-billion-dollar company produces as its flagship product? #sad.

My old weather station finally died. I’d inherited it about 25 years ago from a good friend in New York. It came from my apartment in Kew Gardens to Switzerland, where it was first mounted in my kitchen and then office for many years.

The cord was covered with electrical tape from several incidents involving my first rabbit Oz. After a dozen more years, the plastic casing on the wire leading to the outside thermometer had become very brittle—especially after years of being shut into the window casing as we opened and closed it.

I was able to repair the cable several times, but it finally frayed too close to the sensor nodule for me to be able to repair it. It had outlived the company (Radio Shack) that produced it by five years.

We went to the Migros Do-It Center to pick up a new weather station. The new ones are all much fancier with a plethora of features, none of which obviously combine to form a product I’d like. We ended up picking one that looked reasonable and had a colorful display, because why not?

We got it home only to discover that it doesn’t quite satisfy. What’s wrong with it? Well, it’s just a bundle of unsatisfying design decisions that leads you to wonder whether anyone actually works with use cases.

You can either plug it in, in which case it is on all the time or you can use batteries, in which case it is on for only five seconds after you press a balky button on top. You have to give it a good press to turn it on.

The old weather station was just on all the time, but with an LED that you could read in the daytime. We have another weather station in the kitchen that is the same, but has a back-light that you can turn on by—get this—pressing a small button on the back. This would be massively inconvenient if I hadn’t had the brilliant idea of mounting it on the wall and putting a little stick-on rubber nodule on the wall aligned with the back-light button. So, you can just press the front of the screen, activating the button on the back, and temporarily illuminating it. You can’t read it at night from a distance, but that’s not a requirement.

The new weather station advertises itself as coming with a pedestal, which is fancy. However, the cable is so short that there is no place I can put it so that it reaches a power outlet. Adding an extension cord to the already bulky power adaptor seems like massive overkill for a weather station, as well as being ugly as hell.

Luckily, the place where I’d mounted the old weather station was just above an outlet, within reach of the 1-meter cord.

However.

However, the fancy pedestal is not an optional component. It is a permanent part of the case, so it protrudes from the back of the device instead of presenting a nice flat surface to lie flush with the wall. This doesn’t seem to have bothered the designers at all, as they chirpily put a hole for a hook or nail directly above the 1-cm protrusion.

So, my next job was to install a much more stable and longer hook than the old weather station had required—that one was light and flat enough to hang from a short nail rather shoddily placed in the wall. No drilling required for the last dozen years.

Now I’ve got the clunky thing mounted and plugged in and it’s time to set up the outdoor thermometer/hygrometer. My office window has blinds and faces the main walkway along the building. There is nowhere to put the device other than on the window sill or taped to the window. I taped it to the window. It fell off less than 12 hours later. I now have it lying on the window sill, just waiting to fall out the first time we actually raise the blinds—which we almost never do—or for one of the neighborhood kids to take a shine to it.

Still, the weather station is now installed and functional.

And it’s so colorful.

But.

But, the number that is the most important to me—outside temperature—is in a darkish-blue on a black background, which is difficult to read at a distance. For most of the morning, the sun shines in the window, making it even harder to read.

I can read the indoor temperature, the barometric pressure, the phase of the moon, and the time perfectly. In fact, the time is, for whatever reason, the biggest read-out on the screen. It’s as if the designers thought to themselves, “I know they bought a weather station, but shouldn’t the most prominent piece of information be the time? What’s the point of knowing the temperature if you don’t know what time it is?”

Did I mention the phase of the moon? What phase would you say the weather station is showing? A new moon, right? One look out the window on the night the picture was taken reveals a moon that is positively full, a veritable spotlight.

It’s not as if I don’t have any other clocks in the house, or on my arm, or on my phone. Can we please just focus on delivering the information specific to the device?

At any rate, I’ve now got a clunkily installed weather station whose screen never turns off, but on which I can often not read the most important piece of information. In most light conditions, the weather station is an excellent clock, but is terrible at telling us the outside temperature. It shines all night, permanently semi-illuminating my office. [1]

Were I to use batteries instead, I would have to constantly test the stability of the hook I’d installed by pressing down on a balky/sticky button on top of the front edge of the screen, which juts out 2cm from the wall, most likely dashing the whole thing to the floor on the second or third try.

I miss the 25-year-old weather station already.

Now, I just have to convince my wife to let me return this one within 7 days and try again with another one. I’ve got my fingers crossed that I don’t have to write a follow-up post.

The MIOStar Weather StationAs luck would have it, that would not be the case. It turns out Migros in Wetzikon is so gigantic that they have two places with weather stations: the hardware center and the electronics center. Each has completely different weather stations. Kath says there are even more online. I found the best one, pictured to the left. It only has the information that interests me, along with the nearly unavoidable clock, which is, at least, displayed in a smaller font than the temperature, unlike nearly every other weather station on offer. It is pictured with its soothing orange backlight engaged. The light turns off after a few seconds. It is activated by a large and easy-to-press button on the back. It is only battery-powered and the display is active in non-backlit mode at all times. The controls are intuitive enough that I didn’t need the manual to change it from the default AM/PM setting.

All’s well that ends well.

The Guardian doesn’t have a paywall, but they now have a registration requirement. This is fine with me. I don’t browse their site regularly, but I do occasionally get links from bloggers I follow. I appreciate the job the Guardian does and am fine with being registered with them.

Guardian sign-in/sign-up formTheir signup form is somewhat odd and unpleasant-looking, but it’s the functionality that’s the most offputting.

I was unable to sign up with my preferred email address. I was notified of this by validation that indicated that “one of the fields was invalid” (of the two I’d filled out), but couldn’t tell me which one. It reverted me back to the beginning of the two-step process.

I assumed it was the mail address, although it appeared valid when I typed it in the form (it had a green checkmark or the text turned green…I can’t remember).

The UX here is suboptimal.

I gather the server validates more stringently than the client to prevent “fake” email addresses or to prevent people from using masked emails like the one I’d given (a spamgourmet address) because, God forbid, using one of those would give someone control over their own inbox. This is silly, as the email must be valid or the activation won’t work.

What are the design lessons?

• If you have client-side validation, then make sure that it matches the server-side validation.
• If it doesn’t match (or it can’t because the check can’t be executed quickly enough on the client), then make sure that the error message is specific.
• Vague error messages are poison; I understand that you have security concerns, but you can still tell me that it was the format of the e-mail address that you didn’t like instead of pussyfooting about with a coy “one of the fields was invalid”.
• Let people sign up with whatever e-mail address they like; if you’re having trouble with spammers and scammers, see if you can’t solve it another way, preferably one that doesn’t involve blocking people with legitimate addresses.

I ended up using a throwaway address that I very rarely check. This is fine with me. It’s just that it will be largely useless for the Guardian to get my attention, should they choose to do so.

I almost never use Amazon. I almost never buy things. Recently, I had the pleasure of discovering that Amazon—a trillion-dollar company that delivers stuff all over the world—cannot properly validate phone numbers when you add an address. [1]

I entered a phone number [2] for an address to “help with delivery”. No matter how I entered the number, I got the error message,

I started with copy/pasting the phone number straight out of Apple Contacts:

+1 (789) 555-4338

(789) 555-4338

789 555-4338

789 555 4338

7895554338

At this point, with numbers being the only potentially “invalid characters”, I was at my wit’s end. [4]

I gave up and typed in a random phone number from the town where I grew up.

Accepted.

Pathetic.

It’s bad enough that they only validate the number and don’t tell you what to fix. A better solution would be to return a normalized form and ask the user to approve it. E.g., “did you mean +1 (789) 555-4338?”. They do something like this for the zip codes already.

If they are incapable of that, then they should improve on the catch-all error message, which is not useful. It should indicate—at the very least—which characters are valid and should include an example of what they’re looking for, so I can emulate it.

The whole purchase process is balky and unpolished; it’s exactly what I would expect from a monopoly that doesn’t have to care about its customers’ needs—because it’s the only game in town. [5]

I just can’t believe that this gruesome thing is still a thing. [1] In an age where we are supposed to have been sensitized to phishing sites, this thing is still an integral part of the online credit-card purchasing chain. It is generally called up with a completely different URL than the store where you started and it looks terrible and untrustworthy.

SecureCode Dialog

It’s probably a combination of:

1. not being able to change a running system because people are used to it now
2. not being able to change a running system because they barely got it into production in the first place and the code is such a tangled mess that no-one will ever be able to make a change without breaking it irrevocably
3. not being able to change a single thing on the page because countless other applications that are just as terrible treat this page as an “API” so you can’t change even a single character of the HTML.

After having listened to an excellent interview with the author on What we don’t talk about when we talk about rape, I’d recently added the book Rape: From Lucretia to #MeToo by Mithu Sanyal to my Amazon Wishlist.

Soon after, I received an e-mail from Amazon that they were giving me a one-week, five-dollar coupon toward the purchase of the book. That sounded good to me. I clicked through to the book’s page, where I saw that, indeed, a five-dollar credit would be applied were I to purchase the book.

Initial Offer

However, when I elected to “Buy now with 1-Click”, I landed on an order-summary page that showed a different coupon for $3.04 had been applied, but that my original $5 coupon was missing.

'Place Order' Screen

I thought maybe it had something to do with 1-click, so I turned that off in the settings. FYI: you can’t disable 1-click purchasing on Amazon. There’s an option to disable it, but it doesn’t actually disable anything. But I digress, because that’s a whole other usability/false-advertising problem.

Since it was only a matter of a few bucks, I took the chance that Amazon’s site was just incapable of displaying a one-time-only coupon as well as a previous credit. I could hide the old credit, but couldn’t get it to show me the coupon. I placed my order and was greeted with the following order summary.

'Order Summary' Page

Both credits had been applied on the final order, which is good. That a site that handles over 50% of America’s (and probably much of the West’s) purchases doesn’t have a portal that can display the details of slightly more-complicated orders is not.

It had been three years since I’d updated my resumé. To be clear, I’m not looking for a job [1]. I’m very happy at the company I (partly) own, Encodo Systems AG.

I see my resumé more as a description of my career than as a document with which I can get hired. As a partner in a company, it’s good to have an up-to-date profile handy, e.g. for including in RFPs.

One step was to write down the history of my more-recent projects and skills. In addition, though, I wanted to update the look and functionality a bit.

The latest version is here. You can see a full-screen rendering to the right.

Requirements

• Information Overload: I’ve been programming for 35 years and doing so professionally for 25. A standard structure doesn’t really cut it for packing in that much information. I don’t want to leave anything out, but I want there to be summaries of some of the more text-heavy sections. So, I summarize projects and skills with charts instead of lists.
• Accessibility: I wanted to improve the accessibility of the by-now three-year–old version. The HTML wasn’t as semantic as it could have been, particularly in the charts. I wanted the document to be legible, even when viewed without any styling at all.
• Rendering: I also wanted to improve the accuracy of the charts. The bars on the charts in the existing version didn’t line up very well, particularly at some zoom levels or page widths.
• Mobile Support: The existing version wasn’t very mobile-friendly. It was somewhat responsive, but wasn’t clean enough at low resolutions.
• Printing/PDF: I wanted a user to be able to print from the browser with reasonable reliability. I provide a pre-rendered PDF, but anyone can just print the HTML page with a modern browser to get a PDF or printed version.
• Lead by Example: I wanted my resumé to serve as an example of my work, to provide evidence of my skills as a full-stack developer (at least as far as usage of CSS and HTML goes).

Design

I’d already tackled the challenge of displaying a career as long as mine in an apprehensible way in the existing version of my resumé by summarizing my projects and skills in charts, with the years on x-axis and individual items on the y-axis.

For projects, I used color-coding to indicate the roles. For skills, I used color-coding to indicate the level of proficiency.

This concept served well to offer a good overview. I left this concept largely unchanged, but made the following improvements:

• Included a legend on each chart instead of only once, at the top
• Included the years for each row (for projects)
• Moved the labels next to the bars rather than partially overlapping
• Tighten up the presentation and calculation of areas

Implementation

These are among the techniques I used to build a page that satisfies all of the requirements above:

• Flexbox: This CSS display type is really quite optimal for a responsive text-flow. The result is tiles of data that flow into as many columns as fit nicely into the viewport width. In addition to the main layout, now the charts also use flexbox, a much better layout than the margin-based spacing approach I’d used in the previous version.
• Semantic HTML: I use lists and list items wherever it makes sense, then style them to fit the overall theme. A screen-reader, however, just sees lists. I applied the same concept for the charts, rebuilding them with tables instead of generic containers. Again, a screen-reader can deal with a standard table instead of trying to make sense of non-semantic containers. In the charts, I included the proficiency data in a separate column, but hid it in the styled view.
• Colors: I’d chosen the previous chart colors manually. That version had the restriction that dark text had to be legible on the bars, artificially restricting the breadth of the palette. In the current version, labels are next to the bars, so I’m no longer restricted and was able to use an online data-color picker to choose colors that are accessible for more seeing levels (and also when printed with grayscale).
• CSS calc(): Instead of calculating and storing high-precision percentages for column widths, I now use the CSS calc() feature to let the browser calculate all dimensions at a level of precision that matches its own rendering engine.
• @media queries: For responsiveness, I rely on both flexbox (as noted above) and @media queries to define a few “breakpoints” in the layout. At lower resolutions and widths,

  • Year labels for data bars are removed
  • Major headers are no longer in a separate column
  • Legends are moved above their respective charts
  • A smaller font is used in charts
• Printing commands: Since the layout flows so naturally, I only had to use page-break-before: always a few times—mostly before the charts—in order to ensure clean printing on an A4-sized page.
• attr() content: In order to avoid cluttering an unstyled page with elements relevant only to the charts, I use the attr() CSS function to inject content like legend captions or year headers. These values appear in styled content, but are hidden in unstyled content.

Examples

Project History: Wide

This is part of my Encodo history, rendered for wide screens. It includes a legend as well as a year-span for each row, to the left of the chart. This chart gives a nice overview of where Encodo fits into my overall time as a programmer as well as the diversity of projects and roles I’ve had on often-simultaneous projects. Each of these projects is listed individually below the chart, but it offers a much more intuitive view of how those projects fit together.

Encodo History Wide

Project History: Medium

The next size is “medium”, for larger, more-modern phones. At this level, the year headings are removed and the legend moves above the chart, to avoid overwriting content. Also, the chart font is reduced to shorten captions. At this width and for this chart, that’s less likely until the screen gets even smaller, but for other charts, information is more centered and overlap happens more quickly.

Encodo History Medium

Project History: Tiny

Finally, there is the tiny version, optimized for screens like the iPhone4. The only change here is that the captions are rendered in an even-smaller font, to avoid leading captions from pushing bars to the right.

Encodo History Tiny

Skills History: Wide

For the skills charts—some of which start quite early in my life—I’ve used soft hyphens (­­­­­) in some longer captions, to ensure proper wrapping (e.g. for HyperCard). This is the wide version:

Libraries Wide

Skills History: Medium

As with project histories, the skills charts move the legend above the chart, when displayed below a certain width.

Libraries Medium

Skills History: Tiny

As with the projects chart, the skills chart renders remarkably well on tiny screens.

Libraries Tiny

Unstyled Charts

Finally, the following graphic shows examples of the projects and skills charts without any styling at all. As you can see, these charts are just standard HTML tables and are quite legible for screen readers, complete with proper headers and cells.

Unstyled charts

I also tested this document with Safari’s and Instapaper’s reader modes. These work, for the most part, but both of these renderings make a bit of a hash of the tables/charts, each in their own way.

Safari Reader

The Safari Reader does an admirable job with the headings and lists that comprise most of the document. However, it doesn’t render the third column—”Roles” and “Level”, respectively—because it heeds the CSS that hides those columns. I haven’t yet come up with a solution for user agents that only use a part of the CSS.

Safari Reader Charts

Instapaper Charts

Instapaper also does a good job with the majority of the document, but also stumbles a bit when rendering the tables for the charts. In this case, Instapaper properly ignores all of my CSS—including the command to hide the third column with “Roles” or “Level”—but doesn’t really do the table structure justice, formatting it as a single, long line of text.

Instapaper Charts

Conclusion

Overall, I’m pretty happy with how the final version turned out. I’m sure there’s room for improvement design-wise, but I think the charts are pretty good. In particular, I think I’ve managed to “Lead by Example” in designing and building a more-complex web page for all types of user agents and users.

When I snapped the screenshot shown below, I wanted the answer to one question:

I had actively used the phone for only about 2 minutes that day. Which application used the phone for the other 3 hr and 56 min? [1]

Apple’s design makes finding an answer frustrating, at best—and infuriating, at worst. Here’s what you see when you look at the battery settings.

Who's responsible for this?

The batter control panel tells me that “[b]attery information will be available after using iPhone for a few minutes.”

Some questions:

• Why would Apple design this feature this way?
• That is, what is the reason for not always showing the applications that used the most battery?
• Perhaps because the calculation takes time and effort?
• Why is there no button to let me force the calculation and show the numbers?
• If that’s not possible, why can’t you tell me more precisely how and when I can get the information I want?
• Do I have to just start using the phone?
• For how long?
• When should I check back?
• Can I just leave it on?
• Or do I have to actively use it?
• Is scrolling a page or flipping app folders back and forth enough?
• Do I have to prevent it from sleeping for those “minutes?”
• If the phone does sleep, does it reset the “minutes?”
• If I have a low battery and want to know which application is doing that, how useful is it to make me start randomly using a phone that’s about to die without knowing which application is causing it to die?
• Why does iOS make me do all the work? Why can’t the damned thing work for me instead of making me work for it?

As you can probably tell, I fell well into the “infuriated” camp, despite knowing that this is a first-world problem. To assuage my guilt about that, I thought about all of the people who just accept this design, this design that takes power out of the hands of the user for no reason whatsoever other than laziness.

This control panel is for an OS that is in its 10th version. A multi–billion-dollar company should be able to do better for its users.

This is an answer I wrote to What deliverables do I ask for from a UI/UX designer when starting a webapp project? by loki777coyg (Reddit).

Ideally, you’d have a VSG (Visual Style Guide) and an Interaction Design.

VSG

The VSG includes design details like colors, gradients, fonts and standard dimensions as well as details about components/controls, like for icons, properties like,

• margins
• padding
• separation between label and image
• alignment of image
• variants (image to side, image on top)

or for similar properties for controls, like, for example,

• buttons
• tabs
• list items
• tooltips
• callouts
• flyouts
• etc.

or even complex controls, like grids, with properties like

• where to place icons
• how to align text
• how to wrap text
• are there buttons or a drop-down to manipulate the row
• etc.

Depending on what you’re building, a VSG will include instructions for how components are displayed in different media, like small-screen, responsive, etc.

Basically, the VSG is a dictionary with the answer to every question you have about how to style a component in the target platform/technology/media, generally defined in a platform/technology-agnostic way.

Interaction Design

The Interaction Design includes instructions on how to create UIs using the components defined in the VSG. These are the higher-level rules for how to combine components/controls to build screens.

It answers questions about

• how to display extra information to the user
• how to show errors
• how the user moves between related screens
• how the navigation history is displayed
• how the user manipulates data:

  • auto-save?
  • How/when to validate?
  • How to bulk-edit?)
• how the user searches:

  • auto-suggest?
  • Or enter to show results?
  • How does paging work?
  • Are details shown in-line?
• where standard information is displayed
• where control surfaces are:

  • Is there a user-login area on-screen?
  • Separate from the main navigation?
  • Or combined?
  • What about content/context-specific actions?
  • What about list-item-specific actions?

Again, this design may also include details on how to adjust compositions/interactions based on the media/context, like small-screen, responsive, etc.

Basically, the Interaction Design is a dictionary with the answer to every question you have about how to compose components to represent the screens in workflows and use cases, also defined in a platform/technology-agnostic way.

Vs. Reality

I deliberately wrote “ideally” above because, often, the specifications you get/have will fall short of this. However, remember that whatever isn’t in your specification will have to be decided on-the-fly and ad-hoc and most likely differently in different situations, most likely by the wrong person (the developer).

A tooltip is going to have some sort of style even if you don’t actually specify it. Unless you’re really disciplined—even if you’re a one-man team—you’re going to end up with noticeable inconsistencies. You’ll either have to live with them or invest a lot of time to eradicate them.

Better than wireframes/screens

The nice thing about working from documents like this rather than wireframes for very specific situations is that it’s much easier to build new, unforeseen screens without further help from the designer. That is, instead of having to wait for the designer to make the screen or, instead of just winging it and building the screen based on what you see in other, similar screens, you have a very specific instruction manual on how to style and compose your building blocks to create new screens.

Another advantage is that there is a canonical, agreed-upon specification for how things are done to resolve disputes and clarify questions.

I am in no way looking for a new job. I’m very happy at Encodo. However, I hadn’t updated my project list or resume format since 2002. I’d also seen a lot of resumes cross my desk when we were hiring last year, with some good ideas and some bad. I wanted to try out some ideas I had to improve formatting, legibility and information density/comprehensibility.

There were a few main areas that I thought I could improve in the “standard” resume format.

I’ve got a strong first draft, but I’ll be tweaking it again after letting it sit for a bit. You can check out the current version here: Resume 06.2016 (PDF)

Requirements

What problems am I trying to solve?

• A plain text listing of skills leaves a lot to be desired. How competent are you in that skill? How many years have you used it? When did you last use it?
• Many IT jobs are project-oriented, so listing employers isn’t sufficient. On the other hand, if you list a lot of projects, it’s hard to see how long you worked at an employer. How long was a project? Did you ever work on overlapping projects? Which roles did you have in the project? Did those roles change over time?
• If you’re a bit long in the tooth and have a lot of projects and/or employers, the standard format doesn’t fit very well, either. Information is spread out and difficult to process as a whole.

Ideas & Solutions

I’ve come up with some ideas for answering these questions at a glance, using a combination of responsive text and charts.

• Show items in a grid instead of sticking to a strictly top-down format, which wastes space and leads to long lines that are hard to read.
• To address career length, summarize on the first page and list projects on following pages.
• Use charts to summarize long lists/grids.
• Use the X-Axis of the chart to indicate chronology (years)
• Use colors to indicate roles in a project or competence level of a skill
• Use striped colors to indicate multiple roles in a project
• Each project or skill gets a bar from start to end of project or use of skill
• Overlaps in the chart indicate working on multiple projects at once
• A change in color or striping indicates a change in role
• Make sure that generating a PDF or printing the document works well and doesn’t waste paper

Armed with these ideas, I came up with a responsive set of CSS styles. On top of that, the print styles are configured to create a very pleasing printout, in both portrait (PDF) and landscape.

Skills Timelines

Since I started programming in 1985 (more or less), I started all of my timelines with that year. To the left, you can see a full-width version of techniques and languages, with the legend and main title to the left of the two charts. To the right, you can see that the responsive, highly compressed version is still very legible and useful, with title and legend above. The intensity of the color in the bar indicates skill level, so you can make sense of the chart even if the legend has scrolled out of sight.

Projects Timeline

The projects timeline is very similar, starting at the same year so that all charts are consistent. As indicated above, the overlap and coloring/striping nicely shows simultaneity and roles. The legend is again to the left.

Encodo Projects Timeline

I’m not quite yet perfectly happy with the striping because it’s more difficult to see which roles are actually involved in a project, but it’s a start. In the closeup, you see the coloring a bit better, but without the legend, it’s much harder to remember what’s what. Still, it’s pretty and formats quite well, even for mobile devices.

Encodo Projects Timeline (Detail)

So, as of June 2016, I’m more of less up-to-date with my work history. Not only that, but because the format is very declarative and uses semantic HTML, I have much more incentive to keep it up-to-date.

We have a UPC CableCom Mediabox. It’s a DVR, so we can record any content we like, up to about 100 hours or so.

The Super Bowl is on really late for Central Europeans, so we cheerfully enabled the “record” icon on the Super Bowl on BBC2 and went to bed.

The Mediabox interpreted our command as a suggestion and failed to record a single minute of the Super Bowl.

Set up Replay

Never fear! This had happened before and we’d set up a free service at CableCom called Replay. I have no idea why you have to explicitly sign up for a service that is included free as part of the UPC Cablecom package, but there it is. [1]

We set it up the last time we’d failed to record a Vuelta a España stage that we had really wanted to see. Even at that time, we signed up for Replay and were greeted with little Replay icons on a lot of the content in the Guide. However, anything older than now didn’t have an icon.

We scuttled back to the web site to discover that having signed up for Replay ex post facto did us no good in the case of the Vuelta stage in which we were interested. Replay was only enabled on content that aired after your acceptance of their license agreement.

This seemed at the time like a needlessly shitty restriction since CableCom has the prior 30 hours of all channels recorded anyway. The service is free, so what’s the harm in letting me use it immediately? [2]

Ok, fine. Replay activated. License accepted. Time to move on. [3]

Use Replay

So we come to the Super Bowl, which failed to legally record on our legal DVR that captures content for which we’ve paid legally.

No problem. I signed up for Replay months ago.

Fire up the Guide, switch to BBC2, scroll back one day and VOILA! There’s the Super Bowl broadcast at some ungodly hour of the morning. And there, right in front of it, is the shiny Replay icon.

Click.

“Please select OK with your remote control to indicate your acceptance of the license agreement for Replay. [4]”

OK.

“You have activated Replay. Only content aired after your acceptance of this license agreement will be available via Replay.”

But I’d already accepted the license agreement once when I signed up for it! This system is absolutely designed to ensure that the first piece of content that any given Replay user selects will be unavailable.

So here’s my advice to anyone who wants to use Replay: after you’ve enabled Replay for the first time, use it. Use it for any old program, it doesn’t matter what. Just make sure you’ve accepted all of UPC Cablecom’s multiple agreements before you want to use Replay for content you actually care about.

As for the Super Bowl? It’s not like I’m not watching it right now—and commercial-free, to boot—but why make it such a fight? And why is it that the path to content that is legal and purchased is always far less well-paved than the free one? Being more expensive and shittier is not a good business model.

I started using Netflix in Switzerland about 5 months ago. I initially made these notes about 2 months after I started using the Samsung TV App. In the last three months, while Netflix has made updates to their app from time to time, the core usability and browsability issues have not changed.

Browsing

Permanent billboard

The browser doesn’t make efficient use of screen space. The top half of the screen is always reserved for a billboard for the currently selected item. This choice makes browsing feel very cramped, even though I’m browsing at an 1080P resolution.

Single-row browsing

When you’re browsing something like “My List”, you can only see one row and scroll horizontally to see more items. The browser only uses more than one row when you’re browsing categories. Unfortunately, none of your “smart” lists like “Continue Watching” or “My List” are categories. At least the side-scrolling wraps around to the beginning of the list instead of making you back all the way out.

No fisheye, filtering, grouping

There is no notion of “drilling down” into a list or folder. There seems to be a lack of fisheye for larger lists—i.e. focusing and zooming in and out—and an almost utter lack of basic management. I don’t want full-on editing, but I’d like to be able to guide the app in some way. When I want to see the movies I’ve added to my list to watch, I can only side-scroll in a single row. That’s ridiculous. I can’t filter by genre, type (TV/movie) or even do a simple filter by title, if I’m looking for something specific.

Unpredictable sorting

Lists are not sorted alphabetically but by something else, like last time added? Or the degree to which Netflix thinks a selection is a match for your current preferences? It’s impossible to predict, so you end up scrolling through everything trying to find a specific element.

Shifting content

The content of smart lists is updated relatively often and, while some suggestions seem to be set in stone, others are extremely ephemeral. NetFlix really thinks I should watch Trailer Park Boys in which I have no interest after watching one episode, but I was reduced to typing out River (with Stellan Skarsgaård) because it only ever showed me that entry once.

Lists

Single list

You can add items to your list, but you can’t indicate why you added them. The “your list” is ostensibly a list of movies you want to watch, but Netflix also doesn’t remove them once you’ve watched them.

No watched list

Nor does there seem to be a “watched” list that NetFlix offers to the user. Nor have I found a “Rated by you” list. Even were there such a list, I wouldn’t expect to be able to ask Netflix to group my rated movies by genre, sorted from highest to lowest rating. Or most recently watched. Or anything useful like that.

“Continue Watching” is not editable

NetFlix does keep track of what you haven’t finished watching, in the “continue watching” list, but you can’t edit this list either. So, that one-star–rated comedy you watched for ten minutes? NetFlix will ask you to finish watching that show the very first thing until the heat death of the universe. And even when it’s no longer in the top spot in the billboard, there it is peeking out at you from the “continue watching” list.

No control over meta-lists/suggestions

You also can’t tell NetFlix to stop showing certain lists that it has, in its infinite wisdom, decided you’re interested in. For example, I watched The Unbreakable Kimmy Schmidt and now I have a category called Comedies starring a strong female lead. I’ve already either watched or don’t want to watch every item in this list. I cannot get rid of this list. This also applies to “Because you liked…” lists. You can’t quickly jump to the movie it thinks you liked and you can’t get rid of this list. (See No way to “not like” below.) [1]

Behavior and Display

No badges or indicators

When you’re browsing a list, you can’t see whether you’ve already added something to your list or not. A badge here would be nice. Multiple badges for “viewed”, “rated/rating” and “watchlist” would be nice. Maybe even being able to see if other people on your account have added this item to their lists (it’s all public in an account anyway).

Pushy default selections

What if you’ve been binge-watching something? That would be the first thing selected when you log in, right? Wrong again. NetFlix will grab the show they think you should be watching and auto-select/queue that for viewing. How do they select this show? The show is almost always suspiciously one of their newer offerings. Are you one episode 8 of 10 of Jessica Jones? Too bad, because your default action—if you hit “Play” after Netflix loads—will be to start watching Trailer Park Boys. Let it go, Netflix.

Unclear selection algorithm

How do you tell Netflix what you like? Does adding something to your list have any weight?Should you instead rate them? What if you don’t feel like rating from 1–5 stars and just want to “like” a movie? Can you tell Netflix to stop using a movie or series to choose other content?

No way to “not like”

While you can give content bad ratings, it’s hard to predict how Netflix will interpret a 2/5-star rating. Does it think you like that content because you watched it? Or bothered to rate it? Is that positive or negative? It would be nice to be able to say NO, not this content. Do not ever suggest this again.

Default action is to play

If you do see a show you’re interested in, the default action is to play that show rather to show information for it (so you could add it to your list). [2] If you do start a show by accident, going back doesn’t get you back to where you were, but somewhere else—and then the show you were interested in is nowhere to be found. So you’re stuck aimlessly browsing around, hoping that it shows up on another list by luck or going to the search and typing the bloody name in (if you can remember it correctly). That’s only if you’ve canceled loading the show before it showed anything. Otherwise, you can cheerfully find that show—that you might have possibly been interested in—in the “continue watching” list, where it has an eternal home.

No cross-account access

When you’re browsing a list with someone who also has an account on your NetFlix (c’mon, we can’t be the only ones who watch TV together), it would be nice to be able to add to a list on another person’s account. Otherwise, the workflow is atrocious: try to remember the one you’re interested in, back out to the main screen, enter as the other user and then try to find the movie you wanted to mark for watching.

I harshed on the YouTube UX in a recent article about GrooveShark. I figured I would take a few screenshots and explain exactly what I am trying to do with YouTube and why it feels so awkward.

Use Case

The user wants to watch vides in a list that he has not yet watched.

'Mark as unwatched' would be nice

It is not immediately obvious how or even if the user can mark a video as “unwatched” so that the little sash is no longer shown across the video in a list. As it stands, the sash is pretty much useless because the video almost always autoplays before the user can click “watch later”.

Use Case

The user would like to manipulate multiple videos in the list at once.

No multi-select actions in list view

Also, the lists are really sensitive to clicks and default to launching a video with every missed pixel—which marks the video as “watched” (see above).

List view really wants to play videos

In contrast, GrooveShark [1] has relatively intuitive support—nothing fancy—for manipulating multiple media items. Clicking the song selects it by default, rather than playing it. Only a click on the play button at the front of the row actually plays the song.

Copy/move multiple items in GrooveShark

GrooveShark also has the notion of a “queue”, which is a kind of ad-hoc list to which media items are added for playing. Food for thought.

Use Case

The user has already-watched videos in a list and wishes to upvote/downvote a video.

No video ratings in list view

Rating multiple videos at once, up or down, would complete the UX.

Use Case

The user would like to move or copy a video to another list from the list view.

'Move' and 'copy' are missing in list view

This is currently only possible from the video player, which necessitates playing the video (again) and jumping back and forth between the list view and the player.

Here’s what moving a single song looks like in GrooveShark.

Copy/move single item in GrooveShark

Use Case

The user has already watched videos in a list and wishes to upvote/downvote or move or copy the video to another list.

There is no good way to do this from the list. Instead, the user has to navigate to the video, auto-playing it and clicking the “Add” dropdown multiple times until the video has been added to the new list and removed from the “Watch later” list.

Use Case

The user is watching the videos in a list and wishes to organize them as he watches subsequent videos in the list.

No commands for play list when watching videos

In order to add a video to another list (e.g. “favorite Comedy” or “Suggestions for wife”), the user must click that video to start it again or open the list in another window. None of these options are as convenient as just making list commands available from the video player, so the user is not forced to leave the context of the currently playing video.

Use Case

The user wants to move or copy a video to another list.

Management dropdown on video page

The dropdown gets the job done, but it’s not a pleasant user experience. Instead, to move a video, the user must click multiple times, instead of just twice (to remove the video from the current list and to add it to the other list).

Use Case

The user wants to, well, do anything but watch videos in the YouTube app for Samsung SmartTVs. Some stuff that would be nice:

• Upvote/downvote [2]
• Add to “watch later” / build an ad-hoc queue of videos to watch
• Move/copy video to list

The range of functionality doesn’t have to be as wide as for the desktop-browser application, but basic commands like upvote, downvote or watch later/add to list should easily be possible, even given the limited input of a TV remote control.

Use Case

The user wants to find a video in a longer list on the Samsung SmartTV YouTube app.

The YouTube app doesn’t make it very easy to find a video either. The user can only move forward in the list, but cannot wrap around to the end of the list from the beginning or vice/versa. This is really tedious when you want to watch a movie that you just added to the end of a longer list.

Some way of filtering would be most welcome, but being able to cycle backwards would be very useful for getting to the most recent content.

Top of the pageNews linksA friend recently directed me to Steve Quayle where he’d found a link about Destroying your hard drive is the only way to stop this super-advanced malware (PC World). The article about viruses is a bit hyperbolic but mostly legit. The original web site, though, has some really interesting stuff on it.

It’s actually not too poorly laid-out—Cymax Media made it and their own homepage isn’t too terrible—but the emphasis is hard to parse.

What’s more important than the news links that the site ostensibly publishes?

• Precious metals
• Giants
• Ebola and Diseases
• Zombies
• Scripture
• The site’s author’s latest book, called “Little Creatures” (elves, imps, fairies, gnomes, dwarves, demons, etc.)
• The Shinar Directive (the “greatest conspiracy theory of all time”)
• More giants

Finally, below all of this other stuff, are the news links, with no explanation or elucidation, so you have to click through on each one that sounds interesting and probably load up a whole other page about giants.

Still, the Geocities web sites of 2015 are decidedly better-looking than their predecessors. Sure, the black background is not very easy on the eyes and sure there seems to be a lot of distracting stuff on the page, but I have a feeling that the site works as designed: it reflects the intent of the author.

Giants, man. Keep your eyes peeled.

Screen-shot of articleThe article Man sectioned over Manchester Airport plane bomb hoax (BBC) was forwarded to me purportedly for its content.

That content? They closed an entire airport for a bomb hoax.

But something else caught my eye: the sheer impenetrability of the presentation. I took a screenshot of the whole article, shown to the right. Can you tell where the article is hiding?

I’m going to ignore the British news-authoring penchant for crash blossoms. [1] Also, I’m going to assume that using “section” as a verb that means “commit to confinement for mental instability” is something that the British news-reading public understands.

What fascinates me is that a news site has chosen a layout that’s almost deliberately difficult to read. It’s so confusing that it’s hard to determine that information as to what actually happened is almost completely missing. I’m going to set aside the by-now age-old complaint that the sidebar and giant article footer include so much extra information about other stuff. Instead, I’m just going to be happy that there are no ads for busty Russian brides in my screenshot and focus on the presentation in the article itself.

There is almost no information in the article. I’ve summed it up below:

• Guy made bomb hoax
• Plane was escorted by RAF
• Airport was closed
• Guy was “sectioned” (presumably they mean committed to a mental institution rather than chopped into little pieces)
• Other passengers were either oblivious or inconvenienced
• Plane arrived early

I didn’t count the half of the article that consisted of irrelevant statements from passengers.

I gleaned this information in a couple of re-readings. This is not because my grasp of the English language is shaky, but because the ordering of information was so strange. The editors of the BBC don’t trust their readers to be able to read more than a single sentence at a time. And they didn’t trust themselves to present more than four or five of these so-called paragraphs without throwing in an utterly unhelpful graphic.

In order, the graphics are:

1. Picture of a fighter jet in air; purportedly taken from the plane. Oooh, how exciting. It’s like we’re on the plane. The photo differs in no way from a stock photo of same.
2. A montage of where Manchester is in England, stating in no uncertain terms what the BBC considers its readers’ grasp of geography to be, A picture of where Doha is relative to Manchester, also very, very useful in learning about what happened and, finally, a stock photo of an RAF jet, as if the picture above wasn’t clear enough that the RAF had scrambled a jet.
3. Next up was yet another picture of the airliner accompanied by its staunch companion, the scrambled RAF jet. A Typhoon, if you haven’t been paying attention.
4. And, finally, we have a picture of the jet on the ground, with lots of colorful little emergency vehicles in front of it, accompanied by a caption that has nothing to do with the picture, “Nine incoming flights were diverted to other airports”.

If you’re like me, the article doubtless left you wishing for more information, like:

• How did the man make the threat?
• What kind of threat was it?
• Why was he considered mental rather than a terrorist? Because he’s white? Non-Muslim?
• Why did they scramble a jet and shut down an airport and then not render him to Guantánamo? General lightness of skin tone? Lack of beard? Oops, same question as the previous one.

These are burning questions that the BBC is happy to let you feel might be answered in any of its other fascinating-sounding and doubtfully information-saturated articles, like:

• Military jet escorts passenger plane
• Reaction to airport alert
• Hoax bomb suspect ‘non-descript’ (video)
• Plane passenger films jet escort (video)
• RAF jet filmed escorting plane (video)

…all published on the same day (before 09:00) and three of which are videos, so as not to strain your brain with too many more words. I deliberately didn’t link any of them in order to be complicit in wasting more of your time.

There are a few (relatively) popular sites that do not even attempt to provide unique page titles for article pages. For example, Glenn Greenwald’s blog on Salon.com or 3QuarksDaily both use the same title for all pages.

This is a huge pain in the neck if you have multiple pages from those sites open in a browser. It would be much more useful (for bookmarking, etc.) if the page title included the title of the primary content on the page.

For example, instead of simply using

Glenn Greenwald − Salon.com

for every page, a unique title that gave a hint to the contents

Follow-up on the Citizens United case − Glenn Greenwald − Salon.com

would be much better. Sites can feel free, of course, to limit the number of characters of the post’s title to use in order to retain the section (Glenn Greenwald) and site (Salon.com) when creating bookmarks. For example,

Follow-up … Citizens United case − Glenn Greenwald − Salon.com

or

Follow-up on the Citizens… − Glenn Greenwald − Salon.com

would both be much more user- and SOE-friendly.

A rather interesting article about innumeracy on ABC News was almost completely overshadowed by a layout dominated by advertisements for other products also available from ABC. Anyone happy to read content for free online should also be prepared for a shameless onslaught of self-promotion, but does it have to be so ugly? The page is broken into dozens of blocks (listed below), which seem to only coincidentally line up or share a common style.

Take into account that most of the blocks are independently animated and the overall effect is dizzying. As you can see from the screenshot, the article ends up split into four nearly independent blocks on the page—and is then split into four similarly delightful pages. As with most online articles, the printable version is a safe refuge. Or you can use the Readability bookmarklet to clean things up.

List of page blocks

• Banner ad
• Site banner (with search controls & some vestigial top-level menus like “ABC” & “ESPN”)
• Menu bar (pretty comprehensive, though with a few “main” links added to The end of it, like “Good Morning America”)
• Other articles in this section (represented as a thin, horizontal bar and flying in the face of all design and usability trends)
• Finally, the article itself
• Then a toolbar for the article (sharing, print, email, etc.)
• A block containing more related links (with thumbnails!) cutting the article off
• The article continues
• Floated in on the left is a block with “Sponsored links”
• A comments area
• Another block below that with “More Coverage”
• A Web 2.0-style footer with most of the menu repeated in static “fat footer” form
• Dominating the right-hand side are several blocks:

  • One with even more related links, this time videos
  • Yet another ad for “Good Morning America”—which smacks of desperation
  • Another block with more links from this section
  • A block with completely unrelated slideshows
  • Another sharing (e.g. Facebook) block (as if the article toolbar above wasn’t enough)
  • A block of “Most popular” links
  • ESPN Headlines
  • A Digg applet showing “Most Dugg Stories on ABC News”
  • Some advertisements
  • More “sponsored links”

Sweet Lord! Almost maximum redundancy achieved. I didn’t even have the heart to try to validate the page. Talk about a page designed by comittee.

Reddit Home PageReddit is a really interesting, stripped-down, fast social bookmarking site; while it doesn’t have the CSS/Web 2.0 props of Magnolia or Digg, neither does it have the excruciating wait time or incredibly heavy page load (both are easily over 250KB home pages). Reddit weighs in at under 50KB and has sensible caching commands, so the browser isn’t constantly following some insipid order to check for new content every time you click something. It’s style is very spartan, but conveys all the information you need to know. Functions are designated with simple text, instead of icons; ratings are marked instantly and sent to the server with AJAX. All story and comment ratings, as well as which links you’ve already checked out, are stored online. Under each story, you can also click “save” to store it in your favorites list. [1] The simple up/down rating system is perfectly executed as in-place AJAX because it means you’re far more likely to vote on things like comments because it’s so easy to give points to clever users and take them away from jackasses. Each view can be sorted by bookmark rank, “hotness” (rate of change) or simple date order. Comments are also just as easy to make, with the editor appearing in-place (though a preview function would be quite welcome). All-in-all though, an eminently usable and useful site.

This portfolio page by Jonathan Yuen offers a unique Flash experience: its navigation is quite nice. The stark and simple silhouettes are mostly static, but some small pieces move: the fish swim around, clicking the finger makes ripples on the pond, the butterflies flutter. Combined with the music, it’s quite pleasant to look around, including the cryptic navigation links—for those not versed in whichever language they’re written in—and the horizontal scrolling. It’s well worth a visit.

Opera Home PageOpera 9.0 New FeaturesOpera continues to improve their site, showing that standards-based design can be fast, clean and elegant. Having recently reviewed the Firefox 2 home page, it’s hard to say who’s stealing from who here. Firefox went with the darker silhouette, while Opera opted for the “girl of indeterminate age”. Both have the big, green download button (a good idea, drawing the eye to it), but Opera has nicer product layouts, with big, Apple-y graphics. Digging further into the site reveals a clean, white/light silver layout now consistently used throughout all areas of the site (which is also considerably bigger than Firefox’s site). Notably, they’ve finally settled on a single, coherent system of icons for their products and sprinkled them liberally throughout the site, to act as way-finders for the different features. [1]

As with Firefox’s site, Opera’s previous approaches to rolling out a new site have been a bit slapdash, with the user quickly discovering areas that were still using older themes. Now, with the exception of the community pages, the more open and whitespace-friendly look is everywhere.

Firefox 2 Home PageAfter years of changing styles and hit-or-miss site designs, Firefox seems to have finally hit a nice, open, clean style. The download button is huge and green and inviting. The background graphic is confined to the product area (not in the header or footer, reserved for “corporate” use) and adds to the fun feel. Overall, it’s airy, making good use of white space and all text is well-aligned (bullet titles aligned with descriptions … yay!). Even the footer got alignment attention, offering an unobtrusive language chooser, which includes an impressive array of languages. On top is the company toolbar, making use of more corporate navy/graphite tones and extremely subtle gradient shading; you can’t see it here, but the hover effect is subdued and sophisticated as well. Even the awards are nicely aligned on the right and don’t stick out like big, cheesy sore thumb (though the font below them is unreadable). And, most importantly, the redesign affects more than a single page this time! It extends to all support, add-ons and product pages and even the new “about” section.

Now if they could only ditch the shout-out on their main page.

WikiMatrix Home PageWikiMatrix doesn’t look especially amazing, but it has quite a few neat tricks that make it a very nice web application. It allows you to select multiple Wikis and compare them; this is a comparison of MediaWiki vs. Moin Moin. The chart is very nicely laid out and includes custom tooltips and a nice hover effect allowing you to follow along and compare many wikis at once. There is also the flagged feature on the left that makes it easier to show only the features that are interesting (it would be nice if the print view were a little better. All-in-all a nice, clean implementation of a relatively simple database lookup. It provides a single service and provides it well.

Cork’d is a web application for wine afficionados. Users build add to the global wine database, create lists of their reserves, their favorites and their buddies. It’s a classic web 2.0 collaborative social web site by Dan Benjamin (of HiveLogic and A List Apart) and Dan Cederholm (of SimpleBits). The colors evoke a bottle of red, and the simple decorations, like the filigrees used a separators provide a dash of style. The colors and graphics are flat and simple (it’s the web! 2.0! get it?) and give a fun and inviting feel to it. The lists are simple and elegant and use very subtle color gradations to convey form and function. The subtle2 gradients are typical of Cederholm’s designs. There’s also a lot of white-space on this page, which makes it feel so uncrowded even though it contains 4 separate areas (sign up, now playing, lists and sidebar), 6 lists and 4 forms (sign up, search and log in).

Shiira is a KHTML-based web browser. If you visit this web site, you don’t waste a lot of time looking around for a Windows version, as it’s relatively clear that this is a Mac OS X product. Why is that? What is it about Mac products that demands a different level of graphical design quality and attention to detail? It can’t just be because everything’s shiny, can it?

No, it’s also the good use of the oversized header graphic that’s becoming quite vogue, both flaunting and reinforcing the browser graphical identity (it’s a fish) with greens and blues that evoke “water”. The page below it is nicely done, but fairly standard, but the menu bar and header graphic really draw in the eye and impress.

Shiira Home Page

We’ve seen how firms large and small bring their sites up to speed. The screen shot to the left is Microsoft’s enchanting new Windows Live site. Granted, it looks like they’re still working on it, but let’s take a critical look at it anyway. (Not ready for prime time? Leave it offline.)

Their icons are fine, but don’t they have designers at that big old company? The content wraps around the icons in a way that was cool in 1995 when Netscape finally managed to do it without crashing all the time. The “So what about MSN?” part looks all out of place. Line and paragraph spacing are atrocious and the copyright footer doesn’t even have any spacing from the rest of the test.

Hey Microsoft! CSS is here and your browser actually supports some of it! Get acquainted with margins and padding to lighten up the site a bit and you might actually entice some people into clicking the “Beta users sign in here” link. As it stands, you might as well scrawl “HTML generated with Microsoft Word” all over it.

Another in an growing list of sites that make XHTML+CSS look really good. This is a consulting company for web and software services, which makes good use of shades of a single color (red) to differentiate between their 3 service areas. The generic graphic adds an elegant touch to the home page and the rest of the page doesn’t distract. There is a subtle news list on the right, with releases of their job tracking product, Trac, which also looks quite nice and functional. The product page for Trac is clean, presents the simple logo, a description of the product and a prominent download button. (Edgewall Home Page)

Now here’s an open-source project that knows how to look good. The banner at the top sets a bold color theme that the rest of the page uses and has a simple set of menus below with the important points for a software project. Subtle use of gradients gives it a professional look and the big screenshot (of an equally nice-looking UI) lets the graphics do the talking. All XHTML/CSS compliant (as is their product); the “made on a Mac” logo at the bottom shouldn’t come as a big surprise. The concise sidebar is on each page, giving a consistent UI for the main pages of the site.

It’s also a nice site for a web project − very clean, with nice screenshots, captions and use of bullet lists to keep things readable. All in all, the best SourceForge project page I’ve ever seen. (RoundCube Home Page)

Joyent is a web applications company with a suite of applications for small businesses. Their home page is a nice mix of browns and oranges; the menu side-bar has an especially clean feel to it. The purchase page looks good too, with a large “SALE” sticker in the upper left that seizes your attention. Excellent use of advanced styling for the links and callout boxes. (Joyent Home Page)

This just jumps out as a very nice, clean (and distinctly Apple-like) promotion for a big step in an existing product. It’s a great, colorful way of drawing attention to a product. (Opera “Feel Free” Promotion)

This site has a very consistent and clean look, making good use of subtle gradients to give it a “painted” look without overdoing the colors. It looks happy and sophisticated — not at all dour and corporate, but exhuding confidence in the products. (AimOneSoft Home Page)

Camino is a Mac OS X-only product that also makes excellent use of color to draw attention to its download buttons and warning box at the top. Note the use of an abstract header graphic at the top to contain the logo. (Camino Browser Home Page)

There’s not much to say here, except that sometime many colors can look nice. The menus on the right are in several shades of soft pastel and are quite harmonious. Keep it in mind as a choice for themes. Nice that it matches the big background graphic. (Obvious Diversion Home Page)

And then there’s Apple. They have an enviable style to their pages. The large black block draws in the eye to the product. The product description uses a nice open line-spacing and magazine-style picture layout to make a pleasing picture. “Buy now” is nice and obvious against the white background (and doesn’t even introduce an extra color, matching instead the banner). The store page highlights the two colors available (matching the selection buttons to the products) and using small pictures and visual cues to back up descriptions. Appropriate padding, margins and alignments are in use everywhere … the look of the content is just as important as the message. (Apple Nano Home Page)

Similar to the blue man web site, but less 3d, it makes good use for color for the different areas. The search at the top is “Live” and results update as you type above the Sidenotes. The green new icon also draws the eye. Click an article and scroll down to see the comments view, which is also a nice touch. (Bartleme Home Page)

This is another pretty clean-looking design. In particular, the page navigation is nicely organized and presented. The breadcrumbs are integrated under the section tabs and the “Quote Size” buttons on the right are like a toolbar (with result count shown in the same area). All information is gathered at the top. The company web site and philosophy are also interesting (Zaadz Home Page)

Another relatively clean look; the thing of note is that the tab folders here are nicely done, collecting the date and topic without being too disturbing. (Steel Gryphon Home Page)

A very corporate web site, but light-colored as well. Good use of line spacing (1.30em), light menu headers on top (tightly against one another and turning light gold when hovered). Uses green for the “read more” links to draw the eye and differentiate from menu links. The bottom of the page has an elegant copyright and site info section, with nicely grayed images. (WebSideStory Home Page)

Tight, good-looking use of strong blue color. The frame around the lead-in graphic looks very good too. Note the use of an initial gradient on the article text to give it more texture. Header, navigation, content and sidebar are clearly-defined areas with their own colors. (TheManInBlue Home Page)

Nice use of dark military colors; the first page (seen to the right) also makes good use of a familiar “shopping flier feel” for sales information. At the bottom is a list of credit cards supported, which offers information and an nice visual touch. (Steam Home and Steam News)

A single-product web site with two columns and modest use of color for attracting attention. Note the “What’s new” and “Download” buttons featured prominently and that the product description, upgrade and documentation information all fits into the first scroll pane. (IntelliJIdea Home Page)

Nice use of watermark graphics in text boxes (see logo at bottom right). Site is a bit slow; have patience. (Enlightenment Home Page)

This is a gaming site and looks it, but the menu design on the left is quite tight and looks “solid”. The “bubbles” in the middle serve to nicely accent the important parts of the site. Compare and contrast with the highly metallic style of GameSpot. They have a very similar layout, but more boxy (though the headers for the boxes are nice). (Inside Mac Games Home Page)

This BeOS-variant maintainer is simple, but quite nice. I find the banner graphic fits with the logo quite well. Both the actual logo and the site icon (3 leaves in a circle) are elegant and nice. (Haiku Home Page)

Mike Lischke’s Soft Gems site is a good example of this cool control in use. It uses accelerating/decelerating animation and opacity progression to show/hide menus. Very slick … and it’s cross-browser. (Dynarch Navbar Home Page)

Nice, clean, professional single-product web site. Icons are simple, consistent and single color; uses one other color for the word “Free”. (UserPlane Home Page)

This site is quite nice, using the four colored boxes motif to make their sidebars and articles distinct. Especially nice is the gradient shading at the bottom-left hand corner to separate the text blocks from each other and to draw attention to the details for each block.

I kind of like the little stipple-pattern used as a separator too. (Pie Home Page)