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 Utnarm is an employment fair and is held once every year in November and is always striving towards a Besöksadress: better and meaningful fair. Last year they took a step Ångströmlaboratoriet Lägerhyddsvägen 1 towards that goal. An application for Android and Hus 4, Plan 0 IPhone were developed and released. It had the basic functions that could be used that year. This year Postadress: Utnarm wants to improve the applications and fulfill Box 536 751 21 Uppsala the students’ experience. An audience response system could result in Telefon: companies getting a closer connection to the students 018 – 471 30 03 during lectures. The apps are easy accessible for

Telefax: students. 018 – 471 30 00 This thesis describes the implementation of a system on two different platforms and the similarities and Hemsida: differences between them. This is accomplished by, http://www.teknat.uu.se/student 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!är!en!karriärmässa!som!anordnas!en!gång!per!år!i!november.!De!har!som! mål!att!göra!den!bättre!och!meningsfullare!varje!år.!Förra!året!tog!de!ett!steg! närmare!genom!att!skapa!applikationer!till!Android!och!IPhone.!Den!fylldes!med! de!grundläggande!funktionerna!som!de!tänkte!behövdes!under!det!året.!I!år!har! man!chans!att!utöka!dessa!applikationer!för!att!förbättra!studenternas! upplevelse.!!

En!mentometerfunktion!skulle!kunna!resultera!i!att!studenterna!får!en!närmare! kontakt!med!företagen!under!föreläsningar.!Apparna!är!lätta!att!ta!hem!om!man! äger!en!smartphone.!!

Denna!uppsats!beskriver!implementationen!av!mentometersystemet!på!två!olika! plattformar!och!likheter!och!skillnader!mellan!de!två.!Detta!är!utfört!genom!att! använda!sig!av!modelDviewDcontroller!designmönstret!i!objectDorienterad! programmering.!Med!hjälp!av!människans!interaktionsriktlinjer,!som!både! Google!och!Apple!har!tagit!fram!för!att!öka!användarupplevelsen,!har!en! jämförelse!gjorts!mellan!Android!och!IPhone!ur!ett! användargränssnittsperspektiv.!!

Resultatet!blev!att!det!finns!skillnader!och!likheter!som!är!lätta!att!glömma!bort! när!man!fokuserar!på!en!applikation.!Funktionaliteten!ska!vara!densamma!på! båda!plattformar!men!användargränssnittet!måste!ändras!för!att!användaren!ska! känna!sig!hemma.!

! !

! 2! ! !

! 3! Content!

1.! BACKGROUND-...... -6! 1.1! ABOUT!UTNARM!...... !6! 1.2! SMARTPHONES!...... !6! 1.3! SMARTPHONE!APPLICATION!...... !6! 1.4! AUDIENCE!RESPONSE!SYSTEM!...... !7! 1.5! PURPOSE!...... !7! 1.6! RESEARCH!QUESTION!...... !7! 2.! THEORY-...... -8! 2.1! INTERACTION!DESIGN!...... !8! 2.2! USER!EXPERIENCE!...... !8! 2.3! USABILITY!...... !8! 2.4! MODEL!VIEW!CONTROLLER!(MVC)!...... !9! 2.5! DESIGN!PRINCIPLES!...... !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! HUMAN!INTERFACE!GUIDELINES!...... !11! 3.! METHOD-...... -12! 3.1! NATIVE!OR!CROSSDPLATFORM!...... !12! 3.2! NATIVE!DEVELOPMENT!...... !12! 4.! IMPLEMENTATION-...... -14! 4.1! DESIGN!PRINCIPLES!–!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! DESIGN!PRINCIPLES!–!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! About!Utnarm!

Utnarm!is!Uppsala!Union!of!Engineering!and!Science!Students!Employment!Fair1! and!is!held!once!every!year!were!thousands!of!students!get!to!meet!around! hundred!companies!during!one!day!in!the!beginning!of!November.!Utnarm!is! more!than!a!fair,!before!the!main!event!there!is!a!month!filled!with!interesting! events!and!lectures.!Students!can!go!and!listen!to!interesting!talks!and!educate! them!selves!before!going!to!the!fair.!!

1.2! Smartphones!

A!smartphone!is!a!mobile!phone!with!highDresolution!touchscreens!and!the! capability!of!showing!videos,!pictures!and!browsing!the!Internet[1].!

Smartphones!have!gotten!more!and!more!popular,!2013!there!were!over!one! billion!smartphone!devices!sold!world!wide[2].!!The!most!popular!operating! systems!today!are!Android!and!iOS[1].!!

1.3! Smartphone!application!

An!application!is!something!that!can!be!installed!on!a!smartphone.!Both!Android! and!iOS!had!in!late!2012!over!700!000!apps!each!available!on!app!store!and! Google!play.!About!50!billion!apps!each!has!been!downloaded!and!installed!on! these!systems![3][4].!!

Utnarm!released!two!applications!last!year,!one!application!for!Android!and! another!one!for!iOS.!The!main!purpose!of!developing!these!apps!was!to!make! students!more!interested!in!Utnarm!and!to!be!available!for!most!of!them.!Some! of!the!functions!are!a!news!page,!blog!and!a!catalogue.

!

1http://utnarm.utn.se! 6! 1.4! Audience!response!system!

Audience!response!is!a!way!of!interaction!between!the!lecturer!and!the!audience.!! “Audience!response!systems!(ARS)!permit!students!to!answer!electronically! displayed!multiple!choice!questions!using!a!remote!control!device.!All!responses! are!instantly!presented,!in!chart!form,!then!reviewed!and!discussed!by!the! instructor!and!the!class.”[5].!Studies!have!shown!that!ARS!improves!the!audience! interaction,!engagement!and!attention.!!

1.5! Purpose!!

This!thesis!work!will!investigate!what!functions!an!audience!response!system! need!to!be!implemented!into!an!Android!and!iOS!application.!The!Android!and! iOS!do!not!only!use!different!languages!and!IDEs,!but!also!have!different!user! interface!guidelines.!The!application!should!be!designed!in!a!way!so!that!the!user! does!not!have!any!problems!understanding!its!purpose.!iOS!and!Android!users! have!different!expectations!when!using!their!devices,!for!example!Android!users! use!a!back!button!as!a!navigation!tool,!iOS!users!do!not.!This!means!that!apps! have!to!look!different!and!has!to!be!programmed!differently!to!meet!these! expectations.!

1.6! Research!question!

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?!

! !

! 7! 2.! Theory!

2.1! Interaction!Design!

Interaction!design!is!the!art!of!designing!interactive!systems!that!make!it!easy! for!the!user!to!communicate!and!interact.![10]!A!system!could!be!the!most! ground!breaking!and!advanced!system!out!there!but!it!is!useless!if!it!is!bad! interaction!design.!It!is!important!to!understand!how!users!perceive!things!and! to!know!which!users!are!going!to!use!the!system!and!their!knowledge.!For!a! system!to!have!a!wellDdeveloped!design!the!developer!needs!to!think!about!the! context!of!use,!type!of!task!and!what!kind!of!user!it!is.![10]!

2.2! User!experience!

User!experience!is!about!“What!the!interaction!with!the!system!feels,like!to!the! users”.!According!to!Rogers,!Sharp!and!Preece![10]!it!is!about!emotion,!how!the! user!experiences!an!interaction!rather!than!how!useful!it!is.!Forlizzi!&!Ford![12]! say!“Experiences!that!we!repeat!again!and!again,!such!as!reading,!tying!our! shoes,!or!making!the!bed!in!the!morning,!generally!become!more!automatic!as! we!practice!them.!These!experiences!migrate!from!cognitive!ones!to!subD conscious!ones.”!So!if!interface!is!based!on!something!that!the!user!has!seen! before,!it!probably!will!feel!like!the!system!is!made!for!the!user!and!the! experience!increases.!

2.3! Usability!

According!to!ISO!9241D11![16]!“Usability:!the!extent!to!which!a!product!can!be! used!by!specified!users!to!achieve!specified!goals!with!effectiveness,!efficiency! and!satisfaction!in!a!specified!context!of!use.”!What!this!means!is!that!usability!is! good!for!making!sure!interactive!products!are!efficient,!effective!and!enjoyable! according!to!the!user.!Usability!is!also!about!the!time!to!learn,!remember!how!to! use!and!if!it!is!a!safe!system![10].!“It!doesn’t!matter!how!good!a!feature!is!if!the! users!don’t!know!how!to!get!to!it!or!can’t!figure!out!how!to!use!it.”[11]!!

! 8! 2.4! Model!View!Controller!(MVC)!

This!thesis!work!is!about!working!with!graphical!user!interfaces!(GUI).!With!a! GUI!the!user!can!interact!with!the!software,!such!as!pushing!a!button!or!touching! a!screen.!!When!developing!software!that!uses!some!sort!of!interaction!it!has!its! benefits!to!take!apart!the!functional!units!as!much!as!possible![13].!Those!who! developed!SmalltalkD76![13]!discovered!that!separating!the!components!three! ways!turned!out!to!have!its!payoffs.!The!three!ways!were:!the!structured!data! (model),!the!display!of!the!interactions!state!(view)!and!the!objects!that!control! the!view!and!the!model!(controller).!

The!model!contains!objects!with!properties!and!ways!to!access!and!modify!these.! The!view!displays!the!model!data;!it!has!to!do!with!graphical!display.!When!the! model!changes!its!state!the!view!should!change!as!well.!The!controller!handles! the!interaction!with!the!user.!When!the!user!interacts!with!the!software!the! controller!handles!all!the!events.!Krasner!and!Pope!say!that!designing!MVC!in! interactive!applications!helps!out!with!the!conceptual!development!and! reusability!is!a!lot!easier.!

2.5! Design!principles!

Design!principles!are!a!mix!of!theory!based!knowledge,!experience!and!common! sense!to!suggest!the!designer!how!to!conceptualize!usability![10].!But!the!design! principles!are!not!made!to!tell!how!specifically!design!the!interface.!It!is!a!way! for!a!developer!or!a!designer!to!be!reminded!of!certain!things!that!is!good!to! think!of!in!an!interface.!Rogers,!Sharp!and!Preece![10]!have!listed!the!most! common!ones!that!cover!what!the!user!should!see!and!what!should!happen! when!interacting!with!an!interface.!!

2.5.1! Visibility!

If!products!functions!are!distinct!and!visible,!it!is!more!likely!that!the!user!knows! what!to!do!next.!!

! 9! 2.5.2! Feedback!

Feedback!is!about!giving!the!user!information!about!what!is!occurring.!If!a! button!is!pushed!something!is!expected!to!happen!in!order!to!continue!with!the! task.!There!are!several!kinds!of!feedbacks!that!are!usable:!audio,!tactile,!visual!or! verbal.!The!developer!needs!to!think!about!what!is!best!to!use!in!the!situation.!

2.5.3! Constraints!

There!are!ways!to!restrict!interaction!in!an!interface.!It!is!possible!to!classify! constraints!into!three!categories:!physical,!logical!and!cultural.!The!physical! constraint!is!not!being!able!to!do!something!that!is!physically!impossible.!For! example,!putting!a!triangle!shaped!object!into!a!circular!hole.!The!logical! constraint!is!everything!that!makes!sense!to!a!user.!Cultural!constraints!are! learned!and!accepted!in!cultural!groups!such!as!the!color!red!having!different! meanings!in!different!cultures.!

2.5.4! Mapping!

Controls!have!meaning.!Their!meaning!should!determine!how!they!should!be! 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!

It!is!important!to!be!consistent.!An!interface!needs!to!follow!rules,!rules!like! using!the!same!operation!for!a!certain!task,!to!be!consistent.!If!software!is! consistent!it!is!easier!to!learn!and!to!use.!It!is!difficult!to!apply!on!advanced! interfaces!but!it!is!still!important.!

! 10! 2.5.6! Affordance!

In!software!development!it!is!important!when!designing!buttons!and!icons!that!it! is!clear!what!kind!of!task!they!can!perform.!Buttons!are!clickable.!Everything! that!has!interaction!choice!has!an!explicit!task,!an!explicit!affordance.!

2.6! Human!interface!guidelines!

Human!interface!guidelines!(HIG)!are!documents,!produced!by!Apple![17]!and! Android![18],!which!gives!developers!recommendations!to!improve!the! experience!for!the!users!on!their!operating!systems![14].!HIGs!main!purpose!is!to! make!the!platform!as!consistent!as!possible,!a!regular!user!of!a!platform!expects! a!certain!behavior.!!!

Both!Android!and!iOS!have!human!interface!guidelines.!Following!these! guidelines,!to!come!up!with!a!solid!app!that!responds!to!the!gestures!that!users! expects,!will!provide!the!user!with!an!experience!they!are!looking!for.!!

Androids!recommendations!and!guidelines!help!the!developer!to!satisfy!the! Android!users.!

! !

! 11! 3.! Method!

This!chapter!will!be!about!how!to!systematically!develop!two!versions!of!an! application!and!how!to!generally!proceed!to!get!same!results!on!two!different! platforms.!

3.1! Native!or!CrossRPlatform!

There!are!two!ways!to!develop!for!two!smartphone!platforms.!The!first!approach! is!to!use!a!crossDplatform!tool!that!uses!one!programming!language,!for!example! JavaScript!or!HTML5,!and!then!convert!the!code!to!its!native!language.!!The!other! way!is!to!develop!in!the!platforms!native!language.!There!are!of!course!pros!and! cons!to!both!these!approaches.!CrossDplatform!offers!faster!developing!time!and! the!developer!does!only!need!to!learn!one!programming!language.!On!the!other! hand,!making!the!application!look!and!feel!native!is!much!more!difficult!than!in! native!development.!Native!applications!can!take!advantage!of!the!platforms! hardware!and!make!it!perform!faster!and!with!less!crashes!and!issues,!but!it! takes!time!to!write!code!in!two!programming!languages.!To!use!a!native!app!the! user!need!to!install!it!on!the!device.!A!native!app!that!has!been!developed!on!one! platform!cannot!be!used!on!another![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! Native!development!

For!this!thesis!it!was!decided!to!have!a!native!development!approach.!To!develop! a!native!app!for!both!platforms!the!developer!must!create!source!sourceDcode,! use!the!user!interface!tools!and!the!software!development!kits!that!are!provided! for!both!platforms.!!Every!platform!has!there!own!UI!components!that!are! designed!to!give!the!best!user!experience!for!that!platform![15].!!

! 12! There!are!two!approaches!one!could!use!in!the!process!of!developing!multiple! apps.!The!first!approach!is!to!let!the!developer!start!and!finish!one!of!the! platforms!and!then!proceed!to!the!next!platform.!The!second!approach!is!to!work! in!parallel!with!both!platforms!and!finish!them!at!the!same!time.!!!

Developing!native!iOS!applications!are!done!with!the!programming!language! ObjectiveDC.!ObjectiveDC!is!an!objectDoriented!language!based!on!C![8].!!Apple!has! an!integrated!developer!environment!(IDE)!called!Xcode!that!is!used!to!develop! for!iOS!and!OSX.!!Xcode!together!with!the!iOS!Software!Development!Kit!(SDK)! makes!it!possible!to!develop!native!applications!for!iOS.!!To!be!able!to!release!iOS! applications!the!developer!need!to!register!a!developer!account!with!Apple![7].!! Interface!builder!in!Xcode!handles!the!user!interface!design.!Apple!reviews!every! app!by!hand!to!make!sure!standards!and!guidelines!are!held,!which!means!it! could!take!up!to!three!weeks!to!release!an!app!on!their!app!store.!

Android!native!applications!are!based!on!the!Java!language.!Java!is!an!objectD oriented!language.!The!IDE!that!is!used!for!Android!is!Eclipse!and!together!with! the!Android!Developer!Tools!(ADT)!it!is!possible!to!develop!applications.!!Google! has!an!automatic!app!reviewer!that!scans!the!app!for!viruses!and!unwanted! material,!but!this!means!it!will!only!take!a!few!hours!until!an!app!is!released!on! their!app!store.!

! ! !

! 13! 4.! Implementation!

The!implementation!was!made!on!an!Android!and!on!an!iOS!device!with!help!of! the!theories!and!methods!presented!earlier.!The!next!two!chapters!are!about! what!the!HIGs!say!about!the!design!principles!and!how!it!is!implemented!into!the! apps.!

4.1! Design!principles!–!iOS!

Apple’s!HIG!has!a!good!structure!and!is!easy!to!follow.!!For!them!it!is!very! important!that!the!developer!follows!these!guidelines.!If!not,!there!is!a!risk!that! the!app!does!not!get!approved!and!it!does!not!get!released!on!the!App!Store.!

4.1.1! Visibility!

Apple!talks!a!lot!about!the!right!icon!size!because!it!is!a!small!display.!They!have! a!list!of!sizes!for!different!type!of!icons!and!screen!sizes.!It!is!mentioned!that! controls!should!look!tappable,!everything!that!is!able!to!be!tapped!should!look! that!way.!!

4.1.2! Feedback!

Apple!thinks!that!the!users!expect!immediate!feedback!when!they!are!operating! a!control.!A!task!that!takes!a!few!seconds!should!display!the!progress!and!show! an!explanatory!message.!!

4.1.3! Constraints!

The!user!should!feel!in!control,!the!app!should!not!make!decisions!for!them.! Apple!mentions!that!it!is!good!to!have!combination!of!letting!the!user!make! almost!all!the!decisions!and!warning!them!of!dangerous!outcomes.!iOS!users! expect!to!have!confirmation!and!the!option!to!cancel!an!action.!

! 14! 4.1.4! Mapping!

On!iOS!devices!it!is!very!important!to!have!a!navigation!bar.!On!the!navigation! bar!there!should!be!a!button!to!go!back!to!the!previous!view!and!it!should!be!on! the!left!side!of!the!bar.!!If!the!developer!wants!to!create!a!customized!back! button!it!still!should!look!like!a!back!button,!for!example,!it!must!have!a!pointy! side!so!the!user!instantly!knows!it!is!a!back!button.!!

4.1.5! Consistency! iOS!provides!a!lot!of!standard!UI!elements!that!the!developer!can!use.!It!is!very! important!to!know!that!the!user!expects!the!standard!UIs!to!behave!as!they!do!in! the!built!in!apps.!In!a!view!the!developer!needs!to!focus!on!what!task!the!user!is! using!and!take!away!the!unnecessary!details.!They!also!point!out!that!everything! in!the!app!that!looks!the!same!should!do!the!same!operations.!Apple!provides! buttons!and!icons!with!description!to!make!it!easier!for!the!developer!to!keep!a! consistent!app.!

4.1.6! Affordance!

Apple!provides!a!lot!of!information!about!their!UI!elements!and!how!they!should! behave.!So!when!it!comes!to!customizing!elements!it!is!important!to!analyze!the! standard!elements!looks!and!behavior!to!make!it!clear!that!the!customized! element!have!the!correct!affordance.!!

4.2! Design!principles!–!Android!

4.2.1! Visibility!

Android!is!developed!for!a!lot!of!different!screen!sizes,!which!mean!that!icons! need!to!be!made!in!different!sizes.!That!is!why!they!have!a!lot!of!focus!on!sizes!of! icons!and!buttons.!The!developer!cannot!be!sure!how!much!space!that!is! available.!

! 15! 4.2.2! Feedback!

If!something!is!able!to!be!touched!it!is!important!to!visualize!it!to!the!user.! Google!have!a!description!that!shows!how!a!button!should!react!to!different! gestures.!It!is!important!to!react!to!complex!gestures!if!it!is!possible!for!the!user! to!accomplish!them.!

4.2.3! Constraints!

Google!say!that!the!developer!can!make!a!lot!of!decisions!by!himself.!The! developer!has!more!room!to!make!modifications!to!make!their!app!unique.!

4.2.4! Mapping! Usually!on!an!Android!system!you!can!choose!to!have!bars.!These!bars!are! positioned!in!a!certain!places!on!the!screen!and!should!contain!different!things! depending!on!where.!!There!are!three!kinds!of!bars,!main!action!bar,!top!bar,!and! bottom!bar.!!The!action!bar!is!for!hierarchy!the!top!bar!is!for!quick!view!change! and!the!bottom!bar!is!for!expected!actions.!

4.2.5! Consistency!

One!way!to!keep!an!Android!app!consistent!is!to!have!an!action!bar!throughout! the!whole!app.!Google!has,!to!keep!the!app!“Pure!Android”,!a!list!of!dos!and! don’ts!when!it!comes!to!buttons,!icons!and!tab!bars.!!It!is!more!important,!when! customizing!own!UI!elements!in!Android,!to!follow!the!specific!branding!rather! than!following!Google’s!rules!of!consistency.!

4.2.6! Affordance!

Some!Android!devices!have!four!physical!keys,!back,!menu,!search!and!home.! Other!devices!have!three,!back,!home!and!recents.!These!buttons!are!supposed!to! do!certain!tasks,!for!example:!back!button!should!go!back!in!the!app!and!nothing! else.! !

! 16! 4.3! Model!

For!any!system!to!work!with!an!API!a!database!is!needed!to!store!the!data.!The! solution!was!to!build!a!JSON2!API!that!both!apps!can!communicate!with.!The! apps!send!a!JSON!message!with!app!id!and!receive!the!questions!that!are!active! and!have!not!been!voted!on!by!the!id.!It!is!a!way!to!hide!unnecessary!information! and!block!the!user!from!voting!twice!on!the!same!question.!The!JSON!message! that!gets!sent!back!to!the!app!could!look!like!this:!

[

{"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}}

]

That!message!is!loaded!into!an!object!so!that!the!app!can!handle!the!user!input.! The!same!thing!happens!when!vote!choices!are!requested!and!later!when!the! user!has!made!a!choice!on!what!to!vote!on.!The!answers!get!stored!in!a!table!on! the!database!so!that!they!are!easy!to!extract!when!the!result!is!presented.!!

The!database,!Figure!1,!has!four!tables!for!this!function:!voters,!questions,! alternatives!and!vote!records.!Every!time!a!user!throws!a!vote!it!gets!registered! which!voter,!what!question!and!which!alternative!the!voter!chose.!If!somehow! the!user!votes!on!a!question!that!the!user!already!has!voted!on,!it!does!not!get! registered

2http://en.wikipedia.org/wiki/JSON! What?! Which?! Which?!

Figure!1:!Database!structure!

!

!

4.4! View!

The!view!is!considered!to!be!the!user!interface.!This!section!will!be!about!the! different!views!in!the!apps.!

The!app!should!be!able!to!show!voting!options,!but!do!it!in!a!way!so!that!the!user! only!can!select!one!of!them.!Android!and!iOS!have!different!UI!elements!for! selection.!Android!has!spinners!and!radio!buttons.!iOS!has!pickers!and! segmented!controls.!!

4.4.1! Alternatives!

According!to!the!Android!guidelines!the!spinner,!Figure!2,!is!good!for!selecting!a! value!from!a!set!but,!in!default!state,!always!has!a!selected!value.!Having!a!pre! selected!value!may!affect!the!voters!choice.!!

In!iOS,!segmented!control,!Figure!5,!is!good!for!choices!that!are!not!too!many!and! the!content!not!to!differentiating!in!size.!!If!the!sizes!of!the!buttons!are!too! different!it!does!not!keep!the!consistency.!

! The!other!alternative!for!iOS!is!the!Picker,!Figure!3.!The!Picker!can!hold!a! number!of!different!values,!but!the!HIGs!say!that!the!Picker!should!be!used!only! if!the!values!are!familiar!to!the!user.!The!values!are!going!to!be!different!every! time!and!can!be!a!large!number.!Apple!recommends!using!a!table!view!for!large! number!of!choices.!

Radio!buttons!are!good!for!sets!that!are!mutually!exclusive.!iOS!does!not!provide! radio!buttons!but!Android!does,!Figure!4.!The!problem!is!how!make!them!work! in!a!dynamic!view.!

! !

Figure!2:!Android!spinner! Figure!3:!iOS!Picker!

Figure!4:!Android!radio!buttons! Figure!5:!iOS!Segmented!controls!

! 19! 4.4.2! Solution! iOS!have!table!views;!the!HIGs!recommend!using!them!to!display!a!lot!of!data.!It! is!important!that!the!“question!creator”!is!able!to!create!a!question!with!as!many! vote!options!as!wanted.!Because!of!that,!there!was!not!an!option!to!have!a!fixed! number!of!buttons!on!the!layout.!The!buttons!would!have!to!be!created!when!the! question!is!loaded.!The!question!needs!to!be!stored!in!a!database!and!the! applications!need!to!load!the!question!from!the!database.!

For!iOS!the!solution!was!to!combine!image!layout!with!a!table!view.!!Table!views! are!customizable.!!

According!to!the!iOS!HIGs!the!user!wants!to!feel!in!control.!If!the!list!contains!a! set!of!choices,!the!user!selects!one!of!them!and!a!confirm!view!appears,!the!user! will!probably!perceive!the!feeling!of!loosing!that!control.!!Instead!of!using!the! table!view!as!a!regular!table!view,!taking!the!flexibility!of!it!and!using!it!together! with!another!function!could!fix!the!problem.!

An!original!table!view!contains!only!a!text!label.!By!adding!an!image!view!that! changes!image!when!the!cell!is!selected!the!user!will!perceive!it!as!selected!and! still!be!able!to!change!the!selection.!This!will!give!the!user!more!control!over!the! choices.!!Rounding!the!corners!and!separating!the!alternatives!makes!it!clearer! that!they!are!different!choices.!The!question!cell!always!needs!to!be!on!the!top,! because!the!first!thing!the!user!sees!is!the!top.!It!is!twice!the!size!so!it!can!fit!the! question!text!and!so!that!the!user!does!not!mistake!it!for!a!choice.!!

When!the!selection!is!made!the!cell!changes!color!and!the!radio!button!gets! selected.!If!there!are!more!than!four!choices!the!user!has!to!scroll!to!see!the!rest! of!the!alternatives.!A!vote!cell!is!always!at!the!bottom!of!the!table!view!for! confirmation.!

!

! Figure!6:!Table!view!cell!

! 20! Android!has!something!called!list!views,!Figure!7.!These!list!views!are!similar!to! those!of!iOS.!Some!customization!needs!to!be!done!here!as!well.!Android!have!a! UI!element!called!radio!button.!So!instead!of!having!an!image!view!that!changes! image,!the!radio!button!were!placed!there.!As!in!iOS!the!question!cell!is!twice!the! size!as!the!rest!of!the!cells.!The!border!lines!on!the!cells!are!a!little!thicker!as!well! as!the!text!in!them.!This!gives!it!a!little!more!Android!feeling.!The!voting!cell!is! placed!at!the!bottom!and!has!a!little!more!space!so!that!it!is!not!mistaken!for!a! choice!cell.!

!

!

!

!

!

!

!

!

! Figure!7:!List!view!

!

The!app!has!to!be!able!to!handle!more!than!one!question.!There!can!be!several! questions!available!and!active,!so!the!best!way!to!display!those!is!on!a!list!before! the!voting!list,!Figure!8!and!9.!This!list!is!the!first!thing!that!the!user!sees.!The! user!will!only!see!the!questions!that!are!active!and!available!to!vote!on.!On!iOS,! when!another!view!is!associated!with!the!row!it!is!recommended!to!use!a! disclosure!indicator.!!

! 21! When!a!user!has!decided!on!a!choice,!a!confirm!view!displays!to!the!user!that!the! vote!is!complete!and!gives!the!choice!to!vote!on!another!question.!

4.5! Controller!

The!controller!handles!all!the!input!from!the!user!as!well!as!controlling!the! model.!When!the!question!view!loads,!the!controller!sends!a!request!to!the! server!with!an!application!ID!and!the!server!sends!a!JSON!response.!The!user! will!only!see!the!questions!that!are!available!at!the!time.!!The!controller!tells!the! view!to!display!a!list!with!the!questions!that!were!received.!!The!user!selects!a! question,!the!controller!sends!a!JSON!request!to!the!server,!the!controller!then! receives!a!JSON!response!and!tells!the!view!to!show!the!question!and!the!right! number!of!alternatives!in!a!choice!list.!If!the!user!made!a!mistake,!e.g.,!on!iOS,! there!is!a!button!on!the!navigation!bar!that!makes!it!possible!to!go!back!and! select!another!one,!on!Android!the!user!can!use!the!back!button!to!navigate!back! to!the!question.!!!

Figure!8:!iOS!First!view! Figure!9:!Android!First!view!

!

! 22! Since!the!choice!list!is!customized!on!both!platforms!it!has!to!be!as!intuitive!as! possible!to!make!the!choice!even!if!it!is!not!a!standard!list.!The!user!selects!a! row,!the!radio!button!indicates!that!the!row!has!been!selected,!on!iOS!the!row! gets!a!standard!blue!selection!color!and!on!Android!the!row!does!not!change! color!because!the!focus!is!on!the!radio!button.!!

Figure!10:!iOS!Cell! Figure!11:!Android!Cell!

!

When!the!vote!row!is!selected!the!controller!checks!if!a!choice!has!been!made.!If! not,!an!alert!view!pops!up!and!tells!the!user!to!make!a!choice.!If!a!choice!is! selected!it!sends!the!choice!to!the!server!and!tells!the!view!to!show!the!confirm! view,!Figure!12!and!13.!In!the!confirm!view!the!user!can!go!back!to!the!questions! view!but!not!the!choice!view.!If!the!back!button!on!Android!is!used!the!questions! view!is!displayed.!On!iOS!there!is!a!back!button!on!the!navigation!bar.!There!is! also!a!button!on!both!platforms!that!sends!the!user!back!to!the!questions!view.!

!

!

!

!

! !

Figure!12:!iOS!Confirm!view! Figure!13:!Android!Confirm!view!

! 23! 5.! Discussion!!

In!this!chapter!I!will!discuss!the!methods!and!the!implementation!that!were!used! in!this!thesis!work.!I!wanted!to!have!a!different!approach!to!my!problem.!There! are!several!other!methods!that!can!be!used!but!I!thought!these!were!interesting.! The!human!interface!guidelines!are!made!to!guide!the!developer!in!the!right! direction,!but!I!think!that!an!application!must!be!tested,!by!usability!tests!and! user!evaluation.!It!was!very!interesting!to!see!the!HIGs!for!Android!and!iOS! because!it!is!something!that!I!have!not!thought!about!earlier!in!my!studies.!

To!hide!questions!from!the!user!that!they!have!already!voted!on,!my!first!idea! was!to!get!a!unique!phone!ID,!but!neither!Apple!nor!Google!allows!you!to!use! that!id,!so!instead!I!received!an!app!id!that!is!unique!for!every!installation.!!

I!underestimated!the!time!it!would!take!for!me!to!learn!to!develop!on!the! platforms!and!understand!the!existing!applications,!as!well!as!the!time!to! understand!the!server!side!of!the!application.!Working!with!two!platforms!at!the! same!time!was!a!little!complicated,!especially!when!there!are!different!rules!to! follow!in!the!HIG.!It!is!easier!to!work!with!Xcode!because!Xcode!feels!more! tailored!and!optimized!to!the!system!and!Eclipse!can!get!a!little!slow.!!For!this! application!there!are!not!many!differences!between!iOS!and!Android!that!you! have!to!think!about.!You!can!use!a!similar!approach!on!both!platforms!and!still! follow!the!HIGs.!But!as!the!application!grows!bigger!the!details!gets!more!crucial.!!

If!we!look!at!creating!customized!table!views,!iOS!has!an!easier!approach!to!the! problem!and!has!predefined!methods!that!are!easy!to!understand.!!

It!looks!like!Android!and!iOS!are!getting!more!and!more!similar!in!their!user! experience!since!Apple!now!have!released!their!latest!update!iOS!7.!With!the! update!comes!a!flat!interface!that!reminds!me!of!the!Android!platform.!Androids! “highDend”!devices!do!not!have!the!physical!buttons!and!I!think!that!in!the!future! the!buttons!are!going!to!be!removed!on!all!Android!devices.!!

! 24! 6.! Conclusion!

In!this!chapter!I!will!try!to!answer!my!research!question:!“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?”!

Android!and!iOS!are!the!biggest!smartphone!operating!systems!out!there.!They! are!constantly!competing!with!each!other.!From!what!I!have!learned!with!this! thesis!project!is!that!they!differ!because!they!want!the!user!to!feel!that!they! belong!somewhere.!It!is!hard!to!point!out!everything!that!is!different,!but!it!is! good!to!know!as!a!developer!that!there!are.!Google!has!managed!to!support! many!different!screen!sizes,!resolutions!and!hardware!so!that!the!OS!can!fit!on! almost!any!device.!It!results!in!more!work!for!the!developer!because!every!image! and!icon!has!to!be!made!in!different!sizes!and!resolutions!as!well.!Apple!on!the! other!hand!only!requires!that!the!images!and!icons!should!be!made!in!two! different!sizes!because!some!of!their!devises!uses!a!retina!display!that!has!two! times!the!resolution!than!a!regular!display.!!!

When!it!comes!to!feedback!they!both!want!the!same!thing,!a!fast!and!responsive! system!that!feels!like!you!are!one!with!the!system.!It!is!hard!for!an!iOS!user!like! me,!which!have!never!used!Android!before,!to!know!how!it!should!feel.!It!is!very! easy!to!just!use!the!same!UI!and!widgets!for!both!platforms.!But!I!think!it!is! important!to!know!that!the!platforms!are!different!and!the!users!think! differently.!When!developing!for!several!platforms!you!should!have!the!same! functionalities,!but!tweak!the!UI!so!it!fits!the!platform.!Often!it!has!to!do!with! were!you!should!place!the!function,!because!the!user!are!used!to!a!certain! pattern!and!if!you!step!out!of!that!pattern!the!user!will!get!confused.!!It!is!easy!to! just!go!with!a!crossDplatform!solution!especially!because!it!is!more!cost!effective! !

! 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]!Alasdair!Allan,!Learning!iOS!Programming,!Second!Edition,!O'Reilly!Media,! 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).!Interaction!Design:!Beyond!HumanD Computer!Interaction,!John!Wiley!&!Sons,!ISBN:!978D0D470D66576D3!

[11]!Lehtimäki!J.!(2013).!Smashing!Android!UI,!First!Edition,!John!Wiley!&!Sons,! ISBN:!978D1D118D38728D3!

!

! 26! [12]!Forlizzi,!J.!&!Ford,!S.!(2000).!The!building!blocks!of!experience:!an!early! framework!for!interaction!designers,!ACM!

[13]!Glenn!E.!Krasner!&!Stephen!E.!Pope!(1988).!A!cookbook!for!using!the!modelD view!controller!user!interface!paradigm!in!SmalltalkD80,!ParcPlace!Systems!

[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]!ISO!9241D11:1998,!Ergonomics!of!Human!System!Interaction:!Guidance!on! usability,!International!Organization!for!Standardization!

[17]! https://developer.apple.com/library/iOS/documentation/userexperience/conc eptual/MobileHIG/index.html!

[18]!https://developer.android.com/design/index.html!

!

!

! 27!