{"id":195,"date":"2023-05-16T14:46:29","date_gmt":"2023-05-16T14:46:29","guid":{"rendered":"https:\/\/www.lasselaursen.com\/?page_id=195"},"modified":"2023-06-02T08:01:41","modified_gmt":"2023-06-02T08:01:41","slug":"tapdrag","status":"publish","type":"page","link":"https:\/\/www.lasselaursen.com\/projects\/tapdrag\/","title":{"rendered":"TapDrag"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>After spending countless sessions interacting with a larger sized touch display, i.e. ~30 to 50 inches (approximately 3-5 times larger than a modern IPad), we found that traditional dragging gestures didn&#8217;t live up to our ergonomic expectations.<\/p>\n\n\n\n<p>Prolonged use sometimes led to arm fatigue and on a few occasions skin irritation. This lead to occasionally trying to avoid having to drag something over a long distance, just to avoid the potential discomfort involved. While not quite ubiquitous, these larger touch devices are becoming increasingly more common. They already exist in shared work environments, public installations, malls, or even as part of performance instruments.<\/p>\n\n\n\n<p>Hence, we ventured to come up with an alternative to traditional dragging. Enter, TapDrag.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"TapDrag: An Alternative Dragging Technique on Medium-Sized Multi-Touch Displays\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/_hHrkRFrSms?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Publication and resources<\/h4>\n\n\n\n<ul>\n<li><strong>TapDrag: An Alternative Dragging Technique on Medium-Sized MultiTouch Displays Reducing Skin Irritation and Arm Fatigue<\/strong><br>Lasse Farnung Laursen, Hsiang-Ting Chen, Paulo Silva, Lintalo Suehiro, Takeo Igarashi, in Arxiv,<br><a href=\"http:\/\/arxiv.org\/abs\/1603.04990\">Arxiv PDF<\/a><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Quick Facts<\/h4>\n\n\n\n<ul>\n<li>TapDrag can be easily integrated with standardized existing gestures (tap, drag, pinch, swipe).<\/li>\n\n\n\n<li>Gesture recognition system developed from scratch in C++11.<\/li>\n\n\n\n<li><a href=\"http:\/\/www.lasselaursen.com\/project\/tapdrag#user-study\">User tested with 18 different participants.<\/a><\/li>\n\n\n\n<li>Significantly faster, and generally preferred by users for long distance (~55cm) dragging.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Competing with traditional dragging<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>It is difficult to compete with traditional drag&#8217;s because they are so simple. There&#8217;s no fat to trim. A single touch allows the user to manipulate any on-screen element in a direct way with full correlation. Unfortunately, this correlative interaction is also what causes the aforementioned ergonomic issues: Arm fatigue, and skin irritation.<\/p>\n\n\n\n<p>We came up with what we felt would be the next most simple interaction pattern, which still maximizes flexibility, similar to traditional dragging. Instead of one continuous touch starting at point A, and ending at point B, we utilize two simple taps at these locations to initiate and complete a TapDrag. <a>The interaction pattern is straight-forward and is actually simpler to cancel than a traditional drag.<\/a><\/p>\n\n\n\n<p>Because the TapDrag isn&#8217;t finished until the last finger leaves the interactive surface, it is possible &#8211; just like traditional dragging &#8211; to hover over other elements and preview what would occur, were the TapDrag to complete.<\/p>\n\n\n\n<p>Implementing TapDrag is nearly as simple as using it. The number of required states are few, and <a href=\"http:\/\/www.lasselaursen.com\/project\/tapdrag#other-gestures\">integrating TapDrag with other gestures is also quite easy<\/a>.<\/p>\n\n\n\n<p>We conducted a <a href=\"http:\/\/www.lasselaursen.com\/project\/tapdrag#user-study\">between-subjects user study<\/a>, comparing TapDrag directly to traditional dragging. Results indicated that users generally preferred TapDrag to traditional dragging for longer distances.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/howtotapdrag.png\" data-rel=\"lightbox-gallery-C0gw9lI8\" data-magnific_type=\"image\" data-rl_title=\"How to TapDrag\" data-rl_caption=\"A simple interaction diagram showing how to initiate, and complete or cancel a TapDrag.\" title=\"How to TapDrag\"><img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"786\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/howtotapdrag.png\" alt=\"\" class=\"wp-image-198\" style=\"border-width:1px\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/howtotapdrag.png 1021w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/howtotapdrag-300x231.png 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/howtotapdrag-768x591.png 768w\" sizes=\"(max-width: 1021px) 100vw, 1021px\" \/><\/a><figcaption class=\"wp-element-caption\">How to TapDrag<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-tapdrag.png\" data-rel=\"lightbox-gallery-C0gw9lI8\" data-magnific_type=\"image\" data-rl_title=\"TapDrag State Diagram\" data-rl_caption=\"An exhaustive state machine diagram for implementing TapDrag.\" title=\"TapDrag State Diagram\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"993\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-tapdrag-1024x993.png\" alt=\"\" class=\"wp-image-200\" style=\"border-width:1px\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-tapdrag-1024x993.png 1024w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-tapdrag-300x291.png 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-tapdrag-768x745.png 768w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-tapdrag.png 1385w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">TapDrag State Diagram<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Integrating TapDrag with Other Gestures<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>There are multiple ways of distinguishing between a TapDrag and pre-existing popular multi-touch gestures. We found that the most straight-forward method was to rely on context, i.e. the distinction between objects and the background. Most GUIs provide this distinction, like the desktop on an operating system where a drag can either move elements or start a selection lasso. <a>The state diagram shows all of the possible states throughout a standard TapDrag, and what the resulting action is.<\/a><\/p>\n\n\n\n<p>You&#8217;ll notice, <a>in the diagram<\/a>, that two touches on the same object cannot trigger a TapDrag. This is actually beneficial, as our <a href=\"http:\/\/www.lasselaursen.com\/project\/tapdrag#user-study\">user study<\/a> found, that for short distances, a traditional drag is preferable.<\/p>\n\n\n\n<p>Finally, it&#8217;s worth noting that most of these findings relate to a single user scenario. A multi-user scenario would present issues when using TapDrap, similar to when performing pinch gestures in a multi user scenario. Compared to traditional pinch gestures, TapDrag presents a more signficant challenge given the typical distances between touches for TapDragging and pinching. Longer distances make it more difficult for the system to act predictably without knowing which touches belong to which user.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large has-custom-border\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-integration.png\" data-rel=\"lightbox-gallery-C0gw9lI8\" data-magnific_type=\"image\" data-rl_title=\"TapDrag Integration State Diagram\" data-rl_caption=\"Integrating basic TapDrag with pre-existing multi-touch gestures.\" title=\"TapDrag Integration State Diagram\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"959\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-integration-1024x959.png\" alt=\"\" class=\"wp-image-199\" style=\"border-width:1px\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-integration-1024x959.png 1024w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-integration-300x281.png 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-integration-768x719.png 768w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/statediagram-integration.png 1351w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">TapDrag Integration State Diagram<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">User Study<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>To compare TapDrag to traditional dragging, we asked each participant to complete a series of dragging trials. All trials were performed on a Multitouch 3200, a 32 inch multi-touch device, tilted towards the user.<\/p>\n\n\n\n<p>In each trial, participants dragged an object (a circle with a diameter of ~3.5 cm) from a source position to a target position. The study used a 2x2x2x2x4 with-in subject repeated measurement design with five factors: dragging type (TapDrag or traditional drag), target visibility (showing or not showing target area prior to first touch), source area (left-half or right-half), dragging distance (10cm short dragging or 55cm long dragging) and dragging direction (up, down, left, right). Note that due to the limitations of the touch surface display size, long drags could only be tested from left to right, or right to left.<\/p>\n\n\n\n<p>Ten trials were recorded for each unique combination resulting in 7200 data points. The short distance dragging trials were set to 10cm to ensure that the average adult could perform the TapDrag using only a single hand. The long distance dragging trials were set to 55cm, as this was the maximum distance the touch device could accommodate while still maintaining a generous border to randomize positioning.<\/p>\n\n\n\n<p><a>The results shown on a Tukey box plot<\/a> indicate that TapDrag&#8217;s are significantly faster for long distance dragging with comparable failure rates.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large has-custom-border\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/studyplot.png\" data-rel=\"lightbox-gallery-C0gw9lI8\" data-magnific_type=\"image\" data-rl_title=\"User Study Results\" data-rl_caption=\"A Tukey box plot of trial completion times and failure rates. Whiskers designate the lowest and highest measured value.\" title=\"User Study Results\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"403\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/studyplot-1024x403.png\" alt=\"\" class=\"wp-image-201\" style=\"border-width:1px\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/studyplot-1024x403.png 1024w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/studyplot-300x118.png 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/studyplot-768x302.png 768w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/studyplot.png 1123w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">User Study Results<\/figcaption><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>After spending countless sessions interacting with a larger sized touch display, i.e. ~30 to 50 inches (approximately 3-5 times larger than a modern IPad), we found that traditional dragging gestures didn&#8217;t live up to our ergonomic expectations. Prolonged use sometimes led to arm fatigue and on a few occasions skin irritation. This lead to occasionally [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":557,"parent":142,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_FSMCFIC_featured_image_caption":"","_FSMCFIC_featured_image_nocaption":"","_FSMCFIC_featured_image_hide":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/pages\/195"}],"collection":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/comments?post=195"}],"version-history":[{"count":11,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/pages\/195\/revisions"}],"predecessor-version":[{"id":221,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/pages\/195\/revisions\/221"}],"up":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/pages\/142"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/media\/557"}],"wp:attachment":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/media?parent=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}