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: cursor control, moving block quotes, editor flow, flow forking, scroll bleed, modal consistency, unreadable web

Cursor control – iOS

Cursor control and text selection compromise the editing experience on iOS. I really enjoy the cursor buttons in Ulysses and Reboard’s cursor controlling spacebar. Now that I have a 3D touch iPhone, I’m trying the cursor control built into the default iOS keyboard.

Blockquoting a list – Macnchrome

When highlighting a list to blockquote, I expect the list to be inside the block quote.

Issues like this drive me into the HTML editor. Since the Visual|HTML tabs don’t show on screen when scrolled down, this means scrolling up, switching tabs, scrolling down while scanning raw markup to find my place, making edits, scrolling up, switching back to Visual, and scrolling down while scanning. #tedious #frustrated

Working in the editor

Losing hrefs during cut and paste, Undo (Cmd+Z) losing vscroll and cursor position, and editing link text are frustrating productivity killers that prevent achieving flow state. Example:

  • Cut and paste link
  • Link loses href
  • Cmd+z to undo
  • Undo causes reflow and loses vscroll and cursor position
  • Scroll up
  • Switch to HTML editor to do the cut and paste.
  • Scroll down while scanning markup
  • Cut and paste
  • Try not to munge tags while moving link
  • Switch back to visual
  • Scroll down while scanning

During all of this, spoons are burning. I sometimes measure flow in spoons.

The Spoon Theory written by Christine Miserandino

View Post Flow Forking and Post-post Trampolines

I have two editor sessions with conflicting changes again. View Post flow forking causes this. #forked-flow

I have sessions where I edit the same post in multiple tabs, haplessly stomping changes back and forth. There’s no indication that the content changed beneath me.

Which brings me back to post-post trampolines. Some things post-post needs to consider:

  • flow forking – View Post and #new-tab-window are flow forkers
  • publicize anxiety – Cleaning up an oops after publicize-ing is hard
  • destination anxiety – Which site did I post to? Work or personal? Oops.
  • update -> view -> edit -> update -> view -> edit flow
  • Editor “discard/restore changes” AYS flow

The iOS app could use some post post attention too, like putting the name of the target site in the confirmation to head off mis-publicize anxiety flow. Also, differentiate between published and updated. Communicate state.

On #forked-flow. View Post is a flow forker. View Post in the publish/update notification opens in #new-tab-window. That new tab has an Edit button at the bottom. Since update -> view -> edit -> update -> view -> edit is my habitual flow, I thoughtlessly fork my sessions by clicking edit in the actionbar in the tab opened by View Post. I end up with a proliferation of editor and view post tabs and conflicting changes in each editor. And then the hapless stomping starts.

For me, a better behavior for View Post would be to open in a modal like we do from the site name/icon at the top of the menubar. Have the edit icon in the actionbar dismiss the modal in case I go that route instead of closing the modal via clicking X to dismiss.

BTW, site name/icon doesn’t open in a modal in the editor. It opens in #new-tab-window, creating a vector for #forked-flow. This inconsistency between the editor and the menu often trips me.

A selection of comments on iOS app post-post flow:

  • “Post posting should be super slick and animated”
  • “Post list is a weird place to land, there are lots of next actions after posting that would be interesting. It’s a moment to celebrate!”
  • “My post list almost always shows a dupe for a while”
  • “as a separate issue, every time I go to post it defaults to a blog which is not the last one I posted to. should always default to whatever the last posted to was”

Related:

No load

Saw this again.

Flow Wants

  • post post trampoline
  • bulletproof, trustable editor discard/restore changes AYS flow
  • delightful revisions flow
  • respect for vscroll and cursor location, everywhere
  • no more #scroll-bleed, #cursor-bleed, #tap-bleed
  • smooth undo
  • keyboard flow
  • trustable media uploads
  • full-width image views in media pickers & captioning flows, respect presbyopia
  • avoidance of scroll, scan, correlate flows
  • avoidance of #forked-flow, #new-tab-window

Plans loses back nav header

Changing the section in the dropdown loses the back nav header.

Accessed from jet pack mail.

Site preview modal consistency

Clicking the site title/icon at the top of the menu opens a modal.

Except in the editor. There, clicking opens in #new-tab-window allowing for #forked-flow.

A new tab is a new session.

Scroll bleed – iPhone 7+

You can see the underlying page bleed through at the bottom. #scroll-bleed is a pervasive, long-lived problem across Calypso on iOS.

How the Web Became Unreadable

There’s a widespread movement in design circles to reduce the contrast between text and background, making type harder to read. Apple is guilty. Google is, too. So is Twitter.

The typography choices of companies like Apple and Google set the default design of the web. And these two drivers of design are already dancing on the boundaries of legibility.

Source: How the Web Became Unreadable

I’m feeling this one. Some themes lack contrast, and there’s not a way to bump font color/contrast in the customizer. I switched themes on some of my sites to improve contrast in response to readers in the neurodiversity and disability communities.

Design trends that make me feel old. Presbyopia is a drag.

#accessibility, #contrast, #cursor-control, #editor, #post-flow, #post-post, #presbyopia, #undo-reflow, #vscroll-loss

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

Full-width media views during selection

Media flows that don’t provide full-width views during selection are inaccessible to me. They are frustrating and make me feel old.  I spend too much time hovering my face over screens as I scrutinize thumbnails with my presbyopic eyes. Most media pickers lack full-width views during selection. Telegram’s picker is an exception.

telegram-media

Telegram in image details view

Telegram shows the full width of the image across the full width of the screen without cropping. Tapping the image selects/deselects.

Few apps have image selection flow that is accessible to me. Google Photos provides one of the better media experiences around, in app form and on the mobile web. But, it, like so many interfaces, limits me to thumbnails during selection.

google-photos-media

Google Photos app showing image selection

Google Photos on desktop, however, provides a magnifying glass overlay on hover that opens a full-width image with a selection toggle and arrows for moving through the images in full-width view. This I like.

And here’s the selection websites get in iOS Safari. I find it so difficult to select images with this that I jump to the camera roll to access more comfortable views and then jump back to the picker on the web page. I then must correlate between the camera roll and media picker lists, which usually sort in opposite directions.

ios-safari-picker

iOS media picker showing image selection

Likewise with the media picker in the WP iOS app.

wp media picker

WordPress iOS app showing image selection

I’ve been going on about full-width images during selection for awhile. The new Calypso media modal accommodates me somewhat.

calypso-media

Calypso’s image details modal

That provides an image large enough for me to make selection and captioning decisions, but it is unavailable in gallery flow and doesn’t correlate between details view and grid view well, meaning list scanning and back-and-forth correlation are necessary. Correlating  between lists and grids is a frustrating drain, especially when deciding on which of several similar looking photos to use. All of my list correlation back and forth is anxiety flow working around inaccessibly small (and often cropped) images in media pickers. Telegram on iOS and Google Photos on the desktop don’t have these correlation problems because full-width images are available and selection is indicated and alterable in the full-width view. This saves me time, frustration, and physical pain. The lack of comfortably viewable images during media selection ruins publishing and sharing interfaces for me.

#a11y, #accessibility, #chrome, #desktop, #full-width, #images, #ios, #macos, #media, #media-flow, #media-modal, #phablet, #scroll-scan-correlate