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

Session notes: scroll bleed, iOS web, alt text flow, captioned gallery flow, unpermalinks, editor AYS

Scroll bleed when Notifications loads more – Macnchrome

When Notifications loads the next batch infinite scroll results, scrolling passes through to the page beneath. Once the new batch of notifications load in, scrolling returns to Notifications. This makes for awkward scrolling that stomps the vscroll context of the underlying page.

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

Screen Shot 2016-10-25 at 2.15.16 PM.pngiOS Scroll bleed

With Calypso on iOS, if you don’t see the problem at first, keep going. Tap around. As state piles up, weird things start happening. #tap-bleed, #scroll-bleed, and #cursor-bleed become more frequent, as do things like bar detachment.

Even with fresh state, the filter header jitters while scrolling notifications. This jitter has existed on iOS for the life of Calypso.

#scroll-bleed is pervasive in Calypso and is featured in Notifications.

https://test.wordpress.com/tag/scroll-bleed/

https://test.wordpress.com/tag/cursor-bleed/

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

Alt text flow

The lack of a modal means those who drag-and-drop images directly into the editor can’t add alt text to dropped images without rummaging in the insert image modal (accessed via a + plus button).

Further, without access to the image details modal from the editor’s inline image toolbar, adding alt to images on old posts requires scrolling through the image modal looking for the right image amidst months of thumbnails. Unlike in core WP, there is no “Images uploaded to this post” filter. This is supremely frustrating flow if you trying to be good about alt text.

https://test.wordpress.com/2016/09/30/session-notes-drag-and-drop-image-flow-trackers-editor-masterbar-macnchrome-iphone-7/

https://github.com/Automattic/wp-calypso/issues/307#issuecomment-256178884

Captioned gallery flow

With a recent fix to gallery previews, this post stands at 3/4 fixed.

Permalink changed date

I noticed that this old tweet of mine links to https://hypubnemata.me/2016/10/03/growth-mindset-and-structural-ideology/

That 404s. The link is now https://hypubnemata.me/2016/10/05/growth-mindset-and-structural-ideology/. The day changed from 03 to 05. I don’t know how I managed this.

Untrustable editor restore prompt

I haven’t visited this post in 3 years. I open it and get a restore unsaved changes prompt. What am I restoring? I just want to peek the post right now, not edit it, so I click “Don’t restore”. I’ll postpone dealing with it until next time I venture to this post. After reading, I click the editor’s back button to return to my posts search and receive an unsaved changes AYS (Are You Sure). That’s an interruption on the way in and one on the way out. Unless I restore unseen changes I will be twice interrupted on every visit. So far, this happens with every post in this search https://wordpress.com/posts/my?s=knolling.

I often search my posts wanting to peek in a post, maybe lift some text, and leave. I see restore prompts often in this flow.

AYS Styles

Close the tab/window.

Browser back button

Layouts look like loading placeholders

For a moment, I thought resources were still loading.

You followed Site Title – iOS app

After creating a new site, I receive notifications with “Site Title”.

Searching themes – iOS web

Have to type right on the icon to search. I often accidentally trigger the dropdown when I want to search.

Search is not autofocused, requiring another tap.

I can have both filter and search open.

When I start typing, scroll jumps.

Scroll bleed

Scroll bleed usually disappears once you lift your finger. This scroll bleed persisted.

Account login overlays notifications

Tap me and then notifications.

#accessibility, #ays, #captioned-gallery-flow, #captions, #chrome, #desktop, #editor, #galleries, #ios, #macos, #permalink, #phablet, #session-notes

Session notes: Editor, customizer, undo, AYS, vscroll – Macnchrome, iPhone 7+

Author drop down – iOS Safari

Dismissing the author drop requires tapping the disclosure triangle. Tapping author name opens but doesn’t dismiss. Outside taps in the header don’t dismiss.

Switch themes in customizer – Macnchrome

I miss theme switching in the dotcom customizer. The customizer is always where I head first to switch themes. Getting at live preview in the customizer when switching themes requires some clicking on dotcom. Here’s what core WP is up to.

https://make.wordpress.org/flow/2016/10/01/customizer-browse-install-preview-themes-on-mobile/

Editor – Macnchrome

  • Cmd+Z loses the cursor and scroll position and causes some reflow jiggle. This is a flow killer for me. I can’t use an editor that does this every time I try to undo, which is often, very often. I regularly forget to paste as plain text, using Cmd+V instead of Shift+Cmd+V. To clean up, I Cmd+Z so I can Shift+Cmd+V. Having to scroll back down to find my place interrupts an ingrained groove.
  • Updating a posts scrolls the editor to the top to show the notice. Losing scroll position when Updating a published post is frustrating. I like to periodically push my changes without losing my place. I like to edit a section, update to push it live, and then move on to another section. I do this often when updating living documents.
  • I often need to switch between Visual and HTML to put ids on headers and work around cursor bugs, particularly with images. Since the Visual and HTML tabs don’t stay on screen, I must scroll up, switch to HTML, find my place again amidst tag soup, make the change, scroll back up, flip to Visual, and scroll back down to where the journey started. I fall off my cognitive train in the process.
  • View Post in the published/updated notification opens in #new-tab-window, resulting in #forked-flow. I end up with multiple editing sessions because of this, confusing the hell out of me. I’m training myself with poor result to ignore View Post and always use Preview, although it is a source of anxiety over whether I’m seeing what’s actually published or a version with accidental, unsaved changes.
  • Immediately after publishing or updating, I’ll navigate away from the editing session with the editor back button or the masterbar. I often get an unsaved changes AYS despite there being no changes to save. This results in #anxiety-flow. I’m not sure if there are unsaved changes. I could Update to be sure, but what if I fat fingered something and added spurious text? If I ignore it and proceed without updating, I’ll get a prompt to restore the autosave when I come back. There can be days and months before I come back to something. Upon returning, I’ll wonder what’s up the post, and wish I could quick peek a diff between published and autosave. I’ll go through more #anxiety-flow to convince myself I’ve got the right content.

While working on the following post, I experienced these old familiars: Cmd+z in calypso editor loses vscroll and cursor placement. Moving links loses href. Moving blockquotes is awkward. Sometimes clicking in embeds loses vscroll. Editor scrolls down after adding link, losing cursor placement and vscroll.

https://hypubnemata.me/2016/10/03/dsisd-commons-2/

Three dots menu in actionbar, Macnchrome

The three dots button is a noop in this window initiated from the press this bookmarklet. This is the moment after publishing from Press This.

After clicking the follow button, the page reloaded and the actionbar changed. Now the three dots menu works.

vscroll loss switching between editors – iOS app

50% ish repro.

Start in visual.

Switch to HTML and note the vscroll jump.

vscroll loss after peeking link – iOS app

I want to be able to peek a link without losing vscroll or cursor position.

Tap into link.

Note the url and tap Cancel.

Vscroll bumped down and cursor position lost following keyboard flyup gymnastics.

reaching bottom – iOS app

Why can’t I reach the bottom of the post until I tap into the editor?

As low as I can go

Undo and discard changes AYS – iOS app

While editing a post, I accidentally removed hrefs from two links when I bumped the link icon in the keyboard button bar. Where is undo?

Leaving the editor offers to discard the changes. Is this the only route to undo? AFAICT, I have to leave the editor and discard all changes to undo.

I often get this discard ays when I enter and leave a post without making any changes. Is it not really discarding? This happens with several, but not all, posts. Don’t AYS for unsaved changes if there aren’t unsaved changes. Calypso does this too.

Ulysses has a great keyboard button bar. Undo, redo, and cursor buttons are essential to me.

 

https://test.wordpress.com/2016/09/05/session-notes-ios-app-editor-buttons-iphone-6/

Says published when updated

When I hit the Update button for an already published post, I get Published as a confirmation. This makes me question the status of the post.

Also, which posts was updated, and on what site? Give some information to ease anxiety. The pencil button is global. With multiple sites, the post just published may have nothing to do with what’s on screen after leaving the editor.

editor zooms – iOS Safari

The editor zooms when you tap into it, introducing hscroll.

Tapping the HTML tab zooms.

Slow loading Manage Sites – iOS app

This showed only four entries for about 10 seconds then filled.

scroll bleed – iOS Safari

Layout quirk after triggering AYS – Macnchrome

Start a post. Add content and then quickly hit the editor back button. This triggers AYS. Click through the AYS and this presents.

Related to https://github.com/Automattic/wp-calypso/issues/4509

Save/discard changes AYS and editor back button flow are banes of my sessions.

Latest drafts + button title

Hovering over the Latest Drafts + button shows gridicons-plus. How about “Create a new Post” as seen on the pencil icon? Or s/Post/Draft/?

Actionbar flicker

Getting the dancing action bar for the first time in awhile. As I scroll, I see two actionbars flick into being, a larger one and a smaller one that ends up beneath the larger one. Sometimes they continue their flicker dance until you scroll again. No screenshots or screencasts, sorry.

Editor Prime Directives

Thinking out loud, standard disclaimers.

  • Mind the cursor. Don’t lose vscroll or cursor position. Looking at you modals, popups, undo, redo.
  • Mind the keyboard. Watch keyboard flyup and what it does to vscroll and cursor position.
  • Respect calling context.
  • Avoid scroll, scan, correlate cycles.
  • Don’t AYS for unsaved changes if there aren’t unsaved changes.
  • Make undo easy, especially on small screens where mistakes are easy to make and hard to correct.
  • Clearly indicate when there are unpublished changes.
  • Offer a diff when offering to restore from autosave.

#app, #ays, #chrome, #customizer, #desktop, #editor, #ios, #macos, #phablet, #scroll-bleed, #scroll-loss, #session-notes, #undo, #undo-reflow, #vscroll, #web

Session notes: reader, editor, free domain claim, gallery ordering, editing links – Macnchrome, iOS

Free domain claim

How do I get rid of this notice without claiming a domain I don’t want?

Reverse gallery order

Wishing I could click to reverse order.

wp-admin accommodates.

If I didn’t have wp-admin as fallback, I’d work around this by changing the sort order in my source app (Pixave) and reuploading the gallery. Reuploading is my go to workaround for media bugs and awkward flow, impacting quota.

Appending to link text

Here’s a bug we’ve lived with in WP and Calypso for years. It still frustrates. Appending or prepending text to a link requires moving in from the boundaries and juggling characters.

Calypso editor on iOS

  • The reload time after switching to another app and back to the browser is 10 seconds-ish of jerky loading.
  • First taps are slow to process. Double taps are often required.
  • Tapping plus to add media will focus the editor, put the cursor inside, and then open the modal over the course of a couplefew seconds.
  • I tend to wait a couple seconds after tapping anything before tapping again as I might interrupt something.
  • Post preview wouldn’t load.
  • #scroll-bleed behind the preview modal.
  • Cancelling preview takes you back to the editor instead of  to actions.
  • A draft started with Calypso on iOS didn’t show in Calypso macnchrome until I edited another post. Then the draft showed. I also experience this with drafts started in Ulysses. The provokes data loss #anxiety-flow.

Media library

Clicking the pencil icon also selects the image. I expected to edit without selecting.

Links in reader

In the iOS app reader, links within post content open in a pop up that is kind to context. Calypso’s mobile web reader follows these links, requiring browser back nav that sometimes stomps #vscroll.

Video drag-and-drop insertion

A video dropped onto the editor inserted off screen, at the top of the document. I probably scrolled down without clicking into the editor to position the caret. I thought the insert didn’t work since it happened offscreen, so I inserted again after positioning the caret. I saw that I had an extra video at the top when I previewed. I’m used to Ulysses where the caret follows the cursor during drop.

Notifications Search

Wishing again that I could search notifications. 🙂

#desktop, #domain-mapping, #editor, #ios, #links, #macos, #media, #mobile, #reader, #session-notes

Scenes from an iPhone 6+ photo publishing session

These are scenes from a publishing session on Horizon with a post having two individual images and a featured image.

Featured image is zoomed and pixellated in preview

IMG_8964

Featured image is zoomed and pixellated

Panning that results in flicker and jumping. Exiting the editor and previewing again showed a slightly better view.

Funky offline styling

IMG_8969

Funky styling around Offline indicator

Stuck offline publishing

Tapping Publish while offline left me stuck here:

IMG_8969

Publish button remains inactive and Saving… persists after publishing while offline

Failed publication notice

Here’s what the editor looks like after failed publication.

IMG_8973

“Publishing of post failed.” notice shows at the bottom of the screen after the featured image

 

Detached dot overlay

The dot icon that overlays the pencil when loading/offline/syncing (under what conditions does this appear) detaches when attempting to scroll.

IMG_8977

“Dot” masterbar overlay detaches when scrolling

Below the fold confirmation

The post published confirmation runs offscreen and is obscured by the word counter.

IMG_8979

“Post published on…” confirmation shows at the bottom of the screen, beneath the featured image, with the second line running offscreen resulting in an obscured View Post button.

Inline image toolbar

Tapping an image brings up both the inline image toolbar and the cut|copy bar.

IMG_8974

Both the inline image toolbar and the inline cut|copy bar show on tap.

Sometimes, tapping an image doesn’t show the image toolbar.

IMG_8975

Only the cut|copy toolbar shows in this instance

Gallery preview and scrolling

IMG_8962

Truncated preview with stuck scrolling

Also,

Stuck gallery preview scrolling: https://github.com/Automattic/wp-calypso/issues/3389

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

Scroll bleed

Here, the underlying layer shows through at the bottom while scrolling. Classic #scroll-bleed.

IMG_8970 (1)

Feels

I had to back out of editor sessions and do page reloads to complete the post. #frustrated

The inline image toolbar has been misbehaved on iOS for the duration of its existence. The experience is a cluster of #painpoints that leave you  #confused #frustrated and #discouraged.

Stuck gallery preview scrolling and preview truncation are gallery flow killers on both desktop and mobile. https://test.wordpress.com/2016/02/24/improving-captioned-gallery-flow/

#anecdote, #editor, #gallery, #gallery-flow, #ios, #journey, #media, #media-modal, #painpoint, #phablet, #post-flow, #safari, #sesh, #session

Publishing a video on an iPhone 6+

#forked-flow, #new-tab-window, #keyboard-flyup, and #cursor-bleed mar the experience, as does the lack of video embeds and video edit flow.

wordpress.com has long lagged core WP in video feature parity due to showing a bare wpvideo shortcode in the editor. Core has video embeds and video edit flow.

 

#editor, #ios, #media, #media-modal, #modal, #phablet, #scroll-bleed, #video, #wpvideo

Editor, Preview: Previewing sites that don’t allow iframes

Testing https://github.com/Automattic/wp-calypso/pull/3291.

This site, test.wordpress.com, disallows iframes. Here’s what preview looks like in production.

 

The workaround is to hit the open in new window arrow box. This opens preview in a new tab/window. This forks flow, which is especially cumbersome on touch devices.

Screen Shot 2016-02-12 at 5.48.47 PM

Opening in a new tab forks flow

Note that preview on the iPhone 6+ is beneath the toolbar, obscuring the controls. Also, Preview exhibits scroll bleed.

IMG_7861

Here is preview with 3291.

Screen Shot 2016-02-12 at 5.58.18 PM.png

There is some funkiness here, perhaps theme specific, in the tablet preview mode. The hamburger menu pushes down content and it doesn’t close.

Screen Shot 2016-02-12 at 5.58.28 PM.png

Clicking hamburger doesn’t close the menu.

This screen also exhibits scroll bleed.

My mobile testing setup is a mess right now, so I can’t test local changes on iPhone 6+. Instead, I’ll take this opportunity to plug xip.io compat. 🙂

 

 

#chrome, #desktop, #editor, #forked-flow, #ios, #macos, #new-tab-window, #phablet, #preview, #scroll-bleed