Markedsføring av Studentprosjekter

Transkript

1 Markedsføring av Studentprosjekter Vår 2019 BO19-G18 Gabriella Cuic Martin Bredholt Anette Jørgensen Mica Angela Medrano Bachelor i digitale medier og informasjonssystemer Høgskolen i Østfold

2

3 Forord Her kommer det til å komme et forord fra bachelorgruppen. i

4

5 Sammendrag Kommer til å innholde hva prosjektet går ut på, metoden som ble brukt (hvordan dataene ble samlet osv), resultat og konklusjon fra hele oppgaven. i

6

7 Takk Til Her kommer et takk til avsnitt. iii

8

9 Innhold Forord Sammendrag Takk Til Figurliste Tabelliste Kodeliste i i iii vii ix xi 1 Introduksjon Prosjektgruppen Oppdragsgiver Oppdraget Formål, leveranser og metode Rapportstruktur Forarbeid og analyse Prosjektet Design Heuristisk evaluering Universell utforming Digitalt bibliotek Søkemotoroptimalisering (SEO) Tekniske løsninger Sammendrag Design Metoder Funksjonsbeskrivelse Struktur Ekspertintervju Brukertest og evaluering Prototyping og brukertesting Resultater 33 v

10 vi INNHOLD 6 Diskusjon 35 7 Konklusjon 37 Bibliografi 39 Register 41

11 Figurer 2.1 Brage.bibsys.no Masteroppgaver fra Høgskolen i Østfold, fra brage.bibsys.no GOGO Digital PageSpeed Insights resultat for GOGO Digital Facebook pop-up boks Screenshot av studentarbeid.kristiania.no Screenshot av Screenshot av blogg.noroff.no Screenshot av projekter.aau.dk/projekter/ skjermbilde av Store Norske Leksikons html oppsett skjermbilde av Google søkemotor skjermbilde av resultatene fra Google Eksempel av Google Ads på søksresultater (skjermbilde) Permalink innstillinger fra Wordpress Content Management System Brainstorming av navigasjon prosjektet Kortsortering for kategorier Design Thinking Process 28 vii

12

13 Tabeller ix

14

15 Kodeliste xi

16

17 Kapittel 1 Introduksjon Først vil gruppen introdusere sine medlemmer og skrive litt kort om en og hver av de. Deretter vil gruppen presentere oppdragsgvieren, samt oppdraget som ble valgt. Gruppen skriver videre om formålene til prosjektet, både hovedmål, delmål og ønskelige mål. Leveransene som skal bli gjort i løpet av semesteret blir deretter beskrevet, samt metode for å nå alt som skal bli gjort. Til slutt beskriver gruppen rapportstrukturen for hoveddokumentet, for å gi leserne en god oversikt over hva de kan forvente. 1.1 Prosjektgruppen Anette Jørgensen Anette gikk studiespesialisering på Frederik II vgs, og gikk deretter rett på Bacheloren i digitale medier på Høgskolen i Østfold. Hun har alltid hatt en stor interesse for informasjonsteknologi og data, og fant at digitale medier passet perfekt for henne. På studiet har hun lært mange nye språk, som HTML, CSS og Javascript, samt lært nye programmer som Maya, Illustrator, Premiere Pro og Unity. Fag som Anette tok stor interesse i var 3D-modellering, Grafisk design og Brukerorientert design. I fremtiden ønsker hun å jobbe som webutvikler eller UXdesigner. Martin Bredholt Studerer Bachelor i informasjonssystemer på Høgskolen i Østfold. Før han begynte på HiØ tok han studiespesialisering på Mysen Videregående skole. Interessene er teknologi, data og fotball. Grunnen til at han valgte dette studiet er fordi han synes dette virket interessant. På dette studiet har han lært flere programmeringsspråk, som er HTML, CSS, JavaScript og JAVA. Studiet har også hatt flere gruppeprosjekter slik at når man skal jobbe i en bachelorgruppe er han kjent med dette. Å jobbe i grupper er også noe han synes er interessant. Når han er ferdig med bacheloren ønsker han å få en relevant jobb. Gabriella Cuic Studerer Bachelor i digitale medier og har blitt godt kjent med front-end temaer, samt litt back-end temaer. Språk som HTML, CSS og JavaScript har hun lært å bruke gjennom studiet, men hun har også blitt kjent med programmer som Maya, Unity og Premiere Pro. Hun er veldig interessert i form og farger, og fagene 3D-modellering og Grafisk design ble fort hennes favorittfag i studiet. Ellers har hun mange års erfaring innen tradisjonelt og digitalt tegning. Verktøy hun bruker innenfor digitalt tegning er Wacom Intuos Pro og Photoshop. Mica Angela Medrano Studerer Bachelor i digitale medier. Utdanningen har emner som er innenfor webdesign. Interesser inkluderer videoredigering som ble også lært gjennom dette studiet. På videregående skolen gikk hun studiespesialisering linje. Målet er å drive med videoproduksjon, innholds skapning, eller digital markedsføring. 1

18 2 Kapittel 1. Introduksjon 1.2 Oppdragsgiver Høgskolen i Østfold er en statlig offentlig høgskole i Norge som ble etablert 1.august , og tilbyr over 100 studier. Studiene er fordelt i moderne lokaler i Halden og Fredrikstad som har rundt studenter og 620 ansatte i ulike stillinger 2. Fagområder skolen tilbyr er helse og velferd, ingeniør, samfunnsfag og språk, økonomi, administrasjon og ledelse, informasjonsteknologi, lærerutdanning og pedagogiske fag og scenekunst 3. Høgskolen i Østfold har også samarbeidspartnere i utlandet slik at studentene har muligheten til å ta deler av studiet i for eksempel Australia, Kina, England, Sør-Afrika eller Frankrike 4. Spesifikt er oppdragsgiveren Høgskolen i Østfold avdeling for informasjonsteknologi. Avdeling holder til i Halden og har 17 forskjellige studieprogrammer 5. IT-avdelingen har sin egen linjeforening, kalt Enigma, der studentene har muligheten til å være sosial med andre IT-studenter, men også delta i bedriftspresentasjoner 6. I tillegg har avdeling for informasjonsteknologi sin egen lekerom, kalt Makerspace, der studentene kan prøve ut ny teknologi og lage sine egne prosjekter med alt avdelingen har å tilby. Det avdelingen har å tilby er for eksempel 3D-printer, drone, og VR 7. Kontaktpersonen til prosjektet er Susanne Koch Stigberg som blant annet jobber for Høgskolen i Østfold avdeling for informasjonsteknologi. Hun er både forsker og foreleser ved avdeling for informasjonsteknologi. Hennes forskningsinteresse er i mobil interaksjonsdesign og hun er emneansvarlig i faget Brukerorientert design Oppdraget Høgskolen i Østfold har mange studentprosjekter på IT-avdelingen, både fagprosjekter, bachelorprosjekter og mastergrad prosjekter. Disse kan variere fra blant annet ferdiglaget spill, animasjonseller markedsføringsvideoer, nettsted, og apper. Skolen har derimot ikke eget system for å vise frem disse prosjektene, derfor ønsker skolen å finne på løsning med hjelp fra studentene. Oppdraget til prosjektgruppen blir å finne en lett tilgjengelig løsning på det skolen ønsker å fremvise. Det oppdragsgiver ønsker er et nettsted med innloggingssystem, slik at brukere og administrasjonen kan logge seg inn og legge til samt endre sine prosjekter. Prosjektgruppen påtar seg denne oppgaven, og ønsker å finne en enkel måte å vise frem prosjektene som en offentlig visning via en projektor eller TV-skjerm. Prosjektgruppen ønsker å prøve å finne en kreativ teknisk løsning på den offentlige visningen med bruk av kinect eller lignende teknologi. Prosjektgruppen ønsker også å implementere en funksjon hvor det skal være lett for nettstedets besøkende å finne kategoriserte prosjekter. 1 iøstfold hhttps://

19 1.4. Formål, leveranser og metode Formål, leveranser og metode Formål Hovedmål Å vise studentprosjekter fra IT-avdelingen ved Høgskolen i Østfold på en interessant og interaktiv måte. Delmål 1 Skape et innloggingssystem for administrator Delmål 2 Utvikle et kategorisering funksjon for eksisterende og fremtidige prosjekter Delmål 3 Bygge kompetanse, kunnskap, og forståelser innenfor webdesign, kreativ tenking og brukerforståelser Ønskelig mål Implementere andre type teknologier for å forbedre interaksjonen mellom brukere og ferdig produktet Leveranser Gjennom bacheloroppgaven våren 2018 vil prosjektgruppen i samarbeid med veileder og kontaktperson skape et verktøy som vil kunne vise frem studentprosjekter fra IT-avdelingen på Høgskolen i Østfold på en interaktiv måte. Prosjektgruppen skal gjennom brukskvalitet- og design metoder undersøke muligheter på hvordan nettstedet kan enklest mulig bli vist frem, både på nett og offentlig visning i IT-avdelingen på Høgskolen i Østfold. Hensikten er å utvikle et ferdig nettsted, slik at tidligere og fremtidige prosjekter fra ITavdelingen på Høgskolen i Østfold kan fremvises på en enkel måte. Målet for prosjektet er å kunne legge et enkelt grunnlag for at grupper og enkeltpersoner skal kunne logge seg inn og legge til sine egne prosjekter. I tillegg skal et hoveddokument leveres samtidig med ferdig produktet. Dokumentet skal inneholde hele prosessen til prosjektet. Det vil si fra startfasen til sluttfasen, samtidig konklusjon, og diskusjoner om elementer som er i selve nettsiden, endringer fra delmål, ideer og funksjoner som funket og ikke har funket. Metode Gruppemedlemmene har tidligere hatt fag som skal bidra til å nå målene som ble satt opp. Disse inkluderer Informasjonsarkitektur, Designmetoder, Webutvikling, Prosjektledelse, Kommunikasjonsdesign, og Innføring i programmering. Først og fremst vil gruppen lage flere skisser med forskjellige design som er relevante til prosjektet. Etter dette skal prototype og brukertesting bli gjennomført. Prosjektgruppen vil utføre brukertestingen på varierte brukergrupper, for å få et større perspektiv. Resultatene skal brukes til å gjøre ferdig oppdraget gruppen har fått. Sluttfasen kommer når produktet blir ferdig laget. Gjennomføring av ny brukertest er inkludert for evt. relevante og viktige endringer som bør gjøres før fristen. a. 1.5 Rapportstruktur Første kapittelet handlet om all informasjon om oppdraget og all grunnleggende informasjon, altså formål, leveranse og metode. I forarbeid og analyse kapittelet skal gruppen i dybde analysere oppdraget og konkurrenter, samt gjøre litteratursøk og beskrive tekniske løsninger. Dette skal inkludere vurdering om design, platform, heuristisk evaluering og mulige tekniske løsninger knyttet til

20 4 Kapittel 1. Introduksjon bachelorprosjektet. I kapittel tre skal gruppen beskrive alle designmetodene brukt for å anskaffe informasjon. Dette inkluderer ekspertintervjuene, scenarioer og personas, samt workshops vi gjør med potensielle brukere. I kapittel fire starter gruppen med brukertesting. Her skal hele prosessen dokumenteres, alt fra hvilke spørsmål og oppgaver vi velger å ha med til utførelsen av testingen. Vi skal brukerteste etter hver milepæl av designprosessen. Det vil si at vi brukertester etter første prototype og etter hvert steg frem til vi er ferdige med nettstedet. Kapittel fem vil både bestå av resultatene fra kapittel 4, og resultatene av hele prosessen ved å lage dette prosjektet. Gruppen vil i kapittel seks beskrive valgene vi har valgt, og diskutere hvorfor vi har gjort alle valgene. Her vil blant annet valg av CMS og design bli inkludert. Til slutt vil vi skrive konklusjonen i kapittel syv, altså hva vi har kommet frem til med denne oppgaven, og hva vi har lært gjennom semesteret mens vi har arbeidet med prosjektet.

21 Kapittel 2 Forarbeid og analyse I dette kapittelet presenterer prosjektgruppen forskning og litteratursøk som er relevant for prosjektet. Kapittelet tar for seg hva som er nødvendig å fokusere på når man skal utvikle et nettsted. Prosjektgruppen har også valgt å bruke heuristisk evaluering for å analysere andre lignende nettsider. 2.1 Prosjektet Høgskolen i Østfold har utallige mange prosjekter liggende, men som ikke blir vist frem. Dette er noe vår oppdragsgiver ønsker å endre, og derfor blir dette vår oppgave. De ønsker å kunne vise frem alt av prosjekter og oppgaver ved IT-avdelingen ved Høgskolen i Østfold. Prosjektet til gruppen består av å komme opp med en løsning som egner seg til å vise frem prosjekter på best mulig måte, både når det gjelder å kunne legge til nye prosjekter, funksjonene og designet på nettstedet som skal bli lagd. Til nærmere forklaring, må gruppen finne ut av hva som er viktig i ett nettsted, hvordan konkurrentene gjør det, hva som finnes av tekniske løsninger, og ut ifra dette kunne lage en fin løsning til prosjektet. Skolen tilbyr både Bachelor og Master oppgaver, men de er ikke lett å få tak i slik de burde være. Etter nærmere undersøkelse, fant vi ut av at det var vanskeligere enn det det burde være å få tak i disse prosjektene. Derfor forstår gruppen hvorfor arbeidsgiveren ønsker å skape dette nettstedet, og vise frem nettstedet på IT-avdelingen ved Høgskolen i Østfold Dagens løsning Dagens situasjon når det kommer til få tilgang til Master- og Bacheloroppgaver er at man må spørre de som lagde oppgaven om du kan få tilgang til den. Det finnes derimot Masteroppgaver, men de er ikke å finne via Høgskolens nettside. Det ligger også noen få oppgaver på skolebibliotekets nettside. Dermot ligger det også oppgaver fra andre universiteter på bibliotekets nettsted, grunnet de bruker en type søkeportal som heter Oria 1. Derfor er ikke dagens løsning optimalisert slik at det er brukbart for tidligere, nåværende og kommende studenter og arbeidsgivere. 1 sortby=rank&vid=hio&lang=no_no. 5

22 6 Kapittel 2. Forarbeid og analyse Søkemotor-optimalisering(SEO) går ut på å optimalisere nettsider for å oppnå høy rangering og synlighet hos søkemotorene på internett, for eksempel Google eller Yahoo 2. Det handler om å komme så høyt opp på listen som mulig, slik at brukere velger din nettside, istedenfor konkurrentene sine. Høgskolen i Østfold bruker søkemotor-optimalisering for å fremvise det de har å by på av studier, samt personer og annen informasjon som er å få tak i på nettstedet deres. For å finne Masteroppgaver fra Høgskolen i Østfold må man bruke søkemotorer, da høgskolens egen nettside ikke tilbyr dette. Ved å søke på Master oppgaver hiofpå Google, kommer det frem en nettside kalt Brage 3. Figur 2.1: Brage.bibsys.no Da får brukeren opp en liste over samlinger fra masterstudiumer fra Høgskolen i Østfold. Man får informasjon om at opphavsretten tilhører den enkelte biddragsyteren, og at nettstedet Brage har tillatelse til å gjøre bidragene tilgjengelige og søkbare på nett. Samlingen inneholder oppgaver på masternivå med karakter C eller bedre. Det er en oversiktlig liste med de forskjellige studiene en kan ta master i, og hvor mange oppgaver det er innenfor de forskjellige masterene. Brage kan være uforståelig for brukere som ikke har brukt siden før. En ville tro at siden tilhører Høgskolen i Østfold, grunnet logoen til skolen finnes oppe i venstre hjørnet. Dette er da ikke tilfelle, Brage er et eget næringsdrivende nettsted som samarbeider med flere høgskoler og universiteter. Derfor er Masteroppgavene fra Høgskolen i Østfold optimalisert for søkemotorer, da det kommer opp øverst på listen inne på søkemotorer. Høgskolen derimot har ingen linker fra sitt nettsted som fører til studentoppgaver, noe som gjør det vanskelig å finne frem til disse masteroppgavene

23 2.1. Prosjektet 7 Figur 2.2: Masteroppgaver fra Høgskolen i Østfold, fra brage.bibsys.no fra Brage. Som nevnt over, finner man ikke noen studentoppgaver via Høgskolens nettsted, noe som ikke er en bra løsning. Dette er fordi man forventer å finne alt på ett sted, uten å måtte søke etter andre nettsider for å finne noe med Høgskolen å gjøre i seg selv. Den beste løsningen for dagens løsning hadde vært å linke til Brage fra Høgskolens nettsted, slik at masteroppgavene blir mye mer tilgjengelig enn det de er idag Relevanse til oppgaven Vi valgte denne oppgaven da vi følte at dette var noe Høgskolen i Østfold manglet. Et sted å samle de fleste prosjekter og oppgaver fra IT-avdelingen. Å vise frem disse oppgavene vil bringe et lys på IT-avdelingens prosjekter, og skape mer relasjon. Disse prosjektene vil hjelpe nåværende, tidligere og kommende studenter med sine prosjekter og videre arbeid, håper gruppen. Det vil være en glimrende portfolio for studentene som velger å dele sine prosjekter på nettstedet, og kommende arbeidsgivere vil ha en god mulighet for å finne lett frem til prosjektene på egenhånd i tillegg. Etter undersøkelsen på dagens løsning, vet gruppen hva de ønsker å forberede. Nettstedet vil, om mulighet, være linket til på Høgskolen i Østfold sine nettsider, og det vil være enkelt å finne frem til denne linken for brukerne. Nettstedet vil inneholde både bachelor-, master-, og fagprosjekter, fordi det er enklere for alle parter om alle prosjektene fra IT-avdelingen er lagret og vist frem fra ett spesifikt sted. Gruppen skal lage et attraktivt design, for å skaffe flere brukere, og gjøre all informasjon nyttig.

24 8 Kapittel 2. Forarbeid og analyse 2.2 Design I 1999 har ba rde Dave Gehrke og Efraim Turban skrevet artikkelen << Determinants of Successful Website Design: Relative Importance and Recommendations for Effectiveness >> [12]. Artikkelen er rettet mot nettbutikker, allikevel kan resultatene fortsatt brukes til vanlige nettsteder. Ma let med dette er a kartlegge hvilke faktorer gjør en nettside effektivt og samtidig attraktivt for kundene. Gjennom literatursøk har Gehrke og Turban delte disse faktorene i fem hoved kategorier som: Side-lastingshastighet, Forretningsinnhold, Navigasjonens effektivitet, Sikkerheten, og Markedsføring. Side-lastingshastighet Ved a bruke innhold som ikke krever mye arbeid fra data og nettverk bidrar til raskere lasting av nettsider. Interaktive elementer som animasjoner osv. gjør en nettside attraktiv men samtidig kan det dra ytelsen ned. Figur 2.3: GOGO Digital GOGO Digital er en digital markedsføringsbedrift som har en nettside med utmerket design, funksjonalitet, og interaksjon. Nettstedet ble analysert ved a bruke PageSpeed Insights API (PSI) som er innebygd Google Chrome nettleser. Figur 2.4: PageSpeed Insights resultat for GOGO Digital PSI er en verktøy som utforsker nettstedets innhold for a teste ytelsen og eventuelt legger fram mulige forbedringer til nettside.4 PSI sin karakterskala er kategorisert i tre forskjellige niva er: Rødt (0-49): sakte Oransje (58-89): middels/gjennomsnittlig 4 PageSpeed Insights en-us&utm_source=psi&utm_medium=incoming-link&utm_campaign=psi.

25 2.2. Design 9 Grønt (90-100): rask Selv om GOGO Digital har en interessant nettside, har bedriften dessverre fått en lav ytelsespoeng. Selvsagt, avhenger ytelsen også om data og nettverkshastighet som er i bruk når nettside blir besøkt. Forretningsinnhold Representatsjon av virksomheten ved bruk av nettsides innhold og dens brukbarhet. Noe underkategorier fra denne delen er fortsatt aktuelle for bachelorprosjektet til gruppen som: Bruk av riktig gramatikk og stavemåte Inklusjon av <<Kontakt oss>> side Bruk av enkle fargetoner og visuelle elementer Navigasjonseffektivitet Dette er uansett en standard regel for alle nettsider. Utviklere bør sørge for å bruke forståelig ikoner og/eller nøkkelord på nettside slik at brukere kan lett identifisere hvor og hvordan de kan navigere rundt nettsider. Sikkerhet og Markedsføring Siden artikkelen fokuserer på netthandel og nettbutikker blir disse delene uaktuelt for prosjektet. Sikkerheten som er rettet mot vanlige nettsteder kommer senere i dette kappitelet som en egen seksjon Brukbarhet og brukbarhets mål Før designet til IKT tjenester og produkter blir laget bør utviklere først finne ut hensikten til produktet og hvordan dette skal bli brukt, og hvem målgruppen er[10]. Når målgruppen har blitt etablert, teamet kan da begynne å legge ut hvilke mål som trengs for å bestemme strukturen til prosjektet. Brukbarhet er hvordan brukerne kan lett få tilgang, lære, og bruke et produkt. På nettsider, dette inkluderer navigasjon, elementer som er enkle og lett å forstå, lett å huske hvordan nettstedet fungerer når enn oppgave må fullføres, osv. Det finnes et par brukbarhetsmål hver designer bør tenke på nå de utvukler et nettsted[17]. 1. Effectivity Hvor bra eller dårlig blir oppgaven fullført. 2. Efficiency Hvor rask oppgaven blir fullført 3. Engaging Brukergrensesnittet er lett å bruke, attraktivt, og gir tilfredsstillende samspill mellom brukeren og nettsiden 4. Error Tolerant Gir brukerne muligheter til å korrigere eller rette hvis de gjorde noe feil. For eksempel: Bruker 1 har trykket på slett innlegg på sin Facebook side, Facebook vil da vise en pop-up boks som spør hvis bruker 1 er sikkert på om h*n vil slette innlegget. Figur 2.5: Facebook pop-up boks

26 10 Kapittel 2. Forarbeid og analyse 5. Easy to learn En mulighet er å lage funksjonaliteter i brukergrensesnitt hvor brukerne kan lære fra hvis de skal gjøre komplekse oppgaver. Selvforklarende elementer kan bidra til at brukerne kan lett lære seg hvordan noe funksjonaliteter på nettside fungerer osv. For å teste de viktigste faktorene har gruppen gjennomført heuristisk evaluering med konkurrenter i markedet. Vær oppmerksom på at ikke alle disse faktorene ble direkte brukt. I stedet, har bachelorgruppen brukt disse som inspirasjon for å lage relevante heuristikk for dette prosjektet. 2.3 Heuristisk evaluering <<Heuristisk evaluering er en ekspertvurdering som tester et produkt eller en tjeneste mot et sett med designretningslinjer. Poenget med heuristisk evaluering er å lære av det eksisterende miljøet og identifisere hva som er verdt å beholde. >> [14, p. 325]. Når det gjelder i dette prosjektet, så skal prosjektgruppen bruke heuristisk evaluering for å finne styrker og svakheter hos konkurrentene ved å rette mot en rekke designretningslinjer som gruppen mener er viktige. Samtidig er det ikke et tradisjonelt ekspertintervju med eksperter utenfor, men gruppen valgte seg selv fordi her skal det fokuseres på konkurrentene. Målet var å finne styrker for å få ideer om hvordan nettstedet skal være og svakheter for å lære hva gruppen må være oppmerksomme på når gruppen skal utvikle et nettstedet. De fem retningslinjene: 1. Helhetlig design 2. Relevant informasjon 3. Navigasjon 4. Gjenkjennelige linker 5. Responsiv design og kompatibel med forskjellige nettlesere Heuristisk evaluering A Høgskolen Kristiania er en privat utdanningsinstitusjon som tilbyr blant annet bachelor, master og nettstudier[3]. Skolen har et eget nettsted som inneholder informasjon om studier og selve skolen, og samtidig har skolen et eget nettsted som viser ulike studentprosjekter fra fagskolestudier som kan være relevant for prosjektet. Helhetlig design Det er kontrast mellom tekst og bakgrunn, altså teksten er svart og bakgrunnen er lysegrå. Teksten helt øverst er plassert over en slags fargegradering som er over bildet, slik at bildet skal ikke forstyrre teksten. Når brukeren scroller nedover så blir det mer fokus på mørkegrå tekstfarge over lysegrå bakgrunn under prosjektene. Det er fortsatt leselig, men teksten som forteller hvilken studieretning prosjektet kommer fra og hvem som har laget dette er enda lysere. Det er ikke samme bilde helt øverst på nettsiden heletiden, men en slags video eller

27 2.3. Heuristisk evaluering 11 Figur 2.6: Screenshot av studentarbeid.kristiania.no funksjon som skifter bilder etter noen sekunder. Bildene av prosjektene nedenfor har ulike størrelser, altså enten firkantet eller kvadratisk størrelse. Nettstedet bruker logoen tydelig helt øverst i venstre hjørne, både ikon og tekst. Når det gjelder bruk av ikoner, så bruker nettstedet eget ikon for valg av studieretning. Relevant informasjon Informasjonen på nettstedet er kort og det er enkelt å lese tekstene, det er altså ikke unødvendig mye tekst å lese. Starten av nettsiden har en kort og presis tekst med introduksjon om hva denne nettsiden inneholder. Nedover på nettsiden er det bilder av prosjekter med tekst under som inneholder tittel, hvem som har laget prosjektet og hvilken studieretning den tilhører. Når man trykker på prosjekter, så dukker det opp mer tekst om prosjektet. Noen prosjekter inneholder mer informasjon enn andre, samtidig er det noen som bare har tittel, hvem som har laget prosjektet og hvilken studieretning den tilhører. Det er altså ikke alle prosjekter som har informasjon som hva, hvorfor og hvordan. Navigasjon Allerede i starten av nettstedet, så dukker det opp en kort tekst som forteller brukeren om å scrolle nedover for å se prosjektene. Teksten har en liten pil ved siden av både peker nedover og beveger seg en liten periode og forsvinner når brukeren scroller nedover. Nettstedet har ikke en navigasjonsmeny, men har en dropdown meny med ulike studieretninger å velge mellom. Denne knappen er der hele tiden når man skifter studieretning. Når brukeren trykker på et prosjekt, så dukker det opp en boks om prosjektet over selve nettstedet og brukeren har muligheten til å trykke på et tydelig svart kryss i høyre hjørne for å fjerne boksen om prosjektet. Gjenkjennelige linker

28 12 Kapittel 2. Forarbeid og analyse I starten av nettstedet er det allerede en tekst med link som sender brukeren til selve nettstedet til Høgskolen Kristiania. Dette legger man merke til ved å holde piltasten over teksten, videre skifter piltasten form fra pil til en hånd og teksten får understrek. Dessuten er logoen til høgskolen også klikkbar som sender brukeren til selve nettstedet til Høgskolen Kristiania. Som sagt så har ikke nettstedet navigasjonsmeny med knapper som linker til nettsider i nettstedet, men den har en dropdown meny som linker brukeren til forskjellige studieretninger. Linkene i dropdown menyen har beskrivende tekst som forteller hva brukeren kan klikke på. Det står altså ikke klikk her, men det står grafisk design, illustrasjon, film osv. Dessuten oppfører linkene seg som knapper, ved at det dukker opp en svart boks under linken når piltasten er over linken. Videre har prosjektene sine egne linker ved å trykke på bildet eller teksten under bildet. Når piltasten er over bildet, så dukker det opp skygge rundt bildet som kan fortelle brukeren at bildet er klikkbar. Responsiv design og kompatibelt med forskjellige nettlesere Nettsiden er responsiv på PC, nettbrett og mobil. Bilder og tekst, altså innholdet tilpasser seg ut fra hvilken skjermstørrelse som blir brukt. Samtidig er nettsiden kompatibel i nettlesere som Chrome, Edge, Firefox og Safari Heuristisk evaluering B Figur 2.7: Screenshot av Oslomet som var tidligere Høgskolen i Oslo og Akershus, er et norsk statlig universitet. Skolen tilbyr forskning og utdanning innen samfunnsvitenskap, helsefag, lærerutdanning, internasjonale studier, teknologi, kunst og design.[7]. Oslomet har et eget nettsted som inneholder informasjon om de ulike ulike studiene, forskning og selve skolen. Hvordan nettstedet er satt opp og spesielt

29 2.3. Heuristisk evaluering 13 hvordan studieoversikten er satt opp kan være relevant for prosjektet. Helhetlig design Nettstedet har store kontraster og bruker farger som gul, rød, hvit og svart på de ulike elementene. Fargen svart er mest brukt på tekstene, men i noen tilfeller blir også andre farger brukt på tekstene. Når det gjelder farger så kan man se at temaet studier og forskning blir skilt ved at bakgrunnen hos studier er gult og bakgrunnen hos forskning er hvit. Nettstedet har mye luft som gjør det enkelt å lese og bruke nettstedet. Elementer som bokser, tekst og bilder er altså ikke tett på hverandre, og gir en god flyt gjennom hele nettstedet. Logoen er helt øverst i venstre hjørne sammen med en meny og søkefelt som følger brukeren når brukeren scroller nedover. Når brukeren trykker på menyen, så dekker hele menyen hele skjermen. Når det gjelder ikoner, så bruker nettstedet blant annet egne ikoner som skal symbolisere en meny. Når brukeren trykker på menyikonet, så dukker opp menyen og menyikonet blir erstattet med et kryss som symbolisere det at brukeren kan trykke på krysset for å fjerne menyen. Relevant informasjon Det er ingen informasjon som gir en slags introduksjon av nettstedet til brukeren. Det første brukeren ser er at nettstedet inneholder studier og forskning, så brukeren kan egentlig skjønne at dette kan eventuelt handle om en skole. Videre er det brukt tall som viser blant annet antall studenter og antall forskningsgrupper. Det er også forskjellige innlegg som har en sammenheng med skolen, men dette er ikke relevant i nettstedet som skal utvikles i prosjektet. Navigasjon Nettstedet har en navigasjonsmeny helt øverst som følger brukeren over alt, altså både når brukeren scroller og havner i andre nettsider i nettstedet. Når brukeren har klikket på et studie brukeren vil se nærmere på, så dukker det opp en liten link under navigasjonsmenyen som forteller brukeren at brukeren kan trykke på denne knappen for å komme tilbake til studieoversikt. Når brukeren trykker på logoen som følger brukeren heletiden, så blir brukeren navigert tilbake til startsiden. Gjenkjennelig linker Bruker kan tydelig se at det er et strek under ordene studieoversikt, studenthistorier, forskningen vår, og forskningsnyheter som kan fortelle brukeren at her er det linker du kan trykke på. Linkene oppfører seg som en knapp fordi strekene skifter farge fra gul til svart når piltasten er over linkene. Lignende funksjoner skjer flere steder i nettstedet, for eksempel overskrifter med link. Nettstedet har dropdown menyer der brukeren kan velge blant annet utdanningstype og fagområde. Linkene har beskrivende tekst, og når brukeren velger for eksempel bachelor i fagområde dropdown menyen, så blir størrelsen på teksten fagområde

30 14 Kapittel 2. Forarbeid og analyse mindre og bachelor havner øverst under teksten fagområde. Denne funksjonen tydeliggjør at denne dropdown menyen heter fagområde. Når brukeren skal velge fagområde, så oppfører linkene seg som knapper ved at bakgrunnen back teksten skifter farge fra hvit til blå når piltasten er over linken. Responsiv design og kompatibel med forskjellige nettlesere Nettsiden er responsiv på PC, nettbrett og mobil. Innholdet tilpasser seg ut fra hvilken skjermstørrelse som blir brukt. Startsiden er helt likt på mobilen, men siden som har studieoversikt er litt annerledes. Dropdown er ikke synlige i starten, men det er en liten knapp som sier vis filter. Ved å trykke på knappen, så kan brukeren bruke dropdown menyene. Denne funksjonen gjør siden ryddigere. Samtidig er nettsiden kompatibel i nettlesere som Chrome, Edge, Firefox og Safari Heuristisk evaluering C Figur 2.8: Screenshot av blogg.noroff.no Noroff er en privat utdanningsintisusjon som tilbyr blant annet bachelor og nettstudier [6]. Skolen har et eget nettsted som inneholder informasjon om studier og selve skolen. Noroff har også et eget nettsted som inneholder forskjellige innlegg om teknologi og digitale medier som er sortert utifra dropdown meny. Dette kan være relevant for prosjektet. Helhetlig design Det er kontrast mellom tekst og bakgrunn, altså teksten er svart og bakgrunnen er hvit de fleste stedene. Det er svakere farge på teksten som forteller når innleggene ble lagt ut, og det samme gjelder teksten på breadcrumb funksjonen. Alle bildene med overskrift over har en slags mørk tone slik at teksten skal synes bedre, og det innlegget som er nyest har størst bilde. Når det gjelder bildeform, så bruker nettstedet firkantete og rektangulære bilder.

31 2.3. Heuristisk evaluering 15 Logoen nettstedet bruker er helt øverst i venstre hjørne, både ikone og tekst. Når det gjelder ikoner, så bruker nettstedet ingen spesielle ikoner, det eneste nettsteder bruker er en liten pil som peker nedover på dropdown menyen. Relevant informasjon Det er ingen informasjon som gir en slags introduksjon av nettstedet til brukeren. Brukeren kan egentlig skjønne at dette er blogg ved å se på linken til nettstedet og at dette er en blogg om en skole ved å se på tekst logoen. Videre på nettsteder kan brukeren se at nettstedet inneholder forskjellige innlegg som har en sammenheng med skolen. Brukeren kan se overskriften som gir en introduksjon om hva innlegget handler om, og samtidig er datoen når innlegget ble lagt ut tilgjengelig under bildet til innleggene. Navigasjon Nettstedet har en liten navigasjonsmeny som følger brukeren når brukeren scroller og havner i andre nettsider i nettstedet. Navigasjonsmenyen endres bare hvis brukeren trykker på knappen Noroff.no, for da kommer brukeren til et annet nettsted. Brukeren har muligheten til å velge kategori ved å trykke på slidedown menyen aktuelt. Når brukeren trykker på et innlegg, så kommer brukeren til selve innlegget. Når brukeren skal tilbake til forsiden, så kan brukeren trykke på logoen. Nettstedet har en dropdown meny der brukeren kan velge blant annet digital sikkerhet og spill. Linkene har beskrivende tekst og når brukeren skal bruke dropdown menyen, så oppfører linkene seg som knapper ved at linkene skifter farge fra svart til rød når piltasten er over linken. Gjenkjennelige linker Linkene på nettstedet er gjenkjennelige når piltasten er over overskriftene til innleggene, ved at fargen skifter fra svart til rød. Når det gjelder bildene med tekst, så er det bildene som er linker. Linkene på bildene er gjenkjennelige når piltasten er over bildene, ved at piltasten skifter form og at det kommer en slags skygge over bildet. Nettstedet har også en breadcrumb funksjon som er under navigasjonsmenyen. Når brukeren for eksempel velger et tema fra dropdown menyen, da havner brukeren til en ny side og breadcrumben legger til at brukeren er i denne spesifikke siden. Hvis brukeren vil tilbake til forsiden, så kan brukeren benytte seg av breadcrumben og trykke på hjem. Responsiv design og kompatibel med forskjellige nettlesere Nettstedet er responsiv på PC, nettbrett og mobil. Innholdet tilpasser seg ut fra hvilken skjermstørrelse som blir brukt. Navigasjonsmenyen forandrer seg når brukeren bruker mobil, ved at denne gangen må brukeren trykke på navigasjonsmeny ikonet for at menyen skal dukke opp. Menyen dukker opp fra venstre side, og der kan brukeren benytte seg av dropdown menyen for å velge tema. Samtidig er nettsiden kompatibel i nettlesere som Chrome, Edge, Firefox og Safari.

32 16 Kapittel 2. Forarbeid og analyse Heuristisk evaluering D Figur 2.9: Screenshot av projekter.aau.dk/projekter/ Aalborg universitet tilbyr bachelorutdannelser og masterutdannelser. Samtidig er AAU s utdannelser og forskning problem og prosjektbaserte og har fokus på det tverrfaglig.[1]. Skolen har et eget nettsted som inneholder informasjon om studier, forskning og selve skolen. AAU har også et eget nettsted som inneholder ulike prosjekter som kan være relevant for prosjektet. Helhetlig design Nettstedet har en hovedbakgrunn med en slags mønster som kan gi nettstedet en unik identitet for å bli fort og bedre gjenkjent. På bakgrunnen, så er selve innholdet fordelt i forskjellige bokser med enten fargen hvit, grå eller lilla. Det er en stor kontrast mellom tekst og bakgrunn noen steder der nettstedet bruker svart tekst og hvit bakgrunn. Nettstedet bruker svart farge på tekst som er overskrift og underoverskrift. Videre bruker nettstedet grå farge på undertekst over hvit bakgrunn som kan gjøre det vanskelig å lese, spesielt når underteksten har en veldig liten størrelse. Det er godt synlig når brukeren velger et prosjekt og skal lese litt om prosjektet før brukeren eventuelt skal velge å lese selve prosjektet som en PDF-fil. Nettstedet bruker logo helt øverst i midten av nettstedet, både ikon og tekst. Når det gjelder ikoner, så bruker nettstedet forstørrelsesglass ikonet på søkefeltet som en knapp for å gi søkefeltet mer visualitet. Relevant informasjon Informasjonen om nettstedet er ikke synlig før etter søkefeltet og inneholder kort og forståelig informasjon om hva nettstedet har å tilby til brukeren. Brukeren har muligheten til å se de nyeste prosjektet som er langt til nettstedet helt nederst og viser informasjons som tittel, hvem som har laget prosjektet, hva slags studieretning den tilhører og når den ble publisert. Når man trykker på prosjekter, så dukker det opp mer tekst om prosjektet. Noen prosjekter inneholder mer informasjon enn andre, samtidig

33 2.3. Heuristisk evaluering 17 er det noen som bare har tittel, hvem som har laget prosjektet, hvilken studieretning den tilhører og antall sider. Det er altså ikke alle prosjekter som har informasjon som hva, hvorfor og hvordan. Det er kanskje fordi hvis leseren vil lese mer om prosjektet, så er det en mulighet å lese hele prosjektet som en PDF-fil. Navigasjon Nettstedet har en liten navigasjonsmeny på høyre side som følger brukeren. Når brukeren navigerer seg i nettstedet, så blir knappene på navigasjonsmenyen fete for å fortelle brukeren hvilket område brukeren befinner seg i. Brukeren har også muligheten til å navigerer seg gjennom breadcrumbs funksjonen som er over søkefeltet. Det som kan forvirre brukeren når det gjelder bruk av breadcrumbs er at det er en mulighet til å navigere seg til selve nettstedet til skolen. Dette kan være unødvendig fordi skolen har allerede en logo som linker brukeren til selve nettstedet til skole. Gjenkjennelige linker I starten av nettstedet kan man allerede legge merke til at logoen til universitet er klikkbar som sender brukeren til selve nettstedet til Aalborg universitet. Dette kan brukeren se ved å holde piltasten over logoen, slik at piltasten skifter utseende til en hånd som viser brukeren at dette er klikkbar område. Nettstedet har dropdown meny der brukeren kan velge hva slags prosjekter brukeren er interessert i, og en annen dropdown meny der brukeren kan velge utdannelse. Knappene på dropdown menyene har beskrivende tekst som forteller hva brukeren kan klikke på. Linkene oppfører seg som knapper, ved at det dukker opp en blå boks under teksten når piltasten er over teksten. Videre har prosjektene sine egne linker ved å trykke på overskriften til det valgte prosjektet. Når piltasten er over overskriften, så skifter teksten farge som forteller brukeren at teksten er klikkbar. Når bruker skal se på selve prosjektene, så kan brukeren se at det er en stor boks hvor det står dokumenter. Når brukeren trykker på linken til dokumentet som er under overskriften, så lastes det ned en PDF-fil. Det ville vært eventuelt bedre om hele boksen oppførte seg som en knapp, eller om linken under overskriften oppførte seg som en knapp. Responsiv design og kompatibel med forskjellige nettlesere Nettstedet er responsiv på PC, nettbrett og mobil. Innholdet tilpasser seg ut fra hvilken skjermstørrelse som blir brukt. Navigasjonsmenyen som er til høyre plasserer seg helt nederst når bruker velger å bruke mobilen. Det samme skjer når brukeren velger et prosjekt og skal se selve prosjektet som en PDF-fil. Samtidig er nettsiden kompatibel i nettlesere som Chrome, Edge, Firefox og Safari Resultater Ved å analysere de valgte nettstedet av å følge design retningslinjer som prosjektgruppen synes er viktige, så har gruppen fått en bedre forståelse av hva som kan være nyttig og vanlig å ha i nettsteder som har noe med oversikt og sortering, samt skole.

34 18 Kapittel 2. Forarbeid og analyse Nettstedene A og C bruker bilder når brukeren skal trykke på prosjekt eller innlegg. Nettstedene B og D har bare tekst med link når brukeren skal trykke på prosjekt eller innlegg, og når brukeren har trykket på linken så kan det eventuelt dukke opp bilde og mer informasjon. Logo er plassert på toppen i venstre hjørnet på nettstedene A, B og C som skal linke til forsiden i nettstedet. Nettsted D har logo på midten helt på toppen. Navigasjonsmenyikon er vanlig å bruke i mobil skjermstørrelsen og nettsted A er det eneste nettstedet som bruker et eget ikon i tillegg til pil som peker ned på dropdown menyen. Informasjon som har en sammenheng med nettstedet er viktig for å fortelle brukeren hva nettstedet inneholder. Nettstedene B og C viser til at det ikke er alltid nødvendig med introduksjonstekst, men at elementene i seg selv på nettstedet kan fortelle brukeren hva nettstedet inneholder. Dette vil si riktig bruk av ord og setninger, samt beskrivende linker og bilder. Nettstedene A, B og D bruker navigasjonsmeny som følger brukeren når brukeren scroller og når brukeren benytter seg av nettsider i nettstedet. Grunnen til dette er at det gir en mulighet til brukeren av å ikke må hele tiden scrolle opp for å finne menyen. Samtidig bruker mange av nettstedene breadcrumb funksjonen som gir brukeren muligheten til å finne ut hvor brukeren er og kan lett komme seg tilbake igjen. Nettstedene bruker dropdown menyer når brukerne skal velge tema eller kategori, og designmessig er det noen forskjeller. Nettstedene A, B og D bruker dropdown menyer som skifter farge under linken når piltasten er over linken, mens Nettsted C har en dropdown meny som skifter farge på teksten til linken. I helhet, så kan disse elementene være nyttige når prosjektgruppen skal utvikle nettstedet: Logo øverst på venstre side Riktig bruk av ord og setninger, samt beskrivende linker og bilder. Navigasjonsmeny som følger brukeren Breadcrumb under navigasjonsmenyen Dropdown meny når det er en kategorisituasjon Overskrift eller bilde som linker til prosjekten 2.4 Universell utforming Universell utforming handler om å lage løsninger som skal kunne brukes av alle, og dette gjelder også de med nedsatt funksjonsevner. Meningen med universell utforming er at når man lager noe som skal være universelt utformet skal du nå alle målgruppene gjennom en og samme løsning[2]. Begrepene universell utforming og tilgjengelighetkan i noen tilfeller brukes om hverandre. Dette fordi begge to handler om å skape et miljø slik at personer med nedsatt funksjonsevne også får delta. Det som skiller begrepene er at tilgjengelighet har fokus på enkeltgrupper, mens universell utforming handler om løsninger som kan brukes av alle [8].

35 2.5. Digitalt bibliotek IKT-løsninger og universell utforming Hovedregelen er at IKT-løsninger i Norge skal være universelt utformet. Dette gjelder både private og offentlige virksomheter, lag og organisasjoner som har et nettsted, applikasjon eller automat. Nettstedet prosjektgruppen skal lage skal brukes av innbyggere i Norge, og det er derfor viktig at det blir fokusert på universell utforming i utviklingen av nettstedet[4]. Forskrift om universell utforming av IKT-løsninger krever at nettsider må rette seg etter 35 av 61 suksesskriterier i standarden Retningslinjer for Tilgjengelig w Webinnhold (WCAG) 2.0. Digi. no inneholder en rekke med løsningsforslager som er fordelt i temaene: utforming og presentasjon, bilde og lyd, navigasjon og skjema[9]. Ved hjelp av oversikten og løsningsforslagene av Digi.no, så kan dette gi prosjektgruppen en god mulighet til å lage et nettsted som kan brukes av alle. Eksempler på krav prosjektgruppen kan fokusere på i begynnelsen som er hentet fra difi.no[5]: Det skal være kontrast mellom innhold og bakgrunn. Ha store nok objekter og god avstand mellom objektene. Nettstedet skal være mobiltilpasset. Det skal være mulig å forstørre teksten uten at nettsiden mister funksjonen sin. Bildene som blir brukt må ha en tekst som forklarer hva bildet inneholder. Tydelig fokus og markering på klikkbare objekter. 2.5 Digitalt bibliotek Før internett ble oppdaget, var dokumentene kun tilgjengelige i fysisk form. Studentene måtte enten dra til forelesninger, spørre mennesker direkte, eller gå til biblioteket for å gjøre ferdig sine skoleoppgaver. Nå har internett vært tilgjengelig overalt hele tiden. Det er bare en klikk fra musa eller et par tastetrykk for å få tilgang til nettet. Å dra til biblioteket for å låne en bok eller en akademisk artikkel er ikke så populært som før. Folk pleier å være opptatte og alltid prøver å finne en måte å fikse problemene sine så fort som mulig, dette gjelder også for studenter. For å kunne begynne med oppgavene sine eller vite hvordan strukturen til prosjektet skal være søker de ofte på Google eller på mulige ressursene fra skolen. Et digitalt bibliotek bør fungere som et ressurssenter for studener hvor de kan finne nødvendige informasjon og data knyttet til sine studier. For å gjøre dette, er det viktig å ha eksperter eller noen som har erfaring til å administrere biblioteket og utføre kvalitetskontroll før materialene blir publisert. Å ha et digitalt bibliotek og gjøre dette tilgjengelig til studentene og tidligere studenter kan brukes som en metode å bevare prosjekter og samtidig promotere selve skolen. Nolan og Costanza [15] har skrevet en artikkel hvor de diskuterte problemer som kan dukke opp med et digitalt bibliotek for skoler. Et av de viktigste bekymringene er opphavsrettigheter. Siden prosjektene som skal bli publisert er laget av studenter, er det vanlig at de vil ønske å ha rettighetene til sine arbeid. Som ble nevnt tidligere, det er alt for lett for alle å ha tilgang til alt som er tilgjengelige på nettet. Det er nødvendig å ha en grunnleggende opphavsrettbeskyttelse på

36 20 Kapittel 2. Forarbeid og analyse alle prosjektene. Dette gjelder også for innholdet studentene har brukt (f.eks. bilder, sitater, etc.) eller lastet ned. Før publiseringen av skoleoppgaver er det lurt å lage et skjema med oppgaven for å sjekke om studentene har referert innholdet for å unngå problemer med opphavsrett. Før skolen lager et digitalt bibliotek er det også nødvendig å spørre disse spørsmålene: Bør alle prosjekter bli publisert eller bare de som har fått bra karakterer? Skal dette være tilgjengelig offentlig? Eller skal nettstedet bare være synlig for institusjonen? Kommer dette til å bli brukt for å markedsføre eller promotere skolen? Skal dette brukes som et portefølje for fremtidige arbeidsgivere? For å svare på disse må skolen først finne ut formålet til nettstedet. Det er noe informasjon som bør være synlig avhengig av hvem som skal se på disse prosjektene. Det kan også være hjelpsomt å finne ut hvor mange som er interesserte i å se disse prosjektene, og hva slags informasjon de vil se på hver prosjektside. Utstilling av studentprosjekter kan tiltrekke videregående elever ved å vise hvordan studentene jobber på skolen, hva de jobber med, hele prosessen med å skape oppgaven, hva lærere forventer fra studentene, osv. Dette gjelder ikke bare for elevene, men også for arbeidsgivere som vil ansette nyutdannede studenter. Om digitalt biblioteket skal også bli brukt for å promotere skolen bør dette være synlig til publikum og lett å finne via søkemotorer. Da er det nødvendig å se gjennom hvordan søkemotor optimalisering eller SEO fungerer. 2.6 Søkemotoroptimalisering (SEO) Som ble nevnt tidligere er søkemotor-optemalisering eller SEO brukt for å opptimalisere nettsider slik at den blir synlig på søkemotorer. Dette er et eksempel på prosessen om hvordan dette fungerer: 1. Metadata brukes og skrives inn i HTML-filen av nettstedet ved å bruke meta tagger (<meta>). Meta taggene kan inneholde nøkkelord, beskrivelse, forfatter, osv. 5 Disse taggene kommer ikke til å bli synlige på nettsiden, men befinner seg i koden. Bruk av søkeord på meta taggene kalles også som << On-site optimisation >> 6. Dessuten finnes det en teknikk til som heter << Off-site optimisation >>. Dette krever at et nettsted blir linket til en annen kilde, for eksempel når en bruker legger inn nettsteds lenke på sosiale medier 7. Figur 2.10: skjermbilde av Store Norske Leksikons html oppsett 5 W3schools 6 On-page SEO 7 Off-page SEO

37 2.6. Søkemotoroptimalisering (SEO) Når brukerne begynner å søke på søkemotorer, kommer søkeroboter til å indeksere innholdet til nettside og HTML. Søkeroboter er program søkemotorer bruker som krabber gjennom hele nettside og henter inn informasjon og data om innhold. Deretter skal søkemotorer lagre dataene fra nettstedet 8. Hvis det skjer noe forandringer eller oppdateringer kommer søkeroboter å krabbe på nettside igjen automatisk slik at de nye innholdet blir søkbar. Figur 2.11: skjermbilde av Google søkemotor 3. Basert på ordene brukerne har brukt, kommer søkemotoren til å vise de mest relevante resultater som inneholder ordene som ble søkt. Figur 2.12: skjermbilde av resultatene fra Google I artikkelen << Taking it to the Top: A Lesson in Search Engine Optimization >> [11] har forfatterne forklart at disse metadataene kan alltid bli oppdatert samtidig som nettsiden vokser. Ved å bruke SEO på riktig måte og ved å blande både on- og off-site optimalisering kan nettstedet bli mer synlig på søkemotorer og da blir det mer besøkere som fører til mer trafikk Google Ads Det finnes flere verktøy for å forbedre rangeringen av nettsteder på søkemotor resultater. En av disse er Google Ads 9. Dette hjelper nettsteder eiere eller bedrifter for å samle inn mer informasjon om hvilke søkeorder er nødvendige slik at de kan nå målgruppen deres eller potensielt kunder. For eksempel bedrifteiere får muligheten til å angi rekkeviden av geografisk plasseringen og tiden når annonsen deres vil bli synlig. Bortsett fra dette tilbyr Google Ads forskjellige typer reklamer som bannere, videoer, osv. Dessverre koster dette noe, men eierne kommer bare til å bli belastet per klikk på søkeresultatene SearchMicroservices 9 Google Ads 10 Google Search Ads

38 22 Kapittel 2. Forarbeid og analyse Figur 2.13: Eksempel av Google Ads på søksresultater (skjermbilde) Permalink Content Management Systems (CMS) som Wordpress 11 har en såkalt <<Permalinks>> som også står for <<Permanent Links>>. Permalinks er brukt til å lage egne lenker til sidene av nettstedet 12. Som vanlig, genererer Wordpress unike lenker automatisk til hver eneste side eller blogg innlegg av nettstedet, men det finnes permalink innstillinger som nettside eiere kan bruke for å tilpasse deres url slik at det blir relevant i forhold til innholdet. Figur 2.14: Permalink innstillinger fra Wordpress Å endre lenker til noe som er relevant i forhold til innholdet av nettside, for eksempel, tittelen av innlegget eller artikkelen bidrar til bedre forståelse om hva nettsiden handler om. I tillegg, kan dette føre til bedre rangeringen av nettstedet siden permalinks blir også indeksert av søkemotorer Tekniske løsninger I denne delen av kapittelet vil bachelorgruppen se næremere på de tekniske aspektene ved å utvikle en nettside. Tekniske løsninger tar for seg hvordan et CMS fungerer, hvilke programmeringsspråk 11 Wordpress 12 Using Permalinks 13 What Are Permalinks in WordPress? How to Set Them and Why permalinks-in-wordpress/

39 2.7. Tekniske løsninger 23 som er mest relevant å bruke når nettsiden skal utvikles. Det ser også på databaser og hvordan det ikke bare fungerer alene, men også hvordan det fungerer sammen med en CMS plattform CMS CMS (Content Management System) er et verktøy som blir benyttet for å lagre innhold på en nettside, men også organisere en nettside.[16] CMS brukes også til å publisere innhold på internett. Det finnes mange forskjellige CMS plattformer, deriblant Wordpress, Drupal og Joomla. En CMS plattform er et dynamisk system siden det kan bli utvidet både ved hjelp av utvidelser, men også ved å endre koden selv. Dette fordi det er fordi de mest populære CMS plattformene bruker åpen kildekode. Grunnen til at CMS plattformene er populære er at utviklingstiden er mye raskere ved bruk av en CMS plattform i motsetning til å kode alt av fra bunnen av. En annen fordel med å bruke en CMS plattform er at det ikke stiller like store krav til programmeringskunnskap. Figur 2.15: Content Management System Ulemper ved bruk av CMS; Populære plattformer som Wordpress, Druap og Joomla ofte tiltrekker seg hackere som ønsker å ødelegge disse sidene. Et cms-system kan i utgangspunktet være sikkert, men side utvikling og publisering er opp til brukerene kan nettsiden som blir laget i et slikt system by på utfordringer hvis det ikke vedlikeholdes på den rette måten. At brukeren ikke tar nok hensyn til sikkerhet kan være for eksempel at de velger å ha dårlige passord og at siden ikke er publisert på et sikkert sted med HTTPS sertifikat. Usikre temaer og utvidelser fra usikre kilder kan også bidra til at sikkerheten svekkes på nettsiden 14. En annen ulempe ved bruk av CMS disse systemene tilbyr bare et antall temaer og utvidelser, hvis man ikke er fornøyd med disse og vil ha noe helt spesifikt på nettsiden din, må man ha kunnskapen til å kode selv. Hvis man har kunnskap på å kode selv, kan dette føre til at nettsiden ikke blir som først tenkt. 14 CMS-system

40 24 Kapittel 2. Forarbeid og analyse Wordpress Wordpress er det mest populære CMS plattformen i verden, 33 prosent av nettsidene på internett blir drevet av Wordpress. Wordpress er et fleksibelt system, siden Wordpress har en så stor brukermasse finnes det en stor mengde med utvidelser laget av uavhengige utviklere. Wordpress har også et godt forum, der man kan stille spørsmål og få svar fra andre brukere av Wordpress Drupal I følge Dr. V.R. Rathod, Savan K.Patel og Jigna B. Prajapati som har skrevet artikkelen < < Performance Analysis of Content Managment Systems- Joomla, Drupa and Wordpress> > [16] er Drupal den beste cms plattformen fordi det gir brukeren lov til å oppdatere deres nettside uten teknisk kunnskap og sørger for å passe til din bruk. Drupal er en dynamisk platform, siden man kan legge til utvidelser, men har også mulighet til å endre kode selv Joomla Joomla publiseringsverktøy er en fri programvare kodet i PHP og benytter seg av en database. Joomla kan brukes til å lage mange forskjellige typer nettsider, som for eksempel artikler, blogg, e-handel og forum. Ideen med Joomla er at det skal være lett å bygge opp og oppdatere sin hjemmeside, online uten bruk av spesielle programmer Programmeringsspråk Det finnes mange forskjellige programmeringsspråk. Under vil det komme en forklaring og hvordan de anvednes. De programmeringsspråkene som er beskrevet er de mest relevante for bachelorgruppen HTML HTML (Hypertext Markup Language) er et formateringsspråk som brukes til å lage hypertekstdokumenter på internett CSS CSS (Cascading Style Sheets) blir brukt sammen med HTML for å stilsette HTML dokumentet. CSS lar utviklere lage egne stilark som linkes til HTML koden, slik at man kan definere hvordan de forskjellige elementene i HTML dokumentet skal se ut. Et eksempel på bruk av CSS til å stilsette en HTML kode er å definere hvordan en overskrift skal se ut. CSS ble utviklet av W3C PHP PHP (Hypertext Preprocessor) er et server-side script, det betyr at koden ligger på serveren og blir kjørt igjennom serveren. 18 PHP brukes som et verktøy for å lage dynamiske nettsider, dette er fordi de kan programmere mot for eksempel datbaser, filer, xml. Dette skiller PHP fra HTML 15 Wordpress 16 Joomla 17 ( 18 (

41 2.8. Sammendrag 25 da HTML ikke har noen av disse mulighetene. Skal man lage nettsteder der data blir hentet fra en database er PHP-koding et godt valg å bruke. PHP kan kodes sammen med HTML og det er mulighet for å hoppe inn og ut av PHP-koden ved hjelp av start og slutt tager Javascript Javascript er et objekt orientert programmeringsspråk som brukes til å lage og kontrollere dynamisk nettside innhold. Det menes med at innhold som enten flytter på seg, eller blir oppdatert eller at innhold endrer seg på skjermet uten at nettsiden blir manuelt oppdatert. 20 Javascript brukes ofte til animasjon på en nettside, som for eksempel, bildefremvisning, der bildet automatisk blir byttet etter en satt tid Database Definisjon på hva en database er ifølge store norske leksikon er : < <En database er en samling data lagret på et elektronisk medium. Datasamlingen er organisert og strukturert etter en bestemt strategi eller modell en databasemodell.> > 21 Ved bruk av en CMS plattform for eksempel Wordpress blir man bedt ved oppkobling av nettsiden om å utgi hvilken database som skal brukes. 2.8 Sammendrag Dagens løsning av prosjektvising er ikke optimalisert. Høgskolen i Østfold har mange prosjekter lagret, men de er ikke lagt ut på nettstedet til høgskolen. For å få tilgang til bachelorprosjektene må man enten kontakte gruppen som lagde oppgaven om å få tilgang, ellers søker man etter masteroppgaver fra Høgskolen i Østfold på en søkemotor og blir videre ført til Brage.bibsys.no, der alle masteroppgavene med karakter C eller mer er lagret. Dette er ikke en god løsning, da man ikke finner frem til prosjektene via skolen direkte, men heller fra privatpersoner og andre nettsteder. Gruppen ønsket dette prosjektet, for de følte det var noe Høgskolen manglet. Å kunne sette lys på prosjekter som vanligvis blir glemt bort, og fremme IT-avdelingen på en god måte. Disse prosjektene vil kunne hjelpe tidligere, nåværende og kommende studenter på flere måter, og det vil i tillegg være en god portfolio. For å forberede dagens løsning, vil gruppen lage et nytt nettsted med samling av alle type prosjekter, fra fag, bachelor og master. Nettstedet vil være linket til på Høgskolen i Østfold, for å gjøre det mer tilgjengelig, og vil inneholde nyttig informasjon og attraktivt desgin. Ved bruk av heuristisk evaluering, så ga den prosjektgruppen et innsyn av hva som er vanlig i å ha i nettsteder. Prosjektgruppen valgte nettsteder som var relevante for prosjektet, og gruppen så på styrker og svakheter under analysen. Det ble også tatt hensyn i å fokusere på universell utforming. Dette fordi det er viktig å utforme løsninger som kan brukes av alle. For å fullføre oppdraget er det nødvendig å lage en nettsted som skal funke som et digitalt bibliotek hvor studentenes verk skal bli samlet. Dette blir en metode for å oppbevare prosjektene 19 ( 20 ( 21 (

42 26 Kapittel 2. Forarbeid og analyse og samtidig utstille disse til publikum. Nå at gruppen har funnet ut hovedmålet til nettstedet kan dette bli utviklet videre. Samtidig bruke noe design elementer fra Høgskolen i Østfolds hovedside slik at digitalt biblioteket reflekterer skolen. Dette kan også bli brukt som en måte å markedsføre skolen, sine studenter, og ansatte. Det er et ønske å gjøre dette nettstedet synlig i hele norge for å nå målgruppen, ikke bare for det digitalt biblioteket, men også for Høgskolen i Østfold. Dette kan bli gjort ved å bruke forskjellige SEO teknikker, metoder, og verktøyer som finnes. Samtidig er det viktig å ha bra innhold og design som kan gjøre nettstedet attraktivt for publikum og for studentene som vil utstille sine prosjekter. Tekniske løsninger delen handler om hvordan CMS fungerer. Bachelorgruppen har sett nærmere på de tre mest populære CMS plattformene, Wordpress, Joomla og Drupal. CMS blir også vurdert ved å se på fordeler og ulemper ved bruk av CMS plattformer. En annen del under tekniske løsninger ser bachelorgruppen på bruken av relevante programmeringsspråk. Bachelorgruppen skriver om fire forskjellige programmeringsspråk som gruppen mener er de mest relevante for utviklingen av nettsiden. De fire forskjellige programmeringsspråkene er HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), PHP (Hypertext Preprocessor) og JavaScript, disse blir forklart bruken av og forskjellen mellom de. En siste ting Tekniske løsningen delen har sett på er databaser, Bachelorgruppen har sett på hvordan databaser fungerer både alene, men også ved bruk sammen med en CMS plattform.

43 Kapittel 3 Design Metoder Kommer senere: metoder for design og utviklingsprosessen av nettsiden. Fasene før hele designet blir lagt sammen, ressursene som ble brukt, kanskje noe story boards og personas, og nødvendige funksjoner for et digitalt bibliotek. Figur 3.1: Brainstorming av navigasjon prosjektet Figur 3.2: Kortsortering for kategorier Gruppen har brukt lukket kortsorteringsmetode[19, p.1-8] (figur 2.4) som veiledning og for a skape ideer om hvordan kategoriseringen være pa prosjektet. I tillegg ble det laget skisser for a fa ideer om hvor knappene skal plasseres og vurdere hvilke ikoner eller symboler er mest effektive. 27

44 28 Kapittel 3. Design Metoder Design Thinking Process Design er ikke bare for visuelle formål. En varsom planleggingen er nødvendig for å skape et produkt som brukerne kan nytte. Derfor er det også viktig å inkludere de fem fasene om << Design Thinking Process >>. Denne prosessen har blitt brukt som en metode for å løse kritiske problemer i dagens teknologi og fokuserer på menneskets behov[13, p.5-6]. Figur 3.3: Design Thinking Process 1. Innlevelse Sett deg selv i demmes sko! Prøv å observere og tenke hvordan brukerne skal føle når de bruker produktet. 2. Definere: Samle informasjonene som ble oppdaget fra innlevelsesfasen. Hva kan brukerne slite om? Lag eller skriv scenarier og personas om målgruppen. 3. Ideate Start med å finne ideer for å løse problemene som brukerne kan oppleve 4. Prototype Begynn å skissere wireframes eller lage digitale prototyper fra ideene og løsninger du har fått 5. Test Prøv prototypen/e som ble laget og analyser resultatene. Vanligvis så er denne fasen omgjort flere ganger for å forbedre løsninger. I artikkelen <<What is Design Thinking Why is it important?>>[18, p.336] har Razzouk og Shute kartlagt egeneskapene til designere Oppsummering Som det ble nevnt før er design ikke bare for å skape noe som er attraktivt men også et effektivt produkt til kundene eller brukerne. Dette er hoved oppgaven til front end utviklere og med den avanserte teknologien som nå eksisterer bør eksperter og de som har ferdigheter prioritere å løse problemer mennesker opplever.