Motion Graphics Design for Document Presentation
Monday, August 01, 2005
As regular readers of the blog will know, we are currently working on new document presentation software for Mac OS X. The basic idea of the software is that if you project documents on a screen during a presentation (such as a trial), then you need a good way to open documents, display them on the screen, and highlight portions of the document for discussion or comparison. When I say "a good way", I mean that it should be simple to use and the presentation should be clear and professional.
This software will use 3-D motion graphics to show a document "call out," which will direct the audience toward a specific section of the document. For example, you may want to call out the total price on a scanned receipt. This week, I have been experimenting with prototype designs of the motion graphics. The following movies show the evolution of the design. The movies require Quicktime 7 to view. Right click the movie link to download them:
Movie 1 (332 kb) - This is the traditional call out. The selection region simply zooms in. The weakness of this method is that the original page is covered up and you loose the original context of the region. It has the advantage of being nice and simple though.
Movie 2 (460 kb) - This was an attempt to fit both the call out and original page on the screen at the same time. The call out comes forward while the original page goes backwards. Notice how we are using shading to enhance the perception of depth. The weakness of this design is that there is enough going on at one time that the eye is distracted. The viewer thinks "that is cool" but is not focused on the call out.
Movie 3 (464 kb) - A very simple design (simple is good), is just to zoom the entire page so that the selected region fills the screen. The final product will probably include an option to do zooms this way.
Movie 4 (448 kb) - I recently started experimenting with a combination of the full page zoom and the call out. This example shows the entire page zooming in, then the full page goes back to the background leaving the call out front and center. I think it is a visually appealing design that is not too distracting. Unfortunately, the call out still covers the full page.
Movie 5 (676 kb) - This is my favorite so far, the full page zooms in and out leaving the call out as in Movie 4, but we are also using a horizontal tilt and non-centered call out so that the original document and call out can be seen at the same time.
Take a look at the movies and give me your feedback as a comment. If you display documents during presentations, let us know what kind of the documents, what kind of presentation, and your ideal method of performing document call out / zooming. Thanks!
6 Comments:
Freaking awesome! I really like Movie #5, but you should raise up the call out from the horizontal tilt. Movie #4 is excellent, too.
Will the background color be customizable? Also, how are you selecting the call out?
I prefer Movie #4. Movie #5 subtly distrorts the excerpt by making the text at the end bigger than that at the beginning. It is also a little too flashy, and that is a distraction.
Adam, these look great!
I agree with prior comments: no. 4 and 5 are very interesting. However, I don’t think the horizontal tilt in no. 5 adds anything. I also think it’s important to have the full original visible, not hidden by the callout; to retain highlighting or outlining on the original, as a reference to where the callout came from; and to provide for several callouts on each page. I’m not sure how the last point works with the type of zooming you’re playing with.
Adam, I applaud you for tackling this problem.
They are all nice. Why do we have to choose???
I particularly like #4.
I do wonder about the desirability of distorting something in a trial, though, as in #5.
Will one be able to move the callout independently of the original image without messing it up? (in other words, will it be floating?)
How about multiple callouts?
In what context will all this happen? (IOW, will we be working within a specific app, be able to do this in various apps or will this work in the finder?
I have many more questions.
These movies look like they were done in Keynote. No? Are you doing them in Keynote to just give us an idea of what you want to do?
These movies were created with Quartz Composer which is included in the Tiger development tools. It is really a fantastic tool, you should play around with it if you are a Mac developer interested in graphics.
I will be coding the actual product in OpenGL so that I have finer control over the parameters and can use the core code on multiple platforms (since OpenGL works on Mac, Windows, and UNIX).
Post a Comment
<< Home