Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Deconaby: Animations for Improving Understandability of Web Images

126 views

Published on

HCII2018で使用したスライド(樋川一幸)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Deconaby: Animations for Improving Understandability of Web Images

  1. 1. Kazuyuki Hikawa, Kouhei Matsuda, Satoshi Nakamura (Meiji University) Deconaby: Animations for Improving Understandability of Web Images
  2. 2. Have you ever experienced something like them? How to change resolution on windows How to turn off auto lock on iPhone How to access Meiji University
  3. 3. Have you ever experienced something like them?
  4. 4. How-to Page There are many web pages to explain something • Explanation page of PC operation method • Explanation page on how to install the tool • Explanation page of access method to store etc.
  5. 5. • Explanation page of PC operation method • Explanation page on how to install the tool • Explanation page of access method to store etc. How-to Page How-to page web pages to explain how to do
  6. 6. How-to page web pages to explain how to do • Explanation page of PC operation method • Explanation page on how to install the tool • Explanation page of access method to store etc. How-to Page Usually, how-to pages are very useful
  7. 7. • Explanation page of PC operation method • Explanation page on how to install the tool • Explanation page of access method to store etc. How-to page web pages to explain how to do How-to Page Usually, how-to pages are very useful How-to pages are complicated and difficult to understand in some cases
  8. 8. Difficult to Understand! It is difficult to find a target in the image from the explanation text Where is Auto-Lock option? ? ? ?
  9. 9. A Table of Understandability of How-to page low high Video Text + Image Text only
  10. 10. A Table of Understandability of How-to page low high Video Text + Image Text only Our method increases the understandability
  11. 11. Demonstration https://ioshacker.com/how-to/increase-or-decrease-iphones-screen-timeout-settings
  12. 12. A Table of Understandability of How-to page low high Video Text only A picture is worth a thousand words! Text + Image + Decoration Text + Image
  13. 13. Use Case • Teach the computer operation - Explain to students how to install tools used in the lesson - Teach elderly people how to use a smartphone - Teach your friends how to post YouTube videos • Teach the route by using map images
  14. 14. • How-to related to PC operation - Teach families how to install Skype - Explain to students how to install tools used in the lesson - Teach your friends how to post YouTube videos • Teach the route by using map images Use Case Certainly, we have a way to make a web page or video
  15. 15. Use Case • How-to related to PC operation - Teach families how to install Skype - Explain to students how to install tools used in the lesson - Teach your friends how to post YouTube videos • Teach the route by using map images Certainly, we have a way to make a web page or video We reuse the original content, so we can solve it quickly
  16. 16. Related Work Annotate with a handwriting or sticky note on the web page [Marcel 2009] Graphical annotation system for e-learning [Giordano 2005]
  17. 17. Related Work Annotate with a handwriting or sticky note on the web page [Marcel 2009] Graphical annotation system for e-learning [Giordano 2005] Our method enables users to add dynamic operation animations
  18. 18. Purpose of Study Approach • Easily applying animation to how-to pages • Easily sharing animations with other users To realize a method that enables users to make web pages understood easily
  19. 19. Proposed Method Overlays a transparent layer on the image
  20. 20. Variations of Animation: Mouse Cursor Useful for an explanation of computer operations.
  21. 21. Variations of Animation: Finger Suitable for the screen of smartphones
  22. 22. Variations of Animation: Footprints For map images in which the route is difficult to understand
  23. 23. Proposed Method Users can share animation with URL Deconaby issues a hash value at the end of the URL e.g. http://example.com#ID=XXXXXX Users can share decorations using e-mail, SNS, etc. Tweet
  24. 24. Proposed Method Implement Deconaby as a Google Chrome extension Deconaby shared on Chrome Web Store Deconaby's web page https://deconaby.club/
  25. 25. Experiment • We prepared 14 how-to pages that are difficult to understand in advance • 10 subjects evaluated the understanding level of undecorated pages(original pages) and decorated pages • The understanding level was evaluated in 5 stages (-2 to 2) To clarify whether Deconaby helps users to understand how-to pages or not
  26. 26. Experiment To clarify whether Deconaby helps users to understand how-to pages or not Original page Decorated pageSubjects Evaluation Evaluation 5 7 7 5 7 7
  27. 27. Result Understanding level increased in 13 out of 14 Original page Decorated page Avg. -0.760 0.071 Deconaby improves the understanding level of the web pages
  28. 28. Discussion: Interesting Decoration Mouse cursor that turns around the target
  29. 29. Discussion: Interesting Decoration Tracing the guide map with animated fingers
  30. 30. Discussion It is possible for each users to make unique decoration - Show the recommended route - Guide from your home - Annotate the environment of your computer Limited by few kinds of operation animations • Cannot show complicated movements such as drag and drop, swipe or pinch
  31. 31. Discussion It can be possible to understand pages composed of unfamiliar languages or difficult technical terms - When Japanese people who are not good at English view English websites - When elderly people who are not familiar with computer view pages with technical terms
  32. 32. Application: Learning Support It is difficult to understand just by looking at these figures
  33. 33. Application: Learning Support If an animation is added here, users will be able to understand intuitively
  34. 34. Application: Learning Support Examples of character-writing exercises
  35. 35. Application: Learning Support Indicate the orders of strokes
  36. 36. Future Work Usage in Video Content Implement a system that indicates the target point of which users should be conscious within the video
  37. 37. Conclusion • We proposed a method to give animation to how-to pages • Using Deconaby, you can share your improved page with others • The Experiment showed that Deconaby improved the how-to pages http://deconaby.club/

×