T2 - Images and Links

Thursday, December 07, 2006

In addition to line wrapping and notes, two Bee Docs' Timeline features that are often requested are the ability to add images to events and ability to link events to a document or URL.

Images

There are a few design challenges related to images. Most importantly, I want to have a visual design that seems obvious and natural. I don't want the images to appear like they have been tacked on as an afterthought.

Another challenge is that as events support more features (titles, dates, images, notes, links), users may choose any combination of these things in the same timeline. I want events that show only an image to look great next to events that use all the features, or next to events that don't have an image.

I have tried a bunch of different design ideas over the past week. I've tried placing the image above, under, and next to the notes, putting the image next to the title, etc... Here is the design I like best so far:

(Like many of the other design ideas I'm showing on this blog, this was mocked up using Apple Keynote which is my rapid prototype tool of choice these days.)

Links

Links are another often requested feature. Lawyers, in particular, have wanted to be able to link events in a timeline to external documents or videos.

One of the design challenges with links is that events are currently selected with a click, and I always get annoyed using software that makes me accidentally click links... Don't you hate it when you enter an e-mail address in Word and then try to edit the address and instead it launches your e-mail client. Arg!

The other challenge is that links are often ugly URLs that I wouldn't want to add clutter and distract from the main point of a timeline chart which is to show the relationships between chronological events.

Here is my favorite solution so far. When an event isn't selected, you don't see anything related to the link. When it is selected, the link (if it exists) shows up as an arrow button. Clicking this arrow would open up the external document or web page.

One thing that I'm thinking would be fun is automatically generating timelines based on news feeds (I'm doing a really rough version of this in my blog header). The article title could be the event title, the first few lines of text could come from the article, as would the image. If you clicked the link it would open the original article in the web browser.

Please let me know whether or not you would use features like these and, if so, what you would use them to present. I also welcome comments or suggestions on the design ideas.

Labels: image, links, photos, t2, timeline software