Tuesday, September 02, 2014
Here is a retro screenshot of Bee Docs Timeline version 1.0 running on Mac OS X 10.4 Tiger.
At that time, events could contain an event title and dates. Other information such as notes, images, movies, links, and tags were added in later versions. As I mentioned in my previous post, the user interface was designed around those initial requirements.
When I added the ability to use notes and media, almost everyone took advantage of those features. In fact, people took advantage of those features to a degree that I did not initially expect.
As I have provided e-mail support to customers, I have seen hundreds of timelines. Many of those timelines use notes that are paragraphs long. Notes that are about as long as a printed page in each event are not uncommon.
A graphical timeline chart must trim or scale down this data in order to display it efficiently together with other events, so it has become important to have an additional way to view and edit your events. It is with this in mind that I developed the Event Poster view.
This view shows all of the information associated with an event in a layout that is optimized to fill the screen, minimize scrolling, and feature your event media. You can quickly flip through your events with a swipe or using the arrow keys.
The Event Poster view also is designed to adapt to a huge range of screen sizes. For example, the iOS version scales between the iPhone and the iPad in different orientations.
This view also presents your events beautifully on any Mac screen. Here is a screenshot of Timeline 3D running on a Mac OS X Yosemite at 1280 x 800:
I originally wrote the layout code for Event Posters when I designed the iOS app several years ago. At that time, it was manually coded layout logic. For the iOS 7 release, I migrated the layout code to use Apple’s auto-layout technology instead. For the Yosemite release I am using the same auto-layout structure, but tuned for the fonts and screen sizes available on the Mac.
The principle that it takes a lot of complexity to make something simple definitely holds true here. There are over 70 layout constraints involved in determining the layout. Many of them change priorities or values based on the contents of an event (for example, the aspect ratio of the event media affects the line wrapping of the notes).
The result is that your content looks beautiful and readable on any screen!
Saturday, August 30, 2014
Ten years ago, Bee Docs Timeline was born out of the idea that a member of a legal team could record events as a witness was describing them and then show the resulting timeline chart to the witness for confirmation. Two main parts of this challenge appealed to me as a product designer. First, quick real-time entry of the data. Second, a clear and professional presentation of the data that did not require lots of tweaking.
Both of these activities remain central to the design of Timeline 3D. The upcoming release will have a new interface design that further clarifies and reinforces these features. In order to understand the coming changes, I first want to review the design of the software as it exists today.
Here is an image of the current version of Timeline 3D for OS X (v3.9):
The main layout of interface has stayed basically the same for the past ten years. A layout of your timeline fills most of the window. This graphical presentation dynamically adapts to the contents of your document as well as the size of the window.
Double-clicking an event reveals an edit form that allows you to add or edit information like the event title, date, and media. You are responsible for that information as well as the date formats, colors, font size, and image sizes. The software is responsible for finding the best way to position everything in the timeline based on the these settings.
This structure had many advantages over timeline product that came before it. Notably, it removed the time consuming task of arranging event positions and tick marks. It also looks nice and works great for timelines where most of the events fit on a single screen. In the beginning, before event notes and media were an option, most of the timelines that customers created did fit on a single screen.
However, there are some down sides to this arrangement. It muddies the division of responsibility between the software and the user. When you want the timeline layout to fit more compactly, it involves changes to the timeline elements so that the software can change the timeline layout. This is confusing to many people at first.
The whole structure of editing your data within a dynamically changing timeline chart also does not scale very well. If you have one hundred events, for example, changing the date of an event may cause it to move completely off screen as the layout adapts. Then you need to go scrolling to find it.
Furthermore, the layout logic is complex behind the scenes and may take a few seconds to computer for a large timeline. The software can feel sluggish when it is constantly calculating the layout as you edit your content.
Finally, screen sizes on Apple products were fairly predictable when I introduced Timeline 3D. Now, the screens you work with every day can cover a huge range. Everything from a 3.5” iPhone to an 11” MacBook Air to a Mac Pro with multiple 4K displays.
The existing layout works well for very large displays, but it involve lots of side scrolling on the smaller displays which represent Apple’s most popular devices.
In the next Development Log, I will introduce a new design paradigm that addresses these issues in the upcoming version of Timeline 3D for OS X Yosemite.
Wednesday, August 20, 2014
I am planning to use this blog to share some of the technical details that I am working through for the upcoming version of Timeline 3D for OS X Yosemite and Timeline 3D for iOS 8.
After the conceptual design of a major new release, usually the first code that I develop is centered around the document format. I need a document format that can meet the goals of the release and that can also have a migration path from the previous formats the software has used.
New platforms and features have new requirements. After all, Timeline 3D was originally designed before the iPhone, iPad, and iCloud, not to mention the changes in the Mac platform during that time. Timeline 3D also did not originally support embedded images, movies, and audio.
Timeline 3D is almost ten years old and has supported six different file formats in that time. These formats include a custom binary format, SQLite Core Data store, XML Core Data store, as well as the ability to import and export tab-delimited text.
The file extensions have been txt, bdt, bdt2, bdt3, and bdt4 (short for Bee Docs’ Timeline). The new format will have a file extension "TL3D".
For the new version of Timeline 3D, my main goals have been cross-platform compatibility and support for syncing data. To this end, I designed a file format that is a folder structure of text (JSON format) files and media files in their native format (JPG, PNG, PDF, MP4...). Each event in the timeline has it's own folder with a data file and media files.
The new format is inherently cross-platform because it is just text and media files. There is nothing OS X specific, iOS specific, or even Apple specific about the format. If I wanted to build Timeline 3D for another platform or have a web server generate Timeline 3D files, the file format would still work.
The new format is also atomic. Change the tags in an event and only one little text file needs to be saved and synced. Change the image in an event and only two image files need to get synced (the media you added and a jpg thumbnail).
Since QuickLook and Spotlight were introduced, I have stored the thumbnail, preview, and search data within the file format. If I did this in a synced app, you could potentially be syncing large multimedia data every time there is a minor change to an event title or date. So, the new format uses an external QuickLook and Spotlight generator embedded in the Timeline 3D app. That information is now generated by your Mac as needed and not synced with the file format.
While the file format is not an aspect of software that customers think about often, the file format is the foundation of the features and performance that are critical to the app. The new format should be a great foundation for Timeline 3D for the next decade.
Wednesday, July 23, 2014
To all of my loyal Timeline 3D customers, thank you very much for your support! I have some exciting and important news regarding Timeline 3D for Mac and iOS. First, the bad news...
Yosemite and Timeline 3D v3
Timeline 3D v3 and Easy Timeline for Mac are not compatible with Yosemite OS X 10.10. I built the core functionality of these apps 6-7 years ago on features of the operating system that are no longer supported by Apple. I will be discontinuing Easy Timeline from the App Store immediately. Timeline 3D v3 for Mac will continue to sell for those customers running OS X 10.6—10.9.
If you are interested in running Apple's beta of Yosemite, please be aware that there is not yet a version of Timeline 3D that will run on it. My suggestion is to use our iOS app until we are able to ship a new OS X application (more info on that below).
Timeline 3D in the Future
For several years, I have been anticipating these changes and have been developing technologies to support a transition. My goal for Timeline 3D is to allow a seamless experience across your Mac, iPhone, and iPad. I was pleased to see Apple reveal a similar vision for their platforms at this year’s WWDC.
Many of the next generation features are shipping in the iOS app already and will be coming to a brand new OS X version of Timeline 3D over the next few months. This strategy has many benefits.
Timeline 3D for OS X benefits:
Speed and Stability — Build on modern OS X frameworks and technologies.
iCloud sync with other Macs and with iOS
Retina display support for 3D presentations.
Better animations and lighting in 3D timelines.
Faster, smarter, and more accurate date parsing in all localizations
Per-timeline localization — For example, build a French timeline if you are in the UK
Auto-save and document versions
3D web exports using WebGL
Simplicity — No more tweaking fonts and image sizes to get a timeline to fit on a page.
Continuity Features — Seamlessly move between Apple devices without loosing your place.
App Store Distribution — Timeline 3D for OS X is coming to the App Store!
Timeline 3D for iOS gains:
Support of iOS 8 features and devices
iCloud sync with Macs and other iOS devices
Movie Export — Render HD movies of your 3D timeline.
Continuity Features — Seamlessly move between Apple devices without loosing your place.
Please note that this ground-up redesign means that some features that have been a part of Timeline 3D for Mac will not be available immediately on the new version, for example, event rows and event colors. As I bring new features to Timeline 3D, they will be added to both platforms at the same time whenever it makes sense to do so.
Timeline 3D for OS X will support OS X 10.10 and above. The new Timeline 3D for iOS will support iOS 8 and above. I expect to launch the new versions soon after Apple officially launches their new operating systems later this year.
Timeline 3D is going freemium. For free, anyone will be able to download Timeline 3D for OS X or iOS, make and edit timelines, and present them in 3D. You also will be able to sync timelines over iCloud and share timeline documents using AirDrop or Dropbox. There is no time limit and no limits to the number of timelines or events that you can create and present.
If you are a regular user of Timeline 3D, there will be an option to purchase unlimited exports, in which case the app will never present an in-app purchase option to you again.
If you prefer an à la carte option, then exporting your timeline will require an in-app purchase. There will be a fee each time you print or export a PDF, PowerPoint slideshow, Keynote slideshow, HD Movie, or WebGL website. For example, if you use the timeline occasionally for a homework project, the software should be much less expensive for you than it is now.
The new pricing model is designed to allow people to use the core features of Timeline 3D without paying (there are no free trials in the App Store). It also allows schools to install a usable version of Timeline 3D on every iPad and Mac for free. It allows current customers to make the switch without paying to gain access to their existing timelines, and it enables you to send your timeline document to someone who does not yet own the software without requiring them to purchase.
I am excited about the future of Timeline 3D. The work I am doing now builds on over 10 years of experience with timeline software and thousands of support conversations. I am also a bit nervous, because I know that it may be a bumpy few months during the transition for some of you. I am committed to making the transition as fair and as painless as possible for existing customers.
Wednesday, December 04, 2013
One of the most beloved features on Timeline 3D is our ability to create Keynote presentations from your timeline automatically. If you have not used the feature before, it renders 3D images or movie segments based on your timeline and places them in presentation slides creating the illusion of animating through history.
Of course, the Timeline 3D application can present your timeline as well, but the nice thing about using slideshow software is that you can integrate your timeline into your other content and also send the slideshow to computers that do not have Timeline 3D installed.
Unfortunately, Apple recently made changes to iWork that prevent this feature from working. We were caught off guard, because Apple did not pre-announce these changes before public release (unlike OS updates, which have developer betas). Many of you sent us e-mails to let us know that you are missing this feature.
This is not the first time that Keynote has changed the way that it interfaces with third-party apps. When Keynote was first announced in 2003, Steve Jobs highlighted the XML file format, which could be “hacked” by third-party developers. The first time we integrated Timeline 3D with Keynote, we used the Keynote file format to generate the presentations.
At some point, the iWork file format changed to a proprietary format, and it became necessary to use AppleScript to build Keynote presentation. In other words, instead of building a Keynote file directly, Timeline 3D instructed Keynote to build the presentation for us.
With the most recent release of Keynote (6.0), Apple has completely re-engineered Keynote with more modern technologies and with more iOS compatibility. Unfortunately, they removed most of their AppleScript support, which makes it much more difficult for third-party apps to create or manipulate slideshow content.
Apple has hinted that AppleScript support may be coming back in the future, but for now it is gone and so is our ability to control Keynote.
Meanwhile, over the past decade, our friends at Microsoft have been opening up their MS Office file formats... For PowerPoint, the latest versions default to the PPTX file format, which is well documented XML format.
Fortunately for iWork users, Keynote can also open PPTX files!
So, for the past few weeks, we’ve been working on a way for Timeline 3D to export PPTX files. Besides replacing the lost Keynote feature, there are several advantages to this approach.
The PPTX file can be opened with Keynote, PowerPoint for Mac, or PowerPoint for Windows. This will make things easier for MS Office users.
Because we can generate the file directly, you do not need to own Keynote or PowerPoint to generate these presentations.
Even if you do own Keynote or PowerPoint, those applications to not need to launch in order to generate a slideshow.
And most importantly…
One more thing…
We are adding the ability to create slideshows to Timeline 3D for iOS!
The same technology we use to create PPTX files on the Mac can also work on your iPhone or iPad. That means that you can create a PowerPoint or Keynote presentation on your mobile device and then send that slideshow to a PC via Mail or Dropbox, or you can open it directly in Keynote on your iOS device.
At this time, Timeline 3D for iOS can create slideshows using still images but not movie segments (the Mac version can do both).
This will be a significant upgrade. Especially for our customers who use our software in a Microsoft Windows or MS Office environment.
The new slideshow features are available in Timeline 3D for Mac today. The new version of Timeline 3D for iOS has been submitted to the App Store and should be available in the next few weeks.
Wednesday, September 25, 2013
When we launched our original web publishing service on the Mac, we received a lot of feedback from customers who wanted to tweek and customize the timelines in order to integrate them into their websites more fluidly.
I designed that publishing service to be a very simple, one-click, web publishing service with much of the complexity hidden on our servers.
This time around, our new web publishing feature (debuting on Timeline 3D for iOS 7) aims to maintain the same ease-of-use for the people that just want to share a timeline, but also aims to be more hackable for programmers and design pros.
Hosting your own files
Timeline 3D for iOS 7 enables you to export all of the web files required for your timeline to Dropbox, allowing you the opportunity to manage the hosting yourself. For example, you could publish the timeline on a secure server (like an intranet). It also gives you an opportunity to modify the files before publishing.
Customize Style Sheets
Web designers may want to change some of the colors and styles of their published timelines via CSS, and we are providing access to the individual web files to enable them to do so.
However, there are a handful of CSS settings that might be useful for tweaking. I have formatted these settings in a human-readable layout with plenty of comments and placed them near the top of the “index.html” file. These settings should be easy to find and modify for experienced web developers.
While the timelines themselves use pre-rendered graphics and cannot be modified via CSS, the color and behavior of the navigation controls can.
For example, you may want to adjust the HTML body background to match the color of the page the timeline will be embedded in so that any rounding errors around the edges of the pixels are not visible.
You may also want to change the color of the bee-line at the bottom of the timeline to match your logo or the media within your timeline events.
Finally, you may have licensed a custom font for your website, and you can change the CSS to use that font for the bee-line mouse overs.
Adding custom poster image
As an example of another “hackable” element, you may have a special situation where you want to display a poster image that is clicked to load the interactive timeline.
Perhaps the poster image contains instructions on how to use the keyboard to navigate the interactive timeline. Or, perhaps you want a highly optimized poster image to save some bandwidth on a site with millions of visitors.
Now that you have access to the files, you can add content like this before the timeline loads.
How to embed a timeline into your website
By default, if you navigate to the web timeline, it will adjust to fill the window of your web browser (or your screen if you are on a mobile device).
If you embed the timeline into your website using a standard iframe tag, it will automatically size to that iframe. For example, the timeline embedded in my announcement blog post uses code like this:
<iframe src="http://i.interactivetimeline.com/demo/index.html" width="500" height="365" frameborder="0" scrolling="no"> </iframe> <p> <a href="http://i.interactivetimeline.com/demo/index.html"> View Full Size </a> </p>
Embed at any size
Our web publishing customers have told us that they want more flexibility to embed the timeline into their websites at any size. For example, I know this blog post will be 500px wide when styled for our website. If I include images, movies, and timelines, then I want them to be 500px wide.
I may want a long and skinny timeline to use as a header for my website or a portrait-sized timeline to use beside an article.
This is now possible with web timelines published with Timeline 3D for iOS.
As I discussed last week, our new web publishing feature has two modes. It uses WebGL in browsers that support it. When the timeline is shown in WebGL, it will always adapt exactly to the window or frame that surrounds it. The size and aspect ratio do not matter.
If the end user’s browser does not support WebGL, then we show them an interactive sequence of pre-rendered images instead. Since these are pre-rendered, they are not quite as flexible on the size.
We render out each image in about a dozen different aspect ratios if you publish with the default settings in Timeline 3D. Not only that, but each image is rendered in three different resolutions.
The result of this magic is that the timeline always looks great, fills the available space, and uses bandwidth appropriately.
If you are embedding the timeline in your website, be sure to test it on a non-WebGL browser and tweak the aspect ratio until the timeline fills the iframe completely.
If the aspect ratio your coded is not available as a pre-rendered size, then there will be a border around the entire image. When you hit a pre-rendered aspect ratio exactly (or within a few pixels), the border will go away and the image will display to the edges of the frame.
Pro Tip: A more efficient render
As you may expect, it takes some time, battery power, and bandwidth for your iOS device to render all these image variations and upload them.
If you are planning to present your timeline exclusively within an embedded iframe, and if you know the aspect ratio of that iframe in advance, then you can select that aspect ratio in Timeline 3D.
If you choose a specific aspect ratio, Timeline 3D will skip all of the files that are not needed for that situation.
Specifying an aspect ratio before publishing also has the benefit of using nice simple ratios for easily calculating the optimal embedding size. “Adaptive” uses actual pixel ratios of common mobile browser, which are not as mathematically pure.
As you can see, the options for publishing a timeline are now more advanced. You can tell by the length of this post!
Our hope is that designers, web programmers, and news media will find Timeline 3D to be a valuable and flexible tool for telling their stories. If you have any questions about web publishing, please send us an e-mail at email@example.com.