{"id":112,"date":"2023-10-02T08:38:36","date_gmt":"2023-10-02T08:38:36","guid":{"rendered":"https:\/\/uianimationguide.co.za\/?page_id=112"},"modified":"2023-11-14T12:40:00","modified_gmt":"2023-11-14T12:40:00","slug":"affordance","status":"publish","type":"page","link":"https:\/\/uianimationguide.co.za\/?page_id=112","title":{"rendered":"Affordance"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.22.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/4.-Affordance-50-1.jpg” min_height=”100vh” scroll_fade=”0|50|50|100|100%|100|0%” background_last_edited=”on|phone” background_size_phone=”custom” background_image_width_phone=”280%” background_position_phone=”top_center” background_vertical_offset_phone=”1%” global_colors_info=”{}”][et_pb_row column_structure=”2_3,1_3″ _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=”2_3″ _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” 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>Affordance: Cosmic Control<\/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” custom_padding=”|150px|||false|false” custom_padding_tablet=”|150px|||false|false” custom_padding_phone=”|0px|||false|false” custom_padding_last_edited=”on|phone” global_colors_info=”{}”]<\/p>\n

<\/span>Discover the dynamic link between UI Animation and Affordance as design elements spring to life, as design elements come alive to convey interactive possibilities.<\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_3″ _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-Affordance-Planet.gif” title_text=”3- Affordance Planet” _builder_version=”4.22.2″ _module_preset=”default” width=”120%” width_tablet=”120%” width_phone=”50%” width_last_edited=”on|phone” custom_margin_tablet=”” custom_margin_phone=”|||-50px|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\/3.-Discoveraility-50.jpg” background_position=”top_center” background_vertical_offset=”13%” min_height=”100vh” 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=”8vh||||false|false” custom_margin_tablet=”8vh||||false|false” custom_margin_phone=”-50px||||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><\/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

Affordance, in the context of digital interfaces, is like giving users the control of a spaceship in outer space. It employs animations to make interface elements feel tangible and responsive. These animations create user control and responsiveness, fostering a sense of empowerment for users within their digital environment.<\/p>\n

Affordance animations are integral in ensuring users feel in charge of their interface journey. They provide clarity on possible actions and interactions, resulting in a more intuitive, engaging, and accessible interface. Affordance animations, in essence, empower users to navigate with confidence, much like a seasoned astronaut in the cosmic expanse.<\/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\/Affordance-V2.gif” title_text=”Affordance V2″ align=”right” _builder_version=”4.22.2″ _module_preset=”default” max_width=”80%” 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\/4.-Affordance-Section-Full-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 disabled_on=”off|off|off” module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#FFFFFF” text_font_size=”50px” text_line_height=”1.2em” custom_margin=”||10px||false|false” custom_padding=”|||30px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||15px|false|false” custom_padding_last_edited=”on|phone” 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=”{}” content_last_edited=”on|phone” content_phone=”<\/p>\n

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

” sticky_enabled=”0″ content_tablet=”<\/p>\n

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

“]<\/p>\n

<\/span>Affordance 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″ module_class=”diviBold” _builder_version=”4.23.1″ _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” hover_enabled=”0″ 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” arrows_custom_color_last_edited=”on|phone” arrows_custom_color_phone=”RGBA(255,255,255,0)” sticky_enabled=”0″ arrows_custom_color_tablet=”#FFFFFF”][et_pb_slide heading=”Affordance Tangible Touch” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/3.-Affordance-Guidelines.gif” _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 like subtle button highlights or color changes to simulate tactile feedback, making interactive elements feel tangible and enhancing the overall user experience.<\/p>\n

[\/et_pb_slide][et_pb_slide heading=”Astro Feedback” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/3.-Affordance-Guidelines.gif” _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

Implement animations that give users immediate feedback on their actions, reinforcing the sense of control.<\/p>\n

For instance, when users engage with a slider, it animates its movement in response to their gestures.<\/p>\n

[\/et_pb_slide][et_pb_slide heading=”Zero-Gravity Clarity” button_text=”Click Here” image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/3.-Affordance-Guidelines.gif” _builder_version=”4.22.2″ _module_preset=”default” global_colors_info=”{}” sticky_transition=”on”]<\/p>\n

Leverage animations to demonstrate user interaction possibilities effectively, providing clarity on how elements can be manipulated within a smooth and intuitive interface.<\/p>\n

Ensure that the animations align with users’ expectations of how objects behave in a digital environment.<\/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.22.2″ _module_preset=”default” background_enable_color=”off” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/4.-Affordadance-Section-50.jpg” background_position=”top_center” background_vertical_offset=”64%” min_height=”100vh” scroll_fade=”0|50|50|100|0|100|0%” 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.22.2″ _module_preset=”default” max_width=”100%” 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” 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>Cosmic Control through
Affordance<\/span><\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ module_id=”AnimatingTab” _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=”17%” min_height=”100vh” 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 disabled_on=”off|off|off” module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_margin=”||0px||false|false” custom_padding=”|||0px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” 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=”{}” content_last_edited=”on|phone” content_phone=”<\/p>\n

<\/span>1. Animating Tappable Elements<\/span><\/p>\n

” sticky_enabled=”0″ custom_margin_last_edited=”on|phone” custom_margin_phone=”||30px||false|false” content_tablet=”<\/p>\n

<\/span>1. Animating Tappable<\/span><\/p>\n

” custom_margin_tablet=”||0px||false|false”]<\/p>\n

<\/span>1. Animating Tappable<\/span><\/p>\n

[\/et_pb_text][et_pb_text disabled_on=”on|off|off” 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_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||30px|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>Elements<\/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>Use animations to indicate that an element is tappable or interactive, ensuring users recognise its affordance.<\/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 a mobile app, when a user is on the welcome page for the first time, a bubble appears above the button that the user should click the button to explore 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\/1.-Animating-Clickable-Elements.gif” title_text=”1. Animating Clickable Elements” align=”center” _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=”ConveyAction” _builder_version=”4.22.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/1.-Home-50.jpg” background_position=”top_center” background_vertical_offset=”25%” min_height=”100vh” 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 disabled_on=”off|off|off” module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_margin=”||0px||false|false” custom_padding=”|||0px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” 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=”{}” content_last_edited=”on|phone” content_phone=”<\/p>\n

<\/span>2. Conveying Action Possibilities<\/span><\/p>\n

” sticky_enabled=”0″ custom_margin_last_edited=”on|phone” custom_margin_phone=”||30px||false|false” content_tablet=”<\/p>\n

<\/span>2. Conveying Action<\/span><\/p>\n

” custom_margin_tablet=”||0px||false|false”]<\/p>\n

<\/span>2. Conveying Action<\/span><\/p>\n

[\/et_pb_text][et_pb_text disabled_on=”on|off|off” 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_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||30px|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>Possibilities<\/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>Animate interface elements to show the possible outcomes of user interactions, clarifying the affordance associated with those actions.<\/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 the user needs to select a date or time. On a calendar where the user should select a date, a tooltip highlights the week that the user can select an available date in the following week, indicating the available interactions.<\/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.-Conveying-Action-Possibilities.gif” title_text=”2. Conveying Action Possibilities” align=”center” _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=”MappingGestures” _builder_version=”4.22.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” background_image=”https:\/\/uianimationguide.co.za\/wp-content\/uploads\/2023\/10\/2.-Visibility-50.jpg” background_position=”top_center” background_vertical_offset=”26%” min_height=”100vh” 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 disabled_on=”off|off|off” module_class=”diviBold” _builder_version=”4.23.1″ _module_preset=”default” text_text_color=”#8300E9″ text_font_size=”50px” text_line_height=”1.2em” custom_margin=”||0px||false|false” custom_padding=”|||0px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||0px|false|false” custom_padding_last_edited=”on|phone” 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=”{}” content_last_edited=”on|phone” content_phone=”<\/p>\n

<\/span>3. Mapping Gesture Interactions<\/span><\/p>\n

” sticky_enabled=”0″ custom_margin_last_edited=”on|phone” custom_margin_phone=”||30px||false|false” content_tablet=”<\/p>\n

<\/span>3. Mapping Gesture<\/span><\/p>\n

” custom_margin_tablet=”||0px||false|false”]<\/p>\n

<\/span>3. Mapping Gesture<\/span><\/p>\n

[\/et_pb_text][et_pb_text disabled_on=”on|off|off” 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_padding=”|||50px|false|false” custom_padding_tablet=”|||50px|false|false” custom_padding_phone=”|||30px|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>Interactions<\/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>Animate interface elements to respond to gestures, clarifying their affordance for touch interactions.<\/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 a map page, an indication pops up that the user can zoom in and zoom out. When the user uses pinch-to-zoom, the map animates smoothly, visually indicating the action’s result.<\/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.-Mapping-Gesture-Interactions.gif” title_text=”3. Mapping Gesture Interactions” align=”center” _builder_version=”4.22.2″ _module_preset=”default” width=”100%” min_height=”120px” 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\/5.-Feedback-50.jpg” background_position=”top_center” background_vertical_offset=”10%” min_height=”100vh” 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\/3.-Affordance-Resource.gif” title_text=”3. Affordance 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=”||-10px||false|false” custom_padding=”||0px|20px|false|false” custom_padding_tablet=”||0px|20px|false|false” custom_padding_phone=”||0px|20px|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><\/span><\/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_padding=”40px||20px|20px|false|false” global_colors_info=”{}”]<\/p>\n

<\/span>Click on the button to go to the Affordance 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=5-29135&mode=design” button_text=”Figma File” _builder_version=”4.22.2″ _module_preset=”dab665d9-661c-4e48-a514-da1944b31c93″ custom_margin=”|||22px|false|false” global_colors_info=”{}”][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

Affordance: Cosmic ControlDiscover the dynamic link between UI Animation and Affordance as design elements spring to life, as design elements come alive to convey interactive possibilities.OverviewAffordance, in the context of digital interfaces, is like giving users the control of a spaceship in outer space. It employs animations to make interface elements feel tangible and responsive. […]<\/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-112","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/112","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=112"}],"version-history":[{"count":73,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/112\/revisions"}],"predecessor-version":[{"id":1144,"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=\/wp\/v2\/pages\/112\/revisions\/1144"}],"wp:attachment":[{"href":"https:\/\/uianimationguide.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}