{"id":13099,"date":"2023-11-23T10:04:56","date_gmt":"2023-11-23T09:04:56","guid":{"rendered":"https:\/\/www.intesys.it\/journal\/?p=13099"},"modified":"2025-08-01T16:17:03","modified_gmt":"2025-08-01T14:17:03","slug":"heatmap-cosa-sono-e-come-migliorare-la-user-experience","status":"publish","type":"post","link":"https:\/\/www.intesys.it\/journal\/design\/heatmap-cosa-sono-e-come-migliorare-la-user-experience\/","title":{"rendered":"Heatmap: cosa sono e come sfruttarle per migliorare la User Experience?"},"content":{"rendered":"

Indice dei contenuti<\/span>
  1. Cosa sono le heatmap?<\/a><\/li>
  2. Cosa dicono le heatmap… e cosa non dicono<\/a><\/li>
  3. Inserire le mappe di calore in una strategia di redesign<\/a><\/li><\/ol><\/div><\/div><\/p>[vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n

    Come si muovono gli utenti dentro a un sito, quali sono i pulsanti pi\u00f9 cliccati dentro un\u2019app mobile, quali sezioni di un e-commerce finiscono vengono ignorati: le heatmap possono fornirci tutte queste informazioni!
    \nMa come funzionano esattamente le \u201cmappe di calore\u201d? Quali dati ci restituiscono e come possiamo sfruttarli per migliorare la User Experience dei nostri touchpoint digitali? Scopriamo insieme come usarle in modo mirato e strategico.<\/h4>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n

    Cosa sono le heatmap?<\/h2>\n

    Le heatmap sono strumenti di rappresentazione grafica<\/strong> attraverso i quali \u00e8 possibile tracciare e individuare determinati comportamenti dell\u2019utente<\/strong>.<\/p>\n

    Visivamente, si presentano in questo modo:[\/vc_column_text][image_with_animation image_url=”13101″ image_size=”full” animation_type=”entrance” animation=”Fade In” animation_easing=”default” animation_movement_type=”transform_y” hover_animation=”none” constrain_group_1=”yes” alignment=”center” border_radius=”none” box_shadow=”none” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_top=”20″ margin_bottom=”20″][vc_column_text css_animation=”none”]\n

    Fonte: Hotjar<\/a><\/em><\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]Applicate a touchpoint digitali come siti web<\/a>, portali, e-commerce e app mobile<\/a>, ci permettono di vedere in modo immediato insight preziosi, come le aree pi\u00f9 interessanti per l\u2019utente o i pulsanti pi\u00f9 cliccati.<\/p>\n

    Un ottimo metodo per ottenere informazioni precise<\/strong> con un impatto visuale chiaro<\/strong>!<\/p>\n

    In particolare, queste \u201cmappe\u201d si muovono su due assi:[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” equal_height=”yes” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” advanced_gradient_angle=”0″ overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” shape_type=”” gradient_type=”default”][vc_column column_padding=”padding-3-percent” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”right” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” advanced_gradient_angle=”0″ gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” enable_animation=”true” animation=”fade-in-from-bottom” animation_easing=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” gradient_type=”default”][nectar_icon_list animate=”true” color=”Accent-Color” direction=”vertical” icon_size=”small” icon_style=”no-border”][nectar_icon_list_item icon_type=”icon” icon_family=”iconsmind” text_full_html=”simple” title=”List Item” id=”1754056974403-8″ tab_id=”1754056974414-5″ icon_iconsmind=”iconsmind-Tap” header=”Click & tap (interazione)”][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”icon” icon_family=”iconsmind” text_full_html=”simple” title=”List Item” id=”1754056974668-9″ tab_id=”1754056974674-4″ icon_iconsmind=”iconsmind-Mouse-Pointer” header=”Movimento del mouse”][\/nectar_icon_list_item][\/nectar_icon_list][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][divider line_type=”No Line” custom_height=”10″][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text css=”” text_direction=”default”]Sono molti i dati di User Experience<\/a><\/strong> che possiamo ricavarne. Per esempio, il movimento del mouse ci fornisce dati sullo scroll e su dove si sofferma la lettura: questo scientificamente avviene dove il testo che viene effettivamente<\/em> letto dall\u2019utente e da questo possiamo comprendere meglio quali sono i suoi interessi<\/strong> e le sue priorit\u00e0<\/strong>.<\/p>\n

    Un caso pratico? Abbiamo utilizzato le heatmap insieme a registrazioni, user-funnel e analisi del target per migliorare le performance dell\u2019e-commerce<\/a> di Dolomiti Superski<\/strong>.[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_image=”13087″ bg_position=”center center” background_image_loading=”default” bg_repeat=”no-repeat” scene_position=”center” text_color=”light” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” enable_gradient=”true” color_overlay=”#0f33ce” color_overlay_2=”#77bcff” advanced_gradient_angle=”0″ overlay_strength=”0.8″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” gradient_type=”default” shape_type=””][vc_column column_padding=”padding-4-percent” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” constrain_group_2=”yes” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” advanced_gradient_angle=”0″ gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” gradient_type=”default”][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/6″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_url=”10304″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” border_radius=”none” box_shadow=”none” image_loading=”default” max_width=”custom” max_width_custom=”35%”][\/vc_column_inner][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”5\/6″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n

    IL CASO DOLOMITI SUPERSKI<\/h5>\n[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_custom_heading text=”Perfezionare la User Experience
    \ndi un e-commerce” font_container=”tag:h3|font_size:34px|text_align:left|color:%23ffffff|line_height:42px” use_theme_fonts=”yes”][nectar_btn size=”medium” open_new_tab=”true” button_style=”see-through-2″ color_override=”#ffffff” hover_color_override=”#17fdb4″ hover_text_color_override=”#000000″ icon_family=”none” text=”SCARICA IL CASO” margin_top=”30″ url=”https:\/\/www.intesys.it\/perfezionare-user-experience-ecommerce-dolomiti-superski\/”][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]Ma vediamo pi\u00f9 nel dettaglio i diversi tipi di dati che le heatmap possono darci sulla User Experience!<\/p>\n

    Cosa dicono le heatmap… e cosa non dicono<\/h2>\n

    Quante cose possono raccontarci un click o un movimento del mouse? Sicuramente molte, come per esempio:[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” equal_height=”yes” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” advanced_gradient_angle=”0″ overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” shape_type=”” gradient_type=”default”][vc_column column_padding=”padding-3-percent” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”right” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” advanced_gradient_angle=”0″ gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” enable_animation=”true” animation=”fade-in-from-bottom” animation_easing=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid” gradient_type=”default”][nectar_icon_list animate=”true” color=”Extra-Color-3″ direction=”vertical” icon_size=”small” icon_style=”border”][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1754056980088-0″ tab_id=”1754056980089-1″ header=”le aree pi\u00f9 interessate;”][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1754056980165-5″ tab_id=”1754056980166-5″ header=”le aree meno visitate dagli utenti;”][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1754056980202-6″ tab_id=”1754056980203-0″ header=”le call to action (CTA) che catturano pi\u00f9 interazioni;”][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1754056980234-6″ tab_id=”1754056980235-5″ header=”quali sono le voci pi\u00f9 cliccate di un accordion;”][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1754056980310-3″ tab_id=”1754056980312-2″ header=”dove gli utenti pensano di cliccare ma non ci sono pulsanti;”][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1754056980371-3″ tab_id=”1754056980373-6″ header=”dove si soffermano le persone nello scroll della pagina;”][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”numerical” text_full_html=”simple” title=”List Item” id=”1754056980437-4″ tab_id=”1754056980439-3″ header=”dove l\u2019utente vive momenti di frustrazione (rage click).”][\/nectar_icon_list_item][\/nectar_icon_list][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][divider line_type=”No Line” custom_height=”10″][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]Questi sono tutte informazioni utilissime per strutturare nel dettaglio il redesign della User Experience<\/strong> di un touchpoint digitale e sistemare eventuali problematiche.<\/p>\n

    Ma le heatmap non sono \u201connipotenti\u201d: quali sono infatti le informazioni che non<\/em> ci possono dare?<\/p>\n