Button placement on pages / windows.

24 Sep 2010 - 10:52am
3 years ago
7 replies
2184 reads
gyrostu
2010

There does not seem to be any one standard with the placement of buttons for windows and pages. According to the 'Apple Human Interface Guidelines' and the 'Windows User Experience Interaction Guidelines' , Windoze and Apple right-justify buttons on dialog windows. However their order is reversed. For Apple, the 'action button' is the right-most button. For Win, the 'commit' button is left-most. And to make matters less consistent, I see buttons left-aligned on web pages.

I suppose right-alignment makes more sense for left-to-right reading languages. This also is consistent with the F-pattern that people read pages. However, are buttons to the right of the page closer in proximity to right-handed users?

The impetus for this thought (or crisis) is that I am designing UIs with buttons left-aligned. I am left handed (using a left-handed mouse). Is this a better experience for me because the buttons are closer to the left of the screen? Would my right-handed users feel that right-aligned elements are closer to their mouse placements? Does left or right handedness effect cursor placements?

Please weigh in and let me know if you have had experience, researched or insight that might lead to a consensus?

Comments

24 Sep 2010 - 12:05pm
Diana Wynne
2008

The reason there isn't a standard is the Apple versus Microsoft copyright infringement lawsuit, which Apple somehow lost. Microsoft swapped the order to demonstrate it wasn't copying Apple.
Cross-platform web applications have made this inconsistency almost irrelevant, along with the fact that users don't always need a Cancel button--often they can just close the browser window, or go to a different web page. 
In my view, the most important aspect is making sure it's easy to tell the desired action button from the other less important buttons, so users don't accidentally buy airline tickets or edit a patient's health information. That along with making sure the action button is in view so users don't unintentionally abandon the page without saving (or buying) anything, which can be a challenge with longer forms.
Luke W's designs for web forms have helped popularize the design pattern of using a pushbutton for the main action and a link for Cancel. 

Diana

24 Sep 2010 - 1:56pm
Adam Korman
2004

Luke W's designs for web forms have helped popularize the design pattern of using a pushbutton for the main action and a link for Cancel

He also makes the case for left aligning the primary action (commit button) with form fields and placing secondary (cancel, etc.) buttons to the right.

24 Sep 2010 - 2:20pm
gyrostu
2010

Jakob did a study in 2010 that shows that shows that users spend 'more than twice as much time looking at the left side of the page as they did the right'. Maybe this is an argument for left-justifying the buttons as well. His study is more about proving that people browse sites the same way they read (i.e. left-to-right OR right-to-left). His statistics support his point of view that sites should stick to convention. I wonder if the same is true for button placement. If so, then its a bit contradictory as right-justified buttons are then not conventional… though Win and Mac put them to the right. Does that become convention because we are accustomed to that placement?

It seems like it’s an argument supporting Win's placement of putting the 'active' button first (left-to-right). But then Apple's placement is more consistent as the action button will always be the right most no matter how many options there are.

I guess I have to argue that buttons should be left-aligned with the active button first. This of course would be opposite for right-to-left reading sites.

Anyone agree? Have you heard of any studies to support this??

6 Oct 2010 - 7:05am
Luis Santa-Maria
2009

Regarding the topic of conventions, there is some controversy and some studies go against the idea that conventions should be followed "always and forever" under risk of major usability problems if not followed.

Some studies regarding menu placement showed no difference between the conventional (left) and non conventional positions.

Here are some links for an interesting read.

http://www.dcs.bbk.ac.uk/lo/fi/learningresources/session6/pdp/webnavigationarticle.pdf (Kalbach & Bosenick)

http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.123.3761&rep=rep1&type=pdf (McCarthy et. al)

Since this was also the topic of my PhD research I have also posted a little comment on my blog if you would like to have a look:

http://useabilitynow.blogspot.com/2009/09/several-web-usability-authors-recommend.html

I hope this helps to give another perspective to the discussion.

Luis Santa Maria

On 25 Sep 2010, at 06:44, kw wrote:

> Jakob did a study in 2010 [1] that shows that shows that users spend 'more > than twice as much time looking at the left side of the page as they > did the right'. Maybe this is an argument for left-justifying the buttons as > well. His study is more about proving that people browse sites the same way > they read (i.e. left-to-right OR right-to-left). His statistics support his > point of view that sites should stick to convention. I wonder if the same > is true for button placement. If so, then its a bit contradictory as right-justified > buttons are then not conventional… though Win and Mac put them to the right. Does > that become convention because we are accustomed to that placement? > > It seems like it’s an argument supporting Win's placement of putting the > 'active' button first (left-to-right). But then Apple's placement is more > consistent as the action button will always be the right most no matter how > many options there are. > > I guess I have to argue that buttons should > be left-aligned with the active button first. This of course would be opposite > for right-to-left reading sites. > > Anyone agree? Have you heard of any studies to support this?? > > (((P

25 Sep 2010 - 4:59am
holger_maassen
2010

I am not sure whether this research ...

http://surl.org/usabilitynews/31/web_object.asp

or that discussion ...

http://boxesandarrows.com/idea/view/13639#comment_13644

might be helpful for you.

26 Sep 2010 - 2:05am
burlapdesign
2010

Action buttons should be placed in the next "logical" step of the flow of form submission. (Luke Wroblewski speaks about this). Same idea should probably be applied to dialog boxes. Also there is the idea of sensible "defaults" where the least destructive or primary action is highlighted depending of the context.

On Sat, Sep 25, 2010 at 5:33 AM, holger_maassen <holger.maassen@gmail.com> wrote:

I am not sure whether this research ...

http://surl.org/usabilitynews/31/web_object.asp [1]

or that discussion ...

http://boxesandarrows.com/idea/view/13639#comment_13644 [2]

might be helpful for you.

27 Sep 2010 - 11:53am
smitty777
2010

I think that burlapdesign started to touch on the right way to think about it.  Think about it from the perspective of the task flow, but also from the perspective of the flow of the eyes as the user performs the tasks.  Eyetracking studies show the ubiquitous E or F pattern for English reading users, as this is the usual task flow and prime real estate.  This also means that the hard and fast rules might not apply if you're not using a typical web page or if you are creating something for a non-English user (or at least someone who reads in a different direction than English).  

I am intrigued by your comment about being left-handed, though.  It would seem that this shouldn't make a different from a task flow perspective.  But are you saying that cognitively you might view the buttons differently?  (BTW, I'm mouse ambidextrous.  seriously). 

cheers, 

 

Bill

Syndicate content Get the feed