Usability of accordions

6 Jan 2009 - 9:51am
5 years ago
26 replies
3379 reads
Kordian Piotr Klecha
2008

No, I don't mean harmoshkas, but boxes with sliding parts, e.g.:
http://www.stickmanlabs.com/accordion/

We are going to use such box on the main page (in the bottom of column - not
very important content there, but still) and just wondering about
interactions. Current proposition is:

1. Accordion auto-switches to the next part after every 5 seconds when mouse
pointer is outside the box.

2. OnMouseOver any part-title bar opens this part (with latency 200ms).

3. Clicking on part-title bar opens it too.

Especially point 2 is a manner of doubt.

Any advices, examples, opinions?

Comments

6 Jan 2009 - 12:43pm
Christine Boese
2006

LOL! I love this subject line! But perhaps not for the reason you think.

I come from Wisconsin and my grandma played the accordion in a polka band.
So not to derail a discussion of interface accordions, but let us pause for
a moment and consider REAL accordions!

Like, here is my puzzle. If our field had existed at the time that these
musical instruments were evolving, would we have told them to toss the
design in the ashcan as TOO COMPLEX for any users to master?

Look at the humble accordion, for instance. You got a keyboard on one side,
funky buttons on the other side (all unlabeled! Oh no! It's worse than
blinking 12!), AND you gotta squeeze the damn thing in and out the whole
time to make any sounds at all. Plus, it does have a definite tendency to
wheeze a bit if you don't know what you're doing, much the same as a
clarinet will squeak if you aren't good with the reed yet.

AND... it was not designed strictly for professionals, just as that
unfretted violin was not. Both have long histories as instruments for blue
collar amateurs, to entertain their families, at parties, and so on. Music
for the masses, to fiddle jigs (my grandpa played the fiddle, grandma the
accordion, and never played together, as far as I know).

What of it? Would our field reject most musical instruments as beyond the
pale? Could they ever be invented today, or anything remotely like a
success?

OR would they be more correctly situated as "social" media, since their folk
uses were in settings that were primarily social, the very glue that held
communities together?

Chris

On Tue, Jan 6, 2009 at 9:51 AM, Kordian Piotr Klecha <kpklecha at gmail.com>wrote:

> No, I don't mean harmoshkas, but boxes with sliding parts, e.g.:
> http://www.stickmanlabs.com/accordion/
>
> We are going to use such box on the main page (in the bottom of column -
> not
> very important content there, but still) and just wondering about
> interactions. Current proposition is:
>
> 1. Accordion auto-switches to the next part after every 5 seconds when
> mouse
> pointer is outside the box.
>
> 2. OnMouseOver any part-title bar opens this part (with latency 200ms).
>
> 3. Clicking on part-title bar opens it too.
>
> Especially point 2 is a manner of doubt.
>
> Any advices, examples, opinions?
> ________________________________________________________________
> 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 Jan 2009 - 2:27pm
Abhay Rautela
2008

The best way to go forward would be to get a good number of representative
or actual users and simply do two simple A-B tests on the same users. I'm
not or expanding on participants and numbers because there is no information
given about what your site is about, who does it target and whether it's
live or not.

Test 1- accordion without auto-switching and and accordion with
auto-switching
Probe the participants in context of what you want to accomplish through the
auto-switching and choose which way to go.

Test 2- accordion with 'open panel' upon MouseOver and accordion
without 'open panel' upon MouseOver
Observe more and probe to validate whether users find this confusing,
irritating or just fine/ needs minor adjustment to suit their taste.

But otherwise, in my opinion, points 1 and 2 could be implemented as
mentioned or the other way round, without any major concerns to users. The
only points to take note would be:

Point 1- Accordion auto-switches to the next part after every 5 seconds when
mouse pointer is outside the box.
It's fine if it does or doesn't. But you should consider avoiding the slide
transition while showing changing panels. This will avoid the accordion from
distracting the user from the other content on the page (you said this is
not very important content). Instead, you would like to use the slide
transition to help the users are operating the UI so they realize the change
in state of the changing panels more easily.

Point 2- OnMouseOver any part-title bar opens this part (with latency
200ms).
It's fine if it does or doesn't. But in case it does, the latency could be
decided by testing it out with 10-15 folks across departments in your
organization to what seems natural and fit.

Cone

--
Cone Trees- User Research & Design
<a href="http://www.conetrees.com">www.conetrees.com</a>
<a href="http://www.twitter.com/conetrees">Twitter: conetrees</a>

On Tue, Jan 6, 2009 at 8:21 PM, Kordian Piotr Klecha <kpklecha at gmail.com>wrote:

> No, I don't mean harmoshkas, but boxes with sliding parts, e.g.:
> http://www.stickmanlabs.com/accordion/
>
> We are going to use such box on the main page (in the bottom of column -
> not
> very important content there, but still) and just wondering about
> interactions. Current proposition is:
>
> 1. Accordion auto-switches to the next part after every 5 seconds when
> mouse
> pointer is outside the box.
>
> 2. OnMouseOver any part-title bar opens this part (with latency 200ms).
>
> 3. Clicking on part-title bar opens it too.
>
> Especially point 2 is a manner of doubt.
>
> Any advices, examples, opinions?
>
>
> ________________________________________________________________
> Reply to this thread at ixda.org
> http://www.ixda.org/discuss?post=36908
>
> ________________________________________________________________
> 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
>

--
Cone Trees- User Research & Design
http://www.conetrees.com
http://www.twitter.com/conetrees

6 Jan 2009 - 11:38pm
Michael Micheletti
2006

On Tue, Jan 6, 2009 at 9:43 AM, Christine Boese
<christine.boese at gmail.com>wrote:

> What of it? Would our field reject most musical instruments as beyond the
> pale? Could they ever be invented today, or anything remotely like a
> success?
>
>
Imagine the first round of usability tests on the oboe. :-)

Michael Micheletti

7 Jan 2009 - 9:19pm
DampeS8N
2008

I hate the design idiom. The instrument is underused, though.

Accordions are jazz. They are superfluous. They are a symptom of a
cancer that should be cut out.

The cause is senseless page bloat.

Focus on tracking, prediction, and reduction. And you'll see that
the need for accordions goes away.

In other words. If you are considering them, you have too much crap
on that page.

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

7 Jan 2009 - 9:32pm
Angel Marquez
2008

http://jquery.bassistance.de/validate/demo/multipart/
I used the above awhile back. Jquery and Mootools are easier for me than
prototype.

I once had a friend who's family was from Denmark and they had an outdoor
bbq fiesta...The Danish flag was flying and the band was in full effect. I
tried to jam out with the accordion guy; but, he insisted to play music we
had to follow the sheet music. My strategy was to say 'you are absolutely
right'

Instruments are all whack. Though, the way to communicate song by writing
music and taking the understanding to say the level of counterpoint is true
mastery.

On Wed, Jan 7, 2009 at 6:19 PM, William Brall <dampee at earthlink.net> wrote:

> I hate the design idiom. The instrument is underused, though.
>
> Accordions are jazz. They are superfluous. They are a symptom of a
> cancer that should be cut out.
>
> The cause is senseless page bloat.
>
> Focus on tracking, prediction, and reduction. And you'll see that
> the need for accordions goes away.
>
> In other words. If you are considering them, you have too much crap
> on that page.
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=36908
>
>
> ________________________________________________________________
> 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
>

8 Jan 2009 - 9:55am
Jeff Seager
2007

I concur with William, basically. There could be exceptions (please
show me one), but I think in most cases the accordion construction is
an unnecessary gimmick.

I do think it's worth mentioning that accessibility is an important
component of usability, and the example you posted is fully
accessible with javascript disabled, Kordian ... oh, wait a minute,
do you want to use the accordion structure because your name is
Kordian? THAT might be an acceptable excuse!

My suggestion is to use it very sparingly if at all. These gimmicks
are a bit like specialized photographic filters, in or out of
Photoshop, and above all the presentation should suit the intended
purpose. First criterion: Does this tool or implementation really
support the fundamental message I want to convey? If the answer is
"yes," THEN you can think about how to integrate it.

Cheers,
Jeff
(a fan of the wee Celtic button accordion)

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

9 Jan 2009 - 1:30am
Angel Marquez
2008

You are correct.

*default*
Principles<http://www.xfront.com/progressive-enhancement-graceful-degradation/index.html>

Progressive EnhancementGraceful Degradation
Unobtrusive Enhancements

9 Jan 2009 - 6:12am
Anders Ljung
2008

In line with Christine slightly off topic reply, the usability
perspective on musical instruments is really interesting. Check out
Andy Hunt's research. His testing (as far as I can remember) shows
that for musical applications, complex interfaces with divergent
mapping of user input is preferable (with training of course).

http://www-users.york.ac.uk/~elec18/download/adh_thesis/

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

9 Jan 2009 - 8:24am
Kordian Piotr Klecha
2008

2009/1/8 Jeff Seager <abrojos at hotmail.com>

> I do think it's worth mentioning that accessibility is an important
> component of usability, and the example you posted is fully
> accessible with javascript disabled, Kordian ... oh, wait a minute,
> do you want to use the accordion structure because your name is
> Kordian? THAT might be an acceptable excuse!

Nice shot! :]

Thanks for all helpful advices and opinions (including these about REAL
accordions and their usability).

I did not mention: accordion we are going to use is planned on the new
version of portal's main page. It's not my concept - this time I just have
to make someone else's project usable, so do not assume that I WANT TO use
accordion. I just have to.

Still, I don't think that's bad idea. Look at e.g. yahoo.com - we are going
to use one mini-accordion more or less in the place of "Small
Business"/"Featured Services" on the bottom of their left column. In our
case left column is even longer. The goal *is* to catch user's eye - because
almost nobody looks there when it's static. And no, we are not afraid that
it will interrupt reading main content, because main content in this place
is bunch of links and summaries.

New main page is in alpha stage, but I will send there a link when it will
be public beta.

Greetings,
KPK

9 Jan 2009 - 9:29am
Sachin Ghodke
2008

If the accordion is part of being different and fancy in navigation
and user interface then are we stating that one should not get fancy
when we complain about the negative impact of accordions? Where does
that leave the user interface or navigation for the same when
technologies are advancing? We then are not moving with the times or
probably not finding correct solutions to understand the usability of
these fancy navigations.

What I would like to see is all of us understand where the users are
behaving on the web and how we are adapting to the new technology
which will only make the user experience far more fruitful.

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

11 Jan 2009 - 12:26am
Jeff Seager
2007

If I understand you correctly, Sachin, your concern is that we are
impeding the progress of good web design if we caution against the
use of this accordion structure that I call a "gimmick."

Rather, what I want to suggest is that we move forward thoughtfully.
I am an accessibility advocate, and accessibility does not concern
itself only with screen readers and other alternatives to the
standard browser. In the end, it requires exactly what Angel points
to above: Adherence to Web Standards, Progressive Enhancement,
Graceful Degradation, and Unobtrusive Enhancements.

Kordian has now clarified that the accordion function is only a small
component of the final product, and we can see already that the model
he provided was accessible without javascript ... some accordion
implementations are not. So really, I wouldn't discourage its use. I
just personally favor simplicity, and I believe that any feature of an
interface that isn't truly useful (not merely pretty) should be
discarded.

The most beautiful cars are the ones with the cleanest lines, not the
ones with the most accessories attached to them. The same may be said
of women (men too, I suppose) and web interfaces.

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

11 Jan 2009 - 7:53pm
DampeS8N
2008

I propose a new law. In IxD discussions if people bring up "Yahoo"
it should be as Godwin's Law.

Yahoo, while slightly better now then in the past, is still one of
the worst offenders when it comes to poor usability.

A close second is almost every Newspaper site.

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

11 Jan 2009 - 8:26pm
Angel Marquez
2008

yaWho?

On Sun, Jan 11, 2009 at 4:53 PM, William Brall <dampee at earthlink.net> wrote:

> I propose a new law. In IxD discussions if people bring up "Yahoo"
> it should be as Godwin's Law.
>
> Yahoo, while slightly better now then in the past, is still one of
> the worst offenders when it comes to poor usability.
>
> A close second is almost every Newspaper site.
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=36908
>
>
> ________________________________________________________________
> 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
>

9 Jan 2009 - 10:45am
Karol Dulat
2009

Kordian - do not afraid of using the accordion.
I wasn%u2019t sure about this solution and pretty afraid of
users%u2019 opinion. But they loved it. Not only we achieved our goal
(to simplify a very complicated navigation) but also it was very eye
catchy for them. A very positive feedback during the user tests.

I used non-automatic accordion (first panel opened by default), with
fixed height of the whole accordion (particular panels with different
heights).

Pozdrawiam!
K.

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

9 Jan 2009 - 5:47am
Jeroen Elstgeest
2008

I don't agree with William. You shouldn't use stuff purely because it
exists, but it certainly can help increase legibility and sometimes you
simply have "a lot of crap" on your page.

@Jeff: On FAQ pages<http://www.welie.com/patterns/showPattern.php?patternID=faq>an
accordion can be great because you can see all the questions, and if
you
want an answer, just click the bar and it's right beneath it. You could
think again about the auto-closing part, because it could change the height
at which the q&a pair begins and that makes it less usable.

Thu, Jan 8, 2009 at 3:19 AM, William Brall <dampee at earthlink.net> wrote:

> I hate the design idiom. The instrument is underused, though.
>
> Accordions are jazz. They are superfluous. They are a symptom of a
> cancer that should be cut out.
>
> The cause is senseless page bloat.
>
> Focus on tracking, prediction, and reduction. And you'll see that
> the need for accordions goes away.
>
> In other words. If you are considering them, you have too much crap
> on that page.
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=36908
>
>
> ________________________________________________________________
> 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
>

9 Jan 2009 - 8:33am
Stuart Cruickshank
2009

Whilst I agree that, in general, hiding content from users is
symptomatic of a wider issue, I think that there are uses for the
technique in the correct places. For example, Apple makes subtle use
of accordion techniques for secondary information on some parts of
their site. On this page http://www.apple.com/iphone, the section
titled 'Top Paid Apps' on the right side of the page uses the
accordion technique. Hovering over the headings reveals and hides
the content of these areas. I feel that this is fine, as this
content is not core content on that page.

Another added touch which enhances the experience on this page is
that the discoverability of this information is aided by having the
sections initially expanded, but then sliding closed when the page
has loaded. This gives the user a sign that there is something there
to be investigated and simply hovering the mouse over that section
causes the functionality to be demonstrated.

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

7 Jan 2009 - 12:28am
Andrew Boyd
2008

On Wed, Jan 7, 2009 at 3:38 PM, Michael Micheletti <
michael.micheletti at gmail.com> wrote:

> Imagine the first round of usability tests on the oboe. :-)
>
>
Total aside and off the track completely... I was privileged to attend a BBQ
at Russ Unger's place last year and listen to some respected members of the
IA/UX community discuss the relative merits of different styles and brands
of ukulele - I am not sure that we can stop ourselves comparing one thing to
another and evaluating them against our own heuristics, both individually
and in groups. I've seen the same sort of conversation take place amongst
wine/beer/camera/car/firearm/blog/forum/aquarium/dog/power
tool/sword/PC/phone owners/geeks over the years. I've not thought of
heuristics in terms of these informal "bull sessions" before - yet they were
there all the time. Interesting.

Best regards, Andrew
--
---
Andrew Boyd
http://uxcommunity.org -- User Experience Community
http://uxbookclub.org -- connect, read, discuss

6 Jan 2009 - 10:43am
Chris Tranchina
2009

We tested these with a handful of users recently. Generally, they
understood the interactions and functionality of the accordion widget.

1. We tested an auto-switch routine through the panels, once through
then stopped it. The thought was that it would give the user some
indication of how to access that content...turns out it was unnecessary
and kinda distracting.

2 & 3. Assuming the affordance is given to the part-title bar, I don't
think dual triggers would be needed and could cause some issues.
Wouldn't hurt to build that into the prototype and test though. We found
users had no hesitation clicking to access the content.

Chris

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Kordian Piotr Klecha
Sent: Tuesday, January 06, 2009 9:51 AM
To: discuss at ixda.org
Subject: [IxDA Discuss] Usability of accordions

No, I don't mean harmoshkas, but boxes with sliding parts, e.g.:
http://www.stickmanlabs.com/accordion/

We are going to use such box on the main page (in the bottom of column -
not
very important content there, but still) and just wondering about
interactions. Current proposition is:

1. Accordion auto-switches to the next part after every 5 seconds when
mouse
pointer is outside the box.

2. OnMouseOver any part-title bar opens this part (with latency 200ms).

3. Clicking on part-title bar opens it too.

Especially point 2 is a manner of doubt.

Any advices, examples, opinions?
________________________________________________________________
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 Jan 2009 - 12:54pm
pyces
2007

Having just created a design pattern library for my company, I'm pretty
well-versed on these! There are actually two design patterns: accordions
and show/hide panels. Accordions only allow one bar's contents to
display at a time. These are usually used to show details for steps in a
procedure, for example. Show/hide panels allow multiple bars' content to
be shown at a time, relying on the user to click the bars to show/hide
them. We have found that this works best for our interactions. One main
use is to show detail for categories (the category name would be the bar
title, then clicking on it would explain more about that category). In
my opinion, I wouldn't automatically switch the selected bar. I wouldn't
expect that behavior as a user. I don't have a strong opinion on
hover-over. I think it would work well and if someone didn't realize
that they could click on the bar title, but were mousing around the
screen, they would discover that feature.

If you haven't already, check out welie.com for Martijn van Welie's
great design pattern work or designinginterfaces.com for Jennifer
Tidwell's.

Courtney Jordan
Senior User Experience Architect

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Kordian Piotr Klecha
Sent: Tuesday, January 06, 2009 9:51 AM
To: discuss at ixda.org

1. Accordion auto-switches to the next part after every 5 seconds when
mouse
pointer is outside the box.

2. OnMouseOver any part-title bar opens this part (with latency 200ms).

3. Clicking on part-title bar opens it too.

7 Jan 2009 - 10:53am
Amy Silvers
2007

I'm thinking the bagpipes would never make it past stakeholder interviews.

(This might be my favorite IxDA thread ever!)

2009/1/6 Michael Micheletti <michael.micheletti at gmail.com>:
> On Tue, Jan 6, 2009 at 9:43 AM, Christine Boese
> <christine.boese at gmail.com>wrote:
>
>> What of it? Would our field reject most musical instruments as beyond the
>> pale? Could they ever be invented today, or anything remotely like a
>> success?
>>
>>
> Imagine the first round of usability tests on the oboe. :-)
>
> Michael Micheletti
> ________________________________________________________________
> 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 Jan 2009 - 12:45pm
Fábio Silva
2008

Well. I work with JQuery.

1. Accordion auto-switches to the next part after every 5 seconds when mouse
pointer is outside the box.

F: That would be cool. But have a look at some Innerfade plugins out there.
They rotate some content every X seconds. Accordion usually is used as some
kind of menu. Innerfade as some kind of banner rotation.

2. OnMouseOver any part-title bar opens this part (with latency 200ms).

F: This could be a problem. If I leave your part-title bar the content will
disappear? Or the content relative to the part-title bar will still be
visible? Maybe a "click" event would be better.

3. Clicking on part-title bar opens it too.

F: This would be better than point 2. And you could hide the content of the
clickable part-title bar after a "mouse leaving" event.

[]s
Fábio

On Tue, Jan 6, 2009 at 11:51 AM, Kordian Piotr Klecha <kpklecha at gmail.com>wrote:

> No, I don't mean harmoshkas, but boxes with sliding parts, e.g.:
> http://www.stickmanlabs.com/accordion/
>
> We are going to use such box on the main page (in the bottom of column -
> not
> very important content there, but still) and just wondering about
> interactions. Current proposition is:
>
> 1. Accordion auto-switches to the next part after every 5 seconds when
> mouse
> pointer is outside the box.
>
> 2. OnMouseOver any part-title bar opens this part (with latency 200ms).
>
> 3. Clicking on part-title bar opens it too.
>
> Especially point 2 is a manner of doubt.
>
> Any advices, examples, opinions?
>
>
> ________________________________________________________________
> Reply to this thread at ixda.org
> http://www.ixda.org/discuss?post=36908
>
> ________________________________________________________________
> 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
>

14 Jan 2009 - 7:50pm
Jeff Seager
2007

I like the concept of the FAQ accordion, Jeroen, but the example you
posted is not a working example. All the same, it's good idea for
conserving space and it is a functional enhancement.

In such a use case, I would be happier if it also behaved as
Kordian's example does (defaulting to display all content when
javascript is disabled, or enabled in all cases by server-side
scripting).

Thanks for pointing that out!

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

14 Jan 2009 - 9:03pm
Christian Crumlish
2006

I'd love to hear more about your pattern library, Courtney.

On Tue, Jan 6, 2009 at 9:54 AM, Jordan, Courtney <CJordan at bbandt.com> wrote:

> Having just created a design pattern library for my company, I'm pretty
> well-versed on these! There are actually two design patterns: accordions
> and show/hide panels. Accordions only allow one bar's contents to
> display at a time.

I'm collaborating with the YUI (http://developer.yahoo.com/yui) team on an
accordion pattern and am about to post something to the YUI blog to seek
community feedback (coincidentally, this extended thread has covered much of
the same ground). At this point, by the rules of an earlier poster I realize
I have auto-Godwinized this discussion by mentioning the Y in YUI. I will
save my disquisition on "industrial strength ux" for another time and
refocus.

Anyway, I'm finding that designers tend to be far more prescriptive about
defining things like accordions. They don't all agree with your assertion
that (paraphrasing) accordions only allow one panel to be shown at a time
(and that this is in fact what distinguishes an accordion from a stack of
show/hide panels), but many do. Plus they all seem to agree that there is a
rule.

The front-end engineers, of course, are looking at it not from the point of
view of a user, experiencing the interface element and forming a mental
model of it based on its behaviors. They look at how it's made and when they
abstract that, they say that an accordion is a type of tree.

The YUI folks in particular, who serve both an internal front-end engineer
audience within Yahoo! as well as a wide developer community at large,
*know* that eventually somebody will want an accordion within an accordion
with a scrollbar and panels that blink on hover. They don't see themselves
as usability cops at the code level.

When we release an accordion component, it will likely have some default
rules and a great deal of configurable flexibility.

At the pattern level, though, we will make recommendations, share competing
notions abroad in our communities of practice, and perhaps even say that
what makes an accordion is that only one panel opens at a time (which,
ironically, is exactly how an actual accordion does not work).

...

> If you haven't already, check out welie.com for Martijn van Welie's
> great design pattern work or designinginterfaces.com for Jennifer
> Tidwell's.
>

I always do. And the Yahoo design pattern library always links to them when
there's an analogous or related pattern in their (and other collections). If
I had a good way to do it, I would transclude some of their patterns
directly into ours.

-xian-

--
Christian Crumlish
I'm writing a book so please forgive any lag
http://designingsocialinterfaces.com

29 Jan 2009 - 8:02am
Kordian Piotr Klecha
2008

2009/1/9 Kordian Piotr Klecha <kpklecha at gmail.com>

>
> New main page is in alpha stage, but I will send there a link when it will
> be public beta.

OK. Here it is.

http://beta.wp.pl/

(Yes, upgrade of interaction with accordion is a must. We have already
realize that.)

Greetings,
KPK

29 Jan 2009 - 5:47pm
Angel Marquez
2008

Hey, hey not to shabby and in a timely manner. It looks like the yahoo
homepage met the apple apple homepage and made a baby iconic utility nav : )
The accordion doesn't do what I expected or wanted. What's with click to
expand and it takes me outside the domain with no way back?

I like how I can see all of your CSS code fun! Did you mod other js
libraries? I'm seeing no 3rd remnants or evidence.

Cool. Guess what I clicked on first!

On Thu, Jan 29, 2009 at 5:02 AM, Kordian Piotr Klecha <kpklecha at gmail.com>wrote:

> 2009/1/9 Kordian Piotr Klecha <kpklecha at gmail.com>
>
> >
> > New main page is in alpha stage, but I will send there a link when it
> will
> > be public beta.
>
>
> OK. Here it is.
>
> http://beta.wp.pl/
>
> (Yes, upgrade of interaction with accordion is a must. We have already
> realize that.)
>
> Greetings,
> KPK
> ________________________________________________________________
> 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
>

29 Jan 2009 - 7:09pm
Daniel Stern
2009

1. I think is fine, especially if it is promotional content. It may
actually be helpful depending on your graphic design... sometime
accordions don't stand out as accordions, and need a little eye
pull... just make sure it doesnt happen too frequently, too fast, or
too slow, unless any of those go with the feel / message of your
site.

2. I DEFINITELY ADVISE AGAINST THIS. People when they are reading
tend to move their mouse around, which can cause a problem for
hover-state reacting interaction elements. I find hover states best
for menu's or highlighting content... not so much for manipulating
things that will require attention.

3. Mouseclick to alter state is definitely preferred. A click shows
intent, and accidental clicks are rare... if the users mouse is even
on the accordion bar (which is rather long and narrow generally),
then its there for a reason (they have figured out the
functionality)... it wont take them long to figure out to click.

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

Syndicate content Get the feed