87

User Experience & User Interface Design Trends

Embed Size (px)

Citation preview

Page 1: User Experience & User Interface Design Trends
Page 2: User Experience & User Interface Design Trends

Immagine: Ultrabookitalia.net

Page 3: User Experience & User Interface Design Trends

Immagine: Gizmodo, Kelsey Campbell-Dollaghan

Page 4: User Experience & User Interface Design Trends

Immagine: Gizmodo, Kelsey Campbell-Dollaghan

Page 5: User Experience & User Interface Design Trends

Immagine: http://www.content-loop.com/history-flat-design-efficiency-minimalism-turned-digital-world-flat/

Page 6: User Experience & User Interface Design Trends

Immagine: http://www.content-loop.com/history-flat-design-efficiency-minimalism-turned-digital-world-flat/

Page 7: User Experience & User Interface Design Trends

Immagine: Riki Tanone, http://bashooka.com/inspiration/flat-web-ui-design/

Page 8: User Experience & User Interface Design Trends

Prima (rich) Dopo (flat)

Icone: Sensational Fix, http://designinstruct.com/roundups/free-flat-icons/Icone: it.freepik.com

Page 9: User Experience & User Interface Design Trends

Immagine: http://blogs.adobe.com/dreamweaver/2015/05/flat-design-vs-material-design-what-makes-them-different.html

Page 10: User Experience & User Interface Design Trends

Immagine: http://uxmag.com/articles/the-top-ux-predictions-for-2015

Page 11: User Experience & User Interface Design Trends

FLAT MATERIAL

http://blogs.adobe.com/dreamweaver/files/2015/02/figure2_material.png

Page 12: User Experience & User Interface Design Trends

Flat design❯ Focus sui colori❯ Esalta le scelte tipografiche❯ Tempi di realizzazione inferiori❯ Focus sui contenuti

❯ Multidimensionalità e fisicità

❯ Interazione

❯ Intuitività+ = MATERIAL

DESIGN

Page 13: User Experience & User Interface Design Trends
Page 14: User Experience & User Interface Design Trends

Immagine: Nick Meloy – Dribbble, https://dribbble.com/shots/852180-Hamburger-Buttons

Page 15: User Experience & User Interface Design Trends

Immagine: Alesha U, Dribbble https://dribbble.com/aleshalesha/buckets/222133-Hamburger-Menu

Page 16: User Experience & User Interface Design Trends

Immagine: http://ux.stackexchange.com http://i.stack.imgur.com/MXtXH.jpg

Page 17: User Experience & User Interface Design Trends

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

Page 18: User Experience & User Interface Design Trends

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

Page 19: User Experience & User Interface Design Trends

http://dreamandreach.bose.com/it_IT/home

Page 20: User Experience & User Interface Design Trends

http://dreamandreach.bose.com/it_IT/home

Page 21: User Experience & User Interface Design Trends

http://awesomeshop.target.com

Page 22: User Experience & User Interface Design Trends

http://awesomeshop.target.com

Page 23: User Experience & User Interface Design Trends

http://time.com

Page 24: User Experience & User Interface Design Trends

http://time.com

Page 25: User Experience & User Interface Design Trends

http://www.google.com/inbox/

Page 26: User Experience & User Interface Design Trends

http://www.google.com/inbox/

Page 27: User Experience & User Interface Design Trends

Hamburger button

http://exisweb.net/menu-eats-hamburger

Page 28: User Experience & User Interface Design Trends

http://www.newbalance.it

Page 29: User Experience & User Interface Design Trends

http://www.newbalance.it

Page 30: User Experience & User Interface Design Trends
Page 31: User Experience & User Interface Design Trends

http://chef-s.es

Page 32: User Experience & User Interface Design Trends

http://chef-s.es

Page 33: User Experience & User Interface Design Trends

http://www.theguardian.com/uk

Page 34: User Experience & User Interface Design Trends

http://www.theguardian.com/uk

Page 35: User Experience & User Interface Design Trends
Page 36: User Experience & User Interface Design Trends

http://mashable.com

Page 37: User Experience & User Interface Design Trends

http://thenextweb.com

Page 38: User Experience & User Interface Design Trends

http://www.usatoday.com

Page 39: User Experience & User Interface Design Trends
Page 40: User Experience & User Interface Design Trends

https://www.pinterest.com

Page 41: User Experience & User Interface Design Trends

http://dribbble.com

Page 42: User Experience & User Interface Design Trends

http://www.firebox.com

Page 43: User Experience & User Interface Design Trends

http://www.firebox.com

Page 44: User Experience & User Interface Design Trends

http://www.ahh.com

Page 45: User Experience & User Interface Design Trends

http://adparlor.com/blog/wp-content/uploads/2014/08/twitter-cards-cover2.png

Page 46: User Experience & User Interface Design Trends

Paul Adams - https://blog.intercom.io/why-cards-are-the-future-of-the-web/

Page 47: User Experience & User Interface Design Trends

https://www.google.com/landing/now/

Page 48: User Experience & User Interface Design Trends

http://webdesignledger.com/trends-2/cardbaseddesign

Page 49: User Experience & User Interface Design Trends

http://www.ghanalive.tv/wp-content/uploads/2015/01/Google-Now-Cards-Restaurant-Weather-Appointment-Traffic-Flight-Hotels.png

Page 50: User Experience & User Interface Design Trends
Page 51: User Experience & User Interface Design Trends

Glance-ability

Un’interfaccia che offre un servizio o risolve un problema rimanendo volontariamente in

secondo piano e con discrezione.

( Jake Zukowski – Frog)

Page 52: User Experience & User Interface Design Trends

http://i.ytimg.com/vi/1tIU3JqkIFY/maxresdefault.jpg

Page 53: User Experience & User Interface Design Trends

Jake Zukowski – Frog

Page 54: User Experience & User Interface Design Trends

http://s1.cdn.autoevolution.com/images/news/new-concept-interface-for-tesla-model-s-is-simply-amazing-video-photo-gallery-93452_1.jpg

Page 55: User Experience & User Interface Design Trends

http://telematicsnews.info/wp-content/uploads/general/pioneer%20hud.jpg

Page 56: User Experience & User Interface Design Trends

http://gaspix.net/wp-content/uploads/2015/04/Apple-Watch-GUI-Kit-for-Sketch.png

Page 57: User Experience & User Interface Design Trends

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

Page 58: User Experience & User Interface Design Trends
Page 59: User Experience & User Interface Design Trends

https://leantesting.com/resources/wp-content/uploads/2015/04/app-store-notification.jpg

Page 60: User Experience & User Interface Design Trends

http://microinteractions.com/wp-content/uploads/2012/08/structure_diagram_big.png

Page 61: User Experience & User Interface Design Trends

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

Page 62: User Experience & User Interface Design Trends

Charles Eames

http://www.tedalegno.it/Public/Img/2236_eameschair3.jpg

Page 63: User Experience & User Interface Design Trends
Page 64: User Experience & User Interface Design Trends
Page 65: User Experience & User Interface Design Trends

http://themeforest.net

Page 66: User Experience & User Interface Design Trends

http://themeforest.net/item/saturn-responsive-admin-dashboard-template/6259902

Page 67: User Experience & User Interface Design Trends

https://themes.shopify.com

Page 68: User Experience & User Interface Design Trends

http://www.squarespace.com

Page 69: User Experience & User Interface Design Trends

http://com.teehanlax.assets.s3-website-us-east-1.amazonaws.com/resources/img/story/medium/responsiveness.jpg

Page 70: User Experience & User Interface Design Trends

https://www.instapage.com

Page 71: User Experience & User Interface Design Trends

http://vc.wpbakery.com

Page 72: User Experience & User Interface Design Trends
Page 73: User Experience & User Interface Design Trends

MILIONIUTENTI ATTIVI

MILIONICOMPRANO PUBBLICITA’

http://techcrunch.com/2015/04/29/facebook-40-million/

Page 74: User Experience & User Interface Design Trends

Webmaster + hosting

Fine anni 90

Worpress vs Blogger

Dal 2005

Pagina FB

Oggi

Page 75: User Experience & User Interface Design Trends

http://cdn8.openculture.com/wp-content/uploads/2013/09/wizard-of-oz-original1.jpg

Page 76: User Experience & User Interface Design Trends

Uh-oh. We’re all out of a job. The Wizard of Oz has arrived.

@matr77

thegrid.io

Page 77: User Experience & User Interface Design Trends

https://thegrid.io

Page 78: User Experience & User Interface Design Trends

https://thegrid.io

Page 79: User Experience & User Interface Design Trends
Page 80: User Experience & User Interface Design Trends
Page 81: User Experience & User Interface Design Trends

SkeumorphismFlat Design

MaterialDesign

2013 2014 2015

Responsive design

?Regole di usabilità per gli elementi core:

checkout form, registrazione e login

Page 82: User Experience & User Interface Design Trends

http://www.zerouno.org

Page 83: User Experience & User Interface Design Trends

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.

Page 84: User Experience & User Interface Design Trends

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

Page 85: User Experience & User Interface Design Trends

http://blog.hubspot.com/blog/tabid/6307/bid/14953/What-Do-76-of-Consumers-Want-From-Your-Website-New-Data.aspx

Page 86: User Experience & User Interface Design Trends

Charles Darwin

Page 87: User Experience & User Interface Design Trends