Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016

Download Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016

Post on 19-Jan-2017

190 views

Category:

Design

2 download

TRANSCRIPT

Building device agnostic UX systemsby Anna Dahlstrm | @annadahlstrom GENERATE LONDON, 23 SEPTEMBER 2016 Image from Creative Bloqhttp://www.annadahlsrom.comWe always hoped for snow on the morning of Christmas Eve (Julaftons morgon in Swedish) ShutterstockShutterstockor Julafton moron as auto correct would have itShutterstockWe always hoped for snow on the morning of Christmas Eve (Julaftons morgon in Swedish) This is what Christmas in my hometown usually looks likehttps://www.flickr.com/photos/sigfridlundberg/6755434225/The snow didnt arrive but Santa didhttps://www.flickr.com/photos/38446022@N00/4866804674/Not the actual model I gotThere was a lot of Legohttps://www.flickr.com/photos/clement127/19093561751/in/album-72157640172443564/Mum DadMeDavidJohanSaraMartinhttps://www.flickr.com/photos/j_regan/6454379951/in/photostream/The people at Lego are very, very cleverSource: GoogleSource: GoogleSource: GoogleSource: http://gizmodo.com/303370/lego-iphone-already-pre-bricked-out-of-the-boxhttp://gizmodo.com/303370/lego-iphone-already-pre-bricked-out-of-the-boxhttps://www.flickr.com/photos/boltofblue/4418442567/in/photostream/Only when its needed do they create bespoke piecesWe tried to keep the Lego pieces organised but..https://www.flickr.com/photos/meddygarnet/3871865379/This is the most exciting timeNone of these existed when I moved to London 10 years agoJust a giant iPhoneSource: Screenshots apple.co.uk + oculus.comhttp://apple.co.ukhttp://oculus.comhttps://www.flickr.com/photos/125026780@N05/28847382404/https://www.flickr.com/photos/quattrovageena/2664049226/ Every once in a while, a revolutionary product comes along that changes everything. - Steve Jobs Smart homes are the new smartphonesScreenshot fromThe Next Web http://thenextweb.com/insider/2015/12/23/2016-predictions-for-iot-and-smart-homes/#grefhttp://thenextweb.com/insider/2015/12/23/2016-predictions-for-iot-and-smart-homes/#grefScreenshot: Minority ReportScreenshot: Minority Report Source: https://www.corning.com/cala/en/innovation/a-day-made-of-glass.htmlhttps://www.corning.com/cala/en/innovation/a-day-made-of-glass.htmlScreenshot: Herhttps://www.flickr.com/photos/seryo/3035815376/in/photostream/ Get your content to go anywhere, because its going to go everywhere. - Brad FrostScreenshot: Minority Report Source: https://medium.com/@maxbraun/my-bathroom-mirror-is-smarter-than-yours-94b21c6671ba#.ndwoxzamchttps://medium.com/@maxbraun/my-bathroom-mirror-is-smarter-than-yours-94b21c6671ba#.ndwoxzamchttps://www.flickr.com/photos/websummit/15089463204/A boundless future where content flows from one device to anotherSource: https://www.youtube.com/watch?v=9J7GpVQCfmshttps://www.youtube.com/watch?v=9J7GpVQCfmsSource: Duo SkinScreenshot: https://blog.intercom.com/the-end-of-apps-as-we-know-them/ The idea of an app as an independent destination is becoming less important, and the idea of an app as a publishing tool, with related notifications that contain content and actions, is becoming more important. - Source: The End of Apps As We Know ThemIts one of the ideas behind iOS 10Screenshot: Apple.co.ukhttp://Apple.co.ukeverywherehttps://www.flickr.com/photos/paradoxicallystrange/8077764591/in/photostream/There are around 7.8bn conncted devices on earth - GSMAs Real-time tracker Source: Open Signal http://opensignal.com/reports/2015/08/android-fragmentation/The big reveal of the page design is gonehttps://www.flickr.com/photos/s-e-f/6455978889/It dependshttps://www.flickr.com/photos/tunggul/9011104633/44% of the worlds population were connected to the internet at the end of 2015 - Source: Mobile Connectivity Indexhttp://www.mobileconnectivityindex.com/widgets/connectivityIndex/pdf/ConnectivityIndex_V01.pdf You get shit done while you get shit done. - Buzzfeedhttp://randytsang.com/blog/2010/04/ipad-review-revolutionising-the-way-we-consume-media-in-small-ways/https://www.buzzfeed.com/carolinekee/are-you-reading-this-in-the-bathroom-rndevice browser screen input method connection speedAny anytime anywhereUsed The site you build is not dependent on knowing what device it is being displayed on. - Sarita Harbour, WDD Image courtesy of ShutterstockHow can we not do a wireframe for every page?https://www.flickr.com/photos/avlxyz/15633960313/Little did I knowhttps://www.flickr.com/photos/44949218@N02/17941113065/http://www.bbc.co.uk/sport/olympics/19266882http://www.bbc.co.uk/sport/olympics/19266882In reality its not too different from building legohttps://www.flickr.com/photos/mwboeckmann/3275537425https://www.flickr.com/photos/mwboeckmann/3275537425www.flickr.com/photos/ulfk/7976687420Weve been doing modular design for a long timeThis is Lund Cathedral in my hometown. Its nearly 900 years old http://www.flickr.com/photos/ulfk/7976687420Theres been a need for modular design for a long timehttps://www.flickr.com/photos/kullez/5897887693/I grew up 15 mins, by foot, from hereMagic and stop all in onehttps://www.flickr.com/photos/wlodi/3085157011https://www.flickr.com/photos/wlodi/3085157011The majority will be sad, just like Wall-ehttps://www.flickr.com/photos/meddygarnet/3871865379/This guy hasnt realised it, yetIf were not careful well be swimming in pieceshttps://www.flickr.com/photos/wwworks/2472230611https://www.flickr.com/photos/wwworks/2472230611Sooner or later youve got to clearn up the messhttps://www.flickr.com/photos/clement127/28800579010/Its always been about building blocks and gridswww.flickr.com/photos/dahlstroms/4411448782/Fluid FixedFixed Fluidwww.flickr.com/photos/theaftershock/2811382400 Content needs to be choreographed to ensure the intended message is preserved on any device and at any width. - Trent Walton http://desktopwallpaper-s.com/19-Computers/-/Future/To really do that we need to know our building blocksxxxxwww.flickr.com/photos/ulfk/7976687420http://www.flickr.com/photos/dahlstroms/4411448782/We need to know what were buildinghttps://www.flickr.com/photos/fallentomato/24818009379/Define views & key templatesHeader& NavProductsFooterFilter & searchProduct listing Product pageCategoriesHomeHeader& NavFeaturesFooterFeatured productsFeatured categoriesHeader& NavFooterCategoriesHeader& NavGalleryDescrip-tionFooterAdditional infoRelated productsBreak down content further & explore layouts1 Header& Nav2 Filter & searchProduct listing1 Header& Nav2Gallery2Descrip-tion8 Footer3Additional infoProduct page1 Header& Nav2Category3Category4 Category9Categ7Categ10 FooterCategories7Prod6Categ5Categ1 Header& Nav2Features11 FooterHome3Category4 Category6 Categ6 Categ10Prod9 Prod8Prod7Prod8Categ6Prod5 Prod4Prod3Prod10Prod9 Prod8Prod7Prod14Prod13 Prod12Prod11Prod18Prod17 Prod16Prod15Prod19 Footer7Prod6 Prod5Prod4ProdHome - largeHeader& NavFeaturesFooterFeatured productsFeatured categories1 Header& Nav2Features11 Footer3Category4 Category6 Categ6 Categ10Prod9 Prod8Prod7Prod1 Header& Nav2Features10 Footer3 Category4 Categ5 Categ6 Product7 Product8 Product9 ProductHeader& NavFeaturesFooterHome - smallFeatured categoriesFeatured productsDo the same across screen sizesBreak down each module into elementsHome - largeHeader& NavFeaturesFooterFeatured productsFeatured categories1 Header& Nav2Features11 Footer3Category4 Category6 Categ6 Categ10Prod9 Prod8Prod7Prod1 Header& Nav2Features10 Footer3 Category4 Categ5 Categ6 Product7 Product8 Product9 ProductHeader& NavFeaturesFooterHome - smallFeatured categoriesFeatured productsViewsHome - large Home - smallStart identifying your building blocks & variationsViewsHome - large Home - smallStart identifying your building blocks & variationsFeature - large Feature - smallViews ModulesHome - large Home - smallStart identifying your building blocks & variationsFeature - large Feature - smallViews ModulesHome - large Home - smallStart identifying your building blocks & variationsFeature - large Feature - smallFeatured products - large Featured products - smallViews ModulesHome - large Home - smallStart identifying your building blocks & variationsFeature - large Feature - smallFeatured products - large Featured products - smallViews ModulesHome - large Home - smallStart identifying your building blocks & variationsFeature - large Feature - smallFeatured products - largeSingle product - largeFeatured products - smallSingle product- smallViews ModulesHome - large Home - smallStart identifying your building blocks & variationsIterate & refine across views & key templatesHeader& NavProductsFooterFilter & searchProduct listing Product pageCategoriesHomeHeader& NavFeaturesFooterFeatured productsFeatured categoriesHeader& NavFooterCategoriesHeader& NavGalleryDescrip-tionAdditional infoRelated productsFooterIterate & refine across views & key templatesHeader& NavProductsFooterFilter & searchProduct listing Product pageCategoriesHomeHeader& NavFeaturesFooterFeatured categoriesHeader& NavFooterCategoriesHeader& NavGalleryDescrip-tionAdditional infoRelated products10Prod9 Prod8Prod7ProdFooterIterate & refine across views & key templatesHeader& NavProductsFooterFilter & searchProduct listing Product pageCategoriesHomeHeader& NavFeaturesFooterFeatured categoriesHeader& NavFooterCategoriesHeader& NavGalleryDescrip-tionAdditional infoRelated productsFooterIterate & refine across views & key templatesHeader& NavProductsFooterFilter & searchProduct listing Product pageCategoriesHomeHeader& NavFeaturesFooterFeatured categoriesHeader& NavFooterCategoriesHeader& NavGalleryDescrip-tionAdditional info7Prod6 Prod5Prod4ProdFooterIterate & refine across views & key templatesHeader& NavProductsFooterFilter & searchProduct listing Product pageCategoriesHomeHeader& NavFeaturesFooterFeatured categoriesHeader& NavFooterCategoriesHeader& NavGalleryDescrip-tionAdditional infoFooterIterate & refine across views & key templatesHeader& NavFooterFilter & searchProduct listing Product pageCategoriesHomeHeader& NavFeaturesFooterFeatured categoriesHeader& NavFooterCategoriesHeader& NavGalleryDescrip-tionAdditional infoFooter6Prod5 Prod4Prod3Prod10Prod9 Prod8Prod7Prod14Prod13 Prod12Prod11Prod18Prod17 Prod16Prod15ProdIterate & refine across views & key templatesHeader& NavFooterFilter & searchProduct listing Product pageCategoriesHomeHeader& NavFeaturesFooterFeatured categoriesHeader& NavFooterCategoriesHeader& NavGalleryDescrip-tionAdditional infoFooter6Prod5 Prod4Prod10Prod9 Prod8Prod7Prod14Prod13 Prod12Prod11Prod18Prod17 Prod16Prod15ProdIterate & refine across views & key templatesHeader& NavFooterFilter & searchProduct listing Product pageCategoriesHomeHeader& NavFeaturesFooterFeatured categoriesHeader& NavFooterCategoriesHeader& NavGalleryDescrip-tionAdditional infoFooterGradually build your module libraryFeature - large Feature - smallFeatured products - large Featured products - smallSingle product - large Single product- smallAlso used for: Module REL01 - Related products134123121234231231211Pretty much the same as legowww.flickr.com/photos/toomuchdew/5243719740http://www.flickr.com/photos/toomuchdew/5243719740Re-use & sparingly do bespoke moduleswww.flickr.com/photos/toomuchdew/5243719740www.flickr.com/photos/toomuchdew/5914351500www.flickr.com/photos/toomuchdew/5148233898www.flickr.com/photos/toomuchdew/3792159077www.flickr.com/photos/toomuchdew/3792972952The key to making it happen is working together across disciplineshttps://www.flickr.com/photos/levork/3760382453/and with clientsPussle vs LegoIts really about going back to basicswww.flickr.com/photos/dahlstroms/4411448782/Responsive design has allowed us to adapt views & interactionsEach device is different. Make the most of itBrowse Research Buy & Pay Get notified1. Take 2 pieces of A4 paper 2. Fold one in half and rip it into two pieces 3. Continue until you have 5 uniquely sized pieces of paper, the intact A4 piece of paper included 4. Consider their physical size to be the size of the screen youre designing for 4. Sketch your main pages and views onto each onehttps://www.flickr.com/photos/skynoir/8825832242/1. Consider any device your starting point 2. Define key pages/ views and your (content) templates 3. Approach it like lego, not a puzzle 4. Sketch and rip up paper 5. Collaborate across disciplines In summaryhttps://www.flickr.com/photos/tunggul/9011104633/ http://randytsang.com/blog/2010/04/ipad-review-revolutionising-the-way-we-consume-media-in-small-ways/This is the futureIts a sweetspot somewhere in the middle between thishttps://www.flickr.com/photos/petaqui/8789580419https://www.flickr.com/photos/petaqui/8789580419and thishttps://www.flickr.com/photos/artisticrichmond/2716147621/We can all do our bithttps://www.flickr.com/photos/brickresort/6823916051/in/photostream/Thank youannadahlstrom.com| @annadahlstrom eepurl.com/bZxppz Image from Creative Bloqhttp://www.annadahlsrom.comhttp://eepurl.com/bZxppz