Mobile Empathy Challenge: Edit posts with embeds

My posts often have embedded tweets and YouTube videos. Conversations start on Twitter and then make their way into blog posts, where the tweets are cited. These days, a whole lot of journalism and advocacy features embedded tweets.

Here’s a sample of what my posts with embeds and videos looks like in the iOS app.

IMG_3885

Newlines have been stripped. This is an uneditable, run-on mess. I don’t even try to edit this for fear of messing something up. The iOS app is not a valid option for editing the kind of posts I write.

Unfortunately, neither is Calypso in mobile Safari. When a video is present, the text overflows the viewport. (Notice also the blank space below the title.)

IMG_3883

If I pinch to zoom all the text into view, I get this.

IMG_3884

This overflow and zooming is caused by embedded videos.

IMG_3886

The video overflow is not the only frustration. The Twitter embeds do a jittering resize dance that interferes with scrolling and cursor placement. I’m too tired to do a screencast, so here’s a static shot of two tweets that exhibit the behavior.

IMG_3887

Most of my posts contain embedded tweets. I think that is fairly typical of self-advocates bringing social media discussions into their posts. Many of my posts contain a related video or two from other self-advocates. Between embedded tweets and videos, I cannot edit my posts on my phone with either the iOS app or Calypso. I have to get out my laptop. I’m disabled, in chronic pain, and spend much of my time in bed. My phone is my primary device. I use my laptop only when I have to, which seems to be whenever I want to publish or edit posts on wordpress.com. Many of my posts are living documents that I continually update. I cannot update them from my phone using either the app or the web.

Other problems with editing on the mobile web (some of which apply to desktop too):

  • The editor toolbar is not pinned
  • Sometimes embeds load as blank placeholders.
  • Embeds cause reflow as the load, stomping vertical scroll postion and cursor postition.
  • Scroll bleed in settings menu.
  • Scroll bleed in preview.
  • The author selector doesn’t dismiss with outside taps.
  • Info bubbles in the settings sidebar sometimes run offscreen.
  • Jittery embed reflow when switching from HTML back to Visual.
  • Losing vscroll and cursor position when toggling settings.
  • Settings opening scrolled down to the bottom.

#editor, #embed-reflow, #embeds, #mobile, #scroll-bleed

Session Notes – Preview scrolling, embeds in iOS app editor, repeated notifications, editing flow, disappearing embeds, post-post

Pardon this lazy, unedited, and raw session note.

Can’t scroll to end of preview

And sometimes scroll jumps back to top

My iOS flow: I compose my posts entirely in Ulysses, including tags and featured images. I publish to Calypso, where I preview. But, preview doesn’t scroll all the way down and often jumps back to the top while scrolling.

Outside tap to dismiss

Tapping in the content doesn’t dismiss the follow confirmation dialog. Tapping in the blank space of the actionbar does dismiss, but I haven’t been able to make it a habit. I always tap a couple times in content before remembering to tap in the actionbar.

iOS app embeds

Embeds don’t display in the iOS editor and their URLs don’t receive newlines. I don’t use the iOS app to edit most of my posts due to this. I’m afraid to edit these posts. This happens with the native editor and the production visual editor.

Notifications icon disappears

Tap notifications and then W menu.

Notifications with repeated ops

This notification style always gets in the way of repeated operations. I let them pile up until they obscure and then Cmd+R to save clicks.

https://github.com/Automattic/wp-calypso/issues/3203

Editing

Having a rough time editing a post. I pasted some text into a post. Added block quotes to one of the pasted paragraphs. Noticed I put the text in the wrong place. Tried to cut and paste to move it, but ran into the blockquote and half-height cursor problems. When coupled with slow connection that prevents embeds from loading in a displaying fully, I wasn’t confident in my edits. Tried the “revert to draft button” (I didn’t get a screenshot) thinking it would revert to my state at the beginning of my edits, but it seems to unpublish the post. When I clicked the “revert to draft” button, I thought, for a moment, that it wasn’t doing anything. Then I noticed the subtle spinner in the Update button. I have a hard time seeing that animation.

Embeds need a placeholder. I see empty space for embeds often, making me think they have disappeared.

Published the post again. Original permalink retained. Leaving the editor after pub triggered our lingering NMIT, the save/restore AYS.

Embeds didn’t load after pub, making it looking like they disappeared.

Chrome chewing up CPU. Closing the editor session brought CPU back down. I’m pretty good at triggering it. My embed and blockquote posts that reflow on every editor page load are a workout.

I can’t really edit these posts anywhere in WP. The iOS app doesn’t display embeds and strips newlines between them. On desktop, all of the reflow makes editing a chore to avoid. I still haven’t made the edit that started this adventure.

I think core wp-admin caches embeds and doesn’t reflow like Calypso, but haven’t tested that lately.

Lots of journalism is full of Twitter embeds. Calypso’s embed handling is a bad experience.

Reflow on every editor page load, reflow when adding new embeds, reflow on undo, partially loaded embeds, blank embeds, vscroll loss.

No access to embed link without going to HTML editor. Can’t edit embed except to delete.

Which means scroll-scan-correlate cycles between visual and html editors.

My posts full of embeds and block quotes are my litmus, and I can’t edit them without quite a lot of grief on any platform, web or app.

I consider these posts a good litmus. Take a look at what journalists are creating these days. Lots of Twitter embeds and quotes.

So hear this flow canary singing embeds.

Global post search doesn’t return results

I have many posts that should show for this search.

Confirmed by two others.

Partial, disappearing embeds

Embeds often load in partially.

And then disappear. In this shot, the embed went away and the editor ended up scrolled all the way down into the trailing chunk of whitespace that always bugs me.

The embed link is still there.

Switching to HTML and then back to visual editor fixes the embed display.

But what’s with that more tag? Maybe I accidentally clicked into the HTML toolbar on the way to the visual editor. I sometimes miss the tabs, especially when going back and forth doing scroll-scan-correlate between the editors. Pin the editor tabs.

Post-post

One of the first things I do after pubbing is grab a link to the post. Even with publicize on I usually want a link, often to drop in a chat or email. Anecdote for post-post.

My flow is very clipboard heavy. I love Copied app.

Notifications error

Sometimes notifications won’t open, or it opens but refuses to dismiss with an outside click. These errors showed after clicking notifications.

This might be slow connection related. Clicking notifications while the page is still loading might be a contributor.

Need help opens another customer instance in a new tab

Resolves to https://ryan.wordpress.com/wp-admin/customize.php?return=https%3A%2F%2Fwordpress.com%2Fsettings%2Ftraffic%2Fboren.blog&calypso=true&calypsoOrigin=https%3A%2F%2Fwordpress.com&frame-nonce=c485046c87

Happens even with Ghostery paused.

Rough iOS web session

I’m a broken record, but this experience was another of cascading failure and frustration. I can’t edit the kind of posts I make in any of our interfaces without frustration and distrust.

I also had a restore AYS pop up.

Facebook publicize re-auth

While doing reauth from the iOS with 2FA on my FB account, I got stuck on this screen after submitting my generator code. I confirmed the auth on desktop and it remained stuck. Tapping X does not dismiss. I had to kill the WP app. I lost my draft.

Post opens zoomed and overflowing

I tried adding a new tweet to that since I couldn’t work with the iOS app. After pasting, interface went it reflow jitter, constantly jumping scroll around. I backspaced over the added tweet even though it kept jumping offscreen. Once the whole thing was gone the reflow jitter stopped. I abandoned the post, proceeding through the unsaved changes ays. Wish I could discard changes so I know I’m rolled back.

Bottom line: I can’t edit what I write in either interface, forcing me to desktop. I’ll probably forget what I wanted to add before I get to a laptop.

When I’m feeling persistent, I’ll drop my links and edits in a “To edit” sheet in Ulysses so they are saved for later. I’m not feeling persistent right now.

Media Modal: Selection Model, Full-width Images, Gallery Flow, and Click-to-view/edit

In this 2015 thread, I listed some of my media modal requirements. In light of possibly changing the selection model and click-to-view/edit flow of Calypso’s media modal, I thought I’d post the list here.

  • Resolve accidentally inserting individual images instead of galleries. This is annoying on desktop and even more annoying on mobile where cleaning up after inserting a bunch of images is more difficult.
  • Provide access to full-width images during image insertion and gallery creation flows. Currently, when making galleries, I have to take off my bifocals, stick my face in the screen, and scrutinize tiny thumbnails. I correlate the thumbnails with full-width images viewed in the camera roll. I flip back and forth between camera roll and the media modal, hoping I’m selecting the thumbnails that correspond to the images I want. I’ve sat with clients helping them add galleries to their sites. We huddle around a laptop looking at tiny images, flipping back and forth with the camera roll or gallery app. We have an industry of people making awesome themes for showcasing photos and galleries, yet creating those galleries is a presbyopic strain that makes you feel old. Nobody likes software that makes them feel old or stupid. I feel the lack of access to full-width images in insertion flow in every app and mobile web interface I use.
  • Keeping with the full-width trend, provide fill-width input fields, particularly for captions. Inputs constrained to the width of thumbnails or sidebars are really difficult to use. Scrolling through inputs is not enjoyable on phones, especially on iOS which tends to trigger what I call “boxed input scrolling”. You can’t move the cursor through text lying beyond the confines of the input box. Full-width captions will be a huge improvement.
  • Allow arrowing through images in a set similar to what is done in the attachment details modal. This accommodates the full-width captions mentioned above. Tap/click/swipe through images, captioning as you go. As someone who creates a lot of captioned galleries, I really look forward to this.

#click-to-view-edit, #editor, #galleries, #gallery-flow, #media, #media-model, #selection-model

Featured image editing flow through the media modal

Here’s the editor with a featured image set.

Click either pencil icon to edit the featured image. The media model opens to this:

There is no indication of the current featured image nor is there an edit button. If I was coming in here to edit the featured image, either the image itself or its meta, I would be lacking sign posts for my flow.

Further, Calypso lacks an “uploaded to this post” filter. This makes finding previously uploaded featured images all the harder.

https://github.com/Automattic/wp-calypso/issues/2136

If the modal were to open with the current featured image selected, an edit button would show.

That marks the way more clearly for those wanting to edit the current featured image rather than swap in a new image.

#editor, #featured-images, #media-flow, #media-modal

Calypso on iOS: The big impact of little interaction bugs

During my last iOS web session, I thought about the little bugs and interaction problems that compromise our iOS web experience. Some of these have been with us for a long time, notably scroll bleed, editor zoom-and-pan, the traveling 2FA prompt, and notifications scroll jitter.

With the recent editor changes, we’re getting closer to a flowful mobile web experience. Scroll bleed and zoom-and-pan, however, baffle our emerging flow.

Ruminating on this and previous iOS web sessions, I arrive at these suggestions.

  • Eliminate scroll bleed, notably in the sidebar and notifications. Scroll bleed interferes with our primary nav.
  • Eliminate zoom-and-pan in the editor.
  • Improve image and embed interactions in the editor, particularly while scrolling.

These are little interaction problems with big impact. They get in the way of flowing through my Calypso publishing sessions.

From my last session:

Scroll bleed

I often experience #scroll-bleed in the sidebar. When a lower layer grabs the scroll, the sidebar doesn’t scroll. Offscreen menu items inaccessible. Usually, waiting a few seconds before initiang another scroll will clear the bleed and allow the sidebar to scroll. This is a little hitch in my flow that occurs often.

Scroll bleed in sidebar

Notifications does it too.

https://github.com/Automattic/wp-calypso/issues/12671

https://github.com/Automattic/wp-calypso/issues/8173

Zoom and pan when editor focuses

The view zooms and part of the toolbar goes offscreen when I tap into the editor.

Zoom and pan when switching tabs

Tap into HTML. View zooms and pans.

Tap into visual. View zooms and pans.

Cut, copy bar obscures inline image toolbar

Tap an image. The copy bar comes up along with the image bar.

Also, initiating a scroll drag on an image triggers the image bar when the finger lifts at the end of the drag.

Account prompt

The 2FA prompt follows you to the notifications and reader screens.

Notifications scrolling

The filter header in notifications jitters while scrolling and sometimes comes unpinned.

 

https://github.com/Automattic/wp-calypso/issues/8173

https://github.com/Automattic/wp-calypso/issues/5697

Sharing pop up

The sharing pop up doesn’t dismiss with an #outside-tap.

Sometimes it opens offscreen.

Editor toolbar does not pin

I need the toolbar, even when scrolled.

#editor, #ios, #notifications, #scroll-jitter, #session-notes, #zoom-and-pan

Tracker Survey

Here are a handful of Ghostery reports for various wordpress.com hosted sites.

Logged in:

Logged out:

42 trackers on the front page of wordpress.com when logged out is a lot. Do they all respect Do Not Track?

Previously: https://test.wordpress.com/tag/trackers/

#ads, #ghostery, #trackers

Editor and Media Flow Wishlist

These are the editor and media tickets that most affect my publishing routine. Fixing these would allow me to flow. These are roughly in order from the most to the least impactful on my personal flow. The first 6 are the ones I’d most like to see fixed.

#editor, #media

#duplicates, #hashtag, #hashtags, #longer-ones, #pesky