NY Times - Barack Obama Interactive Timeline

Thank you for all of your valuable comments and insight regarding the BBC Timeline I posted a few days ago. In that same spirit, I'd like to point out the following from the NY Times website and gather your thoughts:

Please give it a spin and let me know what you think. Do you think it is intuitive to navigate? Does it present the information clearly? Would the information you are presenting work well in a format like this?

T2 Sneak Peeks: iPhoto Import

Here is a screenshot sequence that shows creating a photo timeline in about 3 clicks. T2 will be able to import photo albums from iPhoto and chart them based on the date they were taken! This is going to be very cool for vacations and creating timelines of your kids' first steps, etc...

T2 Sneak Peaks: Event Rows

A while back, I posted a tutorial for creating parallel timelines using Bee Docs' Timeline and page layout software. Charting multiple rows of events is a great way to make comparisons. For instance, you could compare one persons recollection to another or you compare the history of painting with architecture.

In T2, multiple event rows will be a built in feature and will be easy to create. For example, I have created a timeline that compares major releases of Windows OS with major releases of Mac OS X:

T2 Sneak Peeks: Bulk Edit Mode

If you need to create a timeline with very many events, it is often best to enter all the data first and then format the timeline. In the current release, I often use Excel to create tab delimited text files of my events and then import them. However, it is not very convenient to use two different applications...

I am pleased to announce that T2 will allow an editable table view of your events! It looks like this:

In table view, you will be able to add, delete, and edit events as well as drag images onto events and assign event colors. You will also be able to use search to find exactly the events you are looking for.

As an example of how helpful this feature can be, the timeline shown in the screenshot has 254 events from wikipedia (printing on letter size paper spans 140 pages). To color all the events related to Russia red, I searched for "russia" then did a "select all" and chose red as the event color. I'll give more details on search in the next post...

T2 Sneak Peeks: In Place Editing

This is what editing an event looks like in T2:

When I first launched released Bee Docs' Timeline 1.0 in May 2005, it was designed to allow folks to click an event to select it and then edit the event data and formatting options in a side drawer.

For T2, I decided to rethink the paradigm to make the editing process easier and more efficient. Now, you will be able to double click an event to edit all of its data "in place" in the timeline. This will be easier, particularly for new users because the area of attention stays the same instead of shifting to another part of the screen. It also allows you to edit events when the formatting panel is closed or the chart is in full screen mode.

I find that it is also nice to separate the event data from the presentation options. The edit form that you get upon double clicking an event only contains the facts associated with an event. Colors, fonts, sizes, and other visual options are left in the formatting panel. In this way, you can be focussed on entering events quickly and then when you are done, you can style the timeline appropriately.

Making Design Concept Displays

My friend Tony J, of Ratio Interactive and I were talking a while back about presenting User Interface designs to team members and clients. The de facto standard for presenting designs generated on a computer seems to be PowerPoint but Tony was explaining how his team has begun to use prints mounted on boards, even for draft designs being discussed internally. He feels that having a physical object helps people "respect the design."

I also like the idea of presenting designs in a physical media because it allows me to leave the designs around the office for people to walk by, point at, and discuss. It is also great to make displays of competitor products to compare and contrast. The non-linear browsing just doesn't work as well with PowerPoint.

I asked Tony what steps Ratio takes to prepare a design exhibit. This is what he said:

1. create designs (of course)
2. print designs on ink jet printer
3. obtain black matte board (8-ply is nice and "substantial" feeling)
4. cut a trim print outs to size (if need be)
5. cut matte board to size based on print outs to be mounted. Make sure to lightly pencil in your mounting marks (the corners) so you can easily place the printed piece after it's sprayed.
6. use Super 77 (from 3m) spray mount. (very permanent, no second chances. But the paper becomes 1 with the matte) Home Depot sells it very inexpensively.
7. In a well ventilated area (stair-well, covered outdoor area, or garage) we place the printed piece face down in a box and spray the back until it's covered like a light morning dew.
8. after you've sprayed the paper you have a minute or two to place it on the matte. Be careful to not let it touch the matte until you're ready to commit. I recommend starting with the corners on one side and placing that side edge between the corners. Then carefully stretch the paper across the matte taught and bring the opposite corners to their marks on the matte. This will give you the opportunity to slightly stretch and align as you go to make sure you hit the marks on the opposite corners.

This week, I make my own exhibit for a project I am consulting on. I used a slightly different technique. Here is what I did:

1. Took screenshots of popular web sites as well as my own designs and imported them into iPhoto.
2. I cropped them into a normal print size and used iPhoto to order the images as prints. I did a second batch at a local Costco using their "matte" finish prints and like the look even better. 5 x 7 size worked nicely for me. The nice thing about photo prints as opposed to doing them on an inkjet is that the quality is high, the is no expensive ink to run out, and there is no cropping required.
3. I used black foam core for my backing.
4. Instead of glue, I tried this Handi-Tak Reusable Adhesive stuff that I found. I cut it into small pieces, roll each piece into a ball, and put a little ball on each corner of the print. Then I press it on the board using gloves or a tissue to avoid finger prints. I like that the Handi-Tak makes the print hover off the backing by about an 1/8". It also is easy to remove and reposition, which is nice if I don't get them straight the first time or so that I can reuse the backing board.

All in all, it costs a few bucks and about 10-15 minutes to make one of these boards once you have the supplies. I'm a fan of this presentation method so far. Earlier this week I did a Keynote walk through of a mock-up design idea, but had a board with all the screenshots too so that people could compare it against previous slides for discussion.

If you are a presentor or a designer, what is your favorite method for presenting exhibits?

Timeline with Gradient Fill

T2 is well underway. I'm going to be a bit conservative about posting screenshots of new features until I am ready to release it, but I wanted to show a timeline with a gradient fill in the background.

Besides gradients, T2 will also allow a transparent background which will be cool for exporting timelines as PDF. The transparent background will allow the chart to be composited with other media. For example, a timeline could be composited over a video for a documentary or used over an interesting background in a Keynote presentation.

It is a small upgrade from a technical perspective, but should allow users a lot more flexibility.

Timeline Update (Windows Version)

I've been working on the Windows version of Bee Docs' Timeline this week. Here is the current screenshot. Click it for a full size version:

First, I created a custom timeline control that handles a background color, adjustable foundation, and draws a text string. Then, I hooked up the toolbar buttons so that the font, font color, background color, foundation shading, and foundation height can all be adjusted. I also hooked up the zoom buttons so that the timeline can be zoomed. I also wrote some code that finds a nice starting location for the options window when it is opened.

Then, I went down the File menu and added functionality to each item. The software can now perform: New File, Open, Save, Save As, Print, Print Preview, Export Timeline (as PNG or TIFF graphic), Exit. I also added functionality for displaying the document name in the title bar and tracking whether or not a document is "dirty" so that I can display appropriate warnings when the application is exited.

Next, I am going to work on undo / redo functionality and add the ability to set the timeline size based on the print setup options.