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

Replace the fullscreen "exit" icon with a back arrow #10813

Closed
kjellr opened this issue Oct 19, 2018 · 10 comments
Closed

Replace the fullscreen "exit" icon with a back arrow #10813

kjellr opened this issue Oct 19, 2018 · 10 comments
Labels
General Interface Parts of the UI which don't fall neatly under other labels. [Type] Enhancement A suggestion for improvement.
Milestone

Comments

@kjellr
Copy link
Contributor

kjellr commented Oct 19, 2018

A while ago (#9838), we replaced the x icon in full screen mode with an exit icon:

45769856-cece7100-bc0e-11e8-9571-4fb25e87c45c

The exit icon makes sense if you're familiar with it already, but I've heard from a few people that the icon is a little unclear — mostly due to the fact that it's relatively obscure, compared to other alternatives (close icon, back icon, etc.).

For that reason, it might make sense to just switch this to a back arrow instead. A back arrow makes general sense in this context, and the icon will be more widely understood. That seems like a win here.

image

(via Material Icons)

(cc @alexislloyd)

@kjellr kjellr added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. labels Oct 19, 2018
@karmatosed
Copy link
Member

karmatosed commented Oct 22, 2018

I personally like this and it ties into other patterns, but let's consider how we slip under UI freeze, even if we can. cc @mtias and @jasmussen.

@jasmussen
Copy link
Contributor

I dig it. Though I have a personal preference for the arrow with a stem, but that opinion isn't strong.

To get this in after the UI freeze, I would suggest that the change needs to be really OMG important, or fix a bug. I'm not sure this classifies as either, given it's an icon change to a non-default interface mode. I also think it would be a nice quick win once phase 2 gets underway. But that's just my opinion.

@karmatosed karmatosed removed the Needs Design Feedback Needs general design feedback. label Nov 22, 2018
@karmatosed karmatosed added this to the WordPress 5.0.1 milestone Nov 22, 2018
@nerrad
Copy link
Contributor

nerrad commented Nov 23, 2018

Personally, I've found the behaviour of this link very disjointing from muscle memory patterns. Even though I know what this link does, I find the fact that it leads to the post list table to be jarring. I repeatedly expect it to exit full screen mode.

I do understand however that if someone has full screen mode as the default for their editor instance, that they will land on here from the post lists table so in that context it makes sense. However I find that its more jarring when enabling full screen for the first time.

I propose making this more context aware, which means:

  • Show an "x" (or some other appropriate "close" icon) when enabling full screen for the first time. You can keep the back icon in place for jumping to the post list from this context (which helps train that as being the action to get from the full screen editor to the admin interface).
  • Show the "back" icon when arriving in the editor from the post lists table context.

@afercia
Copy link
Contributor

afercia commented Nov 23, 2018

If the link to the posts list is going to stay, from an accessibility perspective the "back" icon would be better and the aria-label / tooltip should just be "Back". See https://www.w3.org/TR/WCAG21/#label-in-name

However, I'd consider to review the overall functionality shortly after 5.0. There are many places in core where a link points to the edit post page. Just search for all the occurrences of get_edit_post_link() and where it’s used. For example: the Recent Drafts widget in the Dashboard. Or the edit comment page. Or the edit post link in the toolbar in the frontend. Not to mention plugins that link to the edit post page for their own purposes.

When full screen mode is on and users come from one of these places, why they should be brought back to the posts list?

@nerrad
Copy link
Contributor

nerrad commented Nov 23, 2018

Some other considerations (brought up in slack chat):

  • Have the default mode for the editor as full screen and switch this to a "close" indicator that doesn't change the default mode but temporarily switches the editor to non full screen for that session (@youknowriad's suggestion)
  • Remember that the editor is potentially the destination from a variety of external links. Coming into the editor from those contexts when its in full screen mode can result in a jarring experience when clicking something looking like a back arrow (see @afercia's comments above).
  • IMO I think any "back"/"next" navigation should be left explicitly to the browser, having an alternative action serving the same purpose is potentially confusing (especially when behaviour differs).

I realize this link was put in place partially because general navigation is hidden in full screen mode but I don't think the current implementation is a good long term solution.

@mtias mtias added the General Interface Parts of the UI which don't fall neatly under other labels. label Nov 30, 2018
kjellr added a commit that referenced this issue Jan 21, 2019
As per the notes in #10813, this PR updates the full screen "Exit" icon with a "Back" icon and label instead.

This icon is more common across the web, and will thus be a bit less confusing for users.

Note: The original issue suggested using a Material icon, but I've just swapped this out with the equivalent Dashicon for simplicity in implementtion. If someone knows how to swap that out with a SVG, go for it. 👍
@kjellr
Copy link
Contributor Author

kjellr commented Jan 21, 2019

👋 I opened a quick PR to keep this moving along: #13403

I'm also up for exploring @youknowriad's suggestion above:

Have the default mode for the editor as full screen and switch this to a "close" indicator that doesn't change the default mode but temporarily switches the editor to non full screen for that session

That seems reasonable to me, and might be a good solution too.

@jasmussen
Copy link
Contributor

Have the default mode for the editor as full screen and switch this to a "close" indicator that doesn't change the default mode but temporarily switches the editor to non full screen for that session

This seems overly complex to me, with complex rules for when and when not to. I'm not sure as a user I'd know what was going on here. I'm sorry I missed the chat where this was suggested, and it's not the end of the world if it has to be this way, but it doesn't feel like a win.

If the problem we're trying to solve is the following:

When full screen mode is on and users come from one of these places, why they should be brought back to the posts list?

... then as a strawman argument, can't we do a history.back() instead?

@kjellr
Copy link
Contributor Author

kjellr commented Jan 22, 2019

then as a strawman argument, can't we do a history.back() instead?

That seems reasonable to me too. 😄 It would probably end up being a bit more expected than the current behavior.

gziolo pushed a commit that referenced this issue Jan 25, 2019
As per the notes in #10813, this PR updates the full screen "Exit" icon with a "Back" icon and label instead.

This icon is more common across the web, and will thus be a bit less confusing for users.

Note: The original issue suggested using a Material icon, but I've just swapped this out with the equivalent Dashicon for simplicity in implementtion. If someone knows how to swap that out with a SVG, go for it. 👍
@gziolo
Copy link
Member

gziolo commented Jan 25, 2019

Icon (dashicon) and label were updated in #13403. Should we close this issue or do you want iterate on it?

@kjellr
Copy link
Contributor Author

kjellr commented Jan 28, 2019

Let's close for now. 👍 This ticket was opened purely to adjust the icon. Discussion around the function of that button can be handled in a separate ticket if needed.

@kjellr kjellr closed this as completed Jan 28, 2019
youknowriad pushed a commit that referenced this issue Mar 6, 2019
As per the notes in #10813, this PR updates the full screen "Exit" icon with a "Back" icon and label instead.

This icon is more common across the web, and will thus be a bit less confusing for users.

Note: The original issue suggested using a Material icon, but I've just swapped this out with the equivalent Dashicon for simplicity in implementtion. If someone knows how to swap that out with a SVG, go for it. 👍
youknowriad pushed a commit that referenced this issue Mar 6, 2019
As per the notes in #10813, this PR updates the full screen "Exit" icon with a "Back" icon and label instead.

This icon is more common across the web, and will thus be a bit less confusing for users.

Note: The original issue suggested using a Material icon, but I've just swapped this out with the equivalent Dashicon for simplicity in implementtion. If someone knows how to swap that out with a SVG, go for it. 👍
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
General Interface Parts of the UI which don't fall neatly under other labels. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

9 participants