User Experience e Web Design Trends 2014 - Cristiano Poian

Download User Experience e Web Design Trends 2014 - Cristiano Poian

Post on 18-Nov-2014

580 views

Category:

Marketing

2 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

<ul><li> 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 </li> <li> 2. 2014-03-21 | 22014-03-21 | 2 </li> <li> 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 </li> <li> 4. 2014-03-21 | 42014-03-21 | 4 1. Mobile first OK KO Un solo sviluppo Esperienza full da smartphone Spesso trascurata lesperienza 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 </li> <li> 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 </li> <li> 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 </li> <li> 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 allinfinite scrolling. Pagine sempre pi lunghe. CORRIERE.IT REPUBBLICA.IT BG-GROUP.COM </li> <li> 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 Linfinite scroll fa scorrere via il contenuto senza poterlo ritrovare facilmente (per es. timeline di Facebook o Pinterest) </li> <li> 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) </li> <li> 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 </li> <li> 11. 2014-03-21 | 112014-03-21 | 11 5. Elementi in posizione fixed Parti dellinterfaccia, soprattutto elementi di navigazione, bloccati in determinate porzioni di schermo, che aiutano lutente ad avere sempre a portata di mano le principali funzionalit di riferimento, allinterno di ambienti in cui lo scroll diventato il paradigma principale di interazione </li> <li> 12. 2014-03-21 | 122014-03-21 | 12 5. Elementi in posizione fixed OK Usabilit: semplice trovare il comando o linformazione cercata in ogni momento </li> <li> 13. 2014-03-21 | 132014-03-21 | 13 6. La rivincita delle icone La disciplina dellusabilit vorrebbe etichette testuali chiare in abbinamento allutilizzo di pittogrammi da usare in contesti di navigazione. Eppure, la consuetudine e la progettazione orientata al mobile ha portato ad un ritorno alluso di icone come unica rappresentazione di comandi e funzionalit. Lutente sfidato a imparare e, soprattutto, ricordare per poter usare. HAMBURGER MENU DRAWER ICON </li> <li> 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 dellutente per apprenderne il significato e memorizzarlo </li> <li> 15. 2014-03-21 | 152014-03-21 | 15 7. Limportanza del colore come elemento chiave di affordance La disciplina dellusabilit tradizionale viene sfidata di nuovo. Il colore viene usato spesso come principale elemento di differenziazione per identificare un particolare comando o comportamento di uninterfaccia. Affordance: la qualit fisica di un oggetto che suggerisce a un essere umano le azioni appropriate per manipolarlo MAILBOX APP </li> <li> 16. 2014-03-21 | 162014-03-21 | 16 7. Limportanza 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 dellaccessibilit? USATODAY.COM </li> <li> 17. 2014-03-21 | 172014-03-21 | 17 8. Limportanza del dettaglio Nellepoca del design per il mobile, dove tutto semplificato, il pixel-design, lattenzione al dettaglio a fare la differenza </li> <li> 18. 2014-03-21 | 182014-03-21 | 18 8. Limportanza del dettaglio OK Sfida a trovare nuove idee per migliorare lesperienza duso </li> <li> 19. 2014-03-21 | 192014-03-21 | 19 9. Flat design Abbiamo dichiarato guerra a tutto ci che rappresentazione vivida e tridimensionale che riporta linterfaccia a concetti esterni dallesperienza digitale (realismo o skeumorfismo). Ci tocca legemonia del cosiddetto flat design e vedremo per quanto durer </li> <li> 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 </li> <li> 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 nellesperienza duso dellattuale 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 &amp; MESSAGES 50% TECHNOLOGY 35% DESIGN 15% </li> <li> 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 </li> </ul>

Recommended

View more >