A brief visual history of wp-admin’s h1

This ticket comment has some visual historyVisual history A visual history shows the evolution of an interface over time and across releases. of the h1 in wp-admin that I’d like to bubble up to here. Thanks @afercia.

 h1 was used for the site name in all the admin screens, with a link back to the front page. It was removed with the refactoring of the admin bar. See how it looked in WordPress 3.0 in this screenshot.

h1 was used for the site name in all the admin screens, with a link back to the front page. It was removed with the refactoring of the admin bar. See how it looked in WordPress 3.0 in this screenshot.

Prior to 3.0, the header had "Visit Site" cuddled next the site name h1 to make it more discoverable. This screenshot shows WP 2.7.

Priori to 3.0, the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. had “Visit Site” cuddled next the site name h1 to make it more discoverable. This screenshot shows WP 2.7.

More screenshots at: https://cloudup.com/cqzGvz97_zO

#2-7, #3-0, #31650, #dashboard, #h1, #ia, #visit-site, #visual-comparison, #visual-history

Today in the Nightly: Inline link toolbar and Press This split button

Here are two cool things that recently landed in trunk and are available right now in the nightly build. Install the nightly. Try them.

Inline Link Toolbar

Being able to visit links straight from the editor means no more copy paste into the browser’s location bar. Nice. Also nice is being able to see the link without popping up the link modal.

Screen Shot 2015-06-26 at 1.04.59 AM

One time I tapped X thinking it would dismiss the toolbar.

One time I tapped X thinking it would dismiss the toolbar.

To test, visit the editor and click/tap into a link. The link toolbar will appear. If it does not, try forcing a browser refresh (Shift+Reload in Chrome on Mac OS). Provide feedack on  #32604 or in #core-customize or in reply to this post. Check out this make/flow post for more visuals.

Press This split button

Draft, preview, and standard editor are now in a split button with Publish.

Screen Shot 2015-06-26 at 1.39.13 AMpress_this_with_split_button_on_iphone_6_

 

 

To test, go to the Tools menu and check out the Press This section at the top. Provide feedback on #32757 or in #core-pressthis or in reply to this post.

#4-3, #editor, #link-toolbar, #links, #press-this, #today-in-the-nightly, #visual-comparison

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