What do you call this list behavior?

12 Apr 2007 - 4:59am
7 years ago
13 replies
675 reads
Morten Hjerde
2007

I'm working on design patterns for mobile phone applications, and I can't
work out what to call this...

http://www.flickr.com/photo_zoom.gne?id=456370920&size=o

Its a list where the item with focus is expanded to display more
information. Its a true list, not a closeable panel. What would you call
this list behavior/behaviour?

Morten

Comments

12 Apr 2007 - 5:35am
Dave Malouf
2005

On 4/12/07, Morten Hjerde <mhjerde at gmail.com> wrote:
> http://www.flickr.com/photo_zoom.gne?id=456370920&size=o
>
> Its a list where the item with focus is expanded to display more
> information. Its a true list, not a closeable panel. What would you call
> this list behavior/behaviour?

Morten, from an RIA pattern perspective, it looks like it is a
roll-over reveal. The fact that it is in a "list" to me is subordinate
to the highlight & reveal nature.

Another part of the pattern is that the reveal is done not as an
overlay, but as inherited to the primary display.

So I guess I would call it an inherited reveal list. :)

-- dave

--
David Malouf
http://synapticburn.com/
http://ixda.org/
http://motorola.com/

12 Apr 2007 - 6:47am
jstrande
2007

Morten,

One could call this an accordion pattern - that is a term we've used for
this type of display.

Hope this helps.

Jon

On 4/12/07, Morten Hjerde <mhjerde at gmail.com> wrote:
>
> I'm working on design patterns for mobile phone applications, and I can't
> work out what to call this...
>
> http://www.flickr.com/photo_zoom.gne?id=456370920&size=o
>
> Its a list where the item with focus is expanded to display more
> information. Its a true list, not a closeable panel. What would you call
> this list behavior/behaviour?
>
> Morten
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

12 Apr 2007 - 8:01am
Barbara Ballard
2005

On 4/12/07, Morten Hjerde <mhjerde at gmail.com> wrote:
> I'm working on design patterns for mobile phone applications, and I can't
> work out what to call this...
>
> http://www.flickr.com/photo_zoom.gne?id=456370920&size=o
>
> Its a list where the item with focus is expanded to display more
> information. Its a true list, not a closeable panel. What would you call
> this list behavior/behaviour?
>

I've been calling that fisheye listings.

<http://patterns.littlespringsdesign.com/wikka.php?wakka=FisheyeAd>

--
Barbara Ballard
barbara at littlespringsdesign.com 1-785-838-3003

12 Apr 2007 - 8:55am
.pauric
2006

My understanding of fisheye is that the surrounding elements undergo a
lesser degree of magnification, but there is no additional reveal function.
Similar to os x dock or <
http://www.cs.helsinki.fi/u/salaakso/patterns/Fisheye.html>

Macromedia describes accordion as having reveal functionality
http://www.adobe.com/devnet/mmwebsite/articles/info_arch.html

I like David's description too. Suggestion: (Category) Lens, (Type)
Accordion reveal list.

Of course, I probably could be wrong possibly (o;

12 Apr 2007 - 9:59am
Jenifer Tidwell
2003

Ah, pattern naming -- my favorite part of pattern definition. (That's
sarcasm.)

First, isn't the term "accordion" used for a more general
open-one-panel-at-a-time structure? This list pattern is clearly an
instantiation of that, but it seems to have its own gestalt, as it were...
I'd separate the two, actually. One is for grouping and structuring general
content; the other is for seeing details in a list. If a reader knew the
general accordion pattern, could they derive this particular interaction
from it? If they were really good, maybe, but most people won't.

It's also a specific instantiation not only of an accordion, but of Extras
On Demand:
http://designinginterfaces.com/Extras_On_Demand
...which is a very, very general pattern that looks strictly at what
information is presented up front, and what is hidden behind a simple
gesture.

But again, I'd write a separate pattern for this particular list
interaction. I've seen it plenty of times now, and it's worth showing
readers how to use it. "Rollover List Reveal"? "Rollover List Details"?
Ugh. I hate naming patterns...

- Jenifer the Pattern Geek

---------------------------------------
Jenifer Tidwell
jenifer.tidwell at gmail.com
http://designinginterfaces.com
http://jtidwell.net

12 Apr 2007 - 10:22am
.pauric
2006

Far be it for a peon like myself to debate patterns with the guru.. but the
following points stick...

to recap "the item with focus is expanded to display more information. Its a
true list, not a closeable panel."

Jennifer "isn't the term "accordion" used for a more general
open-one-panel-at-a-time structure?"
Pauric: Yes, in the example at the start of this thread it appears that is
what is happening. When an item is in focus the subpanel is opened to reveal
the additional detail. Only one header can be selected, it fits your
definition as I read it.

Jennifer "If a reader knew the general accordion pattern, could they derive
this particular interaction from it? If they were really good, maybe, but
most people won't."
Pauric: Again yes, but as the user only has the option to scroll up or down
in this mobile interface I would say the interaction becomes immediately
apparent.

Re: "Extras On Demand:"
I would say that extras on demand is not 'in-line' like an accordion. The
user may drill in to the extras on demand if needed, the accordion provides
the extras as a natural action of parsing the list, in-line.

Jennifer "I hate naming patterns... "

Could be worse... job descriptions (o;

12 Apr 2007 - 11:22am
Dev Yamakawa
2007

I've worked with mobile OEMs/Operators and we most often refer to this type
of list as a "zoom list". We'll say something like "this is a 2 line zoom
list" which means that when focused the list item reveals 2 lines. I've
also heard it referred to as a "glow list".

Dev

On 4/12/07, pauric <radiorental at gmail.com> wrote:
>
> Far be it for a peon like myself to debate patterns with the guru.. but
> the
> following points stick...
>
> to recap "the item with focus is expanded to display more information. Its
> a
> true list, not a closeable panel."
>
> Jennifer "isn't the term "accordion" used for a more general
> open-one-panel-at-a-time structure?"
> Pauric: Yes, in the example at the start of this thread it appears that is
> what is happening. When an item is in focus the subpanel is opened to
> reveal
> the additional detail. Only one header can be selected, it fits your
> definition as I read it.
>
> Jennifer "If a reader knew the general accordion pattern, could they
> derive
> this particular interaction from it? If they were really good, maybe, but
> most people won't."
> Pauric: Again yes, but as the user only has the option to scroll up or
> down
> in this mobile interface I would say the interaction becomes immediately
> apparent.
>
> Re: "Extras On Demand:"
> I would say that extras on demand is not 'in-line' like an accordion. The
> user may drill in to the extras on demand if needed, the accordion
> provides
> the extras as a natural action of parsing the list, in-line.
>
> Jennifer "I hate naming patterns... "
>
> Could be worse... job descriptions (o;
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

12 Apr 2007 - 1:32pm
Håkan Reis
2006

Dev Yamakawa, you are on to something there. I thought it reminded me of
something and when you wrote zoom I found it. It is to some extent like the
local zooming pattern you describe in your book Jennifer. The difference is
that its a single list and the selection is not made with the mouse pointer.

--
Håkan Reis
Dotway AB

http://blog.reis.se

12 Apr 2007 - 4:45pm
cfmdesigns
2004

>From: Morten Hjerde <mhjerde at gmail.com>
>
>I'm working on design patterns for mobile phone applications, and I can't
>work out what to call this...
>
> http://www.flickr.com/photo_zoom.gne?id=456370920&size=o
>
>Its a list where the item with focus is expanded to display more
>information. Its a true list, not a closeable panel. What would you call
>this list behavior/behaviour?

I would call the behavior "selective disclosure" -- showing the expanded contents inline based on selection of an item (rather than by clicking on a sidebar icon).

I think it isn't quite an "accordion", since that should enable the disclosure of both any and all items in the list, while this looks like it does just the one selected item at a time.

(Hmm, does it automatically show with selection, or is that done with Options>View Details? If the latter, does that change the pattern type?)

-- Jim

12 Apr 2007 - 10:05pm
Jenifer Tidwell
2003

On 4/12/07, pauric <radiorental at gmail.com> wrote:
>
> Far be it for a peon like myself to debate patterns with the guru.. but
> the
> following points stick...

Oh good Lord, don't call me a guru. :-)

Jennifer "If a reader knew the general accordion pattern, could they derive
> this particular interaction from it? If they were really good, maybe, but
> most people won't."
> Pauric: Again yes, but as the user only has the option to scroll up or
> down
> in this mobile interface I would say the interaction becomes immediately
> apparent.

True. But I actually meant a designer, not a user -- someone who is reading
the pattern and figuring out how to use it in their UI design. To them,
this particular list-based interaction may be an obvious extension of the
general "accordion" pattern, but for most designers, it probably won't be
something they can creatively derive from it. Especially if one has never
seen this list-based thing before.

> Re: "Extras On Demand:"
> I would say that extras on demand is not 'in-line' like an accordion. The
> user may drill in to the extras on demand if needed, the accordion
> provides
> the extras as a natural action of parsing the list, in-line.

Not a bad approach. I thought of Extras On Demand as being an IA pattern
independent of the physical structuring of the information in question,
though. Maybe I should have written it more clearly!

Jennifer "I hate naming patterns... "
>
> Could be worse... job descriptions (o;

Yeah, really. :-)

- Jenifer

---------------------------------------
Jenifer Tidwell
jenifer.tidwell at gmail.com
http://designinginterfaces.com
http://jtidwell.net

13 Apr 2007 - 2:38am
Morten Hjerde
2007

Thanks for the great comments.

A lens derived (ish) name seems right. Using the pattern feels a bit like
moving a magnifying glass up and down the list.
I'll stick "zoom list" on it and see if somebody slaps me. My problem with
the fisheye name is that it seems to say"make things smaller in order to get
an overview", while this is more like "make the area bigger to see more
details".

The pattern is not uncommon in mobile phones, you can see it in the contact
list in most SonyEricsson phones for example.

We've done some informal testing and the use of the pattern feels natural to
users. Likely because there is no direct manipulation on mobile phones (a
few odd exceptions). Also, there is always one item on the screen that
has focus (again a few odd exceptions) . You scroll to the item you want to
act on. Having the item with focus show some additional information enables
you, in this case, to say "yes this is the right person" and hit "Call". It
saves you from opening a "View Details" just to make a call.

13 Apr 2007 - 3:17am
Morten Hjerde
2007

On 4/12/07, Christian Crumlish <xian at pobox.com> wrote:

> Morten, are you publishing or sharing your mobile patterns anywhere? I
> ask selfishly because I am curating the Yahoo pattern library and
> we're sorely lacking in mobile patterns thus far....

Yes, I'll share them somewhere public as soon as I get them into decent
shape.

Will you be publishing mobile patterns yourself? The Yahoo Go! application
has some really interesting GUI concepts. I like the way you use a carousel
to move between sections, and the "news ticker countdown thingy" (naming
stuff is not my best ).
Unfortunately, I only got Yahoo Go! to work on a Windows phone and its
sluggish. It also insists that Oslo is a street in Minnesota... :-)

Morten

14 Apr 2007 - 2:32am
dszuc
2005

A menu.

Rgds,

Daniel Szuc
Principal Usability Consultant
Apogee Usability Asia Ltd
www.apogeehk.com
'Usability in Asia'

The Usability Kit - http://www.theusabilitykit.com

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Morten
Hjerde
Sent: Thursday, April 12, 2007 6:00 PM
To: IxDA Discuss
Subject: [IxDA Discuss] What do you call this list behavior?

I'm working on design patterns for mobile phone applications, and I can't
work out what to call this...

http://www.flickr.com/photo_zoom.gne?id=456370920&size=o

Its a list where the item with focus is expanded to display more
information. Its a true list, not a closeable panel. What would you call
this list behavior/behaviour?

Morten ________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/ (Un)Subscription
Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

Syndicate content Get the feed