Long press displays hint without activating format toolbar button

[rachelmcr]

Expected

I expect that when I either single tap or long press on a format toolbar button, the button will be activated. When I do a long press, I expect I will also get a hint about what I just pressed on.

Observed

When I do a long press, the button I press on turns blue (as if it's activated) and displays a hint, but when I release the button it is deactivated.

This is confusing as a user: I expect that when I long press on it, the button will be activated and the hint will be provided in addition to that. Also, because the button turns blue when I press on it, I assume that it's activated — I had to really look to notice that it wasn't activated after I released the button.

This also creates some issues for testing the app, since the Espresso UI testing framework sometimes performs a long press instead of a single tap (reference), in which case the formatting is not enabled as expected.

cc @theck13 as I'm not sure if the current behavior is what you intended when you added the hints — I'd appreciate your perspective on this one. :)

Tested

Nexus 6P API 23 emulator with Aztec demo app (develop branch)

[theck13]

That is expected behavior. Long-pressing on an action will provide a hint without performing the action. That allows users to get an indication of what will happen before committing to an action in case they are unsure what the action's icon represents and its consequences. That's a standard mode of operation. Take a look at the Google Docs app for example. If you long-press on an action in the top toolbar or a format in the bottom toolbar, a hint will be displayed while the action/format is not applied.

If the light blue color shown while long-pressing a button is misleading since it's the same color when the button is checked/selected/activated, we can remove the pressed state color. The button shows a ripple effect when pressed and long-pressed so that should suffice for touch feedback. The light blue color would only be shown when the format is checked/selected/active in that case.

[rachelmcr]

Thanks for the clarification! I'll look for a workaround for the testing issue.

If the light blue color shown while long-pressing a button is misleading since it's the same color when the button is checked/selected/activated, we can remove the pressed state color.

I'd lean toward removing it — without it, I don't think I would have expected the long press to enable the button.

[theck13]

I'd lean toward removing it — without it, I don't think I would have expected the long press to enable the button.

I can remove it. Hey, designers (@folletto , @mattmiklic, @bysl, @iamthomasbishop). Removing only the pressed state color from the format toolbar buttons wouldn't be weird, right?

[mattmiklic]

The button shows a ripple effect when pressed and long-pressed so that should suffice for touch feedback. The light blue color would only be shown when the format is checked/selected/active in that case.

This seems right to me; the ripple effect is sufficient I think to indicate that a long press is happening, and not reusing the style for the activated state is definitely the way to go.

[mattmiklic]

Let's get @iamthomasbishop to weigh in though since he's been thinking about the formatting bar in detail.

[iamthomasbishop]

My 2 cents on how hinting/tapping/long-pressing should work (in a perfect world) is similar to how iA Writer on iOS works. Essentially:

When user taps on an item that has multiple sub-items (for example: Text > Paragraph, Headings, Pre-formatted -or- Lists > Unordered list, ordered list, etc.) - the user should see a quick hint/popover that shows all items that are in that list (visible for 100-300ms?). Note: this is slightly different from iA, which only shows the current item when quick hinting. Showing all items on hint IMO would be more discoverable.

When a user long presses on an item that has multiple sub-items - the user should see a persistent hint/popover that shows items in the list.

If a user taps a button that has only one item, it should simply toggle an 'active' state on the button - perhaps highlighted in a darker shade of blue or dark blue.

Here's how iA Writer looks on iOS: https://cloudup.com/chjQCpROLbV

Hope this helps and is in line with previous discussion!

[theck13]

That seems like a good approach for the next iteration of the format toolbar. Removing the pressed state color in https://github.com/wordpress-mobile/AztecEditor-Android/pull/346 is the quick and easy solution to fix this issue. It should also minimize confusion since it is a minor deviation from the previous editor and follows Android paradigms.

[theck13]

After discussing it with @iamthomasbishop, we'll keep the changes merged in https://github.com/wordpress-mobile/AztecEditor-Android/pull/346 and open new issues for the next iteration of the format toolbar.