Re: [Usability] Button Layout in Dialogs, vertical button bar on the right?

[Matthew Thomas <mpt myrealbox com>]

Alan Horkan wrote:
> I've been playing around Adobe Photoshop and various other programs and
> noticed that quite a few of them place their dialog buttons on the right
> hand side of a dialog, in a vertical button bar.  I was thinking that if
> done carefully and consistently a developer could accomodate users who
> prefer that layout by programmatically moving the buttons from a
> horizontal row at the bottom of the dialog to vertical column on the right
> hand side.

Which arrangement should be chosen depends on the content of the dialog
or alert, and (occasionally) on the arrangement of other dialogs used in
conjunction with that one. If you always use one arrangement or always
the other you'll get some undesirable results, so it's not really
appropriate to make it user-configurable.

> I have long wondered if user interface designs get flipped around to
> accomodate the writing direction of the local culture.  My suspicion is
> that this doesn't happen and that there is not much infrastructure in
> place to make it easy to do this kind of systematic rearraranging.
>
> The layout with buttons on the right hand side seems to make better use of
> the available screen width.

That's true, but the usual horizontal arrangement makes better use of
screen *space*. Because buttons are shorter than they are wide, the
unused space in a column of buttons is more than the unused space in a
row of buttons.

> Some user interface designs like the
> gnome-theme-manager and various Find and Replace dialogs seem to end up
> using this kind of layout, putting buttons in a row on the right hand side
> rather than at the bottom, without it necessarily being completely
> intentional. I'm wondering if anyone can think of any justifcations for
> using this kind of layout and when it might be acceptable.
> ...

How about this:

    In some dialogs and alerts, the main action buttons should
    instead be arranged vertically starting at the top right corner.
    Because this arrangement consumes more screen space, use it only
    when any of these conditions are true.

    *   The dialog's or alert's height is more variable than its
        width. For example, if an expander controls visibility of
        debugging information in an error alert, the height of the
        alert will vary while the width does not. In cases like this,
        putting the buttons at the top right maximizes their
        stability of position, both absolutely and relative to the
        window edges.

    *   There are too many buttons to fit comfortably into a
        horizontal row. You should solve this problem another way if
        practical (for example, by using separate dialogs for
        unrelated tasks).

    *   This is the only way to fit the dialog's height into a small
        screen comfortably. You should solve this problem another way
        if practical (for example, by using tabs or secondary
        dialogs).

    *   Parent or child dialogs of this one also use the vertical
        arrangement. Being consistent with them allows for quicker
        navigation through the dialog hierarchy with a pointing
        device.

    When using this arrangement, place the primary action button at
    the top, followed by the "Cancel" button, then any other buttons.
    Do not place anything directly below the buttons, or they will be
    unnecessarily difficult to find at a glance. (If an expander
    controls visibility of some elements, these elements may extend
    below the buttons.)

Does that make sense, or is it waaaaay too much detail? :-)

--
Matthew Thomas
http://mpt.net.nz/