SlideShare a Scribd company logo
1 of 26
Download to read offline
Web content design:
creare contenuti di
qualità con Newired
Guido Pifferi
Newired, PM & UX Designer
Alessandra Leo
Profesia, Customer Success
Giorgio De Vita
Profesia, Sales Account
www.newired.com
www.profesia.it
newired.com
Marcella
Agenda
● Introduzione
● Cosa risolve Newired?
● Come costruire una
Journey
● Componenti Newired
● Newired best practices
● Q&A
Cosa fa
Aggiunge una guida
interattiva step-by-step a
qualsiasi applicazione web.
Lascia che le persone
imparino facendo.
Direttamente nell'app, senza
seguire alcun corso.
?
Cosa risolve ?
Applicazioni web: guida gli
utenti all'utilizzo di tool, senza
formazione:
Siti ecommerce: aumenta la
conversione aiutando l’utente a
completare in autonomia il
processo di acquisto
Portali istituzionali: migliora la user
experience degli utenti nella
fruizione dei servizi digitali
Portali Dipendenti: semplifica la
onboarding dei dipendenti
Digital Adoption Solution
La guida in-app è il
modo più efficace per
offrire formazione multi-
lingua a tutti gli utenti
La formazione tradizionale
viene sostituita da
quella contestuale: gli
utenti sono subito esperti
nell'uso del software,
migliorando la produttività
e la user experience
Riduce i costi e le
chiamate al supporto
durante la
onboarding
in azione
Journey
Callout
Dialog
Panel
Steps
Come costruire una Journey:
Dialogs
● Benvenuto
● Presentazione Journey
● Fornire informazioni cruciali in
un unico posto se non possono
essere diffuse in modo diverso
Dialog Steps sono delle bolle non contestuali che
appariranno al centro dello schermo, impedendo l'interazione
con l'applicazione target. Non è necessario che siano
collegate ad altri elementi. Adatte a:
Callouts
● Chiedere ai tuoi utenti di
interagire con elementi
specifici (pulsanti, menu, ecc.)
Callout Steps sono delle bolle contestuali che devono
essere agganciate a un elemento grafico specifico
sull'applicazione target e puntare a quell'elemento.
Adatte a:
Panels
● Fornire informazioni contestuali
per una vista specifica
● Fornire informazioni senza
impedire l'interazione con
l'applicazione di destinazione
Panel Steps sono delle bolle semi-contestuali che
appariranno in uno degli angoli dello schermo, permettendo
nel frattempo di interagire con l'applicazione di destinazione.
Adatte a:
Tips
● Fornire informazioni contestuali
su elementi specifici sullo
schermo
● Fornire informazioni che
possono essere mostrate
proprio quando l'utente ne ha
bisogno
● Creare avvisi
Tips sono fumetti contestuali che possono essere allegati a
elementi o icone personalizzate e verranno visualizzati sullo
schermo quando l'utente posiziona il cursore su di essi.
Adatti a:
Titoli brevi e concisi
Utilizza titoli brevi e lascia le informazioni
complesse nel corpo del testo.
I titoli dovrebbero essere in
maiuscolo/minuscolo.
Best practices
Scrivi l'azione da eseguire nel titolo
del Callout
Se il passaggio riguarda un'azione che deve
essere eseguita dall'utente (ad esempio un
pulsante su cui fare clic), scrivilo nel titolo.
Best practices
Corpo del testo conciso e
informativo
I Newired Journeys sono pensati per essere
una guida step-by-step per la tua app,
quindi devono fornire le informazioni giuste
al momento giusto, senza perdere la
concentrazione sul processo.
Il corpo del testo dovrebbe contenere
alcune parole, ma non più di alcune frasi.
Utilizza il testo in grassetto per evidenziare
solo gli elementi più importanti del tuo
passaggio.
Best practices
Fornire informazioni in
modo graduale e contestuale
Fornisci informazioni solo se legate
al contesto (non anticipare
informazioni che verranno
visualizzate nei passaggi
successivi).
Best practices
Utilizza una larghezza coerente
Scegli una larghezza per i tuoi passi che sia
abbastanza grande da contenere tutti i tuoi
contenuti.
Per un journey che comprende molti
passaggi, mantieni una larghezza coerente
per tutti.
Best practices
Non sovrapporre l'elemento al
passaggio
Per i callout che puntano a un elemento
piccolo, ricorda di scegliere una posizione e
una dimensione della bolla che non si
sovrapponga in alcun modo.
Best practices
Elenco delle transizioni disponibili:
● Clic
● Fare clic sul pulsante "Avanti"
● Modifica input
● Cambiamento di valore
● Passa il mouse
● Multiplo
● Tempistica
● Modifica dell'URL
Transizioni
product
tour
in CRE-azione product tour
Quando utilizzare il pulsante di
transizione "Next"?
La transizione del pulsante "Next" è
molto utile quando non vuoi che gli
utenti interagiscano direttamente con
l'applicazione di destinazione, ma vuoi
solo mostrarla sommariamente (ad
esempio per i tour del software).
Puoi anche forzare gli utenti a fare clic
sul pulsante "Next" per procedere.
Best practices
Utilizzo dell'azione del
passaggio "Vai all'URL".
● Risparmia tempo passando
direttamente ad una pagina
specifica se i tuoi utenti sanno già
cosa fare.
● Crea journey senza soluzione di
continuità tornando alla home
page per ricominciare a navigare
in una nuova sottosezione
Best practices
I 3 principali punti chiave
● Fornire informazioni in modo
graduale e contestuale
I 3 principali punti chiave
● Fornire informazioni in modo
graduale e contestuale
● Scrivi l'azione da eseguire nel
titolo del callout
I 3 principali punti chiave
● Fornire informazioni in modo
graduale e contestuale
● Scrivi l'azione da eseguire nel
titolo del callout
● Crea tour del prodotto
utilizzando il pulsante di
transizione "Next".
Q&A Time
Grazie!

More Related Content

Similar to Web content design: creare contenuti di qualità con Newired

Affrontare le sfide della product ownership senza esserne travolti
Affrontare le sfide della product ownership senza esserne travoltiAffrontare le sfide della product ownership senza esserne travolti
Affrontare le sfide della product ownership senza esserne travoltiSusanna Ferrario
 
Come creare una PWA Progressive Web App @ Inbound Strategies 2018
Come creare una PWA Progressive Web App @ Inbound Strategies 2018Come creare una PWA Progressive Web App @ Inbound Strategies 2018
Come creare una PWA Progressive Web App @ Inbound Strategies 2018Giovanni Sacheli
 
Evolutive experience design
Evolutive experience designEvolutive experience design
Evolutive experience designLuca Mascaro
 
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...DrupalDay
 
WordPress Meetup Torino Giugno 2015
WordPress Meetup Torino Giugno 2015WordPress Meetup Torino Giugno 2015
WordPress Meetup Torino Giugno 2015Maurizio Pelizzone
 
Usabilità e User Experience Design: #4 Come e Perché Fare un Test di Usabilità
Usabilità e User Experience Design: #4 Come e Perché Fare un Test di UsabilitàUsabilità e User Experience Design: #4 Come e Perché Fare un Test di Usabilità
Usabilità e User Experience Design: #4 Come e Perché Fare un Test di UsabilitàFormazioneTurismo
 
Usabilità e User Experience​ - L'utente al centro della progettazione
Usabilità e User Experience​ - L'utente al centro della progettazioneUsabilità e User Experience​ - L'utente al centro della progettazione
Usabilità e User Experience​ - L'utente al centro della progettazionesemrush_webinars
 
Usabilità e User Experience Design: #2 Test e Monitoraggio
Usabilità e User Experience Design: #2 Test e MonitoraggioUsabilità e User Experience Design: #2 Test e Monitoraggio
Usabilità e User Experience Design: #2 Test e MonitoraggioFormazioneTurismo
 
Agile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioniAgile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioniAlberto Mucignat
 
Final Thesis - Project Management e User Experience Design: Una integrazione ...
Final Thesis - Project Management e User Experience Design: Una integrazione ...Final Thesis - Project Management e User Experience Design: Una integrazione ...
Final Thesis - Project Management e User Experience Design: Una integrazione ...Filippo Andolfatto
 
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion RomaBest Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion RomaLuca Degli Esposti
 
Best Practices per il Web Mobile by Luca Degli Esposti
Best Practices per il Web Mobile by Luca Degli EspostiBest Practices per il Web Mobile by Luca Degli Esposti
Best Practices per il Web Mobile by Luca Degli EspostiCodemotion
 
Mobile user testing - IAsummit2013
Mobile user testing - IAsummit2013Mobile user testing - IAsummit2013
Mobile user testing - IAsummit2013Marco Buonvino
 
Ottimizzare il sito web dell'Hotel
Ottimizzare il sito web dell'HotelOttimizzare il sito web dell'Hotel
Ottimizzare il sito web dell'Hotelsorrentoinfo
 
E se non avessi davvero bisogno di un app?
E se non avessi davvero bisogno di un app?E se non avessi davvero bisogno di un app?
E se non avessi davvero bisogno di un app?Diego La Monica
 
Evolutive User Experience Design
Evolutive User Experience DesignEvolutive User Experience Design
Evolutive User Experience DesignLuca Mascaro
 

Similar to Web content design: creare contenuti di qualità con Newired (20)

Affrontare le sfide della product ownership senza esserne travolti
Affrontare le sfide della product ownership senza esserne travoltiAffrontare le sfide della product ownership senza esserne travolti
Affrontare le sfide della product ownership senza esserne travolti
 
Come creare una PWA Progressive Web App @ Inbound Strategies 2018
Come creare una PWA Progressive Web App @ Inbound Strategies 2018Come creare una PWA Progressive Web App @ Inbound Strategies 2018
Come creare una PWA Progressive Web App @ Inbound Strategies 2018
 
Evolutive experience design
Evolutive experience designEvolutive experience design
Evolutive experience design
 
Lean UX - Jeff Gothelf
Lean UX - Jeff GothelfLean UX - Jeff Gothelf
Lean UX - Jeff Gothelf
 
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
 
SMART website
SMART websiteSMART website
SMART website
 
WordPress Meetup Torino Giugno 2015
WordPress Meetup Torino Giugno 2015WordPress Meetup Torino Giugno 2015
WordPress Meetup Torino Giugno 2015
 
Whidbey Day
Whidbey DayWhidbey Day
Whidbey Day
 
Usabilità e User Experience Design: #4 Come e Perché Fare un Test di Usabilità
Usabilità e User Experience Design: #4 Come e Perché Fare un Test di UsabilitàUsabilità e User Experience Design: #4 Come e Perché Fare un Test di Usabilità
Usabilità e User Experience Design: #4 Come e Perché Fare un Test di Usabilità
 
Usabilità e User Experience​ - L'utente al centro della progettazione
Usabilità e User Experience​ - L'utente al centro della progettazioneUsabilità e User Experience​ - L'utente al centro della progettazione
Usabilità e User Experience​ - L'utente al centro della progettazione
 
Usabilità e User Experience Design: #2 Test e Monitoraggio
Usabilità e User Experience Design: #2 Test e MonitoraggioUsabilità e User Experience Design: #2 Test e Monitoraggio
Usabilità e User Experience Design: #2 Test e Monitoraggio
 
Agile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioniAgile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioni
 
Final Thesis - Project Management e User Experience Design: Una integrazione ...
Final Thesis - Project Management e User Experience Design: Una integrazione ...Final Thesis - Project Management e User Experience Design: Una integrazione ...
Final Thesis - Project Management e User Experience Design: Una integrazione ...
 
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion RomaBest Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma
Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma
 
Best Practices per il Web Mobile by Luca Degli Esposti
Best Practices per il Web Mobile by Luca Degli EspostiBest Practices per il Web Mobile by Luca Degli Esposti
Best Practices per il Web Mobile by Luca Degli Esposti
 
Mobile user testing - IAsummit2013
Mobile user testing - IAsummit2013Mobile user testing - IAsummit2013
Mobile user testing - IAsummit2013
 
Innovare nel B2C
Innovare nel B2CInnovare nel B2C
Innovare nel B2C
 
Ottimizzare il sito web dell'Hotel
Ottimizzare il sito web dell'HotelOttimizzare il sito web dell'Hotel
Ottimizzare il sito web dell'Hotel
 
E se non avessi davvero bisogno di un app?
E se non avessi davvero bisogno di un app?E se non avessi davvero bisogno di un app?
E se non avessi davvero bisogno di un app?
 
Evolutive User Experience Design
Evolutive User Experience DesignEvolutive User Experience Design
Evolutive User Experience Design
 

More from Profesia Srl, Lynx Group

2. Guidare il futuro, l'approccio di WSO2 Italia alle tendenze tecnologiche e...
2. Guidare il futuro, l'approccio di WSO2 Italia alle tendenze tecnologiche e...2. Guidare il futuro, l'approccio di WSO2 Italia alle tendenze tecnologiche e...
2. Guidare il futuro, l'approccio di WSO2 Italia alle tendenze tecnologiche e...Profesia Srl, Lynx Group
 
Profesia 2023 State of the Software Supply Chain Talk.pdf
Profesia 2023 State of the Software Supply Chain Talk.pdfProfesia 2023 State of the Software Supply Chain Talk.pdf
Profesia 2023 State of the Software Supply Chain Talk.pdfProfesia Srl, Lynx Group
 
In Estra la Digital Transformation parte dalla User Experience del Cliente
In Estra la Digital Transformation parte dalla User Experience del ClienteIn Estra la Digital Transformation parte dalla User Experience del Cliente
In Estra la Digital Transformation parte dalla User Experience del ClienteProfesia Srl, Lynx Group
 
Omnichannel API integration in luxury market by Gianvito Rossi
Omnichannel API integration in luxury market by Gianvito RossiOmnichannel API integration in luxury market by Gianvito Rossi
Omnichannel API integration in luxury market by Gianvito RossiProfesia Srl, Lynx Group
 
API Transformation in Crédit Agricole Italia
API Transformation in Crédit Agricole ItaliaAPI Transformation in Crédit Agricole Italia
API Transformation in Crédit Agricole ItaliaProfesia Srl, Lynx Group
 
WSO2 ITALIA SMART TALK #10 - Interoperability nelle utility, un caso reale
WSO2 ITALIA SMART TALK #10 - Interoperability nelle utility, un caso realeWSO2 ITALIA SMART TALK #10 - Interoperability nelle utility, un caso reale
WSO2 ITALIA SMART TALK #10 - Interoperability nelle utility, un caso realeProfesia Srl, Lynx Group
 
WSO2 ITALIA SMART TALK #7 - Installare WSO2 in AWS: tips and tricks
 WSO2 ITALIA SMART TALK #7 - Installare WSO2 in AWS: tips and tricks WSO2 ITALIA SMART TALK #7 - Installare WSO2 in AWS: tips and tricks
WSO2 ITALIA SMART TALK #7 - Installare WSO2 in AWS: tips and tricksProfesia Srl, Lynx Group
 
WSO2 ITALIA SMART TALK #3 WSO2 IS NEW FEATURE
 WSO2 ITALIA SMART TALK #3 WSO2 IS NEW FEATURE WSO2 ITALIA SMART TALK #3 WSO2 IS NEW FEATURE
WSO2 ITALIA SMART TALK #3 WSO2 IS NEW FEATUREProfesia Srl, Lynx Group
 
WSO2 ITALIA SMART TALK #9 - WSO2 IDENTITY SERVER & SPID: UN CASO REALE
WSO2 ITALIA SMART TALK #9 - WSO2 IDENTITY SERVER & SPID: UN CASO REALEWSO2 ITALIA SMART TALK #9 - WSO2 IDENTITY SERVER & SPID: UN CASO REALE
WSO2 ITALIA SMART TALK #9 - WSO2 IDENTITY SERVER & SPID: UN CASO REALEProfesia Srl, Lynx Group
 
WSO2 ITALIA SMART TALK #6 - Autenticazione User Centric: Identità digitale
WSO2 ITALIA SMART TALK #6 - Autenticazione User Centric: Identità digitaleWSO2 ITALIA SMART TALK #6 - Autenticazione User Centric: Identità digitale
WSO2 ITALIA SMART TALK #6 - Autenticazione User Centric: Identità digitaleProfesia Srl, Lynx Group
 
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...Profesia Srl, Lynx Group
 
WSO2 ITALIA SMART TALK #4 - Telefonica Use Case
WSO2 ITALIA SMART TALK #4 - Telefonica Use CaseWSO2 ITALIA SMART TALK #4 - Telefonica Use Case
WSO2 ITALIA SMART TALK #4 - Telefonica Use CaseProfesia Srl, Lynx Group
 
WSO2 ITALIA SMART TALK 2023 #2- WSO2 APIM new Feature
WSO2 ITALIA SMART TALK 2023 #2- WSO2 APIM new FeatureWSO2 ITALIA SMART TALK 2023 #2- WSO2 APIM new Feature
WSO2 ITALIA SMART TALK 2023 #2- WSO2 APIM new FeatureProfesia Srl, Lynx Group
 
PA NON TI DEMO: weModI e Interoperabilità delle PA...
PA NON TI DEMO: weModI e Interoperabilità delle PA...PA NON TI DEMO: weModI e Interoperabilità delle PA...
PA NON TI DEMO: weModI e Interoperabilità delle PA...Profesia Srl, Lynx Group
 
WSO2 ITALIA SMART TALK #1 - WSO2 diventa MODI e PDND compliant
WSO2 ITALIA SMART TALK #1 - WSO2 diventa MODI e PDND compliantWSO2 ITALIA SMART TALK #1 - WSO2 diventa MODI e PDND compliant
WSO2 ITALIA SMART TALK #1 - WSO2 diventa MODI e PDND compliantProfesia Srl, Lynx Group
 
WSO2 Oxygenate Italy 2022 CSI Piemonte. Marco Boero
WSO2 Oxygenate Italy 2022 CSI Piemonte. Marco BoeroWSO2 Oxygenate Italy 2022 CSI Piemonte. Marco Boero
WSO2 Oxygenate Italy 2022 CSI Piemonte. Marco BoeroProfesia Srl, Lynx Group
 
WSO2 Oxygenate Italy 2022 Raiffeisen Information Service. Roberto Palmarin
WSO2 Oxygenate Italy 2022 Raiffeisen Information Service. Roberto PalmarinWSO2 Oxygenate Italy 2022 Raiffeisen Information Service. Roberto Palmarin
WSO2 Oxygenate Italy 2022 Raiffeisen Information Service. Roberto PalmarinProfesia Srl, Lynx Group
 

More from Profesia Srl, Lynx Group (20)

2. Guidare il futuro, l'approccio di WSO2 Italia alle tendenze tecnologiche e...
2. Guidare il futuro, l'approccio di WSO2 Italia alle tendenze tecnologiche e...2. Guidare il futuro, l'approccio di WSO2 Italia alle tendenze tecnologiche e...
2. Guidare il futuro, l'approccio di WSO2 Italia alle tendenze tecnologiche e...
 
Profesia 2023 State of the Software Supply Chain Talk.pdf
Profesia 2023 State of the Software Supply Chain Talk.pdfProfesia 2023 State of the Software Supply Chain Talk.pdf
Profesia 2023 State of the Software Supply Chain Talk.pdf
 
In Estra la Digital Transformation parte dalla User Experience del Cliente
In Estra la Digital Transformation parte dalla User Experience del ClienteIn Estra la Digital Transformation parte dalla User Experience del Cliente
In Estra la Digital Transformation parte dalla User Experience del Cliente
 
Omnichannel API integration in luxury market by Gianvito Rossi
Omnichannel API integration in luxury market by Gianvito RossiOmnichannel API integration in luxury market by Gianvito Rossi
Omnichannel API integration in luxury market by Gianvito Rossi
 
API Transformation in Crédit Agricole Italia
API Transformation in Crédit Agricole ItaliaAPI Transformation in Crédit Agricole Italia
API Transformation in Crédit Agricole Italia
 
Verso l’universo e oltre
Verso l’universo e oltreVerso l’universo e oltre
Verso l’universo e oltre
 
WSO2 ITALIA SMART TALK #10 - Interoperability nelle utility, un caso reale
WSO2 ITALIA SMART TALK #10 - Interoperability nelle utility, un caso realeWSO2 ITALIA SMART TALK #10 - Interoperability nelle utility, un caso reale
WSO2 ITALIA SMART TALK #10 - Interoperability nelle utility, un caso reale
 
WSO2 ITALIA SMART TALK #7 - Installare WSO2 in AWS: tips and tricks
 WSO2 ITALIA SMART TALK #7 - Installare WSO2 in AWS: tips and tricks WSO2 ITALIA SMART TALK #7 - Installare WSO2 in AWS: tips and tricks
WSO2 ITALIA SMART TALK #7 - Installare WSO2 in AWS: tips and tricks
 
WSO2 ITALIA SMART TALK #3 WSO2 IS NEW FEATURE
 WSO2 ITALIA SMART TALK #3 WSO2 IS NEW FEATURE WSO2 ITALIA SMART TALK #3 WSO2 IS NEW FEATURE
WSO2 ITALIA SMART TALK #3 WSO2 IS NEW FEATURE
 
WSO2 ITALIA SMART TALK #9 - WSO2 IDENTITY SERVER & SPID: UN CASO REALE
WSO2 ITALIA SMART TALK #9 - WSO2 IDENTITY SERVER & SPID: UN CASO REALEWSO2 ITALIA SMART TALK #9 - WSO2 IDENTITY SERVER & SPID: UN CASO REALE
WSO2 ITALIA SMART TALK #9 - WSO2 IDENTITY SERVER & SPID: UN CASO REALE
 
WSO2 ITALIA SMARTTALK #8 ASYNCAPI.pdf
WSO2 ITALIA SMARTTALK #8 ASYNCAPI.pdfWSO2 ITALIA SMARTTALK #8 ASYNCAPI.pdf
WSO2 ITALIA SMARTTALK #8 ASYNCAPI.pdf
 
WSO2 ITALIA SMART TALK #6 - Autenticazione User Centric: Identità digitale
WSO2 ITALIA SMART TALK #6 - Autenticazione User Centric: Identità digitaleWSO2 ITALIA SMART TALK #6 - Autenticazione User Centric: Identità digitale
WSO2 ITALIA SMART TALK #6 - Autenticazione User Centric: Identità digitale
 
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...
 
WSO2 ITALIA SMART TALK #4 - Telefonica Use Case
WSO2 ITALIA SMART TALK #4 - Telefonica Use CaseWSO2 ITALIA SMART TALK #4 - Telefonica Use Case
WSO2 ITALIA SMART TALK #4 - Telefonica Use Case
 
WSO2 ITALIA SMART TALK 2023 #2- WSO2 APIM new Feature
WSO2 ITALIA SMART TALK 2023 #2- WSO2 APIM new FeatureWSO2 ITALIA SMART TALK 2023 #2- WSO2 APIM new Feature
WSO2 ITALIA SMART TALK 2023 #2- WSO2 APIM new Feature
 
PA NON TI DEMO: weModI e Interoperabilità delle PA...
PA NON TI DEMO: weModI e Interoperabilità delle PA...PA NON TI DEMO: weModI e Interoperabilità delle PA...
PA NON TI DEMO: weModI e Interoperabilità delle PA...
 
WSO2 ITALIA SMART TALK #1 - WSO2 diventa MODI e PDND compliant
WSO2 ITALIA SMART TALK #1 - WSO2 diventa MODI e PDND compliantWSO2 ITALIA SMART TALK #1 - WSO2 diventa MODI e PDND compliant
WSO2 ITALIA SMART TALK #1 - WSO2 diventa MODI e PDND compliant
 
WSO2 Oxygenate Italy 2022 CSI Piemonte. Marco Boero
WSO2 Oxygenate Italy 2022 CSI Piemonte. Marco BoeroWSO2 Oxygenate Italy 2022 CSI Piemonte. Marco Boero
WSO2 Oxygenate Italy 2022 CSI Piemonte. Marco Boero
 
WSO2 Oxygenate Italy 2022 Raiffeisen Information Service. Roberto Palmarin
WSO2 Oxygenate Italy 2022 Raiffeisen Information Service. Roberto PalmarinWSO2 Oxygenate Italy 2022 Raiffeisen Information Service. Roberto Palmarin
WSO2 Oxygenate Italy 2022 Raiffeisen Information Service. Roberto Palmarin
 
WSO2 Oxygenate Italy 2022 Matteo Bordin
WSO2 Oxygenate Italy 2022 Matteo BordinWSO2 Oxygenate Italy 2022 Matteo Bordin
WSO2 Oxygenate Italy 2022 Matteo Bordin
 

Web content design: creare contenuti di qualità con Newired

  • 1. Web content design: creare contenuti di qualità con Newired Guido Pifferi Newired, PM & UX Designer Alessandra Leo Profesia, Customer Success Giorgio De Vita Profesia, Sales Account www.newired.com www.profesia.it
  • 2. newired.com Marcella Agenda ● Introduzione ● Cosa risolve Newired? ● Come costruire una Journey ● Componenti Newired ● Newired best practices ● Q&A
  • 3. Cosa fa Aggiunge una guida interattiva step-by-step a qualsiasi applicazione web. Lascia che le persone imparino facendo. Direttamente nell'app, senza seguire alcun corso. ?
  • 4. Cosa risolve ? Applicazioni web: guida gli utenti all'utilizzo di tool, senza formazione: Siti ecommerce: aumenta la conversione aiutando l’utente a completare in autonomia il processo di acquisto Portali istituzionali: migliora la user experience degli utenti nella fruizione dei servizi digitali Portali Dipendenti: semplifica la onboarding dei dipendenti
  • 5. Digital Adoption Solution La guida in-app è il modo più efficace per offrire formazione multi- lingua a tutti gli utenti La formazione tradizionale viene sostituita da quella contestuale: gli utenti sono subito esperti nell'uso del software, migliorando la produttività e la user experience Riduce i costi e le chiamate al supporto durante la onboarding
  • 8. Dialogs ● Benvenuto ● Presentazione Journey ● Fornire informazioni cruciali in un unico posto se non possono essere diffuse in modo diverso Dialog Steps sono delle bolle non contestuali che appariranno al centro dello schermo, impedendo l'interazione con l'applicazione target. Non è necessario che siano collegate ad altri elementi. Adatte a:
  • 9. Callouts ● Chiedere ai tuoi utenti di interagire con elementi specifici (pulsanti, menu, ecc.) Callout Steps sono delle bolle contestuali che devono essere agganciate a un elemento grafico specifico sull'applicazione target e puntare a quell'elemento. Adatte a:
  • 10. Panels ● Fornire informazioni contestuali per una vista specifica ● Fornire informazioni senza impedire l'interazione con l'applicazione di destinazione Panel Steps sono delle bolle semi-contestuali che appariranno in uno degli angoli dello schermo, permettendo nel frattempo di interagire con l'applicazione di destinazione. Adatte a:
  • 11. Tips ● Fornire informazioni contestuali su elementi specifici sullo schermo ● Fornire informazioni che possono essere mostrate proprio quando l'utente ne ha bisogno ● Creare avvisi Tips sono fumetti contestuali che possono essere allegati a elementi o icone personalizzate e verranno visualizzati sullo schermo quando l'utente posiziona il cursore su di essi. Adatti a:
  • 12. Titoli brevi e concisi Utilizza titoli brevi e lascia le informazioni complesse nel corpo del testo. I titoli dovrebbero essere in maiuscolo/minuscolo. Best practices
  • 13. Scrivi l'azione da eseguire nel titolo del Callout Se il passaggio riguarda un'azione che deve essere eseguita dall'utente (ad esempio un pulsante su cui fare clic), scrivilo nel titolo. Best practices
  • 14. Corpo del testo conciso e informativo I Newired Journeys sono pensati per essere una guida step-by-step per la tua app, quindi devono fornire le informazioni giuste al momento giusto, senza perdere la concentrazione sul processo. Il corpo del testo dovrebbe contenere alcune parole, ma non più di alcune frasi. Utilizza il testo in grassetto per evidenziare solo gli elementi più importanti del tuo passaggio. Best practices
  • 15. Fornire informazioni in modo graduale e contestuale Fornisci informazioni solo se legate al contesto (non anticipare informazioni che verranno visualizzate nei passaggi successivi). Best practices
  • 16. Utilizza una larghezza coerente Scegli una larghezza per i tuoi passi che sia abbastanza grande da contenere tutti i tuoi contenuti. Per un journey che comprende molti passaggi, mantieni una larghezza coerente per tutti. Best practices
  • 17. Non sovrapporre l'elemento al passaggio Per i callout che puntano a un elemento piccolo, ricorda di scegliere una posizione e una dimensione della bolla che non si sovrapponga in alcun modo. Best practices
  • 18. Elenco delle transizioni disponibili: ● Clic ● Fare clic sul pulsante "Avanti" ● Modifica input ● Cambiamento di valore ● Passa il mouse ● Multiplo ● Tempistica ● Modifica dell'URL Transizioni
  • 20. Quando utilizzare il pulsante di transizione "Next"? La transizione del pulsante "Next" è molto utile quando non vuoi che gli utenti interagiscano direttamente con l'applicazione di destinazione, ma vuoi solo mostrarla sommariamente (ad esempio per i tour del software). Puoi anche forzare gli utenti a fare clic sul pulsante "Next" per procedere. Best practices
  • 21. Utilizzo dell'azione del passaggio "Vai all'URL". ● Risparmia tempo passando direttamente ad una pagina specifica se i tuoi utenti sanno già cosa fare. ● Crea journey senza soluzione di continuità tornando alla home page per ricominciare a navigare in una nuova sottosezione Best practices
  • 22. I 3 principali punti chiave ● Fornire informazioni in modo graduale e contestuale
  • 23. I 3 principali punti chiave ● Fornire informazioni in modo graduale e contestuale ● Scrivi l'azione da eseguire nel titolo del callout
  • 24. I 3 principali punti chiave ● Fornire informazioni in modo graduale e contestuale ● Scrivi l'azione da eseguire nel titolo del callout ● Crea tour del prodotto utilizzando il pulsante di transizione "Next".