{"id":12267,"date":"2021-04-08T11:00:17","date_gmt":"2021-04-08T09:00:17","guid":{"rendered":"https:\/\/www.alphagate.eu\/?p=12267"},"modified":"2022-01-18T14:02:49","modified_gmt":"2022-01-18T13:02:49","slug":"introduction-to-the-topic-of-digital-expansion-of-reality-2","status":"publish","type":"post","link":"https:\/\/www.alphagate.eu\/en\/blog\/introduction-to-the-topic-of-digital-expansion-of-reality-2\/","title":{"rendered":"The edge of reality &#8211; Part 2"},"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\" ><p>How is XR designed? Focus on graphical user interfaces<\/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;\">\n<p><strong>A blog series to introduce the topic of digital expansion of reality.<\/strong><\/p>\n<p>In the first post of our blog series \u201cThe Edge of Reality\u201d we got to know the various \u201cExtended Reality\u201d (XR) technologies and variants. One or the other may have already had initial ideas about what could be implemented with XR technologies. But what do we have to pay attention to when implementing XR applications?<\/p>\n<\/div>\n<div><\/div>\n<div>\n<p><strong>Graphical user interfaces in XR &amp; MR<\/strong><\/p>\n<p>For the presentation of XR applications via tablets and smartphones, already known tools can be used for the design. This is not the case when designing holographic applications.<br \/>\nDesigning for MR is an independent experience and requires different ways of thinking, such as the design of user interfaces for so-called &#8220;on-screen&#8221; applications. But how do we design graphic interfaces for MR?<\/p>\n<p>Microsoft itself claims that mixed reality applications are unique and that it is therefore hard work to design and implement good MR experiences. The key to success here is clearly extensive test loops and iterations in the design and development phase. Such iteration loops also result in empirical values that must be taken into account when designing graphical user interfaces for MR applications.<\/p>\n<p>Logic takes you from A to Z. Imagination takes you everywhere &#8221;<br \/>\nAlbert Einstein.<\/p>\n<p>Before it comes to designing MR experiences and holograms: what is a hologram?<\/p>\n<p>A hologram is a technical projection of an object that seems to float completely free in space. You can move around the projection and view it from all sides.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-12111\" src=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/01_mixedreality-1030x579.jpg\" alt=\"\" width=\"1030\" height=\"579\" srcset=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/01_mixedreality-1030x579.jpg 1030w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/01_mixedreality-300x169.jpg 300w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/01_mixedreality-768x432.jpg 768w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/01_mixedreality-1536x864.jpg 1536w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/01_mixedreality-1500x844.jpg 1500w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/01_mixedreality-705x397.jpg 705w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/01_mixedreality-500x281.jpg 500w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/01_mixedreality.jpg 1600w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<\/div>\n<p><strong>Aspects in the design of XR applications<\/strong><\/p>\n<p>Since holograms are displayed in connection with three-dimensional space, they require completely different UX\/UI considerations such as on-screen applications and thus represent an absolutely new challenge for UX\/UI designers.<br \/>\nThe placement of the interface elements and their size in the room must be carefully considered in order to be perceived as &#8220;natural&#8221; by the viewer. When using transparencies and colors, attention should be paid to the positioning in space of holographic UI elements so that the elements do not get lost in the setting.<\/p>\n<p><strong>The application of colors<\/strong><\/p>\n<p>The use of color is one of the important components to consider when designing MR applications. Because holograms consist of light, they are based on an additive color representation. This means that white areas reflect the most light and are therefore the brightest. Black areas, on the other hand, do not receive any light and are rendered transparently on data glasses. That means something like that everything black becomes invisible.<\/p>\n<p>Nevertheless, we should be careful when dealing with white areas. Pure white should be avoided for large areas. Bright colors on large surfaces dazzle and tire our eyes. Therefore, a light gray should be used for light surfaces. The use of dark colors is generally recommended for larger areas and backgrounds. For the human eye, these are more natural and pleasant to look at.<\/p>\n<p>If holograms are to be placed in particularly lively and messy environments, such as in a production hall, light colors should be used for important elements in order to maintain the contrast in different lighting situations. White text on a dark background does a better job than black text on a white background.<\/p>\n<p>Colors are shown slightly transparently in holograms and look less lively and powerful in the usage environment than in design drafts on the PC screen. Nevertheless, the use, especially of signal colors, should be carefully considered and used in the sense of communicating the necessary information.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-12148\" src=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_transparent_examples-2-1030x455.jpg\" alt=\"\" width=\"1030\" height=\"455\" srcset=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_transparent_examples-2-1030x455.jpg 1030w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_transparent_examples-2-300x133.jpg 300w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_transparent_examples-2-768x339.jpg 768w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_transparent_examples-2-1536x678.jpg 1536w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_transparent_examples-2-1500x663.jpg 1500w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_transparent_examples-2-705x311.jpg 705w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_transparent_examples-2-500x221.jpg 500w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_transparent_examples-2.jpg 1920w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<p style=\"text-align: center;\">Copyright: Microsoft<\/p>\n<p>When creating dark backgrounds, it must be noted that black areas in holograms are displayed transparently.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-12117\" src=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/color_handocclusion-1-1030x455.jpg\" alt=\"\" width=\"1030\" height=\"455\" srcset=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/color_handocclusion-1-1030x455.jpg 1030w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/color_handocclusion-1-300x133.jpg 300w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/color_handocclusion-1-768x339.jpg 768w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/color_handocclusion-1-1536x678.jpg 1536w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/color_handocclusion-1-1500x663.jpg 1500w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/color_handocclusion-1-705x311.jpg 705w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/color_handocclusion-1-500x221.jpg 500w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/color_handocclusion-1.jpg 1920w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<p style=\"text-align: center;\">Copyright: Microsoft<\/p>\n<p><strong>Typography and holographic UI<\/strong><\/p>\n<p>The same rules apply to the use of writing in MR applications as in all other areas of design. Text in both the physical and virtual world must be legible. Microsoft recommends avoiding the font styles \u201clight\u201d and \u201csemi-light\u201d for font sizes below 42pt, as the vertical lines of the font would be too thin, which would lead to flickering of the font and this, in turn, would impair legibility.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-12121\" src=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_font_examples-1-1030x455.jpg\" alt=\"\" width=\"1030\" height=\"455\" srcset=\"https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_font_examples-1-1030x455.jpg 1030w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_font_examples-1-300x133.jpg 300w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_font_examples-1-768x339.jpg 768w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_font_examples-1-1536x678.jpg 1536w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_font_examples-1-1500x663.jpg 1500w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_font_examples-1-705x311.jpg 705w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_font_examples-1-500x221.jpg 500w, https:\/\/www.alphagate.eu\/wp-content\/uploads\/2021\/04\/microsoft_color_font_examples-1.jpg 1920w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<p style=\"text-align: center;\">Copyright: Microsoft<\/p>\n<p><strong>Animations in XR &#8211; an almost necessary must<\/strong><\/p>\n<p>At XR, animations are more than just a nice feature to use. With the help of small and meaningful animations, information about the behavior of control elements can be communicated or used to draw the user&#8217;s attention to the essentials. For example, a control element outside the field of vision can be pointed out, the opening and closing of menu items can be provided with small animations or the status of activated elements can be communicated in a more understandable manner.<\/p>\n<p>As we can see, creating 3D experiences is much more than just graphic design. It combines the different disciplines of UX design and in addition to creating graphics, it appeals to know-how from the areas of storytelling, product design, sound design, and stage design.<\/p>\n<p>Outlook &#8211; you can read that in the next part:<\/p>\n<p>In this second part of our blog series, we focused on graphical interfaces and what needs to be considered when designing them. In the next part of our blog series \u201cThe Edge of Reality,\u201d we dive into the topics of storytelling, UX, and ergonomics.<\/p>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<p style=\"text-align: right;\">This article was written by<br \/>\nKaterina Sedlackova\u00a0 UX\/UI Design<br \/>\nApril 8, 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":11932,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8],"tags":[42],"acf":[],"_links":{"self":[{"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/posts\/12267"}],"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=12267"}],"version-history":[{"count":0,"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/posts\/12267\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/media\/11932"}],"wp:attachment":[{"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/media?parent=12267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/categories?post=12267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alphagate.eu\/en\/wp-json\/wp\/v2\/tags?post=12267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}