IT 14 020 Examensarbete 15 hp Mars 2014 Mobile audience response system Jonatan Moritz Institutionen för informationsteknologi Department of Information Technology
Abstract Mobile audience response system Jonatan Moritz Teknisk- naturvetenskaplig fakultet UTH-enheten Besöksadress: Ångströmlaboratoriet Lägerhyddsvägen 1 Hus 4, Plan 0 Postadress: Box 536 751 21 Uppsala Telefon: 018 471 30 03 Telefax: 018 471 30 00 Hemsida: http://www.teknat.uu.se/student Utnarm is an employment fair and is held once every year in November and is always striving towards a better and meaningful fair. Last year they took a step towards that goal. An application for Android and IPhone were developed and released. It had the basic functions that could be used that year. This year Utnarm wants to improve the applications and fulfill the students experience. An audience response system could result in companies getting a closer connection to the students during lectures. The apps are easy accessible for students. This thesis describes the implementation of a system on two different platforms and the similarities and differences between them. This is accomplished by, using the model-view-controller design pattern in object-oriented programming, the help of the human interface guidelines and with a focus on usability and user experience. The result showed that there are differences and similarities and that it is easy to forget about them when focusing on an application. The functionality should be the same but the user interface should be different to make the user feel at home. Handledare: Stefan Carlsson Ämnesgranskare: Lars Oestreicher Examinator: Olle Gällmo IT 14 020 Tryckt av: Reprocentralen ITC
Sammanfattning Utnarmärenkarriärmässasomanordnasengångperårinovember.Deharsom målattgöradenbättreochmeningsfullarevarjeår.förraårettogdeettsteg närmaregenomattskapaapplikationertillandroidochiphone.denfylldesmed degrundläggandefunktionernasomdetänktebehövdesunderdetåret.iårhar manchansattutökadessaapplikationerförattförbättrastudenternas upplevelse. Enmentometerfunktionskullekunnaresulteraiattstudenternafårennärmare kontaktmedföretagenunderföreläsningar.apparnaärlättaatttahemomman ägerensmartphone. Dennauppsatsbeskriverimplementationenavmentometersystemetpåtvåolika plattformarochlikheterochskillnadermellandetvå.dettaärutförtgenomatt användasigavmodeldviewdcontrollerdesignmönstretiobjectdorienterad programmering.medhjälpavmänniskansinteraktionsriktlinjer,sombåde GoogleochApplehartagitframförattökaanvändarupplevelsen,haren jämförelsegjortsmellanandroidochiphoneurett användargränssnittsperspektiv. Resultatetblevattdetfinnsskillnaderochlikhetersomärlättaattglömmabort närmanfokuserarpåenapplikation.funktionalitetenskavaradensammapå bådaplattformarmenanvändargränssnittetmåsteändrasförattanvändarenska kännasighemma. 2
3
Content 1. BACKGROUND-...-6 1.1 ABOUTUTNARM...6 1.2 SMARTPHONES...6 1.3 SMARTPHONEAPPLICATION...6 1.4 AUDIENCERESPONSESYSTEM...7 1.5 PURPOSE...7 1.6 RESEARCHQUESTION...7 2. THEORY-...-8 2.1 INTERACTIONDESIGN...8 2.2 USEREXPERIENCE...8 2.3 USABILITY...8 2.4 MODELVIEWCONTROLLER(MVC)...9 2.5 DESIGNPRINCIPLES...9 2.5.1 Visibility,...,9 2.5.2 Feedback,...,10 2.5.3 Constraints,...,10 2.5.4 Mapping,...,10 2.5.5 Consistency,...,10 2.5.6 Affordance,...,11 2.6 HUMANINTERFACEGUIDELINES...11 3. METHOD-...-12 3.1 NATIVEORCROSSDPLATFORM...12 3.2 NATIVEDEVELOPMENT...12 4. IMPLEMENTATION-...-14 4.1 DESIGNPRINCIPLES IOS...14 4.1.1 Visibility,...,14 4.1.2 Feedback,...,14 4.1.3 Constraints,...,14 4.1.4 Mapping,...,15 4.1.5 Consistency,...,15 4.1.6 Affordance,...,15 4.2 DESIGNPRINCIPLES ANDROID...15 4.2.1 Visibility,...,15 4.2.2 Feedback,...,16 4.2.3 Constraints,...,16 4.2.4 Mapping,...,16 4.2.5 Consistency,...,16 4.2.6 Affordance,...,16 4.3 MODEL...17 4.4 VIEW...18 4.4.1 Alternatives,...,18 4.4.2 Solution,...,20 4.5 CONTROLLER...22 6. CONCLUSION-...-25 REFERENCES-...-26 4
1. Background 1.1 AboutUtnarm UtnarmisUppsalaUnionofEngineeringandScienceStudentsEmploymentFair 1 andisheldonceeveryyearwerethousandsofstudentsgettomeetaround hundredcompaniesduringonedayinthebeginningofnovember.utnarmis morethanafair,beforethemaineventthereisamonthfilledwithinteresting eventsandlectures.studentscangoandlistentointerestingtalksandeducate themselvesbeforegoingtothefair. 1.2 Smartphones AsmartphoneisamobilephonewithhighDresolutiontouchscreensandthe capabilityofshowingvideos,picturesandbrowsingtheinternet[1]. Smartphoneshavegottenmoreandmorepopular,2013therewereoverone billionsmartphonedevicessoldworldwide[2].themostpopularoperating systemstodayareandroidandios[1]. 1.3 Smartphoneapplication Anapplicationissomethingthatcanbeinstalledonasmartphone.BothAndroid andioshadinlate2012over700000appseachavailableonappstoreand Googleplay.About50billionappseachhasbeendownloadedandinstalledon thesesystems[3][4]. Utnarmreleasedtwoapplicationslastyear,oneapplicationforAndroidand anotheroneforios.themainpurposeofdevelopingtheseappswastomake studentsmoreinterestedinutnarmandtobeavailableformostofthem.some ofthefunctionsareanewspage,blogandacatalogue. 1 http://utnarm.utn.se 6
1.4 Audienceresponsesystem Audienceresponseisawayofinteractionbetweenthelecturerandtheaudience. Audienceresponsesystems(ARS)permitstudentstoanswerelectronically displayedmultiplechoicequestionsusingaremotecontroldevice.allresponses areinstantlypresented,inchartform,thenreviewedanddiscussedbythe instructorandtheclass. [5].StudieshaveshownthatARSimprovestheaudience interaction,engagementandattention. 1.5 Purpose Thisthesisworkwillinvestigatewhatfunctionsanaudienceresponsesystem needtobeimplementedintoanandroidandiosapplication.theandroidand iosdonotonlyusedifferentlanguagesandides,butalsohavedifferentuser interfaceguidelines.theapplicationshouldbedesignedinawaysothattheuser doesnothaveanyproblemsunderstandingitspurpose.iosandandroidusers havedifferentexpectationswhenusingtheirdevices,forexampleandroidusers useabackbuttonasanavigationtool,iosusersdonot.thismeansthatapps havetolookdifferentandhastobeprogrammeddifferentlytomeetthese expectations. 1.6 Researchquestion WhatarethedifferencesandsimilaritiesbetweeniOSandAndroid,accordingto thehumaninterfaceguidelines,whendevelopinganappfromauserinterface perspective? 7
2. Theory 2.1 InteractionDesign Interactiondesignistheartofdesigninginteractivesystemsthatmakeiteasy fortheusertocommunicateandinteract.[10]asystemcouldbethemost groundbreakingandadvancedsystemouttherebutitisuselessifitisbad interactiondesign.itisimportanttounderstandhowusersperceivethingsand toknowwhichusersaregoingtousethesystemandtheirknowledge.fora systemtohaveawellddevelopeddesignthedeveloperneedstothinkaboutthe contextofuse,typeoftaskandwhatkindofuseritis.[10] 2.2 Userexperience Userexperienceisabout Whattheinteractionwiththesystemfeels,liketothe users.accordingtorogers,sharpandpreece[10]itisaboutemotion,howthe userexperiencesaninteractionratherthanhowusefulitis.forlizzi&ford[12] say Experiencesthatwerepeatagainandagain,suchasreading,tyingour shoes,ormakingthebedinthemorning,generallybecomemoreautomaticas wepracticethem.theseexperiencesmigratefromcognitiveonestosubd consciousones. Soifinterfaceisbasedonsomethingthattheuserhasseen before,itprobablywillfeellikethesystemismadefortheuserandthe experienceincreases. 2.3 Usability AccordingtoISO9241D11[16] Usability:theextenttowhichaproductcanbe usedbyspecifieduserstoachievespecifiedgoalswitheffectiveness,efficiency andsatisfactioninaspecifiedcontextofuse. Whatthismeansisthatusabilityis goodformakingsureinteractiveproductsareefficient,effectiveandenjoyable accordingtotheuser.usabilityisalsoaboutthetimetolearn,rememberhowto useandifitisasafesystem[10]. Itdoesn tmatterhowgoodafeatureisifthe usersdon tknowhowtogettoitorcan tfigureouthowtouseit. [11] 8
2.4 ModelViewController(MVC) Thisthesisworkisaboutworkingwithgraphicaluserinterfaces(GUI).Witha GUItheusercaninteractwiththesoftware,suchaspushingabuttonortouching ascreen.whendevelopingsoftwarethatusessomesortofinteractionithasits benefitstotakeapartthefunctionalunitsasmuchaspossible[13].thosewho developedsmalltalkd76[13]discoveredthatseparatingthecomponentsthree waysturnedouttohaveitspayoffs.thethreewayswere:thestructureddata (model),thedisplayoftheinteractionsstate(view)andtheobjectsthatcontrol theviewandthemodel(controller). Themodelcontainsobjectswithpropertiesandwaystoaccessandmodifythese. Theviewdisplaysthemodeldata;ithastodowithgraphicaldisplay.Whenthe modelchangesitsstatetheviewshouldchangeaswell.thecontrollerhandles theinteractionwiththeuser.whentheuserinteractswiththesoftwarethe controllerhandlesalltheevents.krasnerandpopesaythatdesigningmvcin interactiveapplicationshelpsoutwiththeconceptualdevelopmentand reusabilityisaloteasier. 2.5 Designprinciples Designprinciplesareamixoftheorybasedknowledge,experienceandcommon sensetosuggestthedesignerhowtoconceptualizeusability[10].butthedesign principlesarenotmadetotellhowspecificallydesigntheinterface.itisaway foradeveloperoradesignertoberemindedofcertainthingsthatisgoodto thinkofinaninterface.rogers,sharpandpreece[10]havelistedthemost commononesthatcoverwhattheusershouldseeandwhatshouldhappen wheninteractingwithaninterface. 2.5.1 Visibility Ifproductsfunctionsaredistinctandvisible,itismorelikelythattheuserknows whattodonext. 9
2.5.2 Feedback Feedbackisaboutgivingtheuserinformationaboutwhatisoccurring.Ifa buttonispushedsomethingisexpectedtohappeninordertocontinuewiththe task.thereareseveralkindsoffeedbacksthatareusable:audio,tactile,visualor verbal.thedeveloperneedstothinkaboutwhatisbesttouseinthesituation. 2.5.3 Constraints Therearewaystorestrictinteractioninaninterface.Itispossibletoclassify constraintsintothreecategories:physical,logicalandcultural.thephysical constraintisnotbeingabletodosomethingthatisphysicallyimpossible.for example,puttingatriangleshapedobjectintoacircularhole.thelogical constraintiseverythingthatmakessensetoauser.culturalconstraintsare learnedandacceptedinculturalgroupssuchasthecolorredhavingdifferent meaningsindifferentcultures. 2.5.4 Mapping Controlshavemeaning.Theirmeaningshoulddeterminehowtheyshouldbe mapped. Nearly,all,artifacts,need,some,kind,of,mapping,between,controls,and,effects,, whether,it,is,a,flashlight,,car,,power,plant,,or,cockpit.,[10] 2.5.5 Consistency Itisimportanttobeconsistent.Aninterfaceneedstofollowrules,ruleslike usingthesameoperationforacertaintask,tobeconsistent.ifsoftwareis consistentitiseasiertolearnandtouse.itisdifficulttoapplyonadvanced interfacesbutitisstillimportant. 10
2.5.6 Affordance Insoftwaredevelopmentitisimportantwhendesigningbuttonsandiconsthatit isclearwhatkindoftasktheycanperform.buttonsareclickable.everything thathasinteractionchoicehasanexplicittask,anexplicitaffordance. 2.6 Humaninterfaceguidelines Humaninterfaceguidelines(HIG)aredocuments,producedbyApple[17]and Android[18],whichgivesdevelopersrecommendationstoimprovethe experiencefortheusersontheiroperatingsystems[14].higsmainpurposeisto maketheplatformasconsistentaspossible,aregularuserofaplatformexpects acertainbehavior. BothAndroidandiOShavehumaninterfaceguidelines.Followingthese guidelines,tocomeupwithasolidappthatrespondstothegesturesthatusers expects,willprovidetheuserwithanexperiencetheyarelookingfor. Androidsrecommendationsandguidelineshelpthedevelopertosatisfythe Androidusers. 11
3. Method Thischapterwillbeabouthowtosystematicallydeveloptwoversionsofan applicationandhowtogenerallyproceedtogetsameresultsontwodifferent platforms. 3.1 NativeorCrossRPlatform Therearetwowaystodevelopfortwosmartphoneplatforms.Thefirstapproach istouseacrossdplatformtoolthatusesoneprogramminglanguage,forexample JavaScriptorHTML5,andthenconvertthecodetoitsnativelanguage.Theother wayistodevelopintheplatformsnativelanguage.thereareofcourseprosand constoboththeseapproaches.crossdplatformoffersfasterdevelopingtimeand thedeveloperdoesonlyneedtolearnoneprogramminglanguage.ontheother hand,makingtheapplicationlookandfeelnativeismuchmoredifficultthanin nativedevelopment.nativeapplicationscantakeadvantageoftheplatforms hardwareandmakeitperformfasterandwithlesscrashesandissues,butit takestimetowritecodeintwoprogramminglanguages.touseanativeappthe userneedtoinstallitonthedevice.anativeappthathasbeendevelopedonone platformcannotbeusedonanother[6][15]. Consumers,won t,buy,your,application,on,their,platform,just,because,you,support, other,platforms;,instead,they,want,an,application,that,looks,like,the,rest,of,the, applications,on,their,platform,,that,follows,the,same,interface,paradigms,as,the, rest,of,the,applications,they re,used,to,,and,is,integrated,into,their,platform.,[7], 3.2 Nativedevelopment Forthisthesisitwasdecidedtohaveanativedevelopmentapproach.Todevelop anativeappforbothplatformsthedevelopermustcreatesourcesourcedcode, usetheuserinterfacetoolsandthesoftwaredevelopmentkitsthatareprovided forbothplatforms.everyplatformhasthereownuicomponentsthatare designedtogivethebestuserexperienceforthatplatform[15]. 12
Therearetwoapproachesonecoulduseintheprocessofdevelopingmultiple apps.thefirstapproachistoletthedeveloperstartandfinishoneofthe platformsandthenproceedtothenextplatform.thesecondapproachistowork inparallelwithbothplatformsandfinishthematthesametime. DevelopingnativeiOSapplicationsaredonewiththeprogramminglanguage ObjectiveDC.ObjectiveDCisanobjectDorientedlanguagebasedonC[8].Applehas anintegrateddeveloperenvironment(ide)calledxcodethatisusedtodevelop foriosandosx.xcodetogetherwiththeiossoftwaredevelopmentkit(sdk) makesitpossibletodevelopnativeapplicationsforios.tobeabletoreleaseios applicationsthedeveloperneedtoregisteradeveloperaccountwithapple[7]. InterfacebuilderinXcodehandlestheuserinterfacedesign.Applereviewsevery appbyhandtomakesurestandardsandguidelinesareheld,whichmeansit couldtakeuptothreeweekstoreleaseanappontheirappstore. AndroidnativeapplicationsarebasedontheJavalanguage.JavaisanobjectD orientedlanguage.theidethatisusedforandroidiseclipseandtogetherwith theandroiddevelopertools(adt)itispossibletodevelopapplications.google hasanautomaticappreviewerthatscanstheappforvirusesandunwanted material,butthismeansitwillonlytakeafewhoursuntilanappisreleasedon theirappstore. 13
4. Implementation TheimplementationwasmadeonanAndroidandonaniOSdevicewithhelpof thetheoriesandmethodspresentedearlier.thenexttwochaptersareabout whatthehigssayaboutthedesignprinciplesandhowitisimplementedintothe apps. 4.1 Designprinciples ios Apple shighasagoodstructureandiseasytofollow.forthemitisvery importantthatthedeveloperfollowstheseguidelines.ifnot,thereisariskthat theappdoesnotgetapprovedanditdoesnotgetreleasedontheappstore. 4.1.1 Visibility Appletalksalotabouttherighticonsizebecauseitisasmalldisplay.Theyhave alistofsizesfordifferenttypeoficonsandscreensizes.itismentionedthat controlsshouldlooktappable,everythingthatisabletobetappedshouldlook thatway. 4.1.2 Feedback Applethinksthattheusersexpectimmediatefeedbackwhentheyareoperating acontrol.ataskthattakesafewsecondsshoulddisplaytheprogressandshow anexplanatorymessage. 4.1.3 Constraints Theusershouldfeelincontrol,theappshouldnotmakedecisionsforthem. Applementionsthatitisgoodtohavecombinationoflettingtheusermake almostallthedecisionsandwarningthemofdangerousoutcomes.iosusers expecttohaveconfirmationandtheoptiontocancelanaction. 14
4.1.4 Mapping OniOSdevicesitisveryimportanttohaveanavigationbar.Onthenavigation barthereshouldbeabuttontogobacktothepreviousviewanditshouldbeon theleftsideofthebar.ifthedeveloperwantstocreateacustomizedback buttonitstillshouldlooklikeabackbutton,forexample,itmusthaveapointy sidesotheuserinstantlyknowsitisabackbutton. 4.1.5 Consistency iosprovidesalotofstandarduielementsthatthedevelopercanuse.itisvery importanttoknowthattheuserexpectsthestandarduistobehaveastheydoin thebuiltinapps.inaviewthedeveloperneedstofocusonwhattasktheuseris usingandtakeawaytheunnecessarydetails.theyalsopointoutthateverything intheappthatlooksthesameshoulddothesameoperations.appleprovides buttonsandiconswithdescriptiontomakeiteasierforthedevelopertokeepa consistentapp. 4.1.6 Affordance AppleprovidesalotofinformationabouttheirUIelementsandhowtheyshould behave.sowhenitcomestocustomizingelementsitisimportanttoanalyzethe standardelementslooksandbehaviortomakeitclearthatthecustomized elementhavethecorrectaffordance. 4.2 Designprinciples Android 4.2.1 Visibility Androidisdevelopedforalotofdifferentscreensizes,whichmeanthaticons needtobemadeindifferentsizes.thatiswhytheyhavealotoffocusonsizesof iconsandbuttons.thedevelopercannotbesurehowmuchspacethatis available. 15
4.2.2 Feedback Ifsomethingisabletobetoucheditisimportanttovisualizeittotheuser. Googlehaveadescriptionthatshowshowabuttonshouldreacttodifferent gestures.itisimportanttoreacttocomplexgesturesifitispossiblefortheuser toaccomplishthem. 4.2.3 Constraints Googlesaythatthedevelopercanmakealotofdecisionsbyhimself.The developerhasmoreroomtomakemodificationstomaketheirappunique. 4.2.4 Mapping UsuallyonanAndroidsystemyoucanchoosetohavebars.Thesebarsare positionedinacertainplacesonthescreenandshouldcontaindifferentthings dependingonwhere.therearethreekindsofbars,mainactionbar,topbar,and bottombar.theactionbarisforhierarchythetopbarisforquickviewchange andthebottombarisforexpectedactions. 4.2.5 Consistency OnewaytokeepanAndroidappconsistentistohaveanactionbarthroughout thewholeapp.googlehas,tokeeptheapp PureAndroid,alistofdosand don tswhenitcomestobuttons,iconsandtabbars.itismoreimportant,when customizingownuielementsinandroid,tofollowthespecificbrandingrather thanfollowinggoogle srulesofconsistency. 4.2.6 Affordance SomeAndroiddeviceshavefourphysicalkeys,back,menu,searchandhome. Otherdeviceshavethree,back,homeandrecents.Thesebuttonsaresupposedto docertaintasks,forexample:backbuttonshouldgobackintheappandnothing else. 16
4.3 Model ForanysystemtoworkwithanAPIadatabaseisneededtostorethedata.The solutionwastobuildajson 2 APIthatbothappscancommunicatewith.The appssendajsonmessagewithappidandreceivethequestionsthatareactive andhavenotbeenvotedonbytheid.itisawaytohideunnecessaryinformation andblocktheuserfromvotingtwiceonthesamequestion.thejsonmessage thatgetssentbacktotheappcouldlooklikethis: [ {"question":{"question":"how happy are you?","id":1}}, {"question":{"question":"whats your favorite color?","id":2}}, {"question":{"question":"are you happy?","id":3}}, {"question":{"question":"how often do you brush your teeth?","id":4}} ] Thatmessageisloadedintoanobjectsothattheappcanhandletheuserinput. Thesamethinghappenswhenvotechoicesarerequestedandlaterwhenthe userhasmadeachoiceonwhattovoteon.theanswersgetstoredinatableon thedatabasesothattheyareeasytoextractwhentheresultispresented. Thedatabase,Figure1,hasfourtablesforthisfunction:voters,questions, alternativesandvoterecords.everytimeauserthrowsavoteitgetsregistered whichvoter,whatquestionandwhichalternativethevoterchose.ifsomehow theuservotesonaquestionthattheuseralreadyhasvotedon,itdoesnotget registered 2 http://en.wikipedia.org/wiki/json
Which? What? Which? Figure1:Databasestructure 4.4 View Theviewisconsideredtobetheuserinterface.Thissectionwillbeaboutthe differentviewsintheapps. Theappshouldbeabletoshowvotingoptions,butdoitinawaysothattheuser onlycanselectoneofthem.androidandioshavedifferentuielementsfor selection.androidhasspinnersandradiobuttons.ioshaspickersand segmentedcontrols. 4.4.1 Alternatives AccordingtotheAndroidguidelinesthespinner,Figure2,isgoodforselectinga valuefromasetbut,indefaultstate,alwayshasaselectedvalue.havingapre selectedvaluemayaffectthevoterschoice. IniOS,segmentedcontrol,Figure5,isgoodforchoicesthatarenottoomanyand thecontentnottodifferentiatinginsize.ifthesizesofthebuttonsaretoo differentitdoesnotkeeptheconsistency.
TheotheralternativeforiOSisthePicker,Figure3.ThePickercanholda numberofdifferentvalues,butthehigssaythatthepickershouldbeusedonly ifthevaluesarefamiliartotheuser.thevaluesaregoingtobedifferentevery timeandcanbealargenumber.applerecommendsusingatableviewforlarge numberofchoices. Radiobuttonsaregoodforsetsthataremutuallyexclusive.iOSdoesnotprovide radiobuttonsbutandroiddoes,figure4.theproblemishowmakethemwork inadynamicview. Figure2:Androidspinner Figure3:iOSPicker Figure4:Androidradiobuttons Figure5:iOSSegmentedcontrols 19
4.4.2 Solution ioshavetableviews;thehigsrecommendusingthemtodisplayalotofdata.it isimportantthatthe questioncreator isabletocreateaquestionwithasmany voteoptionsaswanted.becauseofthat,therewasnotanoptiontohaveafixed numberofbuttonsonthelayout.thebuttonswouldhavetobecreatedwhenthe questionisloaded.thequestionneedstobestoredinadatabaseandthe applicationsneedtoloadthequestionfromthedatabase. ForiOSthesolutionwastocombineimagelayoutwithatableview.Tableviews arecustomizable. AccordingtotheiOSHIGstheuserwantstofeelincontrol.Ifthelistcontainsa setofchoices,theuserselectsoneofthemandaconfirmviewappears,theuser willprobablyperceivethefeelingofloosingthatcontrol.insteadofusingthe tableviewasaregulartableview,takingtheflexibilityofitandusingittogether withanotherfunctioncouldfixtheproblem. Anoriginaltableviewcontainsonlyatextlabel.Byaddinganimageviewthat changesimagewhenthecellisselectedtheuserwillperceiveitasselectedand stillbeabletochangetheselection.thiswillgivetheusermorecontroloverthe choices.roundingthecornersandseparatingthealternativesmakesitclearer thattheyaredifferentchoices.thequestioncellalwaysneedstobeonthetop, becausethefirstthingtheuserseesisthetop.itistwicethesizesoitcanfitthe questiontextandsothattheuserdoesnotmistakeitforachoice. Whentheselectionismadethecellchangescolorandtheradiobuttongets selected.iftherearemorethanfourchoicestheuserhastoscrolltoseetherest ofthealternatives.avotecellisalwaysatthebottomofthetableviewfor confirmation. Figure6:Tableviewcell 20
Androidhassomethingcalledlistviews,Figure7.Theselistviewsaresimilarto thoseofios.somecustomizationneedstobedonehereaswell.androidhavea UIelementcalledradiobutton.Soinsteadofhavinganimageviewthatchanges image,theradiobuttonwereplacedthere.asiniosthequestioncellistwicethe sizeastherestofthecells.theborderlinesonthecellsarealittlethickeraswell asthetextinthem.thisgivesitalittlemoreandroidfeeling.thevotingcellis placedatthebottomandhasalittlemorespacesothatitisnotmistakenfora choicecell. Figure7:Listview Theapphastobeabletohandlemorethanonequestion.Therecanbeseveral questionsavailableandactive,sothebestwaytodisplaythoseisonalistbefore thevotinglist,figure8and9.thislististhefirstthingthattheusersees.the userwillonlyseethequestionsthatareactiveandavailabletovoteon.onios, whenanotherviewisassociatedwiththerowitisrecommendedtousea disclosureindicator. 21
Whenauserhasdecidedonachoice,aconfirmviewdisplaystotheuserthatthe voteiscompleteandgivesthechoicetovoteonanotherquestion. 4.5 Controller Thecontrollerhandlesalltheinputfromtheuseraswellascontrollingthe model.whenthequestionviewloads,thecontrollersendsarequesttothe serverwithanapplicationidandtheserversendsajsonresponse.theuser willonlyseethequestionsthatareavailableatthetime.thecontrollertellsthe viewtodisplayalistwiththequestionsthatwerereceived.theuserselectsa question,thecontrollersendsajsonrequesttotheserver,thecontrollerthen receivesajsonresponseandtellstheviewtoshowthequestionandtheright numberofalternativesinachoicelist.iftheusermadeamistake,e.g.,onios, thereisabuttononthenavigationbarthatmakesitpossibletogobackand selectanotherone,onandroidtheusercanusethebackbuttontonavigateback tothequestion. Figure8:iOSFirstview Figure9:AndroidFirstview 22
Sincethechoicelistiscustomizedonbothplatformsithastobeasintuitiveas possibletomakethechoiceevenifitisnotastandardlist.theuserselectsa row,theradiobuttonindicatesthattherowhasbeenselected,oniostherow getsastandardblueselectioncolorandonandroidtherowdoesnotchange colorbecausethefocusisontheradiobutton. Figure10:iOSCell Figure11:AndroidCell Whenthevoterowisselectedthecontrollerchecksifachoicehasbeenmade.If not,analertviewpopsupandtellstheusertomakeachoice.ifachoiceis selecteditsendsthechoicetotheserverandtellstheviewtoshowtheconfirm view,figure12and13.intheconfirmviewtheusercangobacktothequestions viewbutnotthechoiceview.ifthebackbuttononandroidisusedthequestions viewisdisplayed.oniosthereisabackbuttononthenavigationbar.thereis alsoabuttononbothplatformsthatsendstheuserbacktothequestionsview. Figure12:iOSConfirmview Figure13:AndroidConfirmview 23
5. Discussion InthischapterIwilldiscussthemethodsandtheimplementationthatwereused inthisthesiswork.iwantedtohaveadifferentapproachtomyproblem.there areseveralothermethodsthatcanbeusedbutithoughtthesewereinteresting. Thehumaninterfaceguidelinesaremadetoguidethedeveloperintheright direction,butithinkthatanapplicationmustbetested,byusabilitytestsand userevaluation.itwasveryinterestingtoseethehigsforandroidandios becauseitissomethingthatihavenotthoughtaboutearlierinmystudies. Tohidequestionsfromtheuserthattheyhavealreadyvotedon,myfirstidea wastogetauniquephoneid,butneitherapplenorgoogleallowsyoutouse thatid,soinsteadireceivedanappidthatisuniqueforeveryinstallation. Iunderestimatedthetimeitwouldtakeformetolearntodeveloponthe platformsandunderstandtheexistingapplications,aswellasthetimeto understandtheserversideoftheapplication.workingwithtwoplatformsatthe sametimewasalittlecomplicated,especiallywhentherearedifferentrulesto followinthehig.itiseasiertoworkwithxcodebecausexcodefeelsmore tailoredandoptimizedtothesystemandeclipsecangetalittleslow.forthis applicationtherearenotmanydifferencesbetweeniosandandroidthatyou havetothinkabout.youcanuseasimilarapproachonbothplatformsandstill followthehigs.butastheapplicationgrowsbiggerthedetailsgetsmorecrucial. Ifwelookatcreatingcustomizedtableviews,iOShasaneasierapproachtothe problemandhaspredefinedmethodsthatareeasytounderstand. ItlookslikeAndroidandiOSaregettingmoreandmoresimilarintheiruser experiencesinceapplenowhavereleasedtheirlatestupdateios7.withthe updatecomesaflatinterfacethatremindsmeoftheandroidplatform.androids highdend devicesdonothavethephysicalbuttonsandithinkthatinthefuture thebuttonsaregoingtoberemovedonallandroiddevices. 24
6. Conclusion InthischapterIwilltrytoanswermyresearchquestion: What,are,the, differences,and,similarities,between,ios,and,android,,according,to,the,human, interface,guidelines,,when,developing,an,app,from,a,user,interface,perspective? AndroidandiOSarethebiggestsmartphoneoperatingsystemsoutthere.They areconstantlycompetingwitheachother.fromwhatihavelearnedwiththis thesisprojectisthattheydifferbecausetheywanttheusertofeelthatthey belongsomewhere.itishardtopointouteverythingthatisdifferent,butitis goodtoknowasadeveloperthatthereare.googlehasmanagedtosupport manydifferentscreensizes,resolutionsandhardwaresothattheoscanfiton almostanydevice.itresultsinmoreworkforthedeveloperbecauseeveryimage andiconhastobemadeindifferentsizesandresolutionsaswell.appleonthe otherhandonlyrequiresthattheimagesandiconsshouldbemadeintwo differentsizesbecausesomeoftheirdevisesusesaretinadisplaythathastwo timestheresolutionthanaregulardisplay. Whenitcomestofeedbacktheybothwantthesamething,afastandresponsive systemthatfeelslikeyouareonewiththesystem.itishardforaniosuserlike me,whichhaveneverusedandroidbefore,toknowhowitshouldfeel.itisvery easytojustusethesameuiandwidgetsforbothplatforms.butithinkitis importanttoknowthattheplatformsaredifferentandtheusersthink differently.whendevelopingforseveralplatformsyoushouldhavethesame functionalities,buttweaktheuisoitfitstheplatform.oftenithastodowith wereyoushouldplacethefunction,becausetheuserareusedtoacertain patternandifyoustepoutofthatpatterntheuserwillgetconfused.itiseasyto justgowithacrossdplatformsolutionespeciallybecauseitismorecosteffective 25
References [1]http://en.wikipedia.org/wiki/Smartphone(2013D06D11) [2]http://www.businesswire.com/news/home/20121017005479/en/StrategyD AnalyticsDWorldwideDSmartphoneDPopulationDTopsD1(2013D06D28) [3]https://en.wikipedia.org/wiki/Android_(operating_system)(2013D07D08) [4]http://en.wikipedia.org/wiki/iOS(2013D07D08) [5]http://www.sciencedirect.com/science/article/pii/S0360131509001134 (2013D07D08) [6]http://theappentrepreneur.com/appDentrepreneursDdilemmaDtoDgoDnativeD ordcrossdplatform(2013d07d08) [7]AlasdairAllan,LearningiOSProgramming,SecondEdition,O'ReillyMedia, ISBN:978D1D4493D0377D8 [8] http://developer.apple.com/library/mac/#documentation/cocoa/conceptual/p rogrammingwithobjectivec/introduction/introduction.html(2013d07d08) [9] http://people.cs.aau.dk/~normark/prog3d03/html/notes/paradigms_themesd paradigmdoverviewdsection.html(2013d07d08) [10]Rogers,Y.Sharp,H.Preece,J.(2011).InteractionDesign:BeyondHumanD ComputerInteraction,JohnWiley&Sons,ISBN:978D0D470D66576D3 [11]LehtimäkiJ.(2013).SmashingAndroidUI,FirstEdition,JohnWiley&Sons, ISBN:978D1D118D38728D3 26
[12]Forlizzi,J.&Ford,S.(2000).Thebuildingblocksofexperience:anearly frameworkforinteractiondesigners,acm [13]GlennE.Krasner&StephenE.Pope(1988).AcookbookforusingthemodelD viewcontrolleruserinterfaceparadigminsmalltalkd80,parcplacesystems [14]http://en.wikipedia.org/wiki/Human_interface_guidelines(2013D07D08) [15] http://public.dhe.ibm.com/common/ssi/ecm/en/wsw14182usen/wsw14182u SEN.PDF(2014D03D26) [16]ISO9241D11:1998,ErgonomicsofHumanSystemInteraction:Guidanceon usability,internationalorganizationforstandardization [17] https://developer.apple.com/library/ios/documentation/userexperience/conc eptual/mobilehig/index.html [18]https://developer.android.com/design/index.html 27