Toolbar: visual survey of toolbar experiments, Macnchrome, iPhone 6+

Surveying the Toolbar Experiments plugin for #32678.

Macnchrome, single site, admin user:

iPhone 6+, single site, admin user:

#32678, #chrome, #desktop, #feature-plugin, #feature-plugin-toolbar-experiments, #ios, #macos, #phablet, #toolbar, #visual-survey

Toolbar flow: Delete a post, Create and chain edit a post, iPhone 6+

Here are a couple of toolbar flow vizrecs I had laying around. These were done with 4.3 alpha, before the Customize icon landed in the toolbar.

Delete a post. Exercises Edit and Home in the toolbar.

Create a post and then chain edit it. Exercises + and Edit in the toolbar. Uses View Post in the publish/save notices to link from back to front, rather than the toolbar.

#32947, #4-3, #beta, #editor, #ios, #phone, #toolbar, #web

Toolbar Visual Survey, 4.3-alpha-33003, iPhone 5

For #32678. 4.3-alpha-33003. Single site install. Logged in as an Administrator.

#32678, #4-3, #beta, #ios, #phone, #toolbar, #visual-survey, #web

Toolbar survey with 32678.5.diff, iPhone 6+

Compare with the production toolbar on an iPhone 6+.

For #32678. 4.3-alpha-33003 with 32678.5.diff applied. Single site install. Logged in as an Administrator.

Notes:

  • The top-level icons are smaller here than in production. I prefer the larger production icons. There is also some misalignment.
  • In the admin, the W menu retains active highlight when the admin menu is expanded even when other toolbar menus are open and active.
  • With the W menu open on the front page, tap the Customize icon. Once in the customizer, navigate back using browser back history. Both the W menu and Customizer have active highlight. Dismissing the Customizer with X instead of back history doesn’t trigger this, of course. Edge case.

#32678, #4-3, #beta, #ios, #phablet, #toolbar, #visual-survey, #web

Toolbar visual survey, 4.3-alpha-33003, Mac and Chrome

For #32678. Single site install. Logged in as an Administrator.

#32678, #4-3, #beta, #chrome, #desktop, #macos, #needs-captions, #toolbar, #visual-survey

Toolbar survey, iPhone 6+

For #32678.

Single site 4.3-alpha-32976 as an Administrator.

Multisite 4.3-alpha-32976 as an Administrator, no Super Admin.

Needed: shots with comment notification and updates in the toolbar.

#32678, #4-3, #beta, #ios, #phablet, #toolbar, #visual-survey, #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

Toolbar menus on touch devices, Nexus 5, 4.1-alpha-20140930

The toolbar has a couple of annoying UX problems on touch devices.

First, submenus tend to become detached when scrolling.

Screenshot_2014-09-29-12-54-24

Detached Visit Site submenu

Second, toolbar menus are difficult to dismiss. In the screenshot below, I want to be able to tap the dash icon again to close the menu. Instead it takes me to the dash. Tapping outside the menu works to dismiss, but there’s no safe place to tap. If I tap anywhere near the image I go to the image url. This is frustrating and discourages UI exploration. I can’t tap around without being directed to another screen.

Screenshot_2014-09-29-12-54-39

Big menus make the problem worse.

Screenshot_2014-09-30-13-50-29

To dismiss that menu without inadvertently following a link, you must tap + and then tap below that menu while avoiding images and links in the content below.

#android, #phone, #toolbar, #web

The Guises of B’ar, Nexus 5, 4.0-alpha-20140706

#android, #phone, #toolbar, #visual-survey, #web