Human Computer Interaction

Design and Storyboard

CS137 Assignment #8

 

 

1. Dates

Out

Tues, 10/26
----Thurs 10/28 Design crits

Due

Tues, 11/2

 

2. Goals

  1. Explore the interactive component of VR visualization design.

  2. Learn about existing and postulate new metaphors, devices, and techniques for VR interaction.

  3. Consider specific needs of scientific VR users.

  4. Learn about storyboard techniques in describing interactive tasks.

3.Readings 

4. Assignment

This assignment should be completed in groups. For this assignment the groups will be:

 

Group1: Claudia, Alex
Group2: Helen, Ming-Ming , Sascha
Group3: Jane, Misha
Group4: Julie, Gabe
Group5: Janet, Joseph
Group6: Laura, Edwin

 

Part One: Design

Design an interface tool set that includes the capabilities of the actions listed below. The tool set can include real objects (wand, glove, brush, table, other props, etc.), virtual objects (color prism, 3D icons, etc.), body gestures sensed by wiring, voice commands, and/or other interaction devices and techniques.  Your interface should be as simple as possible, yet detailed.  It should be intuitive in the sense that it can be easily learned, and later, operated without a “guide book”.  However, it should also be complete in providing a means to accomplish all of the functionality listed below.  It should enhance the user’s sense of connection with the virtual environment and the “realness” of the model.  You might try to imagine a “real world” metaphor for the “mood” of your interface (i.e. “scuba diving”, “dissection” or “haunted house”) to give the experience a vivid, comforting, or magical character.  When designing your interface, keep in mind the interface principles described in class and in the readings.  You might try to make commonly accessed functions easily or intuitively activated.  Document your designs in drawing, actual objects, or in 2D or 3D digital graphics. Documentation should be completely detailed and include diagrams for use.

Part Two: Storyboard

Design and execute a “Storyboard” that narrates the interaction of a user with a virtual model of arterial flow.  The model can be based on previous assignments, but should particularly focus on exploration of the air flow around a bat in flight, incorporating your understanding of the issues of fluid flow. If you like, you can build an artificial sense of scientific discovery into your storyboard: your design has facilitated an important insight about the effects of bone shape in keeping the bats aloft!

Your interface design should serve as the basis for the interaction portrayed, with any modifications you want to make to the design in light of Thursday’s crit. The storyboard should highlight four important aspects of the use of your interface tools, along with transitional frames that show intermediate stages of navigation. The storyboard should ultimately consist of at least six frames. You can show the user navigating through the environment as a separate figure, or show us what the user would be seeing as he or she works in the Cave, or go back and forth between these two “camera angles”. We should see a user examining particular details and employing at least two selection methods to isolate or highlight aspects or subsets of the data. The tools and other interface elements should be clearly shown in use. The combined group of scenes should convey a clear sense of inter-connected events from frame to frame.  Note that it may be possible, and narratively effective, to generate the transitional frames through simple camera movement, as the “user” navigates through the space. Those of you who made a digital model in the Cave might use your models as the basis for your storyboard: this will save drawing time, as each scene can be generated by shifts in camera movement within the model. Otherwise, any medium is fine for this assignment. Drawings do not need to be overly elaborate , but textures and colors should be include if they are important to an understanding of the actions, and the drawings should be very legible. Any of the “tricks” for showing motion and other time-related or narrative phenomena, which are outlined in the reading from “understanding Comics” can be used to clarify the narrative. Study the format of the sample storyboards from “Mission Hill”. Note the descriptive “timeline” information in the lower half of the page. This is a good format to assist the set of sequential images in describing the interaction you are portraying: images on top, verbal description of action below.

 Note: it is almost always going to be more effective to begin your storyboard with a sketch stage, perhaps on separate sheets of paper. This way, in a very simple drawing style, you can consider the composition and sequencing of the individual frames before committing your self to fuller execution. In a very brief linear style, map out the framing, spatial angle and the placement of the objects to best describe a given moment of your storyline. When you have assembled a number of these sketches, you can start to mix and match them in sequential order, filling in blank areas in the narrative, or discarding redundant or uninteresting views. When you have a good sequence of images, you can proceed more confidently to visually realize the images of the storyboard in a style that will be legible and vivid for your audience. Line weight variation, light effects, color, texture or any other visual quality which helps to set the scene can be used.

 

4.1 Interface Actions

 

Navigation:

 

®    Move the viewer within the virtual world

o       left

o       right

o       forward

o       back

o       up

o       down

®    Move the virtual world (as in grabbing it in CavePainting) with respect to the viewer’s position

o       left

o       right

o       forward

o       back

o       up

o       down

o       scale up

o       scale down

®    Pre-set viewpoints (Jump-cut to these pre-set views)

o       Overview, close to the bat

o       Overview, far away from the bat

o       Isometric overview, far again.

o       Normal scale view showing one detail on the wing and behind it.

 

 

Data Exploration / Probing:

 

®    Place particle emitter here

®    Create streamline that passes through this point

®    Create one of my super-duper icons at this spot

®    I’m only interested in this region (how do you specify the region?), show me everything here

 

 

Animation Control:

 

®    real time

®    slo-mo

®    freeze

®    hyper speed

®    show pulse

®    run backward

 

 

Adjust Display of/Emphasis on Different Flow Characteristics or Areas:

 

®    display a latitudinal section

®    display a longitudinal section

®    display/emphasize wing data

®    display/emphasize streamlines by speed (either low, medium, or high)

®    display/emphasize streamlines by pressure (either low, medium, or high)

®    display/emphasize vorticity

®    display/emphasize pressure

®    display/emphasize reverse flow

 

 

Annotate the Visualization:

 

®    Take a snapshot of the current view

®    Start/Stop recording video

®    Write a text note or record voice and attach it to a region in the visualization

 

 

 

 

Adjust Visual Attributes of Icons or Bat Wing:

 

®    Brightness

®    Color

®    Shininess

®    Texture

®    Texture repeat frequency

 

 

Adjust Visual Attributes of the Environment:

 

®    Background Color

®    Placement of Lights

®    Strength of Lights

 

5. Questions

Design:

 

  1. Do your interaction techniques mimic a “real world” metaphor?  If so, which one, and why is this an appropriate choice?

  2. Consider a compound task in this environment. For example, part 1: find an area of interest, part 2: navigate to this area, part 3: examine this area in detail.  How many operations would be involved in this typical compound task given your interface?  Would changing modes from navigating mode to examining mode, for example, be a distraction to the scientist?

  3. Do you place several functions on the same device?  For example, the left wand button moves you forward in navigation mode, but places a streamline in exploration mode?  If so, how difficult will it be to remember the interface?  How can you avoid confusion in this situation?

  4. Are common tasks easily performed with your interface?

  5. Could your interaction design be generalized to work for any VR application?  How specific is it to the bat flight program?

  6. Will your techniques work when the bat is made very small?  How about when it is as large as the Cave, or even bigger?

  7. If you developed an intuitive design for novices, is it still unrestricting for an expert user?  If your design is more appropriate for an experienced user, how long will it take to become experienced?

  8. Could a professor operate your interface?  Would a professor want to operate your interface?  How about a scientist?

  9. Would someone get tired operating your interface?

  10. Can a scientist focus on a scientific task, or does your interface require a significant amount of thought unrelated to the problem at hand in order to operate it?

 

Storyboard:

 

  1. What particular scientific task does your storyboard represent a user performing?

  2. For each scene in your storyboard, how does the interaction of the user help to accomplish this task?  For example, what scientifically relevant structure does toggling visibility of some region help to reveal?

  3. As you worked on your storyboard, were there any aspects of your interface design that seemed as though they work smoothly?

  4. Were you conscious of any unwieldy or awkward elements as you considered the user navigating and performing tasks?

  5. As you look objectively at your completed storyboard, can you read the narrative clearly? Are there actions that might be misinterpreted by a viewer? (if so, you should consider adjusting the drawing, or adding more explanatory text  in the area below the images).

 

6. Checklist

o     Devise a set of interaction techniques for the actions listed above.

o     Document your ideas with detailed descriptions and diagrams where appropriate.

o     Create images for each storyboard scene.

o     Add explanatory text in “timeline” area of storyboard.

o     Answered assignment questions and emailed TA