{"id":107,"date":"2023-10-02T08:30:36","date_gmt":"2023-10-02T08:30:36","guid":{"rendered":"https:\/\/uianimationguide.co.za\/?page_id=107"},"modified":"2023-11-14T12:11:21","modified_gmt":"2023-11-14T12:11:21","slug":"discoverability","status":"publish","type":"page","link":"https:\/\/uianimationguide.co.za\/?page_id=107","title":{"rendered":"Discoverability"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/6.-Mapping-50-1.jpg” background_position=”top_center” background_vertical_offset=”34%” min_height=”100vh” min_height_tablet=”100vh” min_height_phone=”100px” min_height_last_edited=”on|phone” scroll_fade=”0|50|50|100|100%|100|0%” background_last_edited=”on|phone” background_size_phone=”custom” background_image_width_phone=”250%” background_position_phone=”top_left” background_horizontal_offset_phone=”9%” background_vertical_offset_phone=”-62%” global_colors_info=”{}”][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”8vh||||false|false” custom_margin_tablet=”8vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”80px” text_line_height=”1.1em” custom_margin=”50px||30px||false|false” custom_margin_tablet=”50px||30px||false|false” custom_margin_phone=”0px||30px||false|false” custom_margin_last_edited=”on|phone” text_font_size_tablet=”80px” text_font_size_phone=”40px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Discoverability: Unveiling Cosmic Secrets<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#FFFFFF” text_font_size=”18px” text_line_height=”1.8em” custom_margin=”|100px|||false|false” custom_margin_tablet=”|100px|||false|false” custom_margin_phone=”|0px|||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Delve into the world of UI Animation and its capacity to guide users’ exploration, as interfaces come alive to reveal functionalities.<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/2-Discoverability-Planet.gif” title_text=”2- Discoverability Planet” align_tablet=”” align_phone=”right” align_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” width=”100%” width_tablet=”100%” width_phone=”70%” width_last_edited=”on|phone” custom_margin=”-50px||||false|false” custom_margin_tablet=”-50px||||false|false” custom_margin_phone=”-70px|||100px|false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/2.-Visibility-50.jpg” background_position=”top_center” background_vertical_offset=”13%” min_height=”100vh” custom_margin_tablet=”” custom_margin_phone=”-150px||||false|false” custom_margin_last_edited=”on|phone” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Overview<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” global_colors_info=”{}”]<\/p>\n

Discoverability takes users on an exploratory journey within the interface, using animations to unveil hidden features and information effortlessly. This principle ensures that users can easily discover and comprehend what the interface has to offer.<\/p>\n

Discoverability animations play a crucial role in guiding users through digital interfaces, leading them to unexplored functionalities and enhancing the user experience. By implementing these animations, user engagement is heightened, and users are empowered to navigate the interface confidently.<\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/4.-Discovrability.gif” title_text=”4. Discovrability” align=”right” align_tablet=”right” align_phone=”center” align_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” max_width=”80%” custom_margin=”30px||||false|false” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”ToolkitGuidelines” _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/11\/3.-Discoverability-Full-Section-50.jpg” background_position=”top_center” background_vertical_offset=”23%” min_height=”100vh” scroll_fade_enable=”on” scroll_fade=”0|50|50|100|0|100|0%” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” saved_tabs=”all” global_colors_info=”{}”][et_pb_row module_id=”ToolkitGuidelines” _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”50px” text_line_height=”1.2em” scroll_fade_enable=”on” hover_enabled=”0″ text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}” custom_padding=”|||30px|false|false” sticky_enabled=”0″ content_last_edited=”on|phone” content_phone=”<\/p>\n

<\/span>Discoverability Guidelines<\/span><\/p>\n

” custom_padding_last_edited=”on|phone” custom_padding_phone=”|||15px|false|false” content_tablet=”<\/p>\n

<\/span>Discoverability Guidelines<\/span><\/p>\n

” custom_padding_tablet=”|||30px|false|false”]<\/p>\n

<\/span>Discoverability Guidelines<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_slider arrows_custom_color=”#FFFFFF” dot_nav_custom_color=”#8300E9″ arrows_custom_color_tablet=”#FFFFFF” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” header_text_color=”#FFFFFF” header_font_size=”25px” header_line_height=”1.2em” body_font=”Lato||||||||” body_text_color=”#FFFFFF” body_font_size=”18px” body_line_height=”1.8em” background_color=”RGBA(255,255,255,0)” text_orientation=”left” custom_margin=”-100px||||false|false” custom_css_slide_description=”font-family: lato, sans-serif;” custom_css_slide_title=”font-family: dita, sans-serif;||padding-bottom: 12px;||font-weight: 600;” custom_css_slide_button=”display: none;” body_text_shadow_style=”preset1″ body_text_shadow_color=”rgba(0,0,0,0)” text_shadow_style=”preset1″ text_shadow_color=”rgba(0,0,0,0)” global_colors_info=”{}” content_width__hover_enabled=”on|desktop”][et_pb_slide heading=”Galactic Signposts” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/2.-Discoverability-Guidelines.gif” arrows_custom_color_tablet=”” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_enable_color=”on” background_enable_image=”off” parallax=”on” global_colors_info=”{}” sticky_transition=”on”]<\/p>\n

Use animations to guide users toward interactive elements, making them feel like they’re navigating a well-lit path in space.<\/p>\n

Highlight buttons or options with animations when users enter a new section or complete an action.<\/p>\n

[\/et_pb_slide][et_pb_slide heading=”Interstellar Unveiling” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/2.-Discoverability-Guidelines.gif” arrows_custom_color_tablet=”” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_enable_color=”on” global_colors_info=”{}” sticky_transition=”on”]<\/p>\n

When revealing additional content or features, use animations that provide a sense of exploration and discovery.<\/p>\n

Incorporate progressive disclosure to engage users in uncovering hidden functionalities.<\/p>\n

[\/et_pb_slide][et_pb_slide heading=”Orbiting Clues” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/2.-Discoverability-Guidelines.gif” arrows_custom_color_tablet=”” arrows_custom_color_phone=”RGBA(255,255,255,0)” arrows_custom_color_last_edited=”on|phone” _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}” sticky_transition=”on”]<\/p>\n

Animate tooltips or contextual cues that align with the theme, like the space theme, such as stars or orbiting planets, to provide hints about interactions.<\/p>\n

Ensure these animations are contextually relevant and not overly distracting.<\/p>\n

[\/et_pb_slide][\/et_pb_slider][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.23.1″ _module_preset=”default” background_enable_color=”off” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/3.-Discoverability-Section-50.jpg” background_position=”top_center” background_vertical_offset=”50%” min_height=”100vh” min_height_tablet=”100vh” min_height_phone=”100vh” min_height_last_edited=”on|phone” scroll_fade=”0|50|50|100|0|100|0%” background_last_edited=”on|phone” background_size_phone=”custom” background_image_width_phone=”340%” background_image_height_phone=”0%” background_position_phone=”top_center” background_vertical_offset_phone=”58%” border_width_top=”5px” border_color_top=”#FFFFFF” border_width_bottom=”5px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row _builder_version=”4.23.1″ _module_preset=”default” width_tablet=”” width_phone=”100%” width_last_edited=”on|phone” custom_margin_tablet=”” custom_margin_phone=”30vh||||false|false” custom_margin_last_edited=”on|desktop” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”80px” text_line_height=”1.1em” custom_margin=”30vh||||false|false” custom_margin_tablet=”30vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” animation_style=”zoom” scroll_scaling_enable=”on” text_font_size_tablet=”80px” text_font_size_phone=”40px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Navigating Cosmic Realms\u00a0 with Discoverability<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”GuidedTours” _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/3.-Discoveraility-50.jpg” background_position=”top_center” background_vertical_offset=”11%” min_height=”100vh” min_height_tablet=”100vh” min_height_phone=”100px” min_height_last_edited=”on|phone” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>1. Guided Tours<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Animating guided tours can direct users’ attention to various interface elements, helping them discover new features or functionalities step by step.<\/span><\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_font=”||||||||” text_text_color=”#8300E9″ text_font_size=”25px” text_line_height=”1.8em” custom_margin=”||10px||false|false” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Example<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>In an app, when a user logs in for the first time, an animated guide showcases different tools and features through sequential highlights.<\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Guided-Tours.gif” title_text=”1. Guided Tours” _builder_version=”4.22.2″ _module_preset=”default” width=”100%” custom_margin=”-60px||||false|false” custom_margin_tablet=”-60px||||false|false” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”InteractiveOnboarding” _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Home-50.jpg” background_position=”top_center” background_vertical_offset=”27%” min_height=”100vh” min_height_tablet=”100vh” min_height_phone=”100px” min_height_last_edited=”on|phone” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text content_last_edited=”off|desktop” module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” width=”120%” scroll_fade_enable=”on” hover_enabled=”0″ text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}” width_last_edited=”on|phone” width_phone=”100%” sticky_enabled=”0″ width_tablet=”120%”]<\/p>\n

<\/span>2. Interactive Onboarding<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Using animation during onboarding can introduce users to core interactions, making it easier for them to engage with the interface.<\/span><\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_font=”||||||||” text_text_color=”#8300E9″ text_font_size=”25px” text_line_height=”1.8em” custom_margin=”||10px||false|false” custom_margin_last_edited=”off|phone” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Example<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>The onboarding process includes animations demonstrating what will be expected and what they will find during using the app.<\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/2.-Interactive-Onboarding.gif” title_text=”2. Interactive Onboarding” _builder_version=”4.22.2″ _module_preset=”default” width=”100%” custom_margin=”-60px||||false|false” custom_margin_tablet=”-60px||||false|false” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”RevealingContent” _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/6.-Mapping-50.jpg” background_position=”top_center” background_vertical_offset=”12%” min_height=”100vh” min_height_tablet=”100vh” min_height_phone=”100px” min_height_last_edited=”on|phone” border_width_top=”10px” border_color_top=”#FFFFFF” border_width_bottom=”10px” border_color_bottom=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text content_last_edited=”off|desktop” module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” width=”120%” scroll_fade_enable=”on” hover_enabled=”0″ text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}” width_last_edited=”on|phone” width_phone=”100%” sticky_enabled=”0″ width_tablet=”120%”]<\/p>\n

<\/span>3. Revealing Information<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Animation can be used to progressively reveal information or tool tips when users interact with certain elements, helping them discover more about the UI.<\/span><\/p>\n

[\/et_pb_text][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_font=”||||||||” text_text_color=”#8300E9″ text_font_size=”25px” text_line_height=”1.8em” custom_margin=”||10px||false|false” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span><\/span><\/span>Example<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>When the user selects to go to a different page a transition gradually takes them to the next page. Upon arriving on the page the information on the screen gradually slides in to showcase the information one by one.<\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/3.-Revealing-Content.gif” title_text=”3. Revealing Content” _builder_version=”4.22.2″ _module_preset=”default” width=”100%” custom_margin=”-60px||||false|false” custom_margin_tablet=”-60px||||false|false” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/6.-Mapping-50.jpg” background_position=”top_center” background_vertical_offset=”14%” min_height=”100vh” min_height_tablet=”100vh” min_height_phone=”100px” min_height_last_edited=”on|phone” border_width_top=”10px” border_color_top=”#FFFFFF” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.22.2″ _module_preset=”default” max_width=”100%” custom_margin=”10vh||||false|false” custom_margin_tablet=”10vh||||false|false” custom_margin_phone=”0vh||||false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/2.-Discoverability-Resource.gif” title_text=”2. Discoverability Resource” align=”center” disabled_on=”on|off|off” _builder_version=”4.22.2″ _module_preset=”default” width=”80%” custom_margin=”-50px||||false|false” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_class=”diviBold” _builder_version=”4.22.2″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_margin=”||-50px||false|false” custom_padding=”|||30px|false|false” custom_padding_tablet=”|||30px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” scroll_fade_enable=”on” text_font_size_tablet=”50px” text_font_size_phone=”30px” text_font_size_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>Resource<\/span><\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.22.2″ _module_preset=”default” text_font=”Lato||||||||” text_text_color=”#000000″ text_font_size=”18px” text_line_height=”1.8em” custom_margin=”80px||40px||false|false” custom_padding=”|||30px|false|false” custom_padding_tablet=”|||30px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>Click on the button to go to the Discoverability Animated Example Figma File.<\/p>\n

[\/et_pb_text][et_pb_button button_url=”https:\/\/www.figma.com\/file\/ojoj3iAc1xMSCbHsSXqw4u\/UI-Animate-Guide-Principle-Examples?type=design&node-id=2-29134&mode=design” button_text=”Figma File” _builder_version=”4.22.2″ _module_preset=”dab665d9-661c-4e48-a514-da1944b31c93″ custom_margin=”|||22px|false|false” custom_margin_tablet=”|||22px|false|false” custom_margin_phone=”|||0px|false|false” custom_margin_last_edited=”on|phone” custom_padding_tablet=”” custom_padding_phone=”” custom_padding_last_edited=”on|phone” global_colors_info=”{}”][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

Discoverability: Unveiling Cosmic SecretsDelve into the world of UI Animation and its capacity to guide users’ exploration, as interfaces come alive to reveal functionalities.OverviewDiscoverability takes users on an exploratory journey within the interface, using animations to unveil hidden features and information effortlessly. This principle ensures that users can easily discover and comprehend what the interface […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-107","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=107"}],"version-history":[{"count":101,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/107\/revisions"}],"predecessor-version":[{"id":1137,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/107\/revisions\/1137"}],"wp:attachment":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}