My name is John Ferrara, I’m an Information Architect with PDF
Preview My name is John Ferrara, I’m an Information Architect with
My name is John Ferrara, I’m an Information Architect with Vanguard in the Philadelphia region. Vanguard is one of the world’s largest investment management companies. We sell mutual funds, with domestic assets totaling about $1.3 trillion. On the Web team, we work on interfaces for general online account management, participants in defined benefit and defined contribution plans, institutional asset management, and financial advisor services, so today I’m going to be talking to you about 1 Extending the Gaming Experience to Conventional UI’s John Ferrara Information Architect, Vanguard IA Summit 2008 Paper Mario: The Thousand-Year Door, Nintendo Video games. This discussion was opened at the Summit two years ago by a colleague of mine, Andrew Hinton, and today I hope to be able to expand upon that strong foundation. But this opens the obvious question, 2 Why should we care? why should we care? Why should any of us care? I’ll quickly suggest three reasons. 3 3 Reasons 1. Innovation • Competition for market share • Interface design is a differentiator • We’re not exposed to their creative thinking First, innovation. Games are going through something of a golden age in interface design. The competition for market share is fierce, among both games and the systems on which they’re played. And one of the ways that game makers are trying to differentiate themselves is through interface design. Some of these innovations are good, others are bad, many are stunning, as I think you’ll see over the course of this presentation. Yet as a community, we’re not often exposed to the inventive work that’s happening in this field. I think that games should be an area of active inquiry for us. 4 3 Reasons 2. Similarity & Overlap • Both are HCI Second, there’s substantial overlap between these disciplines. Certainly both are human-computer interaction design. 5 Game Wireframe Putting Interface Detail from left: The Golf Ball Basic Properties Setting putt direction Anatomy States of the direction arrow Moving the direction arrow Drag Mouseup Slopes Ground state apCpurrosaocr h Maorursoewohveera don TheaTTTcd bclihhhirtaceeeeilkvl c ecaaetcrrdi ioroarr ncanoonlswwn deiods , hi fd tswed se tarht nhodaheoef genti sg petbc eushalodt irccddt etktyi.ieroev eo edpccf ,rha t iitniamnohndinaetg ric eoabyaf ta tnpe lht lasbh.er e aetI sppt uuittstt .. TheWbAdWt dhiasrihhel reltee ,ecc hnntctue htittr oiehhsmon oeendo ra iumpa rrcslreraoherocyua owtaesnwip ergoa p neoprcr cspouaoc elrtralussaorcro ro hosasrwev .ii "esnsdg r tort dhteahihsesbrt e"ebna easaon rytltslr m ,to ofatbcrwthcooeheumls.e r :a.tdh,e iTdTtTasorrhhh o areeesugee nlgdpatedilri nraatr gteyshohee cweterdth i d,cmoeg aitn ornahae lyf mercb r cabtedoiyla iwoic drlnb lekra. e aco gW& gtfari geoihdtnen-herd.s aeni esg 3ttp s6 thubeh0etytet m.d .c ae olrigucrrskoeeiwen hbgseu aatntddo n Putting Initiating a putt Executing a putt Mousover state Mousedown state Setting force Hitting the ball Mouseover Mousedown Mousedown Mouseup WpWtTtmhooha hheitxenee hi tpfnnmeeuo rttturg hhmtcoc eeeihl.sf apmm ibnlnoaegaiyuttelsleeis aerar tt n rbeaodoudp altps.l stet " oaaconrlrvi tsceiss kri n"t pt orsah eynbesm uasgibrelodeodlfl a t. d obpo arwlolnx, ,it mhael AtmWttfhhhosaheeer xcte iffbehnmooa.e turrl lhmccp ieeles a v mmyphaelileeautrtty eweehe.rroirt l cqhdroues tni lcehttkaheinlse ysue pemrsees otc tuthiuosfere i ebnm sdubo iutlaudtomst etzooo enub r niudtottso tao wonfnnd , , Force & Feedback States of the force meter Ground state Medium Force Maximum Force Super Force 1% 52% 100% 150% Pow!!! Build Release Build Release Build Release Build Release UtaafIrmbpheonpip nelrooet uli nihmasfet skiod ursitermel hcdlctl e eemoa fa s a omaastesshmr ee,qtc e otiueeo feiubr f cinrty ask tth.l pll hayeor,pe ofpamp v mrslfiooi doeoiuvterdusi cssd ieste ei fn o b pwebg utre uhthaedtitse cbtbos hoabnae n csawdi,kisl a,sl .s a AfIfoons rr tcctheehi esmis cm eaatopseueprs,l e ibae udb miu ltditdots ro.tanhn eigs eb h aaelmll.do udnotw onf, the IhIfofnig rtthchheeeis si ts mc laaeepstvtpee lrlti, e hiidste awtmloliaol ltxw hpiemiend u b amtato l la1.b m0u0oil%udn .itt so f rAaamTcfebnoohta narl xiae cstcm2 ie ihmtpn roeosuuut uestimeann ctiixgto.t ne m sn ottc adofmiuysm tafh eebaoxofs erliadtm c t ee peuhtxru mheb ette etcphv yumlaewaotl oyhunemuededicesr. thbet mhe yabrea pu ypnt oltbioeremns al At a previous employer I designed several games to be sent to clients as holiday greetings; this is a wireframe from a golf game. The methods and design considerations were entirely the same as they are for Web – visual affordances, Fitts’ law, learnability, information scent – the fundamentals don’t change. 6 Game Wireframe Putting Interface Detail from left: The Golf Ball Basic Properties Setting putt direction Anatomy States of the direction arrow Moving the direction arrow Drag Mouseup Ground state apCpurrosaocr h Maorursoewohveera don TheaTTTcd bclihhhirtaceeeeilkvl c ecaaetcrrdi ioroarr ncanoonlswwn deiods , hi fd tswed se tarht nhodaheoef genti sg petbc eushalodt irccddt etktyi.ieroev eo edpccf ,rha t iitniamnohndinaetg ric eoabyaf ta tnpe lht lasbh.er e aetI sppt uuittstt .. TheWbAdWt dhiasrihhel reltee ,ecc hnntctue htittr oiehhsmon oeendo ra iumpa rrcslreraoherocyua owtaesnwip ergoa p neoprcr cspouaoc elrtralussaorcro ro hosasrwev .ii "esnsdg r tort dhteahihsesbrt e"ebna easaon rytltslr m ,to ofatbcrwthcooeheumls.e r :a.tdh,e iTdTtTasorrhhh o areeesugee nlgdpatedilri nraatr gteyshohee cweterdth i d,cmoeg aitn ornahae lyf mercb r cabtedoiyla iwoic drlnb lekra. e aco gW& gtfari geoihdtnen-herd.s aeni esg 3ttp s6 thubeh0etytet m.d .c ae olrigucrrskoeeiwen hbgseu aatntddo n Putting Initiating a putt Executing a putt Mousover state Mousedown state Setting force Hitting the ball Mouseover Mousedown Mousedown Mouseup WpWtTtmhooha hheitxenee hi tpfnnmeeuo rttturg hhmtcoc eeeihl.sf apmm ibnlnoaegaiyuttelsleeis aerar tt n rbeaodoudp altps.l stet " oaaconrlrvi tsceiss kri n"t pt orsah eynbesm uasgibrelodeodlfl a t. d obpo arwlolnx, ,it mhael AtmWttfhhhosaheeer xcte iffbehnmooa.e turrl lhmccp ieeles a v mmyphaelileeautrtty eweehe.rroirt l cqhdroues tni lcehttkaheinlse ysue pemrsees otc tuthiuosfere i ebnm sdubo iutlaudtomst etzooo enub r niudtottso tao wonfnnd , , Force & Feedback States of the force meter Ground state Medium Force Maximum Force Super Force 1% 52% 100% 1P5o0w!!%! Mouseover on Build Release Build Release Build Release Build Release arrowhead UtaafIrmbpheonpip nelrooet uli nihmasfet skiod ursitermel hcdlctl e eemoa fa s a omaastesshmr ee,qtc e otiueeo feiubr f cinrty ask tth.l pll hayeor,pe ofpamp v mrslfiooi doeoiuvterdusi cssd ieste ei fn o b pwebg utre uhthaedtitse cbtbos hoabnae n csawdi,kisl a,sl .s a AfIfoons rr tcctheehi esmis cm eaatopseueprs,l e ibae udb miu ltditdots ro.tanhn eigs eb h aaelmll.do udnotw onf, the IhIfofnig rtthchheeeis si ts mc laaeepstvtpee lrlti, e hiidste awtmloliaol ltxw hpiemiend u b amtato l la1.b m0u0oil%udn .itt so f rAaamTcfebnoohta narl xiae cstcm2 ie ihmtpn roeosuuut uestimeann ctiixgto.t ne m sn ottc adofmiuysm tafh eebaoxofs erliadtm c t ee peuhtxru mheb ette etcphv yumlaewaotl oyhunemuededicesr. thbet mhe yabrea pu ypnt oltbioeremns al 7 Game Wireframe Putting Interface Detail from left: The Golf Ball Basic Properties Setting putt direction Anatomy States of the direction arrow Moving the direction arrow Drag Mouseup Ground state apCpurrosaocr h Maorursoewohveera don TheaTTTcd bclihhhirtaceeeeilkvl c ecaaetcrrdi ioroarr ncanoonlswwn deiods , hi fd tswed se tarht nhodaheoef genti sg petbc eushalodt irccddt etktyi.ieroev eo edpccf ,rha t iitniamnohndinaetg ric eoabyaf ta tnpe lht lasbh.er e aetI sppt uuittstt .. TheWbAdWt dhiasrihhel reltee ,ecc hnntctue htittr oiehhsmon oeendo ra iumpa rrcslreraoherocyua owtaesnwip ergoa p neoprcr cspouaoc elrtralussaorcro ro hosasrwev .ii "esnsdg r tort dhteahihsesbrt e"ebna easaon rytltslr m ,to ofatbcrwthcooeheumls.e r :a.tdh,e iTdTtTasorrhhh o areeesugee nlgdpatedilri nraatr gteyshohee cweterdth i d,cmoeg aitn ornahae lyf mercb r cabtedoiyla iwoic drlnb lekra. e aco gW& gtfari geoihdtnen-herd.s aeni esg 3ttp s6 thubeh0etytet m.d .c ae olrigucrrskoeeiwen hbgseu aatntddo n Putting Initiating a putt Executing a putt Mousover state Mousedown state Setting force Hitting the ball Mouseover Mousedown Mousedown Mouseup WpWtTtmhooha hheitxenee hi tpfnnmeeuo rttturg hhmtcoc eeeihl.sf apmm ibnlnoaegaiyuttelsleeis aerar tt n rbeaodoudp altps.l stet " oaaconrlrvi tsceiss kri n"t pt orsah eynbesm uasgibrelodeodlfl a t. d obpo arwlolnx, ,it mhael AtmWttfhhhosaheeer xcte iffbehnmooa.e turrl lhmccp ieeles a v mmyphaelileeautrtty eweehe.rroirt l cqhdroues tni lcehttkaheinlse ysue pemrsees otc tuthiuosfere i ebnm sdubo iutlaudtomst etzooo enub r niudtottso tao wonfnnd , , Force & Feedback States of the force meter Ground state Medium Force Maximum Force Super Force 1% 52% 100% 150% Pow!!! Build Release Build Release Build Release Build Release UtaafIrmbpheonpip nelrooet uli nihmasfet skiod ursitermel hcdlctl e eemoa fa s a omaastesshmr ee,qtc e otiueeo feiubr f cinrty ask tth.l pll hayeor,pe ofpamp v mrslfiooi doeoiuvterdusi cssd ieste ei fn o b pwebg utre uhthaedtitse cbtbos hoabnae n csawdi,kisl a,sl .s a AfIfoons rr tcctheehi esmis cm eaatopseueprs,l e ibae udb miu ltditdots ro.tanhn eigs eb h aaelmll.do udnotw onf, the IhIfofnig rtthchheeeis si ts mc laaeepstvtpee lrlti, e hiidste awtmloliaol ltxw hpiemiend u b amtato l la1.b m0u0oil%udn .itt so f rAaamTcfebnoohta narl xiae cstcm2 ie ihmtpn roeosuuut uestimeann ctiixgto.t ne m sn ottc adofmiuysm tafh eebaoxofs erliadtm c t ee peuhtxru mheb ette etcphv yumlaewaotl oyhunemuededicesr. thbet mhe yabrea pu ypnt oltbioeremns al 8 Game Wireframe Putting Interface Detail from left: The Golf Ball Basic Properties Setting putt direction Anatomy States of the direction arrow Moving the direction arrow Drag Mouseup Ground state apCpurrosaocr h Maorursoewohveera don Contextual help TheaTTTcd bclihhhirtaceeeeilkvl c ecaaetcrrdi ioroarr ncanoonlswwn deiods , hi fd tswed se tarht nhodaheoef genti sg petbc eushalodt irccddt etktyi.ieroev eo edpccf ,rha t iitniamnohndinaetg ric eoabyaf ta tnpe lht lasbh.er e aetI sppt uuittstt .. TheWbAdWt dhiasrihhel reltee ,ecc hnntctue htittr oiehhsmon oeendo ra iumpa rrcslreraoherocyua owtaesnwip ergoa p neoprcr cspouaoc elrtralussaorcro ro hosasrwev .ii "esnsdg r tort dhteahihsesbrt e"ebna easaon rytltslr m ,to ofatbcrwthcooeheumls.e r :a.tdh,e iTdTtTasorrhhh o areeesugee nlgdpatedilri nraatr gteyshohee cweterdth i d,cmoeg aitn ornahae lyf mercb r cabtedoiyla iwoic drlnb lekra. e aco gW& gtfari geoihdtnen-herd.s aeni esg 3ttp s6 thubeh0etytet m.d .c ae olrigucrrskoeeiwen hbgseu aatntddo n Release to putt Putting Initiating a putt Executing a putt Mousover state Mousedown state Setting force Hitting the ball Mouseover Mousedown Mousedown Mouseup WpWtTtmhooha hheitxenee hi tpfnnmeeuo rttturg hhmtcoc eeeihl.sf apmm ibnlnoaegaiyuttelsleeis aerar tt n rbeaodoudp altps.l stet " oaaconrlrvi tsceiss kri n"t pt orsah eynbesm uasgibrelodeodlfl a t. d obpo arwlolnx, ,it mhael AtmWttfhhhosaheeer xcte iffbehnmooa.e turrl lhmccp ieeles a v mmyphaelileeautrtty eweehe.rroirt l cqhdroues tni lcehttkaheinlse ysue pemrsees otc tuthiuosfere i ebnm sdubo iutlaudtomst etzooo enub r niudtottso tao wonfnnd , , Force & Feedback States of the force meter Ground state Medium Force Maximum Force Super Force 1% 52% 100% 150% Pow!!! Build Release Build Release Build Release Build Release UtaafIrmbpheonpip nelrooet uli nihmasfet skiod ursitermel hcdlctl e eemoa fa s a omaastesshmr ee,qtc e otiueeo feiubr f cinrty ask tth.l pll hayeor,pe ofpamp v mrslfiooi doeoiuvterdusi cssd ieste ei fn o b pwebg utre uhthaedtitse cbtbos hoabnae n csawdi,kisl a,sl .s a AfIfoons rr tcctheehi esmis cm eaatopseueprs,l e ibae udb miu ltditdots ro.tanhn eigs eb h aaelmll.do udnotw onf, the IhIfofnig rtthchheeeis si ts mc laaeepstvtpee lrlti, e hiidste awtmloliaol ltxw hpiemiend u b amtato l la1.b m0u0oil%udn .itt so f rAaamTcfebnoohta narl xiae cstcm2 ie ihmtpn roeosuuut uestimeann ctiixgto.t ne m sn ottc adofmiuysm tafh eebaoxofs erliadtm c t ee peuhtxru mheb ette etcphv yumlaewaotl oyhunemuededicesr. thbet mhe yabrea pu ypnt oltbioeremns al 9 3 Reasons 2. Similarity & Overlap • Both are HCI • Games are becoming more Web-like • The Web is becoming more game-like • Analogs to problems in application software But video games and conventional UI’s are also increasingly concerned with the same things. In many ways, games are becoming more web-like. They’ve been moving online since the late 1990s, and web browsing functions are starting to appear natively on console and handheld systems. At the same time the Web is becoming more game-like, with Rich Internet Applications, Flash, Flex and so on enabling forms of interactivity that are well outside the mold prescribed by static HTML. Furthermore, game interfaces explore support for operations that often have clear analogs to the problems addressed by application software. 10
Description:The list of books you might like
