Hello friends

Today I want to talk about something in software design I like to call hidden complexity or "Why Simple Things are Rarely as Simple as They Seem" from the perspective of someone both designing and implementing.

Thread

Here's the stitch. I'm implementing this screen taken from an upcoming redesign of my app, @HyphenReader:

There's a number of "simple" things here that have interesting design and implementation details, but for now, I want to focus on the three buttons in the top right:

Simple, right? Two buttons, a visual divider, and another button. If we break this up into layout constructs, in, say, Figma, you could do this by wrapping three labels and a rectangle in Auto Layout-group. So far so good.

I can implement them very similarly in code with Apple's UIStackView and a couple of UIButtons (the button part is _not_ as straightforward as I am making it sound and I'm not actually using UIButton, but I haven't yet processed that trauma so let's pretend).

me: I'm done! Time to move on to the next thing.
brain: *drags cigarette* ...you forgetting anything?
me: What? No. Go away.
brain: Heh. OK, kid. Sure.
me: Good. Let's see, what's next? I gotta—
brain: *whispers* ...touch targets
me:

It's very common to need to improve or compensate for insufficient touch targets, especially in mobile design. In the screen above, the touch target of the 'More' button is 20x40. That's pretty small — for example, Apple recommends touch targets *at least* 44pts large.

I know all this from experience, but since it's been awhile since I had to meddle with touch targets, this means a 10 minute trip to Apple's HIG to confirm what I know then 20 minutes spent making sure that I override the methods to modify the touch target correctly and...

...40 minutes later my brain has started to melt out of my ears, but hey, success! Now the button's touch target is automatically padded, which raises the tappable area to >44pts and makes it much easier to hit without having to mess with the button's actual layout.

Finally! I can move on from these three dumb butto—

brain: Hi.
me: NO. I'm not doing this with you again.
brain: Y'know, I wonder...is fingers the only way people are going to use this?
me: *covers ears* I just want to move o~
brain: *leans in* YOU FORGOT ABOUT POINTERS, DUMBASS

iOS 13.4 introduced the ability to use mouses and touchpads directly with iPads in a more intuitive way. If you've used it, you know Apple's visual pointer design is somewhat unique. Here's what it looks like when you mouse over one of the buttons by default:

(promise I tried to upload a higher-quality video than that, but twitter has decided I don't deserve to be able to upload videos today, so... you get a gif)

As you get closer to interactive areas, these areas 'attract' the cursor while morphing into the area's shape. This isn't just for aesthetics' sake, but so you don't need to be as precise when hitting buttons and the like (see: Fitts's Law).

Pointers are something mobile apps have never really had to consider before — when designing web or desktop software, the practice of reacting visually to mouse hover to help indicate interactivity is common. On mobile? Not so much.

By designing mouse support this way, Apple gives users more intuitive (hopefully), easy-to-use mouse support, designers and developers less work (you don't need to roll your own hover states) and ensures older apps get decent pointer support for free. Not bad.

Now I *could* just take advantage of the default pointer interaction stuff and go home (sike! We're all home! I can't LEEAAVE) but something is bothering me, so once again, I take a trip not just to the HIG, but WWDC vids as well.

Fast forward, and I've learned at least one key thing I wasn't aware of before: for groups of adjacent buttons like this, Apple has a neat UX trick of ensuring that buttons have "contiguous regions." (Regions are the same conceptually as touch/hit targets, but for pointers.)

Why does this matter? Well, by making it so that there's no gaps between these buttons' regions, the pointer will be 'pulled' and glide smoothly from button to button, requiring less precision. It makes sense to do for semantically grouped and visually adjacent stuff like this.

I'll spare you some of the details on implementing this (s/o to @steipete and co. for their articles on this). Here's how interacting with these buttons with a pointer looks before contiguous regions, before and after:

( @TwitterEng I had to send this video to my phone, screen cap it, then upload it from the twitter app before it sent. Absolutely refused to upload from desktop with zero feedback. :/ )

(You might've have missed it, but there's an additional detail in the video above. As the user mouses over a button adjacent to the divider, the divider itself disappears. This is just a minor tweak to make the move from the 'Select' to 'More' button less visually noisy.)

We done? NOPE. (design is never done, bucko . (wow. very designer. much thought lead)) There's more to consider, like:

- Dynamic Type!
- Accessibility! (Voice Over, High Contrast)
- Dark Mode!
- The futility of life!
- and more!

and that's just for 3 buttons!

So what's the moral of this story? The moral of the story is that sometimes when you can't figure out how to fix a bug it's a decent distraction and *definitely not* a waste of time to go on twitter and write entirely too long threads about something completely unrelated

OK, fine, so the real moral is... shoot, I didn't think this through. My point is, making things is always harder in practice than it is conceptually, and that reality doesn't care how simple or easy you (as consumer or producer) assumes or thinks something will be.

In other words: time, complexity, and struggle are almost always the costs paid for producing anything of quality, or that's worth doing to begin with. This thread is really more of a reminder for me, since despite doing this for quite some time now, I still manage to forget

also this thread is a really long reminder that maybe I should get a blog

btw this thread is, in spirit, a continuation of this other thread which you might find interesting if me musing about design philosophy and other stuff(?) sounds like your thing: https://twitter.com/mattxcurtis/status/1196937009551462400