Help ... Examples of loading long nested tree nodes with tablature data (no pagination)

18 Jan 2006 - 9:50am
8 years ago
8 replies
750 reads
Dave Malouf
2005

Our service IntraLinks is sorta like a big file system (or that is the
closest relevant simile).

When you open a folder, like any other file system, there is a list of
child-folders and resource objects like files that need to be displayed.
(caveat, you can't pre-load the children of a parent before the request is
made).
There can be upwards of 1000's of objects (folders and files) that are in
that parent folder. Loading the entire set all at once has two negatives:
1. It is a big strain on the local machine as we are doing an XML to HTML
format translation on the client side (yes, we are using AJAX).
2. users have to wait too long to wait for the first row (which may be all
they need) while they wait for row 2539 to finish.

How have people seen in mainstream applications this issue dealt with?

1. We know we can just change the cursor
2. We know that the scroll bar changing size is already happening

A solution I proposed and like, but my supervisor would like to see more
precedent, is the following.

1. on click of a node/folder change the folder color and append an animated
gif next to it (somewhere in its row)
2. As items stream in under it, put a bar next to the new row to the left (a
left border), this way as the user scrolls, the folder row goes off screen
w/ the initial indicator. This bar would always be on screen so long as
loading is still in progress
3. If a user expands a child node to see the grandchildren, the system would
repeat, but the bar/border would now be indented, as w/ any tree, so you can
see the difference between the parent loading and the child loading.
4. as loading completes at a given level, the bar disappears.

So if people have examples they wouldn't mind sharing, or point me to good
resources for this issue, I'd be interested.

Having a precedent is important to our process.

Thanx!

-- dave

-- dave

David Heller
http://synapticburn.com/
http://ixdg.org/
Dave (at) ixdg (dot) org
Dave (at) synapticburn (dot) com
AIM: bolinhanyc || Y!: dave_ux || MSN: hippiefunk at hotmail.com

Comments

18 Jan 2006 - 10:04am
Josh Seiden
2003

Look at the interactions in iTunes when you subscribe to a podcast. It's
very close to what you describe. A small animated icon provides download
progress feedback next to each item. There is one level of nesting: both
parent and child are supplied with progress feedback indication.

JS

-----Original Message-----

A solution I proposed and like, but my supervisor would like to see more
precedent, is the following.

1. on click of a node/folder change the folder color and append an animated
gif next to it (somewhere in its row) ...

18 Jan 2006 - 10:21am
Dave Malouf
2005

On 1/18/06 10:04 AM, "Joshua Seiden" <josh at 36partners.com> wrote:

> Look at the interactions in iTunes when you subscribe to a podcast. It's
> very close to what you describe. A small animated icon provides download
> progress feedback next to each item. There is one level of nesting: both
> parent and child are supplied with progress feedback indication.

Hi, this model came up on one point in our discussion.

The difference here is that each row is not an object to download, it is
just text in a row. So there is no real progress for each row.

Make sense?

-- dave

David Heller
http://synapticburn.com/
http://ixdg.org/
Dave (at) ixdg (dot) org
Dave (at) synapticburn (dot) com
AIM: bolinhanyc || Y!: dave_ux || MSN: hippiefunk at hotmail.com

18 Jan 2006 - 10:29am
Josh Seiden
2003

But how does that change the user's perception of events? It's not about
reality, after all, but about the perception and creation thereof.

JS
-----Original Message-----

> Look at the interactions in iTunes ...

Hi, this model came up on one point in our discussion.

The difference here is that each row is not an object to download, it is
just text in a row. So there is no real progress for each row.

18 Jan 2006 - 10:38am
Dave Malouf
2005

> But how does that change the user's perception of events? It's not about
> reality, after all, but about the perception and creation thereof.
>

I think, I'm not being clear ... Let's see if some asci art can help.

There is a tabled tree. What I Mean here is that each row is not just the
name of the node, but also has meta data about that row. I'm not going to do
the whole table, just the object names.

When the user arrives they can see something like the following:
+ Node1
+ Node1
+ Node1
+ Node1
<imaging 1000>
+ Node1
+ Node1
+ Node1

They can then expand a single node

+ Node1
+ Node1
- Node1

+ Node2
+ Node2
+ Node2
<imagine 1000 more>
+ Node2
+ Node2
+ Node2
+ Node2
<imagine 1000 more>
+ Node2
+ Node2
+ Node2

+ Node1
<imaging 1000>
+ Node1
+ Node1
+ Node1

Each node 2 is going to be made visible 1 at a time (sorta like being
streamed in). You will not see a complete set and then wait for each item to
complete downloading. Once visible it is done. There is no waiting state for
a row.

1. if I put a loading indicator on the expanded Node1 I need to be able to
act on any Node2 item as soon as it is made visible.
2. The list of node2's is so long that I will never see the first node2 and
the last node2 on the same screen real estate at the same moment. So while
I'm looking at the 2nd set (below the first "imagine 1000 more") I will not
see the Node1 parent (if it has any indicator at all) and I will not see the
last set (i.e. The end of the queue) and thus know that loading is done.
3. So the question is ... How when looking at the middle set, can I know
that the last rows have come in?

Does that help?

-- dave

David Heller
http://synapticburn.com/
http://ixdg.org/
Dave (at) ixdg (dot) org
Dave (at) synapticburn (dot) com
AIM: bolinhanyc || Y!: dave_ux || MSN: hippiefunk at hotmail.com

18 Jan 2006 - 11:05am
Josh Seiden
2003

Well. It strikes me that progress indication is just the tip of the iceberg.

The fact that node 2's show up one-by-one prevents meaningful indication in
place. You could solve that by re-architecting the way data is delivered--so
that row labels come in first, and once the complete set of labels is
delivered, data follows.

(The second problem is that your list of items is so long that it's breaking
this interaction idiom. Is it really meaningful to show a list of 1000+
items?)

But you're not asking about all of that, right? (Forgive the unsolicited
feedback. ) The problem is you only know about the progress of the children
of Node 1, and if you locate feedback at Node 1 it will scroll off screen
and thus be meaningless. If the top of the list is off screen, then you have
no option but to place indication in a location that will remain visible.
Assuming that you want indication to remain modeless, you can't use a
dialog, so you'll need to do something in the window frame--either a
thermometer indicator in the status bar at the bottom, or a spinner in the
top (like a browser.)

JS

-----Original Message-----

I think, I'm not being clear ... Let's see if some asci art can help.

18 Jan 2006 - 4:42pm
Adam Korman
2004

> You could solve that by re-architecting the way data is
> delivered--so that row labels come in first, and once the
> complete set of labels is delivered, data follows.

Or if that's asking too much, maybe you can at least get a count of the
child nodes so that you can quickly draw the right number of rows with a
placeholder "Retrieving," then fill in as the data becomes available. It
probably wouldn't add much overhead to grab that metadata (# of
children) with the initial request to display the parent nodes, so you
wouldn't even have to make a round-trip just to get the number of items
after the user's request to open the node, making it feel that much
snappier.

> (The second problem is that your list of items is so long that it's
> breaking this interaction idiom.

I'd second Josh's side comment... thousands of child nodes (and
grand-children) in a tree? Sounds like it's ripe for a different approach.

-Adam

18 Jan 2006 - 9:16pm
Steve Baty
2009

David,

We've had to tackle this issue in the last few content management builds
we've undertaken, presenting CMS users with an hierarchical tree showing,
for example, all of the files in the site's customer service document
library (user manuals, software updates, brochures etc etc). In one case the
levels of the tree contain 5, 45, 900, 3000 nodes (as you traverse down the
tree - i.e. 5 top-level nodes; 45 second-level nodes etc).

The tree is presented with "+" icons indicating the ability to expand that
particular node to display child nodes. Once expanded, the icon changes to
"-" and disappears altogether at the end of that branch (i.e. at the leaf
nodes).

We use an XMLHTTP call each time the "+" symbol is clicked to generate the
appropriate list of child nodes for the selected parent, and display a
temporary child node labelled simply "Loading...", which is replaced by the
full list of child nodes once they complete loading.

We don't allow manipulation of the set of child nodes until all nodes have
been loaded, which is (if I read your last message correctly) something
you're attempting to allow.

One point I'm not clear on: where is the delay in loading - during retrieval
from the database, or in presentation? If during retrieval, I'm not sure
some of the load status indicators proposed will work, as you won't know
ahead of time how many records are coming down. However, it may be possible
to use server-side query caching techniques to speed up the retrieval times
to mitigate the delay.

If the issue comes during presentation, you could:
i) Include a load status flag;
ii) While the load status flag is 'no', use a stylesheet to indicate the
'still loading' status;
iii) When the load is complete, set the status flag to 'yes' and change the
style to indicate completion.

In that way you could style all child nodes to indicate that loading is
still proceeding, whilst allowing manipulation of those already loaded.

The size of your dataset exceeds anything we've had to accommodate, however,
so I can't address your issue with direct experience of the same scale.

Regards

Steve Baty
Director, User Experience Strategy
Red Square

On 19/01/06, David Heller <dave at ixdg.org> wrote:
>
>
> When you open a folder, like any other file system, there is a list of
> child-folders and resource objects like files that need to be displayed.
> (caveat, you can't pre-load the children of a parent before the request is
> made).
> There can be upwards of 1000's of objects (folders and files) that are in
> that parent folder. Loading the entire set all at once has two negatives:
> 1. It is a big strain on the local machine as we are doing an XML to HTML
> format translation on the client side (yes, we are using AJAX).
> 2. users have to wait too long to wait for the first row (which may be all
> they need) while they wait for row 2539 to finish.
>
> H

18 Jan 2006 - 9:45pm
Ron Conescu
2005

Dave,

> There can be upwards of 1000's of objects
> (folders and files) in that parent folder...
>
> Users have to wait too long to wait for the
> first row (which may be all they need) while
> they wait for row 2539 to finish...
>
> How have people seen in mainstream applications
> this issue dealt with?
>
> Having a precedent is important to our process.

I think there's a precedent built into Windows.

I'm on a Windows network with thousands of machines; each user has a
shared directory somewhere out in the network. If I open a Windows
Explorer window and type the path to my personal directory:

\\group\stuff\users\rconescu\

and hit the Enter key, Windows does this:

1) Displays my "rconescu" directory immediately, under the indicated
folder tree. In other words, it draws icons for each of the 4 items
above -- "group," "stuff," "users," and "rconescu" -- nested
appropriately under "My Computer."

2) Displays the contents of my directory, also immediately, on the
right-hand side of the Windows Explorer window, as if it were folder
local to my hard drive.

3) After about one second, it starts expanding the rest of the folder
hierarchy, filling in the folders above and below each folder in the
above-mentioned path.

For example, if I'm the 100th user (out of, say, 200 users) in the
"users" directory, and the "users" directory is itself the 100th
directory (out of, say, 200 subdirectories) in the "stuff" directory,
then: after 1 second, the other 199 directories in the "users"
directory start appearing, and (asynchronously) the other 199
subdirectories of the "stuff" directory start appearing. As the new
directories are discovered, the existing ones visually slide out of the
way to make room for them. All the while, the contents of my "rconescu"
directory are visible and usable on the right-hand side of the window.

Does any of that make sense? If not, I'll be glad to make a Camtasia
movie of it.

ron
--
Carnegie Mellon University
Master's Student, Human-Computer Interaction Institute
rconescu at cmu.edu

Syndicate content Get the feed