UX Prototyping / IID 2015 Spring Class hours : Tuesday 2 pm – 6 pm Lecture room : International Campus Veritas Hall B320   12th May

Week 10

Animating the User Experience

W7. Assignments• Complete the Studio Workshop

• Gathering Images (on each Pinboard)

• People (Persona)

• Place (Context)

• Technology

• Midterm Presentation (0n 28th April)

• System Concept Statement

• Persona Design

• Cultural Probe

• Contextmapping

• User Story Map

2

http://www.conceptkitchen2025.com/

W9. Assignments1. Your mid-term presentation

• Please upload the file on slideshare.net and post a blog page which has embedded the slide in it. You should post it on each of your own, so that I can see who do which project.

2. Wireframes

• Please complete the studio workshop that we did in the class.

• The wireframes should have link loops helping me understand the navigation.

• You should send me the ppt or keynote file via email, so that I can check the loops.

3

W9. Assignments3. Narrative Storyboards

• After finishing your wireframes, move on to the next step, narrative storyboards. You can select the type of storyboards according to your efficiency.

• Type 1. in illustration.

• Type 2. in photo

• "Add annotation"!!! (paper p.6)

4. Keep up with collecting/sketching/capturing images of your users, product/services, and context on Pinterest boards.

4

W10. Assignments1. Brush up your blog from midterm presentation > wireframes > narrative storyboards.

2. Set up a footage bin on vimeo.com : upload scratch footages while you make your concept video.

3. Open casual sessions with your 5 participants; Show them the midterm summary, wireframes, and narrative storyboards. Please gather their opinions and comments and bring it to class on 12th May.

4. Write up a technical rider for your prototyping ; software, hardware, and anything you need to complete your prototyping. Caution "Be realistic, and don't be too ambitious!"

5

Project Brief : http://www.alexaugier.com/oqpo_oooo/Tech Rider : http://www.alexaugier.com/wp-content/uploads/2014/10/oqpo_oooo_technicalRider_EN_23sept2014.pdf

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

6

Section 5 > 5.1. The Animated Sequence

• Create a Master Frame Template

7

Section 5 > 5.1. The Animated Sequence

• Create Specialized Frame Templates

8

Section 5 > 5.1. The Animated Sequence

• Create Final Frames

9

Section 5 > 5.1. The Animated Sequence

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

10

Section 5 > 5.1. The Animated Sequence

• Playing the Sequence

11

Section 5 > 5.2. Motion Paths

• Getting Ready

12

Section 5 > 5.2. Motion Paths

• Selecting a Motion Path

13

Section 5 > 5.2. Motion Paths

• Creating the Motion Path

14

Section 5 > 5.2. Motion Paths

• Adding Effects

15

Section 5 > 5.3. Branching Animations

• Create each screen for hyper links

16

Section 5 > 5.3. Branching Animations

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

17

Section 5 > 5.3. Branching Animations

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

18

Section 5 > 5.3. Branching Animations

19

Section 5 > 5.3. Branching Animations

20

Section 5 > 5.3. Branching Animations

21

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.

22

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 fine 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’.

23

Section 5 > 5.4. Keyframes and Tweening

• Keyframe 1

• Initial state

24

Section 5 > 5.4. Keyframes and Tweening

• Keyframe 2

• Person touches opposite corners of image,

25

Section 5 > 5.4. Keyframes and Tweening

• Keyframe 3

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

26

Section 5 > 5.4. Keyframes and Tweening

• Keyframe 4

• Final state

27

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.

28

Section 5 > 5.4. Keyframes and Tweening

29

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.

30

Section 5 > 5.4. Keyframes and Tweening

31

Section 5 > 5.4. Keyframes and Tweening

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

32

Section 5 > 5.4. Keyframes and Tweening

4. Drag the symbols to their new position.

33

Section 5 > 5.4. Keyframes and Tweening

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

34

Drag the symbols to their new position.

Section 5 > 5.4. Keyframes and Tweening

6. Add more frames to the timeline.

35

Section 5 > 5.4. Keyframes and Tweening

7. Create the third keyframe.

8. Create the final keyframe.

36

Section 5 > 5.5. Linear Video

37

Section 5 > 5.5. Linear Video

38

Section 5 >

39

Section 5 > 5.5. Linear Video

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

40

Section 5 > 5.5. Linear Video

2. Place a transparency atop.

41

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.

42

Section 5 >

43

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.

44

Section 5 > W11. Assignments1. Story map (User Journey)

2. Information Architecture (Menu, Labels, Navigation)

3. Wireframes (Keynotes > Xcode Storyboard)

4. Video Envisionment (Narrative Storyboard + Movie)

5. Preparation for APP Prototyping

1. Install Xcode and find Quartz Composer

2. Install Origami (http://origami.facebook.com/)

45