Customizer: Browse, Install, Preview Themes on Mobile

I tested the patch proposed on #37661 on Windows Phone 10 with the Edge browser. Here’s a visual record of that experience:

The biggest potential fixes I found were to show a loading indicator in the filters (next to the theme count button in the header?) when a new filter is loading, and to scroll the themes container to the top whenever a new section is opened or a search/filter is changed (which should be happening, but isn’t).

I should also note that since it is impossible to reorder images in galleries with Chrome on laptops that support touch, see #31652, I had to go to the text editor to fix one that jumped out of order when creating this post.

#customize, #customizer, #edge, #phone, #shiny-updates, #visual-record, #windows-phone

Customizer, Preview: Visual survey of customizer device preview

Screenshots from my testing sessions for #31195 and #35875.

Macnchrome, sidebar expanded

Macnchrome, sidebar collapsed

Macnfirefox, sidebar expanded

Macnfirefox, sidebar collapsed

 

Tablets and phones don’t have device preview.

iPad Air

iPhone 6+

iPhone 5

Nexus 5

#31195, #35875, #android, #chrome, #customize, #customizer, #desktop, #ios, #macos, #phablet, #phone, #preview, #safari, #visual-survey

Customize: preview site responsiveness, Macnchrome, iPad Air, iPhone 6+

A brief visual survey for #31195 with WP 4.4-alpha-33848 and Customizer UI Experiments 0.1.

#4-4, #alpha, #chrome, #customize, #customizer, #customizer-ui-experiments, #desktop, #feature-plugin, #feature-preview-responsiveness, #ios, #macos, #phablet, #preview, #responsive, #tablet, #visual-survey

Menus, Customize: Visual survey of menu locations, Macnchrome, iPhone 6+

Visuals for a locations, groups discussion. https://wordpress.slack.com/archives/design/p1440091790000074

Macnchrome:

iPhone 6+:

#chrome, #customize, #desktop, #ios, #macos, #menus, #phablet, #visual-survey

Customize: Change site icon via customize, Macnchrome

With 4.3-beta2-33249.

#16434, #4-3, #beta, #chrome, #customize, #desktop, #macos, #site-icons

Customize: Change site icon via customize, iPhone 6+

With 4.3-beta2-33249.

Notes:

  • I couldn’t get cropping to work.

#16434, #4-3, #beta, #customize, #ios, #phablet, #site-icons, #web

Proposed Customizer Site Icon Flow

Windows 8.1, IE11, laptop flow. See #16143.

#customize, #desktop, #ie, #site-icons, #web, #windows

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 Customizer, 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