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?


Go to End
Reply


25 Posts   11383 Views

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

20 June 2007 at 11:41am

I've been experimenting with various ways to fix Usability Issue #13 "Important Buttons Not Noticeable Enough": http://www.elijahlofgren.com/silverstripe/important-buttons-not-noticable-enough/

Do you think I should change the buttons to look like the "Regular Buttons with icons" screen shot shown in the link above?

I think using the default button style would be more usable. However, it might not be as ascetically please. But usability is more important, right. ;)

Eagerly awaiting your feedback,

Elijah :)

Avatar
laktek

Google Summer of Code Hacker, 76 Posts

20 June 2007 at 12:05pm

Can't we continue with the current style with Button Icons ? I think that would be ascetically pleased and usable too.

Avatar
Willr

Forum Moderator, 5513 Posts

20 June 2007 at 1:48pm

I think the current style is what would work best. Read this article on why icons dont work for navigations (well buttons in this case) http://www.smileycat.com/miaow/archives/000603.php. - I think the idea of icons is nice but that space could be better used. If you clutter that area up with icons it might get a bit busy and reduce readability.

I would keep it the same style but add a hover effect to the background. Eg on hover instead of the gray change it to a darker grey or a color perhaps??

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

20 June 2007 at 2:35pm

> "I think the current style is what would work best. Read this article on why
> icons dont work for navigations (well buttons in this case)
> http://www.smileycat.com/miaow/archives/000603.php. -

Ok, after reading that. I guess adding icons was a bad idea. Live and learn.

>> I would keep it the same style but add a hover effect to the background. Eg on hover instead of the gray change it to a darker grey or a color perhaps??

Ok, I'll experiment with hover effect, and probably a push button effect through use of input.submit:active. See: http://www.themaninblue.com/writing/perspective/2004/04/28/

Thanks for the feedback,

Elijah

Avatar
Willr

Forum Moderator, 5513 Posts

20 June 2007 at 3:48pm

That looks like good idea.

Avatar
Sean

Forum Moderator, 922 Posts

20 June 2007 at 6:16pm

In terms of IE, it adds a lot of padding to them action buttons which looks different to Firefox...

Elijah, it would be good to get this sorted out too - if you need any help, here's a good write up on it: http://jehiah.cz/archive/button-width-in-ie-revised

Cheers,
Sean

Avatar
Markus

Google Summer of Code Hacker, 152 Posts

21 June 2007 at 2:06am

I think the problem of is not look of the buttons but the position.

I was searching them myself, I didn't expect them in the top right corner where normally only the minimize, maximize, and close buttons are.
I think it is nowadays common in every type of software to put buttons in the bottom right corner (just think about dialogs).

Alternatively I would suggest creating something like a toolbar below the header (left-aligned) like in all common applications.

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

21 June 2007 at 3:17am

> I think the problem of is not look of the buttons but the position.

> "I was searching them myself, I didn't expect them in the top right corner where normally only the minimize, maximize, and close buttons are.
I think it is nowadays common in every type of software to put buttons in the bottom right corner (just think about dialogs)."

Indeed, maybe moving the buttons would be a more complete fix for this usability issue.

The usability report's suggestion was:

"R: Alternatively consider moving them from within the menu bar to the top right of the editable portion of the window."

Sean, willr: What do you think?

Should the buttons be moved? If so, where?

Thanks,

Elijah

Go to Top