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: 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: iOS Beta Testing, featured images, iOS app, macOS app, editor AYS, white screens, reader lists, programmable web, compassion is not coddling, little big details

Hockey app on boarding – iOS

Apparently, TestFlight is for public betas and Hockeyapp is for private betas. I thought TestFlight replaced Hockeyapp entirely.

So, I’m trying to set up Hockeyapp on a new phone. I already have a log in. I logged in, installed the WP app, and get this when I launch it.

Digging around the internet, I see that I need to register my new phone with Hockeyapp. That must be done on desktop. There, I created a private link that I then opened on my iPhone.

Opening the link put a Hockeyapp link on my home screen. I launched the WP app again to the same failure. I deleted the app and reinstalled from Hockeyapp. Still the same failure on launch.

Turns out, since iOS 9, you must wander over to Settings > General > Profiles & Device Management to trust the developer.

Hockeyapp makes for gnarly beta testing flow. Our TestFlight build has since updated, which is a much better flow.

p2 content doesn’t load – Macnchrome

Happened again

Perhaps more likely to happen from an href.li link.

Loading posts – iOS app

After installing the beta via hockeyapp, the posts list took about 15 seconds to load.

But the images didn’t load in.

Images showed after leaving and reentering the posts list.

Reflow and jumping after pasting a youtube link – Macnchrome

Pasting a youtube link results in a lot of reflow and vscroll jumping.

AYS immediately after publishing – Macnchrome

Update a post. Hit the editor’s back button. You are likely to get an AYS.

Post updated, hit the editor back button.

AYS even though I just saved.

Gif insertion – iOS app

ReBoard and Giphy Keys gifs don’t animate in the editor or posts list.

Featured image removal – Macnchrome

Featured images, both still and animated, remain in the posts list after removal.

Here’s a post.

Note that there is no featured image set. It was just removed.

The removed featured image is still present in the posts list.

Featured image upload – Macnchrome

Featured images take awhile to upload, sometimes stalling for several seconds. If you navigate away while the image is still uploading, there’s a chance of failure.

Site search zooms page – iOS web

Tap into site search.

View zooms.

CNAME records – Macnchrome

How do I get rid of this? This is a Pressable site connected via Jetpack.

Deleting the only post – Mac app, External Site

When you delete a post from the editor, a Don’t Restore/Restore dialog flashes on screen momentarily. When deleting the only post on a new external site from the mac app, the Restore dialog flashes briefly, the editor reloads, and then the restore dialog displays again and doesn’t go away.

After deleting this post, I expected to return to the posts list. Clicking Don’t Restore takes me there.

Autosave, restore, save changes AYS, and delete from editor flow are pretty rough across all interfaces, devices. Hard to trust.

Missing site titles when editing a reader list – Macnchrome

When editing a list in the reader, all subscribed sites are listed below the list being editing. Some of these sites have no titles. List the url in such a case?

Without preview and search, this site list isn’t very helpful when editing a reader list.

Blank tooltip after adding more button – Macnchrome

Seeing this empty bubble appear confused me. I assumed it was broken and almost stopped exploring.

Oh, it gets filled once you start selecting buttons.

hrules in Sharing Settings – wp-admin, Jetpack, Publicize

The two lines above Share This: seem extraneous and busy, especially with a thick full-width line at the start of the section and a thin full-width line at the end.

The thick line in between Enabled Services and Live Preview separates the two even though changes in Enabled Services are reflected in Live Preview. The hierarchy of this page is a confusing. Live Preview is affected by both Enabled Services above it and the settings below it, with hrules of differing width separating them. Available Services drags across an hrule into Enabled Services which can drag into a hide box.

Mac app whitescreen – macOS app

This session was idling on a Jetpack connected Pressable site. Upon returning to it after working on other stuff, it presented a white screen. The menubar remains responsive.

Restarting the app cleared the white screen for a few moments but then it white screened again. The interface paints and then crashes in ~5 seconds. During that time the interface is non-interactive. It’s busy preparing to white screen.

Here’s what shows before white screening.

Cut-and-paste blockquotes

When you cut-and-paste a block quote, an empty block quote is left behind.

Ulysses

Everything I publish starts in Ulysses. The flow is clean.

Compassion is not coddling

I recommend the book Design for Real Life all the time. It is part of the soul of flow patrol. Stress Cases and “Compassion is not coddling” are favorite parts of D4RL. Some compassionate design links:

https://refind.com/rboren/?q=%23compassion&sort=latest

D4RL and the pathways principle from The End of Average will make you reconsider what you call an edge case.

Design for Real Life is informed by neurodiversity, the social model of disability, and structural ideology.

https://ryan.boren.me/2016/08/09/education-neurodiversity-the-social-model-of-disability-and-real-life/#design-for-real-life

Programmable Web

The REST API was approved for merge into WordPress 4.7. Cheers to the programmable web. I look forward to more workflow automation. Tools are arriving that make consuming web APIs much easier.

New Workflow Update with Web API Feature – Mobile Only Tools – Because Productivity matters, everywhere.

Workflow Update Brings Ability to Interact with Any Web API – MacStories

Why is this important? Tools wanting to become part of our cognitive net & working lives need workflow automation, public apis, feeds, & export. Adaptable, cooperative flow is more accessible & inclusive.

Scripting allows users to contribute very small snippets of code that use the virtual reality engine as a host; users contribute code without having to invent a world from scratch and without having to become familiar with outrageously large codebases to do so. Adding scripting interfaces is very much like what Rockstar’s designers did to allow user-generated models and skins. As a rule, scripting is meant to minimize the investment in the programming skills in general and knowledge of particular bodies of code in particular necessary to create change. Scripting interfaces allow users a safe place to play with the medium of virtual reality worlds, but at the same time creates the possibility of their accomplishing real work and powerful transformations of the system.

Garrelts, Nate (2006-10-05). The Meaning and Culture of Grand Theft Auto: Critical Essays (Kindle Locations 4192-4193). McFarland & Company. Kindle Edition.

Little Big Details

Little fixes and improvements like site selector keyboard nav are landing. These little big details help me cope, flow, and be productive. They have impact on my daily life.

#app, #ays, #beta-testing-flow, #compassion, #design-for-real-life, #desktop, #editor, #ios, #macos, #phablet, #programmable-web, #reader, #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

Mac App Testing

Before I went on sabbatical four months ago, I fell out of the habit of testing the macOS app. Reasons:

  • It lagged behind Calypso web.
  • Certain bugs, such as preview out of sync w/ content, were flow killers.
  • Workflow automation. Alfred workflows that work with the app would be keen. The app does not advertise an applescript dictionary, and, AFAICT, none of our apps support url schemes. For something to be part of my desktop flow, it needs enough workflow automation to be scriptable from Alfred.

The addition of desktop notifications to Calypso web removed one of the big reasons for using the Mac app, although I found Chrome desktop notifications to be very intrusive and turned them off.

With sabbatical over, I’ll try to make the Mac app a habit again and see how it goes.

#app, #macos, #notifications, #workflow-automation