{"id":1488,"date":"2013-06-03T15:30:00","date_gmt":"2013-06-03T15:30:00","guid":{"rendered":"https:\/\/www.appagent.co\/blog\/2013\/06\/03\/how-to-create-ui-and-tutorials-for-leap-motion\/"},"modified":"2013-06-03T15:30:00","modified_gmt":"2013-06-03T15:30:00","slug":"how-to-create-ui-and-tutorials-for-leap-motion","status":"publish","type":"post","link":"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/","title":{"rendered":"How to create UI and tutorials for Leap Motion"},"content":{"rendered":"<p class=\"p1\">After viewing various developer videos and Leap Motion cases we realized something crucial: there isn&rsquo;t an existing guideline for the gestural interface and tutorials! Since then we&rsquo;ve been experimenting and testing our own approach which is summarized below.<\/p>\n<p class=\"p1\">Originally an iOS game, Sortee has a simple premise: sorting things has never been so much fun. There is one basic gesture of swiping the object to the correct tube which perfectly fits the Leap controller. From easy categories such as red and blue to more complex sorting by rooms to challenging seven tubes at once.<\/p>\n<p><em>Video: menu differences between touch devices and Leap version<\/em><\/p>\n<p class=\"p1\"><strong>Learning by playing<\/strong><\/p>\n<p class=\"p1\">Because the device brings a completely new type of interaction we\u2019ve decided it\u2019s very important to teach the player even the very basic gestures. The truth is people HATE tutorials, they want to play immediately and usually skip all instructions. That\u2019s why we came up with our \u201clearning by playing\u201d approach. It is the complete opposite of traditional \u201ccomics style guides\u201d full of sketches and text. \u00a0<\/p>\n<p><img decoding=\"async\" alt=\"image\" src=\"https:\/\/66.media.tumblr.com\/f03c3f1a503e4a5d1b9a5db06be6a791\/tumblr_inline_mntpkbFGaN1qz4rgp.jpg\" \/><\/p>\n<p class=\"p1\">When the player opens Sortee for the first time the \u201cingame\u201d tutorial appears. First we show how to place the hand above the device. Our intention was for the game to be played with the forefinger but we later discovered people are not able to hold their hand as shown in tutorials so we\u2019ve changed it to hand tracking. This is especially beneficial for small kids. Our conclusion is to use the easiest gestures and to carefully observe people playing the game or using the application and changing the controls to fit natural behavior.<\/p>\n<p><em>Video: tutorial<\/em><\/p>\n<\/p>\n<p class=\"p1\"><strong>Highlighting<\/strong><\/p>\n<p class=\"p1\">If you are familiar to Kinect or Wii this may seem obvious to you but not for mobile focused developers. When designing for Leap you have to highlight every active object at which the user is pointing. There is a big difference between using your finger on a tablet screen and users hand mediation with some kind of cursor. Use larger detection zones than the visible object to make pointing easier. \u00a0<\/p>\n<p><em>Video: objects highlighting<\/em><\/p>\n<\/p>\n<p class=\"p1\"><strong>Confirmations<\/strong><\/p>\n<p class=\"p1\">Leap offers two basic confirmation gestures: tap and key tap. We\u2019ve set our own \u201ctap\u201d called \u201cpoke\u201d in the game which is more sensitive than the predefined tap and requires less physical effort. We also considered the \u201cpoint-and-wait\u201d confirmation style common on Kinect, but it is very annoying and time consuming so we quickly threw out this idea. We\u2019ve only partially used this for movement between game screens, see the video below.<\/p>\n<p><em>Video: navigation<\/em><\/p>\n<\/p>\n<p class=\"p1\"><strong>Take rest<\/strong><\/p>\n<p class=\"p1\">Lot of skeptics say motion gesture controls are physically demanding. Without any doubt they\u2019re right. On the other hand this type of interaction also brings a lot of positives. It is up to us developers to keep this threat in mind and offer a lot of rest to users&rsquo; arms. For games short game rounds are the best, on the contrary playing racing games such as Need for Speed will be painful as hell! Try to design gestures that differ significantly from each other because it burdens different muscles. Require quick and natural movements and don\u2019t forget to implement rest time frames (e.g. final score counting). In short let the player put his or her hands down.<\/p>\n<p><img decoding=\"async\" alt=\"image\" src=\"https:\/\/66.media.tumblr.com\/d1bb98eacd83b9aa5906e8a618031642\/tumblr_inline_mntpjw7ecx1qz4rgp.jpg\" \/><\/p>\n<p class=\"p1\"><strong>Test, test, test<\/strong><\/p>\n<p class=\"p1\">Developer\u2019s visions are often self-absorbed, confusing and too complicated for ordinary people. Test with uninstructed laymen and be prepared to suffer how people do things differently than you expect. Don\u2019t get frustrated but think why that is and how you should change the UI. Resist asking users for a solution because they usually don\u2019t know it or cannot explain it well. It\u2019s up to you to be perceptive and creative!<\/p>\n<\/p>\n<p class=\"p1\">As our coder Petr often says: \u201cForget everything you know from touch devices, Leap requires a completely new approach!\u201d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After viewing various developer videos and Leap Motion cases we realized something crucial: there isn&rsquo;t an existing guideline for the gestural interface and tutorials! Since then we&rsquo;ve been experimenting and testing our own approach which is summarized below. Originally an iOS game, Sortee has a simple premise: sorting things has never been so much fun. [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[205],"tags":[],"class_list":["post-1488","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create UI and tutorials for Leap Motion - AppAgent<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create UI and tutorials for Leap Motion - AppAgent\" \/>\n<meta property=\"og:description\" content=\"After viewing various developer videos and Leap Motion cases we realized something crucial: there isn&rsquo;t an existing guideline for the gestural interface and tutorials! Since then we&rsquo;ve been experimenting and testing our own approach which is summarized below. Originally an iOS game, Sortee has a simple premise: sorting things has never been so much fun. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/\" \/>\n<meta property=\"og:site_name\" content=\"AppAgent\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-03T15:30:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/66.media.tumblr.com\/f03c3f1a503e4a5d1b9a5db06be6a791\/tumblr_inline_mntpkbFGaN1qz4rgp.jpg\" \/>\n<meta name=\"author\" content=\"Peter Fodor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Peter Fodor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/\",\"url\":\"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/\",\"name\":\"How to create UI and tutorials for Leap Motion - AppAgent\",\"isPartOf\":{\"@id\":\"https:\/\/webrixstudio.online\/aa\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/66.media.tumblr.com\/f03c3f1a503e4a5d1b9a5db06be6a791\/tumblr_inline_mntpkbFGaN1qz4rgp.jpg\",\"datePublished\":\"2013-06-03T15:30:00+00:00\",\"author\":{\"@id\":\"https:\/\/webrixstudio.online\/aa\/#\/schema\/person\/d5a1b96a3fa7af62b01ecb89f0dc33c4\"},\"breadcrumb\":{\"@id\":\"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/#primaryimage\",\"url\":\"https:\/\/66.media.tumblr.com\/f03c3f1a503e4a5d1b9a5db06be6a791\/tumblr_inline_mntpkbFGaN1qz4rgp.jpg\",\"contentUrl\":\"https:\/\/66.media.tumblr.com\/f03c3f1a503e4a5d1b9a5db06be6a791\/tumblr_inline_mntpkbFGaN1qz4rgp.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webrixstudio.online\/aa\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"All\",\"item\":\"https:\/\/webrixstudio.online\/aa\/blog\/category\/uncategorized\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to create UI and tutorials for Leap Motion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webrixstudio.online\/aa\/#website\",\"url\":\"https:\/\/webrixstudio.online\/aa\/\",\"name\":\"AppAgent\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webrixstudio.online\/aa\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/webrixstudio.online\/aa\/#\/schema\/person\/d5a1b96a3fa7af62b01ecb89f0dc33c4\",\"name\":\"Peter Fodor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webrixstudio.online\/aa\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2021\/06\/Petr-Fodor.png\",\"contentUrl\":\"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2021\/06\/Petr-Fodor.png\",\"caption\":\"Peter Fodor\"},\"url\":\"https:\/\/webrixstudio.online\/aa\/blog\/author\/petr-fodorflowstudiogames-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create UI and tutorials for Leap Motion - AppAgent","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"How to create UI and tutorials for Leap Motion - AppAgent","og_description":"After viewing various developer videos and Leap Motion cases we realized something crucial: there isn&rsquo;t an existing guideline for the gestural interface and tutorials! Since then we&rsquo;ve been experimenting and testing our own approach which is summarized below. Originally an iOS game, Sortee has a simple premise: sorting things has never been so much fun. [&hellip;]","og_url":"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/","og_site_name":"AppAgent","article_published_time":"2013-06-03T15:30:00+00:00","og_image":[{"url":"https:\/\/66.media.tumblr.com\/f03c3f1a503e4a5d1b9a5db06be6a791\/tumblr_inline_mntpkbFGaN1qz4rgp.jpg","type":"","width":"","height":""}],"author":"Peter Fodor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Peter Fodor","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/","url":"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/","name":"How to create UI and tutorials for Leap Motion - AppAgent","isPartOf":{"@id":"https:\/\/webrixstudio.online\/aa\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/#primaryimage"},"image":{"@id":"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/#primaryimage"},"thumbnailUrl":"https:\/\/66.media.tumblr.com\/f03c3f1a503e4a5d1b9a5db06be6a791\/tumblr_inline_mntpkbFGaN1qz4rgp.jpg","datePublished":"2013-06-03T15:30:00+00:00","author":{"@id":"https:\/\/webrixstudio.online\/aa\/#\/schema\/person\/d5a1b96a3fa7af62b01ecb89f0dc33c4"},"breadcrumb":{"@id":"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/#primaryimage","url":"https:\/\/66.media.tumblr.com\/f03c3f1a503e4a5d1b9a5db06be6a791\/tumblr_inline_mntpkbFGaN1qz4rgp.jpg","contentUrl":"https:\/\/66.media.tumblr.com\/f03c3f1a503e4a5d1b9a5db06be6a791\/tumblr_inline_mntpkbFGaN1qz4rgp.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/webrixstudio.online\/aa\/blog\/how-to-create-ui-and-tutorials-for-leap-motion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webrixstudio.online\/aa\/"},{"@type":"ListItem","position":2,"name":"All","item":"https:\/\/webrixstudio.online\/aa\/blog\/category\/uncategorized\/"},{"@type":"ListItem","position":3,"name":"How to create UI and tutorials for Leap Motion"}]},{"@type":"WebSite","@id":"https:\/\/webrixstudio.online\/aa\/#website","url":"https:\/\/webrixstudio.online\/aa\/","name":"AppAgent","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webrixstudio.online\/aa\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/webrixstudio.online\/aa\/#\/schema\/person\/d5a1b96a3fa7af62b01ecb89f0dc33c4","name":"Peter Fodor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webrixstudio.online\/aa\/#\/schema\/person\/image\/","url":"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2021\/06\/Petr-Fodor.png","contentUrl":"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2021\/06\/Petr-Fodor.png","caption":"Peter Fodor"},"url":"https:\/\/webrixstudio.online\/aa\/blog\/author\/petr-fodorflowstudiogames-com\/"}]}},"_links":{"self":[{"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/posts\/1488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/comments?post=1488"}],"version-history":[{"count":0,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/posts\/1488\/revisions"}],"wp:attachment":[{"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/media?parent=1488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/categories?post=1488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/tags?post=1488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}