User Experience & User Interface Design Trends

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