My name is John Ferrara, I’m an Information Architect with

135 Pages·2008·6.03 MB·English

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