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: overflow, reflow, embeds, image selection, double notifications, tab titles, working with text

Overflow, zoomed – iOS web

This insisted on loading zoomed in a bit.

Dismissing follow – iOS web

Follow doesn’t dismiss with an outside tap. To dismiss, I tapped 3 dots and then tapped it again. Tapping follow to dismiss closes the popup but unfollows in the process.

Embed reflow – Macnchrome

Adding Twitter links causes vscroll stomping reflow, especially on posts with other embeds. This happens every time I paste an embed and every time I load a post with multiple embeds.

#embed-reflow and View Post #forked-flow are taking the joy out of this session.

Whenever I edit a post with embeds, I wait 30 seconds before touching the keyboard due to the embed reflow. There’s no embed caching? Hmm, will Chrome’s

scroll anchoring help in this context? It’s the new default in Canary. Looks like it can be turned on via a flag in production Chrome. I’ll try it out.

chrome://flags/#enable-scroll-anchoring

Telegram’s image picker

Wishing our image pickers had accessibly sized images like Telegram. This is media flow I can see and use.

Double notifications – iOS app

Double notifications in the Hockeyapp beta. These persisted for awhile but then stopped.

Meanwhile, the Testflight beta didn’t double.

Inconsistent media display

This is how the iOS share extension works. If you share an image from another app to the WordPress app, it’s added to the post as a gallery. A relatively recent enhancement added the ids parameter to the shortcode to specify the image being included there.

Yuck. Our history with media is marked by such inconsistencies. Recall when IO editor launched with single images posting as galleries. Users responded predictably.

https://test.wordpress.com/2016/11/10/session-notes-back-buttons-hidden-sites-touch-image-flow-notifications-site-switching-flow-keyboard-flow-media-section-desktop-first/#comment-403

Twitter embed doesn’t reflect updates

I updated a post and then tweeted it.

That shows the old text.

Post: https://ryan.boren.me/2016/08/14/rules-of-thumb-for-human-systems/

Browser tab titles – Macnchrome

Which post am I editing in each tab?

Non interactive notification – iOS app

Visual glossary

Aside, notion: A marked up set of screenshots naming the various ui elements would help these discussions. A new section in the dev docs for a visual glossary of terms.

Working with text – Macnchrome

Moving links and blockquotes around in the visual editor isn’t so friendly. I often switch to the html editor when reorganizing living documents. There, I…

  • scan through the tag soup
  • rearrange blocks and links
  • mess up tags in the process
  • look for revisions in Calypso so I can revert
  • fail to find revisions since Calypso doesn’t have revs yet
  • switch to wp-admin
  • find post
  • dig through revisions
  • restore old revision
  • back to Calypso editor
  • reload to get restored rev
  • #frustrated

#app, #desktop, #editor, #embeds, #ios, #macos, #mobile, #notifications, #session-notes, #web

Session notes: forked flow, featured images, images in posts list, network errors

forked-flow

  • Start on permalink post page
  • Click the pencil icon in the actionbar
  • Make changes
  • Save
  • Click View Post in the confirmation message
  • Opens in #new-tab-window and forks flow

View Post forks flow by opening in #new-tab-window. Could/should view post be made aware of when flow passes in from the actionbar and offer to return to calling context? How do our post-post trampoline concepts handle actionbar edit flow?

Jetpack connected site links to wp-admin – iOS app

Wishing my Jetpack connected site linked to Calypso instead of wp-admin.

Photo sites and featured images – Macnchrome, iOS Safari

So far, every post to this site was made through the iOS app, IIRC. I upload a single photo and publish. I don’t set a featured image or add taxonomy. Here’s what my site looks like.

I dig it, but here’s what I see in the backend.

No images.

Here’s the posts list after setting a featured image.

And here it is after waiting 10 seconds-ish.

The iOS app shows images for all posts. Setting a featured image is not required.

As mentioned in this session, I had some single image posts mysteriously pubbed as galleries. The iOS app does not show images for these posts, but Calypso does.

So, the app shows images for single image posts but not galleries. Calypso shows images for galleries but not single image posts.

Themes and posts list shouldn’t require setting featured images.

Stuck loading – Macnchrome

I reloaded the page after 30-ish seconds of waiting.

Masterbar – iOS Safari

Can’t save draft – Macnchrome

This was due to some network issues. Is it possible to be more precise with the error message?

#app, #chrome, #desktop, #desktop-bias, #desktop-first, #featured-images, #forked-flow, #inclusion, #ios, #macos, #media-flow, #mobile, #posts, #safari, #session-notes

Session notes: back buttons, hidden sites, touch image flow, notifications, site switching flow, keyboard flow, media section, desktop-first, link pasting – iOS app, macOS app, Macnchrome

Back button vscroll respect

Audit back buttons for vscroll respect. Losing vscroll kills browsing flows. For example, I prefer wp-admin themes flow to Calypso themes flow. Calypso loses your vscroll place when you return from the theme details page to /design. This makes for awkward theme browsing flow. wp-admin remembers your place in the /themes list as you navigate in and out of theme details.

wp-admin uses a modal for theme details, which flows much better for me. It respects vscroll and doesn’t introduce an awkward back nav interaction.

Change hidden sites

Changing hidden sites leads to a wp-admin page that is not ready for small screens.

Also, the “share on” dialog does not dismiss with outside taps.

Touch image flow

Here’s a screenshot filled post on self-hosted WordPress.

Depending on how you link your images, tapping those screenshots could open them in a new browser window or do nothing. Neither behavior provides good, accessible flow, as has been lamented before.

Every time I tap through to the images in Federico’s screenshot filled posts, another touch media flow lament is logged in my soul.

WP should handle all of this. Shoulda been handling it for years. Insert my usual mobile web advocacy.

Decent touch image flow should be baked into core.

I consume a lot of WordPress sites through the Twitter app. We drop flow. Touch flow comes into us, and we drop it. One of the ways I most often experience WordPress hasn’t changed since before the iPhone came out.

Systems error

Switching from a8c proxy to direct connect fixed it. Happens to me occasionally.

Notifications and Life

I was about to write something in my parity log, and then notifications sidelined me into other cogitations. I now have no idea what I was about to write on parity. I’ve turned off notifications for almost all apps, services. I might turn off for WP as well.

Between neurological disease and medication, my stack is fragile. I can’t maintain high memory states like I used to. The smallest interruptions crash my stack. Notifications are not small interruptions. They are big ones that cause stack dumping, flow forking, and tangents. Notifications disrupt flow states.

Notifications both enable flow and disrupt flow states. Finding balance requires fiddling. I’ll try running WP on iOS with notifications going to the notifications stream w/o showing an alert. I’ll still get a list of actionable notifications, but without the interruption. I wish I had this control on macOS.

I’m also wishing I could turn the orange dot indicator in the masterbar notifications off.

Notion: Notifications interfaces should have a do not disturb toggle. Especially ones that rely on Chrome Desktop Notifications? It’s interface for notifications is not enjoyable.

Finishing setup – Mac app

“Finishing set up” and “Loading my sites” are stuck on screen. This was coincident with slow loading of WP sites in my Chrome session. IIRC, I had to restart the app to get rid of the messages.

Uh oh – Mac app

I abandoned my session after the loading slowness above. I came back later to browse through the reader. After reading a few things, I clicked over on sites and got:

https://github.com/Automattic/wp-desktop/issues/249

No keyboard after switching site – iOS app

The cursor is still in the title, but no keyboard.

This happens after searching in the site picker.

Since the picker always defaults to the primary blog, my usual flow for starting a post is:

  • Tap pencil icon
  • Tap site switcher
  • Tap into search field
  • Type site name
  • Tap the desired site

Now I’m in the keyboard-less state above. From here:

  • Tap into content to restore the keyboard
  • Tap back into title
  • Type in title
  • Carry on with post

Pencil always opens default site – iOS app

I’m on the plantbelly site. Tap the pencil icon.

Picker defaults to my primary site.

I almost published to the wrong site twice in my last session. I had to ditch in progress posts with images twice. I wish the iOS site picker had multisite flow more like Calypso’s. It asks which site to publish to on the way into the editor.

Clicking embed while other embed selected jumps vscroll to first embed – Macnchrome

Click an embed.

Scroll down.

Click on the embed. Vscroll jumps to first embed.

Storify Embed – Macnchrome

No Storify embed?

Twitter embed reflow in the editor – Macnchrome

With a lot of embeds, tweets are slow to load. Links will disappear momentarily as the embed loads. Whenever I load the post, I wait 30 seconds-ish for the load and reflow to finish before touching content.

Single image uploads inserted as galleries – iOS App

Images for two of my posts don’t load in the posts list.

Oh, these single images were inserted as galleries. I published these from the iOS app. I’m not sure how I did this. It was not intended.

Sort recently used to top – iOS app

I wish the iOS app sorted recently used to the top like Calypso does. I wouldn’t have to search so often which would avoid the keyboard interaction bug mentioned above.

iOS landscape – iOS app

I’m flipping back and forth between portrait and landscape in this session. I notice that flipping portrait to landscape to portrait drills down a level. I expected my context to remain consistent as I flipped between the two views.

Dismissing pub drop down in landscape – iOS app

This drop down dismisses with an outside tap in portrait but not in landscape.

Media desktop-first artifacts – iOS web

As with the media modal, the media section’s selection model exhibits #desktop-first thinking in its reliance on showing icons on hover. Here’s how media modal selection and scrolling behaves on touch screens:

https://test.wordpress.com/2016/04/14/media-scrolling-the-media-modal-gallery-on-ios/

And here’s the new media section showing both the edit icon and selection on the same thumbnail:

Calypso media is not designed for touch screens.

Also, #scroll bleed.

Where is reply? – iOS app

Took me a long moment to see reply at the bottom. I didn’t notice until I remembered that @designsimply had experienced the same thing recently. Then, I searched for it at the bottom.

Losing href on cut/paste links – Macnchrome

Links on a line by themselves lose href upon paste. I prefix the link with text as in this screenshot to allow moving the link without losing the href. In the screenshot below, I prepended “Links on a blank line lose href when cutpaste.” in front of my link. Without text in front, the link will lose its href when cut and pasted.

#app, #back-buttons, #back-history, #back-navigation, #comments, #desktop, #ios, #keyboard-flow, #macos, #media-section, #mobile, #notifications, #phablet, #session-notes, #vscroll, #web

Session notes: Editor, domain claim, vscroll, workflow automation, desktop app, TestFlight

Editor locks out after clicking on images – Macnchrome

In this screenshot, I am unable to click into the editor. I toggled wifi. Tried with and without proxy. Restarted Chrome. The problem persisted through all of that before spontaneously working again. Not the first time this has happened. Clicking and resizing images seem to trigger these situations.

Aside: Resizing images is scary. They collapse for a few seconds and then reappear smaller, causing jump, reflow, and vscroll loss along the way.

Still stuck w/ free domain claim – Macnchrome

How can I get rid of this? I don’t want to map a domain.

Vscroll loss after updating post – Macnchrome

  • Go to posts
  • Scroll down
  • Edit a post
  • Add a tag
  • Update
  • Hit editor back button
  • Back at the top, vscroll lost.

Even when not updating the post, vscroll is a little off when going back to posts.

Changing the title before publishing doesn’t change slug – Macnchrome

Blank p2 pages – Macnchrome

Seen this twice today.

Waiting for video processing – Macnchrome

I always wait for videos to finish processing before publishing. Should I? Will I be publishing an unready video if I don’t wait? How does that affect publicize?

https://test.wordpress.com/2016/10/11/video-preview-in-the-editor-macnchrome/

URL Schemes and AppleScript Dictionaries – Mac and iOS apps

All of our apps need URL schemes.

http://www.2doapp.com/url-schemes-in-ios-and-os-x/

The mac app needs an AppleScript dictionary.

Small comment area in notifications – Macnchrome

The first thing I do when replying is make the box bigger.

Desktop notifications – Macnchrome

Desktop notificiations are very intrusive. Turning them off requires digging in content settings.

View Post, The Flow Forker – Macnchrome

#new-tab-window results in multiple editor sessions and confusion over which session has my latest changes. Worst case, I split changes between editors.

View Post opens in new tab. That new tab has an Edit button at the bottom. Flow forked. Editor session++

Desktop app beta channel – Mac app

Note, be patient after clicking Update & Restart when switching from the stable to beta channel. I thought the app wasn’t restarting so I kept launching it again. This prevented the Update & Restart from happening. I did several Update & Restarts before settling in to wait for the long restart, which eventually happened.

WP Desktop Tab Bar – Mac app

macOS Sierra introduced the tab bar, which you can turn on in the desktop app via View > Show Tab Bar. In other apps, you can show the tab bar, open a new app window, and then go to Window > Merge All Windows to bring the windows into the tab bar. The WP app doesn’t have a means of opening a new window.

Going back from Cmd+N – Mac app

In the desktop app, Cmd+n starts a new post. If you have multiple sites, this invokes a picker.

This stomps my stack. I want a way to go back from here. I’ll Cmd+N and then realize I wanted to copy text from the article I was reading in the Reader. If I click into the Reader from the picker screen, my position in the reader stream is lost. I have to rescan the stream to find what I was looking for.

Supporting Sierra’s tabs would help by allowing a reader session and an edit session.

Restore dialog flashes briefly after deleting draft from editor – Macnchrome, Mac app

The screenshot below is with the Mac app, but this happens in Calypso web as well.

TestFlight not updating iOS app – iOS app

This is on a new iPhone 7+. When I setup this phone from backup, the TestFlight WP app was not restored to the home screen. I had to install from TestFlight. That all went well, but now a couple weeks later I’m not seeing the 6.6 update.

iOS app crashes on open – iOS app

The iOS app (TestFlight 6.5) started crashing upon open. It opens to a post list and then bails. I deleted the app and am now blocked.

Workflow – Desktop

I could not function without a clipboard manager. Really enjoying Copied App on both iOS and macOS.

When you copy a link, it grabs the title for you, and offers pasting title, url, or link. I use Link in Markdown often in my Markdown based flow.

A favorite Alfred workflow is my indelicate hacking of the Lazy Link workflow. It grabs the url and title of the frontmost browser window and inserts it at the cursor as a markdown link.

#app, #automation, #desktop, #domain-mapping, #editor, #forked-flow, #ios, #macos, #mobile, #phablet, #session-notes, #vscroll, #workflow

Session notes: drag-and-drop image flow, trackers, editor, masterbar – Macnchrome, iPhone 7+

Lack of alt editing in drag-and-drop upload flow

Without an image modal, drag-and-drop image upload flow requires diving into the media library to add alt text to an image. #accessibility

Calypso editor Ghostery report

Lots of trackers. We load 12 – 15. Six months ago, there were only 4.

Clipped editor action bar, iOS Calypso

Masterbar buttons, iOS Calypso

#ad-blockers, #ads, #chrome, #desktop, #editor, #ghostery, #ios, #macos, #masterbar, #mobile, #phablet, #session-notes

Session notes: RSS widget, reader, gallery layout, inline link toolbar, pasting links – Macnchrome, Calypso iOS, iOS app

RSS Widget author feed

Feed broken. Thought maybe because I used /author/ryan/ without feed/ at the end. Changed to /feed, still broken. Removed and readdded, still broken.

https://test.wordpress.com/author/ryan/feed/

Reader invoked when scrolling techcrunch up

When scrolling tech crunch, the reader often invokes. This happened multiple times during my session. It also happened once with the account screen. Seems to follow thumb location. I usually scroll with my thumb aligned beneath reader.

Also, lots of #scroll-bleed.

Gallery Layout

Clicking layout while images are still uploading results in the dropdown auto closing.

Inline link toolbar

The inline link toolbar is a boon to flow, except when I’m rearranging lists. It blocks visibility of list items, adding frustration to sorting.

Cutting and pasting links

Links lose their href after cutting and pasting. I experience this often when sorting lists. #frustrated

About to cut:

Pasted:

The href disappears.

Deleting drafts while editing, Calypso iOS

When deleting a draft from the editor, the restore/don’t restore dialog flashes briefly before redirecting on to the posts list. Confusing and awkward.

iOS app

The keyboard disappeared during an ios app edit session. Going into three dots and back resurrected it.

Floating pencils in customizer

So confusing.

Funky store dropdown labels, Calypso iOS

The labels are all lowercase and don’t match the headings.

An upsell in the posts list leads to those store screens.

#desktop, #editor, #galleries, #inline-link-toolbar, #inline-toolbar, #ios, #links, #macos, #mobile, #phablet, #reader, #rss, #session-notes