WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 12 months ago

#31132 closed enhancement (wontfix)

More intuitive "Kitchen Sink" for TinyMCE

Reported by: kungtiger Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.0
Component: TinyMCE Keywords:
Focuses: ui Cc:
PR Number:

Description

I am administrating three WordPress pages.
Every time I deployed it to the client, they told me, that they are missing, in their view, essential formatting options while authoring a post or a page.
After closer inspection it turned out that the button for showing/hiding more options is not intuitive.
http://i.imgur.com/FKguRtp.png

I would suggest a small bar underneath the main toolbar which on click toggles more formatting options: http://i.imgur.com/kDLqRIL.png

What do you think?

Attachments (7)

tinymce-more.png (64.3 KB) - added by melchoyce 5 years ago.
tinymce-more-2.png (60.2 KB) - added by melchoyce 5 years ago.
tinymce-more-3.png (59.6 KB) - added by melchoyce 5 years ago.
tinymce-arrow-left.png (17.7 KB) - added by kungtiger 5 years ago.
tinymce-arrow-right.png (17.7 KB) - added by kungtiger 5 years ago.
tinymce-plus.png (17.4 KB) - added by kungtiger 5 years ago.
tinymce-old-sink-new-kitchen.png (17.5 KB) - added by kungtiger 5 years ago.

Download all attachments as: .zip

Change History (26)

#1 @SergeyBiryukov
5 years ago

  • Summary changed from More intuitiv "Kitchen Sink" for TinyMCE to More intuitive "Kitchen Sink" for TinyMCE

#2 @melchoyce
5 years ago

I agree that the icon isn't very intuitive. I've attached two additional ideas that might help clarify how to access additional formatting tools: tinymce-more.png and tinymce-more-2.png.

#3 @ahansson89
5 years ago

I think this is would be a great improvement!

#4 follow-up: @kungtiger
5 years ago

@melchoyce modifications would not involve a too big a change in terms of HTML.
Yet I do not reckon it enough since its still a button like all the others.
There is no clear and intuitive distinction between a button involving formatting and one for UX.
Preferably: the button toggling fullscreen is clearly set apart and placed under those tabs switching from WYSIWYG to HTML.
It's simply a matter of replacing the icon and adding a float to left or right.

#5 @iseulde
5 years ago

Totally agree that the icon is not intuitive. I like the dots. I don't really like making the toolbar bigger for this.
I'd also try to find a different description. "Toolbar toggle" doesn't tell me much. Does it make the toolbar disappear? "Toggling" is also such a typical computer term. I'm not actually suggesting this exact description, but "More buttons!" would tell me much... more.

#6 @SergeyBiryukov
5 years ago

"More" has a strong association with the <!--more--> tag in my head :)

I like the second one (with the dots).

#7 in reply to: ↑ 4 @melchoyce
5 years ago

Replying to kungtiger:

@melchoyce modifications would not involve a too big a change in terms of HTML.
Yet I do not reckon it enough since its still a button like all the others.
There is no clear and intuitive distinction between a button involving formatting and one for UX.
Preferably: the button toggling fullscreen is clearly set apart and placed under those tabs switching from WYSIWYG to HTML.
It's simply a matter of replacing the icon and adding a float to left or right.

That's a very good point. Having an icon to open up a second row of tools right next to formatting is likely another reason people struggle to discover the kitchen sink toggle.

I like the simplicity version, but I'm worried it might still be unclear. I think it might be worth getting some user feedback. I'll try hacking together a short a/b survey.

Replying to iseulde:

I'd also try to find a different description. "Toolbar toggle" doesn't tell me much. Does it make the toolbar disappear? "Toggling" is also such a typical computer term. I'm not actually suggesting this exact description, but "More buttons!" would tell me much... more.

Agreed. "More Options" might not be a bad description.

Replying to SergeyBiryukov:

"More" has a strong association with the <!--more--> tag in my head :)

I didn't even think of that. Definitely not "More," then. :)

tinymce-more-3.png takes the ••• version and aligns it to the right, next to the DFW toggle.

#8 follow-up: @toscho
5 years ago

I don’t think that three dots are very intuitive. It looks like you can insert an ellipsis.

The typical "expand" symbol are either small plus sign that changes to minus in expanded status, or a triangle/arrow (▸) pointing to the right in closed status and down (▾) in open status.

Both are placed on the very left position in RTL contexts. Could this work?

#9 in reply to: ↑ 8 @kungtiger
5 years ago

Replying to toscho:

The typical "expand" symbol are either small plus sign that changes to minus in expanded status, or a triangle/arrow (▸) pointing to the right in closed status and down (▾) in open status.

I would not choose a plus/minus symbol as there is already a "Horizontal Line" option.

#10 @MikeHansenMe
5 years ago

I am a fan of the arrow next to dfw icon. I think the biggest issue is the placement and not the icon itself. Even the original icon on the right would be a huge improvement.

#11 @valendesigns
5 years ago

+1 for moving the original icon to the right.

#12 @Stagger Lee
5 years ago

"More" is not so good, reminds of excerpts functions and can confuse beginners.
There is no better icon in Dashicons. Maybe to check Font Awesome icons and use one of theirs as new one in Dashicons.

Maybe "plus", "minus" (inside grey circle) as standard accordion type are good choice. Icon as it is now me personally allways reminded on text formatting, dont know why.

Last edited 5 years ago by Stagger Lee (previous) (diff)

#13 follow-up: @iseulde
5 years ago

If we go for the dots, I think the button should stay where it is. The location tells you of what stuff you will get more. The dots should be next to the buttons that are relevant. I personally prefer the dots above any other solution so far.

@melchoyce, what are the results of the survey?

#14 @melchoyce
5 years ago

Survey results here: https://docs.google.com/spreadsheets/d/1jPNAvPKwM5Ut0dPVfHvbteWiBy66NQ-xVfo1ZTWn7OA/edit?usp=sharing

Haven't had a chance to really look at them yet, but I'll do that today.

#15 @melchoyce
5 years ago

And for reference, the images used for each option: https://cloudup.com/ciDqfU4xbeH

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


5 years ago

#17 @folletto
5 years ago

From the survey, with a rough counting, I see:

  • Arrow: 14 understand - 3 misled (82%)
  • Current: 9 understand - 16 misled (36%)
  • Dots: 25 understand - 4 misled (86%)

Which tells me that either Dots or Arrow would be a definite improvement on the current icon. I feel this would be a simple and notable improvement that we could do. And of course, if then we come up with even better solutions, that's great, but I'd still do this icon change right now. ;)

#18 in reply to: ↑ 13 @afercia
5 years ago

Replying to iseulde:

If we go for the dots, I think the button should stay where it is.

+1 for this :)

#19 @chriscct7
12 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

With Gutenberg now in core as of 5.0, large scale changes to the now "old" classic editor are not really in scope anymore. Closing as wontfix.

Note: See TracTickets for help on using tickets.