Introduktion

Denne applikation bygger på kurset iOS Programmering og har til formål at give undertegnet forståelse og kendskab til iOS programmering og Swift. Applikationen har endvidere i mindre grad fokus på user experience og usability, ligesom prototyper i en tidlig fase har været med til at udfase slutproduktet. For at gøre app’en nem at bruge, tages der i designet udgangspunkt i brugerens mentale model. Applikationen er et quizspil til iPhone, hvor brugeren skal gætte en sang, der bliver afspillet. Brugeren får 4 valgmuligheder og skal gætte sangen på tid. Jo hurtigere sangen gættes, jo flere point får man. Gættes der forkert, får man 0 point. En omgang af fem sange er et “spil”, hvorefter man til sidst bliver fremvist for sine point.

Idéudvikling

Under kurset blev der introduceret til AudioKit, som gav et udgangspunkt for idéudviklingen. Efter kursets portefølje fra udviklers synspunkt blev anskuet som et sandkasseprojekt (her forstås en applikation til at afprøve Swift) blev der ikke brugt lang tid på at finde en vej at gå ned ad, hvoraf en musikquiz-applikation blev bestemt. Uden at have tjekket markedet var det vidst, at der allerede fandtes en række lignende produkter, så nu skulle der brainstormes på, hvordan denne applikation skulle distancere sig. Projektet artede sig hurtigt i opstartsfasen, hvoraf følgende idé blev konstrueret:

En musikapplikation til iPhone i genren quiz, der skal tage udgangspunkt i coversange fra YouTube. Brugeren skal ud fra nogle interaktionsmuligheder gætte sangen så hurtigt som muligt og få point herefter.

Nu skulle der en konkurrentanalyse til for at se, hvad konkurrenter på AppStore gjorde godt og dårligt ift. design, interaktion og juiciness.

Konkurrentanalyse

I søgningen efter musikquizapplikationer blev det understreget, at antallet af musikquizapplikationer er stort. To af disse blev hentet ned og analyseret nærmere.

Song Quiz

Screenshot af Song Quiz
Screenshot af Song Quiz

Song Quiz er et spil, hvor det handler om at gætte den rigtige artist eller sangtekst. Du får givet fire valgmuligheder, og designet ligner “Hvem vil være millionær?” med svarmuligheder opstillet i 2 x 2. En timer i højre hjørne indikerer, at du svarer på tid og en __-lignende antyder at heppe på dig. Til venstre er der tre muligheder for hjælp, mens der også er en afslutknap, en progressbar og en fremstilling af dine “coins” i spillet, som kan bruges på at købe nye kategorier.
Her gør spillet det godt:
– Man behøver ikke vide præcis, hvordan Alanis Morissette eller Rugsted og Kreutzfeldt staves, da du får mulighederne vist.
– Man får hints i form af fire valgmuligheder.
Her gør spillet det knap så godt:
– Måske for nemt, hvis man er musikkender at udelukker de tre andre svar.

Music Quiz

Screenshot af Music Quiz
Screenshot af Music Quiz

Ligesom Song Quiz tager Music Quiz udgangspunkt i at gætte sange, men modsat Song Quiz så giver Music Quiz ikke svarmuligheder, men i stedet en række bogstaver man skal sætte i den rigtige rækkefølge. Denne form for quiz synes at have vundet indpas på det seneste og altså også her. Her har du også en tilbageknap, en fremstilling af “coins”, og en række hjælpemuligheder. Her skal du dog bruge din coins, ligesom hver sang ses som en “bane” og for at komme videre til næste bane (sang), skal du gætte rigtigt. Der er altså ikke nogen tidsramme.
Dette gør spillet godt:
– Det er udfordrende, da du ikke får det rigtige svar fremvist blandt forkerte.
Dette gør spillet knap så godt:
– Du ved, hvem der har lavet sangen, men kan ikke stave hans navn rigtigt. En irritation der minder om flueknepperi.

Designovervejelser

Konceptuel Model

Der skal designes en applikationen der er nem og forståelig for alle. Brugeren skal kunne gå ind i et spil, vælge kategori af genre (f.eks. pop) og se og nulstille high score. Når man går ind i et spil, får man listet fem sange i streg, som man skal gætte på, hvorefter man får vist en resultatside.

– Applikationen skal være simpel og tage udgangspunkt i folks forståelse af en quiz.
– Den skal kunne generere sange tilfældigt og give tilfældige svar for hver gang.
– Applikationen skal vise og gemme point efter et spil.

Designproblematikker
I starten var det meningen, at man skulle kunne gætte sange, som blev afspillet via iTunes’ 90 sekunders preview. Mulighederne for implementation af dette blev undersøgt, men syntes for svært til det nuværende Swift-kendskab. En beslutning om at bruge coversange fra YouTube blev taget, hvor man ved at bruge youtube-embed, kunne afspille videoerne. Efter implementation af dette viste der sig nogle andre problemer. For det første var idéen, at videoen skulle afspilles i et mindre område af skærmen, hvor man nedenunder kunne se og vælge en svarmulighed, men på iPhone kan man ikke afspille videoer uden at den går i fuld skærm. Dette gjorde, at man ikke kan kunne vælge et svar uden at skulle trykke “Luk” på videoen, hvorefter den tilmed også ville stoppe med at spille. Dette er ud fra et user experience-syn ikke optimalt og heller ikke særlig brugervenligt. Et andet problem viste sig, da sangen/videoen automatisk skulle afspilles. Apple har grundet brugen af data for at vise videoen ikke gjort det muligt at auto-afspille YouTube-videoer. Brugeren skal selv trykke på play, hvorefter videoen afspilles. Hertil kommer info om videoen også bliver vist, hvilket viser svaret.

Brugerens mentale model

En af de mest kendte quizzer er tv-konceptet “Who wants to be a millionaire?”, hvor det gælder om at svare rigtigt på 15 spørgsmål for at vinde en million. Her får man fire svarmuligheder, hvoraf én er rigtig og tre er forkerte. Ligeledes får man tre muligheder for hjælp undervejs. Dette koncept er pga. programmets popularitet en kendt quizmodel. Blandt andet benyttes denne model, da det så er forventet at brugeren hurtigt opfatter og forstår, hvad den skal gøre.

Prototyper

Første prototype (POP)

Den første prototype blev lavet i POP, som er en applikation til bl.a. iPhone, der kan simulere en applikation, hjemmeside mv. Her blev der lavet mock-ups af forsiden, valg af kategori, et spørgsmål og resultatsiden. Dermed kunne en simulation af applikationen testes hos venner og familie, og som forventet havde testpersonerne en mental model til at forstå konceptet uden vanskeligheder. Der var nu grobund til at lave en funktionel prototype.

QuizApp - 1QuizApp - 2QuizApp - 3QuizApp - 4QuizApp - 5

Anden prototype (funktionel)

Efter en succesfuld prototype i POP blev der skabt en enkelt applikation, der kunne det samme som den foregående prototype med knapper til at skifte imellem siderne. Herefter blev der langsomt bygget ovenpå:

– Sange blev tilføjet med navn og artist. Herefter kunne der tilføjes spørgsmål som: “Hvad er titlen på denne sang?”, der automatisk blev genereret. – Så blev der tilføjet point i form af rigtige og forkerte spørgsmål. Ligeledes blev der lavet en resultatside, hvor man fik vist sine point. – Så blev pointene gemt på telefonen, så High scoren blev gemt til næste gang, man spillede. Her blev der også tilføjet muligheden for at nulstille den. – Point, i form af hvor hurtigt man svarer, blev tilføjet, så en tekst tæller ned fra 1000, indtil man svarer. Ligeledes blev der tilføjet grønne og røde labels til når man svarede rigtigt og forkert.

Kodeudsnit

Model View Controller

Modellen har kontakt til databasen på telefonen, hvori der gemmes highscoren. Dataen af sange var i første omgang oplagret i et multidimensionelt array, hvori der var filnavnet på sangen, titlen og kunstneren. Senere blev det ændret til et simpelt array, hvori filnavnet er, som så bliver delt op i kunstner og titel. Dette kan senere hen oplagres i en ekstern database, hvor fra man kan hente data for at skåne telefonens lagerplads.

Applikationen har en række views, der vises for brugeren heraf: en forside, en kategoriside, highscore, indstillinger, en resultatside og selve gameplayet. Hvert view er bundet op af en controller.

View

Hvert view har en controller, der styrer interaktionen, men den controller, der styrer gameplayet er den interessante. Denne controller gør blandt andet følgende: genererer sange, viser og afspiller sange, opsamler score, afvikler feedback til brugerne. Dette kan ses i kodeudsnittet herunder.

Kodeeksempler
Sangene bliver lagret i et array [1] og deles senere op for at fjerne – og .mp3 [2]:

[1]
    var songDatabase: [String] = [
        "Taylor Swift - Style.mp3",
        "Flo Rida - Whistle.mp3",
        "Conor Maynard - Can't Say No.mp3",
        "Justin Bieber - Boyfriend.mp3",
        "Carly Rae Jepsen - Call Me Maybe.mp3",
        "Train - Drive By.mp3",
        "Maroon 5 - Payphone.mp3",
        "Nicki Minaj - Starships.mp3",
        "Jason Mraz - I Won't Give Up.mp3",
        "Taylor Swift - Blank Space.mp3",
     ]
[2]
        let correctSongArtist = songsToAnswer[questionCount-1].componentsSeparatedByString(" - ")
        let correctSongTitle = correctSongArtist[1].componentsSeparatedByString(".")

Spørgsmålene i quizzen har mulighed for at få implementeret forskellige spørgsmål såsom titlen, kunstneren, genre eller lignende. Lige nu er applikationen dog kun i stand til at stille titel-spørgsmål. For at den samme sang ikke kommer flere gange i samme spil, bliver de fem svar genereret i starten i et array[3]. Herefter kan vi lave falske svar udfra det rigtige svar i hver runde [4]:

[3]
    func generateQuizAnswers() {
        var randSongs = songDatabase
        randSongs.shuffleInPlace()
        for i in 0...4 {
            songsToAnswer.append(randSongs[i])
        }
    }

 

[4]
    func createQuestionTitle() -> (String, String, String, String, String, String) {
        
        let question = "Hvad er titlen på denne sang?"
        var randSongs = songDatabase
        randSongs.shuffleInPlace()
        var songArray = [String]()
        let correctSongArtist = songsToAnswer[questionCount-1].componentsSeparatedByString(" - ")
        let correctSongTitle = correctSongArtist[1].componentsSeparatedByString(".")
        songArray += [correctSongTitle[0]]
        let indexOfCorrectSong = randSongs.indexOf(songsToAnswer[questionCount-1])
        randSongs.removeAtIndex(indexOfCorrectSong!)
        
        for i in 0...3 {
            let songArtist = randSongs[i].componentsSeparatedByString(" - ")
            let songTitle = songArtist[1].componentsSeparatedByString(".")
            songArray += [songTitle[0]]
        }
        
        return (songsToAnswer[questionCount-1], question, songArray[0], songArray[1], songArray[2], songArray[3])
    }

Sangene bliver afspillet vha. Apples AVAudioPlayer, som er simpel at bruge:

        let path = NSBundle.mainBundle().pathForResource(titles.0, ofType: nil)
        let url = NSURL(fileURLWithPath: path!)
        do {
            let sound = try AVAudioPlayer(contentsOfURL: url)
            AVPlayer = sound
            sound.play()
        } catch {
            
        }

Slutprodukt

Skærmbillede 2015-12-04 kl. 00.16.16Skærmbillede 2015-12-04 kl. 00.16.42 Skærmbillede 2015-12-04 kl. 00.16.58

Konklusion

Med udgangspunkt i at det er det første iOS projekt, synes det at være et værdigt funktionel slutprodukt. Det opfylder kravet om at være en quiz, hvor man gætter sange. Den konceptuelle model fungerer for testpersonerne, mens den mentale model ligeledes matcher. Den første prototype i POP gav en pejlning om designet til den første funktionelle prototype, der senere hen blev udvidet, og som til sidst endte som slutproduktet. Det mangler dog endvidere flere sange – eventuelt via en ekstern database, og så fylder de nuværende sange meget ift. hvad der er brug for. Ligeledes kan der tilføjes et community, hvor man kan logge på med en bruger og se sine Facebookvenner. Ydermere vil multiplayer af en art gøre applikationen sjovere. Til sidst skal det testes af brugerne igen.

Perspektivering

En masse features kan i fremtiden implementeres i applikationen heraf:

– Multiplayer: Gøre det muligt at spille 1v1 ved enten at spille “live” imod hinanden over Bluetooth/wifi eller ved at den ene får spørgsmål og svare, hvorefter den anden får de samme spørgsmål og point bliver sammenlignet.
– Knapper med farve: gøre designet mere imødekommende med knapper rundt om svarmulighederne
– iCloud synkronisering: give brugeren mulighed for at gemme sin highscore i iCloud.
– Afspilning af musik fra database / slipper for at spilde lagerplads på telefonen: gøre det muligt nemt og enkelt at tilføje og ændre sange og spørgsmål ved at have dem i en database, hvorefter brugeren henter spørgsmål fra den.
– Juiciness: give brugeren noget credit, når den har rigtigt ved f.eks. en masse konfetti, fanfare og fyrværkeri.

Dropbox-link (ZIP): https://dl.dropboxusercontent.com/u/4533554/CoverSongQuiz.zip