How Many Buttons Is Enough?

[dlyons]

 How many buttons are in this screenshot of the Canvas RCE? Really look and take a count before you read on.
.
.
.
.
.
.
.
.
.
.
Did you say 20, or did you count all 30? Or did you think it was 34 because you treated every button with a chevron as two buttons because you know most of the ones with chevrons are split buttons?

For a lot of you this may seem like no big deal. I mean, hey? Google Docs and O365 use split buttons! But only sometimes? Some buttons are split and others aren't, and weirdly it's not even consistent app to app. And that brings us to the first problem: Consistency. For anyone who has internalized this behavior it's typically not a big deal but it must be learned. Which buttons are split and have "two" behaviors, and which go directly to a menu no matter where you click?

Consistency isn't automatically the right thing to do. If the cognitive load is low enough and it is for a good enough reason it can be worth breaking consistency. I'm not convinced this is one of those cases, but it's worth noting that there is more finesse to it then following the Rules Of Design™️. Knowing where to click brings us to our second problem: Actually Clicking.

 Looking at that GIF (pronounced like "Gift") again it doesn't look like that tiny cursor has any trouble hitting the desired part of the button. As long as I know where I want to click it should be easy, right? No, of course not! No one writes a leading question like that innocently. Split buttons are designed for a world of "high-precision pointing devices" (i.e. mice and trackpads) which mobile devices are notably lacking. Even on laptops and desktops, some users have fine-motor limitations, or only use the keyboard so "just learn how it works" doesn't serve that group very well. The solution may be as simple as "don't use split buttons anymore" but there are other options as well.

Where do we go from here? We're still figuring that part out! I've already spoken with many of you, and many more of you have taken surveys and provided feedback on designs. Some of you may even prefer things the way they are now and don't want a change, even one as seemingly small as split buttons. I hope this post helps to illustrate how much thought and care has to go into even the tiniest decisions to find a design solution that works best for everyone.

[chriscas]

Hey @dlyons ,

Thanks for prompting a discussion on this topic!  As ad admin who trains faculty, even I have been caught out clicking the wrong spot on the icons with chevrons.

I'm really unsure what the ultimate answer is here.  I know Instructure wants to have a clean/minimal looking UI in Canvas wherever possible.   When going that direction, it usually results in the users having to make far more clicks to get to the option, which is not a good experience either.  Factoring in screen size is also a huge issue on the web.  In my office, I have 2 24" monitors side by side, where there is so much unused whitespace it's crazy.  But then at home I have a 14" MacBook and my iPhone, which are too small to even display the full row of icons on the new RCE as it stands.

I think I personally preferred the "old" RCE, where there were more icons, but not as much chevrons or dual-use ones (if that makes sense).  Not sure that Instructure would ever go back that route though.  I also know the size of the icons is important for touch devices (can't be too small), but at the same time huge buttons drive me nuts as they only end up hiding things or wasting a lot of space on smaller non-touch screens like my MacBook.

Maybe someone will pop in here with a magic solution that would make everyone happy (ha ha ha, as if that's even possible).

-Chris

[dkpst5]

It's definitely a tough issue. This is why Office 2007 and newer's Ribbon bar is so successful. It reduced such menus, but also fit with screen sizes with dynamically-resizing buttons, and organizing into multiple rows within a bin helps to expose more direct buttons without the tool bar getting confusing and losing people.

The "quick fix" for the upload/media/documents is to make the button always show the menu. I find I and people I train rarely want the upload compared to other options in the menu. The same is probably true of the lesser-used formatting buttons (super/subscript, reading order). Font and background color, and list are a different story where the single click seems to be used often once the drop-down selector has been set.

Personally, I feel it's a fool's errand to try to have a hard restriction to one toolbar row. While the old RCE's toolbars were rather messy, it's OK to go to two rows, so long as you organize them well. Try binning (like Office ribbons) so an area goes to 2 rows but remains "2nd from left bin".

(My quick MS Paint mock-up doesn't keep the grid. You should keep the grid.)

[Sylvia_Ami]

There are so many factors in this decision, I don't envy your position. Overall, if one icon represents multiple commands, eliminate the dual action. When users click on an icon, the menu should be displayed.

In my experience training faculty, it is confusing when clicking on an icon does one thing and then clicking on the little tiny V symbol gives you a menu. Even on a desktop device, some users have trouble clicking in that tiny area to get the drop down menu.

I was just looking to see how Microsoft handles this issue and they are not consistent. In some cases, the icon (with the "V") next to it results in one action only. But in other cases, the icon and the "V" result in different actions.

[aeagle]

Several commands are repeated within the RCE and the Edit/View/Insert/Format/etc menus; streamlining these may be a solution to decluttering the RCE? With the accessibility concerns, is an assistive device better able to navigate the Edit/View/Insert/etc menus?

Otherwise, is it within the realm of possibilities to allow users to customize their own RCE's? That would allow for fewer commands and larger buttons for faculty who may need them, but still keep the option of having all of the commands there for faculty who may need them?

[dlyons]

@dkpst5, there is definitely some merit to that design. If we ever did that we'd probably still only want a single row on smaller screens to allow for more content real estate. I appreciate the suggestion and the mockup!

We could always go full Internet Explorer 6? 😉

[adamwarecx]

That got a giggle out of me @dlyons ^

[JamesMcCrary]

I would suggest that instead of looking at how many buttons, giving educators options to customize the RCE. You could have the staples, such as typography emphasis, etc, but giving them permissions to add a quick button, such as Youtube, would be extremely beneficial in development.

[amandarosenzwei]

I believe allowing customization of what can be added to each button chevron is useful. I use strikethrough a lot but I have to go to the format drop down menu that is found above the buttons. 

If we can have options like in MS word/PPT when you determine what is on the quick access guide or ribbon through customization.

[cvalle]

Great article. I do have a serious concern though about how you pronounced "GIF". It sounds like “Jif peanut butter” not like “Gift”. This is a fact and cannot be negotiated! 🤣😋

[BethCrook]

@dlyons Your IE6 is hilarious.  And "Gif" vs "Jif" makes me want to pull Mr. Gif himself, Dave Dick, into the conversation.  He has a very strong opinion on the matter in many InstructureCon presentations. 😂

Sadly, I have no solutions to the the crazy RCE.  Although I do wonder if we would have the ability to customize x amount of icons onto the bar as we are allowed to do now with the 2 LTI tools buttons (THANK YOU FOR THIS btw!!).