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

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


• Create Specialized Frame Templates

6


• Create Final Frames

7


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

8


• Playing the Sequence

9

Section 5 > 5.2. Motion Paths

• Getting Ready

10


• Selecting a Motion Path

11


• Creating the Motion Path

12


• Adding Effects

13

Section 5 > 5.3. Branching Animations

• Create each screen for hyper links

14


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

15


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

16


17


18


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


• Keyframe 2

• Person touches opposite corners of image,

23


• Keyframe 3

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

24


• Keyframe 4

• Final state

25


• 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


27


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


29


!

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

30


!

4. Drag the symbols to their new position.

31


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

32

Drag the symbols to their new position.


6. Add more frames to the timeline.

33


7. Create the third keyframe.

8. Create the final keyframe.

34

Section 5 > 5.5. Linear Video

35


36

Section 5 >

37


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

38


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

Week 12 Animating the User Experience

Education

Transcript of Week 12 Animating the User Experience