Menus in the Admin and the Customizer: UX Flow & Performance Comparisons

For this post I’ve prepared a series of short gifs depicting the flows for various small menus tasks. Each task was completed using the admin, then 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., attempting to be as equitable as possible with interaction speed, initial mouse position, etc. to make side-by-side comparisons that realistically compare the speed with which tasks can be completed in either interface.

For the tests, I added links to both Menus UIs to the admin bar (4.3 will have one link here, to the Customizer). I ran into a few areas where the experience could be improved, but in terms of timing, the Customizer version wins in most of these scenarios currently. Note that this is intended to compare the experience for power users. I recommend opening the videos to view them larger, as the space is fairly restricted here.

Menus Admin Screen Menu Customizer

Front page -> Menus -> open the menu set to the primary location (admin).

Front page -> Menus -> open the menu set to the primary location (admin).

Front page -> Menus -> open the menu set to the primary location (Customizer).

Front page -> Menus -> open the menu set to the primary location (Customizer).

Front page -> menus -> social menu (admin).

Front page -> menus -> social menu (admin).

Front page -> menus -> social menu (Customizer).

Front page -> menus -> social menu (Customizer).

Front page -> menus -> "everything" menu with 350 items (admin).

Front page -> menus -> “everything” menu with 350 items (admin).

Front page -> menus -> "everything" menu with 350 items (Customizer)

Front page -> menus -> “everything” menu with 350 items (Customizer)

Front -> create new menu, add home link, set to primary location (admin).

Front -> create new menu, add home link, set to primary location (admin).

Front -> create new menu, add home link, set to primary location (Customizer).

Front -> create new menu, add home link, set to primary location (Customizer).

Front page -> add five latest posts to menu (admin.

Front page -> add five latest posts to menu (admin.

Front page -> add five latest posts to menu (Customizer).

Front page -> add five latest posts to menu (Customizer).

Front page -> add the "Audio" tag and the five audio-related posts as children (admin).

Front page -> add the “Audio” tag and the five audio-related posts as children (admin).

Front page -> add the "Audio" tag and the five audio-related posts as children (admin).

Front page -> add the “Audio” tag and the five audio-related posts as children (Customize).

Front page -> delete the six items that were just added (admin).

Front page -> delete the six items that were just added (admin).

Front page -> delete the 6 items that were just added (Customizer).

Front page -> delete the 6 items that were just added (Customizer).

Switch from viewing one menu to the social menu (admin).

Switch from viewing one menu to the social menu (admin).

Switch from editing one menu to the social menu (Customizer).

Switch from editing one menu to the social menu (Customizer).

Add sub-menu hierarchy to the everything menu with 350 items (admin).

Add sub-menu hierarchy to the everything menu with 350 items (admin).

Add sub-menu hierarchy to the everything menu with 350 items (Customizer).

Add sub-menu hierarchy to the everything menu with 350 items (Customizer).

Fully nest the social menu - 10 levels deep (admin).

Fully nest the social menu – 10 levels deep (admin).

Fully nest the social menu - 10 levels deep (Customizer).

Fully nest the social menu – 10 levels deep (Customizer).

Open an item's original link (admin).

Open an item’s original link (admin).

Open an item's original link (Customizer).

Open an item’s original link (Customizer).

Make every link in the social menu open in a new tab (admin).

Make every link in the social menu open in a new tab (admin).

Make ever link in the social menu open in a new tab (Customizer).

Make every link in the social menu open in a new tab (Customizer).

#customize, #customizer, #flow-comparison, #menu-customizer, #menus, #parity, #parity-check, #visual-compariosn

Menus (admin) with Windows Phone on 4.2

  • WordPress 4.2.2
  • Old menus admin screen (to be compared with Menu 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.)
  • Windows Phone 8.1, IE11 Mobile (only browser allowed on this device)
  • Testing on an actual site whose menu I actually needed to make a couple edits to… because why not 🙂

#4-2, #customize, #customizer, #flow-comparison, #menus, #mobile, #phone, #visual-comparison, #winphone

Press This, copy and add bookmarklet, Macnchrome, 4.2-alpha-31432

Old:

New:

Since I have cloudup set to copy links to the clipboard after every screenshot, my bookmarklet selection would get stomped as I went about business in the bookmark manager. Flipping back to the press this tools screen and doing Cmd+c put the bookmarklet back into the clipboard without having to click anything. Once back in the bookmark manager, however, the Add Page operation cancels out and any thing you have input so far, such as the bookmark name, are lost. The add bookmark 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
for new Press This is better than the old flow thanks to not having to right click to expose the bookmarklet text area, but cut-and-paste is not very friendly in either case. New Press This requires an extra click to highlight the textarea after it is exposed. Old press this shows and highlights the textarea with one right click. New press this requires left clicking the Copy Press This Bookmarklet button and then clicking into the textarea. New Press This is much more discoverable, however.

#comparison-vizrec, #flow-comparison, #press-this

Press This, Drag Bookmarklet, Macnchrome

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 4.2-alpha-31427, PT 0.0.6-20150212

Old:

New:

 

#comparison-vizrec, #flow-comparison, #press-this

Press This, add bookmarklet, iPhone 6+

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 4.2-alpha-31427, PT 0.0.6-20150212

Old:

IMG_0456

The Press This bookmarklet is not installable.

New:

 

#comparison-vizrec, #flow-comparison, #press-this

Press This, blog an image from the camera roll, iPhone 6+

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 4.2-alpha-31427 and PT 0.0.6-20150212.

Entry point is a bare press-this.php link.

Old:

New:

 

#comparison-vizrec, #flow-comparison, #press-this

Press This, continue in full editor, Macnchrome, 4.2-alpha-31427, PT 0.0.6-20150212

Old:

New:

#comparison-vizrec, #flow-comparison, #press-this

Press This, sideloaded image insertion flow comparison, Macnchrome

A quick comparison of production Press This vs. feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. Press This when inserting a sideloaded image. CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 4.2-alpha-31382 and Press This 0.0.4.3-20150207.

Production, insert sideloaded image and publish.

Plugin, insert sideloaded image and publish.

#comparison-vizrec, #flow-comparison, #ios