2 part button - industry standard?

25 Mar 2008 - 3:44pm
6 years ago
15 replies
1024 reads
Matt Nish-Lapidus
2007

This style button is pretty common, but usually the visual cues are
more obvious. Take a look at the main nav in Flickr and Facebook as a
couple examples.

On Tue, Mar 25, 2008 at 2:45 PM, Brett Ingram <bingram at pandora.com> wrote:
> Check out the "Add To Wish List" button at Amazon.com. It consists of
> 2 parts that can be clicked on. Does anyone if this has become some
> kind of "industry standard"? Also, any ideas where this kind of
> button first originated?

--
Matt Nish-Lapidus
work: matt at bibliocommons.com / www.bibliocommons.com
--
personal: mattnl at gmail.com

Comments

25 Mar 2008 - 5:13pm
Alexander Baxevanis
2007

This looks more like a drop-down menu to me :-/

On Tue, Mar 25, 2008 at 6:45 PM, Brett Ingram <bingram at pandora.com> wrote:
> Hi all,
>
> Check out the "Add To Wish List" button at Amazon.com. It consists of
> 2 parts that can be clicked on. Does anyone if this has become some
> kind of "industry standard"? Also, any ideas where this kind of
> button first originated?
>
> It doesn't seem very common to me. It doesn't seem particularly
> usable either, since it isn't that clear that there are 2 parts of
> the button that can be clicked.
>
> To see the button you just need to go to any product page on Amazon
> and it should be on the right side.
>
> Thanks
> Brett
>
>
>
>
> ________________________________________________________________
> 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
>

25 Mar 2008 - 4:59pm
Anonymous

This may be one of those things I never consciously noticed.
It looks like its typically used for shortcuts to items that have
some other navigation path available. It isn't used as the ONLY way
to get to those items.

I'm still curious about the usability and history of these. I am
working on a project in which we have a button with 2 parts and have
found some significant usability issues with it.

On Mar 25, 2008, at 2:44 PM, Matthew Nish-Lapidus wrote:

> This style button is pretty common, but usually the visual cues are
> more obvious. Take a look at the main nav in Flickr and Facebook as a
> couple examples.
>

25 Mar 2008 - 5:33pm
Anonymous

That is one of my concerns - only the arrow is a menu. If you put
anything in that menu that you can't get to somewhere else a lot of
people will never find it.

On Mar 25, 2008, at 4:13 PM, Alexander Baxevanis wrote:

> This looks more like a drop-down menu to me :-/
>
>>

25 Mar 2008 - 4:34pm
Joshua Lane
2008

It's not terribly common, but I think that's due to the fact that
Amazon is one of the few sites to support multiple wishlists. For
them, this UI element makes perfect sense as it accommodates multiple
user types. In this case, casual users just want to add the item to
their default wishlist; while more advanced users might want to add
it to one of several lists (birthday, holiday, etc, etc).

Is it the best way to present this sort of option? I'm not sure.
However, I certainly enjoyed it last Christmas when creating one
wishlist for friends and another wishlist for family.

Joshua Lane
Senior Web Designer / Information Architect
Creative B'stro

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

25 Mar 2008 - 11:26pm
michel.milano
2005

Perhaps inquire with the Yahoo library folks for the genealogy.
Their codification of the "menu button" is one of the first documents of it I have seen in circulation.

http://developer.yahoo.com/yui/examples/button/btn_example07.html

- Michel

26 Mar 2008 - 7:38am
Anonymous

At the moment this seems to be unique to the US site. The UK site (www.amazon.co.uk) has no split button (and no option for multiple wish lists?)

25 Mar 2008 - 11:49pm
Pankaj Chawla
2008

On 3/26/08, Brett Ingram <bingram at pandora.com> wrote:
>
> Hi all,
>
> Check out the "Add To Wish List" button at Amazon.com. It consists of
> 2 parts that can be clicked on. Does anyone if this has become some
> kind of "industry standard"? Also, any ideas where this kind of
> button first originated?
>
> It doesn't seem very common to me. It doesn't seem particularly
> usable either, since it isn't that clear that there are 2 parts of
> the button that can be clicked.

Hi Brett,

Its a fairly common button type in the desktop applications world whenever
you want to give the user an option for a default step and an option list to
pick a custom step.
Infact this button is also there for the Back/Forward functionality in both
IE and Netscape and hence anybody browsing the web will mostly know
about this.

Cheers
Pankaj

26 Mar 2008 - 7:45am
ELISABETH HUBERT
2007

I have actually started using a similar treatment on some work I'm
doing at my company. Our use of this button is such: below the button
is a column of check boxes relating to certain line items (similar to
an email inbox). The intended interaction is that the user checks off
one or several line items and then clicks anywhere on the two part
"select a task" button and sees menu options (delete, assign a tag,
etc). The reason we went for these feature is 1. our users only
considered the button over the checkbox column to relate to that
column, so when we had multiple buttons they didn't realize these
all related 2. In order to combine the actions and still have the
users see them as "actions" we used a button like treatment with a
down arrow to cue them that there were more choices.

This treatment actually did fairly well in usability and we'll be
continuing to monitor it's progress in production. It enabled us to
clean up the page quite a bit actually.

~ Lis
http://www.elisabethhubert.com

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

26 Mar 2008 - 8:11am
Meredith Noble
2010

> The intended interaction is that the user checks off
> one or several line items and then clicks anywhere on the two part
> "select a task" button and sees menu options (delete, assign a tag,
> etc).

Elisabeth, can you clarify -- how is it a two-part button if you can
click anywhere on it and get the same result (a menu)? Isn't it just a
regular drop-down menu at that point, albeit perhaps with a different
graphic design?

I'm very curious because I've been designing a similar inbox-style
interface. If you've found a role for an actual two-part button I'd be
interested in knowing what the two different click actions you've
defined are.

Thanks!

Meredith

26 Mar 2008 - 8:47am
Nick Quagliara
2007

As Pankaj stated, we see split buttons quite often in desktop apps.
The color picker is a common control that often uses this type of
interaction. The way Amazon is using it, does not follow the common
pattern, though. Whatever you select from the dropdown should remain
the default action for future uses. Going back to the color picker,
if you choose blue; then blue becomes the default color if you use
the button half of the control.
The control they are using is more like a tab menu as seen in WMP 11
(not sure about the other versions).

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

26 Mar 2008 - 9:58am
Owen Leonard
2008

> As Pankaj stated, we see split buttons quite often in desktop apps.
> The color picker is a common control that often uses this type of
> interaction.

I would disagree that the color picker is an example of the kind of
split button being described. I think the defining characteristic of a
split button is demonstrated in this re-creation of a desktop email
app toolbar:

http://blog.davglass.com/files/yui/button1/

The button has a default action, but the drop-down offers variations
on that default action. So, in the Amazon example, you can click the
button to add to the default wish list, or click the arrow to see more
options.

-- Owen

----
Web Developer
Athens County Public Libraries
http://www.myacpl.org

26 Mar 2008 - 5:02pm
ELISABETH HUBERT
2007

Meredith,

You are correct and I'm sorry for getting your hopes up. It really
is just a different graphic display. I was thinking more along the
lines of looks like a button acts like a dropdown with the two part
comment.

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

27 Mar 2008 - 10:00am
Arul Isai Imran
2008

I have recently had to do some research into two-part buttons and I
have found that there are two types of these buttons. One is the menu
button and the other is a split button.

The menu button has a category name or label on the button. Clicking
it will always give you a list of options or actions that you can
choose from. The label remains unchanged. Examples of this type would
be the page button in ie7, the button to choose the search provider in
firefox 2 and the amazon wish lists button.

The spilt button on the other hand has two distinct parts - the left
(and usually larger) part executes the default action when clicked.
The right part provides the user with a set of related (and sometimes
less frequently used) actions that they can choose from. I have also
seen the drop down being used to change parameters for the default
action. Depending on the situation that it is used in the default
action may change or remain the same when a choice is made from the
list. A save button with save as in the right side usually keeps save
as the default choice. Other examples - button to execute the search
and change the default provider in ie7, the print button in ie7.

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

27 Mar 2008 - 9:25am
Lakshmi Sivasub...
2008

Brett

The first time I took notice of this in a non desk top application
was in Gmail. Both yahoo and gmail use 2 part button for
%u2018reply%u2019. Its usage is becoming fairly common and seems very
useful when used appropriately.

The difference usually shown between a two parts or one part click
(text with an arrow mark) is the presence or absence of a vertical
line between them. I am not sure if this is intuitive especially for
novice users. A good example of this is in yahoo mail.
%u2018Reply%u2019 is a double part whereas %u2018Move%u2019,
%u2018More actions%u2019 and %u2018View%u2019 menus have only one
action.

I haven%u2019t tested it but I also doubt if this is accessible.

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

27 Mar 2008 - 5:41pm
Arul Isai Imran
2008

I have recently had to do some research into two-part buttons and I
have found that there are two types of these buttons. One is the menu
button and the other is a split button.

The menu button has a category name or label on the button. Clicking
it will always give you a list of options or actions that you can
choose from. The label remains unchanged. Examples of this type would
be the page button in ie7, the button to choose the search provider in
firefox 2 and the amazon wish lists button.

The split button on the other hand has two distinct parts - the left
(and usually larger) part executes the default action when clicked.
The right part provides the user with a set of related (and sometimes
less frequently used) actions that they can choose from. I have also
seen the drop down being used to change parameters for the default
action. Depending on the situation that it is used in the default
action may change or remain the same when a choice is made from the
list. A save button with save as in the right side usually keeps save
as the default choice. Other examples - button to execute the search
and change the default provider in ie7, the print button in ie7.

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

Syndicate content Get the feed