Mark R. Johnson


[Interactive Screens]
[Amateur Recording]
[24 Hours]




Buttons & Interactivity

As was described above, one of the design goals for this project was to create a user interface that engaged the user without obstructing the original art. Since the original art is focused upon viewing and reading, it was important to create an interface that did as little as possible to distract from this process. One way that this was realized was to use bit dissolve transitions that fade-in visual content smoothly without distraction. Similarly, audio fades were used to ensure that transitions in music were not abrupt and disturbing. Similar efforts were made in designing the interactivity to avoid obstruction. One step in this direction was to avoid unnecessary clicking. Many multimedia titles sold today fall victim to needless clicking -- clicking for clicking's sake. For example, Inverse Ink's Reflux series of electronic comic books, while incorporating some exciting ideas about merging comics with full motion video, implement a poor model of interactivity that requires the user to click on each and every comic book panel. This constant demand for interaction quickly becomes annoying and distracts from the story itself. In designing 24 Hours, great pains were taken to develop an interactive model that did not interrupt the story to force the user to interact.

Since "24 Hours" was originally written as a strictly linear story, it made no sense to try to break it into a non-linear hypertext. This helped to reduce the number of interactive components by limiting navigation to forward and backward movement through the narrative. Other actions judged necessary were to be able to quit the program, to modify program parameters such as sound volume and reading speed, to jump to an index or table of contents for the story, and to view a credits screen. Since most of these actions were expected to be used only infrequently, they could remain for the most part out-of-sight. The only functions that needed to be always visible were the Quit and Continue buttons. It is a generally accepted interface design principle in multimedia design that the quit mechanism always be visible, usually in the form of an on-screen button or menu option. To satisfy this need in 24 Hours, a Quit button was placed in the lower left corner of the screen, where it remains visible throughout the reading of the comic.

The other button that resides on-screen in the lower right corner is the Continue button. This button was necessary because the screen is erased between comic book frames. To avoid erasing the screen before the user is finished reading the current frame, the computer needs to wait until the reader is ready. The only way that computer can know that the reader is ready is for the reader to indicate so, such as by clicking on a button. (This kind of action was not necessary for the pop-up text balloons and panel transitions because they are not destructive effects. If the reader is running a little behind, no harm is done.) The Continue button serves another purpose as well: It indicates to the reader when the entire frame is finished drawing. It does this by remaining inactive and darkened throughout the process of drawing the frame. Only after the entire frame is drawn does the button light and become active. This is particularly useful because it prevents the user from prematurely advancing to the next panel, accidentally skipping over text and dialogue that has yet to appear.

In early designs for 24 Hours, a need was found for the ability to quickly move back and forth through the frames of the story, such as when a reader chooses to begin a session where he or she last left off. To satisfy this need, Previous and Next buttons were placed centered at the bottom of the screen. However, this was soon determined to pose usability problems. Almost immediately, readers began using the Next button to advance frames instead of using the Continue button. The problem with this was that the Next button, unlike Continue, was always active. As a result, readers would inevitably advance frames before the current frame was finished displaying. To address this problem, the Next and Previous buttons were removed from the screen and were replaced with Next and Previous menu options with corresponding command-key equivalents. By removing the buttons from the screen, it discouraged improper use of the function. At the same time, however, by providing command-key equivalents for the actions, a user could, in fact, easily access the function when needed. Further user testing has proven this solution to be quite effective.

All of the secondary functionality of 24 Hours resides in a menu bar at the top of the screen. This includes the navigational controls: the link to the About screen, the Beginning, Next, Previous, and End functions, as well as a link to the Index. Also found in the menu bar are Volume and Reading Speed settings that allow the user to adjust either parameter to his or her liking. In order to conserve screen space, the menu bar remains hidden during normal operation of the program. This also helps to cut down on the visual clutter that may distract the reader from the comic itself. The menu bar becomes visible only when the user moves the mouse up to the top portion of the screen, at which point it appears in anticipation of the reader's desire to use it. Normally, user interface design principles discourage this sort of hiding of functionality. However, in this case, one must consider the balance between the usefulness of the menu-based functionality and the visual clutter caused by the presence of the menu bar. Since all of the functionality contained in the menu bar is considered secondary to the operation of the program, it makes sense to keep it hidden when not in use. If the user specifically seeks out the extra functionality, it is reasonable to expect that he or she would consult the manual included with the CD-ROM, which would describe the use of the pop-up menu bar. In all of the user testing that was performed on 24 Hours, not a single user found it necessary to use the menu bar, and yet every one discovered it on his or her own, suggesting that it is an effective design.

[Previous Page] [Table of Contents] [Next Page]
    [Return to Top] Copyright 1997, Mark R. Johnson.
Last modified 6/11/97.