La nascita di un nuovo modello
di comunicazione per i
professionisti
Come sono cambiate le esigenze di investitori,
giorna...
2014-03-21 | 22014-03-21 | 2
2014-03-21 | 32014-03-21 | 3
1. Mobile first
Sempre più siti vengono progettati partendo dalla versione per smartphone e p...
2014-03-21 | 42014-03-21 | 4
1. Mobile first
OK KO
• Un solo sviluppo
• Esperienza full da smartphone
• Spesso trascurata ...
2014-03-21 | 52014-03-21 | 5
2. HTML 5, sempre più spinto
HTML 5 combinato con fogli di stile CSS 3 e librerie JS sempre p...
2014-03-21 | 62014-03-21 | 6
2. HTML 5, sempre più spinto
OK KO
• Possibilità inaspettate per lo
storytelling
• Compatibil...
2014-03-21 | 72014-03-21 | 7
3. Scroll, scroll e ancora scroll...
I designer progettano con in
mente la fruizione da
smart...
2014-03-21 | 82014-03-21 | 8
3. Scroll, scroll e ancora scroll...
OK KO
• Esperienza tutta su una pagina
• Caricamento pro...
2014-03-21 | 92014-03-21 | 9
4. Tipografia
Pagine con meno testo, più elementi grafici e una tipografia sempre più ragiona...
2014-03-21 | 102014-03-21 | 10
4. Tipografia
OK KO
• Ci siamo liberati di Verdana, Arial
e Comic Sans
• La forma è sostanz...
2014-03-21 | 112014-03-21 | 11
5. Elementi in posizione fixed
Parti dell’interfaccia, soprattutto elementi di navigazione,...
2014-03-21 | 122014-03-21 | 12
5. Elementi in posizione fixed
OK
• Usabilità: è semplice trovare il
comando o l’informazio...
2014-03-21 | 132014-03-21 | 13
6. La rivincita delle icone
La disciplina dell’usabilità vorrebbe etichette testuali chiare...
2014-03-21 | 142014-03-21 | 14
6. La rivincita delle icone
OK KO
• Semplificazione dello spazio in
ambienti mobile
• Adatt...
2014-03-21 | 152014-03-21 | 15
7. L’importanza del colore come
elemento chiave di «affordance»
La disciplina dell’usabilit...
2014-03-21 | 162014-03-21 | 16
7. L’importanza del colore come
elemento di «affordance»
OK KO
• Semplifica le azioni ricon...
2014-03-21 | 172014-03-21 | 17
8. L’importanza del dettaglio
Nell’epoca del design per il mobile, dove tutto è semplificat...
2014-03-21 | 182014-03-21 | 18
8. L’importanza del dettaglio
OK
• Sfida a trovare nuove idee per
migliorare l’esperienza d...
2014-03-21 | 192014-03-21 | 19
9. Flat design
Abbiamo dichiarato guerra a tutto ciò che è rappresentazione vivida e tridim...
2014-03-21 | 202014-03-21 | 20
9. Flat design
OK KO
• Il contenuto al centro
• Semplificazione e progettazione
per quello ...
2014-03-21 | 212014-03-21 | 21
10. So what...? Semplicemente, il
contenuto, al centro
Tutti i trend tendono a sottolineare...
2014-03-21 | 222014-03-21 | 22
LUNDQUIST SRL
Via San Maurilio, 23
Milan 20123
Italy
t. (+39) 02 – 3675 4126
f. (+39) 02 – ...
Upcoming SlideShare
Loading in …5
×

User Experience e Web Design Trends 2014 - Cristiano Poian

683 views
632 views

Published on

Published in: Marketing
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
683
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

User Experience e Web Design Trends 2014 - Cristiano Poian

  1. 1. 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
  2. 2. 2014-03-21 | 22014-03-21 | 2
  3. 3. 2014-03-21 | 32014-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
  4. 4. 2014-03-21 | 42014-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
  5. 5. 2014-03-21 | 52014-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
  6. 6. 2014-03-21 | 62014-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 EFFECTMERCEDES STORYTELLING, NUOVA GLA
  7. 7. 2014-03-21 | 72014-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
  8. 8. 2014-03-21 | 82014-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)
  9. 9. 2014-03-21 | 92014-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)
  10. 10. 2014-03-21 | 102014-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
  11. 11. 2014-03-21 | 112014-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
  12. 12. 2014-03-21 | 122014-03-21 | 12 5. Elementi in posizione fixed OK • Usabilità: è semplice trovare il comando o l’informazione cercata in ogni momento
  13. 13. 2014-03-21 | 132014-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
  14. 14. 2014-03-21 | 142014-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
  15. 15. 2014-03-21 | 152014-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
  16. 16. 2014-03-21 | 162014-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
  17. 17. 2014-03-21 | 172014-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
  18. 18. 2014-03-21 | 182014-03-21 | 18 8. L’importanza del dettaglio OK • Sfida a trovare nuove idee per migliorare l’esperienza d’uso
  19. 19. 2014-03-21 | 192014-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à
  20. 20. 2014-03-21 | 202014-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
  21. 21. 2014-03-21 | 212014-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%
  22. 22. 2014-03-21 | 222014-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

×