Beta 3: Cursor on Save

[urchindesign]

I still don’t see a change to the cursor on any of the buttons like Save, JS, add element etc… i.e. the cursor remains as the default instead of changing to the pointer one would expect from a button.

As a long time user of Pro who knows where the save button is I still wondered where you had moved the save button to. As a new user I can see many people struggling.

The fact that it is actually the save button that you can press is not obvious. Then when you hover over the “button” and your cursor doesn’t change it just creates confusion.

As a new user you are (1) going to struggle to find the place to save and (2) if you do happen to scroll over it you are going to have no idea you can actually click it as the cursor stays as the default.

New save button on hover

Old save button on hover

[kory]

Howdy, @urchindesign!

Thanks for writing in! This change to how the cursor functions is intentional. During the refresh of the UI, one thing I wanted to pay careful attention to was the HTML / CSS specs and more closely follow them as much as possible. One thing that this involved was ensuring that we were using cursors properly throughout the tool. If you review the official MDN documentation, you’ll see that pointers as cursors are reserved to indicate that something is a link. Additionally, there have been a lot of publications on this in recent years (below is just one such example):

Buttons shouldn’t have a hand cursor

My inclination for years has been to simply blanket apply cursor: pointer; to anything that was “clickable,” but as that article mentions, everything is clickable on the web. The more important thing is making sure we have strong indicators present for our users to display intent. With the update, when a change has been made and it goes to the yellow “alert” state to show this, hovering over the button will give it a hover color, and I’ve also gone ahead and updated the tooltip to hopefully be even more clear on the intent of this button when interacting with it:

As the goal of the builders is to function like an analog to other desktop apps that might be used in other design disciplines, we’re trying to bring more parity between those two worlds and their conventions.

One additional change I’ve made as well is ensuring that anything that truly is a link gets the proper cursor: pointer; style. I have added a base level style that ensure that any link with an href will receive this style as intended.

Thanks!

[urchindesign]

I hear you. Seems good…

[kory]

@urchindesign

[urchindesign]

I get what you are saying about the not changing the cursor. It is however still bothering me. I still think this “button” is going to cause issues. If you are really set on not changing the cursor I would go back to the word “Save”, then implement the different colours, the tooltip and perhaps the icons you are using.

Funnily enough the very documentation you sent me to uses the hand to show something is clickable. If you look at the CSS Demo where they show the various cursor options the samples are clearly not links but they update the cursor to the hand to show you can click the sample. When you hover over each of the items on the left side in the screenshot the cursor switches to the hand. The reset button also switches the cursor. Again this is a button and not a link. The same goes for almost all of Googles web pages time and again they use the hand to show something is clickable even though technically it is not a link.

[kory]

Howdy, @urchindesign. Thanks for your feedback and we will keep an eye on this. For now we are going to keep things as is, as this is an app context and not a webpage. The button in question has multiple pieces of additional feedback (color change when page is altered, color change on hover, help text on hover, et cetera), and after one interaction with the button, it will be understood it is the save. It will even be understood before clicking as the help text indicates this on hover.

Thanks!

[urchindesign]

No worries. Just bothers me … I get where you are coming from but I honestly think it is going to create confusion. As mentioned even just the word save is better for me than how it is now.

Anyway I’ll leave you guys to it. So far the new stuff is awesome and I can’t wait to check out the archive builder.

[alexander]

Hey @urchindesign,

We definitely appreciate the feedback. I know we’re kinda talking about two different things here, but as for the cursor pointer if it’s a sticking point for you there’s a way to customize it locally at least. There’s a Custom UI CSS tab under the Dev Console (enable in preferences) and you can just drop this in there:

.tco button, .tco a {
  cursor: pointer;
}

That should pretty much make all the “clickable” elements show the pointer instead. Should help if you’re looking for that extra bit of visual feedback. It’s unlikely at this point we’ll bring it back natively (won’t rehash the reasons Kory shared above) but this might be a good stopgap and a way to make the tool more personal to your workflow.

[urchindesign]

It bothers me but not that much

Definitely two things but part of the same. The fact that it is a save button just isn’t very obvious. The added tooltip helps but I’m more thinking about new people than myself. Think the struggle to find the save button is going to be real for new users.

But carry on with the important stuff —

[alexander]

Hi @urchindesign,

Thanks! We’ve actually been trying out some more ideas with the save button. Based on your feedback and just getting a general sense from others it’s likely that we’ll just go back to “SAVE” in text so it’s readily apparent.