Deconaby: Animations for Improving Understandability of Web Images

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

• 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/

• 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

• http://deconaby.club/