CMDDES01-7 DESIGN FOR MOBILE. Design for Mobile. Gemaakt door: Dhr. Justus de Bruin ( ) Dhr. Max Otten ( )

CMDDES01-7 DESIGN FOR MOBILE

Design for Mobile Gemaakt door: Dhr. Justus de Bruin (0895975) Dhr. Max Otten (0888022) OP3, 2015/2016 Klasnummer: CMD2B 

!1


INHOUDSOPGAVE Inleiding……………….........................blz. 3 User Journey Map #1………………….blz. 5 User Journey Map #2……………….…blz. 11 Patronen & Percepties…………….......blz. 17 Potentiële Ideeën…………..................blz. 20 App.....................................................blz. 23 Concept..............................................blz. 24 Technische randvoorwaarden..............blz. 25 Opsomming Content...........................blz. 26 Sitemap..............................................blz. 28 Schetsen v.01.....................................blz. 29 Schetsen v.02 .......……………………blz. 34 Wireframes v.03..................................blz. 40 Wireframes v.04 (definitief)...................blz. 43 Prototype............................................blz. 54 Patterns..............................................blz. 55 Gestures.............................................blz. 59 Bronnen..............................................blz. 62 Bijlagen...............................................blz. 63

!2


INLEIDING Voor het vak Design for Mobile hebben wij een opdracht gekregen om een app of een responsive website te maken voor een type bioscoopganger. Wij hebben de ‘Film Critic’ gekregen. Voor dit type filmganger moeten we dus een concept ontwerpen. Hieronder heb ik een samenvatting gemaakt van de kenmerken van de gegeven type gebruiker. Bij dit type gebruiker kan je ook eventuele opdrachtgevers koppelen. Een opsomming van de opdrachtgevers staat onder de kenmerken van de ‘Film Critic’.

KENMERKEN ‘FILM CRITIC’ -

Schrijft teksten voor magazines, kranten, catalogussen, blogs en social media. Gelimiteerde tijdbesteding. Heeft de werkgever altijd in haar hoofd. Kiest zelf de bioscoop uit die de beste beleving geeft. Wordt vaak uitgenodigd voor speciale premières en evenementen om andere filmakers te ontmoeten. Leest veel over films en volgt het proces van de aankondiging van de film tot aan de premiere. Kijkt alle films (niet alleen de films die ze leuk vindt). Kijkt alle films minstens 2 keer en maakt aantekeningen. Zoekt informatie, statistieken, etc. op.

BESCHRIJVING DOELGROEP De doelgroep die wij willen aanspreken met ons product zijn vooral de professionele filmcritici die in dienst zijn bij op film gerichte bedrijven zoals Filmvandaag. Dit zijn de bekende recensenten die uitgenodigd worden door filmmaatschappijen om hun nieuwe film te bekijken en vervolgens te recenseren. Zij bekijken de film voornamelijk op voor hun georganiseerde gelegenheden en hoeven hier nergens voor te betalen. Het kan ook voorkomen dat ze uitgenodigd worden voor premières. Hier geldt ook dat ze nergens voor hoeven te betalen. Er is nog een andere vorm van critici die niet onze hoofddoelgroep is, maar die we tijdens het proces wel in ons achterhoofd willen houden. Dit zijn de freelancers die hun recensie verkopen aan bedrijven, kranten en websites. Voor deze critici worden meestal niet speciale voorstellingen georganiseerd. In plaats daarvan zijn zij meer te vinden bij de eerste voorstellingen in normale bioscopen. De tickets voor de film moeten ze zelf betalen en hetzelfde geldt voor het eten en drinken dat ze eventueel kopen. Het proces van een film bezoeken gaat dus iets anders in zijn werk, maar het recenseren is gelijk. !3

POTENTIËLE OPDRACHTGEVERS -

IMDB Filmtotaal Filmvandaag Volkskrant Telegraaf Arthouse filmrecensies.tv Moviesnet Moviemeter Cinemagazine Filmkrant Rotterdams Filmfestival Moviescene

USER JOURNEY MAP

!4

USER JOURNEY MAP #1

Deze User Journey Map gaat over een filmcriticus die al bij een opdrachtgever werkt en een uitnodiging krijgt om een première bij te wonen.

Voorbeleving Introductie

Aankondiging

Teaser trailer

Stakeholder

Filmmaatschappij

Filmmaatschappij

Emoties

Verrassing, enthousiasme


Channel

Email,Twitter

Youtube, IMDB

Middelen

Smartphone, tablet, pc


Context

Thuis, werk, onderweg


Achtergrond info

Productie volgen

Regisseur achterhalen

Acteurs opzoeken

Aantekeningen maken

Stakeholder

Filmmaatschappij

-

-

-

Emotie

Interessant

Interessant

Interessant

Interessant

Channel

IMDB, Twitter

IMDB

IMDB

-

Middelen




Notitieblok

Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Verdieping

Trailers bekijken

Prequels bekijken

Stakeholder

Filmmaatschappij

Filmmaatschappij

Emotie

Enthousiasme, geïnteresseerd

Enthousiasme

Channel

YouTube

-

Middelen


Smartphone, tablet, pc, DVD, Blu-Ray

Context

Thuis, werk

Thuis, werk

Keuze

Uitnodiging(en) ontvangen

Bioscoop kiezen

Datum kiezen

Tijd kiezen

Stakeholder

Distributeur/bioscoop

Bioscoop

Bioscoop

Bioscoop

!5

Emotie:

Enthousiasme

Serieus

Serieus

Serieus

Channel

E-mail, post

Site van bioscoop

Site van bioscoop Site van bioscoop

Middelen

Smartphone, tablet, pc, brievenbus



Context

Thuis, werk

Thuis, werk

Thuis, werk

Reizen

Vervoersmiddel kiezen

Naar bioscoop gaan

Aan komen

Stakeholder:

Vervoer

Vervoer

Bioscoopmedewe Bioscoopmede rker werker

Emotie

Bedachtzaam

Spanning

Spanning

Channel

9292, OV

9292, OV

-

Middelen

Vervoersmiddel

Vervoersmiddel

-

Legitimatiebew ijs (pasje)

Context

Vervoersmiddel, tijdstip


Vervoersmiddel, tijdstip, gebouw

Gebouw, ingang


Legitimeren

Geïrriteerd

Midden beleving Voorbereiding

Introductie lezen Kijken over hoe lang de film begint

Eten/drinken halen

3D-bril regelen

Met filmcritici praten

Jas uitgeven

Stakeholders

Bioscoopmedew erkers

Bioscoopmed ewerkers, andere filmcritici

Bioscoopm edewerkers , andere filmcritici

Andere filmcritici

Bioscoop medewer ker

Emoties

Spanning, enthousiasme

Spanning

Relaxed

Geïrriteerd

Relaxed

Wantrou wend

Channel

Digitaal (?)

-

-

-

-

-

Middelen

Introductiemap

Informatiebor den

Eten, drinken, 3D-bril bar

-

Nummertj e

Context

Foyer, rumoerig, Foyer, slecht licht rumoerig

Foyer, rumoerig

Foyer, rumoerig

Foyer, rumoerig

Garderob e

Naar plek toe

Zaal zoeken

In de rij staan

Stoel zoeken

Jas uitdoen 3D-bril opzetten

Naar de zaal lopen

!6

Stakeholders

Bioscoopmedew Andere erkers filmcritici

Andere filmcritici

Andere filmcritici, bioscoopm edwerker

Bioscoopm edewerker

-

Emotie:

Verwarring

Spanning

Geïrriteerd

Verwarring, geïrriteerd

Opluchting

-

Channel

-

-

-

-

-

-

Middelen

Informatieborde n

-

-

-

-

3D-bril

Context

Drukte, ambiance

Drukte, ambiance

Drukte

Chaos

-

-

Movietime

Voorstukjes kijken

Film kijken

Aantekeninge Eten/ n maken drinken

Stakeholders

Sponsoren, Filmmaatscha filmmaatschappi ppij j

Andere filmcritici

Filmmaatsc happij

Emoties

Afwachtend, gefocust

Serieus, kritisch, andere emoties afhankelijk van de film


Genieten


Channel

-

-

-

-

-

Middelen

-

Aantekeninge nblok, 3D-bril

Aantekeninge Eten, nblok drinken

Context

Filmzaal, licht, geluid

Filmzaal, licht, Filmzaal, geluid licht, geluid



Pauze

Mobiel checken

Met andere critici praten

WC bezoeken

Eten/ drinken

Notities maken

Stakeholders

-

Andere filmcritici

Bioscoopmed ewerker

-

-

Emotie

Relaxt

Serieus, relaxt

Opgelucht

Relaxt

Serieus

Channel

Facebook, Twitter, IMDB

-

-

-

-

Middelen

Mobiel

-

WC

Eten, drinken

Notitieblok

Context

Filmzaal

Filmzaal, ambiance

WC-stallen

Filmzaal

Filmzaal, licht

Toegift

Aantekenin genblok

!7

Na de film

Naborrelen

Naar huis gaan

Stakeholders

Bioscoopmedew erker, andere filmcritici

Emotie

Relaxt, serieus, voldoening of teleurstelling

Relaxt, voldoening of teleurstelling

Channel

-

9292, OV

Middelen

-

Vervoersmidd el

Context

Foyer, ambiance

Vervoersmidd el

Nabeleving Navolging

Nadenken

Gevoel beschrijven

Film opnieuw bekijken

Soundtrack opnieuw luisteren

Stakeholders -

-

Filmmaatscha ppij

FIlmmaatscha ppij, artiest

Emotie

Nostalgisch

Afhankelijk van de film

Afhankelijk van de film, kritisch

Afhankelijk van de soundtrack/ film

Channel

-

-

Internet

Youtube, Spotify

Middelen

-

Papier, Laptop, Tablet

Tablet, pc


Context

Thuis

Thuis, werk

Thuis, werk

Thuis, werk

Extra info opzoeken

IMDB opzoeken

Interviews bekijken

Acteurs interviewen

Regisseurs interviewen

!8

Stakeholders IMDB

Acteurs, regisseurs

Acteurs

Regiseurs

Emotie

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Channel

IMDB

YouTube, IMDB

-

-

Middelen

PC, PC, smartphone, smartphone, tablet tablet

Recording, notitieblok,


Context

Thuis, werk

Thuis, werk

Thuis, werk, locatie


Verdiepend onderzoek

Budget bekijken

Doelgroep onderzoeken

Social Media (trends) bekijken

Ander werk acteurs opzoeken

Ander werk regisseurs opzoeken

Films vergelijken

Stakeholders Filmmaatsc happij

Doelgroep

Facebook, LinkedIn, Twitter

Acteurs

Regiseurs

Filmmaats chappij

Emotie

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Channel: Device

IMDB

-


IMDB

IMDB

IMDB

Middelen

PC, PC, smartphone, smartphone, tablet tablet, recording

PC, smartphone, tablet


PC, smartphon e, tablet


Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk Thuis, werk

Kritisch zijn

Referenties zoeken

Feiten checken

Connecties leggen

Fouten blootleggen

Aantekenin gen doornemen

Stakeholder

Referenties

IMDB

Connecties

IMDB

-

Emotie

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus, nostalgisch

Channel

-

IMDB

Telefoon

IMDB

-

Middelen


PC, PC, smartphone, smartphone, tablet, telefoon tablet

Notitieblok

Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

!9

Recensie maken

Opzet schrijven

Recensie schrijven

Plaatjes opzoeken

Recensie opsturen

Stakeholders Opdrachtge ver

Opdrachtgev er

Opdrachtgeve r

Opdrachtgeve r

Emotie

Kritisch, serieus

Kritisch, nostalgisch, serieus

Nostalgisch, serieus

Serieus, opgelucht

Channel

Tekstbewerk Tekstbewerki ingssoftware ngssoftware

Google Images

E-mail

Middelen

PC

PC, notitieblok

PC, smartphone, teblet

PC

Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Recensie V2.0 maken

Feedback krijgen

Feedback verwerken

Recensie opnieuw inleveren

Recensie plaatsen

Recensie publiceren


Opdrachtgev er

Opdrachtgeve r

Opdrachtgeve r

Opdrachtge ver

Emotie

Kritisch, geerergerd

Kritisch, serieus

Kritisch, serieus, opgelucht

Opgelucht, tevreden

Euforisch

Channel

E-mail

Tekstbewerki ngssoftware

E-mail

Website, krantenartikel

Website, krantenartik el

Middelen

PC

PC

PC

PC

PC

Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

!10

USER JOURNEY MAP #2 Deze tweede User Journey Map gaat over een freelance filmcriticus die zelf voor een kaartje moet betalen.

Voorbeleving (2) Introductie

Aankondiging

Teaser trailer

Stakeholder

Filmmaatschappij

Filmmaatschappij

Emoties



Channel

Email,Twitter

Youtube, IMDB

Middelen



Context



Achtergrond info

Productie volgen

Regisseur achterhalen

Acteurs opzoeken

Aantekeningen maken

Stakeholder

Filmmaatschappij

-

-

-

Emotie

Interessant

Interessant

Interessant

Interessant

Channel

IMDB, Twitter

IMDB

IMDB

-

Middelen




Notitieblok

Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Verdieping

Trailers bekijken

Prequels bekijken

Stakeholder

Filmmaatschappij

Filmmaatschappij

Emotie

Enthousiasme, geïnteresseerd

Enthousiasme

Channel

YouTube

-

Middelen


Smartphone, tablet, pc, DVD, Blu-Ray

Context

Thuis, werk

Thuis, werk

Keuze

Bioscoop kiezen

Datum kiezen

Tijd kiezen

Kaartje/stoel reserveren

Stakeholder

Bioscoop

Bioscoop

Bioscoop

Bioscoop

Emotie:

Serieus

Serieus

Serieus

Verlangend

!11

Channel

Site van bioscoop

Site van bioscoop

Site van bioscoop Site van bioscoop, telefoonlijn

Middelen




(Smart)phone, tablet, pc,

Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Reizen

Vervoersmiddel kiezen

Naar bioscoop gaan

Aan komen

Kaartje Kopen

Stakeholder:

Vervoer

Vervoer

Bioscoopmedewe Bioscoopmede rker werker

Emotie

Bedachtzaam

Spanning

Spanning

Geïrriteerd

Channel

9292, OV

9292, OV

-

-

Middelen

Vervoersmiddel

Vervoersmiddel

-

Portomonnee, pinpas,

Context



Vervoersmiddel, tijdstip, gebouw

Gebouw, ingang

Midden beleving (2) Voorbereiding

Kijken over hoe lang de film begint

Eten/drinken Kopen

3D-bril regelen

Jas uitgeven

Stakeholders

-

Bioscoopmed ewerkers, andere bezoekers

Bioscoopmed ewerkers

Bioscoopm edewerker

Emoties

Spanning

Relaxed

Geïrriteerd

Wantrouwe nd

Channel

-

-

-

-

Middelen

Informatieborde n

Eten, drinken, bar

3D-bril

Nummertje

Context

Foyer, rumoerig

Foyer, rumoerig

Foyer, rumoerig

Garderobe

Naar plek toe

Zaal zoeken

Naar de zaal lopen

In de rij staan

Stoel zoeken

Jas uitdoen 3D-bril opzetten

!12

Stakeholders

Bioscoopmedew Andere erkers bezoekers

Andere bezoekers

bioscoopm edwerker

Bioscoopm edewerker

-

Emotie:

Verwarring

Spanning

Geïrriteerd

Verwarring, geïrriteerd

Opluchting

-

Channel

-

-

-

-

-

-

Middelen

Informatieborde n

-

-

-

-

3D-bril

Context

Drukte, ambiance

Drukte, ambiance

Drukte

Chaos

-

-

Movietime

Voorstukjes kijken

Film kijken

Aantekeninge Eten/ n maken drinken

Stakeholders

Sponsoren, Filmmaatscha filmmaatschappi ppij j

Emoties

Afwachtend, gefocust



Genieten


Channel

-

-

-

-

-

Middelen

-

Aantekeninge nblok, 3D-bril

Aantekeninge Eten, nblok drinken

Context


Filmzaal, licht, Filmzaal, geluid licht, geluid


Pauze

Mobiel checken

WC bezoeken Eten/drinken

Notities maken

Stakeholders

-

Bioscoopmed ewerker

-

-

Emotie

Relaxt

Opgelucht

Relaxt

Serieus

Channel

Facebook, Twitter, IMDB

-

-

-

Middelen

Mobiel

WC

Eten, drinken

Notitieblok

Context

Filmzaal

WC-stallen

Filmzaal

Filmzaal, licht

Na de film

Naborrelen

Naar huis gaan

Toegift Filmmaatsc happij

Aantekenin genblok Filmzaal, licht, geluid

!13

Stakeholders

Bioscoopmedew erker, andere Bezoekers

Emotie

Relaxt, serieus, voldoening of teleurstelling

Relaxt, voldoening of teleurstelling

Channel

-

9292, OV

Middelen

-

Vervoersmidd el

Context

Foyer, ambiance

Vervoersmidd el

Nabeleving (2) Navolging

Nadenken

Gevoel beschrijven

Film opnieuw bekijken

Soundtrack opnieuw luisteren

Stakeholders -

-

Filmmaatscha ppij

FIlmmaatscha ppij, artiest

Emotie

Nostalgisch

Afhankelijk van de film

Afhankelijk van de film, kritisch

Afhankelijk van de soundtrack/ film

Channel

-

-

Internet

Youtube, Spotify

Middelen

-

Papier, Laptop, Tablet

Tablet, pc


Context

Thuis

Thuis, werk

Thuis, werk

Thuis, werk

Extra info opzoeken

IMDB opzoeken

Interviews bekijken

Acteurs interviewen

Regisseurs interviewen

Stakeholders IMDB

Acteurs, regisseurs

Acteurs

Regiseurs

Emotie

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

!14

Channel

IMDB

Middelen

-

-




Context

Thuis, werk

Thuis, werk



Verdiepend onderzoek

Budget bekijken

Doelgroep onderzoeken

Social Media (trends) bekijken

Ander werk acteurs opzoeken

Ander werk regisseurs opzoeken

Films vergelijken

Stakeholders Filmmaatsc happij

Doelgroep


Acteurs

Regiseurs

Filmmaats chappij

Emotie

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Channel: Device

IMDB

-


IMDB

IMDB

IMDB

Middelen

PC, PC, smartphone, smartphone, tablet tablet, recording





Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk Thuis, werk

Kritisch zijn

Referenties zoeken

Feiten checken

Connecties leggen

Fouten blootleggen

Aantekenin gen doornemen

Stakeholder

Referenties

IMDB

Connecties

IMDB

-

Emotie

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus

Kritisch, serieus, nostalgisch

Channel

-

IMDB

Telefoon

IMDB

-

Middelen


PC, PC, smartphone, smartphone, tablet, telefoon tablet

Notitieblok

Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Recensie maken

Opzet schrijven

Recensie schrijven

Plaatjes opzoeken

Recensie opsturen

Opdrachtgev er

Opdrachtgeve r

Opdrachtgeve r


YouTube, IMDB

!15

Emotie

Kritisch, serieus

Channel

Kritisch, nostalgisch, serieus

Nostalgisch, serieus

Serieus, opgelucht

Tekstbewerk Tekstbewerki ingssoftware ngssoftware

Google Images

E-mail

Middelen

PC

PC, notitieblok

PC, smartphone, teblet

PC

Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Recensie V2.0 maken

Feedback krijgen

Feedback verwerken

Recensie opnieuw inleveren

Recensie plaatsen

Recensie publiceren


Opdrachtgev er

Opdrachtgeve r

Opdrachtgeve r

Opdrachtge ver

Emotie

Kritisch, geerergerd

Kritisch, serieus

Kritisch, serieus, opgelucht

Opgelucht, tevreden

Euforisch

Channel

E-mail

Tekstbewerki ngssoftware

E-mail

Website, krantenartikel

Website, krantenartik el

Middelen

PC

PC

PC

PC

PC

Context

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

Thuis, werk

!16

PATRONEN & PERCEPTIES • Wat we vooral hebben geconstateerd, is dat de channel Device vaak terugkomt gedurende het hele proces. • De emotie “serieusheid” komt vooral tijdens de midden- en de nabeleving voor. Daarentegen komen emoties die met enthousiasme te maken hebben eigenlijk alleen tijdens de voorbeleving. • De bioscoopmedewerker komt vaak voor in de middenbeleving. Dit is voor de catering alsmede voor het bevestigen van de legitimatie van de filmcritici. • De filmcritici komt tijdens de middenbeleving meerdere malen in contact met andere filmcritici. Ze praten met elkaar of zijn met hun eigen ding bezig. • De opdrachtgever wordt op het laatste moment als stakeholder ingezet. • Er moet door het gehele traject heel vaak achtergrondinformatie opgezocht worden. • Voordat de film begint, krijgen alle filmcritici een introductie over de film en overige informatie over de productie, acteurs, etc. Dit wordt aangeboden door de filmmaatschappijen zelf en moeten de filmcritici met een korrel zout nemen. • Een ander patroon is dat de emotie die de filmcritici krijgen afhankelijk is van de film zelf. Dit is belangrijk om te weten omdat ze mede afhankelijk zijn van de emoties die ze krijgen om een goede recensie te schrijven. • In de middenbeleving speelt context vooral een rol. Hier moeten de filmcritici juist alert zijn maar kan er ruis ontstaan door andere filmcritici, licht, locatie, etc. Bij de voor- en nabeleving heeft context een minder grotere waarde. • Het schrijven van de recensie staat volledig centraal in de nabeleving. De filmcriticus gaat hierin namelijk nog extra onderzoek doen zoals het terugkijken van interviews, kijken hoe groot het budget is, etc. Wat belangrijk is, is dat de filmcriticus dan letterlijk teruggrijpt naar het vooronderzoek en de film.

!17

KNELPUNTEN • De bioscoopmedewerker is in een groot deel van de middenbeleving aanwezig. Hij heeft een aantal taken en verantwoordelijkheden die als knelpunten gezien kunnen worden. Bijvoorbeeld het legitimeren en het wegwijs maken in de bioscoop. • De filmcritici kijken vaak eventuele prequels van de film die gerecenseerd moet worden. Hierdoor zijn ze op de hoogte van het verhaal. Dit is bij zulke films een vereiste om tot een goede recensie te komen. Het is echter zo dat deze prequels natuurlijk niet vrij beschikbaar zijn. De filmrecensenten moeten deze films dan kopen of huren. Dit wordt door ons gezien als een knelpunt. Hetzelfde geldt wanneer de film twee keer bekeken moet worden of wanneer de criticus de soundtrack wilt beluisteren. • Het uitzoeken waar de film wanneer draait hoeft niet heel moeilijk te zijn, maar dit is het nog wel. • De context waarin de film bekeken wordt, in de zaal is het donker, maakt het erg lastig om aantekeningen te maken op papier, maar ook op een device. Dit komt omdat een device meestal fel licht heeft. • Tegenwoordig zijn er steeds meer films in 3D opgenomen. Bij deze films worden critici met een extra probleem geconfronteerd. Je kan met de meeste 3D-brillen namelijk niet goed op een mobiel device kijken. Dit is een probleem waar wellicht niet veel aan gedaan kan worden omdat dit hardware afhankelijk is. • Tijdens het reizen van en naar de bioscoop kan er al gewerkt worden aan de recensie. Dit kan alleen wanneer de recensent met bijvoorbeeld te trein gaat. Wanneer hij onderweg is heeft hij geen wifi waardoor hij afhankelijk is van het mobiele netwerk. Dit kan een probleem vormen. • De critici schrijven hun review op hun computer. Een mobiele applicatie is hier te klein voor en typt niet goed genoeg. Dit is een knelpunt voor ons als designers omdat wij hier dus niets voor kunnen ontwikkelen. • Voor het zoeken van achtergrondinformatie bestaan al veel platformen. Bijvoorbeeld IMDB.

!18

KANSEN • Er ligt een kans voor functionaliteiten ofwel features bij de bioscoopmedewerker. Zij kan vervangen worden door de applicatie. • Voor ons als ontwerpers ligt er de mogelijkheid om het probleem van de andere films op te lossen. We zouden dan een platform moeten ontwerpen om op deze behoefte in te kunnen springen. • De donkerte van de bioscoop is een wezenlijk probleem voor elke recensent. Doordat dit zo'n groot probleem is moét het opgelost worden. Het is dus geen kans, maar een plicht. • De recensent kan wanneer hij met het openbaar vervoer naar de bioscoop gaat eventueel werken aan zijn recensie of hij kan informatie opzoeken. Hier ligt een kans om op in te springen. • Er bestaan al platformen voor het zoeken van informatie, maar als we het goed doen kan dit ook positief voor ons zijn.  

!19

POTENTIËLE IDEEËN Wij hebben aan de hand van de patronen, knelpunten en kansen alvast een aantal ideeën en oplossingen gegenereerd. Hieronder een aantal ideeën die bij ons opkwamen toegelicht: • Bij het knelpunt dat de context veranderd doordat de zaal in de bioscoop donker wordt als de film begint, kan er een functie komen in de app die dat als het ware aanpakt. Wij dachten aan een optie die detecteert dat de context donker wordt en daardoor ook het scherm wat donkerder wordt zodat de gebruiker de app beter kan zien. Een soort night-time modus (bijv. net zoals een TomTom in een auto) met een donker achtergrond en doffe, witte letters. • In onze applicatie zou de rol van de bioscoopmedewerker (gedeeltelijk) vervangen kunnen worden. Het wijzen van de weg zou bijvoorbeeld heel makkelijk via de app kunnen d.m.v. een plattegrond of een indoor navigatie feature. Het legitimeren kan eenvoudig geautomatiseerd worden door een trusted-id aan de app te kunnen koppelen waar de uitnodiging voor de première ook mee wordt geverifieerd. • Een kans is om via de app een laatste heads up te krijgen over de film. Even snel de belangrijkste informatie opfrissen voor de film begint zodat je weer helemaal weet waar het over gaat. Op deze manier kan de criticus beter naar de film kijken. Dit is ook handig tijdens het maken van aantekeningen. • Je zou ook een functie in de app kunnen maken waardoor je makkelijk je aantekeningen over kan zetten naar je PC of Mac. • Een andere functie van de app kan zijn dat je een stuk van de audio van de film opneemt, zodat je dit later kunt gebruiken bij het schrijven van de recensie. • De applicatie kan gesynchroniseerd worden met je agenda. Hierdoor weet de app wanneer je bijvoorbeeld naar de film gaat en kan hier dan rekening mee houden met bijvoorbeeld het goede splashscreen te tonen. • De applicatie heeft ook een lijst met alle films waar je voor uitgenodigd bent en waar je al geweest bent. Hierbij zitten ook alle aantekeningen. • Introductiemap kan in de app weergegeven worden.

!20

Op basis van de bovenstaande, potentiële ideeën hebben wij een aantal opdrachtgevers gevonden waarvan wij vonden dat die er eventueel bij zouden kunnen passen, namelijk: • IMDB • Filmrecensiebedrijven (Moviemeter, Filmtotaal, etc.) • Filmmaatschappijen

!21

AANTEKENINGEN CRITICUS Wat gebruikt de filmcriticus om aantekeningen te maken tijdens de film op dit moment? • Notitieblok Dit kan je vervangen door de volgende media: • Mobiele notitieblok • Recording • Filmpje • Introductiemap • Geheugen Deze informatie kan je later meenemen bij het bedenken van een concept.

Een filmcriticus kijkt over het algemeen naar de volgende zeven onderwerpen in een film om die te kunnen beoordelen: • Regiseren • Het script • Cinematografie • Bewerking • Acteerwerk • Productie • Geluid Voor zover we hebben kunnen onderzoeken, maken filmcritics geen opzet om van daar uit aantekeningen te maken tijdens de film. Dit zouden we eventueel wel kunnen implementeren in een concept.

!22

APP Does the mobile app require the use of any special device features? Wij hebben de volgende output nodig: • GPS • Microfoon (speaker) • Agenda Als je kijkt naar alle functies die nodig zijn om bovenstaand concept te realiseren, dan kan je concluderen dat je eerder een native of hybrid app nodig hebt dan een webapp. Een aantal functies waaronder de agenda en camera kan je niet gebruiken bij een webapp. The native app heeft sowieso wel alle functies die nodig zijn. What's my budget? NVT Does the mobile app need to be internet-enabled? De mobiele app moet kunnen functioneren zonder internet. Je moet de mobiele app kunnen gebruiken in een zaal waar je de film bekijkt en niet in alle bioscopen is WiFi aanwezig of toegankelijk. Als je een hybrid of webapp maakt, zou je deze dus niet kunnen gebruiken in de zaal, wat wel de bedoeling is. Een native app zou hier beter in zijn omdat je hiermee zonder internet nog steeds toegang hebt tot de meeste functies. Do I need to target all mobile devices or just certain devices? Bij een webapp kan je makkelijker voor alle toestellen en besturingssystemen ontwerpen en bij een native app kan je meer focussen op een bepaalde besturingssysteem. Wij zijn van mening dat het geen probleem mag zijn dat de mobiele app op meerdere systemen mag werken. Dit vinden wij omdat iedereen de kans moet krijgen om de mobiele app te gebruiken. Je zou dus zeggen dat het daarom makkelijker is om een webapp te creëren in plaats van een native app. What programming languages do I already know? NVT How important is speed and performance? Snelheid is niet per se heel belangrijk voor deze app. De app moet vooral goed werken en duidelijk zijn in de opties die die geeft. Je zou dus kunnen zeggen dat hiermee een webapp beter van pas zou kunnen komen, omdat deze snel (maar minder snel dan een native app) is en goedkoper dan een native app om te maken is. How will this app be monetized eﬀectively? Op een webapp zou je hier reclames kunnen plaatsen voor gerelateerde producten. Bij een native of hybrid app zou je een vergoeding kunnen vragen in de AppStore.  

!23

CONCEPT Ons concept wilt de gebruikers een platform bieden waarmee ze hun werk beter uit kunnen voeren. Het doel is om de app in alle delen van de beleving terug te laten komen zodat het een onmisbare tool kan worden in het werk van een criticus. Er zijn een aantal knelpunten waar ons concept op in springt. Zo kan de applicatie al tijdens het voorbereiden worden gebruikt om de belangrijkste informatie te noteren om vervolgens tijdens de film en bij het schrijven van de recensie er weer bij gepakt te kunnen worden. Dit is meteen te gebruiken voor het opzetje van de review. Dit opzetje kan vervolgens worden aangevuld tijdens het bekijken van de film doormiddel van een invulformulier. Zo'n formulier kost weinig tijd om in te vullen waardoor je niets van de film mist. Ook als je de notities terugleest is dit veel duidelijker en gestructureerder dan zonder. Ook biedt het concept de mogelijkheid om de uitnodigingen te ontvangen voor filmpremières die invloed hebben op het functioneren van de app in een later stadium. Zo is het voor de gebruiker meteen duidelijk wanneer hij waar moet zijn. Deze functie maakt het mogelijk om van de applicatie een identificatiemiddel te maken. Een feature die hier ook aan verbonden is, is het beschikbaar stellen van de de introductiemap, een (half)uur voor aanvang van de film. Zo wordt de onhandige fysieke map overbodig. Een recensent bekijkt veel film en daardoor kan het een zooitje worden. In de app zie je in een handig overzicht de laatste film die je gezien hebt en welke films er op de planning staan. Dit is allemaal mogelijk door de uitnodiging die via de app ontvangen wordt. Wanneer een recensent een film aan het bekijken is ontstaat er een groot probleem, maar ook hier houdt ons concept rekening mee. Het is namelijk erg donker en dit bemoeilijkt het gebruik van zowel een scherm als een traditioneel kladblok. Onze app verandert het scherm automatisch naar filmstand waardoor je geen fel licht meer hebt en pijn aan je ogen geminimaliseerd wordt. Ons concept voorziet de gebruiker van informatie, maar daarnaast biedt het ook een heel goede tool om het recenseren eenvoudiger te maken. Voor de informatie gebruikt de app de reusachtige database van IMDB. Dit is een bestaande database die heel groot is. Dit is voor ons een handig feit want we kunnen van deze informatie gebruik maken en hoeven er niet mee te concurreren. De andere datastroom die we zouden kunnen gebruik is de uitnodiging die de recensenten krijgen. Dit is meestal via de mail. De app zal zowel tijdens het kijken van de film als ervoor en erna gebruikt worden. Tijdens de film is dat natuurlijk in de bioscoop, maar voor en na de film zal dit vooral thuis of op de werkplek van de critici zijn. Onze keuze is gevallen op een native app. Deze sluit het beste aan bij ons concept aangezien er een aantal functionaliteiten nodig zijn die niet bij een native- en een web-app mogelijk zijn. Daarnaast is het aannemelijk dat de gebruiker de applicatie vaak zal gebruiken aangezien het zijn werk is. Ook moet het grootste deel van de app zonder internet kunnen werken.

!24

TECHNISCHE RANDVOORWAARDEN Zoals eerder aangegeven, gaan we een native-app maken. Hier is voor gekozen vanwege het feit dat we een speaker en microfoon nodig hebben in de app. De microfoon en speaker kan je alleen gebruiken bij een native app waardoor we daarvoor kiezen. Ook verwachten we dat de app veel gebruikt zal worden in de midden- en nabeleving. Daardoor is een native app handiger dan een hybrid- of webapp. De volledige checklist staat op pagina 23. Wij zijn van mening dat de app vloeiend moet werken omdat er realtime data wordt verzameld. Er komt een timer die aangeeft wanneer de film precies begint en waar je moet zijn. Ook kan je middels een voice recorder momenten en quotes uit een film opnemen en later terugspelen. Dit moet dus ook tegelijkertijd worden afgespeeld tijdens de film. Omdat de app veel op tijd gebaseerd is, is het belangrijk dat de app ook vloeiend is. Wij vinden daarom dat er eerder een besturingssysteem is waar we voor moeten ontwerpen dan voor meerdere besturingssystemen.

Wij gaan voor het iOS-besturingssysteem ontwerpen.

De functies die in de app worden geïmplementeerd, zijn: Microfoon Speaker Agenda GPS Lichtmeting

Data wordt gehaald van: IMdB Agenda Bioscoop zelf 

!25

OPSOMMING CONTENT

Interactie

Content

Opmerkingen

Uitnodiging verwerken

Premiere-datum ontvangen; Hoe gaat de freelance Aanwezigheid aanchecken; filmrecensent hier mee om? Bijgevoegde Informatie opzoeken; Timer laten aftellen; Locatie bioscoop zien; Planning maken; Legitimatie opstellen; De film in de filmlijst laten verschijnen; Alvast de introductie lezen; Notificatie bekijken;

Aantekeningen maken

Opzet aantekeningen maken; Opzet linken aan de film; Aantekeningen aanzetten; Licht dempen; Aantekeningen doorsturen naar je PC; Aantekeningen maken; Voice recorder aanzetten; Voice recorder terugspelen;

Hoe zorg je ervoor dat andere filmcritici er geen last van krijgen?

!26

CONTENTOVERZICHT • Laadscherm • Inlogscherm • Overview • Notes • Voice recorder (POI) • Notities maken • View

• List • Lijst met bekeken films • Gelinkte notities • Introductiemap

• Upcoming events • Kalender • Intro films • Introductiemap

• Bioscoop kiezen • Locatie (incl. route) • Tijden

• Legitimatiescherm

!27

SITEMAP 

!28

SCHETSEN V.01 

!29

!30

!31

ANNOTATIES SCHETSEN V.01 A. Laadscherm. B. Invulvlak om naam in te vullen. C. Invulvlak om wachtwoord in te vullen. D. Checkbox om aan te geven om ingelogd te blijven. E. Knop om in te loggen. F. Knop om aan te geven dat je je wachtwoord bent vergeten. G. Het logo. H. Hamburger-menu waar verschillende opties in staan zoals instellingen, uitloggen, legitimatie, etc. I. Upcoming Events. Dit is een lijst dat aangeeft naar welke filmpremières je bent uitgenodigd. De meest linker in de horizontale lijst is de filmpremière die als eerstvolgende eraan komt. Er kunnen hier maximaal 4 films staan. I1. Als je op deze knop klikt, ga je naar scherm 4. Hier staat een grotere lijst met meerdere films waar je voor uitgenodigd bent. J. Zoekknop om te zoeken naar films. K. De volgende in de List. Zie annotatie L. L. Dit is de List. Hier staan films die je hebt gezien en een recensie over hebt geschreven. Je ziet een afbeelding en de naam van de film. Als je naar links op naar rechts swipet, kom je andere films tegen die je ook hebt gezien. M. Knop om aan te geven dat als je naar beneden swipet, je meer informatie over de desbetreffende film ziet. N. Getallen om aan te geven hoeveel films je hebt bekeken en op welke film je nu bent. O. Knop om terug te gaan naar de vorige pagina. P. Afbeelding en naam van de films waar je voor uitgenodigd bent voor de filmpremières. Dit is eigenlijk een grotere versie van annotatie I. Q. Hier kan je handmatig een datum, tijd, bioscoop en film kiezen om naar toe te gaan. Dit is vooral bedoeld voor de freelance filmcriticus. R. Naam van de desbetreffende film. S. Knop om je legitimatie te laten zien. Je gaat dan naar scherm 11. T. Balk om aan te geven dat een filmpremière bijna van start gaat. Er staat daar dan ook een timer bij. U. Afbeelding van de desbetreffende film. V. Al eerder geschreven aantekeningen van de film die je nu makkelijk terug kan lezen. W. Zelfde als annotatie S.

!32

X. Knop om aan te geven dat je klaar bent met het maken van aantekeningen. Als je hier op klikt, gaat de film naar de List op scherm 3. Je kan dan later nog wel je aantekeningen aanvullen. Y. Opgenomen fragmenten die je hier kan terugluisteren. Z. Knop om naar de optie te gaan om aantekeningen te maken. 1. IMDB-informatie. 2. Introductie-informatie van de filmmaatschappijen. 3. Unbounded entry control waar je je aantekeningen kan invullen. 4. Toetsenbord. 5. Knop om momenten uit de film op te nemen. 6. Barcode om je te legitimeren. 7. Algemene informatie over het bedrijf waarbij je in dienst bent. Scherm 1: Dit is het laadscherm. Scherm 2: Dit is het scherm waar je inlogt. Scherm 3: Dit is het beginscherm (home-scherm) waarbij je de Upcoming Events en de List kan zien. Scherm 4: Als je op annotatie I1 drukt, ga je naar dit scherm. Hierbij zie je nog een grotere lijst met Upcoming Events. Scherm 5: Dit scherm is eigenlijk hetzelfde als scherm 3. Echter staat er nu een extra balk erbij dat laat zien dat er een Upcoming Event zo gaat beginnen. Dit is dus ook een soort notificatie. Scherm 6: Als je van scherm 5 naar boven swipet (pagina gaat dan naar beneden), dan kom je op een pagina die alle informatie, inclusief de al gemaakte aantekeningen, van de film in de List laat zien. Scherm 7: Dit scherm + scherm 6 is in principe 1 lang scherm. Op dit scherm staat nog meer informatie. Scherm 8: Je komt op dit scherm als je drukt op annotatie I of P. Dit is het scherm dat je ziet als je in de bioscoop bent. Hier vind je informatie over de film van de Upcoming Event. Via dit kan je ook aantekeningen gaan maken. Scherm 9: Dit is het scherm waar je aantekeningen maakt. Scherm 10: Dit is hetzelfde scherm als scherm 9, maar dan met een toetsenbord. Scherm 11: Dit is het scherm waar je je legitimatie op staat en de medewerkers van de bioscoop kunnen zien dat je een professional bent.

!33

SCENARIO SCHETSEN V.01 Vincent is uitgenodigd voor de premiere van The Revenant. Hij heeft het de laatste tijd erg druk met alle goede films die uitkomen en de geruchten zijn dat deze misschien wel eens een hele berg prijzen kan gaan winnen. Hij opent de Justus app en logt (2) in met het email adres van de zaak. De uitnodiging is verschenen bij upcoming events (3.i). Hij klikt erop en komt op de pagina met de algemene informatie over de film. De achtergrond informatie over bijvoorbeeld de acteurs en de regisseur neemt hij even door. Hij ziet dat Leonardo Di Caprio mee doet en hij herinnert zich ineens weer dat hij nog nooit een Oscar heeft gewonnen. De laatste trailer is gisteren uitkomen ziet hij. Hij bekijkt hem snel en legt zijn telefoon weg. Het is zo ver. Vincent stapt op zijn fiets en rijdt snel naar de trein. Het is al laat dus hij moet doorfietsen. Hij heeft een nette blouse aangetrokken. “Als die maar mooi blijft”, denkt hij. In de trein pakt hij de Justus app erbij en hij ziet nu dat The Revenant uitgeklapt is (5.t). Er is een launchtrailer verschenen dus hij bekijkt deze. Het ziet er heel goed uit en hij is erg benieuwd hoe het verhaal in elkaar zit. (6) De introductiemap is nu ook online. In deze map staat heel erg veel informatie over hoe de film gaat, ook het plot. Dit leest Vincent altijd pas na het kijken van de film anders is veel van de verrassing al weg. wel leest hij altijd de introductie en de informatie over de acteurs. Hierin krijgt hij een heel goed beeld van wat voor acteurs erin spelen en wat waarom ze gecast zijn. Dit is voor Vincent heel erg belangrijk aangezien hier de film mee valt of staat. Hij stapt uit de trein en loopt naar de bioscoop. Er staat een kort rijtje met andere filmcritici voor de deur. Hij herkent Mirjam. Ze knikt naar hem. Als hij aan de beurt is laat hij zijn code (11.6) aan de bioscoop medewerker zien. “Hallo Vincent, de film begint over 15 minuten. Als je wilt kan je popcorn en wat drinken halen, het is gratis.” “Dankjewel”, zegt Vincent en loopt door. Hij haalt een grote beker Coca Cola en gaat naar de zaal. De app geeft aan waar hij moet zitten: rij 4 op stoel 15. Hij ziet al snel dat het een fijne plek is; middenin de zaal. Al snel begint de film. Hij pakt zijn telefoon erbij legt hem op zijn schoot. Zo kan hij er snel bij als er iets belangrijks gebeurt. Dit gebeurt al snel. Hij pakt zijn telefoon en de app staat nog open. Het scherm is echter donker geworden en het notitiescherm (9) is geopend. Hij drukt op de Highlight knop (9.5) zodat hij thuis terug kan vinden waar het belangrijke stuk ook al weer begon. Hij voert bij de notities in dat hij de uitspraak terug moet laten komen in zijn review. Even later gebeurt er iets heel belangrijks. Hij maakt er snel een notitie (10) van. De film is voorbij. Hij gaat naar huis en in de trein vult hij de notities aan met zijn eerste gevoelens bij de film. Het was echt een bijzondere film denkt hij, deze zou echt best met heel wat oscars naar huis kunnen gaan. Thuis begint hij snel met schrijven. Morgenavond moet Vincent de review inleveren, dus hij kan maar beter op tijd beginnen. Hij begint met zijn persoonlijke mening en zijn gevoelens te noteren. Hij pakt de app erbij en leest de aantekeningen door en verwerkt deze in de tekst. Wat was die uitspraak ook al weer? Hij klikt op de eerste highlight (7.y) en op zijn mac wordt de browser geopend op het

!34

scherm met de film. De film begint 1 minuut voor hij de highlight had gemaakt zodat hij ook de voorloop ervan kan zien. De uitspraak van de Sherrif verwerkt hij in zijn review. Vervolgens pakt hij de informatie van IMDB erbij (8.2) want hij weet de naam van de acteur van de Sherrif niet meer. Ow ja, Het was Tom Hardy. Vincent besluit dat het genoeg is voor vandaag en klapt zijn laptop dicht. 

!35

SCHETSEN V.02 TESTS

SCENARIO V.02.1

Vincent is een professionele filmrecensent die de app al een lange tijd heeft. Vincent gebruikt de app vaak tijdens zijn werk als hij aan het onderzoeken en schrijven is. Op dit moment schrijft hij een recensie op zijn computer over The Revenant. Vincent opent de app om bij zijn notities te kunnen komen. Hij wordt gelijk naar de homepage geleidt door de app. Hij vindt dit zeer handig. Er komt gelijk nadat de homescreen is geopend, een pop-up notificatie met daarin een aankondiging van een nieuwe film. Het hart van Vincent begint sneller te kloppen en hij vindt het leuk om te zien waar hij nu weer voor uitgenodigd is. Ook is hij zeer enthousiast. De film Suicide Squad komt op 8 augustus in Pathé Scheveningen in premiere. Natuurlijk moet Vincent daarbij zijn en drukt dan ook op ‘confirm’. Vincent heeft er zin in en klikt op ‘Upcoming Events’ om te kijken naar de films waar hij allemaal naar toe gaat. De Suicide Squad is hier aan toegevoegd.

!36

SCENARIO V.02.2

Het moment is eindelijk daar: de Suicide Squad gaat in premiere. Vincent heeft hier lang op gewacht en heeft er ontzettend veel zin in. Hij is al in de bioscoop aanwezig en heeft net al zijn favoriete drankje besteld: Coca-Cola. Vincent wilt nu naar de zaal gaan om daar al vast te gaan zitten voordat de film begint. Vincent opent de app en op de homescreen ziet hij al gelijk in welke zaal hij moet zijn. Het is zaal 2. Vincent loopt er rustig naar toe, gaat de zaal binnen, begroet mede filmcritici en gaat zitten op een voor hem comfortabele plek. Hij legt zijn Coca-Cola naast zich neer en legt zijn telefoon op de leuning. De app staat nog open en en de film Suicide Squad in de ‘Upcoming Events’ komt gelijk op de homescreen. Hij drukt daarna op ‘Notes’. Er komt een scherm waarop een leeg vlak staat waarvan hij weet dat daar uiteindelijk vele notities komen te staan over deze film. Hij drukt op dat blok en het toestenbord verschijnt. De Suicide Squad begint. Al snel ziet hij het eerste belangrijke stuk. Het was zo spannend! En dit bleef het ook dus hij wilde niet gaan typen omdat hij anders bang was dat hij iets zou missen. Snel drukte hij op de Highlight knop en hij kon weer verder kijken. Even later werd het wat minder spannend."Een goed moment om even wat te noteren", dacht Vincent.

UITKOMSTEN TESTS In de les hebben we de wireframes en de daar bijbehorende scenario's getest op hun flow. Resultaten en feedback waren: • Dat het moeilijk was om het verschil te zien tussen de pop-up notificatie over de film Suicide Squad en het volgende scherm. De respondenten wisten niet waar de film daarna heen ging nadat je ze hebt geacepteerd of geweigerd. • Respondenten wisten niet dat je op de volgende 'Upcoming Events' moest drukken om naar de andere 'upcoming events' te gaan. (Kan duidelijker aangegeven worden) • De film in de 'Upcoming Events' is later wel snel gevonden. • De lijst met al gekeken films is zeer duidelijk en de respondent wist gelijk dat hij die film al gezien had.  

!37

SCENARIO V.02.3

Vincent zit thuis. Het is al laat, hij heeft nog maar 3 uur tot de deadline. Hij moet snel verder, maar hij weet een aantal dingen niet meer. Hij besluit zijn app erbij te pakken. Hij opent de app en komt op het startscherm terecht. Meteen voorop staat The Revenant aangezien dit de laatste film is die hij heeft gezien. Hij klikt erop en komt op het filmscherm. Hier vindt hij alle informatie over de film en zijn aantekeningen. Hij moet weten wie ook al weer de rol speelde van Hawk, dus hij kijkt bij acteurs. Ohja, het is Forrest Goodluck. Hij schrijft een speciaal stukje over hem omdat hij nog zo jong is, maar toch al met zulke grote acteurs speelde in zijn debuut. Dit deed hij voortreffelijk. Hij kijkt in zijn aantekeningen en hij ziet staan dat Goodluck zijn emoties zo goed in zijn ogen terug te zien waren, alsof hij het echt mee heeft gemaakt. Hij verwerkt dit in de review. Hij ziet ook dat hij heeft geschreven dat dat hij het niet duidelijk vond hoe Hawk overleed, maar dat was eigenlijk niet zo. Hij had het over het hoofd gezien en was het gewoon vergeten. Maar na het terugkijken van de highlight, bleek dit juist heel duidelijk te zijn. Hij klikt op de notitie en verwijdert de zin. Vincent houdt ervan om zijn notities op orde te houden zodat hij een duidelijk beeld heeft van waar hij mee bezig is. Nu kan hij weer effectief doorwerken zonder dat hij afgeleidt wordt. Hij schrijft snel verder en levert zijn review net op tijd in.  

!38

!39

WIREFRAMES V.03 Hierna hebben we de wireframes gemaakt op Sketch en deze getest door middel van InVision. De wireframes vindt je hieronder (deze staan niet op volgorde):

!40

!41

UITKOMSTEN TESTS V.03

We hebben de bovenstaande wireframes getest door middel van InVision. Dit zijn de uitkomsten: Er moet nog een scherm komen om instellingen aan te passen. Hamburger-menu is overbodig. Legitimatie-scherm moet beschikbaar zijn op het Homescherm. Upcoming Events is nog niet duidelijk genoeg. Notitiescherm was wel goed duidelijk. Het scherm met alle Upcoming Events op een rijtje moet ook clickable in het prototype zijn. Zoekfunctie moet er nog bij. Lettertype moet groter. De filmpagina (van The Hateful Eight) mag uitgebreider

!42

WIREFRAMES V.04 + ANNOTATIES 1. Laadscherm

A

B

A: JUSTUS is de naam van onze native app. Justus is het latijnse woord voor 'rechtvaardig oordeel.' Wij vonden dit passen bij de doelgroep omdat filmcritici ook een rechtvaardig oordeel moeten vellen over films. Hierom hebben we dus voor deze naam gekozen.

B: Dit is het laad-icoon. Deze twee cirkels draaien rond om aan te geven dat de app aan het laden is. Ze draaien de tegengestelde richting op. We hebben gekozen om zo te laten zien dat de pagina aan het laden is, omdat je dit in een oogopslag kan zien.

2. Inlogscherm

C

C: In dit invulvlak kan je je gebruikersnaam invoeren. Deze gebruikersnaam heb je gekregen van je werknemer. D: In dit invulvlak kan je je wachtwoord invoeren. Ook dit heb je gekregen van je werknemer.

D

E F G

E: Checkbox om aan te geven of je gelijk wilt inloggen wanneer je je app de volgende keer opent. Zo kom je sneller bij het Homescreen (scherm 3) terecht. F: Knop om in te loggen. G: Ook dit is een knop. Als je hierop klikt, wordt je doorverwezen naar de website waar je je wachtwoord kan veranderen. Deze knop staat onderaan de pagina omdat we niet verwachten dat dit vaak wordt gedaan.

!43

3. Homescreen

B C D E

F

A: Dit is een knop als je direct naar films wilt zoeken. Je komt dan op scherm 8 terecht. B: Met deze knop ga je naar het legitimatie-scherm (zie scherm 16). Deze staat op het Homescherm omdat je er zo snel en gemakkelijk erbij kunt. C: Op de gehele balk kan je drukken om bij de gehele lijst met Upcoming Events te gaan. Je gaat dan naar scherm 11. D: Dit is een lijst met de recente Upcoming Events. Hoe dichterbij de premiere is, hoe meer links de film staat. Je kan naar links en naar rechts swipen om de verschillende films te zien (zie Gestures). Als je op een filmtitel klikt, ga je naar scherm 13. E: Dit is een knop om je instellingen aan te passen. Je gaat dan naar scherm 4. F: Dit is een carrousel met alle films die je al hebt gezien. De reden waarom we voor een carrousel hebben gekozen, staat in de patterns. Elke film die in je Upcoming Events hebt gezien, gaat dus automatisch naar MY LIST. Als je hierop drukt ga je naar scherm 5.

4. Instellingen

G

H

G: Knop om terug te gaan naar het Homescherm. H: Hier kan je alle instellingen aanpassen, zoals het lettertype veranderen en vergroten en accountgegevens veranderen. Ook kan je 'Automatic Dark Mode' aanzetten waardoor de app een paar tinten donkerder wordt zodat je de app en je notities makkelijker kan zien in de bioscoop. Deze kan je zowel aan als uit zetten en daarom hebben we gekozen voor een 'on/off switch'. I: Dit is een knop om uit te loggen van je account. Als je hier op drukt, ga je terug naar het inlogscherm (scherm 2). Deze knop staat onderaan in de instellingen omdat je meestal ingelogt blijft in de app.

I

!44

5. Filmscherm

A

B

A: Knop om terug te gaan naar het Homescherm. B: Hier staat de basis informatie van de film zodat je dit snel kan opzoeken. Ook staat er een IMDb-score. Als je daarop drukt, wordt je doorgestuurd naar de IMDb-app of website. Verder staat er een foto van de film om de scherm visueler te maken (vanwege het grote aantal tekst op dit scherm) en een kleine samenvatting van de film. Je kan verder naar beneden swipen (zie Gestures) zodat je naar het vervolg van het scherm gaat (scherm 6). C: Hier staan je notities die je hebt gemaakt van deze film. Deze kan je zo bekijken. Het lettertype is dik gedrukt wat aangeeft dat de gebruiker dat heeft geschreven. Als je hierop drukt ga je naar scherm 7 waar je de notities eventueel nog zou kunnen veranderen.

C 6. vervolg Filmscherm (2) D: Als je op een van deze knoppen drukt, kan je je recording die je eerder hebt gemaakt, terug luisteren. De recordings kan je verwijderen door middel van scherm 20. Zie Gestures voor meer informatie.

D

!45

7. Notitiescherm

A

B

C

A: Hier staan je gemaakte aantekeningen. Door middel van het toetsenbord kan je nog extra aantekeningen erbij typen. B: Knop om terug te gaan naar scherm 5. Je slaat hiermee je aantekeningen op. C: Met deze knop kan je geluidsopnames maken. Als je hierop drukt, komt er een balk naast de knop dat aangeeft dat je nu een geluidsopname maakt (zie scherm 9). Deze knop staat rechtsboven het toetsenbord omdat je zo makkelijk met je duim erbij kan als je met je toetsenbord aan het typen bent. D: Toetsenbord waarmee je aantekeningen kan typen.

D

8. Zoekscherm

F

E: Als je hierop drukt, kan je je trefwoorden die je hebt getypt bij annotatie F, zoeken. Deze zullen dan in een lijst onder elkaar komen te staan, zoals bij annotatie G. Je kan alleen naar films zoeken.

G

F: Hier kan je je trefwoorden van films die je wilt opzoeken, typen. Dit doe je met je toetsenbord.

E

G: Dit is de lijst met alle films die met je trefwoorden overeenkomen. Deze staan onder elkaar zodat je ze overzichtelijk kan zien. Ook staat erbij op het een film is van je UPCOMING EVENTS of een van de LIST MOVIE.

!46

9. Notitiescherm met recording A: Als je dus op de knop van annotatie C van scherm 7 hebt gedrukt, krijg je deze balk ernaast te zien. Die laat zien dat je daadwerkelijk aan het recorden bent en hoeveel seconden je bezig bent met recorden. Als je wilt stoppen met recorden, druk je weer op dezelfde knop. Zie scherm 10.

A

10. Notitiescherm met geslaagde recording B: Na scherm 9 krijg je een bevestiging dat je de geluidsopname hebt opgeslagen. Deze notificatie gaat in 3 seconden weg waarna je weer kan typen en teruggaat naar scherm 7.

B

!47

11. Upcoming Events-scherm

A B C

A: Voor free-lance filmcritici die geen vaste vaan hebben bij een filmbedrijf, is deze knop bedoeld. Free-lance filmcritici krijgen geen uitnodigingen van bedrijven maar nemen zelf het initiatief om naar de films te gaan. Als ze op deze knop drukken, gaan ze naar scherm 19 waar ze handmatig een film in de Upcoming Events kunnen plaatsen. B: Knop om terug te gaan naar het Homescherm. C: Dit is een lijst van alle Upcoming Events die je geaccepteert hebt om naar toe te gaan. De meest recente staat bovenaan en de meest verre film in de toekomst staat onderaan. Je kan deze lijst niet sorteren, omdat de gebruiker alleen maar behoefte heeft om de meest recente films op te zoeken (die hierbij bovenaan staan). Bij de meest recente films zoeken ze juist nog informatie terwijl bij films in de toekomst minder informatie bekend is.

12. Upcoming Events-scherm (weghalen Events)

D

D: Als je een film wilt verwijderen uit de Upcoming Events, kan je op de desbetreffende film naar links swipen (zie Gestures). Dan komt er een kruis tevoorschijn waar je op kan drukken. Als je daarop drukt, wordt die film verwijdert uit de lijst met Upcoming Events op dit scherm en op het Homescherm (scherm 3).

!48

13. Introductiescherm

B

A: Als je op deze knop drukt, sla je alles van deze film op (zowel de notities als de geluidsopnamen). Deze film wordt dan verwijderd uit de Upcoming Events en zal worden toegevoegd aan MY LIST.

C

B: Met deze knop ga je naar het legitimatie-scherm (zie scherm 16).

A

D

E

C: Als je op deze knop drukt, ga je naar de notitiescherm (scherm 15) waar je kan beginnen met notities te maken voor deze film. Omdat deze knop belangrijk is, is de knop bijna evengroot als de breedte van het scherm. D: Als je op deze knop drukt, kan je meer informatie vinden over de film (scherm 14). Dit is bedoeld als vervanging van de introductiemap die je krijgt van de filmmaatschppij die je uitnodigt om de film te bekijken. E: Trailers, video's en foto's van de film.

14. Opengeklapte Introductiescherm F: Meer informatie over de film. Dit is informatie die je ook zal terugvinden in de hedendaagse introductiemap.

F

!49

15. Notitiescherm Dit is precies hetzelfde scherm als scherm 7 maar dan zonder notities.

16. Legitimatiescherm

A

B

A: Dit is een knop om terug te gaan naar de vorige pagina. B: Een foto van de gebruiker. Ter legitimatie voor de medewerkers van de bioscoop. C: QR-code die bij elke film anders is. Deze wordt gescant door de medewerker van de bioscoop en geldt ook als legitimatie om naar binnen te kunnen.

C

!50

17. Notificatie

A

A: Dit is een notificatie die je krijgt als je wordt uitgenodigd voor een film. Zoals je ziet is dit het eerste scherm dat je ziet als je je iPhone opent. Je krijgt dus directe notificaties op je iPhone. Als je deze naar rechts swiped, ga je direct naar de app waarbij je op scherm 18 komt.

18. Notificatiescherm

B

B: Hier zie je direct, in één oogopslag, voor welke film je bent uitgenodigd. C: Dit is de knop om aan te geven dat je naar de premiere van de film gaat. Deze staat links omdat je van links naar rechts leest en je daardoor eerder geneigd bent om de uitnodiging te accepteren. Als je hierop drukt, zal deze film bij je Upcoming Events toe worden gevoegd. D: Dit is een knop om aan te geven dat je niet naar de film gaat. Als je hierop drukt, zal deze film niet bij de Upcoming Events worden toegevoegd.

C D

!51

19. Eventscherm A: Hier kan je de naam van de film waar je naar toe gaat, typen. Je kan hier alles typen.

A

B: Dit is een carrousel om aan te geven op welke datim en welke tijd je naar deze film wilt gaan. We hebben hier voor een carrousel gekozen omdat het zeer overzichtelijk is.

B

C: Hierop kan je de locatie waar de film draait, typen. Er komt dan een toetsenbord tevoorschijn en je kan daain alles typen, als het voor de gebruiker maar duidelijk is. D: Hier kan je op drukken als je de film wilt opslaan in de Upcoming Events.

C

D

E: Als je de recording wilt verwijderen, houd je de knop met het recording-icoontje ingedrukt, waarna er een rondje met een kruis onderin verschijnt. Je verplaatst dan de afbeelding naar het rondje met de kruis waarna de recording verwijderd wordt. Zie scherm 21.

E

!52

21. Filmscherm (recording verwijdert)

A: Je krijgt een bevestiging dat je de recording hebt verwijderd. De bevestiging zal binnen drie seconden weer verdwijnen.

A

!53

PROTOTYPE

Het prototype zit in het bijgeleverde bestand. We hebben het prototype met Flinto gemaakt omdat je op deze manier goed de gestures en animaties kan laten zien. Bij Gestures zie je onder andere welke gestures je in het prototype kan doen.

!54

PATTERNS CARROUSEL De belangrijkste pattern die je tegenkomt, is de carrousel op het homescherm. Als eerste vonden we dat we covers van films moesten laten zien, omdat je zo in één oogopslag kan zien over welke film het gaat. Daaronder komt de naam van de film nog te staan voor extra verduidelijking. Door het zo visueel te maken, hopen we dat de gebruiker sneller bij de film kan komen die hij of zij zoekt. De caroussel hebben we gekozen omdat op deze manier de gebruiker snel tussen de verschillende films kan zoeken. De twintig meest recente films komen hier te staan, zodat de carrousel nog van nut kan zijn. De overige films in MY LIST kan je opzoeken via de zoek-knop dat linksboven het homescherm staat. Via de carrousel kan je gemakkelijk en snel naar de meest recente films zoeken. Immers, wil de gebruiker alleen maar de meest recente films zien, omdat hij daar misschien nog een recentie voor moet schrijven. Boven vind je een voorbeeld van een carrousel. Zoiets hebben wij dus ook, maar dan hebben wij vijf in plaats van drie plaatjes die te zien zijn. Bron foto: (https://nl.pinterest.com/pin/461196818067483360/) LIST Wij hebben een tweetal lijsten in de app geplaatst: het op naam zoeken naar een film en de Upcoming Events-lijst. Omdat er een redelijk aantal films in de app moeten worden gepaatst, moet dit ook makkelijk beschikbaar zijn. Een scherm heeft niet genoeg ruimte om alle films tegelijkertijd op te plaatsen. Daarom hebben wij een List gekozen omdat je zo gemakkelijk de vele films kan opzoeken. Deze worden automatisch gesorteerd op datum

!55

met de recentste bovenaan. Doordat de gebruiker zijn concentratie moet hebben tijdens het zoeken naar films, moet dit goed scanbaar zijn. Daarom hebben wij voor een lijst gekozen. Bron foto: (http://cdn.pttrns.com/111/6626_f.jpg)

HEADER Wij gebruiken de standaard-header van IOS. Daarin staat de Backknop altijd links en de titel in het midden. Een knop om de volgende actie te maken staat altijd aan de linkerkant van de header. In onze app kan dat bijvoorbeeld zijn dat je naar films kan zoeken, een pagina kan opslaan of je legitimatie kan laten zien. Een voorbeeld hoe wij dit hebben gedaan staat hier rechts. Hieronder staat een voorbeeld. Bron foto: (http://forums.macrumors.com/threads/a-small-change-to-fixone-of-the-biggest-complaints-about-ios-7.1614812/)

INSTELLINGEN Bij Instellingen hebben we meerdere patterns gebruikt om zo makkelijk je keuzes te maken. We hebben onder andere een slider gebruikt om zo het lettertypegrootte aan te passen. Er staan aan beide kanten 'a' en 'A' als iconen om aan te geven tot hoe groot het lettertype kan worden. We hebben besloten om hier een slider te maken omdat de gebruiker niet exact hoeft te weten hoe groot het lettertype moet zijn maar wel ongeveer. Ook hebben we switches gebruikt. Deze switches hebben we gebruikt om aan/uit-opties te kiezen. 'Automatic dark mode' kan je alleen maar 'aan' of 'uit' zetten. Daarvoor hebben we dus een switch gebruikt, die daarvoor bedoelt is. Op de volgende bladzijde staan voorbeelden waar dat ook gebruikt wordt.

!56

Bron foto: (http://stackoverflow.com/questions/ 24474271/ios-layout-pattern)

DATEPICKER Voor de optie voor freelance filmcritici om films handmatig toe te voegen aan de Upcoming Events (zie afbeelding rechts), hebben we besloten om een datepicker in het scherm te plaatsen. Een datepricker staat eigenlijk standaard onderaan het scherm maar dat is niet verplicht. Ze mogen overal op het scherm staan en omdat het kiezen van een datum de tweede optie is van het scherm, staat de datepicker redelijk in het midden. Je kan de datepicker ook niet visueel veranderen. We hebben gekozen voor een datepicker omdat dit een effectieve manier is om een datum te kiezen. Een kalender zou teveel ruimte op het scherm in beslag nemen.

TWEEDE CARROUSEL Naast de carrousel van MY LIST op het homescherm, hebben we nog een soort carrousel boven MY LIST. Dit is voor de Upcoming Events. Hier hebben we ook voor gekozen omdat je zo gemakkelijk de recente Upcoming Events kan zien. Deze carrousel geeft een selectie van 8 films weer waarvan de meest recente links staat. Hoe recenter de film is, hoe belangrijker het voor de gebruiker is omdat de filmcritcus daarvan misschien al informatie over gaat opzoeken. Als de gebruiker een grotere selectie wilt zien, drukt hij op de knop daarboven waarna hij een lijst krijgt met alle Upcoming Events (zie List in Patterns). Door thumbnails te geven van films, kan de gebruiker ook snel zien op welke film hij moet drukken. Een voorbeeld van dit soort carrousel staat op de volgende bladzijde.

!57

Carrousel Bron foto: (https:// www.nngroup.com/articles/4-iosrules-break/)

!58

GESTURES Op de homepage is de eerste gesture te vinden. Deze is van toepassing op horizontale list met upcoming events. Deze items kan je van rechts naar links swipen om meerdere items te zien. Er zullen nooit heel veel items in deze list komen te staan en meestal heb je alleen maar de eerste paar nodig. Mocht je echter nog meer willen zien, kan je deze gesture gebruiken om er meer te bekijken. De data die er onder staan schuiven natuurlijk mee. De gebruikers zullen deze manier van navigatie hoogst waarschijnlijk begrijpen, maar om het nog duidelijker te maken is de laatste miniatuur afgesneden. Dit maakt de gebruiker nieuwsgierig naar wat daar staat wat hem intuïtief de items op zij wilt laten slepen. Verder komt deze techniek nog terug op het introductiescherm bij de trailers en foto’s.

De items op het upcoming events scherm zijn ook te verslepen. Deze kan je door van beneden naar boven en weer terug te swipen in de corresponderende richting verplaatsen. Dit werkt op dezelfde manier als scrollen op een computer, alleen nu op een mobiel device. De gebruikers van smartphones zijn deze manier van door een pagina navigeren al gewend aangezien dit de standaard is en dus overal terugkomt. Van boven naar beneden en vice versa swipen komt verder nog terug bij de notes, bij het moviescreen, het searchscreen en bij het introscreen.

!59

Bij de instellingen is er ook een kleine gesture terug te vinden. Dit is bij de toggle om bepaalde instellingen in en uit te schakelen. Deze toggle is standaard in iOS en kan naast door een tap te doen, ook worden gebruikt door een korte swipe naar links of rechts te doen. Aangezien deze standaard in iOS wordt gebruikt, kan er van uit worden gegaan dat de gebruiker deze zal begrijpen en kan gebruiken. Als de gebruiker een freelance filmcritic is, krijgt hij meestal geen invites voor grote evenementen. Maar hij wilt wel de evenementen die hij bezoekt in de app hebben. Daarom kan hij ze toevoegen. Bij het toevoegen moet de datum ingevuld worden en daarvoor heb ik gekozen voor de wel bekende rollende datumpicker van Apple. De verschillende items kan je net als bij een cijferslot los van elkaar instellen door van boven naar beneden of andersom te swipen. Hierbij geldt weer hetzelfde, er kan van uit gegaan worden dat de gebruiker weet hoe het werkt aangezien hij er bekend mee is. In de upcoming events kan je evenementen toevoegen, maar dan moet je ze natuurlijk ook weer kunnen verwijderen als je het evenement bijvoorbeeld wilt annuleren. Je kan dan het betreffende item in de lijst naar links swipen waarna er een verwijder-knop verschijnt. Deze kan ook weer naar rechts geswiped worden om de actie af te breken. De mail app in iOS diende hiervoor als inspiratie. De gebruiker kent de manier van verwijderen hoogst waarschijnlijk ook van deze app en er zal dus herkenning optreden.

!60

Tijdens het maken van notities is er de mogelijkheid om voice memo's te maken. Deze kunnen terug gevonden worden op het zogeheten moviescreen. Onder de gemaakte notities staan dan de icoontjes. Deze kan je beluisteren door erop te klikken, maar door ze ingedrukt te houden worden ze iets groter en verschijnt er een verwijder kruis. Het icoontje kan hiernaartoe gesleept worden om ze te verwijderen. Deze manier van verwijderen wordt steeds populairder. Facebook gebruikt dit bijvoorbeeld tegenwoordig om een miniatuur te verwijderen. De manier van een icoontje inhouden om deze te wijzigen is een heel bekende gesture in iOS. Apple gebruikt deze manier namelijk om apps op het homescreen te verwijderen of te verplaatsen. Verder is er nog de laatste gesture op het lockscreen. Op het lockscreen krijgt de gebruiker een notificatie wanneer er een nieuwe uitnodiging voor een evenement is in de JUSTUS app. Deze kan hij gaan bekijken in de app door de iPhone te unlocken en de app te openen, maar het kan ook sneller. Door op het lockscreen de notificatie naar rechts te swipen, kom je in een keer uit bij de JUSTUS app en de melding. Ook deze gesture is standaard in iOS dus mag er vanuit gegaan worden dat de gebruiker dit weet. Om het duidelijker te maken staat onder de melding dat je de notificatie opzij kan ‘sliden’ om hem te bekijken. Ook dit is standaard in iOS.  

!61

BRONNEN Mentel, T. (25 juli, 2015). 7 Things Critics Look for When Reviewing a Movie. Geraadpleegd van http://www.cheatsheet.com/entertainment/7-important-areas-to-consider-to-view-a-filmcritically.html/?a=viewall NB, R. (24 februari, 2016). Stagelopen bij MovieScene. Geraadpleegd van https:// www.youtube.com/watch?v=ahdbGTZbgdI

!62

BIJLAGEN

!63

CMDDES01-7 DESIGN FOR MOBILE. Design for Mobile. Gemaakt door: Dhr. Justus de Bruin ( ) Dhr. Max Otten ( )

Recommend Documents