SlideShare a Scribd company logo

Le performance

Simone Viani
Simone Viani
Simone VianiHead of Interface Development at DigitasLBi Italy

Una breve analisi su come il design possa avere un impatto sulle performance di un sito web

Le performance

1 of 47
Download to read offline
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
Ad

Recommended

UI/UX l' approccio giusto ad un progetto.
UI/UX l' approccio giusto ad un progetto.UI/UX l' approccio giusto ad un progetto.
UI/UX l' approccio giusto ad un progetto.Michele Riccio
 
Hosting: Joomla e Drupal, confronto e setup - parte1 #TipOfTheDay
Hosting: Joomla e Drupal, confronto e setup - parte1 #TipOfTheDayHosting: Joomla e Drupal, confronto e setup - parte1 #TipOfTheDay
Hosting: Joomla e Drupal, confronto e setup - parte1 #TipOfTheDayAruba S.p.A.
 
Costruisci il tuo sito con WebSite: le risposte alle vostre domande
Costruisci il tuo sito con WebSite: le risposte alle vostre domande Costruisci il tuo sito con WebSite: le risposte alle vostre domande
Costruisci il tuo sito con WebSite: le risposte alle vostre domande Register.it
 
Lezione6 video e file m-confartigianato
Lezione6 video e file m-confartigianatoLezione6 video e file m-confartigianato
Lezione6 video e file m-confartigianatoAndrea Vaccarella
 

More Related Content

Viewers also liked

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
 

Viewers also liked (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 to 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
 
Mobile App o Mobile Web? Quale scelta per il mio business?
Mobile App o Mobile Web? Quale scelta per il mio business?Mobile App o Mobile Web? Quale scelta per il mio business?
Mobile App o Mobile Web? Quale scelta per il mio business?Francesco Ronchi
 

Similar to 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
 
Mobile App o Mobile Web? Quale scelta per il mio business?
Mobile App o Mobile Web? Quale scelta per il mio business?Mobile App o Mobile Web? Quale scelta per il mio business?
Mobile App o Mobile Web? Quale scelta per il mio business?
 

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