Ryan Boren 9:43 pm on September 3, 2015
Tags: 32678 ( 5 ), chrome ( 28 ), desktop ( 26 ), feature-plugin ( 6 ), feature-plugin-toolbar-experiments, iOS ( 64 ), macos ( 29 ), phablet ( 50 ), toolbar, visual-survey ( 17 )

Toolbar: visual survey of toolbar experiments, Macnchrome, iPhone 6+

Surveying the Toolbar Experiments 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 #32678.

Macnchrome, single site, admin user:

iPhone 6+, single site, admin user:

#32678, #chrome, #desktop, #feature-plugin, #feature-plugin-toolbar-experiments, #ios, #macos, #phablet, #toolbar, #visual-survey

Ryan Boren 1:51 am on July 14, 2015
Tags: 32589 ( 3 ), 4.3 ( 18 ), beta ( 19 ), iOS ( 64 ), login ( 5 ), login-registration ( 5 ), options ( 5 ), passwords ( 4 ), phablet ( 50 ), settings ( 3 ), thresholds ( 5 ), toolbar, web ( 44 )

Changing my password, iPhone 6+

Starting on the front page, I visit my profile, change my password, and return to the front page.

4.3-beta2-33183

See #32589.

: Start on the front page. Tap the avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. in the toolbar.

: Tap Edit My Profile

: Scroll down.

: Tap Generate new password.

: What happens if I tap Go? Let’s find out. Tap Go.

: Form submitted. Profile updated. The iCloud keychain is offering to Update. This could be considered really quick and convenient, or startling. If you don’t use iCloud keychain and instead using 1Password or LastPass, this can catch you unawares. The clipboard did not have a copy of the generated password so I don’t have a way to update the password in 1Password. Anyhow, tap Update Password.

: The notice has the generic Profile updated message. Given the anxiety of changing a password, should a message specific to changing the password be shown? Maybe link to password recovery info. Tap the Home icon in the toolbar.

: Back where we started.

#32589, #4-3, #beta, #ios, #login, #login-registration, #options, #passwords, #phablet, #settings, #thresholds, #toolbar, #web

Ryan Boren 4:35 pm on July 1, 2015
Tags: 32947, 4.3 ( 18 ), beta ( 19 ), editor ( 30 ), iOS ( 64 ), phone ( 22 ), toolbar, web ( 44 )

Toolbar flow: Delete a post, Create and chain edit a post, iPhone 6+

Here are a couple of toolbar 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

vizrecs I had laying around. These were done with 4.3 alpha, before the Customize icon landed in the toolbar.

Delete a post. Exercises Edit and Home in the toolbar.

: On a post permalink page. Tap the edit icon in the toolbar.

: Scroll down.

: Tap Move to TrashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days..

: Tap the Home icon in the toolbar.

: Tap Visit Site.

: Front page.

Create a post and then chain edit it. Exercises + and Edit in the toolbar. Uses View Post in the publish/save notices to link from back to front, rather than the toolbar.

: Front page. Tap +.

: Tap Post.

: Add title and content.

: Scroll down.

: Tap Publish.

: Tap View Post in the notice.

: On the post permalink page. Tap the edit icon in the toolbar.

: Make some changes.

: Scroll down.

: Publish. Note misaligned spinner.

: Tap View Post.

: Back on the post permalink page.

#32947, #4-3, #beta, #editor, #ios, #phone, #toolbar, #web

Ryan Boren 7:31 pm on June 30, 2015
Tags: 32678 ( 5 ), 4.3 ( 18 ), beta ( 19 ), iOS ( 64 ), phone ( 22 ), toolbar, visual-survey ( 17 ), web ( 44 )

Toolbar Visual Survey, 4.3-alpha-33003, iPhone 5

For #32678. 4.3-alpha-33003. Single site install. Logged in as an Administrator.

#32678, #4-3, #beta, #ios, #phone, #toolbar, #visual-survey, #web

Ryan Boren 5:08 pm on June 30, 2015
Tags: 32678 ( 5 ), 4.3 ( 18 ), beta ( 19 ), iOS ( 64 ), phablet ( 50 ), toolbar, visual-survey ( 17 ), web ( 44 )

Toolbar survey with 32678.5.diff, iPhone 6+

Compare with the production toolbar on an iPhone 6+.

For #32678. 4.3-alpha-33003 with 32678.5.diff applied. Single site install. Logged in as an Administrator.

Notes:

The top-level icons are smaller here than in production. I prefer the larger production icons. There is also some misalignment.
In the admin, the W menu retains active highlight when the admin menu is expanded even when other toolbar menus are open and active.
With the W menu open on the front page, tap the Customize icon. Once in 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., navigate back using browser back history. Both the W menu and Customizer have active highlight. Dismissing the Customizer with X instead of back history doesn’t trigger this, of course. Edge case.

: Front page

: Front page, with W menu expanded

: With the W menu open, tap the Customize icon. Once in the customizer, navigate back using browser back history. Both the W menu and Customizer have active highlight. Dismissing the Customizer with X instead of back history doesn’t trigger this, of course. Edge case.

: Front page with + menu open

: Front page with user menu open

: Post page, note the pencil icon

: Dashboard

: Dashboard with W menu open

: Same situation as in slide three. Go to the customizer, return via browser back history. Double highlight.

: Dashboard with + menu open. Note that W menu retains active.

: Dashboard with user menu open. W menu retains highlight.

#32678, #4-3, #beta, #ios, #phablet, #toolbar, #visual-survey, #web

Ryan Boren 4:18 pm on June 30, 2015
Tags: 32678 ( 5 ), 4.3 ( 18 ), beta ( 19 ), chrome ( 28 ), desktop ( 26 ), macos ( 29 ), needs-captions ( 2 ), toolbar, visual-survey ( 17 )

Toolbar visual survey, 4.3-alpha-33003, Mac and Chrome

For #32678. Single site install. Logged in as an Administrator.

#32678, #4-3, #beta, #chrome, #desktop, #macos, #needs-captions, #toolbar, #visual-survey

Ryan Boren 12:29 am on June 29, 2015
Tags: 32678 ( 5 ), 4.3 ( 18 ), beta ( 19 ), iOS ( 64 ), phablet ( 50 ), toolbar, visual-survey ( 17 ), web ( 44 )

Toolbar survey, iPhone 6+

For #32678.

Single site 4.3-alpha-32976 as an Administrator.

: Toolbar on front page.

: On front page with Dashboard menu open.

: On front page with + menu expanded.

: On front page with user menu expanded.

: Toolbar on a post permalink page. Page, CPT, and taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. pages also have the pencil icon.

: Toolbar on wp-admin/index.php

: wp-admin toolbar with Home menu expanded.

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. 4.3-alpha-32976 as an Administrator, no Super Admin.

: Toolbar on front page

: On front page with multisite menu expanded

: On front page with Dashboard icon expanded.

: On front page with + menu expanded

: Toolbar on wp-admin/index.php.

Needed: shots with comment notification and updates in the toolbar.

#32678, #4-3, #beta, #ios, #phablet, #toolbar, #visual-survey, #web

Ryan Boren 7:24 pm on June 13, 2015
Tags: editor ( 30 ), media ( 30 ), modal ( 14 ), toolbar, touch, web ( 44 )

The Top 5 Impediments to Flow on Touch Devices

Behold, a listicle.

The media modal has a number of issues on touch devices, particularly phones, including the use of tabs and sidebars. For details see The Media Modal and Sidebars on Phones.

#30154 – Improve Media Modal UI at small-screen sizes

2. The Editor

Update: #31247, Scrolling and zooming is frustrating on iOSiOS The operating system used on iPhones and iPads., was fixed on July 1st of 2015.

Scroll up to add media. Scroll down to preview, save, publish. Up and down. Up and down. Press This addressed this with its redesign in 4.2. Lessons learned there could be applied to post-new.php.

The Location of Add Media on Phones

#29989 – Hide Media Buttons on small screens

Fixed: The editor has a very annoying scrolling problem on iOS. Fixing that would go a long way toward improving usability on iOS devices.

#31247 -Scrolling and zooming is frustrating on iOS

Update: This was fixed on July 3rd of 2015.

I like the toolbar on phones better than on desktop, except for the lingering desktop biasDesktop bias Patterns and interfaces that work in desktop interfaces don't always work on mobile. UI elements triggered by mouse hover, opening in new windows, dragging into bookmarks bars, drag-and-drop, and auto-focusing search input fields are examples of desktop bias.https://make.wordpress.org/test/tag/desktop-bias/ that defies touch expectations when tapping menu icons. In the image above, tapping the dashboard icon traverses a link to the dashboard instead of dismissing the menu.

#29906 – Submenus can’t be dismissed on mobile.

4. Submenus in the toolbar and admin menu

Submenus are awkward on touch devices. The expectation on touch is that tapping a menu item takes you to the tapped thing and closes the menu. With WP, tapping in the admin menu subtly opens a submenu. The menu remains open. I often don’t notice the submenu open because I’ve already shifted my gaze to look at the right side of the screen. Losing submenus would benefit touch navigation. Further, losing them on desktop (like 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/ does) reduces the overwhelming feeling new user experience when first confronting wp-admin. This is something I’d like to experiment with in a feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins..

Site Switching on the Make Network