2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

Download 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

Post on 12-Jun-2015

1.220 views

Category:

Design

4 download

DESCRIPTION

2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

TRANSCRIPT

  • 1. (*ZEC=Zero Effort & Connected(WoT/WoE)) 2014.6 InnoUX CEO InnoUX@InnoUX.com, @ILOVEHCI

2. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) Table of Contents Zero Effort UI/UX ZEC(Zero Effort & Connected) UI/UX 1 3. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) 1. 2014 Web UX ? 2. Zero Effort UI/UX , ? 3. WoT/WoE(Web of Things/Web of Everything) ZEC(Zero Effort & Connected) UI/UX , ? 4. ? 3 4. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) 2014 Web UX Trends 4 1. Flat UI will continue to grow 2. 'Mobile first 3. Yet more scrolling 4. More HTML5 goodness 5. More HTML5 badness 6. Micro UX 7. Less text 8. Minimalist navigation 9. CSS replaces images 10. Video / moving backgrounds 11. Richer content experiences 12. Making the most of one page 13. Varied typography 14. Monochromatic design 15. Hypercolour 16. Cards / tiles 17. Bigger, better imagery 18. Fixed position content / navigation 18 pivotal web design trends for 2014 https://econsultancy.com/blog/64096-18-pivotal-web-design-trends-for-2014#i.ro5yqlfkkcry10 http://www.thedailybeast.com/articles/2014/05/31/the-stacks-gordie-howe-hockey-s-greatest-war-horse.html 5. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) 2014 Web UX Trends(cont.) 5 1. Grid-Style Layouts 2. Crafty Image Captions 3. Extended Form Elements 4. Deeply-Focused Landing Pages 5. HTML5 Video Players 6. 3D Transition Effects 7. Flat Design Elements 8. Personal Portraits 9. SVG Images & Icons 10. Unique Web Copy 11. Lazy-Loading Animations 12. Customized Image Galleries 13. Mega-Navigation Menus 14. Expanding Search Bars 15. Featured Detail Lists 16. Mobile-First Design 17. HTML5 Canvas 18. Pixel Sprites & Browser Games 19. Quick User Registration 20. CSS3 Animated Keyframes Web Design: 20 Hottest Trends To Watch Out For In 2014 http://www.hongkiat.com/blog/web-design-trends-2014/ http://www.thepetedesign.com/demos/label_better_demo.html# http://www.unheap.com/section/inputs-forms/ 6. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) 2014 Web UX Trends(cont.) 6 1. Flat Design 2. Experimental typography 3. Slide Out Menus 4. Big Background Videos 5. Endless Scrolling 6. Simple Color Schemes 7. Focus on Mobile 8. Less Text, More Video 9. Scroll Activated Animations Web Design Trends for 2014 http://webdesignledger.com/trends-2/web-design-trends-for-2014 http://ihatetomatoes.net/merry-christmallax/ 7. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) Web UX & WoT/WoE UX 7 Extending the Open Web Platform as the basis for Open Markets of Services that combine the Web of Devices with the Web of Data to form the Web of Things. The Web of Things is expected to have broad and sweeping economic and societal impact. Open standards will be critical to enabling exponential growth of the kind we experienced with the early days of the Web, that saw it growing from a handful of enthusiasts in the early nineties to a global phenomenon in just a few years. http://www.w3.org/2014/02/wot/Overview.html 8. 8 http://www.slideshare.net/EVRYTHNG/android-the-web-of-things-bluetooth-low-energy-bluetooth-40-ibeacons-barcodes-qrs-nfc-arduino 9. 9 http://www.slideshare.net/EVRYTHNG/android-the-web-of-things-bluetooth-low-energy-bluetooth-40-ibeacons-barcodes-qrs-nfc-arduino 10. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI/UX Strategic Framework 1.0a by Billy Choi Zero Effort UI/UX Strategy ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) Load Law of conservation of complexity Quality in Use F-shaped pattern based Satisficing UI UX Zero Effort UI/UX Strategy Connected Shortcuts & Defaults Connected FFA** DAG*** ZEC UI Strategy Ferdinand de Saussures Syntagm & Paradigm Jean Baudrillards Simulation & Hyperreal Quantified Self & Change Life **FFA=Feedback, Feedforward and perceived Affordances ***DAG=The Dopamine seeking system, unconscious selective Attention, Goal-gradient effect 10 11. : (2011)11 12. : (2011)12 13. : (2011)13 14. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) Zero Effort UI/UX Strategic Framework by Billy Choi Zero Effort UI/UX Strategy Load Law of conservation of complexity Quality in Use F-shaped pattern based Satisficing // , F , by Billy Choi (@ILOVEHCI) C+V+M=0 (Cognitive), (Visual), (Motor) I.C=0%, S.C=100% (Interface Complexity), (System Complexity) I=100%, L=0%, Ef= M=0%, Er=0% S=100% Intuitive design, ease of Learning, Efficiency of use, Memorability, Error frequency and severity, subjective Satisfaction Interface=F F 15 15. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) Zero Effort UI/UX Strategic Framework(continue) Zero Effort UI/UX Strategy Load C+V+M=0 (Cognitive), (Visual), (Motor) 16 // , F , by Billy Choi (@ILOVEHCI) 16. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) Zero Effort UI/UX Strategic Framework(continue) Zero Effort UI/UX Strategy Law of conservation of complexity I.C=0%, S.C=100% (Interface Complexity), (System Complexity) CLI GUI NUI NEST-like UI Interface Complexity System Complexity 0% 0%100% http://youtu.be/L8TkhHgkBsg 17 // , F , by Billy Choi (@ILOVEHCI) 17. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) Zero Effort UI/UX Strategic Framework(continue) Zero Effort UI/UX Strategy Quality in Use I=100%, L=0%, Ef= M=0%, Er=0% S=100% Intuitive design, ease of Learning, Efficiency of use, Memorability, Error frequency and severity, subjective Satisfaction Intuitive design: a nearly effortless understanding of the architecture and navigation of the site Ease of learning: how fast a user who has never seen the user interface before can accomplish basic tasks Efficiency of use: How fast an experienced user can accomplish tasks Memorability: after visiting the site, if a user can remember enough to use it effectively in future visits Error frequency and severity: how often users make errors while using the system, how serious the errors are, and how users recover from the errors Subjective satisfaction: If the user likes using the system http://www.designresourcebox.com/why-usability-is-the-most-important-aspect-of-designing-a-site/ 18 // , F , by Billy Choi (@ILOVEHCI) 18. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) Zero Effort UI/UX Strategic Framework(continue) Zero Effort UI/UX Strategy F-shaped pattern based Satisficing Interface=F F HCI Quick Guide (Emanuel Fernandes, May 2010) 19 // , F , by Billy Choi (@ILOVEHCI) 19. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI/UX Strategic Framework 1.0a by Billy Choi ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) UI UX Zero Effort UI/UX Strategy Connected Shortcuts & Defaults Connected FFA** DAG*** ZEC UI Strategy Ferdinand de Saussures Syntagm & Paradigm Jean Baudrillards Simulation & Hyperreal Quantified Self & Change Life **FFA=Feedback, Feedforward and perceived Affordances ***DAG=The Dopamine seeking system, unconscious selective Attention, Goal-gradient effect 21 by Billy Choi (@ILOVEHCI) 20. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI Strategic Framework by Billy Choi ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) UI Zero Effort UI/UX Strategy Connected Shortcuts & Defaults Connected FFA DAG F Thing to Service Feedback Feedforward perceived Affordances the Dopamine seeking system unconscious selective Attention Goal-gradient effect 22 by Billy Choi (@ILOVEHCI) 21. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI Strategic Framework(continue) ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) UI Connected Shortcuts & Defaults Thing to Service Internet Internet Things Things Services Services Shortcuts Defaults Connecting Physical Shortcuts Invisible Shortcuts Amazon Dash iBeacon http://youtu.be/JLOzF0Y4Mqw Internet Things Services Logical Shortcuts Nymi Things http://youtu.be/c3h0eKGfUfI http://youtu.be/jUO7Qnmc8vE Smart Glasses , , , , 23 http://youtu.be/xnIoGzur0h4 by Billy Choi (@ILOVEHCI) 22. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI Strategic Framework(continue) ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) UI Connected FFA Feedback Feedforward perceived Affordances HCI Quick Guide (Emanuel Fernandes, May 2010) 24 by Billy Choi (@ILOVEHCI) 23. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI Strategic Framework(continue) ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) UI Connected FFA DAG Feedback Feedforward perceived Affordances (the Dopamine seeking system) (unconscious selective Attention) (Goal- gradient effect) , , , // , , 100 Things Every Designer Needs to Know About People, (Susan M. Weinschenk, 2011) 25 by Billy Choi (@ILOVEHCI) 24. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI/UX Strategic Framework by Billy Choi ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) UX ZEC UI Strategy Ferdinand de Saussures Syntagm & Paradigm Jean Baudrillards Simulation & Hyperreal Quantified Self & Change Life F Connected Shortcuts & Defaults Feedback Feedforward perceived Affordances the Dopamine seeking system unconscious selective Attention Goal-gradient effect S+P=CE 2 (Syntagm) (Paradigm) Culture Ecosystem Six phase MSSUBC Self C2S, S2C, C2C 26 by Billy Choi (@ILOVEHCI) 25. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI/UX Strategic Framework(continue) ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) UX Ferdinand de Saussures Syntagm & Paradigm S+P=CE 2 (Syntagm) (Paradigm) Culture Ecosystem 27 FualBand SE Mobile Web SNS Self-efficacy Nike+ Kinect Training Web App PC(iTunes) Sportwatch GPS Chip+Shoes Web Mobile App Open data Avatar Things Manage Services Change Syntagm/ Synchrony (/) Paradigm/ Diachrony() by Billy Choi (@ILOVEHCI) [Nike Culture Ecosystem ] . .(/,2012) (/ ) . . 26. (self-efficacy) 27. http://www.slideshare.net/misterdom/evrythng-web-of-things 29 28. http://www.slideshare.net/misterdom/evrythng-web-of-things 30 29. http://www.slideshare.net/misterdom/evrythng-web-of-things 31 30. http://www.slideshare.net/misterdom/evrythng-web-of-things 32 31. http://www.slideshare.net/misterdom/evrythng-web-of-things 33 32. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI/UX Strategic Framework(continue) ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) UX Jean Baudrillards Simulation & Hyperreal 34 RRADA http://youtu.be/3pXNYciHCLc MemoMi http://youtu.be/kvJbu1rvd_w UNIQLO http://youtu.be/oUD57MpHAE8 ALKE http://youtu.be/qqFcaewtBJA http://youtu.be/rhH1ZNmCEdghttp://youtu.be/1qkf3kjurZw Dunk Tank Play by Billy Choi (@ILOVEHCI) The postmodern media no longer provide secondary representations of reality; they affect and produce the reality that they mediate(John Fiske,1994), Smart Mirror Smart Bathroom Smart Signage Smart Shop 33. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) 35 REAL HYPERREAL*** O X X O O X O X O O O X * , ( ). . , . () , . (Cultural theory and popular culture/John Storey, 2009) ** Baudrillard argues that the very distinction between original and copy has itself now been destroyed. He calls this process simulation. Baudrillard (1983) calls simulation the generation by models of a real without origins or reality: a hyperreal. ( ) *** In the realm of the hyperreal, the distinction between simulation and the real implodes; the real and the imaginary continually collapse into each other. The result is that reality and simulation are experienced as without difference operating along a roller-coaster continuum. ( ) O X O O X O * ** 34. (James Law Cybertecture International) / http://youtu.be/h_Sj-brC3-w 37 35. Magic Mirror http://youtu.be/HlsSLRMq8X0 Mirrors installed in the Delano Hotel in Miami on every guest floor 38 36. http://youtu.be/x5Lr6yW9QbQ Magic Mirror 39 37. http://youtu.be/oLBPhh01yiY Future department stores (Digital Mirror) 40 38. RRADA retail experience http://youtu.be/3pXNYciHCLc 41 39. Magic Mirror brings magical shopping experience into your shop. http://www.slideshare.net/metatechnology/magic-mirror-bring-social-shopping-into-retail-store42 40. MemoMi unveils world's first ever body controlled smart mirror http://youtu.be/kvJbu1rvd_w 43 41. Sharp Electronics UNIQLO Magic Mirror Display Technology http://youtu.be/oUD57MpHAE8 44 42. ALKE - Smart Mirror - UK http://youtu.be/qqFcaewtBJA 45 43. L'Oreal Paris Magic Mirror http://youtu.be/t5HsHaieYOI 46 44. . , , , , , , . LCD . . . .(, 2012) http://youtu.be/z2patXVyKYA 47 45. http://youtu.be/dAI9mF_cBu0 Interactive Mirror 48 46. 49 47. 50 48. 51 49. 52 50. Smart Toothbrush & Smart Mirror System http://youtu.be/Cvoy4deM-VQ 53 51. Magic mirror functionalprototype http://www.slideshare.net/jjoannasee/magic-mirror-functionalprototype 54 52. Mirrors Dont Lie http://youtu.be/VwEAaINH9X0 55 53. UXD , . UXD , . UXD . UXD . UXD , . UXD . UXD , . UXD , . UXD . UXD . UXD , . UXD . 54. / http://www.slideshare.net/BillyChoi/smart-mirror-ux 55. () 56. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) 59 X O O X REAL HYPERREAL RRADA http://youtu.be/3pXNYciHCLc MemoMi http://youtu.be/kvJbu1rvd_w UNIQLO http://youtu.be/oUD57MpHAE8 O X X O 57. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI/UX Strategic Framework(continue) ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) UX Quantified Self & Change Life Six phase MSSUSC Self C2S, S2C, C2C 60 http://youtu.be/V5RVqgmSV28 Smart Mirror http://www.youtube.com/watch?v=GJKwHAvR4uI&feature=share&list =PL1D61EDA3FA74A9F2 Sight: Contact Lenses with AR http://youtu.be/j3Y7PGhHR20 Zeo Sleep Manager Pro by Billy Choi (@ILOVEHCI) 58. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) Six phase of Quantified self for ZEC* 1.0a by Billy Choi *ZEC=Zero Effort & Connected(IoT/WoT/IoE) 61 Quantified Self=MSSUBC Self Measure Self Sync Self Share Self Understand Self Be Self Change Self Customer to Service Service to Customer Customer to Customer The measurement of customer behaviors, leveraging the things ( ) Sync measured behavior data to the service system ( ) Make the open ecosystem, by sharing in the synchronized data to the service space ( ) Understanding with the information that is accumulated in an open ecosystem of customers ( ) To Ship Your Package Before You Buy It ( ) The restoration of geur naturel & Providing leverage to other people's changes ( ) 59. 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI) ZEC UI/UX Strategic Framework 1.0a by Billy Choi Zero Effort UI/UX Strategy ZEC* UI/UX Strategy (*ZEC=Zero Effort & Connected(WoT/WoE)) Load Law of conservation of complexity Quality in Use F-shaped pattern based Satisficing UI UX Zero Effort UI/UX Strategy Connected Shortcuts & Defaults Connected FFA** DAG*** ZEC UI Strategy Ferdinand de Saussures Syntagm & Paradigm Jean Baudrillards Simulation & Hyperreal Quantified Self & Change Life **FFA=Feedback, Feedforward and perceived Affordances ***DAG=The Dopamine seeking system, unconscious selective Attention, Goal-gradient effect 62 60. !