Technisch ontwerp. Referenties

Transcriptie

1 Concept Voor de tweede individuele opdracht heb ik ervoor gekozen om een herontwerp te maken van de Videolectures.net website. Videolectures.net is een website die zich specialiseert in het voorzien van videoopnames van hoor- en werkcolleges. Hierdoor hebben gebruikers toegang tot een groot selectie van educatieve filmpjes, wat vooral gunstig is voor studenten. Echter op het gebied van grafische design en layout laat de website flink te wensen over. Wanneer ik voor het eerst op de website kwam wist ik niet meteen wat het doel was van de website, omdat je als gebruiker overspoeld wordt door informatie. Aanbevolen video s staan zeer onopvallend bovenaan weergegeven en de meeste aandacht is gefixeerd op de News sectie, waarbij men meer de indruk krijgt dat de website voornamelijk artikelen schrijft. Daarnaast staat deze nieuws ook vaak niet in het Engels weergeven en zijn de beschrijvingen die onderaan video s staan ook niet informatief. Het grootste probleem dat ik met de huidige grafische design heb, is dat het de gebruiker totaal niet uitnodigt om iets te doen of te bekijken. De Information Foraging Theory gaat ervanuit dat mensen hun tijd zo efficiënt mogelijk willen besteden wanneer het aankomt op het zoeken van informatie binnen een bron. Wanneer je de website ziet, navigeer je liever zo snel mogelijk weer weg, aangezien je het gevoel krijgt dat er niets te vinden valt. Om de bovenstaande problemen op te lossen heb ik bij het maken van het herontwerp geprobeerd sterke elementen uit soortgelijke websites te implementeren. Veel populaire soortgelijke websites, zoals Khan Academy en Codecademy hebben een simpele lay-out, die gebruikers uitnodigt om wat te doen. Zo bestaat er de optie om een reeks lessen te volgen, en te zien hoe ver je bent binnen de cursus. Dit systeem is ook in het nieuwe design toegevoegd om te zorgen dat mensen op een overzichtelijke en snelle manier een reeks lessen van een vak kunnen bekijken. Daarnaast is het ook belangrijk dat de beheerders belangrijke video s en dergelijke kunnen promoten. Hiervoor is een slideshow toegevoegd die dit overzichtelijk weergeeft. Als laatste zijn er twee aparte videosecties toegevoegd, namelijk voor nieuwe en populaire video s die ervoor zorgt dat gebruikers gelijk kunnen zien wat de website op dat specifieke moment te bieden heeft. Verder is het belangrijk dat er zo min mogelijk onnodige informatie wordt weergegeven, een duidelijk lettertype is ingesteld, en dat het grafisch design wordt onderbouwd door een sterke kleurencombinatie en afbeeldingen.

2 Interactieontwerp Hiernaast is het interactieontwerp voor het herontwerp te zien. Zoals te zien is op de afbeelding, bestaat de website uit een groot aantal selecteerbare elementen. De header/navigatiebalk bestaat uit een Logo en de knoppen Lectures, Categories, People, Search en Log in. De Lectures knop geeft een lijst van video s weer, waarbij de gebruiker op uploaddatum of populariteit deze kan sorteren. De tweede knop fungeert vooral als een efficiënte manier om lesmateriaal per onderwerp weer te geven in een lijst. Wanneer de gebruiker hierop klikt, wordt deze verwezen naar een nieuwe pagina waar men deze lijst te zien krijgt. Als de gebruiker op een onderwerp klikt, ziet hij of zij een aantal video suggesties te zien die verbonden zijn aan dit vak. De People knop laadt een nieuwe pagina die informatie van docenten die aangemeld staan op de site weer. Hierdoor kunnen gebruikers video s van een specifieke docent snel vinden. Een gebruiker kan door middel van de Searchbalk eenvoudig video s en andere informatie vinden. Wanneer de gebruiker een zoekterm invult, wordt de gebruiker doorverwezen naar een nieuwe pagina, waarop de zoekresultaten onder elkaar staan weergegeven. Als laatste kan de gebruiker met behulp van de Log in knop zich aanmelden. Hierbij verschijnt binnen hetzelfde scherm een dropdown, waar de gebruiker zijn of haar informatie in moet vullen. Ook verschijnt er een registratie knop voor gebruikers die nog geen account hebben, waarbij deze dan doorverwezen worden naar de registratiepagina. De slideshow wordt genavigeerd door middel van de pijlknoppen. Door op de inhoud te klikken wordt de gebruiker naar de relevante pagina verwezen. Hetzelfde geldt voor de elementen binnen de Trending Videos en Latest Videos. Wanneer een gebruiker doorverwezen wordt naar een video, is dit te zien op een pagina waarbij de video centraal in beeld staat, met onderin opmerkingen van andere gebruikers. Rechts op diezelfde pagina staan relevante video s weergegeven. Als laatste kan de gebruiker op een van de onderwerpen van Start learning klikken om een afspeellijst van dat onderwerp af te spelen. De gebruiker kan aan de progress zien, hoe ver hij of zij is met het afronden van de afspeellijst voor dat onderwerp. Door onderin op een paginanummer te klikken worden meer onderwerpen weergegeven. Wanneer de gebruiker op de website arriveert, is de Footer niet in beeld te zien. In plaats daarvan zijn alle elementen boven Footer uitvergroot om alle beschikbare ruimte zo goed mogelijk te benutten. Alleen wanneer de gebruiker zelfstandig naar beneden scrolt komt de Footer in beeld te staan. De Footer heeft links die verwijzen naar de Contact en About pagina, maar ook naar de Facebook, Twitter en Google+ accounts van Videolectures.net.

3 Grafisch Design Hierboven is het grafisch design van het herontwerp te zien. Ik heb besloten om de Header/Navigatiebalk en Footer grijs te laten om het goed aan te laten sluiten bij het kleurenschema van het logo. Verder heb ik de nieuwe toevoegingen een energieke en opvallende achtergrondkleur gegeven, zodat het goed de aandacht van gebruikers trekt. Daarnaast zou een witte, grijze of zwarte achtergrond voor deze elementen al gauw een overheersende en droevige uitstraling geven. Specifiek bij de slideshow en searchbalk heb ik ervoor gekozen om rode kleuren toe te passen, omdat deze aansluiten bij het logo. Om alle elementen heen is een Stroke effect toegepast om elementen goed onderscheidbaar van elkaar te maken. Het lettertype dat ik heb gekozen is de Sans-Serif font Segoe UI. Dit is een modern lettertype dat onder andere bij Windows 8 applicaties wordt toegepast en populair is onder jongvolwassenen. Daarbij sluit deze Sans font goed aan bij het logo, omdat de grootte van de strokes net zoals bij het logo constant is. De lettergrootte valt sterk op bij de nieuwe toegevoegde elementen om daar de aandacht op te genereren. Bij iedere videopreview is een thumbnail zichtbaar, met de titel van de video op een balk met een doorzichtigheidsgraad van 0.7. Voor de slideshow is deze balk zwart, en voor alle overige elementen is deze balk grijs/wit. Bij de Trending Videos en Latest Videos heb ik besloten om slechts 3 videos per keer zichtbaar te maken. Bij Trending Videos is dit om te zorgen dat de kwaliteit van populaire video s zo hoog mogelijk blijft, aangezien het dan moeilijker is om zichtbaar te worden. Bij Latest Videos is dit gedaan om te zorgen dat mensen snel kunnen zien welke nieuwe video s er zijn, zonder dat het overheersend wordt. Start Learning is een sectie dat onderwerpen weergeeft waarvan er een complete afspeellijst is. Hierbij is ervoor gekozen om de titel van ieder onderwerp goed in beeld zichtbaar te maken, zodat het een overzichtelijk en divers beeld geeft van het aanbod. Naast ieder onderwerp is er een knop om aan de videoreeks te beginnen. In het geval dat de gebruiker al was begonnen met het onderwerp, gaat deze verder met de laatst afgespeelde video in de afspeellijst. Dit wordt dan met de continue button aangegeven, die daarbij weergeeft hoe ver je bent. Onderin staan pagina nummers weergegeven zodat de gebruiker weet dat er nog meer onderwerpen zijn, en de huidige pagina is in bold weergegeven. Als laatste heeft de Footer een About en Contact link, aangegeven met een underline. De Footer zelf heeft een Gradient Overlay effect zodat het devieert van de inhoud van de rest van de website. Verder zijn de iconen van Facebook, Twitter en Google+ aangegeven zodat de gebruiker weet dat de website accounts heeft op deze websites, en het verhoogd het associatieniveau.

4 Technisch ontwerp Een herontwerp maken van een website, zeker in geval wanneer je ook nieuwe toepassingen moet implementeren, kan wat tijd en geld kosten. De Header/Navigatiebalk en Footer van de website veranderen niet al te veel, maar voor de inhoud moet in ieder geval CSS, HTML en PHP geprogrammeerd worden. In CSS en HTML moeten de grafische aspecten, zoals het uiterlijk voor de slideshow, videosecties en Start Learning worden aangemaakt. Ook het uiterlijk van de video en hoe het reageert bij uitvergroten, etc. moet in CSS gedaan worden. Wanneer een gebruiker op een ander apparaat de website bezoekt, moet met behulp van Responsive Webdesign (1) ervoor gezorgd worden dat de website vooralsnog goed zichtbaar is. Dit kan met behulp van Javascript of jquery frameworks gedaan worden. Voor Start Learning is het belangrijk dat er een goed functionerende afspeellijst systeem wordt geïmplementeerd, die ook grafisch aansluit op de rest van de website. Daarnaast moeten de thumbnails en dergelijke ook goed zichtbaar zijn. Verder zal in PHP moeten worden gelinkt met de database van de website, zodat alle video s worden opgeslagen wanneer een gebruiker of beheerder iets upload. Voor de bovenstaande implementaties is het belangrijk dat een grafisch designer wordt ingehuurd die ervaring heeft met het ontwerpen van moderne websites. Daarbij is het ook handig als deze ook verstand heeft met het maken en goed laten werken van videospelers en afspeellijsten. Daarnaast is het ook verstandig om iemand in te huren die verstand heeft van databases en PHP. Alhoewel Videolectures.net waarschijnlijk al een goedlopende database heeft, is het altijd handig om te kijken of alles nog goed werkt, zeker als een groot aantal elementen vervangen wordt. Het aanschaffen van een database met goed genoeg capaciteit voor toekomstig gebruik is ook belangrijk, aangezien je niet in de problemen wilt komen als de website eenmaal goed op gang komt. Het inhuren van professionals en de aanschaf van goedwerkende technologie kan best veel geld kosten, omdat er aardig wat tijd in zal gaan zitten. Er bestaat ook een mogelijkheid om mensen in te huren die zich actief bezig houden met Sociale Media. Videolectures.net heeft meerdere accounts op verschillende Sociale Media websites. Hierdoor kunnen beheerders, als gebruikers goed de populariteit van de website in de gaten houden, en belangrijke en populaire video s in de schijnwerpers brengen. Contact met gebruikers kan erg belangrijk zijn (2). Uiteindelijk blijft de invoering van het herontwerp een flinke diepte investering. Het is immers de bedoeling dat door deze implementatie de website veel gebruiksvriendelijker en aantrekkelijker wordt. Mensen zullen eerder geneigd zijn video s te bekijken en door de website heen te navigeren dan voorheen. Hierdoor zal de populariteit en het bezoekersaantal hoogstwaarschijnlijk geleidelijk toenemen, waardoor er meer geld op advertenties en dergelijke kan worden verdient. Aangezien de filosofie van de wetenschap dat van universele toegankelijkheid is, is het niet verstandig om geld door middel van abonnementen en dergelijke te verdienen. Juist doordat het gratis is, zal de website haar populariteit behouden (3). Kijk maar naar soortgelijke websites zoals YouTube. Wel kan mogelijk een donatiesysteem worden ingevoerd dat mensen de optie geeft om geld te geven, waarbij gebruikers bepaalde perks krijgen, zoals toegang tot unieke emoticons voor in de comments. Referenties (1) Alistapart (2010), Responsive Webdesign - (2) Linkedin (2014), Why social media is so important for your business in (3) Howstuffworks, How Web Advertising Works -

5