SlideShare una empresa de Scribd logo
1 de 47
Descargar para leer sin conexión
LE PERFORMANCE
IL DESIGN NEL WEB
Simone Viani @flik185
L’IMPORTANZA DELLE PERFOMANCE
Le performance sono un parametro fondamentale da
tenere in considerazione quando si lavora sul web:
possono far la differenza tra una nuova vendita per un
e-commerce e la perdita di un utente per un social
network.
L’IMPORTANZA DELLE PERFOMANCE
È fondamentale vedere le performance come un
elemento imprescindibile del nostro workflow, e come
tale devono essere prese in considerazione sin dalle
prime fasi di progetto.
LE PERFORMANCE SONO
LA USER EXPERIENCE
SIAMO ABITUATI AD OTTIMIZZARE PER LAYOUT
(RESPONSIVE DESIGN), MA NON PER LE PERFORMANCE
TIME TO INTERACT (TTI)
Un modo efficace di misurare le performance web è
quello di considerare il Time to Interact (TTI).
Il TTI equivale al tempo trascorso tra l’inizio del
rendering di una pagina web, e la possibilità dell’utente
di interagire con essa.
TIME TO INTERACT
RADWARE - 2015
TTI SUPERIORI AI 3 SECONDI PORTANO IL 57%
DEGLI UTENTI AD ABBANDONARE LA PAGINA.
TTI RETAIL 2015
TEMPO MEDIO DI INTERAZIONE (TTI)
TOP 100 SITI RETAIL12% 14%
MENO DI 3s PIU’ DI 10s
TTI PIÙ LENTI
5.2 SEC
25.1 SEC
3 SEC
-22%
TRAFFICO
-22%
CONVERSION
+50%
BOUNCE RATE
5 SEC+105%
BOUNCE RATE
-38%
CONVERSION
-35%
TRAFFICO
1 SEC
TECNOLOGIA & DESIGN
LE PERFORMANCE
TECNOLOGIA & DESIGN
Quando si parla di ottimizzare le performance di un sito
web si pensa ad un’attività esclusivamente di carattere
tecnologico, fatta di ottimizzazione del codice di
sviluppo e di fine-tuning del server per ridurre i tempi
di risposta.
TECNOLOGIA & DESIGN
Indubbiamente la tecnologia gioca un ruolo
fondamentale nelle performance di un sito web.
Vi è però un’area di attività dell’ottimizzazione delle
performance che chiama in causa anche il design.
INTERVENENDO SUL DESIGN, POSSIAMO LAVORARE SULLA
PERCEZIONE DEL TEMPO DELL’UTENTE, LIMITANDO IN PARTE IL
PROBLEMA DEI TTI ALTI.
TIME IS MEASURED OBJECTIVELY BUT PERCEIVED
SUBJECTIVELY, AND EXPERIENCES CAN BE ENGINEERED TO
IMPROVE PERCEIVED PERFORMANCE.
Ilya Grigorik - High Performance Browser Networking
0-100ms nessun delay percepito
100-300ms piccolo ma percettibile delay
300-1000ms delay percepito
1000ms+ fluidità di navigazione compromessa
10000ms+
perdita di attenzione,
abbandono del task
TEMPO EFFETTIVO VS TEMPO PERCEPITO
CASE STUDIES
TEMPO PERCEPITO
POLAR
CASE STUDY - POLAR
Nel 2013 lo staff di Polar (un ‘app alla Quora)
decide, per ridurre i tempi di caricamento, di
introdurre all’interno della propria app un
browser embed per la visualizzazione di alcuni
contenuti.
Per informare l’utente del download del
contenuto viene visualizzato un loader al
centro di uno spazio completamente vuoto.
CASE STUDY - POLAR
Al rilascio molti utenti si lamentano di quanto l’app sia
diventata lenta
CASE STUDY - POLAR
Non avendo nulla su cui
concentrarsi, l’utente
percepisce maggiormente il
passare del tempo.
Il loader viene allora rimosso,
e sostituito con skeleton
della pagina.
CASE STUDY - POLAR
Il tempo effettivo del download è immutato ma gli utenti
apprezzano la velocità raggiunta (che non è cambiata)
FACEBOOK
CASE STUDY - FACEBOOK
Eseguendo un A/B test sulla schermata di
caricamento, in Facebook scoprono che
l’utente attribuiva ‘la colpa’ dell’attesa
all’app stessa, essendoci un loader
custom (e quindi associato al brand).
Semplicemente inserendo loader di
sistema l’utente concentrava il suo ‘astio’
verso il telefono o la rete.
loader custom loader sistema
IL FEEDBACK
SOLUZIONI DI DESIGN
PER ASSICURARE L’UTENTE CHE L’APPLICAZIONE STA LAVORANDO, E
CHE C’È DELL’ EFFETTIVO PROGRESSO NEL CARICAMENTO DELLA
PAGINA, OCCORRE LAVORARE SUL (DESIGN DEL) FEEDBACK.
IL FEEDBACK
Un feedback deve rispondere a due domande:
STATUS ATTUALE | cosa sta succedendo?
STATUS FUTURO | cosa succederà?
IL FEEDBACK
Un feedback è utile quando:
Riduce l’incertezza - rassicurando l’utente del funzionamento
corretto dell’applicazione
Offre un motivo di attesa – influenzando la percezione del
tempo
IL FEEDBACK
I feedback devono esplicitare la maggior parte delle
interazioni dell’utente con l’interfaccia.
In termini di accessibilità vanno prese in considerazione
anche le interazioni da tastiera (TAB navigation) e la lettura
da screen reader.
IL FEEDBACK
L’interazione con un bottone ad esempio
risulterà più “naturale” e chiara se ogni
stato dell’azione è rappresentato:
Hover / Focus da Tastiera
Click / Touch
Eventuale Caricamento / Termine
Termine
Indicatori di progresso
Feedback testuale
Animazioni composte
DESIGN DEL FEEDBACK
INDICATORI DI PROGRESSO
DESIGN DEL FEEDBACK
GLI INDICATORI DI PROGRESSO ANDREBBERO USATI PER
TEMPI DI ATTESA SUPERIORE AL SECONDO.
PER CARICAMENTI INFERIORI LE ANIMAZIONI POSSONO
RISULTARE FASTIDIOSE, NON DANDO UN REALE VALORE
ALL’UTENTE.
INDICATORI DI PROGRESSO
TIPOLOGIE
Indeterminato (loader/animazioni)
Determinato (loader/progress bar)
INDICATORI DI PROGRESSO - INDETERMINATI
Non forniscono all’utente
informazioni sui tempi di
caricamento.
Hanno solitamente animazioni
particolari per catturare
l’attenzione dell’utente.
https://dribbble.com/chrisgannon/tags/loader
INDICATORI DI PROGRESSO - DETERMINATI
Possono rappresentare lo
svolgimento di una o più azioni.
Non si devono mai fermare ne
decrescere, altrimenti darebbero
la percezione di
malfunzionamento.
INDICATORI DI PROGRESSO - DETERMINATI
Integrate con l’indicazione della
percentuale di caricamento o divise
in step, possono aiutare l’utente a
capire meglio quanto velocemente
viene processata l’azione.
FEEDBACK TESTUALE
DESIGN DEL FEEDBACK
FEEDBACK TESTUALE
Per azioni che richiedo più di 10s è consigliabile l’uso di feedback testuali
percentuale di caricamento
stima del tempo restante
quanti step mancano
È IMPORTANTE DARE L’IDEA CHE
L’OPERAZIONE SVOLTA SIA
COMPLESSA E CHE VALGA LA
PENA ATTENDERE
33 secondi
Tempo di Caricamento
ANIMAZIONI COMPOSTE
DESIGN DEL FEEDBACK
ANIMAZIONI COMPOSTE
TIPOLOGIE
Skeleton Screen
Transizioni
SKELETON SCREEN
Viene subito suggerita la
futura struttura della pagina
caricandone lo scheletro,
dando l’illusione di
immediatezza di risposta.
Usato da siti come Facebook o
Medium.
TRANSIZIONI
Attraverso una serie di
transizioni si può mantenere
lo schermo “attivo” durante il
caricamento.
Usato dall’app di Google
Search
LOADER VS. TRANSIZIONE
CONCEPIRE COME PARTE INTEGRANTE DEL DESIGN UNA
GERARCHIA DI CARICAMENTO DELLE VARIE COMPONENTI
DELLA PAGINA PERMETTE DI GESTIRE IL TEMPO DI
ATTESA PERCEPITO DALL’UTENTE IN MANIERA PIÙ
MIRATA.
USEFUL FIRST
NON-ESSENTIALS LATER
Simone Viani @flik185

Más contenido relacionado

Destacado

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignSimone Viani
 
Ottimizzazione di un sito web per i motori di ricerca - Zenzero Lab
Ottimizzazione di un sito web per i motori di ricerca - Zenzero LabOttimizzazione di un sito web per i motori di ricerca - Zenzero Lab
Ottimizzazione di un sito web per i motori di ricerca - Zenzero LabTeamZenzeroLab
 
Ottimizzare un sito web per i motori di ricerca
Ottimizzare un sito web per i motori di ricercaOttimizzare un sito web per i motori di ricerca
Ottimizzare un sito web per i motori di ricercaMaurizio Pelizzone
 
7 - Ricercare nel web - 16/17
7 - Ricercare nel web - 16/177 - Ricercare nel web - 16/17
7 - Ricercare nel web - 16/17Giuseppe Vizzari
 
Els Oosthoek, artikel TVOO 2017 Nick van Dam
Els Oosthoek, artikel TVOO 2017 Nick van Dam Els Oosthoek, artikel TVOO 2017 Nick van Dam
Els Oosthoek, artikel TVOO 2017 Nick van Dam Els Oosthoek
 
Predlog ministara (biografije), Vlada Srbije
Predlog ministara (biografije), Vlada SrbijePredlog ministara (biografije), Vlada Srbije
Predlog ministara (biografije), Vlada Srbijegordana comic
 
Statically Compiling Ruby with LLVM
Statically Compiling Ruby with LLVMStatically Compiling Ruby with LLVM
Statically Compiling Ruby with LLVMLaurent Sansonetti
 
【土曜会】ハードコアな鑑賞入門:カワムラシュウイチ
【土曜会】ハードコアな鑑賞入門:カワムラシュウイチ【土曜会】ハードコアな鑑賞入門:カワムラシュウイチ
【土曜会】ハードコアな鑑賞入門:カワムラシュウイチじょいとも
 
Brillo/Weave Part 1: High Level Introduction
Brillo/Weave Part 1: High Level IntroductionBrillo/Weave Part 1: High Level Introduction
Brillo/Weave Part 1: High Level IntroductionJalal Rohani
 
10 Social Sharing Statistics
10 Social Sharing Statistics10 Social Sharing Statistics
10 Social Sharing StatisticsCharlotte Day
 

Destacado (15)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Ottimizzazione di un sito web per i motori di ricerca - Zenzero Lab
Ottimizzazione di un sito web per i motori di ricerca - Zenzero LabOttimizzazione di un sito web per i motori di ricerca - Zenzero Lab
Ottimizzazione di un sito web per i motori di ricerca - Zenzero Lab
 
Ottimizzare un sito web per i motori di ricerca
Ottimizzare un sito web per i motori di ricercaOttimizzare un sito web per i motori di ricerca
Ottimizzare un sito web per i motori di ricerca
 
7 - Ricercare nel web - 16/17
7 - Ricercare nel web - 16/177 - Ricercare nel web - 16/17
7 - Ricercare nel web - 16/17
 
Il Marketing dei motori di ricerca e la ricerca organica: il SEO dal web al s...
Il Marketing dei motori di ricerca e la ricerca organica: il SEO dal web al s...Il Marketing dei motori di ricerca e la ricerca organica: il SEO dal web al s...
Il Marketing dei motori di ricerca e la ricerca organica: il SEO dal web al s...
 
Els Oosthoek, artikel TVOO 2017 Nick van Dam
Els Oosthoek, artikel TVOO 2017 Nick van Dam Els Oosthoek, artikel TVOO 2017 Nick van Dam
Els Oosthoek, artikel TVOO 2017 Nick van Dam
 
Predlog ministara (biografije), Vlada Srbije
Predlog ministara (biografije), Vlada SrbijePredlog ministara (biografije), Vlada Srbije
Predlog ministara (biografije), Vlada Srbije
 
Design and Development Solution
Design and Development SolutionDesign and Development Solution
Design and Development Solution
 
Statically Compiling Ruby with LLVM
Statically Compiling Ruby with LLVMStatically Compiling Ruby with LLVM
Statically Compiling Ruby with LLVM
 
Teach children-basics
Teach children-basicsTeach children-basics
Teach children-basics
 
Simmethod From Software As A Service To Outcomes As A Service, Twitter and Ya...
Simmethod From Software As A Service To Outcomes As A Service, Twitter and Ya...Simmethod From Software As A Service To Outcomes As A Service, Twitter and Ya...
Simmethod From Software As A Service To Outcomes As A Service, Twitter and Ya...
 
【土曜会】ハードコアな鑑賞入門:カワムラシュウイチ
【土曜会】ハードコアな鑑賞入門:カワムラシュウイチ【土曜会】ハードコアな鑑賞入門:カワムラシュウイチ
【土曜会】ハードコアな鑑賞入門:カワムラシュウイチ
 
Blog links-url-content efg
Blog links-url-content efgBlog links-url-content efg
Blog links-url-content efg
 
Brillo/Weave Part 1: High Level Introduction
Brillo/Weave Part 1: High Level IntroductionBrillo/Weave Part 1: High Level Introduction
Brillo/Weave Part 1: High Level Introduction
 
10 Social Sharing Statistics
10 Social Sharing Statistics10 Social Sharing Statistics
10 Social Sharing Statistics
 

Similar a Le performance

Principi di Interaction Design
Principi di Interaction DesignPrincipi di Interaction Design
Principi di Interaction DesignSteve Maraspin
 
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
 
Project Management workshop (Italian)
Project Management workshop (Italian)Project Management workshop (Italian)
Project Management workshop (Italian)paolo_marchioro
 
Responsive web design RT
Responsive web design RTResponsive web design RT
Responsive web design RTJservice
 
Mobile Usability
Mobile UsabilityMobile Usability
Mobile UsabilityKEA s.r.l.
 
Lean Web Solutions with WP [versione italiana]
Lean Web Solutions with WP [versione italiana]Lean Web Solutions with WP [versione italiana]
Lean Web Solutions with WP [versione italiana]Carlo Beschi
 
Responsive Design: dall'identità al web
Responsive Design: dall'identità al webResponsive Design: dall'identità al web
Responsive Design: dall'identità al webCarlo Frinolli Puzzilli
 
Web content design: creare contenuti di qualità con Newired
Web content design: creare contenuti di qualità con NewiredWeb content design: creare contenuti di qualità con Newired
Web content design: creare contenuti di qualità con NewiredProfesia Srl, Lynx Group
 
Responsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webResponsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webJservice
 
Mobile App Analytics: misurare le performance e individuare i KPI utili al bu...
Mobile App Analytics: misurare le performance e individuare i KPI utili al bu...Mobile App Analytics: misurare le performance e individuare i KPI utili al bu...
Mobile App Analytics: misurare le performance e individuare i KPI utili al bu...IQUII
 
wow factor apps and ux design techniques ( for i phone and ipad )
wow factor apps and ux design techniques ( for i phone and ipad )wow factor apps and ux design techniques ( for i phone and ipad )
wow factor apps and ux design techniques ( for i phone and ipad )Acrmnet s.r.l.
 
Come mantenere vive le pubblicazioni su carta grazie alla Realtà Aumentata
Come mantenere vive le pubblicazioni su carta grazie alla Realtà AumentataCome mantenere vive le pubblicazioni su carta grazie alla Realtà Aumentata
Come mantenere vive le pubblicazioni su carta grazie alla Realtà AumentataKEA s.r.l.
 
Yooplus For Veneto Camp
Yooplus For Veneto CampYooplus For Veneto Camp
Yooplus For Veneto Campalina0559
 
Responsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parteResponsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parteFormazioneTurismo
 
Creare strumenti, pensare esperienze
Creare strumenti, pensare esperienzeCreare strumenti, pensare esperienze
Creare strumenti, pensare esperienzeLuca Mascaro
 
Introduzione all'Agile Software Development
Introduzione all'Agile Software DevelopmentIntroduzione all'Agile Software Development
Introduzione all'Agile Software DevelopmentPaolo Sammicheli
 
Introduzione all'Agile Software Development
Introduzione all'Agile Software DevelopmentIntroduzione all'Agile Software Development
Introduzione all'Agile Software DevelopmentPaolo Sammicheli
 
B com 2014 | Mobile App o Mobile Web? Qual è la soluzione migliore per il tuo...
B com 2014 | Mobile App o Mobile Web? Qual è la soluzione migliore per il tuo...B com 2014 | Mobile App o Mobile Web? Qual è la soluzione migliore per il tuo...
B com 2014 | Mobile App o Mobile Web? Qual è la soluzione migliore per il tuo...B com Expo | GL events Italia
 

Similar a Le performance (20)

Principi di Interaction Design
Principi di Interaction DesignPrincipi di Interaction Design
Principi di Interaction Design
 
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
 
Project Management workshop (Italian)
Project Management workshop (Italian)Project Management workshop (Italian)
Project Management workshop (Italian)
 
Responsive web design RT
Responsive web design RTResponsive web design RT
Responsive web design RT
 
Mobile Usability
Mobile UsabilityMobile Usability
Mobile Usability
 
Lean Web Solutions with WP [versione italiana]
Lean Web Solutions with WP [versione italiana]Lean Web Solutions with WP [versione italiana]
Lean Web Solutions with WP [versione italiana]
 
Responsive Design: dall'identità al web
Responsive Design: dall'identità al webResponsive Design: dall'identità al web
Responsive Design: dall'identità al web
 
Web content design: creare contenuti di qualità con Newired
Web content design: creare contenuti di qualità con NewiredWeb content design: creare contenuti di qualità con Newired
Web content design: creare contenuti di qualità con Newired
 
Responsivedesign
ResponsivedesignResponsivedesign
Responsivedesign
 
Responsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webResponsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti web
 
10 prodigyt
10 prodigyt10 prodigyt
10 prodigyt
 
Mobile App Analytics: misurare le performance e individuare i KPI utili al bu...
Mobile App Analytics: misurare le performance e individuare i KPI utili al bu...Mobile App Analytics: misurare le performance e individuare i KPI utili al bu...
Mobile App Analytics: misurare le performance e individuare i KPI utili al bu...
 
wow factor apps and ux design techniques ( for i phone and ipad )
wow factor apps and ux design techniques ( for i phone and ipad )wow factor apps and ux design techniques ( for i phone and ipad )
wow factor apps and ux design techniques ( for i phone and ipad )
 
Come mantenere vive le pubblicazioni su carta grazie alla Realtà Aumentata
Come mantenere vive le pubblicazioni su carta grazie alla Realtà AumentataCome mantenere vive le pubblicazioni su carta grazie alla Realtà Aumentata
Come mantenere vive le pubblicazioni su carta grazie alla Realtà Aumentata
 
Yooplus For Veneto Camp
Yooplus For Veneto CampYooplus For Veneto Camp
Yooplus For Veneto Camp
 
Responsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parteResponsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parte
 
Creare strumenti, pensare esperienze
Creare strumenti, pensare esperienzeCreare strumenti, pensare esperienze
Creare strumenti, pensare esperienze
 
Introduzione all'Agile Software Development
Introduzione all'Agile Software DevelopmentIntroduzione all'Agile Software Development
Introduzione all'Agile Software Development
 
Introduzione all'Agile Software Development
Introduzione all'Agile Software DevelopmentIntroduzione all'Agile Software Development
Introduzione all'Agile Software Development
 
B com 2014 | Mobile App o Mobile Web? Qual è la soluzione migliore per il tuo...
B com 2014 | Mobile App o Mobile Web? Qual è la soluzione migliore per il tuo...B com 2014 | Mobile App o Mobile Web? Qual è la soluzione migliore per il tuo...
B com 2014 | Mobile App o Mobile Web? Qual è la soluzione migliore per il tuo...
 

Le performance

  • 1. LE PERFORMANCE IL DESIGN NEL WEB Simone Viani @flik185
  • 2. L’IMPORTANZA DELLE PERFOMANCE Le performance sono un parametro fondamentale da tenere in considerazione quando si lavora sul web: possono far la differenza tra una nuova vendita per un e-commerce e la perdita di un utente per un social network.
  • 3. L’IMPORTANZA DELLE PERFOMANCE È fondamentale vedere le performance come un elemento imprescindibile del nostro workflow, e come tale devono essere prese in considerazione sin dalle prime fasi di progetto.
  • 4. LE PERFORMANCE SONO LA USER EXPERIENCE
  • 5. SIAMO ABITUATI AD OTTIMIZZARE PER LAYOUT (RESPONSIVE DESIGN), MA NON PER LE PERFORMANCE
  • 6. TIME TO INTERACT (TTI) Un modo efficace di misurare le performance web è quello di considerare il Time to Interact (TTI). Il TTI equivale al tempo trascorso tra l’inizio del rendering di una pagina web, e la possibilità dell’utente di interagire con essa. TIME TO INTERACT
  • 7. RADWARE - 2015 TTI SUPERIORI AI 3 SECONDI PORTANO IL 57% DEGLI UTENTI AD ABBANDONARE LA PAGINA.
  • 8. TTI RETAIL 2015 TEMPO MEDIO DI INTERAZIONE (TTI) TOP 100 SITI RETAIL12% 14% MENO DI 3s PIU’ DI 10s TTI PIÙ LENTI 5.2 SEC 25.1 SEC
  • 9. 3 SEC -22% TRAFFICO -22% CONVERSION +50% BOUNCE RATE 5 SEC+105% BOUNCE RATE -38% CONVERSION -35% TRAFFICO 1 SEC
  • 10. TECNOLOGIA & DESIGN LE PERFORMANCE
  • 11. TECNOLOGIA & DESIGN Quando si parla di ottimizzare le performance di un sito web si pensa ad un’attività esclusivamente di carattere tecnologico, fatta di ottimizzazione del codice di sviluppo e di fine-tuning del server per ridurre i tempi di risposta.
  • 12. TECNOLOGIA & DESIGN Indubbiamente la tecnologia gioca un ruolo fondamentale nelle performance di un sito web. Vi è però un’area di attività dell’ottimizzazione delle performance che chiama in causa anche il design.
  • 13. INTERVENENDO SUL DESIGN, POSSIAMO LAVORARE SULLA PERCEZIONE DEL TEMPO DELL’UTENTE, LIMITANDO IN PARTE IL PROBLEMA DEI TTI ALTI.
  • 14. TIME IS MEASURED OBJECTIVELY BUT PERCEIVED SUBJECTIVELY, AND EXPERIENCES CAN BE ENGINEERED TO IMPROVE PERCEIVED PERFORMANCE. Ilya Grigorik - High Performance Browser Networking
  • 15. 0-100ms nessun delay percepito 100-300ms piccolo ma percettibile delay 300-1000ms delay percepito 1000ms+ fluidità di navigazione compromessa 10000ms+ perdita di attenzione, abbandono del task TEMPO EFFETTIVO VS TEMPO PERCEPITO
  • 17. POLAR
  • 18. CASE STUDY - POLAR Nel 2013 lo staff di Polar (un ‘app alla Quora) decide, per ridurre i tempi di caricamento, di introdurre all’interno della propria app un browser embed per la visualizzazione di alcuni contenuti. Per informare l’utente del download del contenuto viene visualizzato un loader al centro di uno spazio completamente vuoto.
  • 19. CASE STUDY - POLAR Al rilascio molti utenti si lamentano di quanto l’app sia diventata lenta
  • 20. CASE STUDY - POLAR Non avendo nulla su cui concentrarsi, l’utente percepisce maggiormente il passare del tempo. Il loader viene allora rimosso, e sostituito con skeleton della pagina.
  • 21. CASE STUDY - POLAR Il tempo effettivo del download è immutato ma gli utenti apprezzano la velocità raggiunta (che non è cambiata)
  • 23. CASE STUDY - FACEBOOK Eseguendo un A/B test sulla schermata di caricamento, in Facebook scoprono che l’utente attribuiva ‘la colpa’ dell’attesa all’app stessa, essendoci un loader custom (e quindi associato al brand). Semplicemente inserendo loader di sistema l’utente concentrava il suo ‘astio’ verso il telefono o la rete. loader custom loader sistema
  • 25. PER ASSICURARE L’UTENTE CHE L’APPLICAZIONE STA LAVORANDO, E CHE C’È DELL’ EFFETTIVO PROGRESSO NEL CARICAMENTO DELLA PAGINA, OCCORRE LAVORARE SUL (DESIGN DEL) FEEDBACK.
  • 26. IL FEEDBACK Un feedback deve rispondere a due domande: STATUS ATTUALE | cosa sta succedendo? STATUS FUTURO | cosa succederà?
  • 27. IL FEEDBACK Un feedback è utile quando: Riduce l’incertezza - rassicurando l’utente del funzionamento corretto dell’applicazione Offre un motivo di attesa – influenzando la percezione del tempo
  • 28. IL FEEDBACK I feedback devono esplicitare la maggior parte delle interazioni dell’utente con l’interfaccia. In termini di accessibilità vanno prese in considerazione anche le interazioni da tastiera (TAB navigation) e la lettura da screen reader.
  • 29. IL FEEDBACK L’interazione con un bottone ad esempio risulterà più “naturale” e chiara se ogni stato dell’azione è rappresentato: Hover / Focus da Tastiera Click / Touch Eventuale Caricamento / Termine Termine
  • 30. Indicatori di progresso Feedback testuale Animazioni composte DESIGN DEL FEEDBACK
  • 32. GLI INDICATORI DI PROGRESSO ANDREBBERO USATI PER TEMPI DI ATTESA SUPERIORE AL SECONDO. PER CARICAMENTI INFERIORI LE ANIMAZIONI POSSONO RISULTARE FASTIDIOSE, NON DANDO UN REALE VALORE ALL’UTENTE.
  • 33. INDICATORI DI PROGRESSO TIPOLOGIE Indeterminato (loader/animazioni) Determinato (loader/progress bar)
  • 34. INDICATORI DI PROGRESSO - INDETERMINATI Non forniscono all’utente informazioni sui tempi di caricamento. Hanno solitamente animazioni particolari per catturare l’attenzione dell’utente. https://dribbble.com/chrisgannon/tags/loader
  • 35. INDICATORI DI PROGRESSO - DETERMINATI Possono rappresentare lo svolgimento di una o più azioni. Non si devono mai fermare ne decrescere, altrimenti darebbero la percezione di malfunzionamento.
  • 36. INDICATORI DI PROGRESSO - DETERMINATI Integrate con l’indicazione della percentuale di caricamento o divise in step, possono aiutare l’utente a capire meglio quanto velocemente viene processata l’azione.
  • 38. FEEDBACK TESTUALE Per azioni che richiedo più di 10s è consigliabile l’uso di feedback testuali percentuale di caricamento stima del tempo restante quanti step mancano
  • 39. È IMPORTANTE DARE L’IDEA CHE L’OPERAZIONE SVOLTA SIA COMPLESSA E CHE VALGA LA PENA ATTENDERE
  • 40. 33 secondi Tempo di Caricamento
  • 43. SKELETON SCREEN Viene subito suggerita la futura struttura della pagina caricandone lo scheletro, dando l’illusione di immediatezza di risposta. Usato da siti come Facebook o Medium.
  • 44. TRANSIZIONI Attraverso una serie di transizioni si può mantenere lo schermo “attivo” durante il caricamento. Usato dall’app di Google Search
  • 46. CONCEPIRE COME PARTE INTEGRANTE DEL DESIGN UNA GERARCHIA DI CARICAMENTO DELLE VARIE COMPONENTI DELLA PAGINA PERMETTE DI GESTIRE IL TEMPO DI ATTESA PERCEPITO DALL’UTENTE IN MANIERA PIÙ MIRATA. USEFUL FIRST NON-ESSENTIALS LATER