Embed Size (px)
Citation preview
IT 14 020
Examensarbete 15 hpMars 2014
Mobile audience response system
Jonatan Moritz
Institutionen för informationsteknologiDepartment of Information Technology
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
Abstract
Mobile audience response system
Jonatan Moritz
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.
Tryckt av: Reprocentralen ITCIT 14 020 Examinator: Olle GällmoÄmnesgranskare: Lars OestreicherHandledare: Stefan Carlsson
!!!!!!!!
! !
! 2!
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.!
! !
! 3!
! !
! 4!
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!
! !
1http://utnarm.utn.se! 6!
!
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.
!
! 7!
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?!
! !
! 8!
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]!!
! 9!
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.!!
! 10!
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.!
! 11!
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.!
! !
! 12!
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].!!
! 13!
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.!
!
! !
! 14!
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.!
! 15!
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.!
! 16!
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.! !
2http://en.wikipedia.org/wiki/JSON!
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
!
!
!
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.!
Which?!What?!
Which?!
Figure!1:!Database!structure!
! 19!
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!
! 20!
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!
! 21!
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.!
!
!
!
!
!
!
!
!
!
!
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.!!
Figure!7:!List!view!
! 22!
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!
! 23!
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.!!
!
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!10:!iOS!Cell! Figure!11:!Android!Cell!
Figure!12:!iOS!Confirm!view! Figure!13:!Android!Confirm!view!
! 24!
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.!!
! 25!
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! !
! 26!
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!
!
! 27!
[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!
!
!
