user experience & user interface design trends
TRANSCRIPT
Immagine: Ultrabookitalia.net
Immagine: Gizmodo, Kelsey Campbell-Dollaghan
Immagine: Gizmodo, Kelsey Campbell-Dollaghan
Immagine: http://www.content-loop.com/history-flat-design-efficiency-minimalism-turned-digital-world-flat/
Immagine: http://www.content-loop.com/history-flat-design-efficiency-minimalism-turned-digital-world-flat/
Immagine: Riki Tanone, http://bashooka.com/inspiration/flat-web-ui-design/
Prima (rich) Dopo (flat)
Icone: Sensational Fix, http://designinstruct.com/roundups/free-flat-icons/Icone: it.freepik.com
Immagine: http://blogs.adobe.com/dreamweaver/2015/05/flat-design-vs-material-design-what-makes-them-different.html
Immagine: http://uxmag.com/articles/the-top-ux-predictions-for-2015
FLAT MATERIAL
http://blogs.adobe.com/dreamweaver/files/2015/02/figure2_material.png
Flat design❯ Focus sui colori❯ Esalta le scelte tipografiche❯ Tempi di realizzazione inferiori❯ Focus sui contenuti
❯ Multidimensionalità e fisicità
❯ Interazione
❯ Intuitività+ = MATERIAL
DESIGN
Immagine: Nick Meloy – Dribbble, https://dribbble.com/shots/852180-Hamburger-Buttons
Immagine: Alesha U, Dribbble https://dribbble.com/aleshalesha/buckets/222133-Hamburger-Menu
Immagine: http://ux.stackexchange.com http://i.stack.imgur.com/MXtXH.jpg
Norm Cox
Xerox Star (1981)
http://www.appuntidigitali.it/site/wp-content/uploads/xerox-star-3.jpghttp://coxhall.com/uploads/3/3/8/1/3381591/9513636.jpg?1386534324
https://upload.wikimedia.org/wikipedia/en/7/78/Rank_Xerox_8010%2B40_brochure_front.jpg
http://www.mac-history.de/wp-content/uploads/2008/09/apple_lisa_werbung.jpg
http://dreamandreach.bose.com/it_IT/home
http://dreamandreach.bose.com/it_IT/home
http://awesomeshop.target.com
http://awesomeshop.target.com
http://time.com
http://time.com
http://www.google.com/inbox/
http://www.google.com/inbox/
Hamburger button
http://exisweb.net/menu-eats-hamburger
http://www.newbalance.it
http://www.newbalance.it
http://chef-s.es
http://chef-s.es
http://www.theguardian.com/uk
http://www.theguardian.com/uk
http://mashable.com
http://thenextweb.com
http://www.usatoday.com
https://www.pinterest.com
http://dribbble.com
http://www.firebox.com
http://www.firebox.com
http://www.ahh.com
http://adparlor.com/blog/wp-content/uploads/2014/08/twitter-cards-cover2.png
Paul Adams - https://blog.intercom.io/why-cards-are-the-future-of-the-web/
https://www.google.com/landing/now/
http://webdesignledger.com/trends-2/cardbaseddesign
http://www.ghanalive.tv/wp-content/uploads/2015/01/Google-Now-Cards-Restaurant-Weather-Appointment-Traffic-Flight-Hotels.png
Glance-ability
Un’interfaccia che offre un servizio o risolve un problema rimanendo volontariamente in
secondo piano e con discrezione.
( Jake Zukowski – Frog)
http://i.ytimg.com/vi/1tIU3JqkIFY/maxresdefault.jpg
Jake Zukowski – Frog
http://s1.cdn.autoevolution.com/images/news/new-concept-interface-for-tesla-model-s-is-simply-amazing-video-photo-gallery-93452_1.jpg
http://telematicsnews.info/wp-content/uploads/general/pioneer%20hud.jpg
http://gaspix.net/wp-content/uploads/2015/04/Apple-Watch-GUI-Kit-for-Sketch.png
Attitude Key Contest Goal Success metrics
Sticky Desiderable Desktop,laptop, mobile
Building communitypromotecontent
Long sessions
Slippy Glanceability
Automotive smartwatch, wearable
Safety,multi tasking, customization
Short sessions
https://leantesting.com/resources/wp-content/uploads/2015/04/app-store-notification.jpg
http://microinteractions.com/wp-content/uploads/2012/08/structure_diagram_big.png
1. Less is more2. Impara subito dall’utente3. Porta dati e funzioni in evidenza solo quando
servono4. Usa gli elementi che ci sono già per veicolare le
informazioni5. Previeni l’errore umano6. Dai il tocco umano
Charles Eames
http://www.tedalegno.it/Public/Img/2236_eameschair3.jpg
http://themeforest.net
http://themeforest.net/item/saturn-responsive-admin-dashboard-template/6259902
https://themes.shopify.com
http://www.squarespace.com
http://com.teehanlax.assets.s3-website-us-east-1.amazonaws.com/resources/img/story/medium/responsiveness.jpg
https://www.instapage.com
http://vc.wpbakery.com
MILIONIUTENTI ATTIVI
MILIONICOMPRANO PUBBLICITA’
http://techcrunch.com/2015/04/29/facebook-40-million/
Webmaster + hosting
Fine anni 90
Worpress vs Blogger
Dal 2005
Pagina FB
Oggi
http://cdn8.openculture.com/wp-content/uploads/2013/09/wizard-of-oz-original1.jpg
Uh-oh. We’re all out of a job. The Wizard of Oz has arrived.
@matr77
thegrid.io
https://thegrid.io
https://thegrid.io
SkeumorphismFlat Design
MaterialDesign
2013 2014 2015
Responsive design
?Regole di usabilità per gli elementi core:
checkout form, registrazione e login
http://www.zerouno.org
Il cliente non ne sa più del designer
Capitalizzare l’esperienza collettiva pregressa e applicare le regole del web non è solo conveniente ma è anche moralmente
e professionalmente giusto.
Il committente non ne sa più del designer
Capitalizzare l’esperienza collettiva pregressa e applicare le regole del web non è solo conveniente ma è anche moralmente
e professionalmente giusto.
RESPONSABILITA’ DEL DESIGNER
http://blog.hubspot.com/blog/tabid/6307/bid/14953/What-Do-76-of-Consumers-Want-From-Your-Website-New-Data.aspx
Charles Darwin