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

16.
CASE STUDIES
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)

22.
FACEBOOK

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.
IL FEEDBACK
SOLUZIONI DI DESIGN

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

31.
INDICATORI DI PROGRESSO
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.

37.
FEEDBACK TESTUALE
DESIGN DEL FEEDBACK

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

41.
ANIMAZIONI COMPOSTE
DESIGN DEL FEEDBACK

42.
ANIMAZIONI COMPOSTE
TIPOLOGIE
Skeleton Screen
Transizioni

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

45.
LOADER VS. TRANSIZIONE

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.
Simone Viani @flik185