Nick Halsey 3:54 am on June 14, 2015
Tags: customize ( 18 ), customizer ( 14 ), flow-comparison, menu customizer ( 2 ), menus ( 6 ), parity, parity-check, visual-compariosn

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 (Customizer).
Front page -> menus -> social menu (admin).	Front page -> menus -> social menu (Customizer).
Front page -> menus -> “everything” menu with 350 items (admin).	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 (Customizer).
Front page -> add five latest posts to menu (admin.	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 (Customize).
Front page -> delete the six items that were just added (admin).	Front page -> delete the 6 items that were just added (Customizer).
Switch from viewing one menu to the social menu (admin).	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 (Customizer).
Fully nest the social menu – 10 levels deep (admin).	Fully nest the social menu – 10 levels deep (Customizer).
Open an item’s original link (admin).	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 (Customizer).

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

Nick Halsey 1:52 am on May 26, 2015
Tags: 4.2 ( 14 ), customize ( 18 ), customizer ( 14 ), flow-comparison, menus ( 6 ), mobile ( 12 ), phone ( 22 ), visual-comparison ( 4 ), winphone

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 🙂

Open site (logged in). Tap dashboard icon.

Tap Menus.

Menus page loads. The menu I want to edit is selected. Scroll down to the menu.

Trying to delete “Big Buddies”. Tap on it. Nothing Happens. Try zooming out.

Tap on the arrow for the item I want to delete.

After a delay, it opens. Tap remove.

The menu item is deleted. Now need to add a new item. Scroll up.

The item I need to add is a post. Tap posts.

Tab the checkbox for the item I want to add.

Tap add to menu.

Loading indicator, then stops. Scroll down.

Item is at the bottom of the menu. While scrolling, hierarchy and positioning is messed up for several items at the bottom of the menu. Need to drag it up.

Try dragging the new item up. It needs to be a sub-item of “PSWC”, which is much higher up the screen, just out of view. It lands three items up. Repeatedly try dragging it up higher with various techniques, no luck. Look around for another way to move items. Try tapping the arrow icon again.

Tap “up one”.

Item moves up, continue tapping up one several more times.

More up one. Eventually get to top and move “under PSWC”.

Scroll back down, need to cleanup broken hierarchy from trying to scroll earlier. Tap arrow icon.

Tap “under Environmental”.

Tap arrow for the Geotech item.

Tap out from under environmental

Tap to close the menu items (2 taps).

Look for save button. Scroll up, then down all the way.

Tap save menu.

Loading…

Tap home icon.

Tap visit site.

Site loads. Tap menu icon.

Item was successfully remove. Scroll down.

Item successfully added, messed up items successfully restored to correct positions.

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

Ryan Boren 7:24 pm on February 12, 2015
Tags: comparison-vizrec ( 6 ), flow-comparison, press this ( 9 )

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

Old:

: Start. Right click Press This. Requiring right click to expose the textarea is not very discoverable.

: Bookmarklet guts show, with highlight. Cmd+c to copy. Click “Boomarks” in the browser’s bar.

: Click “Bookmark Manager”.

: Right click.

: Add Page

: Add title and Cmd+v bookmarklet

: Done. Close this tab.

: Find something to Press. Click the new Press This bookmarklet.

: Press This in its glory

New:

: Start. Click Copy Press This Bookmarklet.

: Click textarea.

: Text highlights on click. Cmd+c to copy and then click Bookmarks in the browser’s bar.

: Click Bookmark Manager.

: Right click.

: Click Add Page.

: Type in Press This for the name and Cmd+v to paste bookmarklet into URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org field.Press

: Done. Dismiss this window and go find something to press.

: Let’s press this. Click Press This in the bookmarks bar.

: The press this screen, ready to carry on.

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

Ryan Boren 6:58 pm on February 12, 2015
Tags: comparison-vizrec ( 6 ), flow-comparison, press this ( 9 )

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:

: Start. Press This has a section at the top of tools.php. The bookmarks bar is not showing, so click View in the browser’s bar.

: The View menu. Click Always Show Bookmarks Bar”.

: Selected.

: Now the bookmark bar is showing. Drag Press This to the bookmarks bar.

: Success. Now open a new tab and navigate to something I want to Press This.

: Ooo, pretty nature in a box. Click Press This.

: The Press This screen awaits further adventure.

New:

: Start. Press This has its own tools page now. The bookmarks bar is not showing, so click View in the browser’s bar.

: The View menu. Click Always Show Bookmarks Bar”.

: Selected.

: Now the bookmark bar is showing. Drag Press This to the bookmarks bar.

: Success. Now open a new tab and navigate to something I want to Press This.

: Let’s Press This. Click Press This in the bookmarks bar.

: The Press This screen awaits further adventure.

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

Ryan Boren 6:43 pm on February 12, 2015
Tags: comparison-vizrec ( 6 ), flow-comparison, press this ( 9 )

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:

The Press This bookmarklet is not installable.

New:

: Start. Scroll down.

: Tap Copy Press This Bookmarklet.

: Tap into bookmarklet text area.

: Just tapping the textarea doesn’t copy, so lets try selecting some text.

: Trying to select. Very difficult. The selection is lost when you cross the border of the textarea. Multiple attempts, all fail.

: Sometimes this happens when trying to select. I attempted a few more times before giving up.

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

Ryan Boren 5:25 pm on February 12, 2015
Tags: comparison-vizrec ( 6 ), flow-comparison, press this ( 9 )

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:

: Click the image icon.

: Loading indicator. Partially off screen and slow.

: This interface seems to deal exclusively with sideloaded images. I can’t find a way to the media modal to upload from camera roll.

New:

: Start. Tap the image icon.

: Tap Select Files

: Tap All Photos

: Tap an image

: Tap Done

: Loading progress. Ugly 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..

: Upload complete. Tap Insert into post.

: Inserted.

: Change the title. Scroll behavior here is awful, just like post-new.php on iOSiOS The operating system used on iPhones and iPads.. Touching the image while scrolling brings up the image edit controls.

: Tap into content and scroll down to check the post. Placeholder text still in the body. Perhaps because an image was immediately inserted before visiting the editor. Tap Done to dismiss the keyboard.

: I left the placeholder and tapped Publish. The icons grey and there is a pause for a couple seconds before the blue progress line appears at the top of the browser. I didn’t get a screenshot of this.

: Dumped in the post page after publish.

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

Ryan Boren 4:53 pm on February 12, 2015
Tags: comparison-vizrec ( 6 ), flow-comparison, press this ( 9 )

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

Old:

: Start. Click the Press This bookmarklet.

: Press This pops up in new window. Click Save Draft.

: The editor is cleared out. Click Edit Post.

: The Press This pop up dismisses and the full editor opens up in the tab occupied by the youtube page that I pressed.

New:

: Start. Click the Press This bookmarklet.

: Click Save Draft.

: The Press This popup goes away and the editor opens up in the parent. This means I have to back history out of the edit session to get back to the source page I was pressing. Maybe the editor should open in a new tab so that the source material is not obscured.

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

Ryan Boren 3:41 pm on February 9, 2015
Tags: comparison-vizrec ( 6 ), flow-comparison, iOS ( 64 )

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.

: Start. Click the Press This bookmarklet.

: Sideloaded images don’t show by default. Click the image icon next to Add. This is a slow load the first time through. Lots of spinner.

: The desired image is earlier in this list than it is in the 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 list. Click the image.

: Image inserted. There are no buttons visible. What do I do? Scroll down.

: There’s Insert Image. Click it.

: Image inserted.

: Edit title and then Publish.

: Post publish screen. View post did not work for me, so I visited the front page in a new tab.

: Result.

Plugin, insert sideloaded image and publish.

: Start. Click Press This bookmarklet.

: Media sideloads up top. Blockquote auto pulled. This is a good pull. I’ll go with it. Now, look for an image. (Production has a border around the images. Does the lack of borders here make image selection more difficult, especially with so many black backgrounds?)