Improve the save button

[jonrz]

Improve the form and function of the save button.

Refer to this issue for discussion on the subject.

We are not looking to change the names.
The current names are clear, and all the Joomla user base is used to it.

Our focus is to improve form, so we can reduce the toolbar width, and keep all actions within just one click.

Consider these two options as starting points for our discussion about the matter.
save button #1
save button #2
save button #3

Also check this publish/unpublish button for reference on the concept applied to another button.

Files are on the tasks folder.

Feel free to clone the sub-folder if you want to try your hand at it. Please forgive me for the ugly code. This is just a basic prototype to start a conversation about the task.

After you have cloned the folder and done your changes, run it by adding the index.html complete URL after http://htmlpreview.github.io/?.

[infograf768]

We still don't get the Save and Close button which is really necessary.
Adding all these tiny icons in the button to click on to get whatever it is for is extremely confusing and hard to target imho.

[jonrz]

Save and close is there, second on the sequence.
I'm thinking about function right now. Tiny is just a matter of design.
Form follows function, and all that...

[brianpeat]

I was all for a drop menu, but this is an interesting way to get around that and combine buttons. I really REALLY hate that we have 2 or 3 buttons where one will do, so combining this way might help. I'd love to see how this can be applied to the other buttons (publish/unpublish, archive/unarchive).

[brianpeat]

I wonder if it might be clearer if you add one more icon, but that one is the same as the main button, so the Save AND the check mark are both "save", then figure out a new icon for Save and close. That way it could be more easily applied to other buttons (publish would have 2 icons, one for publish that's part of the big button, and one for unpublish). Just brain storming, but seeing that Check mark, makes me think "SAVE" and not "save and close"

[jonrz]

Silly me. Sorry.
How about this instead?
(added to the issue as the third example)

Paired actions can just become toggles, such as:

[brianpeat]

That's an option, but what does it do if I select a list of items and some are already published but others aren't? I need to be able to publish OR unpublish, so it can't just be a flip state like a toggle switch.

As far as the 3rd option, I like it, but the drawback we have now is in its default state the button looks super wide for now reason (the reason becomes apparent only after you hover it to see the longer button names). Not sure if that matters to anyone or not.

[jonrz]

That is for within the article edit.
For the list, publish/unpublish and other pairs can be done in the same way we did example 3, just with the red (un-X) at the far right of each button.

[brianpeat]

Ah you're right, your toggles threw me off. I suspect the toggles will be whatever the default bootstrap design is, unless WE get to customize that as part of UX. :)

[jonrz]

Most likely default, unless horrible.

What do you think of this for the list?

[brianpeat]

The problem with that one is, it doesn't (at first glance) look like it does the same thing UNTIL you finally hover the red X. It just confuses my brain seeing both of them next to each other. Not sure if there's a better way though.

[brianpeat]

I almost want an open eye closed eye icon for that.

[jonrz]

Feels too much like a toggle?
Force refresh to update. Did a color change.

[brianpeat]

are you asking if I think yours feels too much like a toggle, or are you saying my idea does?

The issue with yours is my brain doesn't know what to do with a check and an x next to each other. It's just weird. The X just screams "this is going to do something bad if you check it" even though a single hover tells you exactly what it's going to do. Is there an open eye/closed eye icon set in there somewhere we could test it with? I know font awesome has open eye and eye with a slash through it. That would certainly tell you exactly what it's going to do in one glance.

[brianpeat]

Another option is the do not enter icon instead of the X. I know the X is used currently in Joomla, but it's such a destructive connotation that I think it should be used only when you're closing or deleting something if at all possible.

[jonrz]

@brianpeat I'm asking.

Agreed on the X, it feels like a close/delete, but we should look for alternatives to the "forbidden" icon.
Open/closed eyes are definitely an alternative. I'll build later today when I have time.
Should I move this to GitHub so people can act upon the (ugly, damn ugly) code?

As for icon library, we are using font awesome as recommended by the production team.

[jonrz]

Added to the Tasks folder at https://github.com/joomla/joomla-ux/tree/master/tasks/Task_0019

Run by adding the index.html complete URL after http://htmlpreview.github.io/?.

Here is save number 3 as example.

[ericfernance]

Hey @jonrz - would this be the same desktop and mobile? I liked concept 2 with the actions at the top rather than the sides.

The concern I had was how compatible it would be with big fingers?

[jonrz]

@digitalgarage Eric, ideally, yes.

Concept 2 would require re-styling of the remaining buttons, which is not hard, but also not very desirable.

If you see 3, the icon size is already a bit bigger, and it can be improved.
Touch detection zones on mobile have improved a bit lately, though.

Of course, new ideas are more than welcome at this point.
I'd like to start testing at most a week from now though.

[ylahav]

I think that all these solutions / suggestion are problematic in touch screen and finger size...

[dcrabill]

For publish / unpublish, I like like the open / closed eye idea. The fa-eye-slash icon would work pretty well for unpublish IMO.

I agree to with ylahav that the save button ideas could be an issue for mobile. Firstly, because on a desktop you get the benefit of hover to further understand what the icon is, which you don't get on mobile. Secondly, because a misoriented finger aiming for "Save & Close" could cause an unintended New Article.

What about two different buttons with two functions each? Button 1 has a) Save [primary] and b) Save & Close [secondary]. Button 2 has a) Save & New [primary] b) Save as Copy [secondary].

Giving users the extra button might reduce confusion and unintended actions on touch devices.

[brianpeat]

Another option is to flip to drop menus on mobile. So that same button turns into a tap to view list, tap to trigger action. Honestly I personally don't even mind a drop menu on the desktop, though I'd want it to trigger on hover not on a click, making it pretty much as fast as a row of buttons would be with even less "discover" time to choose the one you want.