Good Vibrations, Bad Vibrations, Overwhelm, and Meltdown

I spent the evening with Polyphonic’s video essays on Fairytale of New York, Walk on the Wild Side, Wish You Were Here, Tangled Up in Blue, The Thin White Duke, The Chain, Deals with the Devil, Freddie Mercury’s Voice, Flea’s Bass, and John Bonham’s drums. Polyphonic offers captivating and well-produced looks at legendary songs and musicians.

The episode on Good Vibrations, Brian Wilson’s pocket symphony, had me bringing out the headphones to disappear into the version of the song from Smile.

Headphones and curated good vibrations are how I cope with sensory overwhelm, especially when I’m out in the world, outside my Cavendish bubble, where I’m unable to control my context. Smile and Pet Sounds are great albums in which to go for a sensory swim and let the world dissolve.

The Brian Wilson biopic, “Love and Mercy”, has a very relatable scene where Wilson is overwhelmed by the noise of utensils and conversation at the dinner table.

Overload, meltdown, outburst, and retreat. That escalation is a feature of my life, at times a daily one. As meltdown approaches, everything feels like shouting, everything is too much. Sounds and social interaction become painful, and adrenaline and anxiety surge, humming through my body and senses, overloading wires insufficient to the immensity of tidal flow. The dinner table scene is a good representation of how I experience overwhelm. A noisy, crowded dinner table is a personal hellscape.

I came across this piece on Autistic Traits and Experiences in “Love and Mercy” that explains further.

This scene is quite similar to how I experience an autism sensory overload. When sounds, lights, clothing or social interaction can become painful to me. When it goes on long enough it can create what is called a meltdown or activation of the “fight-flight-freeze-tend-befriend” (formerly known as “fight or flight”) response and activation of the HPA axis; a “there is a threat in the environment” adrenaline-cortisol surge.

This makes seemingly benign noises a threat to my well-being and quite possibly real physical danger to my physiology. Benign noises become painful, and if left unchecked, enough to trigger a system reaction reserved for severe dangers. This is what days can become like on a regular basis for myself and many on the spectrum.

“Let me stick a hot poker in your hand, ok? Now I want you to remain calm.”

That is the real rub of the experience of sensory meltdowns. The misunderstanding that someone with Autism is just behaving badly, spoiled or crazy. When the sensory overwhelm is an actual and very real painful experience. It seems absurd to most people that the noise of going to a grocery store could possibly be “painful” to anyone. So most people assume the adults or children just want attention, or they can’t control their behavior. In work situations I get accused of all kinds of things. And when I leave a noisy situation like a party to step out to take a break, people will notice that I’m “upset”. They will assume or worry that I must be upset at something or someone. And that’s just if I do take a break. If I can’t take a break or get my life out of proper oscillations and can’t avoid noise or sensory/emotional overload, then I can get snappy, defensive, irritated and under very unfortunate circumstances even hostile.

What the stress of noise means, in the autism’s world of an over-sensitive physiology and ramped up stress experiences, is that that pain is warning of us of real damage being created in our bodies. So this anxiety and reactivity isn’t necessarily just perceived but is actually happening. We are not being overly dramatic or a brat (what those with Autism are often accused of). Damage to our physiology is what noise can actually do.

Source: Autistic Traits and Experiences in “Love and Mercy” The Brian Wilson Story – The Peripheral Minds of Autism

As I write this, I’m coming down from a long day punctuated by meltdown. I feel scoured and hollowed by adrenal exhaustion. Time for a swim in the good vibrations of someone who understands.

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.

Stop Losing My Vertical Scroll Position

I experience the disorienting loss of vertical scroll position in many of the apps and websites I use. Twitter and other stream interfaces update the feed while you’re scrolling, losing your place. Page and card interactions often plop you back at the top of a list when you hit the back button, especially if there are filters active.

I’ll illustrate with wordpress.com since I use it a lot and helped make it.

In the screenshot below, I scrolled the theme browser down a bit.

Screenshot of the wordpress.com admin interface showing the theme browser/selector. Selectable theme cards are laid out in a grid. The page is scrolled down about 1/3.
Screenshot of the wordpress.com admin interface showing the theme browser/selector. Selectable theme cards are laid out in a grid. The page is scrolled down about 1/3.

And then clicked the “Shoreditch” theme.

A screenshot of the theme details page for the Shoreditch theme. <- All Themes shows in the menu navigation.
A screenshot of the theme details page for the Shoreditch theme. <- All Themes shows in the menu navigation.

And then clicked “<- All Themes” to go back.

Screenshot of the theme browser page, which is now scrolled to the top instead of 1/3 down where I left off.
Screenshot of the theme browser page, which is now scrolled to the top instead of 1/3 down where I left off.

And lost my scroll position.

A gallery style browser that loses vertical scroll position is very frustrating. Repeated grid and list scanning is headache inducing and exhausting.

I spend too much time getting back to where I was, trying not to fall out of high memory state, trying not to crash my stack. Vertical scroll position is sacred. The back button should take me back to where I was, not respawn me at the checkpoint at the beginning of the dungeon. It should not be a quest restart button.

Here’s another example on wordpress.com. In the following shot, I scrolled some search results down a bit.

Screenshot of the wordpress.com admin interface showing the "Blog Posts" list. The list is showing the results for a search on "anxiety". The list is scrolled down from the top.
Screenshot of the wordpress.com admin interface showing the “Blog Posts” list. The list is showing the results for a search on “anxiety”. The list is scrolled down from the top.

And then clicked on a post in the list to open the editor and peek at the contents.

Screenshot of the editor showing "Design is Tested at the Edges: Intersectionality, The Social Model of Disability, and Design for Real Life".  There's a Close button in the top left corner.
Screenshot of the editor showing “Design is Tested at the Edges: Intersectionality, The Social Model of Disability, and Design for Real Life”. There’s a Close button in the top left corner.

And clicked “Close” to go back to the blog posts list.

Screenshot of the "Blog Posts" list with the list scrolled back to the top.
Screenshot of the “Blog Posts” list with the list scrolled back to the top.

And lost my vertical scroll position. During searches, I often dip in and out of the editor looking for what I want. Repeatedly losing scroll position makes this so frustrating and slow.

One more example, this time with Netflix.

Scroll down.

A screenshot of Netflix with the video browsing grid scrolled down.
A screenshot of Netflix with the video browsing grid scrolled down.

Click a show to start playing.

A screenshot of the Netflix video player with a back arrow button in the top left.
A screenshot of the Netflix video player with a back arrow button in the top left.

Click the back button to go back to the video grid.

Screenshot showing the video browser  scrolled to the top.
Screenshot showing the video browser scrolled to the top.

Lose your place.

I felt frissons of frustration and loss back in the 1980s when my fingers —my little stack pointers and quest markers—slipped from the leaves of my choose your own adventure books. Now, I experience those feelings with regularity in my relationships with software. I regret associating those physical memories with a common software interaction bug: one that, seemingly, many of us can’t reliably fix.

The occasional slipped finger added to the sense of journey and questing. Repeated, daily loss of scroll position merits no associations with nostalgic sepia. The complex software interfaces I use today fail as custodians of context more reliably than did my 10 year old fingers.

#vscroll-loss #list-scanning

#stresscase #anxiety-flow #painpoint #frustrated #discouraged