VIDEOLECTURES.NET MAKEOVER NADINE ALLEWIJN MENNO LONT ROSAN VAN DER WERF THOMAS DIJKMAN
Uitleg Thomas Dijkman Het gebruik van het internet voor leerdoeleinden is geen nieuw principe, denk bijvoorbeeld aan websites als Wikipedia en de zogenaamde tutorials die al lange tijd op YouTube te vinden zijn. Op de website videolectures.net gaan ze nog een stapje verder, hier zijn echt puur informatieve colleges, lezingen en andere vormen van uitleg te vinden. Een dergelijke website is voor velen erg handig. Het probleem van videolectures.net is dat de website extreem onoverzichtelijk is. Het aanbod op de website is gigantisch, de manier waarop het wordt gepresenteerd bevat echter vele mankementen. De opmaak is achterhaald, de site is geschreven in twee talen en het scherm is veel te vol. Deze week zijn wij daarom de uitdaging aangegaan om deze website raar vindt het fijn om verschillende visies en videos over hetzelfde onderwerp te kunnen vergelijken en de geïnteresseerde wil gewoon graag de beste, nieuwste of belangrijkste videos zien. Deze user stories hebben wij meegenomen in het ontwerpproces van het nieuwe videolectures.net om zo aan ieders wensen te voldoen. weer fatsoenlijk eruit te laten zien, dit zal het gebruikersgemak een boost geven en zorgt er over het algemeen voor dat de inhoud van de website veel beter tot zijn recht komt. Om de website weer modern te maken hebben wij ons verdiept in het de websites van concurrenten als YouTube en Ted. Deze websites zijn beide veel netter georganiseerd en vooral minder vol. Dit Voordat wij aan deze makeover konden beginnen was het voor ons belangrijk om na te denken voor wie deze website eigenlijk bedoeld is. De drie groepen die wij hebben gedefinieerd zijn: studenten die willen leren van de videos, leraren die zoeken naar lesmateriaal en overige geïnteresseerden die wordt gedaan door reeksen (YouTube) en blokken (Ted). In ons nieuwe ontwerp hebben wij deze factoren geïmplementeerd. Het resultaat wat wij hebben getracht te bereiken is een strak, zakelijk en overzichtelijk videolectures.net waarop ieder soort gebruiker zijn weg eenvoudig kan vinden. informatie willen halen uit de videos. De student wil graag snel de juiste videos kunnen bekijken, de le
Technisch Nadine Allewijn De techniek achter een website is over het algemeen niet lastig, in de zin dat hierover vrijwel alles al bekend is. Een goede programmeur zal in staat zijn een veilige en stabiele site te bouwen. Toch blijven er altijd technische problemen die voor kunnen komen, dus ook bij de nieuwe website van videolectures.net. maken van apparatuur die tekst voorleest of een vergroter. Dit vereist veel concentratie, aangezien daadwerkelijk alles voorgelezen wordt. Slechtzienden moeten zelf connecties zien te vormen tussen alle voorgelezen stukjes (Chandrashekar, Stockman, Fels, & Benedyk, 2006). De tweede groep zal de video s niet kunnen horen. Voor hen zou ondertiteling een fijne toevoeging zijn, het liefst in hun moedertaal. Ook voor niet-slechthorenden is dit fijn. Allereerst een probleem dat niet per se technisch is, maar dit wel kan beïnvloeden: het kostenplaatje. Het budget van videolectures.net is voor ons onbekend, maar wanneer zij geen geld hebben voor een wat duurder bedrijf om de website te bouwen, kan dit ten koste gaan van de techniek erachter. Iemand die als hobby programmeert is niet per definitie slecht, maar hij zou over niet alle benodigde kennis kunnen beschikken. De kwaliteit van het programmeren beïnvloedt ook kleinere technische problemen. Iemand met ervaring zal ervoor zorgen dat de website compatible is voor alle browsers en zal rekening houden met de vindbaarheid van de website in zoekmachines. Dit zijn geen grote problemen, maar ze zullen wel het gebruikersgemak van de website beïnvloeden. Iets heel anders is de toegankelijkheid voor mensen met een beperking. Slechtzienden of -horenden moeten met hun apparatuur ook in staat zijn de website te bezoeken. Slechtzienden zullen gebruik Vervolgens kunnen er ook problemen rondom de veiligheid voorkomen. Alhoewel er niks wordt gedaan met bankzaken op videolectures.net, staat er wel veel informatie op de website. Deze informatie zal zijn opgeslagen in een database. Een inbraak in de database kan ervoor zorgen dat alles wordt verwijderd, dit zou een ramp zijn voor iedereen die de website gebruikt. Het is dus essentieel dat de eigenaren de database regelmatig back-uppen, zodat niks verloren gaat. De database zou ook een keer kunnen crashen. Naast dat er bij een hack iets met de database kan gebeuren, zouden er ook vervelende virussen kunnen worden geïmplementeerd. Degene die de website programmeert, moet er dus voor zorgen dat overal waar gebruikers zelf iets kunnen typen, er extra beveiliging wordt geplaatst. Zo moeten codes onschadelijk worden gemaakt en moet er opgelet worden bij formulieren (bijvoorbeeld bij registeren). Een voorbeeld hiervan is bij het versturen van data om niet de $_SERVER[ PHP_SELF ]-methode te gebruiken, maar bijvoorbeeld de htmlspecialchars()-functie (w3schools.com).
Interactieontwerp Rosan van der Werf Er zijn zeven wireframes gemaakt voor de website. Elke wireframe heeft dezelfde header en footer. In de header staat het logo en een horizontale menubalk. In de footer kan de gebruiker zich aanmelden voor de nieuwsbrief, meer informatie krijgen over de sponsors en contact opnemen. De drie belangrijkste wireframes zullen nader toegelicht worden, de homepage, de browse lectures pagina en een lecture pagina. Op de homepage staat bovenaan een blok met lectures waar de gebruiker Op deze nieuwe pagina staat de video van de lecture. Onder de video een beschrijving. Omdat de meeste video s zowel een filmpje van de auteur bevatten als de bijbehorende presentatie, is het mogelijk gemaakt om te navigeren aan de hand van de slides. Dit kan op twee verschillende manieren gedaan worden. De eerste is via de video zelf, de gebruiker kan naar de vorige of volgende slide gaan. Er kan ook gebruik gemaakt worden van het navigate by slides blok. Hier is een overzicht van alle slides te zien. Boven dit blok kan de gebruiker ook nog de presentatie downloaden. Onder de beschrijving is er ruimte om te reageren en reacties van anderen te bekijken. Helemaal onderaan worden meer lectures van dezelfde auteur en lectures met gerelateerde inhoud voorgesteld. De overige wireframes zijn te zien in de bijlage. snel de nieuwste, de meest bekeken en de trending lectures kan zien. De gebruiker kan dit op drie verschillende manieren doen. Op de browse lectures pagina kunnen lectures gevonden worden. Dit kan door een trefwoord te zoeken of een categorie, duur, evenement, datum en taal te selecteren. Er is geen knop met zoeken, de resultaten worden automatisch en direct weergeven. Bovendien kan de gebruiker de resultaten filteren op nieuwste, meest bekeken en best beoordeeld. Als de gebruiker op een lecture klikt, dan gaat hij naar een nieuwe pagina.
Grafisch Menno Lont De website wordt vooral bezocht door professoren De meeste inspiratie komt van andere streamingswebsites, voornamelijk Netflix en YouTube. Deze websites zijn overal bekend, daardoor kan iedereen zich in de stijl vinden. en studenten, en deze verwachten een professioneel ogende website. Bij het maken van de vernieuwde webpagina heb ik vooral gekeken naar wat de huidige webpagina niet goed doet. De huidige homepage Het lettertype op de webpagina is Myanmar Text. Dit lettertype is een professionele en veilige keuze en het geeft de webpagina een duidelijke structuur. van videolectures gebruikt de kleuren wit, grijs en rood als hoofdkleuren op de webpagina. Het gebruik van grijs en wit is echter een stuk groter dan het gebruik van de kleur rood. Hierdoor lijkt de webpagina eentonig en saai. Ik heb exact dezelfde kleuren hergebruikt maar zo ingedeeld dat de kleuren beter verdeeld zijn. De rode kleur is alleen als extra kleur gebruikt, de achtergronden zijn nog steeds alleen wit en grijs. De webpagina blijft er nog steeds professioneel uit zien maar tegelijkertijd neemt de appeal toe. Op de homepagina staat de videolijst centraal. Bij de videolijst wordt aanvankelijk alleen de titel en de tijd aangegeven. Wanneer er over de video bewogen wordt komt er een beschrijving van de webpagina tevoorschijn. Een afbeelding van de video staat er altijd bij, dit is alleen om de tekst aan te vullen en de pagina er mooier uit te laten zien. Zelfs wanneer er over de video bewogen wordt blijft de afbeelding aanwezig, de tekstachtergrond blijft doorzichtig maar wordt een stukje donkerder, dankzij de aangepaste opacity van de blokken.
Appendix In deze appendix zijn de overige wireframes te vinden, deze vallen onder interactieontwerp.
Bronnen technisch gedeelte: http://dl.acm.org/citation.cfm?id=1169040 http://www.w3schools.com/php/php_form_ validation.asp