SLUTTDOKUMENTASJON LOKALAVIS.NO

SLUTTDOKUMENTASJON LOKALAVIS.NO Camilla Røhme Cecilie Schrøder Fjellhøy Cecilie Marie Kirkaune

PROSJEKT NR. 12-03 TILGJENGELIGHET Åpen Studieprogram: Informasjonsteknologi Postadresse: Postboks 4 St. Olavs plass, 0130 Oslo Besøksadresse: Holbergs plass, Oslo Telefon: 22 45 32 00 Telefaks: 22 45 32 05 HOVEDPROSJEKT HOVEDPROSJEKTETS TITTEL DATO 28.05.2012 A-pressen Digitale Medier lokalavis.no ANTALL SIDER 103 PROSJEKTDELTAKERE INTERN VEILEDER Cecilie Schrøder Fjellhøy, s161874 Cecilie Marie Kirkaune, s161929 Camilla Røhme, s161863 Larissa Sjarbani OPPDRAGSGIVER A-pressen Digitale Medier KONTAKTPERSON Pål Nedregotten Simen Graff Jenssen SAMMENDRAG Hensikten med prosjektet har vært å utvikle, illustrere og teste innovative ideer for A- pressens nettaviser på nettbrett i fremtiden Det har blitt utviklet ideer til en nettavis som nyttegjør seg av mulighetene nettbrettets berøringsskjerm tilbyr. Det ble gjennomført kartlegging og utviklet tre prototyper. Disse har blitt brukt til gjennomføringen av brukertester. Rapporten inneholder to deler. En for produktet og en for prosessen. Tre Stikkord Brukervennlighet Prototyping Brukertesting 2

Forord Denne rapporten inneholder dokumentasjon for tre studenters hovedprosjekt ved Høgskolen i Oslo og Akershus. Det rettes en takk til de eksterne veilederne ved A-pressen Digitale Medier, Pål Nedregotten og Simen Graff. En stor takk rettes også til Kirsten Ribu. Andre tilsatte ved HiOA som har vært til hjelp i gjennomføringen av prosjektet er Tor Krattebøl og Torunn Gjester. Sammendrag A-pressen Digitale Medier er ekstern oppdragsgiver for bacheloroppgaven. De ønsker å øke kundetrafikken på nettavisene gjennom god bruk av digitale medier. Hensikten med prosjektet har vært å utvikle, illustrere og teste innovative ideer for A-pressens nettaviser på nettbrett i fremtiden. Konseptet lokalavis.no er utviklet for selskapet. lokalavis.no samler alle lokalavisene til A- Pressen i en webapplikasjon. Det har blitt utviklet ideer til en nettavis som nyttegjør seg av mulighetene nettbrettets berøringsskjerm tilbyr. Det ble utviklet tre prototyper. En kodet prototype av en lokalavis ble utviklet for interaktivt å visualisere berøringsskjermfunksjonaliteten på nettbrettet. En papirprototype ble utviklet til gjennomføring av brukertester. Til slutt ble en digital prototype utformet for å gi oppdragsgiver en helhetlig visualisering av konseptet. Denne er tilgjengelig i nettleser fra følgende link: http://dl.dropbox.com/u/2060779/digitalprototype.m4v. Oppdragsgiver vil kunne dra nytte av de nye ideene, konseptet og resultatet av brukertestene i sitt videre arbeid mot målet om økt kundetrafikk. 3

Innholdsfortegnelse Forord... 3 Sammendrag... 3 Innholdsfortegnelse... 4 Figurliste... 8 PRODUKTDOKUMENTASJON... 10 Kapittel 1 Introduksjon... 10 1.1 Innledning... 10 1.2 Beskrivelse av involverte parter... 10 1.2.1 Prosjektgruppen... 10 1.2.2 A-pressen Digitale Medier... 11 1.3 Definisjon av oppgaven... 12 1.4 Konsept... 12 Kapittel 2 Mål... 13 2.1 Mål for A-pressen... 13 2.2 Mål for prosjektgruppen... 13 Kapittel 3 Kartlegging... 14 3.1 Det mobile markedet... 14 3.2 Kartlegging av applikasjoner... 15 3.2.1 Native applikasjoner... 15 3.2.2 Mobile webapplikasjoner... 16 3.2.3 Oppdragsgivers eksisterende applikasjoner... 16 3.2.4 Kartlegging av eksisterende applikasjoner... 18 Kapittel 4 Krav til prototypene... 29 4.1 Krav til lokalavis.no... 29 4.2 Krav til romerikesblad.no... 29 Kapittel 5 Teknologier... 31 5.1 Berøringsskjerm... 31 5.1.1 Fordeler... 31 5.1.2 Ulemper... 31 4

5.2 Utviklingsteknologier... 32 5.3 Utviklingsverktøy... 33 5.3.1 Adobe Photoshop... 33 5.3.2 Notepad++ og TextMate... 33 5.3.3 Keynote... 33 5.3.4 imovie... 33 5.4 Tekniske hjelpemidler... 33 5.4.1 Dropbox... 33 5.4.2 FileZilla... 34 Kapittel 6 Funksjonalitet... 35 6.1 Funksjonalitet inkludert i prototypene... 35 6.1.1 Geolokasjon... 35 6.1.2 Horisontal svipe... 36 6.1.3 Reklame... 36 6.1.4 Del på sosiale medier... 38 6.1.5 Artikler populære på sosiale medier... 38 6.1.6 Tips redaksjonen... 38 6.1.7 Menyinndeling etter kategori... 38 6.2 Ideer ikke inkludert i prototypene... 39 6.2.1 Flere sosiale medier... 39 6.2.2 Personalisering... 39 6.2.3 Interaktiv reklame... 40 6.2.4 Stemmestyring... 40 6.2.5 Naturlig opplesning av artikler... 40 6.2.6 Teleportering... 40 6.2.7 Tankelesning... 40 6.2.8 Frakoblet lagring... 41 Kapittel 7 Prototyping... 42 7.1 Introduksjon til prototyping... 42 7.2 Metoder for prototyping... 42 7.2.1 Lavnivå prototype... 42 7.2.2 Høynivå prototype... 42 7.3 Prototypene... 43 7.3.1 Prototype 1 Papir... 43 7.3.2 Prototype 2 - Kodet... 43 7.3.3 Prototype 3 - Digital... 44 5

Kapittel 8 Design og brukervennlighet... 45 8.1 Lokalavis.no... 45 8.1.1 Farger... 45 8.1.2 Font... 46 8.1.3 Oppsett... 46 8.2 romerikesblad.no... 48 8.2.1 Farger... 48 8.2.2 Font... 48 8.2.3 Meny... 49 8.2.4 Oppsett forside... 49 8.2.5 Oppsett artikkel... 52 8.2.6 Oppsett galleri... 53 Kapittel 9 Brukertesting... 55 9.1 Hensikten med brukertesting... 55 9.1.1 Testmiljø... 56 9.1.2 Uformelle tester... 56 9.1.3 Formelle tester... 57 9.1.4 Testpersoner... 57 9.1.5 Personvern... 57 9.2 Testoppsett... 58 9.2.1 Prototypene brukt til brukertesting... 58 9.2.2 Oppgaver under brukertestene... 58 9.3 Endringer utført på papirprototypen... 58 9.3.1 lokalavis.no... 58 9.3.2 Romerikesblad.no... 61 9.4 Resultat av testene... 63 9.4.1 lokalavis.no... 64 9.4.2 romerikesblad.no... 66 9.5 Konklusjon av brukertester... 68 PROSESSDOKUMENTASJON... 69 Kapittel 10 Planlegging og forberedelser... 69 10.1 Valg av oppdragsgiver... 69 10.2 Prosjektets nytte... 69 10.3 Rammebetingelser... 70 Kapittel 11 Arbeidsmetodikk og prosess... 71 6

11.1 Arbeidsmetodikk... 71 11.2 Prosess... 71 11.2.1 Roller... 72 11.2.2 Samarbeid med oppdragsgiver... 72 Kapittel 12 Evaluering... 73 12.1 Utfordringer i gjennomføringen av prosjektet... 73 12.2 Hva kunne blitt gjort annerledes?... 74 Kapittel 13 Konklusjon og videre arbeid... 76 Kilder og litteraturliste... 78 Vedlegg... 82 Vedlegg 1 Risikoanalyse... 82 Vedlegg 2 Brukerundersøkelse... 84 Vedlegg 3 Samarbeidsavtale... 85 Vedlegg 4 Gantt diagram... 86 Vedlegg 5 Resultat av brukertestene... 87 Vedlegg 6 Testplan... 90 Vedlegg 7 Kartlegging av applikasjoner... 94 Vedlegg 8 Kildevurdering... 95 Vedlegg 9 Eksempel på ukeplaner... 96 Vedlegg 10 Eksempel på møtereferater... 97 Vedlegg 11 Prosjektdagbok... 99 Vedlegg 12 Samtykkeerklæring til brukertester... 101 Vedlegg 13 Kontrasttester... 102 7

Figurliste Figur 1.1: Opplagsutvikling 2010........12 Figur 1.2: Nettaviser 2010..... 12 Figur 3.1: Estimert andel av operativsystemer på nettbrett i fremtiden. 14 Figur 3.2: Illustrerer nettlesere på nettbrett i 2012 hos A-pressen 15 Figur 3.3: A-pressens papirutgave av avis på nettbrett... 16 Figur 3.4: A-pressens nettaviser på nettbrett... 17 Figur 3.5: Tidlige tanker rundt fremtidens nettavis på nettbrett.. 17 Figur 3.6: Graf; Sveip, forside og artikkel.. 19 Figur 3.7: Graf; Meny, navigering og responstid.. 20 Figur 3.8: Sosiale medier, tips redaksjonen, galleri og personalisering... 20 Figur 3.9: Fra venstre til; forside, artikkel, meny og alternativ forside... 21 Figur 3.10: Fra venstre til; forside, artikkelfremvisning, artikkel og galleri..22 Figur 3.11: Fra venstre til høyre; forside, artikkel, alternativ forside og meny i VG+.... 23 Figur 3.12: Forside, artikkelvisning og avisoversikt i Dagbladet.... 24 Figur 3.13: Forside, artikkelvisning, kategorier og bildevisning i New York Times... 25 Figur 3.14: Forside, artikkel, personalisering av forside og brukervalg i CNN.... 26 Figur 3.15:Graf; benyttet seg av muligheten for geolokasjon av lokalavis.... 28 Figur 3.16:Graf; illustrerer hvilke kategorier respondentene ønsker å finne i en lokalavis... 28 Figur 5.1: Illustrerer berøringsområdet på en ipad. 32 Figur 6.1: Før Geolokasjon søker 35 Figur 6.2: Etter - Lokasjon funnet 35 Figur 6.3: Horisontal svipe... 36 Figur 6.4: Fullskjermsreklame. 37 Figur 6.5: Integrert rubrikkannonse på forsiden... 37 Figur 7.1: Papirprototypen forside RB.no.. 43 Figur 7.2: Kodet prototype artikkelside... 44 Figur 8.1: Fargekart for den digitale prototype.. 45 Figur 8.2: A-pressens logo... 46 Figur 8.3: Fontvalg. 46 Figur 8.4: Design av lokalavis.no... 47 Figur 8.5: Fargevalg romerikesblad.no. 48 Figur 8.6: Valg av font... 49 8

Figur 8.7: Menylinjen 49 Figur 8.8: Forsiden romerikesblad.no.... 50 Figur 8.9: Det gylne snitt.. 51 Figur 8.10: Brukergrensesnitt artikkel.... 52 Figur 8.11: Det gylne snitt i artikkel. 53 Figur 8.12: Brukergrensesnitt galleri.... 53 Figur 8.13: Bildegalleri..... 54 Figur 9.1: Overskrift på artiklene. 59 Figur 9.2: Ny utforming av knapp 59 Figur 9.3: Ny farge på lokalavis.no..... 60 Figur 9.4: Informasjon om valgt lokalavis.. 61 Figur 9.5: Menyvalg før og etter forbedring... 61 Figur 9.6: Popup- vinduer.... 62 Figur 9.7: Dele på sosiale medier....... 62 Figur 9.8: Delt på sosiale medier.... 62 Figur 9.9: Tips redaksjonen.... 63 Figur 9.10: Illustrerer resultatet av alle oppgavene, i alle brukertestene.. 64 9

PRODUKTDOKUMENTASJON Produktdokumentasjonen beskriver hva som har blitt gjort. Grunnet prosjektets fokus på kartlegging, prototyping og brukertesting blir det også i en viss grad beskrevet hvordan dette har blitt gjennomført. Prosjektets prosess blir beskrevet i prosessrapporten. Kapittel 1 Introduksjon The Internet is about usability. With the Web, usability comes first, then you click to buy or become a return visitor. Jakob Nielsen 1.1 Innledning Dette er en sluttrapport for et 20 studiepoengs hovedprosjekt, gjennomført av tre anvendt datateknologistudenter ved Høgskolen i Oslo og Akershus, våren 2012. Prosjektet ble gjennomført i tre deler; kartlegging, utvikling og brukertesting. Rapporten er delt i to deler. Første del beskriver produktet; konseptet, prototypene og tester. Andre del beskriver arbeidsprosessen gjennom prosjektperioden. 1.2 Beskrivelse av involverte parter 1.2.1 Prosjektgruppen Prosjektgruppen består av tre studenter som alle studerer anvendt datateknologi. 10

Gruppemedlemmene Cecilie Schrøder Fjellhøy, s161874 Cecilie Marie Kirkaune, s161929 Camilla Røhme, s161863 Prosjektgruppen ble dannet på grunnlag av gode resultater fra prosjektoppgaver tidligere i studiet. Gruppemedlemmene har god kjennskap til hverandres ferdigheter, både styrker og svakheter, derfor falt rollefordelingen naturlig. 1.2.2 A-pressen Digitale Medier A-pressen Digitale Medier (heretter APDM), samler A-pressens digitale satsning. A-pressen er landets nest største mediekonsern, som med 48 lokalaviser når ut til over 70 % av den norske befolkningen. Selskapet har 2900 ansatte, og hadde et årsresultat på 173 millioner NOK i 2010 (A-pressen, 2012). Avisene i Norge har de siste årene hatt en nedgang i både opplagstall, salg og lesertall. Papirutgavene gikk tilbake med 6,5 % i perioden august 2010 til juli 2011 (Mediebedriftene, 2011). A-pressen hadde i 2010 3,5 % nedgang i opplag, som illustrert i figur 1.1. Figur 1.2 illustrerer A-pressens nettavisers økning samme år (A-Pressen Digitale Medier, 2011). Den negative trenden i markedet for papirutgavene, sammen med den positive økningen i kundetrafikk på nett, har ført til økt satsning på dette området. 11

Figur 1.1: Opplagsutvikling 2010. Figur 1.2: Nettaviser 2010. 1.3 Definisjon av oppgaven Det ble utviklet tre prototyper for å illustrere innovative ideer for fremtidens nettavis på nettbrett. Prosjektet ble gjennomført i tre deler; kartlegging, utvikling av prototyper og brukertesting. Kartleggingen fokuserte på evaluering av eksisterende applikasjoner. Utviklingen av prototypene ble gjennomført på grunnlag av resultatene av kartleggingen. Prototypene ble testet ved gjennomføring av 10 brukertester. 1.4 Konsept lokalavis.no samler alle A-pressens lokalaviser i en nettbrettapplikasjon. Per dags dato har A-pressen en oversikt over alle lokalavisene online på selskapets nettside. Den nye applikasjonen vil gi brukerne mulighet til å finne lokalavisen i området de befinner seg, ved hjelp av nettbrettets innebygde funksjonalitet for geolokasjon. Hvis brukerne er på ferie eller jobbreise har de mulighet å lese lokale nyheter fra området de besøker. 12

Kapittel 2 Mål 2.1 Mål for A-pressen Øke kundetrafikk gjennom god bruk av digitale medier. Øke andel i nettavismarkedet. Øke den mobile andelen med 25 % i 4. kvartal 2012, til et snitt på 100.000 lesere per dag. 2.2 Mål for prosjektgruppen Fullføre hovedprosjekt som avslutter en treårig bachelorgrad. Gjennomføre et samarbeid med en profesjonell aktør. Tilegne seg kunnskap om: - Brukervennlighet - Utvikling av mobile webappliksjoner til nettbrett - Prototyping - Brukertesting 13

Kapittel 3 Kartlegging You can use an eraser on the drafting table or a sledge hamme on the construction site. Frank Lloyd Wright 3.1 Det mobile markedet Figur 3.1: Estimert andel av operativsystemer på nettbrett i fremtiden. Apple lanserte sitt nettbrett ipad i 2010, og dominerte samme år markedet med en andel på 95 % (Sherr, 2010). Apples ipad kjører operativsystemet ios. Den andre store aktøren innen nettbrettmarkedet er Googles operativsystem Android, som for eksempel kjøres på nettbrettene Samsung Galaxy og Sony Tablet (TechRadar, 2011). Figur 3.1 illustrerer at markedsandelen til ios har sunket til 68 % første kvartal 2012 (Display Search, 2012). Figuren viser også estimerte tall for kommende år, hvor ios fortsatt dominerer markedet med andelen på 50 % i 2017 (Keizer, 2012). ios og ipad forventes med andre ord å holde på sin store markedsandel i mange år fremover. 14

Dette stemmer også for A-pressens lokalaviser på nettbrett. Figur 3.2 viser nettlesere på nettbrett i 2012, og at Safari her er nettleseren med klart størst andel (Nedregotten, 2012). Safari er Apples nettleser og brukes på ipad. Figur 3.2: Illustrerer nettlesere på nettbrett i 2012 hos A-pressen. 3.2 Kartlegging av applikasjoner 3.2.1 Native applikasjoner Dagens applikasjonsutvikling til nettbrett er delt inn i to områder; applikasjoner programmert native eller for web. Native-applikasjon er en mobilapplikasjon som lastes ned til en mobil enhet. Applikasjonen bruker nettbrettets innebygde funksjonalitet, som for eksempel kamera, GPS og brukerens adressebok. En native-applikasjon er utviklet spesifikt i henhold til hvilket operativsystem enheten har, nettopp grunnet bruk av innebygde funksjoner. Applikasjonene er programmert i programmeringsspråk spesifikt for plattformen de skal brukes på (Voss, 2011). Negative sider ved native-applikasjoner inkluderer tid og ressurser brukt til dobbeltarbeid ved utvikling av flere applikasjoner. Det kan lett oppstå ulikheter mellom de forskjellige utgavene av applikasjonen. Hvis applikasjonen ikke utvikles til alle plattformer vil man risikere å miste potensielle brukere. 15

3.2.2 Mobile webapplikasjoner Mobile webapplikasjoner er applikasjoner som kjører i nettleser. Den største fordelen med mobile webapplikasjoner er at de fungerer på tvers av plattformer og enheter (Hird, 2011). Dette fører til raskere utvikling, da funksjonalitet blir implementert kun én gang. Problemet med ulikheter ved de forskjellige applikasjonene forsvinner også. Mobile webapplikasjoner kan finnes ved et enkelt søk i nettleseren, mens native-applikasjoner må lastes ned. 3.2.3 Oppdragsgivers eksisterende applikasjoner Oppdragsgiver har native applikasjoner for lokalavisene tilgjengelig i App Store og Android Marked, butikkene for kjøp og nedlastning av applikasjoner til henholdsvis ios og Android (Apers & Paterson, 2012). Her kan brukerne laste ned papirutgaven av avisen. Papiraviser har dessverre ikke god lesbarhet på skjerm, se figur 3.3. Figur 3.3: A-pressens papirutgave av avis på nettbrett. 16

Figur 3.4: A-pressens nettaviser på nettbrett. Applikasjonene tilbyr også muligheten til å lese nettutgaven av avisen. Artiklene er statisk satt opp med bilder og overskrift, i noen tilfeller en liten ingress, se figur 3.4. Oppdragsgivers eksisterende applikasjoner er nærmere beskrevet under punkt 3.3.4. Kartlegging av eksisterende applikasjoner. Oppdragsgiver ønsket at det skulle gjøres et forarbeid ved å sette seg inn i eksisterende applikasjoner. Det ble i midlertidig gjennomført en idémyldring i forkant av dette, da det ikke var ønskelig å bli påvirket av eksisterende design eller funksjonalitet. Tankekartet i figur 3.5 ble utformet under denne idèmyldringen. Figur 3.5: Tidlige tanker rundt fremtidens nettavis på nettbrett. 17

3.2.4 Kartlegging av eksisterende applikasjoner Kartleggingen ble gjennomført ved nedlastning av applikasjoner til ipad. Det ble sett på hver av disse individuelt før det ble gjort i fellesskap. Til kartlegging av eksisterende applikasjoner ble det brukt både lokale og internasjonale aviser. A-pressens aviser deler alle samme oppbygning og layout. Nordland Avis ble valgt som et eksempel på disse. VG og Dagbladet ble valgt på grunn av deres sterke merkevare i Norge (Gimnes, 2010). New York Times og CNN ble de internasjonale eksemplene. For å kvantifisere resultatene ble det valgt å sette en karakter på de ulike delene av siden, fra 1 til 6. 1 = Ikke eksisterende 2 = Veldig dårlig 3 = Dårlig 4 = Greit 5 = Bra 6 = Veldig bra Applikasjonene ble vurdert på følgende områder: Sveip Sveip vil si at bruker drar fingeren over skjermen, enten horisontalt eller vertikalt. Skiller seg fra tradisjonell scroll ved at hele bildet skifter ved en enkel bevegelse. Sveip-funksjonen ble vurdert ut i fra hvor naturlig bevegelsen føltes. Forside Avisens forside ble vurdert ut i fra oversiktlighet. Finner brukerne det de forventer? Er det passe mengde informasjon der? Artikkel Presentasjonen av artiklene ble vurdert med tanke på utforming, oversiktlighet, originalitet og lesbarhet. Meny Menyen ble vurdert etter kriterier om å være selvforklarende, enkel og til hjelp. At menyen inneholdt nok, men ikke for mye informasjon, ble også vektlagt. 18

Navigering Navigeringen på ble ofte vurdert sammen med menyen, da denne kan være avgjørende for en enkel navigering. Andre aspekter var svipe mellom artikler, sammenheng mellom artikler og forside, og eventuelle inndelinger av kategorier. Responstid Responstiden ble vurdert ut i fra hvor lang tid applikasjonen brukte på å laste inn, og tiden brukt ved innlastning av nye sider, for eksampel artikler. Personalisering Her ble det vurdert om brukerne hadde mulighet til å tilpasse applikasjonen etter egne preferanser. Mulighet til å tilpasse skriftstørrelse, eller innstillinger på en egen profil for brukeren, var ting det ble sett etter her. Følgende funksjonalitet ble også vurdert Sosiale Medier Tips redaksjonen Bildegallerier Hvert av disse områdene ble diskutert før en karakter ble satt. Tabell med karakterer ligger i vedlegg 7. Følgende figurer illustrerer karakterene hver av applikasjonene fikk på de ulike delene: 5 4.5 4 3.5 3 2.5 2 1.5 1 0.5 0 Nordland VG + Dagbladet NYT CNN Figur 3.6: Sveip, forside og artikkel Sveip Forside Artikkel 19

6 5 4 3 2 1 Meny Navigering Responstid 0 Nordland VG + Dagbladet NYT CNN Figur 3.7: Meny, navigering og responstid. 6 5 4 3 2 1 Sosiale medier Tips redaksjonen Galleri Personalisering 0 Nordland VG + Dagbladet NYT CNN Figur 3.8: Sosiale medier, tips redaksjonen, galleri og personalisering. 20

Nordland Avis Nordland Avis representerer alle A-pressens tilgengelige applikasjoner. Det er to ulike aviser tilgjengelige i applikasjonen; en e-avis, som er en utgave av papiravisen, og nettavisen tilpasset ipad. E-avis Figur 3.9: Fra venstre til høyre; forside, artikkel, meny og alternativ forside. + Valg mellom to typer avis + Mulig å velge listevisning av innhold + God zoom-funksjon -- Lite original -- Benytter seg ikke av mulighetene ved en berøringsskjerm -- Savner sortering etter kategori -- Dårlig lesbarhet 21

Nettavis Figur 3.10: Fra venstre til høyre; forside, artikkelfremvisning, artikkel og galleri. + Indikator på antall sider + Reklame mellom artiklene på forsiden + Layout på artikkel tilnærmet vanlig nettavis, skaper gjenkjennelsesfaktor -- Annonse viser bruker til ekstern side uten mulighet til å komme tilbake -- Layout på artikkel tilnærmet vanlig nettavis, lite originalt -- Mangler sosiale medier -- Ingen mulighet for å tipse redaksjonen -- Treg responstid ved første innlastning 22

VG + Figur 3.11: Fra venstre til høyre; forside, artikkel, alternativ forside og meny i VG+. VG+ ble lansert i 2010, og var den første norske avisen som satset på utvikling av et produkt tilpasset nettbrett (Helland, 2010). + Variert størrelse på sakene på forsiden + Indikator på antall sider + Integrert reklame på forside + Statisk innhold på menyen; rolig og oversiktelig + Menyen ligger tilgjengelig nederst og kan synliggjøres ved tapp eler sveip + Menyens tilgjengelighet indikeres med en liten pil + Personalisering ved valg av skriftstørrelse og innholdsoversikt + Timeglass indikerer at noe faktisk skjer, og fører til at responstiden oppleves bedre -- Mye informasjon på forsiden, forvirrende -- Feil prioritering i fremheving av saker, oppleves uinteressant -- Artikkel har to spalter, vanskelig å finne leseflyten -- Både vertikal og horisontal sveip skaper forvirring. Savner god flyt i sveipen 23

Dagbladet Figur 3.12: Forside, artikkelvisning og avisoversikt i Dagbladet. + Originalt oppsett av forside + Kategoriinndeling + Horisontal sveip mellom artikler + Oversiklig artikkeloppsett; likt som en tradisjonell papiravis + Sosiale medier integrert som ved en vanlig nettavisartikkel + Fullskjerms bildegalleritrykker ved tapp på bildene i artikkelen + Menyen tilgjengeliggjøres ved tapp på skjermen -- Uoversiktlig forside -- Forvirrende kategorinavn -- For lite informasjon om artiklene trigger ikke nysgjerrigheten til å ville lese mer -- Lite originalt oppsett av artikler -- Hovedbilde i artikkel dekker hele skjermen; vanskelig å vite at man må/kan scrolle nedover i artikkelen -- Ingen informasjon om menyen når den ikke er fremme 24

-- Menyvalget Nye sider er tomt -- Ingen mulighet for å tipse redaksjonen -- Lang responstid både på innlastning av applikasjon og sveip mellom artikler New York Times Figur 3.13: Forside, artikkelvisning, kategorier og bildevisning i New York Times. + Forsiden har få farger og oppleves som rolig + Skiller seg ut fra andre applikasjoner ved å beholde det klassiske designet som minner om papiravisforsiden + Horisontal sveip mellom artikler + Viktigere artikler tildeles større plass på forsiden + Horisontal sveip ved lesning av artikler + Indikator på hvor mange sider det er i en artikkel + Reklame nederst integreres god med resten av brukergrensesnittet, virker ikke forstyrrende + Helsides annonser mellom artiklene ved horisontal sveip + Dagens dato, og dato og klokkeslett for siste oppdatering på forsiden + Oversiktelig meny + Menyvalget Refresh for oppdatering 25

+ Menyen kan skjules og enkelt tilgjengliggjøres igjen + Mulighet til å dele på sosiale medier + Personalisering ved valg av skriftstørrelse og mulighet til å lagre artikler + God responstid + Indikasjon på at noe faksisk skjer ved innlasting av nye sider -- Horisontal scroll ved artikkellesning. Oppleves ikke intuitivt -- Spalter med tekst i artikkel -- Ingen mulighet til å dele på sosiale medier -- Ingen mulighet til å tipse redaksjonen CNN Figur 3.14: Forside, artikkel, personalisering av forside og brukervalg i CNN. CNN er en amerikansk nyhetskanal. Grunnet applikasjonens skriftlige formidling av nyheter ble den vurdert på tross av at CNN ikke er en avis. 26

+ Personalisering ved tre mulige visningsvalg av forsiden: små bilder for hver artikkel, listevisning, og fullskjermsbilder + Reklame integrert på forsiden + Original og innovativ artikkelvisning med vertikal scroll på kun teksten. Bruker kan svipe gjennom bilder tilhørende artikkelen. De resterende elementene er statiske + Reklame på fast plass i artiklene + Enkel og oversiktlig meny + Kategorivalg i menyen + Mulighet for deling på sosiale medier + Responstiden oppleves som god. God flyt i applikasjonen -- Vertikal scroll på forsiden -- For mange saker på forsiden, liten variasjon i størrelse på disse. Oppleves rotete og uoversiktlig -- Ingen mulighet til å tipse redaksjonen Resultatet av kartleggingen av eksisterende applikasjoner ble viktig for utformingen av krav til prototypene, beskrevet i Kapittel 4, Krav til prototypene. 3.3 Brukerundersøkelse Det ble gjennomført en brukerundersøkelse for å kartlegge interessen for konseptet lokalvis.no. Brukerundersøkelsen hadde 52 respondenter, med en lik fordeling mellom kjønn. I alder var det en overvekt av personer fra aldersgruppen 19-29 år. 67,9 % av respondentene svarte at de ikke leser lokalaviser fra andre steder enn sitt lokalområde, men 79,2 % svarte at de gjerne kunne tenke seg dette hvis de var på besøk et sted. Figur 3.13 viser at 73,6 % svarte ja på spørsmålet om de ville benyttet seg av muligheten for geolokasjon av lokalavis. 27

Nei 26,4% Ja 73,6% 0 10 20 30 40 Figur 3.15: Graf: benyttet seg av muligheten for geolokasjon av lokalavis.no. 38 av 52 respondenter svarte ja på spørsmålet om de kunne tenke seg å benytte seg av et nettsted som samlet alle lokalavisene på ett sted. Figur 3.14 viser en oversikt over hvilken informasjon respondentene ønsker å finne i en lokalavis. Disse kategoriene ble tatt med videre til utformingen av prototypene. 50 45 40 35 30 25 20 15 10 Siste ny//aktuelle nyheter Underholdning Sport Bildeserier Ne/- Tv Annet 5 0 Figur 3.16: Illustrerer hvilke kategorier respondentene ønsker å finne i en lokalavis Konseptet og de positive tilbakemeldingene fra brukerundersøkelsen ble presentert for oppdragsgiver. Det ble enighet om å ta med konseptet videre til utviklingen av prototypene. 28

Kapittel 4 Krav til prototypene På bakgrunn av erfaringene fra kartleggingen ble det definert krav til utformingen av prototypene. Det ble fokusert på å unngå de negative funnene fra kartleggingen av eksisterende applikasjoner, og å ta med seg de elementene som ble opplevd som positive. Disse kravene var grunnlaget for det videre arbeidet med utformingen av prototypene. Oppdragsgiver stilte ingen krav utover type applikasjon og utviklingsspråk. Krav til prototypene ble dermed utformet uten innspill fra APDM. 4.1 Krav til lokalavis.no Geolokasjon: Finne nærmeste lokalavis Søk: Søk etter ønsket lokalavis. Oversikt over lokalaviser: Oversikt over alle lokalavisene til A-pressen. Nyheter: Oversikt over siste nytt i henhold til hvilken avis som er valgt. 4.2 Krav til romerikesblad.no Reklame o Helside. o Rubrikk. Horisontal sveip: Etterligne papiravis. Meny o Statisk: alle menyikoner er tilgjengelige fra hele applikasjonen. Personalisering o Filtrering: brukere får mulighet til å velge kategori. Artikkeloppsett o Horisontal sveip gjennom bildegalleri på topp i artikkel. o Scroll av kun tekst i, resterende statisk. 29

o Reklame som samhandler med temaet i artikkel. Søk etter innhold. Del artikler og bilder på sosiale medier. Tips redaksjon. Tekst, bilde og/eller video. Bildegalleri. Horisontal sveip mellom bilder i fullskjerm. 30

Kapittel 5 Teknologier Any sufficiently advanced technology is indistinguishable from magic. Arthur C. Clarke 5.1 Berøringsskjerm Berøringsskjerm er en skjerm som lar brukeren kommunisere med enheten ved hjelp av trykk på skjermen. Alle nettbrett, inkludert ipad, har berøringsskjerm. Denne teknologien har både fordeler og ulemper. 5.1.1 Fordeler Bruker trenger ikke interagere med andre enheter enn selve skjermen, mus og tastatur går bort. Lenger levetid da det er få fysiske knapper som kan gå i stykker grunnet slitasje. Fungerer som en toveis- enhet; både input og output. Hastighet; det er mye raskere å trykke på noe med fingeren, enn med enheter slik som en mus. Store skjermer er ideelle for søk på nett, se på bilder og filmer. (Pope, John Pope, 2010) 5.1.2 Ulemper Bruker må være innenfor rekkevidde av skjermen. Brukers hånd eller fingre kan gjøre skjermen uklar eller skitten. Dårligere kvalitet på lysstyrken, ved direkte sollys blir lesekvaliteten drastisk redusert. Kostnader er høyere enn ved alternative produkter. (wiki.answers, 2012) 31

Figur 5.1: Illustrerer berøringsområdet på en ipad. Nettbrett har et begrenset område av skjermen som kan nåes med letthet. ipad er ergonomisk utformet til å holdes mellom tommel og håndflate. Figur 5.1 illustrerer tommelens rekkevidde fra denne posisjonen (Saffer, 2011). 5.2 Utviklingsteknologier HTML5 og CSS3 ble brukt til utviklingen av kodet prototype grunnet krav fra oppdragsgiver. HTML5 er en standard for struktur av informasjon og beskriver hvilke egenskaper applikasjonens forskjellige elementer har. Standarden brukes til å sette opp applikasjonens fundament. CSS3 angir plassering og utseende av applikasjonens elementer. Standarden ble brukt til all tekstformatering, plassering av alle elementer i forhold til hverandre og til å angi utseende på disse elementene. CSS3 ble brukt til å tilpasse brukergrensesnittet til måten nettbrettet blir holdt på. Det ble gjort ved bruk av to dokumenter, et hver til henholdsvis stående og liggende. JavaScript ble brukt til å tilføye dynamikk til elementene. Eksempler hvor JavaScript ble brukt er popup- vinduer og svipe. JavaScript ble også brukt til å skjule adresselinjen og menyen i nettleseren ved navigasjon mellom de forskjellige HTML-dokumentene. 32

5.3 Utviklingsverktøy 5.3.1 Adobe Photoshop Photoshop er et digitalt bilderedigeringsprogram (University of Washington, 2011). Dette har blitt brukt til å fremstille alle grafiske elementer i hele prosjektperioden. 5.3.2 Notepad++ og TextMate Notepad++ er et gratis redigeringsprogram for kildekode. Notepad++ støtter flere typer kodespråk, inkludert HTML, CSS og JavaScript (Ho, 2011). TextMate har de samme funksjonene, men er utviklet for Apples operativsystemer. Notepad ++ og TextMate ble brukt til å skrive koden i forbindelse med utviklingen av kodet prototype. 5.3.3 Keynote Keynote er et presentasjonsprogram som brukes til å skape animerte fremvisninger. Keynote var utviklingsverktøyet for den digitale prototypen. 5.3.4 imovie imovie er et videoredigeringsprogram (Sanders, 2012). Redigering og ferdigstillelse av den digitale prototypen ble gjennomført i dette programmet. 5.4 Tekniske hjelpemidler 5.4.1 Dropbox Dropbox muliggjør lagring og deling av dokumenter over nettet. Flere brukere har tilgang til samme mappe. Dokumenter lagres i en mappe på datamaskinen, og blir så tilgjengelig i samme mappe både på nettet og på de andre brukernes datamaskiner (Houston, 2012). Alt 33

arbeid ble lagret i Dropbox, grunnet enkel deling og sikker lagring. Det ble også delt møtereferater og ukeplaner med intern veileder. 5.4.2 FileZilla FileZilla er en FTP-klient, brukt til overføring av filer mellom klient og webserver (FileZilla, 2011). FileZilla ble brukt til overføring av HTML-, CSS- og JavaScript-filer ved utformingen av kodet prototype. 34

Kapittel 6 Funksjonalitet Adding functionality is not just a matter of adding code. Wietse Venema 6.1 Funksjonalitet inkludert i prototypene 6.1.1 Geolokasjon Konseptet lokalavis.no bruker nettbrettets innebygde GPS-funksjonalitet til å finne brukerens lokasjon. Videre opplyses det om hvilken lokalavis som dekker nyhetene fra området brukeren befinner seg i. Dette gjør at en bruker fra Ås, som er på ferie i Bergen, vil få tilgang til BA, lokalavisen i Bergen. Figur 6.1: Før Geolokasjon søker. Figur 6.2: Etter - Lokasjon funnet. Brukeren vil også ha mulighet til å søke etter ønsket lokalavis. Søk kan gjennomføres med både steds- og avisnavn. Et tredje alternativ er å bla gjennom listen over alle A-pressens lokalaviser. 35

6.1.2 Horisontal svipe Horisontal sveip skiller utformingen av selve lokalavisen fra den tradisjonelle og statiske vertikale scrollingen som går igjen i utformingen av dagens nettaviser. Figur 6.3: Horisontal svipe. Horisontal sveip ble inkludert for å skape assosiasjoner til å bla gjennom sidene i en papiravis. Denne gjenkjennelsesfaktoren gjør nettavisen mer intuitiv. Intuitivitet er samsvar mellom forventinger og faktisk oppførsel fra webapplikasjonen (Tøfthøy-Andersen og Wold, 2011). Man trenger med andre ord ikke tenke seg om; valg virker selvsagte. Intuitivitet er grunnleggende for god brukervennlighet (Furu, 2004). Undersøkelser utført av APDM viser at tidsbruken på nettaviser øker fra 2:40 minutter ved vertikal scroll, til mellom 9 og 10 minutter ved horisontal scroll. Ved økt tidsbruk vil brukeren se flere reklamer, og på denne måten kan reklameinntekten økes. 6.1.3 Reklame Ved bruk av horisontal svipe kan fullskjermsreklamer integreres uten å forstyrre flyten. Dette gjør at reklamen naturlig får oppmerksomhet, og trenger ikke å forstyrre for å tiltrekke seg 36

brukeren. Helsides reklamer gir mulighet til å tenke nytt både med tanke på innhold og utforming. Fullskjermsreklamer kommer i tilegg til tradisjonelle rubrikkannonser. Disse kan enkelt integreres både på forsiden, mellom artikler og ved bildevisning. Figur 6.4: Fullskjermsreklame Figur 6.5: Integrert rubrikkannonse på forsiden. Rubrikkannonsene integrert i artiklene skal være i samme kategori som artikkelen de presenteres sammen med. Eksempler er reklame for kaffe i en artikkel om Friele, eller sykkelutstyr til artikkel om Birkebeinerrennet. Reklamen tilpasses på denne måten 37

målgruppen, og inntektene på disse kan øke. Det er viktig å være varsom med sensitive tema. Artikkel for slankepiller vil eksempelvis ikke sømme seg ved en artikkel om spiseforstyrrelser. 6.1.4 Del på sosiale medier Sosiale medier har blitt populært de siste årene. Det sosiale nettverket Facebook hadde fra november 2009 til januar 2012 en økning i norske brukere på 20 % (Synlighet AS, 2012). Ved å la lesere dele artikler på sosiale nettverk oppnår man en gratis markedsføring (Halogen, 2012); man får andre til å spre budskapet for seg. Med 2,6 millioner norske brukere på Facebook (Social Bakers, 2012) er det klart at man når frem til en stor gruppe potensielle nye lesere. 6.1.5 Artikler populære på sosiale medier Inne på en artikkel vil brukerne få opp en liste over hvilke artikler som er mest lest av deres venner på sosiale medier. På denne måten kan brukerne holde seg oppdatert på hva deres venner leser. 6.1.6 Tips redaksjonen Brukerne kan tipse redaksjonen, og velge å sende med bilder eller video tatt med nettbrettet. På denne måten benyttes nettbrettets innebygde funksjonalitet. I tilegg til å kunne laste opp bilder og videoer fra nettbrettets arkiv kan brukerne også ta bilder eller video på direkten ved bruk av nettbrettets kamera. 6.1.7 Menyinndeling etter kategori Nyhetene deles inn i følgende kategorier: nyheter, sport, kultur og media. Ved å tilby nyheter filtrert på kategorier kan brukerne lese om det de interesserer seg for. Dette blir en form for personalisering av applikasjonen. Sport og kultur er selvforklarende kategorinavn med fokus 38

på henholdsvis sport og kultur. Nyheter vil si de nyeste nyhetene, fra alle kategoriene. Media er bildegallerier og videoer fra alle kategorier. 6.2 Ideer ikke inkludert i prototypene 6.2.1 Flere sosiale medier Det vil være viktig å følge med på trender innen sosiale media. Å tilby deling på kun de største, som Facebook og Twitter, vil ikke være tilstrekkelig. Eksempler på nye, og populære, sosiale medier er Instagram, med 30 millioner registrerte brukere (Bennsmann, 2012) og Pinterest, med 10 millioner unike treff hver måned (Constine, 2012). 6.2.2 Personalisering Personalisering inkluderer: Mulighet til å endre skriftstørrelse. Mulighet til å endre fargene i brukergrensesnittet til lysere farger, eller andre fargeprofiler etter brukerens egne preferanser. Et menyvalg som inkluderer innstillinger og preferanser som kan settes og endres av brukeren selv. Det kan også være mulig å opprette en brukerprofil. Dette er funksjonalitet for personalisering som allerede tilbys av diverse nettavisapplikasjoner, og som ble tatt med videre fra kartleggingen i kapittel 3. Ny, ikke eksisterende funksjonalitet er automatisert personalisering. Automatisert personalisering vil si personlig tilpassing av applikasjonen uten input fra bruker. Applikasjonen vil registrere hvor lang tid som brukes på artikler, og hvilke kategorier artiklene tilhører. På denne måten vil kategorier som det sveipes fort gjennom bli viet mindre plass på forsiden. Artikler i samme kategori som artikler brukt lang tid på vil dukke opp oftere. Automatisert personalisering avhenger av at fremtidens teknologi vil støtte funksjonaliteten. Det ble vurdert å legge til et valgalternativ på artikler, slik at brukerne selv kan filtrere ut kategorier de ikke liker. Tilbakemeldingen fra oppdragsgiver var at det ville være mer hensiktsmessig å la brukeren like artikler. På denne måten vil artikler om emner brukeren er positiv til få større plass, og hele applikasjonen vil oppleves mer positiv. 39

6.2.3 Interaktiv reklame Reklame i fremtiden forventes å være mer interaktiv enn per dags dato. Film, spill, og interaktive konkurranser kan være mulige virkemidler for å tiltrekke seg brukernes oppmerksomhet. 6.2.4 Stemmestyring ipad 2 støtter stemmegjenkjenning, om ikke stemmestyring. Det finnes i midlertidig native applikasjoner som støtter stemmestyring og gjenkjenning (Machlis, 2011). Dette gjør stemmestyring av den mobile webapplikasjonen mulig med dagens teknologi. Inspirert av Apples «intelligente» applikasjon for stemmegjenkjenning og styring, Siri (Apple, 2012), vil applikasjonen styres av brukerens stemme. Talekommandoer som «Neste side» og «Forside» vil tolkes og utføres av nettbrettapplikasjonen uten nødvendig interaksjon på berøringsskjermen. 6.2.5 Naturlig opplesning av artikler Funksjonaliteten for opplesning av artikler vil være like god som ved en lydbok. Dette blir da et tilbud ikke bare til synshemmede, men også til funksjonsfriske brukere som ønsker avisartiklene over audio. Sammen med stemmestyring gir dette en helt ny måte å kommunisere med applikasjonen på. 6.2.6 Teleportering Teleportering vil være nyttig ved reklame. Reklame for Freias nye sjokolade? Ta en smaksprøve gjennom skjermen! Denne ideen ble ikke tatt med til videreutvikling. 6.2.7 Tankelesning 40

En idé som heller ikke ble videreutviklet er tankelesing. Applikasjonen vil automatisk lese brukerens ønsker og vise frem ønsket innhold uten å trenge mer interaksjon. 6.2.8 Frakoblet lagring Med HTML5 er det mulig å lagre data lokalt i nettleseren. Dette kan brukes til å tilby lagring av artikler til senere lesning. På denne måten kan bruker lagre avisartikler og lese disse senere, også uten internettilkobling. 41

Kapittel 7 Prototyping A design based on a prototype is a design based on experience and practice. Todd Zaki Warfe 7.1 Introduksjon til prototyping Det ble i dette prosjektet utformet tre forskjellige prototyper, som hver hadde sin funksjon. Prototyper brukes til å teste om designet av systemet og/eller brukergrensesnitt møter brukernes forventninger og behov. Prototyping er essensielt innenfor ethvert utviklingsmiljø. Både design av en stol og design av et brukergrensesnitt må testes før det tas i bruk. Prototyper kan enkelt evalueres og endres før implementering av det ferdige produktet. Det er mye enklere, og billigere, å endre en prototype enn et ferdig produkt (Snyder, 2003). 7.2 Metoder for prototyping 7.2.1 Lavnivå prototype En lavnivå prototype er rask og billig å produsere. Papirprototyping er den vanligste metoden på dette nivået. En prototype på papir er en enkelt utformet versjon av brukergrensesnittet som skal testes, med en person i rollen som datamaskinen, som styrer prototypen til å interagere med testbrukeren (Snyder, 2003). 7.2.2 Høynivå prototype En høynivå prototype er nærmere det ferdige produktet, med mer detaljer og funksjonalitet. Her blir det lagt ned mer arbeid i utformingen av prototypen, og det er derfor ikke like enkelt å 42

gjøre endringer. Høynivå prototyper er digitale, og ofte kodet i programmeringsspråket som skal brukes til det ferdige produktet. 7.3 Prototypene 7.3.1 Prototype 1 Papir Papirprototypen ble utviklet for å brukerteste funksjonaliteten. Figur 7.1: Papirprototypen forside romerikesbald.no Prototypen ble enkelt utformet ved hjelp av blyant og papir. Logoen til avisen og menylinjen ble skrevet ut for å skape en illusjon av et nettbrett for brukeren. Resten av prototypen ble tegnet for hånd. Ved bruk av blyant var det enkelt å gjennomføre endringer mellom brukertestene, og på denne måten teste tilbakemeldinger raskt (Snyder, 2003). 7.3.2 Prototype 2 - Kodet Mulighetene ved en berøringsskjerm er vanskelig å teste ved bruk av en papirprototype, og det ble derfor utformet en høynivå prototype på ipad. Prototypen er en mobil webapplikasjon. Den ble utformet med HTML5 og JavaScript, og designet ble utformet ved hjelp av CSS3. 43

Figur 7.2: Kodet prototype artikkelside. En interaktiv prototype engasjerer brukeren i større grad. Det er lettere å prøve seg frem, eksempelvis ved svipe-funksjonen. Det vil ikke være naturlig å svipe på en papirprototype. Kodet prototype er tilgjengelig i nettleser på ipad på denne linken: http://cube.iu.hio.no/~s161929/lokalavisen/ Denne kan legges til på hjem-skjermen fra nettleseren Mobile Safari. 7.3.3 Prototype 3 - Digital Den digitale prototypen illustrerer all funksjonalitet, inkludert fremtidsrettede ideer som ikke er mulig å kode per i dag. Konseptet lokalavis.no illustreres, samt brukergrensesnittet. På denne måten får oppdragsgiver en helhetlig opplevelse av applikasjonen. Prototypen ble utformet på grunnlag av resultatene av brukertestene. Verktøy som ble brukt til utformingen var Adobe Photoshop, Apple Keynote og imovie. Den digitale prototypen ble utviklet som en film, uten mulighet for interaksjon med bruker, og det var derfor ikke mulig å gjennomføre brukertestene med den. Den digitale prototypen er tilgjengelig i nettleser fra følgende link: http://dl.dropbox.com/u/2060779/digitalprototype.m4v 44

Kapittel 8 Design og brukervennlighet You ve got to start with the customer experience and work backwards to the technology. Steve Jobs 8.1 lokalavis.no Brukervennlige nettsider er intuitive og gir brukeren god lesbarhet (Toftøy-Andersen & Wold, 2011). God brukervennlighet er selvsagt ønskelig, men ikke enkelt. Designet til lokalavis.no er utformet for å oppnå brukervennlighet. Visuelt design handler om problemløsing (McKeever, 2009), om hvordan få personer til å bruke applikasjonen uten å tenke over hva de skal gjøre. 8.1.1 Farger Figur 8.1: Hovedfarger lokalavis.no Logoen til A-pressen er rød, som illustrert i figur 8.2. Det tilhørende grafiske elementet i logoen drar inn fargen oransje som er valgt som den gjennomgående nyansen hos lokalavis.no. 45

Det ble gjennomført en test av fargekontrasten på nettstedet snook.ca. Fargespekteret og kontrastforholdet mellom elementene som er benyttet i applikasjonen er innenfor anbefalingene gitt av WCAG 2.0. Kontrasten er på minst 3:1 på større tekst (W3C, 2012). Resultatet av kontrasttestene kan sees i vedlegg 13. Figur 8.2: A-pressens logo Fargene besto sjekken på WCAG 2.0 nivået AA. Grått som bakgrunnsfarge på hovedseksjonen er valgt på grunn av nøytraliteten som fargen gir, og at det gir en god kontrast mot den hvite skriften. Dette gir igjen god lesbarhet. 8.1.2 Font Typography exists to honor content. Robert Bringhurst Figur 8.3: Fontvalg Sans-serif fonten Bebas Neue er valgt som hovedfont. Sans-serif foretrekkes av svaksynte, fremfor fonter med ujevn tykkelse og med seriffer (Blindeforbundet, 2010). Bebas Neue er kraftig og består av blokkbokstaver. Fonten vil ikke passe til mye tekst, men på lokalavis.no gir den god lesbarhet ved at den brukes til korte informative setninger. 8.1.3 Oppsett lokalavis.no er utformet med tre hovedseksjoner; header, hovedinnhold og footer. Disse er plassert for å komplimentere hverandre. 46

Figur 8.4: Design av lokalavis.no. Headeren øverst ønsker brukerne velkommen med en enkel og informativ hilsen. A-pressens logoer er inkludert for å skape en konkret gjenkjennelsesfaktor. Bruk av logoen skaper trygghet ved at brukerne vet de er inne på webapplikasjonen til et kjent selskap. Hovedinnholdet er sentrert. Til venstre er det plassert en oversikt over artikler i nærområdet. Denne vil endre seg ettersom brukerne endrer hvilken lokalavis de vil lese. Disse er utformet som kvadratiske bilder med overskrift. Det ble valgt å visualisere artiklene, i stedet for listevisning. Dette gjør det mulig å absorbere store mengder data raskt. Sitatet A picture is worth a thousand words, har vært rettesnoren (Wikipedia, 2012). Funksjonaliteten for geolokasjon er plassert til høyre. Lokalavisens logo blir presentert. Dette gir igjen en gjenkjennelsesfaktor. Muligheten for søk etter annen avis ligger rett under logoen. Søkebaren er hvit med et ikon som illustrerer et forstørrelsesglass. Ikonet indikerer, sammen med teksten Finn selv, muligheten for søk. Den siste seksjonen er footeren. Et rektangel illustrerer en knapp. Denne fører brukeren videre til en oversikt over alle lokalavisene. A-pressen har 46 nettaviser (A-pressen, 2012) 47

.Lokalavisene er illustrert med logoene. Disse er listet opp i et rutenett, og linker til nettavisen, som åpnes i samme webapplikasjon. Til venstre er det en link til den lokalavisen som er mest lest de siste dagene. I bunn er det plassert et rektangel som igjen illustrerer en knapp. Denne fører brukerne videre til lokalavisen valgt av geolokasjon, eller lokalavisen ved valg manuelt. Her er avisens logo igjen brukt for å skape gjenkjenning, og for å unngå forvirring. 8.2 romerikesblad.no romerikesblad.no er valgt for å illustrere brukergrensesnittet til en av A-pressens nettaviser. Fargevalg vil tilpasses etter den grafiske profilen tilhørende hver avis. 8.2.1 Farger Sort og hvitt er valgt som hovedfarger. Det ble også her gjennomført en kontrastsjekk. Resultatet ligger under vedlegg 13. Fargene gir gode kontraster. Det ble valgt en mørk brukergrensesnitt for å skape et skille fra det nåværende designet, og for å skape et profesjonelt uttrykk. Figur 8.5: Fargevalg romerikesblad.no. 8.2.2 Font Typography has one plain duty 48

and that is to convey information in writing. Emil Ruder Figur 8.6: Valg av font. Bebas Neue er brukt i overskriftene i den digitale prototypen. Ved å bruke den samme fonten som på lokalavis.no, får applikasjonen en gjennomgående profil. Fonten er ikke like kjent som de web-sikre fontene. Med dette skiller A-pressens nettaviser seg fra de andre på markedet. Helvetica er brukt i brødteksten, og i overskriften i artiklene på kodet prototype. Sans-serif er igjen valgt grunnet fordelen for svaksynte (Blindeforbundet, 2010). 8.2.3 Meny I bunn er det plassert en statisk menylinje. Denne er det mulig å få tilgang til fra alle sidene. Denne form for meny gir god oversikt over informasjonen, og gir tilgang til flere kategorier samtidig (Apple, 2012). Figur 8.7: Menylinjen. Apple har statisk oppsett av meny på sine native applikasjoner (Apple, 2012), og ved å velge denne form for meny skapes det en gjenkjennelsesfaktor. Dette fører igjen til god brukervennlighet. Det begrensete antallet menyvalg, og plasseringen av disse i forhold til hverandre, er i henhold til Apples retningslinjer for design til ipad (Apple, 2012). 8.2.4 Oppsett forside 49

Forsidens hensikt er å gjøre artiklene synlige og innbydende. Å tilby nyheter og tjenester som folk vil bruke fører til økt kundetrafikk, som igjen fører til økt reklameinntekter. Å gi annonser synlig og kommersiell plassering gjennom hele applikasjonen kommuniserer et kjøpsbudskap til leseren (A-pressen Digitale Medier, 2012). På romerikesblad.no er det plassert en reklame på forsiden, for å illustrere mulighetene for rubrikkannonser på nettbrett. Figur 8.8: Forsiden romerikesblad.no. Overskrift er plassert over artikkelbildene, og de større bildene har også mer beskrivende tekst for å vekke leserens interesse. Brukergrensesnittet er utformet med rutenett, dette påtvinger orden og etablerer flyten i applikasjonen. Det er det viktigste strukturerende verktøy designere har og er viktig i informasjonstunge nettsteder (Nedregotten, 2011). En tradisjonell header er plassert på topp av skjermen. Her er logoen til lokalavisen plassert. I dette tilfellet er det Romerikes Blad. Den vanligste plasseringen av logo er øverst til venstre, grunnet lesemønsteret fra høyre til venstre, topp til bunn. På denne måten vil logoen mest sannsynlig være det første brukeren ser (Remick, 2008). Headeren inkluderer også en mulighet for å tipse redaksjonen, og ikoner for deling på de sosiale mediene Facebook og Twitter. En søk-bar er plassert på topp for mulighet til søk etter artikler. Selve hoveddelen er delt inn i ulike rektangler hvor det er gjort plass til artikler. Elementene i brukergrensesnittet er avgjørende for en fungerende og estetisk tiltalende lokalavis (Remick, 50

2008). Elementene er delt opp i det gylne snitt. Dette er en matematisk formel, som regner ut hvordan elementer best kan plasseres i forhold til hverandre. Det gylne snitt er bitt brukt gjennom århundrer i både arkitektur og design (Remick, 2008). Figur 8.9 viser hvordan forsiden er plassert i forhold til dette prinsippet. For å plassere elementene er det benyttet rule of thirds. Rule of thirds er en forenklet versjon av det gylne snitt som er mye brukt i nettdesign. Hovedideen er at hver sammensetning kan deles inn i ni like store deler, bestående av to like horisontale linjer og to like linjeavstand loddrette linjer, som da former et enkelt rutenett (Burton, 2011). Figur 8.9: Det gylne snitt. 51

8.2.5 Oppsett artikkel Figur 8.10: Brukergrensesnitt artikkel. Artikkelens brukergrensesnitt er delt inn i 3 hovedseksjoner utenom den statiske menylinjen i bunn og headeren på topp. Øverst er det plassert et galleri med bilder til den tilhørende artikkelen. Her kan brukeren svipe horisontalt for å se flere bilder. Det er også mulig å trykke på bildene for et fullskjermsgalleri. Under bildene er selve artikkelteksten. Den er skrevet med svart font på hvit bakgrunn som gir god lesbarhet. Brukergrensesnittet er plassert i det gylne snitt også på denne siden. Lengst til høyre er det plassert anbefalte artikler for leseren med en oversikt over de mest populære artiklene blant venner på Facebook og Twitter. Under artikkelteksten er det plassert en rubrikkannonse. 52