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 iOSiOS The operating system used on iPhones and iPads., 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 biasDesktop bias Patterns and interfaces that work in desktop interfaces don't always work on mobile. UI elements triggered by mouse hover, opening in new windows, dragging into bookmarks bars, drag-and-drop, and auto-focusing search input fields are examples of desktop bias.https://make.wordpress.org/test/tag/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.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://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 pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins..

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