Indicators for cells with multiple values in a datagrid

28 Aug 2009 - 12:18pm
4 years ago
10 replies
843 reads
Oleh Kovalchuke
2006

Hello, IxDers,

I need to indicate that specific cell in a read-only datagrid contains not
one, but multiple values. Putting the cell in focus would reveal the values
in it.

The project team have suggested displaying "Multiple..." link in the cell.
Clicking the link would open a popup showing the values. There are several
problems with this approach, which I am not going to dwell upon at the
moment.

I think a better way to do this would be to display the first value in the
list as a link with an indicator of total entries, if there are more than
one.
A column of values would look like this then:

Lorem ipsum
Dolor sit amet
Consectetur [+5]
Adipiscing elit [+1]
Cras lectus
Neque [+3]

Each row in this example represents a cell in a large datagrid.
Clicking the cell with multiple values would open a dropdown list displaying
all entries (6, 2 or 4 in the example above).

Are there better ways to indicate that the cell has multiple values in it
and to view the values?
This is for frequently used application, not a website.

Thanks,
Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

Comments

28 Aug 2009 - 12:40pm
Jennifer Vignone
2008

Do you mean something like this:

------------------------------------------
Column One Column Two
------------------------------------------
Lorem Ipsum 1,240
Dolor sit amet 2,005
Consectetur 1,234 [5v]
Adipiscing elit 2,111 [1v]
Cras lectus -32
Neque -1,221 [3v]
------------------------------------------

Values are underlined to show that they are links as well as how many items are available. My only concern about the [+ #] is users confusing those numbers with the data itself. So what I am showing is the number of additional values with an arrow icon. You could show something like this:

------------------------------------------
Column One Column Two
------------------------------------------
Lorem Ipsum 1,240
Dolor sit amet 2,005
Consectetur 1,234 v
Adipiscing elit 2,111 v
Cras lectus -32
Neque -1,221 v
------------------------------------------

with the number underlined and an arrow icon...more than one way to approach that idea I guess. But it depends on how the rest of the data is being treated, if at all.

Now when you say there could be multiple values associated with that field, are they underlying values that add to the main number in the cell, or just more of...? I am just curious about the association of the number to each other within that one cell.

What you could do with the above as you described and I "redrew" is the following.

User clicks a multiple value cell and gets:

------------------------------------------
Column One Column Two
------------------------------------------
Lorem Ipsum 1,240
Dolor sit amet 2,005
Consectetur 1,234 [5v]
Consectetur1 1,233
Consectetur2 1,423
Consectetur3 3,221
Consectetur4 -935
Consectetur5 -321
Adipiscing elit 2,111 [1v]
Cras lectus -32
Neque -1,221 [3v]
------------------------------------------

Have the row expand to show the additional values, or expand the grid by adding rows to accommodate the additional values. I would also use a tone to indicate the grouping of the expanded values.

Doing something like this would also give you the opportunity to add a notion of "Expand All"/"Collapse All" to display all hidden values in one click if that was of value.

You also have the potential of a pop-up (or floating temporary panel), but in applications, especially data grids, too many pop-ups can be confusing and annoying, and if that's not the metaphor in use throughout the application, it may not be a fit.

I hope this helps at least generate more thoughts.
Jennifer

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Oleh Kovalchuke
Sent: Friday, August 28, 2009 1:19 PM
To: IxDA
Subject: [IxDA Discuss] Indicators for cells with multiple values in a datagrid

Hello, IxDers,

I need to indicate that specific cell in a read-only datagrid contains not
one, but multiple values. Putting the cell in focus would reveal the values
in it.

The project team have suggested displaying "Multiple..." link in the cell.
Clicking the link would open a popup showing the values. There are several
problems with this approach, which I am not going to dwell upon at the
moment.

I think a better way to do this would be to display the first value in the
list as a link with an indicator of total entries, if there are more than
one.
A column of values would look like this then:

Lorem ipsum
Dolor sit amet
Consectetur [+5]
Adipiscing elit [+1]
Cras lectus
Neque [+3]

Each row in this example represents a cell in a large datagrid.
Clicking the cell with multiple values would open a dropdown list displaying
all entries (6, 2 or 4 in the example above).

Are there better ways to indicate that the cell has multiple values in it
and to view the values?
This is for frequently used application, not a website.

Thanks,
Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm
________________________________________________________________
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

This email is confidential and subject to important disclaimers and
conditions including on offers for the purchase or sale of
securities, accuracy and completeness of information, viruses,
confidentiality, legal privilege, and legal entity disclaimers,
available at http://www.jpmorgan.com/pages/disclosures/email.

28 Aug 2009 - 12:47pm
brendon.cornwel...
2009

If the number of data elements in the list is limited to 5 /- 2 then
you might be able to show them all inline - with line breaks in the
cell. It's easier to be able to see all the values at once.

Another option could be a tool-tip rollover that showed the rest of
the values. One thing to keep in mind is that if you contain multiple
values in a cell then you wont' be able to easily sort the column.

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

28 Aug 2009 - 12:55pm
bminihan
2007

You have the right idea, and I like Jennifer's idea of the down
arrow.

You might also consider these:

Lorem ipsum
Dolor sit amet
Consectetur [5 more]
Adipiscing elit [1 more]
Cras lectus
Neque [3 more]
Might help if you have numeric multiple values, to avoid "1,234 [
5]" seeming to represent 1,239.

Or perhaps just use [ ] with alt or title text indicating the number
of additional items.

Whether the number represents how many more items, or the sum total,
depends on whether you show the original item when you display the
extra items.

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

28 Aug 2009 - 1:12pm
bminihan
2007

Plus symbols didn't come thru on IxDA, but I meant to say:
Or perhaps just use [ ] (plus symbol) with alt or title text
indicating the number of additional items.

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

28 Aug 2009 - 1:16pm
Oleh Kovalchuke
2006

Hm, Gmail uses something like that in the Inbox view, however the indicator
does not open a dropdown, it opens a message instead:

Oleh, Jennifer (5) [IxDA Discuss] Indicators for cells with multiple
values in a datagrid

--
Oleh

On Fri, Aug 28, 2009 at 1:11 PM, Oleh Kovalchuke <tangospring at gmail.com>wrote:

> Thanks, Jennifer, for food for thought.
>
> We indicate this kind of links in data cells by changing text color (no
> underlining). The entire value in the cell would be treated as a link
> (including number of entries).
>
> Both nested datagrids and Expand All action could be good options
> potentially. Unfortunately they are not technically feasible around here.
> Also there could be quite a few randomly located cells within the grid in
> different rows and columns -- expanding/collapsing grid might feel somewhat
> jittery.
>
> Removing "+" sign and displaying total number of entries might be a good
> option.
> Like so:
>
> ------------------------------------------
> Column One Column Two
> ------------------------------------------
> Lorem Ipsum [2] 1,240
> Dolor sit amet 2,005
> Consectetur [3] 1,234 [6]
> Adipiscing elit 2,111 [2]
> Cras lectus 32
> Neque [5] 1,221 [4]
> ------------------------------------------
>
>
> Thanks,
>
> Oleh Kovalchuke
> Interaction Design is design of time
> http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm
>
>
>

28 Aug 2009 - 1:11pm
Oleh Kovalchuke
2006

Thanks, Jennifer, for food for thought.

We indicate this kind of links in data cells by changing text color (no
underlining). The entire value in the cell would be treated as a link
(including number of entries).

Both nested datagrids and Expand All action could be good options
potentially. Unfortunately they are not technically feasible around here.
Also there could be quite a few randomly located cells within the grid in
different rows and columns -- expanding/collapsing grid might feel somewhat
jittery.

Removing "+" sign and displaying total number of entries might be a good
option.
Like so:

------------------------------------------
Column One Column Two
------------------------------------------
Lorem Ipsum [2] 1,240
Dolor sit amet 2,005
Consectetur [3] 1,234 [6]
Adipiscing elit 2,111 [2]
Cras lectus 32
Neque [5] 1,221 [4]
------------------------------------------

Thanks,

Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

28 Aug 2009 - 1:38pm
Oleh Kovalchuke
2006

I have considered displaying [+] only, but this is not as informative as
showing the number of entries next to at least one of them spelled out.

Spelling out More is a bit too long for the datagrid.

Hovers are not very efficient, too transient, and prevent copying data (if
needed).

Expanding/collapsing all values within all cells might be a valid option for
this grid. As well as displaying a tiny arrow next to the number.

Thanks!

Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

30 Aug 2009 - 8:58pm
Santiago Bustelo
2010

Sorry for arriving so late to the discussion.

Oleh, I am a little puzzled about your need to display more than one
value in a cell. There are several ways to display data, with their
own properties that can fit or not the needs. One of datagrid's
properties is, precisely, that one cell equals one value.

Displaying more than one value in a cell would not only add
complexity, but also break other datagrid properties, as sorting
values by column.

Perhaps another way to display the data can be more appropiate, but
without a sample of the data I won't be able to suggest one. Feel
free to contact me in private.

--

Santiago Bustelo, Icograma
Buenos Aires, Argentina

// IxDA Buenos Aires: http://www.ixda.com.ar

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

29 Aug 2009 - 9:32am
Anonymous

At 06:18 AM 8/28/2009, Oleh Kovalchuke wrote:

>I think a better way to do this would be to display the first value in the
>list as a link with an indicator of total entries, if there are more than
>one.
>A column of values would look like this then:
>
>Lorem ipsum
>Dolor sit amet
>Consectetur [+5]
>Adipiscing elit [+1]
>Cras lectus
>Neque [+3]

A slight variant of that might be more appealing
-- using periods to indicate the additional entries. So ...

Lorem ipsum
Dolor sit amet
Consectetur .....
Adipiscing elit .
Cras lectus
Neque .

I find this a bit more readable, and in most
cases (assuming a proportional font) it will take up less space.

Of course there need to be some clear rules about
what happens when there isn't space for the
periods and the full text of the first
entry. (Perhaps there was not even space without
the periods!). I'd suggest never showing more
than 5 periods, truncating that to 3 if needed to
display the full name, otherwise using a '+' to
indicate truncation. Thus a different display,
with a narrower column, might show

Lorem ipsum ..
Dolor sit amet
Consectetur
Adipiscing el+
Cras lectus
Neque ....

Hope this helps.

---------------------------------------------------
How do users experience your Progress® application?
Are they productive? Does it matter? Do you care?
---------------------------------------------------
=======================================================
ARTHUR FINK arthur at arthurfink.com www.ArthurFink.com
Listening to users, and designing interfaces that work!
Consulting and Training in Progress® Call 207.615.5722
=======================================================

31 Aug 2009 - 10:47am
Oleh Kovalchuke
2006

OK. Here are the data properties.

These are search results in software application.
They can contain one to hundreds entries.
The presentation has to facilitate data comparison. Sorting might help here.
It presents 11 distinct characteristics. Ten of the characteristics might
have multiple values.
The data is descriptive text, and diverse in nature (cannot be grouped into
facets).
Efficiency and accuracy are important for the task (obviously both would
take a hit if "Multiple.." were used to show the data).

My recommendation to the team is to use a link for cells with multiple
entries. Provide the ability to expand all multiple entries (this can
be useful and practical, if the set is small). Link formatting has to be
distinct from single entry cells.

Lorem ipsum
Dolor sit amet
Consectetur (5 v)
Adipiscing elit (2 v)
Cras lectus

v represents a small image of an arrow pointing down.

I have done a quick usability test with this and three variations.

Tested variations were:
Multiple...
Consectetur (5)
Consectetur (+5)
Consectetur (5 v)

All of them were formatted the same way. Consectetur (5 v) was clear winner.

Thanks, everyone,

Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

On Sun, Aug 30, 2009 at 1:58 PM, Santiago Bustelo <santiago at bustelo.com.ar>
wrote:
>
> Sorry for arriving so late to the discussion.
>
> Oleh, I am a little puzzled about your need to display more than one
> value in a cell. There are several ways to display data, with their
> own properties that can fit or not the needs. One of datagrid's
> properties is, precisely, that one cell equals one value.
>
> Displaying more than one value in a cell would not only add
> complexity, but also break other datagrid properties, as sorting
> values by column.
>
> Perhaps another way to display the data can be more appropiate, but
> without a sample of the data I won't be able to suggest one. Feel
> free to contact me in private.
>
> --
>
> Santiago Bustelo, Icograma
> Buenos Aires, Argentina
>
> // IxDA Buenos Aires: http://www.ixda.com.ar
>
>

Syndicate content Get the feed