{"id":12145,"date":"2021-04-15T12:48:57","date_gmt":"2021-04-15T10:48:57","guid":{"rendered":"https:\/\/www.alphagate.eu\/?p=12145"},"modified":"2022-02-01T12:43:29","modified_gmt":"2022-02-01T11:43:29","slug":"the-edge-of-reality-part-3","status":"publish","type":"post","link":"https:\/\/www.alphagate.eu\/en\/blog\/the-edge-of-reality-part-3\/","title":{"rendered":"The edge of reality &#8211; Part 3"},"content":{"rendered":"\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-f9bf4i-844ed37f6515d1019c1ae6b0160c1e55\">\n.flex_column.av-f9bf4i-844ed37f6515d1019c1ae6b0160c1e55{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-f9bf4i-844ed37f6515d1019c1ae6b0160c1e55 av_one_fifth  avia-builder-el-1  el_after_av_heading  el_before_av_three_fifth  first flex_column_div av-zero-column-padding  '     ><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-dqa3yq-cb5439d9877b4e881122fc05269bf590\">\n.flex_column.av-dqa3yq-cb5439d9877b4e881122fc05269bf590{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-dqa3yq-cb5439d9877b4e881122fc05269bf590 av_three_fifth  avia-builder-el-2  el_after_av_one_fifth  el_before_av_one_fifth  flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-ca13wy-3cb6b2f955cf538035b73c23494b7e44 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How is XR designed? Focus on graphical user interfaces<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-12308\" src=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/1_UXBlog_Homepage_Teil3-neu.png\" alt=\"\" width=\"1030\" height=\"773\" srcset=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/1_UXBlog_Homepage_Teil3-neu.png 1030w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/1_UXBlog_Homepage_Teil3-neu-300x225.png 300w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/1_UXBlog_Homepage_Teil3-neu-768x576.png 768w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/1_UXBlog_Homepage_Teil3-neu-705x529.png 705w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/1_UXBlog_Homepage_Teil3-neu-500x375.png 500w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<\/div><\/section><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-b35wcy-004314d59c5b0d9bb1a9e5529b7c84e4\">\n.flex_column.av-b35wcy-004314d59c5b0d9bb1a9e5529b7c84e4{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-b35wcy-004314d59c5b0d9bb1a9e5529b7c84e4 av_one_fifth  avia-builder-el-4  el_after_av_three_fifth  el_before_av_heading  flex_column_div av-zero-column-padding  '     ><\/div>\n\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-7hijo2-535334274846f2150c81ce81561490be\">\n.flex_column.av-7hijo2-535334274846f2150c81ce81561490be{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-7hijo2-535334274846f2150c81ce81561490be av_one_fifth  avia-builder-el-6  el_after_av_heading  el_before_av_three_fifth  first flex_column_div av-zero-column-padding  '     ><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-6lcxaa-48a7f5081a0781375e08f27d7dd6ebc2\">\n.flex_column.av-6lcxaa-48a7f5081a0781375e08f27d7dd6ebc2{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-6lcxaa-48a7f5081a0781375e08f27d7dd6ebc2 av_three_fifth  avia-builder-el-7  el_after_av_one_fifth  el_before_av_one_fifth  flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-g2qvm-98b90b175f34c0a839c31b2e5de2e475 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><div class=\"tlid-result-transliteration-container result-transliteration-container transliteration-container\"><\/div>\n<div class=\"tlid-result-transliteration-container result-transliteration-container transliteration-container\">\n<div class=\"tlid-transliteration-content transliteration-content full\"><\/div>\n<\/div>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-ltxbx-5dbd4d13b3cd96cb5e621198f0104c03 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><div class=\"text-wrap tlid-copy-target\" style=\"text-align: left;\"><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<p><strong>The bigger picture of reality &#8211; how is XR designed?<\/strong><br \/>\n<strong>User experience and ergonomics in virtual design<\/strong><\/p>\n<p>In the last post of our blog series \u201cThe Edge of Reality,\u201d we focused on the design of graphic elements and user interfaces. In this part of the blog series, we take a closer look at designing the overall experience of an XR application. On-boarding, storytelling, and ergonomic aspects play an essential role.<\/p>\n<p><em>\u201c<\/em><em>One of the biggest challenges of AR compared to traditional<br \/>\n2D demonstrations is the creators&#8217; inability to control the camera \u201d.<\/em><br \/>\n<em> Michael Flarup, Danish game designer &amp; entrepreneur<\/em><\/p>\n<p><strong>Change of perspective<\/strong><\/p>\n<p>Probably the biggest difference between XR applications and 2D screen applications is the change from the observer&#8217;s point of view to the &#8220;first-person perspective&#8221;. This gives the user part of the control over the display of objects &#8211; this makes the design of virtual experiences interesting for users and designers, but also a challenge for the designer. Above all, we should not forget that in particular hologram technologies and applications are still unknown to a large part of the population and a simple explanation of the handling is necessary. Therefore, before designing XR applications, we should be aware of a few points:<\/p>\n<p>1) What is the purpose of the application?<br \/>\n2) What has to be done (by the user) to achieve this goal?<br \/>\n3) What shouldn&#8217;t happen and what problems can arise?<br \/>\n4) What are the non-goals of the application?<\/p>\n<p>Once these questions are defined, we can start looking at how we can achieve these goals and how we can ensure that the user doesn&#8217;t get lost in the application.<\/p>\n<p><strong><img decoding=\"async\" class=\"aligncenter size-full wp-image-12221\" src=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/MicrosoftHololense_03.jpg\" alt=\"\" width=\"800\" height=\"450\" srcset=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/MicrosoftHololense_03.jpg 800w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/MicrosoftHololense_03-300x169.jpg 300w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/MicrosoftHololense_03-768x432.jpg 768w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/MicrosoftHololense_03-705x397.jpg 705w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/MicrosoftHololense_03-500x281.jpg 500w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/strong><\/p>\n<p><strong>On-boarding, storytelling, and orientation for XR applications.<\/strong><\/p>\n<p>Orientation is a key issue in XR applications. This starts with the onboarding process. The user should be explained as simply and quickly as possible how the technologies are to be used, which tasks he or she has to solve, and how the XR application will help with the task solution. It is just as important in this first step explaining to the user how to navigate through the application, i.e. which gestures are to be used and whether voice commands are available.<\/p>\n<p>With regard to orientation in the work process itself, there should be a stringent concept that accompanies the user through tasks and provides information on where the next work step is to be carried out. Small micro-animations can be very helpful here. They help to explain the handling and work steps, to give hints as to where the tasks are and whether the action of the user was successful or not. In XR applications, animations are much more than just a nice feature. They give the application a playful touch and the necessary orientation in the dynamic environment of physical reality.<\/p>\n<p><strong>Ergonomics in the design of XR<\/strong><\/p>\n<p>When combining virtual elements with the real world, a few guidelines must be adhered to so that they also feel \u201cnatural\u201d to the viewer. The viewer&#8217;s field of vision and focus area play an important role.<\/p>\n<p>Holograms only feel \u201creal\u201d if their position is also integrated into the natural field of view. With a Microsoft HoloLens, for example, the optimal position of holograms should be within a 2-meter focal plane. All virtual elements, which in turn are positioned closer to one meter, are perceived as annoying or unpleasant by the viewer.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-12317\" src=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Focal_Lenght_hologrammPlacement_en-1030x442.png\" alt=\"\" width=\"1030\" height=\"442\" srcset=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Focal_Lenght_hologrammPlacement_en-1030x442.png 1030w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Focal_Lenght_hologrammPlacement_en-300x129.png 300w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Focal_Lenght_hologrammPlacement_en-768x329.png 768w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Focal_Lenght_hologrammPlacement_en-1536x659.png 1536w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Focal_Lenght_hologrammPlacement_en-2048x878.png 2048w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Focal_Lenght_hologrammPlacement_en-1500x643.png 1500w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Focal_Lenght_hologrammPlacement_en-705x302.png 705w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Focal_Lenght_hologrammPlacement_en-500x214.png 500w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<p>Ergonomics also becomes an issue when it comes to the design of gesture control and its use in the XR application. With the further development of technologies, the range of gestures that can be used is increasing, but unfortunately, there is also the risk of tiring the user prematurely with exaggerated gestures.<\/p>\n<p>The extensive use of gestures, which we know from films such as &#8220;Minority Report&#8221;, is far too strenuous in practice for the real user in the long run. Smaller movements often result in a better experience. The higher the user has to raise their arm to perform an interaction, the faster that interaction should be to avoid fatigue. In particular, movements in which the elbow loses contact with the body should not be used too often or one after the other, as these lead to fatigue particularly quickly.<\/p>\n<p><strong>Ergonomics also in terms of information density<\/strong><\/p>\n<p>Films like \u201cIron Man\u201d are not particularly recommended as sources of inspiration for industrial user interfaces. Complex buttons look quite spectacular in films, in practice, they would overwhelm the user when completing tasks. When designing the controls, we should help users focus on what really matters. A simple menu structure and simple representation of the controls serve this purpose best. Here, too, we follow the same approach as when designing on-screen applications &#8211; reduction to the essentials.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-12321\" src=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Menu_ContentLoad_en-1030x441.png\" alt=\"\" width=\"1035\" height=\"443\" srcset=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Menu_ContentLoad_en-1030x441.png 1030w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Menu_ContentLoad_en-300x129.png 300w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Menu_ContentLoad_en-768x329.png 768w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Menu_ContentLoad_en-1536x658.png 1536w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Menu_ContentLoad_en-2048x877.png 2048w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Menu_ContentLoad_en-1500x643.png 1500w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Menu_ContentLoad_en-705x302.png 705w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/Blog_Grafiken_05_Menu_ContentLoad_en-500x214.png 500w\" sizes=\"(max-width: 1035px) 100vw, 1035px\" \/><\/p>\n<p><strong>A preview of the next episodes<\/strong><\/p>\n<p>With the first three parts of the blog series \u201cThe Edge of Reality,\u201d we have given you an overview of existing technologies as well as initial practical tips for designing XR applications. In the following two parts we dive into practical examples of the application of XR technologies in the industry.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-12282\" src=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/UXBlogbeitrag_BilderHomepage_UXBlog_Homepage_Teil_2-1030x773.png\" alt=\"\" width=\"1030\" height=\"773\" srcset=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/UXBlogbeitrag_BilderHomepage_UXBlog_Homepage_Teil_2-1030x773.png 1030w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/UXBlogbeitrag_BilderHomepage_UXBlog_Homepage_Teil_2-300x225.png 300w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/UXBlogbeitrag_BilderHomepage_UXBlog_Homepage_Teil_2-768x576.png 768w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/05\/UXBlogbeitrag_BilderHomepage_UXBlog_Homepage_Teil_2-1536x1152.png 1536w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<p style=\"text-align: right;\">This article was written by<br \/>\nKaterina Sedlackova\u00a0 UX\/UI Design<br \/>\nMay 25, 2021<\/p>\n<div class=\"text-wrap tlid-copy-target\"><\/div>\n<\/div><\/section><\/p><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-220ngy-021e0aea62b6f4cca987ad810478525f\">\n.flex_column.av-220ngy-021e0aea62b6f4cca987ad810478525f{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-220ngy-021e0aea62b6f4cca987ad810478525f av_one_fifth  avia-builder-el-10  el_after_av_three_fifth  avia-builder-el-last  flex_column_div av-zero-column-padding  '     ><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":10,"featured_media":12269,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[8],"tags":[42],"class_list":["post-12145","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-introduction-to-the-topic-of-digital-expansion-of-reality"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/posts\/12145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/comments?post=12145"}],"version-history":[{"count":0,"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/posts\/12145\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/media\/12269"}],"wp:attachment":[{"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/media?parent=12145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/categories?post=12145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/tags?post=12145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}