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

Menu Customizer, iPhone 5 emulated

#menu-customizer, #menus

Network Admin, Nexus 6

Upgrading Themes, 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, CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., and Upgrade Network

Adding a new site and editing the new site’s domain

Adding a completely new user and adding an existing user

Adding a theme, network activating. Adding a theme, then enabling and activating for a single site (ignore the php notice, unrelated. TODO: fresh screenshot of that step)

Add a new plugin

Bonus: Registering a new user and a new user/site from the front-end

Bonus: Various site maintenance tasks. Archiving, spamming, deleting, etc

Lastly, https network admin doesn’t create http sites. I can see this being okay/expected since having https://example.com doesn’t mean you’ll have a wildcard for the subdomains. Is there a filter/option/etc to indicate that you do?

#android, #multisite, #network-admin, #nexus-6, #web

Multisite Video Flows (iPhone 5s)

Add a new user to a site when the user does not currently exist as a network user (a few elements overrun width):

Add a new user to a site when the user does exist as a network user (a few elements overrun width):

Install, enable, and then activate a theme for a single site on the network (an url overruns width):

Install a theme and enable it for use on a network (an url overruns width):

Install and then activate a 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 use on a single site on the network (a few elements overrun width):

Install and then network activate a plugin (a few elements overrun width):

Setup 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. from scratch in a subdirectory configuration (skipped)

Setup multisite from scratch in a subdomain configuration (skipped)

Create a new site on the network (looks good no issues!:):

Upgrade WordPress, including the network upgrade (skipped)

Update a plugin (looks good no issues!:):

https://cloudup.com/cSV0lJhdcFM

Update a theme (theme list overruns width):

https://cloudup.com/cPXCnVXdmXe

Edit the domain/path for an existing site on the network (looks good no issues!:):

https://cloudup.com/cAFhraatXap

Bonus: user list (all kinds of bad):

https://cloudup.com/cF2irq9fqwP

#multisite, #phone

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

Publishing a video to a wordpress.com blog with the iOS app 5.2.0.20150518bebf680, iPhone 6+

The 5.2 iOSiOS The operating system used on iPhones and iPads. app betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. features a new media picker. Here’s a run through the picker uploading a single video to a 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/ hosted blog with an iPhone 6+.

#app, #ios, #media, #mobile, #phablet, #publish, #video

Multisite Flows (iPhone 6+)

Install 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.

Not relevant on iPhone

Adding a new site for existing user as admin

Adding a new site for new user

Same as the previous 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
, except there’s no results from the ajax email field.

Install & enable, a theme for the entire network.

Install & enable, a theme for a single site on the network.

Follow steps 1-7 from previous flow

Install & network activate a 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.

Install & activate a plugin for a single site on the network.

Follow steps 1-4 from previous flow.

Edit the path for an existing site.

 

Edit the domain for an existing site.

Same as previous flow, just edit the other field in 7

#iphone-6, #multisite, #phone

Multisite Flows (Desktop)

Installation

The install process for multisite is a challenge. The biggest issue here is discoverability – there’s no place where multisite is mentioned. I assume it’s on purpose so less tech-savy users don’t make mistakes. I would suggest at least adding a commented out `define( ‘WP_ALLOW_MULTISITE’, true );` to the wp-config.php file, with a short explanation and also a link to https://codex.wordpress.org/Create_A_Network

1. The user adds `define( ‘WP_ALLOW_MULTISITE’, true );` to wp-config.php
2. Go back to wp-admin and find the new “Network Setup” item under “Tools”
3. After chosing the innitial options, we get the “Enable Network” screen. My screenshot presents some errors because I’m running this locally, please ignore that.
4. Add the given pieces of code to `wp-congig.php` and `.htaccess`
5. Log in again to wp-admin
6. After logging back in, there’s no notice at all that we’ve succeeded, aside from the new “My Sites” item on the admin bar.

Adding a new site for existing user as admin

1. Clicling the “My Sites” link on the admin bar takes us to an empty dashboard on the current site, not the network admin. There’s a “Save Changes” primary button that I’m not sure what is there for. No way to add a new site from here.
2. Second try, going deeper into the “My Sites” menu, clicking “Network Admin” takes us to the “Network Dasboard.” We can also click directly the “Sites” submenu of “Network Admin” to go to the sites section.
3. In the “Sites” section of the “Network Admin” we find a “Add New” item both on the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., as well as a link next to the page title.
4. The “Add New Site” screen gives us simple options to create a new site (according to the option we selected during the install process, in this case for sub-domains).
5. The page refreshes and we get the same “Add New Site” screen with a notice that the site was added, providing links to its “Dashboard” and to the “Edit Site” screen on the network admin.

Adding a new site with an admin who is not a user

1. We go to “Add New Site” again, but this time we add an admin email that is not associated with any user yet.
2. The page refreshes and we get the exact same thing as before – a notice that the site was added, providing links to its “Dashboard” and to the “Edit Site” screen on the network admin.
3. I checked the email account used for this and I got no email. Not sure if it’s because I’m creating these sites locally. I assume the new user would get an email (can anyone confirm this?)

Install, enable, and then activate a theme for a single site on the network.

1. In the “Network Admin”, go to “Themes” > “Add New”
2. Search for a theme to install, hover the theme, and click “Install”
3. We’re taken to a screen that updates with the process of installation and when done gives us two links to follow: “Network Enable” and “Return to Theme Installer”. Since we want to only enable this on a single site, none of these options are good for us.
4. Click the “Sites” item on the sidebar, and in that page click the title of the site we want. We’re taken to a “Edit Site” screen.
5. Clicking the “Themes” tab gives us a list of installed theme (in a table that looks more like a plugins screen), where we can enable the theme.
6. After clicking the “enable” link on the desired theme, we get visual confirmation through a notice dialog at the top, and a selected state on the table row of the theme we just activated.

Note: I tried looking for another way to add an installed theme (not network activated) to a site and couldn’t find one. Even on the “Installed Themes” screen, we only get an option to “Network Enable”.

Install a theme and enable it for use on a network.

1. 2. 3. Repeat steps 1-3 from previous 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
.
4. We click “Network Enable” link, the page refreshes and we’re taken to the “Installed Themes” screen, where we get a generic notice saying “Theme enabled.” (no mention to the theme name) and we see a table with all installed themes and the marked rows for the network activated themes. This screen also allows us to enable other themes for the entire network.

Install and then activate a 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 use on a single site on the network.

1. Go to “Plugins” > “Add New”.
2. Search for a plugin and click “Install Now”
3. We’re taken to a screen that updates with the process of installation and when done gives us two links to follow: “Network Enable” and “Return to Plugin Installer”. Since we want to only enable this on a single site, none of these options are good for us.
4. The only way to enable a plugin on a single site that I found was to visit the admin for the specific site and go to “Plugins”
5. There, look for the plugin we just installed and click the “Activate” link on it.
6. The page refreshes and we see a notice with “Plugin Activated” (no mention of plugin name), and the table row for the plugin is now marked.

Install and then network activate a plugin.

1. 2. 3. Repeat steps 1-3 from previous flow.
4. We click “Network Enable” link, the page refreshes and we’re taken to the “Installed Plugins” screen, where we get a generic notice saying “Plugin Activated” (no mention to the plugin name) and we see a table with all installed themes and the marked rows for the network activated plugins. This screen also allows us to enable other plugins for the entire network.

Edit the path for an existing site on the network.

1. In the “Network admin” we go to “Sites” and click the site we want to change.
2. The option “Path” isn’t descriptive at all. Since this is a sub-domain installation, I’m not really sure what this does, but I’m filling it with a new name and clicking “Save Changes” (I’m leaving “Update siteurl and home as well.” checked as well, even though I’m not sure what that means)
3. The page refreshes and we get a notice of “Site info Updated”

Edit the domain for an existing site on the network.

1. Repeat step 1 from above
2. Edit the field “Domain” and change it to a new site address, and click “Save Changes”
3. Page refreshes and we get a notice “Site info updated” – domain seems to have been successfully changed.

#desktop, #flow, #multisite

Image Flow Prototype – Mobile Create Gallery

Optional path if user wants to change settings. Starts after ‘Create Gallery’ has been clicked.

#image-flow

Image Flow Prototype – Desktop Create Gallery

Thanks to @pabloperea for prepping the images for this vizrec!

 

Optional path:

#image-flow