Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Le performance

600 views

Published on

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

Published in: Technology

Le performance

  1. 1. LE PERFORMANCE IL DESIGN NEL WEB Simone Viani @flik185
  2. 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. 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. 4. LE PERFORMANCE SONO LA USER EXPERIENCE
  5. 5. SIAMO ABITUATI AD OTTIMIZZARE PER LAYOUT (RESPONSIVE DESIGN), MA NON PER LE PERFORMANCE
  6. 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. 7. RADWARE - 2015 TTI SUPERIORI AI 3 SECONDI PORTANO IL 57% DEGLI UTENTI AD ABBANDONARE LA PAGINA.
  8. 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. 9. 3 SEC -22% TRAFFICO -22% CONVERSION +50% BOUNCE RATE 5 SEC+105% BOUNCE RATE -38% CONVERSION -35% TRAFFICO 1 SEC
  10. 10. TECNOLOGIA & DESIGN LE PERFORMANCE
  11. 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. 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. 13. INTERVENENDO SUL DESIGN, POSSIAMO LAVORARE SULLA PERCEZIONE DEL TEMPO DELL’UTENTE, LIMITANDO IN PARTE IL PROBLEMA DEI TTI ALTI.
  14. 14. TIME IS MEASURED OBJECTIVELY BUT PERCEIVED SUBJECTIVELY, AND EXPERIENCES CAN BE ENGINEERED TO IMPROVE PERCEIVED PERFORMANCE. Ilya Grigorik - High Performance Browser Networking
  15. 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
  16. 16. CASE STUDIES TEMPO PERCEPITO
  17. 17. POLAR
  18. 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. 19. CASE STUDY - POLAR Al rilascio molti utenti si lamentano di quanto l’app sia diventata lenta
  20. 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. 21. CASE STUDY - POLAR Il tempo effettivo del download è immutato ma gli utenti apprezzano la velocità raggiunta (che non è cambiata)
  22. 22. FACEBOOK
  23. 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
  24. 24. IL FEEDBACK SOLUZIONI DI DESIGN
  25. 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. 26. IL FEEDBACK Un feedback deve rispondere a due domande: STATUS ATTUALE | cosa sta succedendo? STATUS FUTURO | cosa succederà?
  27. 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. 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. 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. 30. Indicatori di progresso Feedback testuale Animazioni composte DESIGN DEL FEEDBACK
  31. 31. INDICATORI DI PROGRESSO DESIGN DEL FEEDBACK
  32. 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. 33. INDICATORI DI PROGRESSO TIPOLOGIE Indeterminato (loader/animazioni) Determinato (loader/progress bar)
  34. 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. 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. 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.
  37. 37. FEEDBACK TESTUALE DESIGN DEL FEEDBACK
  38. 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. 39. È IMPORTANTE DARE L’IDEA CHE L’OPERAZIONE SVOLTA SIA COMPLESSA E CHE VALGA LA PENA ATTENDERE
  40. 40. 33 secondi Tempo di Caricamento
  41. 41. ANIMAZIONI COMPOSTE DESIGN DEL FEEDBACK
  42. 42. ANIMAZIONI COMPOSTE TIPOLOGIE Skeleton Screen Transizioni
  43. 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. 44. TRANSIZIONI Attraverso una serie di transizioni si può mantenere lo schermo “attivo” durante il caricamento. Usato dall’app di Google Search
  45. 45. LOADER VS. TRANSIZIONE
  46. 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
  47. 47. Simone Viani @flik185

×