292 Views
July 27, 18
スライド概要
HCII2018で使用したスライド(樋川一幸)
明治大学 総合数理学部 先端メディアサイエンス学科 中村聡史研究室
Deconaby: Animations for Improving Understandability of Web Images Kazuyuki Hikawa, Kouhei Matsuda, Satoshi Nakamura (Meiji University)
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
Have you ever experienced something like them?
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.
How-to Page 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 How-to page web pages to explain how to do Usually, how-to pages are very useful • 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 Usually, how-to pages are very useful • Explanation page of PC operation method • Explanation page on how to install the tool • Explanation page of access method to store How-to pages are complicated and difficult etc. to understand in some cases
Difficult to Understand! It is difficult to find a target in the image from the explanation text Where is Auto-Lock option? ? ? ?
A Table of Understandability of How-to page high Video Text + Image Text only low
A Table of Understandability of How-to page high Video Text + Image Text only low Our method increases the understandability
Demonstration https://ioshacker.com/how-to/increase-or-decrease-iphones-screen-timeout-settings
A Table of Understandability of How-to page high Video Text + Image + Decoration Text + Image Text only low A picture is worth a thousand words!
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
Use Case • How-to related to PC operation - Teach families how to install Skypea Certainly, we have way to - Explain to students to install used in the lesson make ahow web page tools or video - Teach your friends how to post YouTube videos • Teach the route by using map images
Use Case • How-to related to PC operation - Teach families how to install Skypea Certainly, we have way to - Explain to students to install used in the lesson make ahow web page tools or video - Teach your friends how to post YouTube videos • Teach the route by usingthe maporiginal images We reuse content, so we can solve it quickly
Related Work Graphical annotation system for e-learning Annotate with a handwriting or [Giordano 2005] [Marcel 2009] sticky note on the web page
Related Work Our method enables users to add dynamic operation animations Graphical annotation system for e-learning Annotate with a handwriting or [Giordano 2005] [Marcel 2009] sticky note on the web page
Purpose of Study To realize a method that enables users to make web pages understood easily Approach • Easily applying animation to how-to pages • Easily sharing animations with other users
Proposed Method Overlays a transparent layer on the image
Variations of Animation: Mouse Cursor Useful for an explanation of computer operations.
Variations of Animation: Finger Suitable for the screen of smartphones
Variations of Animation: Footprints For map images in which the route is difficult to understand
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
Proposed Method Implement Deconaby as a Google Chrome extension Deconaby shared on Chrome Web Store Deconaby's web page https://deconaby.club/
Experiment To clarify whether Deconaby helps users to understand how-to pages or not • 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)
Experiment To clarify whether Deconaby helps users to understand how-to pages or not Subjects Original page Decorated page 7 7 7 7 Evaluation 5 Evaluation 5
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
Discussion: Interesting Decoration Mouse cursor that turns around the target
Discussion: Interesting Decoration Tracing the guide map with animated fingers
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
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
Application: Learning Support It is difficult to understand just by looking at these figures
Application: Learning Support If an animation is added here, users will be able to understand intuitively
Application: Learning Support Examples of character-writing exercises
Application: Learning Support Indicate the orders of strokes
Future Work Usage in Video Content Implement a system that indicates the target point of which users should be conscious within the video
Conclusion http://deconaby.club/ • 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