Le performance
-
Upload
simone-viani -
Category
Technology
-
view
371 -
download
0
Transcript of Le performance
LE PERFORMANCEIL 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 & DESIGNLE 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 compromessa10000ms+
perdita di attenzione,
abbandono del task
TEMPO EFFETTIVO VS TEMPO PERCEPITO
CASE STUDIESTEMPO 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)
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 FEEDBACKSOLUZIONI 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 PROGRESSODESIGN 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 TESTUALEDESIGN 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 COMPOSTEDESIGN 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