Grumpy Website

 

IPhone “Accept call” screen (left) is nice and simple. The tricky one is the one in the middle. It is shown if you are already in a call and a second one comes in.

Imagine: you are in a rush, you already have another thing going, totally distracted, something unexpected happens. You have to figure out what’s going on, make a decision, and make it fast. This is already a high-stress situation. The problem with middle screen is that it is hard to figure out what’s going on.

First, the whole screen is brand new, never seen before. It’s a bad timing for learning a completely new UI.

Then, unlike most situations, here you have TWO object you operate on: old call and new call. It’s unclear on which one each of the button will operate. Decline — what? Old? New? Message whom?

Then, icons. You see familiar icons, BUT they have different meaning here, AND each one appear multiple times on the same screen — why? Why are there two declines and two accepts? Some of them are grouped — what does it even mean? Is it still a single button? Or two? How do I press it?

Yeah, it’s probably a rare screen that didn’t see much love because of its own rarity. But if the screen IS rare, you MUST make it crystal-clear. Because people will never have enough time and comfort to learn what it says and how it works.

The solution is pretty simple. If you have two objects, show them both and give each one its own controls (right). You see “Accept call” screen every day. You see “On the call” screen every day. So you already know how they both work. Nothing new here. Plus it is obvious which controls operate on what. Win-win-win. You are welcome, Apple, that would be $10,000 dollars.

Downside: I broke iOS and can’t place icons where I want them.

Upside: I can finally place icons at the bottom of the screen, in the reach for my thumb!

A while ago I downloaded a Swift book, v.4.2 at that point. Today I learned that Apple book can have updates. Cool! Would I like to read about modern Swift 5.1? Sure!

Sadly, iBooks have no background updates. I have to click a button to get new version. Only there are two: Update or Update All. Even though there’s only one book to update. Okay.

So I click Update. It says “Your account is not valid for use in the Russian store. You must switch to the German store before purchasing.” It’s pretty funny how many things are wrong with this sentence:

- I wasn’t purchasing anything.

- I am in the German store. I must not switch to it.

- The word “valid”: my account IS valid for Russian store, I am just not switched to it.

- Ok what? It doesn’t continue nor does it solve any of my problems.

- Cancel what? You were not going to do anything, what are you going to cancel?

Confused by this message, I tried to find which store am I in? This information is pretty hard to find. It’s not on the Store page, nor is it in Store settings. None of the books shows which store it belongs to neither. Finally, I found my store deep into account customization on Apple website. It was already set to German, of course.

I click Update one more time and see a happy message: all updates have been downloaded. I check my book and it is still at 4.2.

BUT! If you click “Show same book in Book Store”, it shows 5.1! It even has “Read” button underneath! Is this it? Finally? I click on it, only to get local version of 4.2. open. So close, yet unreachable.

P.S. The only solution for this bugging update was to delete the book completely (return to the store, ha-ha) and “re-purchase” it once more. Happy (?) end.

Windows HiDPI support is funny. If you boot into 200% 2160p mode, all your icons are full-size. If you switch to 100% 1080p and then back to 200% 2160p, some of your icons become twice as small. You returned to the exactly same settings, yet some icons are now smaller!

Apparently, this can go even further. If you switch display modes back and forth a couple more times, some icons might become 4x as small!

Thank god it’s not my first day on the computer. Otherwise I’d never figured out that to download a track you need to like it. Also for some reason SoundCloud site says it’s impossible to download despite the fact that they have Downloads menu alright.

> It is not possible to download a track from a mobile device. However, users with a SoundCloud Go or Go+ subscription can save content for offline listening on a mobile device.

This is "Look up" functionality on MacOS. Recently it's added "Siri Knowledge" and "Book Store" to it's look up options.

My MacOS' language is set to English. I only read English-language ebooks from Apple's book store. My phone has alway been set to English. And you can clearly see that Apple's book store fully respects that. The category is "poesi", and language is "engelska". Because when your location is Sweden, how can you ever want any other language but Swedish?

Why not Czech or Hungarian, one wonders: grumpy.website/post/0RmkKSxH6

I just recorded a video. It’s 2.07 Gb. It’s saved directly to desktop. What do you think iCloud does the moment I finish recording it? It uploads it to the cloud and deletes it from my local disk. Why? Did I ask you to? No. Was that file unused for the last two months? No, it’s literally SECONDS since it was created. Maybe I was low on space? No, 190 Gb freely available. Why, iCloud, WHY???

Welcome to Google family of apps!

I mean, the idea of icon is to be different so that you can easily spot it out. To stand out. If you make everything from the same four basic bright colous you’ll get basically the same icon. Times 14.

On the heels of Material Design's color contrast problems (grumpy.website/post/0TEJkwzPA) I present to you Material Design's Typography Guide.

It's *typography*. To present it, they use an image (why?!) with yellow background that isn't used anywhere else on the website (why?!!), and with a monospace font that is not used anywhere on the website and is against the recommended typeface in the very same table (why?!!!).

And, of course, the thin gray font doesn't have anywhere near sufficient contrast with the yellow background.

(click the image above for a full-sized version)

Accessibility is a big thing these days. Everyone presents and promotes their guidelines on how websites (and apps, and design systems) should be accessible, how they have to be readable, how important the colours are and how crucial the contrast between the colours is.

The problem is, it's hard to make truly legible, readable, accessible things sexy. gov.uk sites are accessible and readable, but are they sexy? Hell, no.

Sexy is: whitespace, gray text, thin fonts. Accessible is: none of those things.

Take Material Design. On the face of it they talk about all the right things: colours and contrast *do* help your users. Contrast ratios *are* important. But all these pleas are only skin deep.

Material Design tricks color contrast tools into thinking that their chosen colours are alright: the background is white ( rgb(255, 255, 255) ) and font colour is seemingly set to black ( rgb(0, 0, 0) ). But it's not: it's black color with opacity ranging from 0.4 to 0.87 (so, rgba(0, 0, 0, 0.8) etc.). This makes it *gray*.

On top of that, they use Google Roboto, a very thin font. The result is... Well, see for yourself in the picture above (MacOS, Chrome, 100% magnification).

Even in the simplest shapes like the lowercase "L" white background bleeds through. 100% of the L does not have sufficient color contrast. In more complex shapes (such as "m" or "u") a full half or more of the character doesn't have sufficient color contrast (or insufficient contrast for small font sizes).

To add insult to injury, Material uses very slight variations on the same gray color to differentiate between headers, subheaders, and text which amounts to variations between indistinguishable insufficient contrasts.

Guidelines are only as good as the implementation by the people who promote these guidelines. For the rest of us: don't blindly copy-paste a design system just because it has nice-sounding guidelines and has a big company name attached to it.

Note: For color contrast checks I've used this excellent tool: snook.ca/technical/colour_contrast/colour.html

See also: Material Design Typography Guidelines grumpy.website/post/0TEKUvqDX

Pages:
151...7372717069686766...