Editor, Links: Link to an existing post via the links modal

In the editor, link existing text to an existing post.

#chrome, #desktop, #editor, #links, #macos, #modal

Changing site icon, 4.3-beta1-33054, iPhone 6+

Cropping is broken. For #16434.

Macnchrome too.

Screen Shot 2015-07-02 at 6.05.13 PM

#16434, #4-3, #beta, #chrome, #ios, #macos, #media, #modal, #options, #phablet, #settings, #site-icons, #web

Image size in the Image Details modal, Mac and Chrome

I don’t know why I see an image Size selector on some sites but not others.

#chrome, #desktop, #macos, #media, #modal, #web

The Top 5 Impediments to Flow on Touch Devices

Behold, a listicle.

1. The Media Modal

mobile-media-modal

The media modal has a number of issues on touch devices, particularly phones, including the use of tabs and sidebars. For details see The Media Modal and Sidebars on Phones.

#30154 – Improve Media Modal UI at small-screen sizes

2. The Editor

Update: #31247, Scrolling and zooming is frustrating on iOS, was fixed on July 1st of 2015.

Scroll up to add media. Scroll down to preview, save, publish. Up and down. Up and down. Press This addressed this with its redesign in 4.2. Lessons learned there could be applied to post-new.php.

The Location of Add Media on Phones

#29989 – Hide Media Buttons on small screens

Fixed: The editor has a very annoying scrolling problem on iOS. Fixing that would go a long way toward improving usability on iOS devices.

#31247 -Scrolling and zooming is frustrating on iOS

image40-576x1024

Update: This was fixed on July 3rd of 2015.

I like the toolbar on phones better than on desktop, except for the lingering desktop bias that defies touch expectations when tapping menu icons. In the image above, tapping the dashboard icon traverses a link to the dashboard instead of dismissing the menu.

#29906 – Submenus can’t be dismissed on mobile.

Submenus are awkward on touch devices. The expectation on touch is that tapping a menu item takes you to the tapped thing and closes the menu. With WP, tapping in the admin menu subtly opens a submenu. The menu remains open. I often don’t notice the submenu open because I’ve already shifted my gaze to look at the right side of the screen. Losing submenus would benefit touch navigation. Further, losing them on desktop (like wordpress.com does) reduces the overwhelming feeling new user experience when first confronting wp-admin. This is something I’d like to experiment with in a feature plugin.

Site Switching on the Make Network

5. Column truncation

IMG_2919

 

Update: This was fixed on July 9th of 2015.

Our current strategy for dealing with list tables on narrow screens is to just chop off columns. Not good.

#32395 – Truncation is not a good strategy for responsive list tables

#29991 – Comment action links are quite cramped on small screens

#29995 – Username is cut off on the user list table on small screens

#editor, #media, #modal, #toolbar, #touch, #web

The media modal and sidebars on phones

Neither the iOS app nor the Android app support proper galleries, yet. They support uploading and publishing multiple individual files but not creating galleries. Our media modal is the only outlet for gallery creation on phones. Our image flow effort is redesigning the media modal. Meanwhile, I experience the following sight every day, over and over. I present it to promote continuous empathy and remind ourselves what we’re working to resolve.

mobile-media-modal

That sidebar is lingering desktop bias.

#desktop-bias, #ios, #media, #modal, #phablet, #web

Publish a captioned gallery, iPhone 6+, Portrait

WP 4.2-RC3-32249 and iOS 8.3.

Bulleted flow:

  • Start on logged in front page.
  • Tap + in the toolbar.
  • Tap Post.
  • Tap title input.
  • Type title in fly up keyboard.
  • Tap Done to dismiss the keyboard. Page updates with permalink info. [7]
  • Tap Add Media
  • Opens in Media lib [2]. The dismiss button is missing [1]. Tap Upload Files.
  • The dismiss button is back. Tap Select Files.
  • Tap Irie Plank Image Feed.
  • Tap images to select.
  • Tap Done.
  • After a pause where nothing seems to be happening, upload progress is shown. The resulting screen is a known mess [4].
  • Tap Insert Media to show the flow selector dropdown. [8]
  • Tap Create Gallery.
  • Tap Create a new gallery.
  • Tap a caption field.
  • Type in caption text.
  • Tap another caption field.
  • Type in caption text.
  • Repeat for each image. Curse at bad scrolling, keyboard juggling, and focus panning that burn a lot of taps. [3]
  • Tap Insert Gallery.
  • Arrive back at the editor with the keyboard up and obscuring the content. At a glance, I can’t confirm the gallery was added correctly. Tap Done to dismiss the keyboard.
  • The inserted gallery is now evident. A big cursor blinks along the left side of the gallery.
  • Scroll down to spot check the captions.
  • Scroll down some more to find Preview [5].
  • Tap Preview.
  • A new browser window opens to the post page.
  • Post looks good. Tap the browser page switcher thingy in the bottom right.
  • Find the edit post page from the list of pages. This can be daunting if you have a lot of things open, particularly with multiple WP pages [6].
  • Tap the edit post page once you find it. Don’t dismiss the preview window.
  • You’re back in the edit window. Make some edits. Tap Preview. Nothing happens. Apparently nothing anyway. If you left the preview window open it is being reloaded out of site whenever you click Preview [6]. Sometimes clicking Preview in this state causes a cursor glitch in the region of the publish box disclosure triangle.
  • If the keyboard is in your way after all of that, tap Done to dismiss.
  • Here goes. Tap Publish.
  • Misaligned loading indicator spins. Editor reloads with a post published notification at the top.
  • Tap View post in the notification.
  • Post looks good. Tap the site title to get back to the front page.

Notes:

[1] The dismiss button is often missing from the media modal. This seems to be particular to the Media Library view. Dismiss never disappears if you stay on Upload Files. Bringing the modal up more than once may be needed to trigger this. Moving from the Media Library view to the Upload Files view restores the dismiss button, but tapping the dismiss button does nothing but hide the dismiss button again.

[2] Media modal scrolling in media lib view often gets stuck. The page beneath the modal seems to be hijacking swipes. I’ve developed the habit of giving a 15 second-ish cooldown when swiping gets stuck. The next swipe after the cooldown typical goes to the modal and normal scrolling is restored for awhile.

[3] Scrolling while editing captions is very awkward. The cursor often detaches from the caption field and seemingly joins the editor lying beneath the modal. The cursor isn’t always in the caption field. Especially with the last row of images, the cursor often shows below the caption field. Typing places the text in correctly in the caption field but the cursor is outside the field. The jittery focus pan that happens when a caption is tapped into is disconcerting. Overall, captioning is irksome and difficult.

[4] The image flow effort will eventually remove that awkward sidebar from mobile. Should we pursue an interim solution that removes the sidebar from the production media modal since image flow is a couple release out?

[5] I often tap View Post just below the title when I want to preview. View Post shows the last published changes, however, not your in editor revisions. Preview is the button I really want but it is farther from the editor than View Post and often gets forgotten.

[6] Mobile should never open things in new browser windows. This is a desktop bias that falls apart on mobile. Modal preview would be better on mobile.

[7] My permalink has the slug flow-loop-2 instead of flow-loop because I trashed an earlier draft due to interface frustrations. My frustrated bail out is later met with slug consequences. Ugh.

[8] The flow selector dropdown doesn’t dismiss with outside taps.

#captioned-galleries, #captions, #forked-flow, #galleries, #ios, #media, #mobile, #modal, #new-tab-window, #phablet, #post-flow, #preview, #publish, #vizrec, #web

Modal Scrolling on iOS

All of our modals have problems with scrolling on iOS. The page behind the modal scrolls when you swipe. Bleed through of the page beneath and sometimes stacked scrolling make for a frustrating experience. A few months ago, we made a big improvement to modal scrolling with the fix for #29909.

Ticket 29909: Scrolling beneath modals bad experience on mobile

Changeset 30707: Prevent scrolling beneath modals on mobile devices by removing overflow from #wpwrap when a modal is open.

That was the end of the scroll issues on Android. iOS has not been so straightforward.  Recently, scrolling issues with the theme details modal were fixed by setting webkitoverflowscrolling to touch.

Ticket 31381: The theme details modal has scrolling and toolbar problems on iPhone 6 and 6+

The attachment details modal, link modal, session expired log in modal, and plugin details modal still have scrolling issues on iOS. Here’s a visual survey of these modals on an iPhone 6+.

Screencast of the Link Modal on an iPhone 5 running iOS 8.2. The effect is even more disconcerting on the larger screen of an iPhone 6+ because more of the page behind the modal is exposed.

#ios, #modal, #scroll-bleed, #web

Theme Details Modal Survey

A visual survey of the theme details modal on multiple devices while testing #31381.

#modal, #themes, #visual-survey

Damaged Image Details modal, Macnchrome, 4.2-alpha-31392

Noticed this today.

#chrome, #desktop, #macos, #media, #modal, #web

Eliminating the sidebar in the media modal

Killing the sidebar in the mobile media modal seems the key to opening up a good design. Start there and ask questions about selection, particularly multi-select, and access to image detail views that feature full-width, easy-to-discern images.  Selection and image views are the two most important things. They need to be readily accessible, and they must flow. Do we use a selection toggle like the media library’s grid view does? Are image views accessible during multi-select? The media library’s grid view does not make image views accessible during bulk selection, but interfaces like G+ make them accessible with a tap. Should the default action be selection or image detail view? Does this change in different flows? The primary multi-select flow is uploading images from the camera roll, which will likely use the selection mechanism provided by the Android and iOS file choosers. How does this affect our multi-select approach within the media modal?Gallery/camera roll interfaces are not the same as a modal inserting images and galleries into a post. How much can we borrow from these interfaces? Mobile, multi-select, access to big images. These must be solved in a flowful way.

The media library grid view avoids a sidebar via an attachment details modal.

Grid view handles multi-select via a toggle button.

During multi-select, image detail views are unavailable. The G+ app on Kitkat handles this with an overlay on the image thumbnails.

A mockup of the media modal with sidebar eliminated.

 

#desktop-bias, #media, #modal