Make navigation buttons more intuitive

[Robert Leach]

I think that graphically, the latest set of navigation buttons are aesthetically pleasing and an improvement, but it's hard to convey the function of the zoom to selection button graphically. I did a google image search to see what others have done and I came up with a few that could be inspiring. See attached.

What do you guys think?

[Robert Leach]

I mocked up a couple ideas:

[Robert Leach]

Usually, you see +/- vertically oriented. I'm not sure I like the full zoom-out icon, so perhaps the home button is better.

[Christopher Keil]

The outgoing arrow icon was what was implemented before. Didn't Anastasia recently suggest using a target icon similar to Google Maps? That's why I changed it.

[Robert Leach]

I was thinking about this issue, and about button & modifier-key conventions, especially when it comes to graphics applications. So usually, these modifiers modify actions something like this:

• shift: affects speed (in terms of navigation) or adds contiguous amounts of a selection
• command: goes to beginning/end (think of command-arrow) or enters commands or accesses menu options
• control: usually interacts at system level outside of application level
• option: usually does something "smart" or automatic (think option-arrow in text edit) or similar to command, but in a smaller context

Some people may not be used to these conventions, but I think they can guide our nav button functions and appearance. In thinking along these lines, I don't think we need a button to look like a "home" button. I think instead we can think of generic zoom in/out buttons and generic zoom toward/away buttons (to/from a selection). Thus, I think I tend to favor these buttons in this arrangement:

• Control shouldn't do anything
• Holding the command key should make all buttons slam to the navigational target (all the way zoomed in or out).
• Shift should make the generic +/- buttons faster (from 5% to 15%) and make the selections +/- buttons slower (animated in 2 seconds as opposed to 0.15 seconds).
• Option should make the generic +/- buttons zoom 50% and make the selection +/- buttons non-automatic/stepwise

I also think that repeated button presses are annoying, so let's make click & hold of a button do this:

• **generic +/- buttons: essentially re-presses the button ever half second
• selection buttons: nothing**

[Robert Leach]

@lance_parsons and I spoke about this and we would like to propose this:

Do away with the zoom to selection and home buttons and only have +/- in this configuration:

Then when command is held, the buttons behave the way the zoom-to-selection and home buttons do and their appearance would change to something like this:

The appearance of the zoom out with command is debatable. This would change my behavior suggestions above. Here's the general idea:

• Control shouldn't do anything
• Option makes zoom steps smaller or slower
• Shift makes zoom steps bigger or faster
• Command changes the buttons to animated zoom-to-selection/center-cell & animated full-zoom-out.
• Click-hold makes the button press repeat automatically

Here's how they would interact together:

Regular button clicks:

• Click: +/- buttons zoom toward/away-from center by 5% (normal zoom).
• Shift+Click: +/- buttons zoom toward/away-from center by 15% (fast zoom)
• Option+Click: +/- buttons zoom toward/away-from center by 2 rows & 2 columns (slow zoom)

Command button clicks:

• Command+Click: + button zooms fully to selection w/ animation and - button zooms fully out w/ animation. If nothing is selected, + button zooms fully to center cell with animation and - button zooms fully out w/ animation. (normal selection-zoom)
• Command+Shift+Click: + button zooms fully to selection w/o animation and - button zooms fully out w/o animation. If nothing selected, + button zooms fully to center cell w/o animation and - button zooms fully out w/o animation. (fast selection zoom)
• Command+Option+Click: +/- buttons zoom smoothly 5% toward/away from selection. If nothing selected, +/- buttons zoom smoothly 5% toward/away from center. (slow selection zoom)

Click-hold clicks:

• Click-hold: Repeated "Click" every half second (when applicable)
• Shift+Click-hold: Repeated "Shift+Click" every half second (when applicable)
• Option+Click-hold: Repeated "Option+Click" every half second (when applicable).
• Command+Click-hold: Nothing more than a single "Command+Click".
• Command+Shift+Click-hold: Nothing more than a single "Command+Shift+Click".
• Command+Option+Click-hold: Repeated "Command+Option+Click" every half second (when applicable).

[Christopher Keil]

I think most of this is fine but we should also have a double-click to zoom to selection if we remove the selection zoom button. I would disagree with removing the reset/ home button and hiding it behind a modifier.

UI elements for essential operations should always be in plain sight. Some users will not immediately know about the modifier keys and some people won't ever be bothered to try them no matter how much we let them know the functionality is there. In my opinion, the crucial functions need to be in plain sight at all times. Hiding too much functionality behind what amount to two buttons can be very confusing.

[Robert Leach]

That's a good point. Lance and I actually discussed that a bit and decided we liked the simpler/cleaner interface, noting that users tend to be familiar with command-clicks and other modifiers, especially if we change the button icon when the modifier is down. It's debatable though - possibly worth discussing at the next meeting. If we keep the selection/home buttons and treated each behavior above that contains command as an instance of clicking one of those buttons, do you like those behaviors? Which behaviors of the above did you like?

BTW, that gives me a thought. Do we have the home button on the keyboard mapped to the home function? I haven't tested that.

[Christopher Keil]

I actually do like all of the behaviors but we have to be careful to not make it too simple and end up leaving things out that need to be there. At the very least I would keep the reset button and implement double click to zoom. That is something people would try.

The Home button has been implemented for setting the scrollbars to 0 (which scrollbar depends if a modifier is pressed). Together with PgUp/ PgDown. That was #40.

[Robert Leach]

Oh yeah, that makes sense: home keyboard button sets the scroll... Perhaps command-home to zoom out?

You know it's funny, If we were to keep one of the two, I'd go with the selection button because zooming out all the way can be achieved with repeated clicks of the minus button. I would think that people would at least try click-hold, shift-click, and possibly even command-click intuitively.

In the case of the selection button, it's a completely different behavior that wouldn't be as intuitive to discover by trial and error.

[Anastasia Baryshnikova]

I agree with Chris: modifier keys etc. can be shortcuts but they can't replace the basic UI. If you don't use Treeview everyday, you'll forget all the combinations but you should still be able to do the basic operations, like navigation.

[Robert Leach]

OK, good points. Though if we keep all 4 buttons, I'd still vote for a configuration more like what you see in map apps, with +/- vertically aligned:

And I think the modifier behaviors (where "command" would specifically refer to the sel/home buttons) will be pretty cool.

[Robert Leach]

Refined the title of the issue to reflect the more broad scope of the discussion in the comments.

[Robert Leach]

So I haven't gotten a go-ahead on the button appearance change ideas I've pasted thus far. I'm going to move forward with the modifier key suggestions that seem to have been favorably received. In the meantime, I mocked up a few more ideas for the buttons. My main concern is with the intuitiveness of the zoom to selection button and the configuration. Here are 5 examples. Let me know if you like any of these:

[Anastasia Baryshnikova]

How about something simple like this? (The blank button would have the "home" icon, i just didn't have time to draw it)

[Robert Leach]

Yeah, I think that the dotted line conveys the functionality of the button well. I still internally debate what to put inside the dotted line. The "+" works for me. I'd initially thought of it with a "+", though the button will zoom out to a selection too, so I'd wanted to find something slightly abstracted. But there's not anything that I could think of that worked with my intuition and I think that the "+" will make more intuitive sense to users given that will be the vast majority of its usage.

Now where's the "like" button for comments? ;)

[Robert Leach]

So just to be thorough, here's the new plan for modifier keys that I'm starting to work on:

• Control shouldn't do anything
• Option makes zoom steps smaller or slower
• Shift makes zoom steps bigger or faster
• Command changes the buttons to animated zoom-to-selection/center-cell & animated full-zoom-out.
• Click-hold makes the button press repeat automatically

Here's how they would interact together:

+/- button clicks:

• Click: +/- buttons zoom toward/away-from center by 5% (normal zoom).
• Shift+Click: +/- buttons zoom toward/away-from center by 15% (fast zoom)
• Option+Click: +/- buttons zoom toward/away-from center by 2 rows & 2 columns (slow zoom)
• Click-hold: Repeated "Click" every half second (when applicable)
• Shift+Click-hold: Repeated "Shift+Click" every half second (when applicable)
• Option+Click-hold: Repeated "Option+Click" every half second (when applicable).

zoom-selection/home button clicks:

• Click: zoom-selection button zooms fully to selection w/ animation and home button zooms fully out w/ animation. If nothing is selected, zoom-selection button zooms fully to center cell with animation and home button zooms fully out w/ animation. (normal selection-zoom)
• Shift+Click: zoom-selection button zooms fully to selection w/o animation and home button zooms fully out w/o animation. If nothing selected, zoom-selection button zooms fully to center cell w/o animation and home button zooms fully out w/o animation. (fast selection zoom)
• Option+Click: Both buttons zoom smoothly 5% toward/away from selection. If nothing selected, both buttons zoom smoothly 5% toward/away from center. (slow selection zoom)
• Click-hold: Nothing more than a single "Command+Click".
• Shift+Click-hold: Nothing more than a single "Command+Shift+Click".
• Option+Click-hold: Repeated "Command+Option+Click" every half second (when applicable).

[Robert Leach]

I have added the modifier keys to the buttons, except for those involving click & hold. I'd gotten it to generally work, but the repaints were not happening as expected, resulting in varying degrees of jerky zoom-action. I spent quite awhile trying to figure out how to stop that behavior, but it was too complicated and I figured it wasn't worth it. I have removed myself from this ticket, as I'll leave the button configuration/appearance to someone else.

[Christopher Keil]

I have switched up the icons as discussed and rearranged the nav button layout to the square form. If someone is not happy with the icons, just reopen...

[Robert Leach]

Issue #68 was marked as a duplicate of this issue.

[Robert Leach]

Merged to master.

[Robert Leach]

Removing milestone: Navigation (automated comment)