Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

In our application, we have a table view which shows the values of some hierarchical model.

For example, the hierarchical model could be

Root
|_ Property 1
|_ A parent
   |_ Property 2

In this case, the table would have 2 columns

Property 1 | Property 2

In the table header, we only show the actual property, but not the parent(s) as there is simply not enough room to display the whole path including all parents (the number of parents can become rather large, and so does the number of columns).

The whole path (which is relevant!) is displayed in the tool tip of the table header. This is of course very hard/near impossible to discover for the users of our application. Does anybody knows a good visual clue to hint towards our users that the tool tip contains relevant information. Or another mechanism to display this information ?

Note that it is possible to sort the data in the table by clicking on the header, in which case there appears an arrow in the column header (right side), indicated it is sorted. This might limit our options to add a visual clue in the header.

In case it is relevant, the table appears in a Java application with a Swing-based front-end.

share|improve this question
2  
Some useful ideas on this related (but different) question: ux.stackexchange.com/questions/20265/… –  JonW Aug 7 at 9:23

4 Answers 4

up vote 3 down vote accepted

A small coloured triangle hint in the very top right/left corner of the cell.

Examples:

Oracle ADF Desktop Integration (very similar to your exact scenario)

enter image description here Source: http://docs.oracle.com/middleware/1213/adf/develop-desktop-integration/adf-desktop-table-comps.htm

Microsoft Excel (related but not the same scenario)

In Microsoft Excel when there is more information to display on a cell (error info options) then a small coloured triangle icon is applied to the very top left corner. The user clicks in the cell which reveals an error button. This is then clicked to reveal a list of options to fix the error. enter image description here

share|improve this answer
    
I like this suggestion. Will definitely try this one out –  Robin Aug 7 at 13:41

Similarly to the way an abbr and an acronym tag is styled to indicate there is more to read if you hover, you could add a dashed/dotted line below the headers that have a tooltip.

Example

enter image description here

N.b.

I'm not 100% sure on the 'rules' on this, i.e. can you use a dashed underline to indicate any type of tooltip or can they only be used for actual abbreviations or acronyms..?

share|improve this answer
    
I do not think this will work in the case where all headers have a tool tip. Then I am afraid it will just look like the design of our table is one where we underline the header with a dashed/dotted line –  Robin Aug 7 at 11:04
    
good point I agree it may not work if all headers have the same styling, it could get lost as just decoration rather than an indicator. –  Dave Haigh Aug 7 at 11:09
    
A lot of people misuse it, but really it should be for the purpose it was designed. Thinking of accessibility here - a screenreader user would be informed that the text is an abbreviation, so that is what they would be expecting. –  JonW Aug 7 at 11:43
    
agreed it may be a bit of a miuse hence my comment at the end. With regards to screenreaders, I wasn't suggesting using an element (not sure what it is in Java) that denotes its an actual abbr but rather just replicating its styling. –  Dave Haigh Aug 7 at 11:53

You can use an icon to indicate that the box has a hover state. The actual icon you'd use would depend on the look and feel of your UI, but icons I've seen used for this purpose include:

  • Magnifying glass icons
  • square frame (stylised window) icons
  • Mouse cursor icons
  • speech bubble icons

The important thing is to signal to your users that some of the headers are hoverable, and some are not. The best way to do this is to use your design to make the correct headers afford hovering.

share|improve this answer

It is very common to use an ellipsis (...) to indicate truncation. Many UIs use this to indicate that the full text is not seen in a text field, grid cell, or other control, but will be available on hover.

In a grid cell it would work like the below screenshot:

enter image description here

What you could do with your header is prefix the property name with ellipsis like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
2  
im not sure that the question is about a long string having to be truncated. I believe the tooltip will display a more detailed column header compared to the short version already displayed in the table. i.e. its not a matter of truncation. –  Dave Haigh Aug 7 at 11:49
    
@DaveHaigh It is a text label on a header that only has space to display the name of the child property, rather than the full text of the path. The title of the question describes this as "truncated". –  Franchesca Aug 7 at 12:42
    
I think that's a misuse of the word. The actual problem they have explained in the question detail doesn't sound like truncation to me. –  Dave Haigh Aug 7 at 12:47
1  
@DaveHaigh Does this invalidate my suggestion though? An ellipsis can be used to indicate "more" information in many other UI contexts. For example, it is often used on buttons as an affordance that there is a dialog (Save As...). –  Franchesca Aug 7 at 12:51
    
no definitely not, its still a valid suggestion in my opinion. just clarifying that the question isn't about truncation per se. –  Dave Haigh Aug 7 at 13:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.