Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Putting Icons on Action Buttons to make them more noticable: Good idea?


Reply


25 Posts   11376 Views

Avatar
Willr

Forum Moderator, 5513 Posts

21 June 2007 at 2:56pm

Well Im tempted to try bottom right.. Heres my quick little idea
http://willr.co.nz/wp-content/files/saveButtons.png . The buttons are much bigger as theres alot more space down there. Me and sean will catch up in the office and talk over some ideas.

Cheers,
Will

Avatar
Sean

Forum Moderator, 922 Posts

21 June 2007 at 3:10pm

Edited: 21/06/2007 3:11pm

The idea of moving them as shown in willr's image is a good idea, presently as they are it's confusing to have them at the top right, so the bottom right is probably a lot easier to view (as long as they're always in a prominent position to be clicked, and not ever hidden from view).

Cheers,
Sean

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

21 June 2007 at 3:24pm

Thanks for your suggestions Will and Sean!

Tomorrow, I'll try to move the buttons to the bottom right in addition to adding a push and hover effect. I'll also try working on integrating Steve's "Tree Control Tweaks" :)

Good night,

Elijah

Avatar
Sam

Administrator, 685 Posts

22 June 2007 at 8:50am

Edited: 22/06/2007 8:52am

I think that one of the problems with the current buttons, as well as the position, is the fact that they don't look very "buttony". Could we perhaps get the design for these looking a bit more like the raised, rounded box that people associate with buttons on forms?

Obviously, there are challenges fitting any new think into the UI, but I'm concerned that we're going to frustrate users if we keep changing the placement of buttons, so we need to get it right the first time.

Additionally, the current placement of the buttons is where status messages normally appear. Elijah, maybe we need to move the status messages to appear on the bottom left, in the white gap that the buttons create. Maybe the green background box isn't so appropriate now; maybe we just want to write red or green text on the white background, with some kind of icon next to it?

Will, if you have a spare moment (yeah, right!) do you perhaps want to mock up the full width of the bottom section with a success message shown by the buttons - to see if it works?

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

22 June 2007 at 10:17am

Edited: 22/06/2007 10:34am

Last night, I noticed the buttons that WordPress uses:
http://www.elijahlofgren.com/silverstripe/images/usability/13-wordpress-button-example.png

They have a double border to give them the raised appearance of buttons. In addition, the important action, "Save", is bold. I wonder if using a style like that would be good.

> Elijah, maybe we need to move the status messages to appear on the bottom left, in the white gap that the buttons create. Maybe the green background box isn't so appropriate now; maybe we just want to write red or green text on the white background, with some kind of icon next to it?

I think moving it to the bottom left is a good idea because that is where the status bar in most applications is located. Would we want to make the status message disappear after a while like it does now, or alway show until replaced by a new status message?

Edit: In addition, WordPress makes dangerous buttons turn red on hover: http://www.elijahlofgren.com/silverstripe/images/usability/13-wordpress-delete-button-hover.png
I wonder if doing something like that would be a nice usability enhancement.

Avatar
Sam

Administrator, 685 Posts

23 June 2007 at 11:58am

I agree the use of red on hover is a cool idea. Make it so! :-)

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

23 June 2007 at 3:05pm

Edited: 23/06/2007 3:07pm

Today I experimented with moving the buttons to the bottom right and the status messages to the bottom left. Here's how it turned out:
http://www.elijahlofgren.com/silverstripe/images/usability/13-buttons-bottom-right-status-left-before-after-screenshots.html

What do you think?

I'll commit the following changes to the gsoc branch if you think the above looks good:
http://www.elijahlofgren.com/silverstripe/patches/Usability-Issue-13-Move-Action-Buttons-To-Bottom-Right-Red-Hover-Delete-cms-jsparty-sapphire-gsoc-r37304.patch

> I agree the use of red on hover is a cool idea. Make it so! :-)

Done. :) In the above patch, I've added red on hover for the "Unpublish" and "Cancel Draft Changes" buttons along with a the nice push button effect that WordPress uses when a button is clicked.

Awaiting your feedback,

Elijah

Avatar
Sean

Forum Moderator, 922 Posts

23 June 2007 at 3:13pm

Elijah, that's fantastic work. I notice you made them look like the Wordpress one's which is good. One small piece of criticism I have is that the font size is a little big. Perhaps if it was more consistent with the font size on the tabs it would look better?

The hover effect is great. I totally agree with Sam on this one!

All in all though, I think it's a great change. Elijah, are the buttons always fixed in that position? For example, if the TinyMCE editor got larger, and the page required scrolling, would the buttons be in a fixed position, or would they be at the bottom once you've scrolled all the way down?

Cheers,
Sean