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

Surveying the Toolbar Experiments pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
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 customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., 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.

MultisiteMultisite Multisite is a WordPress feature which allows users to create a network of sites on a single WordPress installation. Available since WordPress version 3.0, Multisite is a continuation of WPMU or WordPress Multiuser project. WordPress MultiUser project was discontinued and its features were included into WordPress core.https://codex.wordpress.org/Create_A_Network. 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 UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. 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

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

The toolbar has a couple of annoying UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. 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 UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. 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