Starting on the front page, I visit my profile, change my password, and return to the front page.
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.
For #32678. 4.3-alpha-33003. Single site install. Logged in as an Administrator.
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.
- 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.
For #32678. Single site install. Logged in as an Administrator.
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.
Behold, a listicle.
1. The 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.
#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
3. Menu dismissal in the toolbar
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.
4. Submenus in the toolbar and admin menu
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.
5. Column truncation
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
The toolbar has a couple of annoying UX problems on touch devices.
First, submenus tend to become detached when scrolling.
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.
Big menus make the problem worse.
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.