Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 2 down vote favorite

I am having a hard time to configure a proper way to display a family tree in a horizontal timeline. Most of family trees do not represent events based on time points, but in my case I will have to place the whole story in a time grid.

On top of the UI is a "year" navigation, showing years in order like 1970, 1971...

To be honest I have not seen a solution like that anywhere, so maybe it just isn't possible...

share|improve this question

3 Answers

up vote 4 down vote

You don't mention which is the aspect of the family tree you are having trouble with. Horizontal trees can use time or be represented as a timeline, the problem is that the data usually increases on each generation, so you end up with something that looks like this:

enter image description here

But it sounds like you might be following only a few branches, not the whole tree, so in that case the layout would be similar to a timeline.

I found some good examples of 'effective' tree-timeline cross-breeds in the Genelines Timeline software page:

enter image description here

enter image description here

enter image description here

I think the key to drawing an easy to understand tree is to maybe drop some of the information (in the last example the timeline shows how many kids each person had, but doesn't say anything else about them).

share|improve this answer
Thanks for reply. The "problem" is that all information / branches must be included, and very soon the tree takes the form of your first example... So I really think that it is almost impossible to create an effective UX and UI. – JohnPixle Nov 1 '12 at 19:43
Is this going to be a website/webapp? – Yisela Nov 1 '12 at 19:44
It's not impossible if you can show/hide elements depending on what the user is looking for. If all information is available at the same time, then everything has the same importance. You mentioned events, so maybe they should be the focus. If you can add some interaction then it's perfectly possible. – Yisela Nov 1 '12 at 20:12
@JohnPixle, why can't the first example be used but aligned with years? So replace where the image says "1st, 2nd, 3rd, etc." with "1970, 1971, 1972, etc." and align each person with the year they were born. (Unless you need to indicate the year they died as well - I don't have a suggestion for that.) Although generations may be staggered, a person would always appear after their parents, so they horizontal order would be maintained. Also, if this is displayed online, you could make use of tooltips that appear on hover. – sacohe Nov 2 '12 at 0:24
up vote 1 down vote

Take a look at www.evolutionoftheweb.com.
This is a nice example of several events visualized in a horizontal timeline.

enter image description here

share|improve this answer
up vote 0 down vote

I fancy @Yisela's second example, the one that shows the lifespan of the persons, with a couple twists.
But the final outcome depends on the purpose of the application: is it focused on historical research, or is it for family usage?
My twists are:

  • First, allow for branch pruning. There are branches one is not interested in, like one who moved to a remote country and had a big family but without any relevant activity, and
  • Show parent-children relationships simply by sticking the boxes together, in order to simplify and save space.

You are in trouble if somebody marries to a cousin. The solution is to display the cousin twice, the second time deemed and linked to the first one.

share|improve this answer

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.