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   11291 Views

Avatar
elijahlofgren

23 June 2007 at 4:21pm Google Summer of Code Hacker, 222 Posts

> 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?

Thanks for pointing that out. I also realized that the buttons needed to be moved lower, because the second gap where I had placed them only occured where there were nested tabs. I moved them lower so they will work in all sections of the CMS.
Example of why I had to move the buttons lower down the page: http://www.elijahlofgren.com/silverstripe/images/usability/13-ff2-reason-very-bottom.png

Fixed. New before and after screenshots and patch: http://www.elijahlofgren.com/silverstripe/images/usability/13-buttons-bottom-right-lower-smaller-before-after-screenshots.html

>> 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?

They are always fixed in the correct position because of the use of position: absolute. :)

Thank you very much for your encouraging and helpful feedback,

Elijah

Avatar
Sam

24 June 2007 at 1:00pm Administrator, 685 Posts

Good work, Elijah.

One small point - the "tick" icon shouldn't have a green background anymore - would you be able to clean this up? :-)

Avatar
Tim

25 June 2007 at 10:57am Core Development Team, 201 Posts

Agree with there changes of position. Some other enchantments I feel would be good.

1) Change “Save Draft” and “Publish” wording and functionality as described here, http://www.silverstripe.com/silverstripe-development/flat/626?showPost=901

2) Make the buttons more “responsive” – this can be achieved with mouseovers.

3) I think the buttons should also change when the user has click on them, for example when the user clicks on “save” the save text on the save button should change to “saving…” with a little Ajax save animation or something

Avatar
elijahlofgren

27 June 2007 at 5:49am (Last edited: 27 June 2007 5:50am), Google Summer of Code Hacker, 222 Posts

> One small point - the "tick" icon shouldn't have a green background anymore - would you be able to clean this up? :-)

Done. :)

> 1) Change “Save Draft” and “Publish” wording and functionality as described here, http://www.silverstripe.com/silverstripe-development/flat/626?showPost=901

Done. It even involved a net reduction in code: http://www.elijahlofgren.com/silverstripe/patches/Usability-Issue-13-Publish-to-Save-and-Publish-cms-sapphire-gsoc-r37424.patch

> 2) Make the buttons more “responsive” – this can be achieved with mouseovers.

I ended up simply making the background color change to white on hover (except for delete buttons, the background changes to red). We could change it to green if you think that would be better. However, I'm not sure how that would look.

> 3) I think the buttons should also change when the user has click on them, for example when the user clicks on “save” the save text on the save button should change to “saving…” with a little Ajax save animation or something

I plan to work on this today. :)

Enjoying coding,

Elijah

Avatar
Tim

27 June 2007 at 11:06am Core Development Team, 201 Posts

Great stuff :-)

Avatar
elijahlofgren

27 June 2007 at 3:06pm Google Summer of Code Hacker, 222 Posts

I've made it so that the "Save" button text changes to "Saving..." and the "Save & Publish" button changes to "Publish..." while the request is being sent to server: http://www.elijahlofgren.com/silverstripe/patches/Make-Button-Text-Change-on-Submit-cms-gsoc-r37464.patch

Tomorrow I plan on changing the button tags from 'input' to 'button' so I can add a loading icon. In addition, I'll try to add this effect to all the other action buttons. :)

Avatar
Markus

27 June 2007 at 9:37pm Google Summer of Code Hacker, 152 Posts

Good work, but a small thing I noticed is that the bottom border of the tabs in the "File & Images" and "Security" section is now behind the buttons.
The problem doesn't exist in "Site Content" (haven't tested "Newsletters" and "Statistics").

This happens only in IE7, in Firefox everything is fine.

Avatar
elijahlofgren

28 June 2007 at 1:11pm Google Summer of Code Hacker, 222 Posts

> Good work, but a small thing I noticed is that the bottom border of the tabs in the "File & Images" and "Security" section is now behind the buttons.
Thanks! Fixed in r37498.

That bug caused me to decide to work on moving the 'Delete' and 'Move Files' buttons in the File & Images again. I would love feedback on my changes here:
http://www.silverstripe.com/google-summer-of-code-forum/flat/1607?showPost=1791#post1791

Thanks,

Elijah