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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.