Title Page
Abstract
Contents
INTRODUCTION 10
1.1. Purpose 10
1.2. Aim and Method 10
BACKGROUND 11
2.1. Definition of Content on Media 11
2.1.1. Container 13
2.1.2. Context 15
2.2. Mobile Augmented Reality and User Experience Design 15
2.2.1. Augmented Reality 15
2.2.2. User Experience 18
2.3. Interaction 20
2.4. Technical background 21
2.4.1. Unity 21
2.4.2. Vuforia 22
2.4.3. Blender 23
METHODOLOGY 24
3.1. Gestalt principles in UX/UI design 24
3.1.1. Context-Based Design Methodology Oriented to User Experience 24
3.1.2. Gestalt principles for User Interface 25
3.2. Flexible, Applicable and Familiar Contents Design 27
CASE STUDY 28
4.1. Pokemon Go 28
4.2. IKEA Place 29
4.3. Pepsi Max 30
4.4. Augmented Reality Cinema 30
DESIGN PROCESS 33
5.1. Definition of Design 33
5.2. New Digital Art Utilizing Technology 33
5.2.1. Effect from Processing 33
5.2.2. Response to Sound 34
5.3. Influence of Weather on Human Behaviors 36
5.3.1. Abstract and Conclusion of Essay 36
5.3.2. Pictures recorded as files 37
FINAL PROTOTYPE 38
6.1. Concept 38
6.2. Technical Test 39
6.2.1. Scenario & Application UI 41
6.3. Final Prototype 47
CONCLUSION 50
REFERENCES 52
국문초록 54
Figure 1. Content grows out of the media. 11
Figure 2. Three Components of Media 12
Figure 3. Fragmented contents on social media 13
Figure 4. Four Elements of Context 14
Figure 5. Reality- Virtuality(RV) Continuum 15
Figure 6. Component of Augment Reality (AR) 16
Figure 7. Scenes connecting the Internet in real world through lens in a AR... 17
Figure 8. The site introduced Unity technology and tools. 21
Figure 9. Vuforia Engine platform 22
Figure 10. Blender is 3D creation tool 23
Figure 11. Five key principles of perceptual organization 26
Figure 12. Augmented Reality Game Pokemon for Smartphone 31
Figure 13. IKEA Place augmented reality app to make furnishing... 31
Figure 14. #LiveForNow AR campaign by Pepsi Max 32
Figure 15. Movies from augmented reality 32
Figure 16. Effect from Processing 35
Figure 17. Response to Sound 35
Figure 18. Pictures recorded as files 37
Figure 19. A moving picture in the real world 39
Figure 20. Detecting and tracking from the Vuforia website to... 40
Figure 21. A marker is created on the picture at the moment the picture is taken. 41
Figure 22. Scene #1. Camera mode to recognize pictures 42
Figure 23. Scene #2. Access to photo albums and Information... 42
Figure 24. A page showing the Proximity and Closure of Gestalt 44
Figure 25. A page showing the Similarity and Continuity of Gestalt 45
Figure 26. Create a 3D image to show the augmentation information... 46
Figure 27. Experiment 1 Prototype 46
Figure 28. Create a moving image that displays reinforcement content information... 47
Figure 29. Audience using Final Prototype 48
Figure 30. Final Prototype Mockup 49