SketchingWiki

Inhaltsverzeichnis

Sketching Techniques IV

Sketching Techniques IV

Student: Seenuvasan seenuvasan.ramamurthy@uni-konstanz.de
Advisor: Daniel Klinkhammer daniel.klinkhammer@uni-konstanz.de

Topic: Video Envisionment

Contents:
- Buxton: „Sketching User Experiences“
  - Shoot the Mime
  - Sketch-A-Move
  - Video Envisionment
- Greenberg et al. „Sketching User Experiences - The Workbook“
  - Animating the User Experience: Keyframes and Tweening

VIDEO ENVISIONMENT

„DESIGN IS NOT HOW IT LOOKS, BUT HOW IT WORKS“

Introduction to sketching

The value of sketching lies in the disposability and ability to explore many ideas with low cost

The characters of a sketch are :

Quick, Timely, Inexpensive, Disposable, Plentiful

Sketches are not prototypes : Investment in a prototype is larger than sketching Can we sketch prototypes ?? Yes, we can

Sketching prototypes is about using the tools that make it efficient to create many, quick, timely, disposable „sketches“ of your design ideas so that you can get them out of your head and evaluate them

Overview of Sketching process : Learning from cartoonist [9]

Lesson #1: Sketch the outlines first in the lowest possible fidelity

Lesson #2: Refine the important stuff next, save the unimportant stuff for last.

Lesson #3: Never stop moving the pencil.

Lesson #4: It's easier to erase thin, light lines than it is dark, heavy ones.

Nature of Video in design

Why use video ??

1. Video captures ideal behaviour over time. 2. Video captures what document only describes. 3. Video captures gestural affordances. 4. Video captures stakeholder attention.

The process in Video Scenario

* Plan the shoot
* Make and set-up the shoot
* Shoot the scenario
* Evaluate and edit

Plan the shoot

Create the complete story board at first. Then, find the sketched out flow of the each and every screen. Interactions and the devices used are to be decided. Have the location setup and the pre-visualize the angle too to avoid repeated iterations in the video making process. Get idea about the voice over, which is the mime to be synchronized with the video.

Set-up the shoot

Draw necessary screens at size, build devices at proportional level to the screens. Setup materials on location before starting the shoot. It is also advisable to check the lighting and the actual camera angles.

Shoot the scenario

Use a tripod while shooting any kind of scene. Adjusting details and editing in the camera will avoid handful of tasks later. We also need to shoot duplicate shots which are critical at later stages

Evaluate and edit

Watch out all the takes, write up notes to connect with the story board. It may also require some re-shoots for some of the necessary takes. Load best takes into the editing program to make your sketching shot as a video. Iterations during the evaluation will avoid errors made in the environment setup.

Video Envisionment

Videos which are created to communicate some holistic view showing an envisioned system in context.

-Show the mock-up concept in context. -Demonstrate the use of intuitive skills rather than taught skills -Capture a particular view of future.

The „Knowledge navigator“ video is an example of Video envisionment which was presented by Apple's president John Sculley.

It has encompassed the properties of sketches like

Clear vocabulary
Minimal defect
Appropriate degree of refinement.

Problem: Misinterpreted as future product by the users, which creates an expectation for the product.

Note: Vigilance in deciding upon the visual vocabulary and types of production values we use in our work, and how you read the work of others.

Shoot the Mime

How can we create an animation by design to show the working of a product ?

Make simple design sketched of your system's interface in action. No users to be included.
Playback animation on intended target display
Mime along the animation which exactly synchronizes with the animation
Video tape the Animation + Mime

We have to use less real things in sketches which is easier to suspend one's disbelief. Creating animations as mock-ups rather than real experience makes user to focus on interaction and context rather than actual product. Playing the animation or mock-up simulation on a real system's environment will certainly have an impact about the interactions in the system.

Know the animation techniques and have fluency in them which helps in choosing the most appropriate one when needed.

„DO IT RATHER THAN ONLY REALIZING IT“

Sketch a Move

Why Anab and Louise followed the characteristics of a sketch ??

Anab and Louise has designed the mock-up using a toy car which says about the functionality of the working rather than functionality of the actual system.

Their sketches were called sketches because

Sketches had distinct vocabulary that differentiated from finished renderings.
The resolution or style of the rendering suggested a degree of refinement or completion that exceeded the actual state of development or thinking of the concept.

The other criteria observed from their sketches were :

Quick
Timely
Inexpensive
Disposable

They had all the imaginable details flourished in the mock-up which took their sketch to an exceptional level.

„IF YOU WANT TO HIT BY A CAR GO AND PLAY IN TRAFFIC, NOT IN CORNFIELD“

Keyframes and InbeTweening

Creating more complex animations using software tools adds to extra cost and time spent, but their advantages are notable.

The two fundamental capabilities in all the animation tools are Keyframes and Tweening.

Keyframes: Any frame in an animation sequence. It consists of objects as well as the properties.

Tweening: Process of generating the frames between two key frames.

Adobe flash is an example for animation tool which supports complex tasks.

The above figure shows the sequence of frames creating using the keyframes. Tweening is the creation of action which helps in flow of these key frames.

Adobe Premiere

Adobe Premiere Pro is a timeline-based video editing software application. It is part of the Adobe Creative suite, used also as video editing tool.

The process is more or less similar to key frames with the timeline. The below figure shows you the idea of timeline in this video editing tool

Google sketchup

We can model real world objects using the google sketchup.

The real world environment could be easily generated from this intuitive modelling tool. This helps more in the video envisionment part which also need the environment on which the sketching is shot.

SketchUp makes 3D modeling fun.

Its a powerful software tool that also is a pleasure to use – there are intuitive tools that work the way you think they should.

A basic 3D sketching http://www.youtube.com/watch?v=A_9gl3MNA10

The above video shows how to create basic 3D drawings to setup an environment which helps us to create the entire environment in 3D. This helps in creating mock-ups in complex environments.

A crime scene as 3D model

BEST EXAMPLE:

The video that inspired me for video envisionment is

http://www.youtube.com/watch?v=9wQkLthhHKA

Though this video demonstrates the usability testing of a paper prototype, it perfectly narrates what the user feels about the user experience with his sketches.

Add-on to this video

I thought that the with the help of creating video like this, we can get more critics on the design and feedback from many users about the user experience of the system. I would recommend to combine questionnaire with the video to get the user actions which could be performed by users while watching the video. This kind of video will have both the user actions and critics in the design even though, it does not give you the real-experience.

Presentation Structure:

Introduction: Why Video; Characteristics
Theoretical Background; Nature of Video; Combination with other sketching techniques
Examples; Why and How; …; Case Study (Design Rational); Categorize Examples
Overview of Tools:
1. Keyframing: Flash e.g.; Screenshots of timeline
2. Timeline/ Video Tools: Premiere; …
SketchUp Google: 3D Envirement; Camera Movements/Video