Tag: keyboard flow

Flow Breakdown: Adding captions to images in WordPress for iOS

I usually publish to my WordPress blogs via Ulysses on both macOS and iOS. Occasionally, I check out the state of the WordPress app and wordpress.com’s Calypso web interface on iOS. A litmus flow for me is image captioning.

WordPress iOS App

In the screenshot below, three freshly uploaded images are shown in the editor. When I tap an image, I see Edit in the resulting menu. I’m on the right track, yet already confused. I’m not sure which image I’m operating on. The selection indicator is too subtle, requiring me to get closer to the screen.

Screenshot of the editor with three images inserted. A “More Options” menu at the bottom of the screen lists “Remove Image”, “Edit”, and “Dismiss”. There is a subtle blue selection band around the center image, indicating it is selected.

If the cursor is located after the selected image, the editor scrolls down to center the cursor upon exiting the Media Options flow. The image I was editing is now partially offscreen, increasing ambiguity.

Screenshot of the editor showing the last of the three images centered with a big blue cursor in front it. This is scrolled down relative to the previous screenshot.

This ambiguity creates anxiety. Which image am I editing? The “Media Settings” page offers no context.

Screenshot of the “Media Settings” page showing settings for “Alignment”, “Link To”, “Size”, “Alt Text”, and “Caption”. There is no thumbnail of the image.

My go-to anxiety flow in the face of such ambiguity is to go back and reorient. If I “Cancel” to return to the editor in order to establish context, the editor offers more ambiguity instead of reassurance by scrolling down as mentioned above. Even without the scrolling, the blue selection indicator requires me to squint. Selection visually collides with the cursor (which is image height when on the same line as an image), increasing ambiguity further.

I write descriptive captions in the interest of accessibility. I need to see the image as I do this. Here’s what image captioning looks like in Ulysses on macOS.

Screenshot of Ulysses for macOS showing the image editing interface. The interface includes the image being edited and the field “URL”, “Title”, and “Desc:”. “Desc” is filled with test. I can see both the image and the “Desc:” field while composing image descriptions.

And here’s what it looks like in Ulysses on iOS. A little scrolling back and forth between the image and description field is needed, but at least they’re on the same page. I’ll gladly scroll if it means getting images large enough for my eyes.

Screenshot of Ulysses for iOS showing the image editing interface. A large scrollable version of the image is placed above fields for URL, Title, and Description.

In both of those interfaces, the image is available for reference while captioning. Contrast them with the WP iOS app. The “Caption” screen consists of a single text input field. The image is not displayed. No information about the image is displayed. This means I’ll have to flip back and forth between the WP app and my camera roll app to write a caption.

Screenshot of the Caption editor showing an empty caption field. The image is not shown anywhere on the screen.

If I want to consult the image from within the WP app instead of flipping to a different app, the journey is: two taps back to the editor, a bad scroll interaction depending on cursor location, peer over my bifocals at images and selection indicators, and then another three taps back to the Caption field. I’d have to do this over and over to transcribe the screenshots in this post. I started this post in the iOS app and quickly tired.

Calypso on iOS Safari

The iOS app’s caption flow does not work for me. So how about captioning flow on the mobile web? Alas, Calypso on iOS Safari is buggy, erratic, and frustrating to the point that I usually give up on it and go get the laptop. Sometimes, though, I can complete an editing session. In this shot, I’m adding a caption as part of image insertion flow. The image thumbnail is on the small side for me. I need big images when writing captions, especially for screenshots. Otherwise, I have to find the image in an interface that gives me a better view and then correlate back and forth.

Screenshot of Calypso’s image editing modal in Safari on an iPhone 7+. A thumbnail of the image being edited is displayed at the top. Title, Caption, Alt text, and Cancel and Insert buttons are arranged below the image.

In the following screenshots, I’m adding a caption to an image after it has been inserted. First, delicately dismiss the Cut Copy bar without dismissing the inline image toolbar hiding behind it. This is fussy and awkward.

Screenshot showing the iOS Cut Copy bar obscuring Calypso’ inline image bar.

And, then, tap the caption button, wonder why it didn’t do anything, scroll down, realize a caption input unfurled below the fold, and start adding a caption.

Screenshot of the editor showing an image with a caption field below it containing the placeholder text “Enter a caption”.

There’s the possibility of good flow friendly to presbyopia beneath the unfortunately numerous interaction bugs. Though, even with the interaction bugs, at least I don’t have to caption an image I can’t see. There are many times I wish I could use the mobile web interface, but the scroll bleed, vscroll loss, keyboard flyup, lock ups, crashes, requests for more memory, and general unpredictability exclude it from consideration.

Neither interface meets my needs for captioning flow. I need images to be present on the same screen as the fields that describe them. I need access to image views large enough for my presbyopic eyes to transcribe text from screenshots. I need caption fields with enough room to comfortably compose detailed image descriptions.

Magicforce 68 Mechanical Keyboard and Karabiner Elements

After reading “Why I Love Compact Mechanical Keyboards and You Will Too” over at The Wirecutter, I stuck the Magicforce 68 with Gateron Brown switches in my save for later list on Amazon. A few days ago, a 20% off sale on the Magicforce prompted the purchase of my first mechanical keyboard in years. Once upon a time, my Northgate OmniKey Ultra was a reliable companion (wish I still had it). In the intervening years, MacBook and Apple wireless keyboards have been my go-to input devices.

I’ve been missing that mechanical feel, of late, so when this keyboard with respected switches dipped to US$55, I went for it. It showed up a couple hours ago, and this post is its first test.

The first thing I did was remap the keys for macOS using Karabiner Elements.

Screenshot of Karabiner Elements showing mappings for left_command to left_option, left_option to left_command, right_control to right_option, and right_option to right_command. The target device is “USB Gaming Keyboard (HOLDCHIP)”.

Here’s what that looks like in the karabiner.json file.

 

[code language=”javascript”]

“simple_modifications”: [
{
“from”: {
“key_code”: “left_command”
},
“to”: {
“key_code”: “left_option”
}
},
{
“from”: {
“key_code”: “left_option”
},
“to”: {
“key_code”: “left_command”
}
},
{
“from”: {
“key_code”: “right_option”
},
“to”: {
“key_code”: “right_command”
}
},
{
“from”: {
“key_code”: “right_control”
},
“to”: {
“key_code”: “right_option”
}
}
]

[/code]

That swaps the Cmd and Alt keys around to match the standard Mac configuration.

After that, I used the keycap puller included with the Magicforce to swap the keycaps to match the new mappings.

Something to be aware of when using this and other 65% keyboards with macOS is that the tilde and Esc share a key. When Cmd+tab switching between apps, Cmd+~ is used to cycle backward through the app list and Esc is used to abandon the switch. The Magickey defaults the Esc+~ key to Esc, which interferes with Cmd+tab flow. Use Fn+q (built into the Magicforce) to switch the default behavior of the Esc key to ~ instead of Esc.

In this mode, Fn+Esc is needed to send Esc. I’m not fond of that, so I overload the Caps Lock key to serve as a hyper key and an escape key. I do this for all my keyboards, not just 65 percenters.

Screenshot of Karabiner Elements showing the complex modifications page. The rule “Change caps_lock key to command+control+option+shift. (Post escape key when pressed alone)” is installed and active.

To install the “Change caps_lock key to command+control+option+shift. (Post escape key when pressed alone)” rule, click “Add Rule” in the bottom left and then choose to import rules from the internet. On the resulting web page, import the “Change caps_lock key” ruleset in the “Modifier Keys” section.

I wrote this blog post with the Magicforce and enjoyed my reunion with that mechanical clack of memory. My typing speed and accuracy have declined over the years due to neuropathy, RSI, a broken wrist, and muscle cramps that frequent my hands. So far, I’m feeling more accurate on this keyboard than I have in a while. Perhaps the clack and travel give the extra tactile feedback my diminished senses need. Hopefully, my hand spasms will be okay with that.

My black Magicforce mechanical keyboard with keycaps swapped for a macOS layout. The backlit keys glow white. The keyboard sits on my lap desk, which is a green cutting mat with white layout lines laid on a grid affixed to a piece of plywood with contact cement. The cutting mat shows its history as a hard working surface, complete with stains and gouges.