[Design Patterns] Save and Cancel

6 Feb 2008 - 7:42am
6 years ago
14 replies
2352 reads
SemanticWill
2007

Some input and thoughts would be appreciated.

For modal (and modeless) windows, pop-ups, and "lightbox" ajaxed pop-ups,
after a person has performed certain tasks, there are two options - commit
those changes or cancel the dialog window. What order is best? Mac OS X
orders them as Cancel | Save, whereas many windows and web applications
have them as Save | Cancel.

Is there published research on this out there? What are your heuristics?
Why? How has that worked for you? I would prefer real research, but
anecdotal is fine too :-)

--
~ will

"No matter how beautiful,
no matter how cool your interface,
it would be better if there were less of it."
Alan Cooper

-------------------------------------------------------
will evans
user experience architect
wkevans4 at gmail.com
-------------------------------------------------------

Comments

6 Feb 2008 - 7:52am
Maral Haar
2006

I would assume that whatever is the default (and preselected) choice
should be on the right as this is what the user will click quicker and
more intuitively. Based on the application, this might differ. In most
cases my assumption would be, that if the user opened the dialoge in
the first place, he wants to change something and proceed with saving
the changes. But in case of a security or safty relevant application,
changing something might be related with dangers, and in this case you
might want to avoid too fast user actions. Therefore you would
preselect "cancel" (so if accidently "enter" is hit nothing happens)
and you might also want to place the "save" button where a little more
attention is needed to click it.

This is all just based on my experience and thoughts, no research
included. (Apart from the fact that it is easier to hit a target in
the lower right than the lower left corner, but even for that I don't
have a reference at hand).

Maral

On Feb 6, 2008 1:42 PM, W Evans <wkevans4 at gmail.com> wrote:
> Some input and thoughts would be appreciated.
>
> For modal (and modeless) windows, pop-ups, and "lightbox" ajaxed pop-ups,
> after a person has performed certain tasks, there are two options - commit
> those changes or cancel the dialog window. What order is best? Mac OS X
> orders them as Cancel | Save, whereas many windows and web applications
> have them as Save | Cancel.
>
> Is there published research on this out there? What are your heuristics?
> Why? How has that worked for you? I would prefer real research, but
> anecdotal is fine too :-)
>
> --
> ~ will
>
> "No matter how beautiful,
> no matter how cool your interface,
> it would be better if there were less of it."
> Alan Cooper
>
> -------------------------------------------------------
> will evans
> user experience architect
> wkevans4 at gmail.com
> -------------------------------------------------------
> ________________________________________________________________
> *Come to IxDA Interaction08 | Savannah*
> February 8-10, 2008 in Savannah, GA, USA
> Register today: http://interaction08.ixda.org/
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

6 Feb 2008 - 8:00am
SemanticWill
2007

Good points - but mouse-centric - remember that a heavy keyboard user will
loath to use the mouse - and will use the "Tab" key to move from one form
element to the next - so they will arrive at the left action button first.
The locative aspect of Fitt's law doesn't apply because the model window is
in the center of the screen - not the bottom right-hand corner of the view
port.

- w

On Feb 6, 2008 7:52 AM, Maral Haar <maral.haar at gmail.com> wrote:

> I would assume that whatever is the default (and preselected) choice
> should be on the right as this is what the user will click quicker and
> more intuitively. Based on the application, this might differ. In most
> cases my assumption would be, that if the user opened the dialoge in
> the first place, he wants to change something and proceed with saving
> the changes. But in case of a security or safty relevant application,
> changing something might be related with dangers, and in this case you
> might want to avoid too fast user actions. Therefore you would
> preselect "cancel" (so if accidently "enter" is hit nothing happens)
> and you might also want to place the "save" button where a little more
> attention is needed to click it.
>
> This is all just based on my experience and thoughts, no research
> included. (Apart from the fact that it is easier to hit a target in
> the lower right than the lower left corner, but even for that I don't
> have a reference at hand).
>
> Maral
>
> On Feb 6, 2008 1:42 PM, W Evans <wkevans4 at gmail.com> wrote:
> > Some input and thoughts would be appreciated.
> >
> > For modal (and modeless) windows, pop-ups, and "lightbox" ajaxed
> pop-ups,
> > after a person has performed certain tasks, there are two options -
> commit
> > those changes or cancel the dialog window. What order is best? Mac OS X
> > orders them as Cancel | Save, whereas many windows and web applications
> > have them as Save | Cancel.
> >
> > Is there published research on this out there? What are your heuristics?
> > Why? How has that worked for you? I would prefer real research, but
> > anecdotal is fine too :-)
> >
> > --
> > ~ will
> >
> > "No matter how beautiful,
> > no matter how cool your interface,
> > it would be better if there were less of it."
> > Alan Cooper
> >
> > -------------------------------------------------------
> > will evans
> > user experience architect
> > wkevans4 at gmail.com
> > -------------------------------------------------------
> > ________________________________________________________________
> > *Come to IxDA Interaction08 | Savannah*
> > February 8-10, 2008 in Savannah, GA, USA
> > Register today: http://interaction08.ixda.org/
> >
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > Unsubscribe ................ http://www.ixda.org/unsubscribe
> > List Guidelines ............ http://www.ixda.org/guidelines
> > List Help .................. http://www.ixda.org/help
> >
>

--
~ will

"No matter how beautiful,
no matter how cool your interface,
it would be better if there were less of it."
Alan Cooper
-
"Where you innovate, how you innovate,
and what you innovate are design problems"
-------------------------------------------------------
will evans
user experience architect
wkevans4 at gmail.com
-------------------------------------------------------

6 Feb 2008 - 8:35am
SemanticWill
2007

Some more considerations:
what's most important? tab order or exit point?
tab order argues for the OK button being first (good for keyboard primary
cases - although you do make a good point saying that it can be
programatically changed) -- mouse primary scenarios might argue for Save or
OK to be to the right, as that's the place people are looking for an
exit/termination point.

Now -- to add once more twist to this pattern martini - align bottom left or
bottom right? Scan line dictates OK | Cancel bottom right - although again -
people look for terminus on bottom right - so why then do some IxDers place
them bottom left?

On Feb 6, 2008 8:30 AM, Julie Palmer <jpalmer at smc3.com> wrote:

> Ah...someone remembers us rodent-resistant keyboard users! Thank you so
> much for your consideration. :-)
>
> But I think you can eliminate the functionality concerns from this
> conversation. If desired, tab stops can be programmatically controlled
> to set focus on the default button following the last text field in the
> form.
>
> -----Original Message-----
> From: discuss-bounces at lists.interactiondesigners.com
> [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of W
> Evans
> Sent: Wednesday, February 06, 2008 8:00 AM
> To: Maral Haar
> Cc: IxDA Discuss
> Subject: Re: [IxDA Discuss] [Design Patterns] Save and Cancel
>
> Good points - but mouse-centric - remember that a heavy keyboard user
> will
> loath to use the mouse - and will use the "Tab" key to move from one
> form
> element to the next - so they will arrive at the left action button
> first.
> The locative aspect of Fitt's law doesn't apply because the model window
> is
> in the center of the screen - not the bottom right-hand corner of the
> view
> port.
>
> - w
>

--
~ will

"No matter how beautiful,
no matter how cool your interface,
it would be better if there were less of it."
Alan Cooper
-
"Where you innovate, how you innovate,
and what you innovate are design problems"
-------------------------------------------------------
will evans
user experience architect
wkevans4 at gmail.com
-------------------------------------------------------

6 Feb 2008 - 8:47am
Alexander Baxevanis
2007

On Feb 6, 2008 12:42 PM, W Evans <wkevans4 at gmail.com> wrote:
> For modal (and modeless) windows, pop-ups, and "lightbox" ajaxed pop-ups,
> after a person has performed certain tasks, there are two options - commit
> those changes or cancel the dialog window. What order is best? Mac OS X
> orders them as Cancel | Save, whereas many windows and web applications
> have them as Save | Cancel.

Actually there is 3rd option: apply the settings immediately, get rid
of the 'save' option and provide only a button to close the dialog or
go back. I think this is the best option unless the change has got
deep, irreversible effects, or there are a group of settings to apply
at the same time.

Many of the system preferences in Macs behave in such way, see for example:

http://www.appleinsider.com/print.php?id=3343

But at the same time, the Network Preferences pane has an apply
button, because changing these settings may result in something highly
undesirable (e.g. disconnecting from the network) and there is usually
a group of settings (IP, netmask, DNS etc.) that are frequently
changed as a group.

I don't have a good idea about the original question (about the button
order), but thought I'd bring in this alternative for the sake of
completeness.

Regards,
Alex

6 Feb 2008 - 8:50am
SemanticWill
2007

Ah yes Alex - good points - and I am trying to make sure that most
actionable things a human does on this app doesn't require an explicit
commit, submit action - but it does require thinking about a robust "Undo"
function built in, just in case the human changes their mind.

On Feb 6, 2008 8:47 AM, Alexander Baxevanis <alex.baxevanis at gmail.com>
wrote:

> On Feb 6, 2008 12:42 PM, W Evans <wkevans4 at gmail.com> wrote:
> > For modal (and modeless) windows, pop-ups, and "lightbox" ajaxed
> pop-ups,
> > after a person has performed certain tasks, there are two options -
> commit
> > those changes or cancel the dialog window. What order is best? Mac OS X
> > orders them as Cancel | Save, whereas many windows and web applications
> > have them as Save | Cancel.
>
> Actually there is 3rd option: apply the settings immediately, get rid
> of the 'save' option and provide only a button to close the dialog or
> go back. I think this is the best option unless the change has got
> deep, irreversible effects, or there are a group of settings to apply
> at the same time.
>
> Many of the system preferences in Macs behave in such way, see for
> example:
>
> http://www.appleinsider.com/print.php?id=3343
>
> But at the same time, the Network Preferences pane has an apply
> button, because changing these settings may result in something highly
> undesirable (e.g. disconnecting from the network) and there is usually
> a group of settings (IP, netmask, DNS etc.) that are frequently
> changed as a group.
>
> I don't have a good idea about the original question (about the button
> order), but thought I'd bring in this alternative for the sake of
> completeness.
>
> Regards,
> Alex
>

--
~ will

"No matter how beautiful,
no matter how cool your interface,
it would be better if there were less of it."
Alan Cooper
-
"Where you innovate, how you innovate,
and what you innovate are design problems"
-------------------------------------------------------
will evans
user experience architect
wkevans4 at gmail.com
-------------------------------------------------------

6 Feb 2008 - 8:30am
Julie Palmer
2007

Ah...someone remembers us rodent-resistant keyboard users! Thank you so
much for your consideration. :-)

But I think you can eliminate the functionality concerns from this
conversation. If desired, tab stops can be programmatically controlled
to set focus on the default button following the last text field in the
form.

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of W
Evans
Sent: Wednesday, February 06, 2008 8:00 AM
To: Maral Haar
Cc: IxDA Discuss
Subject: Re: [IxDA Discuss] [Design Patterns] Save and Cancel

Good points - but mouse-centric - remember that a heavy keyboard user
will
loath to use the mouse - and will use the "Tab" key to move from one
form
element to the next - so they will arrive at the left action button
first.
The locative aspect of Fitt's law doesn't apply because the model window
is
in the center of the screen - not the bottom right-hand corner of the
view
port.

- w

6 Feb 2008 - 9:18am
robfay
2007

I think there's a third option to consider. in addition to button
order and alignment, you can also make decisions about use of ui
treatments to designate primary and secondary emphasis. For example,
some applications will use more of a primary color button treatment
for the save/ok and a light gray - less emphasis - for secondary
actions like cancel. Also, some applications will use a button for
the action buttons and simply minimize the cancel by giving it
traditional hyperlink (blue underline text) ui for less emphasis.

Personally, I've been struggling not only with save and cancel, but
combining them with "previous" and "next" functionality for a
wizard. If you add these 2 to the mix, how would you order them?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=25587

6 Feb 2008 - 9:26am
SemanticWill
2007

The MAC User Experience Guidelines is very explicit on this Rob -

The order is:

-------------------------------------------------------
*[ FORM ]*

-------------------------------------------------------
*Previous* | *Next* *Cancel * | *OK*
-------------------------------------------------------

Imagine the above are buttons :-)

Not that it is the bible on interaction design - that's just their point of
view.

On Wed, 6 Feb 2008 06:18:06, Rob Fay <robfay at gmail.com> wrote:

> I think there's a third option to consider. in addition to button
> order and alignment, you can also make decisions about use of ui
> treatments to designate primary and secondary emphasis. For example,
> some applications will use more of a primary color button treatment
> for the save/ok and a light gray - less emphasis - for secondary
> actions like cancel. Also, some applications will use a button for
> the action buttons and simply minimize the cancel by giving it
> traditional hyperlink (blue underline text) ui for less emphasis.
>
> Personally, I've been struggling not only with save and cancel, but
> combining them with "previous" and "next" functionality for a
> wizard. If you add these 2 to the mix, how would you order them?
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=25587
>
>
> ________________________________________________________________
> *Come to IxDA Interaction08 | Savannah*
> February 8-10, 2008 in Savannah, GA, USA
> Register today: http://interaction08.ixda.org/
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
~ will

"No matter how beautiful,
no matter how cool your interface,
it would be better if there were less of it."
Alan Cooper
-
"Where you innovate, how you innovate,
and what you innovate are design problems"
-------------------------------------------------------
will evans
user experience architect
wkevans4 at gmail.com
-------------------------------------------------------

6 Feb 2008 - 9:33am
Jack L. Moffett
2005

Check out these threads from the archives:

http://www.ixda.org/discuss.php?post=15561
http://www.ixda.org/discuss.php?post=16084

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

It's not about the world of design;
it's about the design of the world.

- Bruce Mau

6 Feb 2008 - 12:30pm
Pankaj Chawla
2008

On 2/6/08, W Evans <wkevans4 at gmail.com> wrote:
> Some input and thoughts would be appreciated.
>
> For modal (and modeless) windows, pop-ups, and "lightbox" ajaxed pop-ups,
> after a person has performed certain tasks, there are two options - commit
> those changes or cancel the dialog window. What order is best? Mac OS X
> orders them as Cancel | Save, whereas many windows and web applications
> have them as Save | Cancel.

Expect for Mac OS you will find the Save|Cancel as the norm. So
depending on which platform you are developing I would say follow the
rules of the platform as people using that platform are intuitively
porgrammed to click the last button to exit without commits and mostly
the button on its left to exit with commits.

Just to give an example of how programmed people are; in a new product
we were doing we decide to move File->Import menu item to
Project->Import as our application had a notion of Project and Import
seemed like a functiomality that belonged to the Project. The outcome
was that we heard people complaining lost functionality as they
couldnt fine File->Import and nobody even looked under Project menu to
see if it was there. When we tried to explain to customers, the
response was "File->Import is programmed into us and we just want it
there, it might not be the right place but if we can find it there it
is the right place for us". And this was not a one customer response
but almost everybody had the same one. So the moral of the story is -
"dont change things that people have got programmed into even if they
dont make sense to our designer's brain :-)"

Cheers
Pankaj

6 Feb 2008 - 4:26pm
SemanticWill
2007

Thanks Jack - that helped alot - and although I was doing the right thing -
sometimes I forget why I was doing something the way I was doing it.
"I know there is some XXX that backs this up - but jeez I can't remember
what it was -- anyone see my glasses?"

Yeah - I am getting old.

On Feb 6, 2008 9:33 AM, Jack Moffett <jmoffett at inmedius.com> wrote:

> Check out these threads from the archives:
>
> http://gamma.ixda.org/discuss.php?post=15561
> http://gamma.ixda.org/discuss.php?post=16084
>
>
>
> Jack L. Moffett
> Interaction Designer
> inmedius
> 412.459.0310 x219
> http://www.inmedius.com
>
>
> It's not about the world of design;
> it's about the design of the world.
>
> - Bruce Mau
>
>
>
>
> ________________________________________________________________
> *Come to IxDA Interaction08 | Savannah*
> February 8-10, 2008 in Savannah, GA, USA
> Register today: http://interaction08.ixda.org/
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
~ will

"No matter how beautiful,
no matter how cool your interface,
it would be better if there were less of it."
Alan Cooper
-
"Where you innovate, how you innovate,
and what you innovate are design problems"
-------------------------------------------------------
will evans
user experience architect
wkevans4 at gmail.com
-------------------------------------------------------

7 Feb 2008 - 9:30am
Sven Kaemper
2008

Sorry, a little late, but maybe this one is also helpful: Primary &
Secondary Actions in Web Forms
(http://www.lukew.com/resources/articles/PSactions.asp)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=25587

8 Feb 2008 - 10:52am
bminihan
2007

I just ran into another example of programmed behavior.

In building the sign-in form for our web site, we have one of those "I agree
to the terms of service" links, with "terms of service" being a link to the
actual terms.

I put the checkbox on the right side of the link. My reasoning was if
you're tabbing through the form, filling it in, you'll "land on" the TOS
link first, can hit enter to pop it up (and perhaps even read it), then tab
to the checkbox to check it.

Several folks told me they had never seen the TOS checkbox on the right on
any other web site. I could have argued that "many other web sites are
inefficient", but my slight efficiency improvement wasn't really worth the
effort of digging my feet in and fighting about it. I've been in that
position many times before, and in the end, if it's just simpler to do what
people expect, even if it's slightly less efficient, I'm happy to give up
the ghost.

On the other hand, I was working on a theory and not established user
preference, so I tend to go where feedback takes me in those cases, as you
mention below.

Bryan
http://www.bryanminihan.com

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Pankaj
Chawla
Subject: Re: [IxDA Discuss] [Design Patterns] Save and Cancel

Just to give an example of how programmed people are; in a new product
we were doing we decide to move File->Import menu item to
Project->Import as our application had a notion of Project and Import
seemed like a functiomality that belonged to the Project. The outcome
was that we heard people complaining lost functionality as they
couldnt fine File->Import and nobody even looked under Project menu to
see if it was there. When we tried to explain to customers, the
response was "File->Import is programmed into us and we just want it
there, it might not be the right place but if we can find it there it
is the right place for us". And this was not a one customer response
but almost everybody had the same one. So the moral of the story is -
"dont change things that people have got programmed into even if they
dont make sense to our designer's brain :-)"

Cheers
Pankaj

8 Feb 2008 - 11:12pm
Carlos Celi
2006

Luke Wroblewski wrote an article you might find useful on applying action/submit buttons on a web form. Worth the read.

http://www.lukew.com/resources/articles/PSactions.asp

Syndicate content Get the feed