Macworld Interactive - an early interactive magazine

I was a co-founder of ICONOS, a pioneering interactive digital media consultancy founded in 1989 as the Multimedia Resource Group. Gary Brandenburg, co-founder and Creative Director, had a relationship with the makers of Course of Action, later to be known as Authorware, which later partnered with MacroMind to create the multimedia giant Macromedia.

Authorware was commissioned by Macworld to create an interactive version of Macworld magazine for their SuperStacks! CD-ROM (Macworld’s first CD-ROM) and Authorware decided to turn the assignment over to Gary and ICONOS. There had been interactive picture books on CD previously, but this was the first to mirror the contents of an existing print magazine.

Macworld SuperStacks! was published in 1990, a year after the invention of the web and about the same time as the first browser was developed — which was before many navigational conventions had been firmly established in interactive media.  

Fig 1. Introductory screen that builds up on the screen with musical accompaniment and narrator’s welcome. The “earcons” and musical compositions in the interactive version were provided by composer Mike Olson of TotallyIntuitive. 

Additional screen grabs by Stuart Cudlitz of Macworld Interactive can be found here: https://www.stuartink.com/MACWORLDarticleCDROM1990/MACWORLDarticleCDROM1990.html

The main article converted to interactive was "Get Realistic" and the accompanying “Art Beat” column, both were transformed into a full-color interactive presentation created with Authorware Professional and which included some luscious 3D renderings of masks. The original featured article was written and art directed by Stuart Cudlitz, outlining the principles of 3D computer graphics and comparing the rendering software then available for the Macintosh computer by giving companies with 3D rendering tools an assignment to complete by the magazine's deadline. 

The following are screen grabs from the interactive version of "Get Realistic.” 

Fig 2. The first screen of the article displays what are now standard global navigations: a selectable menu above, clickable sections on the left, a slider allowing users to scroll to each section and an up/down page-by-page selector at the bottom.

Fig 3. Toolbox - A toolbox is always in the lower left of the screen. Since the composed music was so wonderful the default was to have music, but not narration, turned on from the start. Narrations were provided by the dulcet tones of our partner Joy Kopp. Also available on each screen were larger versions of each image shown, accessible by clicking an arrow with blue background.

Fig 4. Toolbox - This may appear to be the same as the first screen, but note that the large “T” in the toolbox has become smaller, indicating (as the labeling at the top denotes) that the article is now shown in LARGE TEXT FORMAT. It was decided to not use highlights on this option as it represents a display mode and not an on/off choice. Clicking on the Text Mode tool will restore the viewing to regular test. The “Note” option is now longer available while in this larger text format.

Fig 5. Toolbox - The change in the Outline Mode icon below the Music option indicates (as the labeling at the top denotes) that the article is now displayed as an outline. Clicking on the icon again returns the user to regular text. Again, it was decided to not use highlights on this option as it represents a display mode and not an on/off choice.  The “Note” option is now longer available while in this larger text format.

Fig 6. Toolbox - The Electronic Note option allows the user to save notes on a page. In Authorware, notes were saved to the user’s hard drive and appear as a small square dot on the page upon returning, even if the program had been quit and launched again later. A return carriage will close the note, as will clicking outside of it. Clicking on the small blue square will reopen it. Notes can be repositioned and listed from the menu.

Fig 7. Toolbox - This screen is shown when the Help icon is pressed. It describes not only the toolbox options but also indicates the workings of the top menu bar, section choices, section slider, page forward/backward arrows, buttons for additional information, a related screen display, and buttons that return you to the point of origin. Also available were green highlighted text that calls up a dictionary definition when clicked, indications of a hot spot by changing cursor color and thumbnails for returning from large images.

Fig 8. Animation - This screen shows a wireframe model of a camera. What distinguishes it from a print magazine and what is unique to interactive, is the ability to launch an animation.

Fig 9. Animation - This screen shows the last frame in a 15 frame animation (like an animated gif) that rotates the wireframe camera through different positions. At the end of the animation, the activation button now reads “RESTART” to replay the animation. This was a very unique feature at the time, videos being only very small and often only grayscale to match the low throughput rate from a 1X CD-ROM.

Fig 10. Slider animation - This screen shows a color wireframe model of an apple. A slider control is provided as a linear control for displaying various stages in an animation.

Fig 11. Slider animation - By sliding the controller right and left various stages of a distorted wireframe are depicted. ICONOS created the wireframe using 3D modeling software from Paracomp. Again, a slider displaying an animation at various frames was a relatively new option for publishing software.

Fig 12. Drag and Drop - Another unique feature of Authorware was the ability to do drag-and-drop interactions allowing authors to define a drop area, what happened if the drop area was not matched, and the action of the dropped object (to remain at the drop point, return to the origin, the speed of the return, and what was triggered after a successful drop.

Fig 13. Drag and Drop - In this case, dragging and dropping the camera to a different position on the frame around the table setting model triggered the display of eight different perspective camera views of the scene.

Fig 14. Selection with Replacement - Although common now, selecting a choice and having it swap out an image to display the current selection with a highlighted version was a recent innovation in interface design. 

Fig 15. Selection with Replacement - In this case the user could view various objects under different lighting conditions, such as ambient light vs directional light.

Fig 16. Selection with Replacement - Yet another choice was radial light.

Fig 17. Selection with Replacement - In another scenario, users were given the choice to view platonic solids of various colors under white light, red light, yellow light or blue light.

Fig 18. Software Comparison - The point of the article was to demonstrate different rendering softwares in a side-by-side competition. Under each of the products, such as Electric Image, we gave users the option to see a large image, go to the rendering face-off, see a comparison table (common in Macworld magazine articles) or go to the Art Beat article.

Fig 19. Rendering Face-off - This is the rendering face-off page where users can quickly view full-screen images of each mask rendered by different softwares. Each full sized mask is accompanied by a uniquely themed musical accompaniment. For example, masks with wooden texture maps had music devised with wooden instruments, while another with a metal texture map was composed with metal instruments for the same theme.

Fig 20. Rendering Roundup - This is the rendering roundup page where users can quickly view the price and features of each rendering software package.

Fig 21. Rendering Roundup - Clicking on any one of the software makers at the top of a column will provide the same details as well as the mask image and contact information for each product.

Fig 22. Art Beat - The Art Beat article talks about the talent and techniques behind the rendered masks. Note that the Outline Mode is no longer available in this article, and the left panel now has an orange background to distinguish it from the Get Realistic article should users be confused as to where they are in the magazine.

Fig 23. Art Beat - As with Get Realistic, the Art Beat article provides navigations by clicking on sections, using the section slider, or page-by-page selector arrows. 

Fig 24. Art Beat - Similar to Get Realistic, the Art Beat article provides the launching of animated sequences. In this case from the Pixar film, Luxo Jr. Recall that at this time Steve Jobs was now the CEO of Pixar.

Fig 25. Contents - Finally, from the File menu users could get an overview of the contents of the entire print version of the magazine.

Fig 26. Table of Contents - Also included was a popup note from the designer saying that the table of contents of the print version are included here, but grayed out text shows sections not included. Hence, this is why we have always considered this a prototype interactive magazine, yet one of the first.