Label alignment left or right?/Button alignment

2 Apr 2007 - 9:02am
7 years ago
3 replies
2162 reads
vcagwin
2007

Sylvania wrote:

Which OS(es) are you targeting?
On Windows, the general guideline is to left-align labels; on Mac,
labels should be right-aligned. These are guidelines, of course, and not
hard-set rules, but software tends to look more polished when it follows
the visual styles of the OS on which it runs.

Here's my question:
On a similar topic, what about buttons? Apple guidelines say to right
align the function that is mostly used (unless it is going to cause the
user to lose all their work), but on Windows it's the opposite. Has
anyone read or conducted a study that proves that buttons should be
"Cancel | Save" or "Save| Cancel"?

It seems that the way we have worked around this problem is to color the
button that will be mostly used as well will be committed upon hitting
the "enter" key for both platforms.

Comments

2 Apr 2007 - 9:36am
Jack L. Moffett
2005

On Apr 2, 2007, at 10:02 AM, Cagwin, Virginia wrote:

> On a similar topic, what about buttons? Apple guidelines say to right
> align the function that is mostly used (unless it is going to cause
> the
> user to lose all their work), but on Windows it's the opposite. Has
> anyone read or conducted a study that proves that buttons should be
> "Cancel | Save" or "Save| Cancel"?

This is from a short paper I wrote for a customer several years ago.
They wanted an explanation as to why the web app UI I had designed
did not look exactly like a Windows desktop application.

“Cancel“ / “Okay” Button Placement
There has been a long-standing debate about the placement of these
buttons. You can see a summary of one such argument here: http://
mail.gnome.org/archives/usability/2002-June/msg00009.html It
basically comes down to two differing philosophies. One philosophy is
that because we read from left to right, top to bottom, buttons
should be placed left to right in order of importance, importance
being how likely a button will be used. Following this rule, the
“Okay” button would be placed to the left of the “Cancel” button. The
second philosophy says that because we read from left to right, top
to bottom, “left” is understood as being “back” and “right” is
understood as being “forward.” This is why the web browser “back” and
“forward” buttons have arrows pointing left and right respectively.
As “Cancel” is a “back” action and “okay” is a “forward” action, the
“okay” button should be to the right of the “cancel” button. Then
there are further deliberations as to whether these buttons should be
right-aligned, left-aligned, centered, etc.

I subscribe to the latter philosophy, as it is more consistent. The
former philosophy suggests that if for some reason the “cancel”
button were more likely to be used on a particular screen, the
buttons would switch places. This is, of course, ridiculous, and no
interface that I know of actually does this. So, I strongly believe
that “cancel” always goes on the left, and “okay” always goes on the
right. I further suggest that they should be spatially separated to
lessen the chance of a user accidentally pressing the wrong one.

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

The World is not set up to facilitate the best
any more than it is set up to facilitate the worst.
It doesn't depend on brilliance or innovation
because if it did, the system would be unpredictable.
It requires averages and predictables.

So, good deeds and brilliant ideas go against the
grain of the social contract almost by definition.
They will be challenged and will require
enormous effort to succeed.

Most fail.
- Michael McDonough

2 Apr 2007 - 10:01am
sylvania
2005

Virginia wrote:

On a similar topic, what about buttons? Apple guidelines say to right
align the function that is mostly used (unless it is going to cause the
user to lose all their work), but on Windows it's the opposite. Has
anyone read or conducted a study that proves that buttons should be
"Cancel | Save" or "Save| Cancel"?

Interestingly, Vista is keeping the Save | Cancel pattern but is now colouring the default button blue, which is a change from their older OSes in which they seemed happy with the selection rect.

I'm not finding any studies on the placement of buttons, and am curious whether others know of any.
My gut tells me that the Cancel | Save pattern (Apple's way) is probably more effective, because the default button is in a more visible location (the first and last things on a form/page tend to be the most visible - a general design rule). I suspect this even more because I can see three main reasons Vista is now colouring the default button: aesthetics (possible), to look more like Mac (*grin* - umm...), or to solve some degree of problem with the visibility of the default button (seems likely).

Another interesting difference between Apple's and Windows' guidelines is that Windows favours standard labelling on buttons: OK/Cancel/etc., while Apple promotes descriptive button text: Cancel | Update Profile instead of Cancel | OK, for example. I prefer descriptive button text myself...

A big part of good design is knowing the "rules" and when/why/how to break them. A big part of *desktop* design (depending upon your genre, of course), is often looking like you belong on the platform on which you're installed. Unfortunately, these two ideas often conflict. Add a focus on usability and we all really earn our paychecks!

Cheers,
Sylvania

(Platform Agnostic)

2 Apr 2007 - 10:11am
plnii-lists at ...
2007

For a previous project, I did some research on prompts and could not find any published evidence supporting either arrangement of the Action & Cancel buttons.

Considering that people seem to not pay attention to prompts, I would suggest that you follow the standard for the platform on which the application with be used. Mac users expect Cancel first, whereas PC users expect the Cancel button to be lost. Violating these expectations may results in worse performance than the probably small differenence between the ideal layout and the other.

Paul

----- Original Message ----
From: "Dye, Sylvania" <S.Dye at TechSmith.com>
To: "Cagwin, Virginia" <Virginia.Cagwin at turner.com>; discuss at ixda.org
Sent: Monday, April 2, 2007 11:01:06 AM
Subject: Re: [IxDA Discuss] Label alignment left or right?/Button alignment

Virginia wrote:

On a similar topic, what about buttons? Apple guidelines say to right
align the function that is mostly used (unless it is going to cause the
user to lose all their work), but on Windows it's the opposite. Has
anyone read or conducted a study that proves that buttons should be
"Cancel | Save" or "Save| Cancel"?

Interestingly, Vista is keeping the Save | Cancel pattern but is now colouring the default button blue, which is a change from their older OSes in which they seemed happy with the selection rect.

I'm not finding any studies on the placement of buttons, and am curious whether others know of any.
My gut tells me that the Cancel | Save pattern (Apple's way) is probably more effective, because the default button is in a more visible location (the first and last things on a form/page tend to be the most visible - a general design rule). I suspect this even more because I can see three main reasons Vista is now colouring the default button: aesthetics (possible), to look more like Mac (*grin* - umm...), or to solve some degree of problem with the visibility of the default button (seems likely).

Another interesting difference between Apple's and Windows' guidelines is that Windows favours standard labelling on buttons: OK/Cancel/etc., while Apple promotes descriptive button text: Cancel | Update Profile instead of Cancel | OK, for example. I prefer descriptive button text myself...

A big part of good design is knowing the "rules" and when/why/how to break them. A big part of *desktop* design (depending upon your genre, of course), is often looking like you belong on the platform on which you're installed. Unfortunately, these two ideas often conflict. Add a focus on usability and we all really earn our paychecks!

Cheers,
Sylvania

(Platform Agnostic)

Syndicate content Get the feed