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