Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try: Remove hover styles #18862

Merged
merged 2 commits into from
Dec 3, 2019
Merged

Try: Remove hover styles #18862

merged 2 commits into from
Dec 3, 2019

Conversation

jasmussen
Copy link
Contributor

As part of ongoing efforts to improve block selection navigation mode has recieved some visual enhancements and ability to "drill down" through nested blocks (#17088). In addition to this, a breadcrumb bar has been added (#17089), which provides a permanently visible visual indicator of which block you're editing, and a quick tool to let you pick the parent.

In light of that, there is less reason to have a hover style for blocks at all. So this PR removes it, and with it, the block breadrumb.

hvoer

There are a number of reasons for considering this.

  1. It drastically reduces the cognitive load of mousing over a document. This is especially visible as it helps surface the sibling inserter instead:

sibling

  1. The breadcrumb on hover has not proven that useful in practice. Given that it's plenty visible in Navigation Mode, and the block type including the parent hierarchy is surfaced in the breadcrumb, the hover label is redundant.

navigation mode

3. Perhaps most importantly, it helps suggest the best interface for selecting parent blocks.

In comlex nesting situations, the hover style would "flicker on" when tiny hit areas were hovered. But this is not the best way to select the parent block, as it requires extremely fine motor skills. The presence of the hover effect seemed to suggest that this is the primary interface for selecting parent blocks, when in fact the breadcrumb bar, or the selection tool are far better equipped methods to do so.

columns

Would love your thoughts, thank you!

@jasmussen jasmussen added the Needs Design Feedback Needs general design feedback. label Dec 2, 2019
@jasmussen jasmussen self-assigned this Dec 2, 2019
@karmatosed
Copy link
Member

Visually I prefer this, it absolutely has less cognitive strain. My only ponder is in distilling this back are we losing the wayfinding, but that's a case of needing to bring it in other ways that aren't as distracting.

@ZebulanStanphill
Copy link
Member

ZebulanStanphill commented Dec 3, 2019

Closes #11133 and #16334.

I like this change. It removes the distraction of the hover title popping up as you move your mouse around. Several months ago, I wouldn't have been in favor of this change, but I've found that the only time when I use the hover title is when trying to select parent blocks. But now that we have the block navigation menu, breadcrumb bar, and select tool, the hover title is no longer needed.

@jasmussen
Copy link
Contributor Author

One aspect of removing the hover effect is that it is intrinsically a desktop affordance, and one that is very much biased towards sighted users. Removing it might help us rely on other affordances that are more cross-platform and potentially, accessible.

left: auto;
right: 0;
}
display: none;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now, this is only rendered in navigation mode right? we could simplify the block.js code to do this and avoid doing it in CSS. Fine to do it later though.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this would be shown only in navigation/select mode.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@jasmussen
Copy link
Contributor Author

Alright, given the approval, the positive comments, and the thumbs up, I'm going to merge this so we can try it in the plugin.

@jasmussen jasmussen merged commit 1d685f4 into master Dec 3, 2019
@jasmussen jasmussen deleted the try/remove-hover-styles branch December 3, 2019 08:47
@bigvibes909
Copy link

Great, thanks. The most important reason for this imo is that those annoying labels actually prevent me from clicking the three vertical dots in order to access blocks (in some circumstances, like when they're nested).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants