|
Imagine that you are asked to create an interactive CD-ROM regarding the early, and now famous, U.S. expedition led by Lewis and Clark in the early 1800s. The goal of your application is to create a unique user experience enabling a user to learn about and explore the:
As part of designing this interactive experience, let's create a navigation concept based on common themes occurring at different geographic locations along the expedition route. The navigation concept allows a user to drag a theme keyword such as Hardships and drop it on a route location such as Lower Missouri. In response, the application jumps to the content section corresponding to the intersection of that theme keyword and route location; e.g., to the hardships incurred at the lower Missouri river. Let's sketch this navigation concept and a whole lot more. On a new storyboard, scribble the text, Lewis & Clark at the top of that storyboard. Under and to the left of this scribbled text, sketch a rectangle and insert an image of Lewis. To the right of that image, sketch another rectangle and insert a picture of Clark. Between the two images, sketch some ink strokes to be a placeholder for a short synopsis to be placed later. The storyboard editor should look similar to this. To sketch the navigation concept, scribble the words, St. Louis, Lower Missouri, Upper Missouri, Divide, Pacific, and Clatsop. Arrange the words in a relative row. Next, scribble the words, Confrontation, Hardship, Sites/Sounds, and Wildlife. Arrange these words in a relative row under the others. Now, sketch a rectangle around each word. The storyboard editor should look similar to this. Sketch an ink stroke from one of the bottom concept words; e.g., Hardships to each of the route location keywords above it. A default event of drag and drop and a default action of play audio will be assigned. Change the default action of play audio to a navigation or transition action for each of the behavioral ink strokes. When prompted for a destination storyboard, enter S2, as we will create that storyoard shortly. The storyboard editor should look similar to this. If you like, operationalize the sketch (press the play button in the lower left corner) and experience dragging and dropping the different theme keywords to the route location keywords. Notice how a rectangle and its contained ink strokes move as a group. Once finished, return to edit mode. Remember that we are not trying to build a fully functional prototype, we are just trying to build enough functionality to determine if this behavioral design is what we want or to communicate this behavioral design to a client or team member. Next, let's create another storyboard depicting the overlap of a theme and route location keyword. In other words, let's create a storyboard to navigate to from the main storyboard. Lets create one for the intersection of Hardships at St. Louis; i.e., the hardships encountered at St. Louis. Furthermore, let's assume that Lewis and Clark experienced three hardships that we want to tell the user about. Select the Storyboard::New command from the main menu or pie menu set. Ensure that the name of the new storyboard is S2 in the content name entry field. Scribble the text, Hardships at St. Louis across the top of the storyboard. Next, sketch three rectangles vertically on the left of the storyboard. Within each rectangle, insert an image serving as a global navigation button for one of the hardships. I used the following images, sand storm, river crossing, and severe weather. These aren't the actual, final content images, just reasonable placeholders to demonstrate the idea. The storyboard editor should look similar to this. On this storyboard, let's place a button that navigates the user back to the main storyboard. Under the last image, sketch a small rectangle and scribble the text Home within the rectangle. Next, enter the text go to s1 anywhere close to the rectangle and then sketch an ink strok from the rectangle to that text. When operationalized, the button will become functional. In the remaining space, draw a rectangle and scribble some text within it. This will serve as a placeholder for a summary of the current hardship at St. Louis. To provide feedback to the user as to which hardship is currently being displayed, sketch an ink stroke from the storyboard start symbol to the first image. When prompted, enter the value of 0 for the elapsed time event. On the behavioral ink stroke just sketched, change the default action to a Hightlight action (the visual language icon with an 'H' inside of it). The storyboard editor should look similar to this. Of course, there are three hardships, not just one. Make two additional copies of the storyboard using the Storyboard::Menu command in the main menu or pie menu set. In each copy, erase the text placeholder for the summary and scribble some new text. That way, when a navigation is performed, the screens are not identical. Also, erase the ink stroke from the storyboard start symbol to the first image. Sketch a new ink stroke from the storyboard start symbol to the appropriate image. Again, enter a value of 0 when prompted and change the default action to a Highlight action. To define the navigation among these three storyboards, you could either use textual annotations as in the second design example or a multi-view as in the first design example. For this example, we will use a multi-view. Create a new multi-view using the Multiview::New menu command (remember to toggle to multiview mode, otherwise you will only see a storyboard menu), and place each of the three storyboards into it. Sketch an ink stroke from each image to the appropriate storyboard. If the default action is not a Navigation, then change it to a Navigation. If you like, you can also use Transition actions instead of Navigation actions. Once complete, the multi-view editor should look similar to this. Operationalize the sketch by pressing the play button in the lower left corner. If you opeationalize the sketch from a multi-view, the system starts in the first storyboard defined, which in this case, is the appropriate storyboard to start from. Drag the Hardships keyword to St. Louis. In response, the system should jump to the Hardships at St. Louis storyboard. Tap on the other images in the storyboard and experience navigating to the other hardship place holders. Tap the Home button at any time to navigate back to the main navigation page. Imagine how difficult it would be to convey this behavioral design idea to a client or team member using nothing more than pencil and paper sketches. Using DEMAIS, you can show a client or team member your behavioral design idea and let them directly experience how that idea feels for an end user. Finally, after experiencing the navigation concept, you decide that the initial screen is a little confusing and that a short set of instructions should be narrated to the user. To create the narration, open the narration editor using the Window::Voice Script command in the main menu or pie menu set. Type a reasonable set of instructions regarding how to use the navigation concept for the user. As you enter the text, you will probably refer to one or more of the concept keywords on the storyboard. Thus, you decide to explore the highlighting of those keywords as they are being referenced in the narration text. At the locations in the narration text where a keyword is being referenced, enter a synchronization marker. The narration editor should look similar to this. Create a new multiview using the Multiview::New command (remember to first toggle to multi-view mode using the storyboard/multi-view toggle button located in the lower left corner of the main application window) in the main menu or pie menu set. Open the content manager and place the voice narration and main storyboard into it. The multi-view editor should look similar to this. Sketch an ink stroke from a synchronization marker in the narration text to the concept keyword that it references. Change the default action to a Highlight action (the visual language icon with an 'H' in it) on the behavioral ink stroke. In some cases, you may need to unhighlight (using the Unhighlight action) previously highlighted objects as the narration moves forward. Remember, you need not highlight everything perfectly, just do enough to effectively communicate the design idea. To start the narration at playback, sketch an ink stroke from the storyboard's start symbol to anywhere in the narration. Once complete, the multi-view editor should look similar to this. Operationalize the sketch by pressing the play button in the lower left corner of the main application window. Once operationalized, the instructional text should be read aloud, the concept keywords should highlight at the appropriate points in the narration, and the drag and drop navigation concept should be functional. That completes the design example. |