La nascita di un nuovo modello di comunicazione per i professionisti Come sono cambiate le esigenze di investitori, giornalisti e esperti SRI
Milano, aprile 2013
24° BREAKFAST MEETING
SIX DIGITAL BITES
TO KEEP UP WITH THE ONLINE
CORPORATE AGENDA
#DIGITALBITES
@LIGHTMAN
USER EXPERIENCE E WEB DESIGN
TRENDS 2014
CRISTIANO POIAN
2014-03-21 | 2 2014-03-21 | 2
2014-03-21 | 3 2014-03-21 | 3
1. Mobile first Sempre più siti vengono progettati partendo dalla versione per smartphone e poi adattati alle
risoluzioni per grande schermo. Grazie al responsive design il processo di progettazione e gestione
del sito viene ottimizzato, con una sola versione per tutti i device
2014-03-21 | 4 2014-03-21 | 4
1. Mobile first
OK KO
• Un solo sviluppo
• Esperienza full da smartphone
• Spesso trascurata l’esperienza
sugli schermi più grandi
• Approccio che non si può
applicare a tutti i tipi di azienda
• Il responsive design non è sempre
la risposta più efficace
2014-03-21 | 5 2014-03-21 | 5
2. HTML 5, sempre più spinto HTML 5 combinato con fogli di stile CSS 3 e librerie JS sempre più evolute permettono
comportamenti e dinamismo prima abilitati solo da tecnologie come Flash. La pagina passa dalla
forma testuale a quella di un «filmato» interattivo con numerosi elementi di storytelling
multimediale
GRAFICI ANIMATI
IMMAGINI VETTORIALI HTML5 VIDEO PLAYER
ELEMENTI DINAMICI
BROWSER GAMES
2014-03-21 | 6 2014-03-21 | 6
2. HTML 5, sempre più spinto
OK KO
• Possibilità inaspettate per lo
storytelling
• Compatibilità con tutti i browser
di nuova generazione, senza più
plugin
• Riemergono cattive abitudini che
pensavamo superate: pagine
pesanti e lunghe da caricare,
scarsa attenzione alla
performance
LOADING SCREEN
PARALLAX EFFECT MERCEDES STORYTELLING, NUOVA GLA
2014-03-21 | 7 2014-03-21 | 7
3. Scroll, scroll e ancora scroll...
I designer progettano con in
mente la fruizione da
smartphone e tablet, e
dunque lo scroll è la
modalità principale per
scorrere il contenuto (più
della tradizionale
navigazione «punta e
clicca»). Trend in costante
espansione, combinato con
la logica del «caricamento
progressivo» dei contenuti
in pagina, che porta
all’infinite scrolling. Pagine
sempre più lunghe.
CORRIERE.IT
REPUBBLICA.IT
BG-GROUP.COM
2014-03-21 | 8 2014-03-21 | 8
3. Scroll, scroll e ancora scroll...
OK KO
• Esperienza tutta su una pagina
• Caricamento progressivo per
ottimizzare il peso del contenuto
• Alcune cattive abitudini di
design: il contenuto pertinente
(call to action, messaggio chiave,
elemento riconoscibile) non
sempre viene evidenziato sopra
«la piega» del browser
• L’infinite scroll fa scorrere via il
contenuto senza poterlo ritrovare
facilmente (per es. timeline di
Facebook o Pinterest)
2014-03-21 | 9 2014-03-21 | 9
4. Tipografia Pagine con meno testo, più elementi grafici e una tipografia sempre più ragionata e legata alla
«brand experience» di un marchio. Possibilità di usare qualsiasi font online, più leggibilità.
FONTE: SMASHINGMAGAZINE.COM (50 popular blogs and websites)
2014-03-21 | 10 2014-03-21 | 10
4. Tipografia
OK KO
• Ci siamo liberati di Verdana, Arial
e Comic Sans
• La forma è sostanza
• A volte la tipografia non segue il
messaggio ma lo precede e
diventa puro orpello grafico
2014-03-21 | 11 2014-03-21 | 11
5. Elementi in posizione fixed Parti dell’interfaccia, soprattutto elementi di navigazione, bloccati in determinate porzioni di
schermo, che aiutano l’utente ad avere sempre a portata di mano le principali funzionalità di
riferimento, all’interno di ambienti in cui lo scroll è diventato il paradigma principale di
interazione
2014-03-21 | 12 2014-03-21 | 12
5. Elementi in posizione fixed
OK
• Usabilità: è semplice trovare il
comando o l’informazione
cercata in ogni momento
2014-03-21 | 13 2014-03-21 | 13
6. La rivincita delle icone La disciplina dell’usabilità vorrebbe etichette testuali chiare in abbinamento all’utilizzo di
pittogrammi da usare in contesti di navigazione. Eppure, la consuetudine e la progettazione
orientata al mobile ha portato ad un ritorno all’uso di icone come unica rappresentazione di
comandi e funzionalità.
L’utente è sfidato a imparare e, soprattutto, ricordare per poter usare.
HAMBURGER MENU DRAWER ICON
2014-03-21 | 14 2014-03-21 | 14
6. La rivincita delle icone
OK KO
• Semplificazione dello spazio in
ambienti mobile
• Adatte ad app o siti usati di
frequente da parte di utenti
fidelizzati
• Richiedono un effort importante
da parte dell’utente per
apprenderne il significato e
memorizzarlo
2014-03-21 | 15 2014-03-21 | 15
7. L’importanza del colore come
elemento chiave di «affordance» La disciplina dell’usabilità «tradizionale» viene sfidata di nuovo. Il colore viene usato spesso come
principale elemento di differenziazione per identificare un particolare comando o
comportamento di un’interfaccia.
Affordance: la qualità fisica di
un oggetto che suggerisce a un
essere umano le azioni
appropriate per manipolarlo
MAILBOX APP
2014-03-21 | 16 2014-03-21 | 16
7. L’importanza del colore come
elemento di «affordance» OK KO
• Semplifica le azioni riconducendo
a contesti conosciuti
• Aumenta la riconoscibilità
quando combinata ad altro
elemento di distintività
• Ci siamo scordati le norme di
base dell’accessibilità?
USATODAY.COM
2014-03-21 | 17 2014-03-21 | 17
8. L’importanza del dettaglio Nell’epoca del design per il mobile, dove tutto è semplificato, è il pixel-design, l’attenzione al
dettaglio a fare la differenza
2014-03-21 | 18 2014-03-21 | 18
8. L’importanza del dettaglio
OK
• Sfida a trovare nuove idee per
migliorare l’esperienza d’uso
2014-03-21 | 19 2014-03-21 | 19
9. Flat design Abbiamo dichiarato guerra a tutto ciò che è rappresentazione vivida e tridimensionale che riporta
l’interfaccia a concetti esterni dall’esperienza digitale (realismo o skeumorfismo). Ci tocca
l’egemonia del cosiddetto flat design e vedremo per quanto durerà
2014-03-21 | 20 2014-03-21 | 20
9. Flat design
OK KO
• Il contenuto al centro
• Semplificazione e progettazione
per quello che conta davvero
• Appiattimento del gusto e
uniformazione dello stile
• IOs 7 everywhere
2014-03-21 | 21 2014-03-21 | 21
10. So what...? Semplicemente, il
contenuto, al centro Tutti i trend tendono a sottolineare ancora, se ce ne fosse bisogno, che è il contenuto a fare la
differenza nell’esperienza d’uso dell’attuale e futura generazione di siti web/app/mobile
experience.
LA NOTIZIA PREVALE RISPETTO AL
CONTESTO (MENU, HEADER,
ELEMENTI DI SERVIZIO)
IL PRODOTTO, E SOLO IL PRODOTTO,
NELLA «HERO AREA»
CONTENT &
MESSAGES
50%
TECHNOLOGY
35%
DESIGN
15%
2014-03-21 | 22 2014-03-21 | 22
LUNDQUIST SRL
Via San Maurilio, 23
Milan 20123
Italy
t. (+39) 02 – 3675 4126
f. (+39) 02 – 9287 8792 www.lundquist.it
Lundquist company page
@Lundquist
Lundquist page
Lundquist channel
Slideshare account
Lundquist page
