week 12 animating the user experience

!!!

UX Prototyping/IID 2014 Spring Class hours : Fri. 3 pm-7 pm 23rd May

Week 12

Animating the User Experience

Section 5 > Homework• Complete the Studio Workshop

• Gathering Images (on each Pinboard)

• People

• Place

• Technology

• Writing a paper outline

• Interaction Design Goals

• Users

• Technology (using your own UI Prototypes)

• Use Context (using the journey map)

• Observation Methods

• Expected Results

2

https://www.bartlett.ucl.ac.uk/architecture/documents/joe-paxton-riba-award

Section 5 > To Do• Research Idea Presentation

• Paper Outlines

• Research Progress

• Cultural Probes/Context Mapping

• Other Survey Methods

• Team Presentation

• Checking Pinterest Image Collections

• Narrative Storyboards

• Open House Show Plans, and Drafts

• Studio 12 : Animating the User Experience

3

Section 5 > Animating the User Experience1. The Animated Sequence explains how to animate a single interaction sequence as a slide

show through image registration

2. Motion Paths shows you how you can animate graphical movement, such as the cursor, across frames. This emphasizes the illusion of smooth interaction

3. Branching Animations use hyperlinks to simulate interactions at certain branch points, where each can trigger diff erent paths in your animation

4. Keyframes and Tweening are two very powerful ways you can create animations that illustrate highly interactive interfaces

5. Linear Video demonstrates how video and video editing tools can help you rapidly create an animation from paper-based sketches

4

Section 5 > 5.1. The Animated Sequence

• Create a Master Frame Template

5

Section 5 > 5.1. The Animated Sequence

• Create Specialized Frame Templates

6

Section 5 > 5.1. The Animated Sequence

• Create Final Frames

7

Section 5 > 5.1. The Animated Sequence

• Place Each Frame in the Desired Sequence in Your Presentation Software

8

Section 5 > 5.1. The Animated Sequence

• Playing the Sequence

9

Section 5 > 5.2. Motion Paths

• Getting Ready

10

Section 5 > 5.2. Motion Paths

• Selecting a Motion Path

11

Section 5 > 5.2. Motion Paths

• Creating the Motion Path

12

Section 5 > 5.2. Motion Paths

• Adding Effects

13

Section 5 > 5.3. Branching Animations

• Create each screen for hyper links

14

Section 5 > 5.3. Branching Animations

• Add a hyperlink to the ‘Say Hello’ rectangle, which links to slide 2.

15

Section 5 > 5.3. Branching Animations

• Select the ‘Place in this Document’ button, and then select slide 2 containing the text ‘Hello’.

16

Section 5 > 5.3. Branching Animations

17

Section 5 > 5.3. Branching Animations

18

Section 5 > 5.3. Branching Animations

19

Section 5 > Tips• The basic strategy is to animate just enough of your

sketch paths to illustrate the breadth of different features in your system, while going into just enough depth to illustrate the functionality of those features.

• Jacob Nielsen calls this Horizontal(breadth) vs. Vertical (depth) prototyping. (He also describes a Scenario, which is a single scripted path through your sketch – this is equivalent to a sequential animation.)

• Your selection of animation paths don’t even have to do both – your sketch animation may only explore the functionality of a single feature in depth, but not other features. Or you may want to give an overall ‘look and feel’ of your system by showing the different features, without going into depth about the actual functionality of any one of them.

20

Section 5 > 5.4. Keyframes and Tweening• You will be able to create complex animations of highly interactive

scenarios reasonably quickly.

• You will be able to articulate fi ne details of how the interaction unfolds over time.

• Most systems let you quickly render animations as stand-alone videos.

• The result can be far more professional looking and detailed, to the point that your system may appear ‘real’.

21

Section 5 > 5.4. Keyframes and Tweening

• Keyframe 1

• Initial state

22

Section 5 > 5.4. Keyframes and Tweening

• Keyframe 2

• Person touches opposite corners of image,

23

Section 5 > 5.4. Keyframes and Tweening

• Keyframe 3

• … drags, resizes, and positions it in the center

24

Section 5 > 5.4. Keyframes and Tweening

• Keyframe 4

• Final state

25

Section 5 > 5.4. Keyframes and Tweening

• Tweening

• In-betweening (or tweening): the process of generating the set of frames between two keyframes. The properties of each object are animated so it smoothly transforms itself from its state in the first keyframe to its state in the next keyframe.

26

Section 5 > 5.4. Keyframes and Tweening

27

Section 5 > 5.4. Keyframes and Tweening

1. Create a stage (the backdrop for your animation) and populate it with your visual elements.

2. Create tweened frames filling up 1 second of the animation.

28

Section 5 > 5.4. Keyframes and Tweening

29

Section 5 > 5.4. Keyframes and Tweening

!

3. Move the frame indicator to the 12th frame, i.e., 1 second into the animation.

30

Section 5 > 5.4. Keyframes and Tweening

!

4. Drag the symbols to their new position.

31

Section 5 > 5.4. Keyframes and Tweening

5. Move the frame indicator to see the tweened frames, or play the animation.

32

Drag the symbols to their new position.

Section 5 > 5.4. Keyframes and Tweening

6. Add more frames to the timeline.

33

Section 5 > 5.4. Keyframes and Tweening

7. Create the third keyframe.

8. Create the final keyframe.

34

Section 5 > 5.5. Linear Video

35

Section 5 > 5.5. Linear Video

36

Section 5 >

37

Section 5 > 5.5. Linear Video

1. Draw on one single piece of paper showing the basic interface.

38

Section 5 > 5.5. Linear Video

2. Place a transparency atop.

39

Section 5 > 5.5. Linear Video3. On the transparency, draw the

changes that would occur after an interaction. In this example, draw in the X in the Blue checkbox, color in the chair, and add “Chair” under Item, “Blue” under Style, and “98.00” under Cost.

40

Section 5 >

41

Final Screen

Interaction 1 – The actor presses the Blue checkbox

Screen 1 – The basic interface

Section 5 > 5.5. Linear Video• Our second way places multiple

blank transparencies atop the first screen, after which you start recording. This approach allows you to draw while recording. Once you are done with one drawing, the transparency can be lifted off , leaving another blank transparency underneath.

42