Come si applica l’empatia nel web design

[tatsu_section bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= '{"d":"scroll"}' bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' bg_animation= "none" padding= '{"d":"0px 0px 90px 0px"}' margin= '{"d":"0px 0px 0px 0px"}' bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" section_height_type= "auto" custom_height= '{"d":""}' vertical_align= "center" top_divider= "none" top_divider_zindex= "9999" bottom_divider_zindex= "9999" bottom_divider= "none" top_divider_height= '{"d":"100"}' top_divider_position= "above" bottom_divider_height= '{"d":"100"}' bottom_divider_position= "below" top_divider_color= "#ffffff" bottom_divider_color= "#ffffff" invert_top_divider= "0" invert_bottom_divider= "0" flip_top_divider= "0" flip_bottom_divider= "0" section_id= "" section_class= "" section_title= "" offset_value= "0px" full_screen_header_scheme= "background--dark" overflow= "" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Hk-0i7hzJF"][tatsu_row full_width= "0" bg_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" no_margin_bottom= "0" equal_height_columns= "0" gutter= "medium" column_spacing= "px" fullscreen_cols= "0" swap_cols= "0" padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":"0px 0px"}' row_id= "" row_class= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" border_radius= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "HJl0iXnzkt"][tatsu_column bg_color= "" bg_image= "" bg_repeat= "no-repeat" bg_attachment= "scroll" bg_position= '{"d":"top left"}' bg_size= '{"d":"cover"}' padding= '{"d":"0px 0px 0px 0px"}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "0" box_shadow_custom= "0px 0px 0px 0px rgba(0,0,0,0)" bg_video_mp4_src= "" bg_video_ogg_src= "" bg_video_webm_src= "" overlay_color= "" overlay_blend_mode= "normal" animate_overlay= "none" link_overlay= "" vertical_align= "none" sticky= "0" offset= '{"d":"0px 0px"}' column_parallax= "0" column_width= '{"d":100,"l":100,"t":100,"m":100}' column_mobile_spacing= "0" image_hover_effect= "none" column_hover_effect= "none" hover_box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" overflow= "" col_id= "" column_class= "" top_divider= "none" top_divider_height= '{"d":"100","m":"0"}' top_divider_color= "#ffffff" flip_top_divider= "0" top_divider_zindex= "9999" bottom_divider= "none" bottom_divider_height= '{"d":"100","m":"0"}' bottom_divider_color= "#ffffff" flip_bottom_divider= "0" bottom_divider_zindex= "9999" left_divider= "none" left_divider_width= '{"d":"50","m":"0"}' left_divider_color= "#ffffff" invert_left_divider= "0" left_divider_zindex= "9999" right_divider= "none" right_divider_width= '{"d":"50","m":"0"}' right_divider_color= "#ffffff" invert_right_divider= "0" right_divider_zindex= "9999" z_index= "0" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" layout= "1/1" key= "Hy0sm3MkY"][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "Hkg6mhfkt"]

[/tatsu_text][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "S1y0X2G1t"]

Quando pensate al design del vostro sito web aziendale, cosa vi viene in mente? Potresti pianificare la funzionalità e la facilità di navigazione. Ci si può preoccupare di dove appare nelle classifiche di Google o se è mobile-friendly.

Ma hai mai considerato come si sentono i visitatori quando usano il tuo sito web?

È il momento di parlare di empatia. Il web design empatico pone l'accento sull'esperienza dell'utente, con le intuizioni dei tuoi visitatori al centro del design del tuo sito. L'attenzione è su ciò che questi consumatori pensano e sentono quando usano il tuo prodotto. Cosa piace loro e cosa trovano difficile? Quanto tempo impiegano per completare un obiettivo, come fare un acquisto, e quanti passi impiegano per eseguire un'azione desiderata?

Se non capisci i tuoi clienti e non dai loro ciò che vogliono, lo farà qualcun altro. La tecnologia permette alle aziende di fare di più in meno tempo, e le aspettative dei consumatori sono scalate di conseguenza. In breve, i vostri clienti si aspettano di essere abbagliati. La buona notizia è che puoi ascoltare il tuo mercato di riferimento, soddisfare i loro bisogni e battere i tuoi concorrenti. E incorporare l'empatia nel tuo web design è un modo intelligente per farlo.

Cos'è l'empatia?

[/tatsu_text][tatsu_code id= "" class= "" hide_in= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":""}' border_color= "" border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "SJs8E3MJY"][/tatsu_code][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rJ5bN2zkK"]

L'empatia è la capacità di identificare e comprendere la situazione e i sentimenti di un'altra persona. L'empatia è un'abilità fondamentale per i designer perché permette loro di identificarsi con gli utenti e adottare le loro prospettive. L'empatia nel web design è un approccio centrato sul design per prestare attenzione ai sentimenti dell'utente verso un prodotto. È capire cosa l'utente sente e pensa veramente del vostro prodotto. L'attenzione è sui bisogni dell'utente, - sentimenti, esperienze e risultati. Questo include anche le difficoltà che possono affrontare, quanto tempo impiegano per raggiungere un obiettivo desiderato, la facilità di navigazione, ecc.

Mentre pianifichi gli aggiornamenti del tuo sito, considera i tuoi consumatori con i seguenti passi:

Osserva le esperienze degli utenti. Prima di poter dare loro ciò che vogliono, devi prima osservare ciò che è. Prendi nota della navigazione del sito, dei problemi e delle difficoltà comuni e di quanto sia facile (o difficile) eseguire le funzioni sul tuo sito.
Cattura i dati. Una volta che hai osservato il comportamento dei consumatori, hai bisogno di mettere più specifiche dietro le azioni che hai visto. Questo potrebbe includere esattamente quali difficoltà stanno incontrando i visitatori o quali processi sul tuo sito stanno funzionando come dovrebbero. Prendetevi del tempo per registrare le osservazioni attraverso video, audio o note scritte.
Analizza i dati. L'analisi ti aiuta a capire il perché dei tuoi dati. Per esempio, i carrelli vengono abbandonati perché il tuo sito richiede troppe informazioni all'utente? I percorsi per completare le azioni sono lunghi e confusi? I pulsanti non sono in posizioni ovvie?
Determina le possibili soluzioni. Una volta identificati i punti deboli degli utenti, è il momento di fare un brainstorming dei possibili miglioramenti del sito. Come si può migliorare l'esperienza dell'utente e sradicare qualsiasi problema che i visitatori stanno avendo?
Implementa la soluzione migliore. Quando avete una o più idee solide su come risolvere i problemi del sito, mettetele al lavoro! Potrebbe essere necessario condurre dei test sui prototipi di alcune teorie prima di trovare la soluzione che funziona meglio, ma ricordate che i tentativi e gli errori sono comuni in qualsiasi azienda quando si determina una soluzione efficace.

Avere una buona comprensione delle persone per cui si progetta è essenziale se si vuole costruire un prodotto commercialmente di successo. Mentre i designer hanno molte tecniche che li aiutano a sviluppare questa comprensione, c'è una tecnica chiave con molti vantaggi chiamata empathy mapping.

Come suggerisce il nome, le mappe di empatia aiutano i team di prodotto a costruire empatia con i loro utenti finali. Fa pensare i membri del team da una prospettiva centrata sull'utente e li aiuta a capire i bisogni e i desideri degli utenti.

Cos'è una mappa di empatia?

[/tatsu_text][tatsu_image image= "https://irbox.it/wp-content/uploads/2021/07/33.1-Come-si-applica-lempatia-nel-web-design.jpg" image_varying_size_src= "" alignment= "center" border_width= "0" border_color= "" id= "4780" size= "large" adaptive_image= "1" max_width= '{"d":"100%"}' rebel= "0" width= '{"d":"100%"}' shadow= "none" custom_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" drop_shadow= "drop-shadow(0px 0px 0px rgba(0,0,0,0))" border_radius= "0" lazy_load= "1" placeholder_bg= "" offset= '{"d":"0px 0px"}' lightbox= "0" link= "https://issuu.com/ilbollettino/docs/il_bollettino__empathy__1_19__it_/s/120260" new_tab= "1" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":"0px 0 0 0"}' margin= '{"d":"0px 0 0 0"}' key= "BJfpS2f1Y"][/tatsu_image][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "rkNb82zyK"]

Issuu

Una mappa di empatia è uno strumento di visualizzazione usato per articolare ciò che un team di prodotto conosce di un utente. Questo strumento aiuta i team di prodotto a costruire una comprensione più ampia dell'aspetto "perché" dietro i bisogni e i desideri degli utenti. Questo strumento costringe i team di prodotto a praticare il design empatico, che sposta l'attenzione dal prodotto che vogliono costruire alle persone che useranno questo prodotto. Quando un team identifica ciò che sa dell'utente e mette queste informazioni su un grafico, ottiene una visione più olistica del mondo dell'utente e dei suoi problemi, o spazio di opportunità.

Una mappa dell'empatia descrive ciò che l'utente dice, pensa, fa e sente.

Le mappe di empatia variano in forme e dimensioni. Una tipica mappa di empatia include quattro quadranti:

[/tatsu_text][tatsu_lists style= "number" circled= "1" icon_bg= '{"id":"palette:0","color":"rgba(125,65,245,1)"}' icon_color= '{"id":"palette:1","color":"#ffffff"}' timeline= "1" timeline_color= "rgba(0,0,0,1)" list_item_margin= '{"d":"12"}' vertical_alignment= "center" custom_border= "0" border= '{"d":"0"}' border_color= "" border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' outer_border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "ByEzLUnMJt"][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= "" border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "S1MLL3z1t"]

Dire - Cosa dice l'utente del prodotto. Idealmente, questa sezione contiene citazioni reali degli utenti registrate durante le interviste o le sessioni di test degli utenti.

[/tatsu_list][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= "" border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "HJezIL2M1K"]

Pensare - A cosa pensa l'utente quando interagisce con un prodotto? Cosa occupa i pensieri dell'utente? Cosa è importante per l'utente?

Sentire - Questa sezione contiene informazioni sullo stato emotivo dell'utente. Cosa preoccupa l'utente? Cosa eccita l'utente? Come si sente l'utente riguardo all'esperienza?

Fare - Quali azioni compie l'utente? Quali azioni e comportamenti hai notato?

[/tatsu_list][/tatsu_lists][tatsu_text bg_color= "" color= "" max_width= '{"d":"100"}' wrap_alignment= "center" text_alignment= '{"d":"left"}' margin= '{"d":"0px 0px 30px 0px"}' box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" padding= '{"d":"0px 0px 0px 0px"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' border= '{"d":"0px 0px 0px 0px"}' border_color= "" border_radius= "0px" text_typography= '{"d":""}' hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" key= "B1wJwnMkY"]

Mentre la mappa dell'empatia descritta sopra è utile durante l'analisi iniziale, è un po' troppo generica per sessioni di brainstorming focalizzate sul design dell'esperienza utente. Nel tentativo di rendere le mappe di empatia più specifiche per l'UX design, esiste un formato che è molto più utile per il product design. La mappa contiene un diverso insieme di categorie:

[/tatsu_text][tatsu_lists style= "icon" circled= "0" icon_bg= "" icon_color= '{"id":"palette:0","color":"rgba(125,65,245,1)"}' timeline= "0" timeline_color= "" list_item_margin= '{"d":"12"}' vertical_alignment= "top" custom_border= "1" border= '{"d":1}' border_color= '{"id":"palette:0","color":"rgba(125,65,245,1)"}' border_style= '{"d":"solid","l":"solid","t":"solid","m":"solid"}' outer_border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' margin= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "S1V6xP2MyY"][tatsu_list icon= "icon-icon_check" circled= "0" icon_bg= "" icon_color= "" border_color= "" margin= '{"d":""}' border_style= "solid" border= '{"d":"0px 0px 0px 0px"}' outer_border_color= "" hide_in= "" css_id= "" css_classes= "" animate= "1" animation_type= "none" animation_delay= "0" animation_duration= "300" padding= '{"d":""}' border_radius= "" box_shadow= "0px 0px 0px 0px rgba(0,0,0,0)" key= "Hkagw3zJK"]

Sentimenti - Come si sente l'utente riguardo all'esperienza? Cosa è importante per lui o lei?

Compiti - Quali compiti stanno cercando di completare gli utenti?

Influenze - Quali persone, cose o luoghi influenzano il modo in cui l'utente agisce?

Punti di dolore - Quali sono i punti di dolore che l'utente sta vivendo e che spera di superare? Quali sono le loro paure, frustrazioni e ansie?

Obiettivi - Qual è l'obiettivo finale dell'utente? Cosa stanno cercando di ottenere?

Se vuoi conoscere tutti i dettagli per creare una efficace mappa dell’empatia ti consiglio di leggere questo articolo di Adobe sull’ EMPATHY DESIGN

In questo articolo abbiamo visto cos’è l’empatia, perché è importante nel web design e cosa si intende per mappa dell’empatia.

Per approfondire l'argomento su web design efficace ti consoglio di leggere questo articolo "Principi di Web Design".

Spero di leggere un tuo commento nel form che trovi qui sotto, apprezzo sempre il tuo feedback.

Un saluto.
Irina

[/tatsu_text][/tatsu_column][/tatsu_row][/tatsu_section]

Cos'è l'empatia?

Cos'è una mappa di empatia?

Leave a Reply Cancel reply