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)

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 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