←back to thread

631 points wojtczyk | 4 comments | | HN request time: 0s | source
Show context
DavidPiper ◴[] No.41407570[source]
Comically, I didn't even notice those wobbly numbers in the first screenshot, I was too busy noticing:

- "Unicode" button label way off center

- The 8/10/16 selector being off center in its own position

- The indicators for bits 31 and 63 are not aligned with each other

- x and + not being horizontally aligned (I believe this is an icon-font issue, seen on HN before so knew to look for it)

replies(6): >>41407613 #>>41408138 #>>41408374 #>>41410147 #>>41410322 #>>41418597 #
1. countmora ◴[] No.41407613[source]
> "Unicode" button label way off center

Its actually the center of the button, I made a video for context: https://imgur.com/a/1Y9O8dS

> The 8/10/16 selector being off center in its own position

Might be due to the image compression, it looks fine on my MB.

replies(3): >>41407959 #>>41409218 #>>41410135 #
2. samatman ◴[] No.41407959[source]
> Its actually the center of the button

Upvoted for putting in the effort, and because you make a correct point.

But the Unicode button is perceptually off center, because ASCII is a smaller word, and there's no visible boundary between the buttons. This comes up a lot in iconography, the classic example is a play triangle (like the media control) in a circle. Placing the triangle in the geometric center won't look centered, it needs to be a tiny bit to the right of that to account for the shape.

No separation between the buttons means you can't see the bounds which the words are centered in, so it looks off.

The 8 and 10 have the same problem, for the same reason. A visible background-gray line between the buttons would solve this problem, it should be 'squircled' to make it I-shaped and match the outer edges.

3. fizzynut ◴[] No.41409218[source]
From zooming into your clip both ASCII and Unicode are wrong:

- ASCII is off center ~43/50 pixel margins

- Unicode is off center ~20/25 pixel margins

- Both have different margin sizes

- The button sizes of both are the same.

- The Hide button is offset from both 8/10/16 selector and ascii/unicode buttons

- Even if everything was correct, because there is no contrast between "Off" and background, it's going to look wrong anyway

4. xelamonster ◴[] No.41410135[source]
The selector issue is very visible in your video still: you can see black pixels at the top of the selected number where it shows the selector background, but none at the bottom because it's misaligned and the selection bubble is slightly outside its box.

Edit: zooming in closer it's maybe not outside the box at all, but there's some odd aliasing artifacts or something making the space above the highlight look bigger than the space below.

Honestly I don't think it makes it any better if the Unicode text is theoretically centered; the fact that there's zero separation between the options, and such poor spacing that it's difficult to tell and feels awkward either way is still terrible design.