Functioneel en interactief ontwerp 2boost Naam: Studentnummer: Afstudeermentrix: Afstudeerdocent: Opleiding:
Pascal Alferink 80767 Lolkje van der Kooi Sjef Smeets Communication & Multimedia Design
Voorwoord Lucka geeft cursussen aan externen. Deze cursussen worden gegeven onder de noemer 2boost. Als ondersteuning op deze cursussen wordt er een site ontwikkeld waarop ondermeer lessen, aanvullend cursusmateriaal en toetsen komen te staan voor de cursisten. Na ontwikkeling zal de website op het domein http://www.2boost.nl draaien. In dit functioneel ontwerp worden alle functionaliteiten binnen de applicatie beschreven.
Functioneel en interactief ontwerp 2boost Pascal Alferink
1
Inhoudsopgave Schermindeling ......................................................................................................................... 4 Header ......................................................................................................................................... 4 Horizontale balk met menu en zoekfunctie .......................................................................... 5 Linkerkolom Contentdeel......................................................................................................... 6 Rechterkolom ............................................................................................................................. 6 Footer........................................................................................................................................... 7 Interaction design .................................................................................................................... 8 Voorwaarden interactieve elementen binnen 2boost ......................................................... 8 Toevoegen van objecten .......................................................................................................... 9 Aanpassen/beheren van objecten ........................................................................................ 10 Verwijderen van objecten ...................................................................................................... 11 Foutmeldingen/waarschuwingen ......................................................................................... 12 Waarschuwingen ..................................................................................................................... 13 Feedback na het maken van toets ......................................................................................... 13 Lege objecten ........................................................................................................................... 14 Cursist niet ingeschreven........................................................................................................ 14 Functionaliteiten binnen 2boost per gebruikersprofiel ..................................................... 15 Algemene, openbare functionaliteiten ................................................................................ 16 Cursusaanbod komende maanden ....................................................................................... 16 Account aanvragen .................................................................................................................. 18 Inlogprocedure ........................................................................................................................ 20 Wachtwoord vergeten ............................................................................................................ 21 Helpfunctie ............................................................................................................................... 22 Afgeschermde functionaliteiten ........................................................................................... 24 Homepage (na inlog) .............................................................................................................. 24 Algemene functies voor elke gebruiker binnen 2boost .................................................... 28 Eigen profiel aanpassen .......................................................................................................... 28 Wachtwoord wijzigen ............................................................................................................. 28 Profiel bekijken van anderen ................................................................................................. 30 Details van lesgroepen bekijken ........................................................................................... 30 Zoeken op content en gebruikers ......................................................................................... 31 Cursus volgen, Categorie bekijken ....................................................................................... 34 Specifieke Functionaliteiten voor cursisten ........................................................................ 36 Cursus volgen, Cursusdetails bekijken ................................................................................. 37 Cursus volgen, Commentaar bekijken en plaatsen ............................................................ 38 Cursus volgen, lesdetails bekijken ........................................................................................ 39 Cursus volgen, Toets maken ................................................................................................... 40 Cursus volgen, Evaluatie bekijken ......................................................................................... 41 Specifieke Functionaliteiten voor auteurs ........................................................................... 42 Content beheren, cursus selecteren ..................................................................................... 43 Content beheren, cursusdetails ............................................................................................. 43 Content beheren, lesdetails ................................................................................................... 46 Content beheren, details lesmateriaal ................................................................................. 47 Content beheren, details toetsvraag .................................................................................... 49 Specifieke Functionaliteiten voor docenten ....................................................................... 50 Functioneel en interactief ontwerp 2boost Pascal Alferink
2
Cursisten monitoren ................................................................................................................ 50 Specifieke functionaliteiten voor Beheerders ..................................................................... 52 Accountaanvraag verwerpen/accepteren ........................................................................... 52 Toegang beheren tot cursussen ............................................................................................ 54 Gebruikersprofielen beheren ................................................................................................ 56
Functioneel en interactief ontwerp 2boost Pascal Alferink
3
Schermindeling De schermindeling binnen 2boost is overal hetzelfde. Het scherm is opgebouwd uit de volgende onderdelen: 1. Header 1.1. Logo 1.2. Helpfunctie 2. Horizontale balk 2.1. Menu 2.2. Zoekfunctie 3. Linkerkolom 4. Rechterkolom 4.1. Achtergrondinformatie 4.2. Categorieënoverzicht 5. Footer
Schermindeling 2boost schematisch weergegeven De website is geoptimaliseerd voor een schermresolutie van 1024x768 pixels.
Header De header is op elke pagina bovenin te vinden. De header bestaat uit: één achtergrondafbeelding, Een logo. Een helpfunctie Functioneel en interactief ontwerp 2boost Pascal Alferink
4
De achtergrondafbeelding is een statische afbeelding en is overal hetzelfde. Deze achtergrondafbeelding bevat geen functionaliteiten.
Logo Het logo bestaat uit een afbeelding die altijd linkt naar de homepage van 2boost. De afbeelding die getoond wordt, is uiteraard het logo van 2boost.
Helpfunctie Rechtsonderin de header bevindt zich de helpfunctie. De helpfunctie bestaat uit één knop. Door hierop te klikken wordt informatie over de desbetreffende pagina getoond in een pop-up. Meer informatie over de helpfunctie is te vinden in het deel waarin alle functionaliteiten behandeld worden.
Screenshot van header
Horizontale balk met menu en zoekfunctie Onder de header is een horizontale grijze balk zichtbaar. De balk bevat 2 onderdelen: Menu Zoekfunctie
Menu Het menu is een bundeling van knoppen waarmee genavigeerd kan worden binnen 2boost. Welke knoppen hier zichtbaar zijn hangt af van de volgende punten: Is de gebruiker wel of niet ingelogd? Welk gebruikersprofiel heeft de ingelogde gebruiker? Welke knoppen wanneer zichtbaar zijn wordt nader uitgelegd bij de specifieke functionaliteiten voor de diverse gebruikersprofielen. Elk menu-item is wit van kleur. Wanneer met de muis over een knop gegaan wordt, wordt de tekstkleur zwart.
Functioneel en interactief ontwerp 2boost Pascal Alferink
5
Zoekfunctie In de rechterkant van de horizontale balk is ruimte gereserveerd voor de zoekfunctie. De zoekfunctie is zichtbaar op elke pagina zolang de gebruiker maar is ingelogd. De zoekfunctie is een formulier dat bestaat uit een zoekveld met daarnaast de zoekknop. Wanneer er een string wordt ingevoerd en op de zoekknop wordt geklikt, wordt het formulier verzonden. De gebruiker komt dan op de zoekresultatenpagina (search.php) terecht. Hier worden de zoekresultaten getoond. Meer informatie over de zoekfunctie is te vinden in het deel waarin alle functionaliteiten behandeld worden.
Screenshot van horizontale balk met menu en zoekfunctie
Linkerkolom Contentdeel Onder de horizontale balk waarin het menu en de zoekfunctie staan, is in de linkerkolom het contentdeel te vinden. De inhoud van dit contentdeel verandert per pagina. Ook de hoogte van het contenteeel is variabel.
Rechterkolom Achtergrondinformatie Afhankelijk van de pagina waarop de gebruiker zich bevindt, is hier achtergrondinformatie zichtbaar. De achtergrondinformatie wisselt per pagina. Vaak worden hier over 2 regels statistische informatie zoals getoond. Het blok is puur informatief van aard. Op de cursuspagina wordt bijvoorbeeld getoond hoeveel cursisten en lesgroepen de geselecteerde cursus volgen. Het blok bevat geen interactieve elementen.
Screenshot van blok Achtergrondinformatie
Functioneel en interactief ontwerp 2boost Pascal Alferink
6
Categorieënoverzicht Onder het blok met achtergrondinformatie is een overzicht zichtbaar met daarin een overzicht van alle aanwezige categorieën. Per categorie is de categorietitel zichtbaar met daarnaast het aantal cursussen binnen de desbetreffende categorie. Wanneer op de categorietitel wordt geklikt, gaat de gebruiker naar de categoriepagina. Dit blok is alleen zichtbaar wanneer de gebruiker is ingelogd.
Screenshot van blok Categorieoverzicht
Footer De footer is over de gehele breedte in de onderkant te vinden. De footer bestaat uit de volgende componenten: Copyrightstatement gevolgd door huidige jaar Knop Disclaimer: deze knop linkt naar de disclaimer Knop Lucka Consultancy: deze knop linkt naar lucka.nl in een nieuw venster De footer is op elke pagina zichtbaar.
Functioneel en interactief ontwerp 2boost Pascal Alferink
7
Interaction design Voorwaarden interactieve elementen binnen 2boost Afbeeldingen binnen 2boost Alle afbeeldingen binnen 2boost moeten een omschrijvende alt- tekst en title-tekst bevatten. De reden voor de bovengenoemde voorwaarde is dat het incidenteel kan voorkomen dat een afbeelding niet ingeladen kan worden. Indien dit gebeurt, verschijnt er als alternatief de tekst die de omschrijving weergeeft van de afbeelding. De alt-tekst moet dus ook beschrijven wat de afbeelding toont. Het toevoegen van alt- en title-teksten heeft 2 bijkomende voordelen: De applicatie is beter toegankelijk voor mensen met een visuele handicap De applicatie wordt beter geïndexeerd door zoekmachines
Hyperlinks binnen 2boost Net als afbeeldingen moet ook elke hyperlink zowel een alt-tekst als title-tekst bevatten. De teksten mogen niet gelijk zijn aan de tekst in de hyperlink, maar moeten omschrijvend zijn. Het toevoegen van alt- en title-teksten heeft dezelfde 2 bijkomende voordelen als bij afbeeldingen.
Audiovisuele content binnen 2boost Audiovisuele content binnen 2boost moet voldoen aan de volgende eisen: Audiovisuele content bevat Nederlandstalige voice-over Als alternatief voor de audiovisuele content moet de voice-over ook als tekst los van de video beschikbaar zijn. Het toevoegen van de voice-over als tekst draagt bij aan de ontsluiting van de applicatie onder mensen met een visuele handicap. Daarnaast zal de applicatie beter geïndexeerd worden door zoekmachines.
Functioneel en interactief ontwerp 2boost Pascal Alferink
8
Toevoegen van objecten Binnen 2boost kunnen gebruikers (afhankelijk van hun rechten) vele objecten toevoegen/aanmaken. De flow van het toevoegen van een object is binnen de applicatie vrijwel overal hetzelfde: 1. Klik naast/onder het overzicht van objecten op de knop Voeg [object] toe. 2. Hierna wordt naar een pagina gegaan waarin een formulier staat. Klik onder het formulier op Voeg [object] toe. 3. Het object wordt toegevoegd in de database. In de meeste gevallen gaat de gebruiker hierna naar de pagina waar het toegevoegde object zichtbaar is, zoals de cursist dit zou zien. (Hierop zijn wel enkele uitzonderingen, bijvoorbeeld cursusmateriaal toevoegen). 4. Op deze pagina wordt ook feedback gegeven via groene pop-up met tekst [object] toegevoegd.
Vormgeving toevoegknop Knoppen waarmee objecten worden toegevoegd bevatten de volgende kenmerken: Knop bevat groene rand en groene tekst Knop bevat toevoegicoontje (groene plus)
Voorbeeld toevoegknop
Feedback na toevoeging van object Na een succesvolle toevoeging van een object wordt steevast een pop-up midden op het scherm getoond waarin de tekst staat: tekst [object] toegevoegd. Deze pop-up bevat verder een groen/witte achtergrond met daarbij een watermerk wat uitbeeldt dat het object succesvol is toegevoegd. De pop-up kan weggeklikt worden door op de toets ‚Enter‛ te klikken, of door op de pop-up te klikken.
Feedback object toegevoegd
Functioneel en interactief ontwerp 2boost Pascal Alferink
9
Aanpassen/beheren van objecten Net als de flow van het toevoegen van objecten binnen 2boost is ook de flow van het aanpassen van objecten gebonden aan een vast stramien: 1. Klik in het overzicht met objecten in de regel van het desbetreffende object op de knop Beheer [object]. 2. Er wordt naar een pagina gegaan waarin een formulier staat met de huidige waarden van het object. Klik onder het formulier op Pas [object] aan. 3. Het object wordt aangepast in de database. In de meeste gevallen gaat de gebruiker hierna naar de pagina waar het aangepaste object zichtbaar is, zoals de cursist dit zou zien. (Hierop zijn wel enkele uitzonderingen, bijvoorbeeld toetsvraag bewerken). 4. Op deze pagina wordt ook feedback gegeven via blauwe pop-up met tekst [object] aangepast.
Vormgeving aanpas/beheerknop Knoppen waarmee objecten worden aangepast bevatten de volgende kenmerken: Knop bevat blauwe rand en blauwe tekst Knop bevat aanpas/beheericoontje (potlood met document)
Voorbeeld aanpasknop
Feedback na toevoeging van object Na het succesvol aanpassen van een object wordt steevast een blauwe pop-up midden op het scherm getoond waarin de tekst staat: tekst [object] aangepast. Deze pop-up bevat verder een blauwe/witte achtergrond met daarbij een watermerk van het potlood met document.
Feedback succesvolle aanpassing van object
Functioneel en interactief ontwerp 2boost Pascal Alferink
10
Verwijderen van objecten Het verwijderen van objecten is net als het toevoegen en bewerken van objecten binnen 2boost gebonden aan een vast stramien. De flow van het verwijderen van een object is binnen de applicatie vrijwel overal hetzelfde: 1. Klik in het overzicht met objecten in de regel van het desbetreffende object op de knop Beheer [object]. 2. Er wordt naar een pagina gegaan waarin een formulier staat met de huidige waarden van het object. Klik onder het formulier op Verwijder [object]. 3. Een confirmationbox wordt getoond waarin de gebruiker wordt gevraagd of hij zeker weet of het object verwijderd kan worden. Indien de gebruiker het object toch niet wil verwijderen klikt de gebruiker op Annuleren en blijft de gebruiker op dezelfde pagina. Wil de gebruiker het object toch verwijderen, dan klikt de gebruiker op OK. De tekst in de confirmationbox luidt: ‚Weet u zeker dat u deze [objectnaam] wilt verwijderen?‛. 4. Het object wordt verwijderd uit de database. In de meeste gevallen gaat de gebruiker hierna naar de beheerpagina waarin het overzicht van de objecten zichtbaar is. 5. Op deze pagina wordt ook feedback gegeven via rode pop-up met tekst [object] verwijderd.
Vormgeving verwijderknop Knoppen waarmee objecten worden verwijderd bevatten de volgende kenmerken: Knop bevat rode rand en rode tekst Knop bevat verwijdericoontje (rood kruis)
Voorbeeld verwijder-knop
Feedback na verwijdering van object Na een succesvolle verwijdering van een object wordt steevast een pop-up midden op het scherm getoond waarin de tekst staat: tekst [object] verwijderd. Deze pop-up bevat verder een rood/witte achtergrond met daarbij een watermerk wat uitbeeldt dat het object succesvol is verwijderd.
Feedback object verwijderd Functioneel en interactief ontwerp 2boost Pascal Alferink
11
Restricties aan het verwijderen van objecten Niet elk object kan rücksichtslos verwijderd worden. Hieronder staat per object beschreven wanneer een object verwijderd mag worden: Cursus Mag alleen verwijderd worden wanneer: De cursus niet gevolgd wordt door één of meerdere lesgroepen Er geen onderliggende lessen zijn Categorie Een categorie mag alleen verwijderd worden wanneer er geen onderliggende cursussen zijn. Les Mag alleen verwijderd worden wanneer: Er geen onderliggend lesmateriaal is Er geen toetsvraag is, die linkt naar de les Lesgroep Een lesgroep mag alleen verwijderd worden wanneer er geen cursisten onder vallen Gebruiker Een gebruiker mag alleen verwijderd worden, wanneer deze geen cursus (meer) volgt. Overige objecten Overige objecten zoals toetsvragen, lesmaterialen hebben geen restricties bij het verwijderen.
Foutmeldingen/waarschuwingen Indien het niet mogelijk is om een actie te voltooien (bijvoorbeeld doordat er een tweede object wordt toegevoegd met eenzelfde naam waarop een unieke waarde is), dan keert de gebruiker terug naar de voorgaande pagina. Hier krijgt de gebruiker in het midden van het scherm een pop-up te zien met feedback dat het niet gelukt is om de actie te voltooien met daarachter de reden. Deze pop-up is qua achtergrondkleur hetzelfde als de pop-up bij het verwijderen van objecten, alleen wordt hier een uitroepteken in plaats van kruis getoond.
Feedback foutmelding Functioneel en interactief ontwerp 2boost Pascal Alferink
12
Waarschuwingen Net als het verwijderen van objecten, kunnen andere acties ook niet ongedaan worden gemaakt. Voorbeelden hiervan zijn: Een toets die maar één keer gemaakt kan worden. Rating die maar één keer per cursus geplaatst kan worden Wanneer er geklikt wordt op een knop waarmee een actie geopend wordt, die maar één keer gedaan kan worden, wordt een confirmationbox getoond. Hierin wordt de gebruiker gewaarschuwd voor het feit dat een actie maar één keer gedaan kan worden. Daarnaast wordt om een bevestiging gevraagd of de gebruiker de actie verder wil doorvoeren. Indien de gebruiker hiermee instemt, wordt de actie doorgevoerd.
Feedback na het maken van toets Na het toevoegen, aanpassen en verwijderen van objecten wordt er steevast feedback getoond. Een ander punt in de applicatie waar feedback getoond wordt, is in de evaluatie na het maken van de toets. Hier wordt op de volgende manieren feedback getoond:
Behaald cijfer Na het maken van de toets wordt een cijfer berekend. Is het cijfer een voldoende (5,5 of hoger), dan wordt dit in een groene tekstkleur getoond met daarnaast een groene V. Is het cijfer een onvoldoende (5,4 of lager) dan wordt het cijfer in een rode tekstkleur getoond met daarnaast een rood kruis. Het cijfer is op de volgende plaatsen zichtbaar: Op de evaluatiepagina Op de cursuspagina (indien de toets is gemaakt) In het resultatenoverzicht van de cursus (op startpagina van de desbetreffende docent)
Functioneel en interactief ontwerp 2boost Pascal Alferink
13
Feedback per vraag Na het maken van de toets wordt de evaluatie getoond. Hier wordt per vraag behandeld of het antwoord dat gegeven is door de cursist goed of fout is. De feedback wordt als volgt getoond: Is de vraag goed beantwoord, dan verschijnt een groene V voor het gegeven antwoord. Is de vraag fout beantwoord, dan verschijnt een rood kruis voor het gegeven antwoord, het goede antwoord wordt gemarkeerd met een groene V. Onder elke vraag is tevens een hyperlink naar de lespagina waarin de lesstof behandeld is.
Evaluatie van toetsvraag
Lege objecten Wanneer een object geen onderliggende content bevat, zal er voor de duidelijkheid hier melding van gemaakt moeten worden. Op de plaats waar deze objecten dan zouden staan, staat hier de melding, dat er geen objecten zijn. Bijvoorbeeld, wanneer een cursus geen lessen bevat, wordt op de cursuspagina een foutmelding getoond zoals hieronder staat weergegeven:
Screenshot, cursus bevat geen lessen
Cursist niet ingeschreven Wanneer een gebruiker een cursus aanklikt, die hij niet volgt, krijgt de gebruiker niet alle informatie te zien. De informatie die niet getoond mag worden, is vervangen door een melding zoals dat hierboven ook getoond wordt. De melding bevat de tekst ‚U staat niet ingeschreven voor deze cursus‛.
Screenshot, cursist is niet ingeschreven voor cursus
Functioneel en interactief ontwerp 2boost Pascal Alferink
14
Functionaliteiten binnen 2boost per gebruikersprofiel 2boost is een online applicatie waarin diverse gebruikers(groepen), verschillende functionaliteiten tot hun beschikking hebben. 2boost bevat de volgende 5 gebruikersgroepen:
Niet ingelogde gebruikers Cursisten Auteurs Docenten Beheerders
In het volgende deel wordt ingegaan op de specifieke functionaliteiten die elk van de gebruikersgroepen tot zijn beschikking heeft. Hieronder staat in een tabel samengevat welke rechten elke gebruikersgroep heeft. Legenda behorende bij samenvattingstabel rechten binnen 2boost: X met rode achtergrond: Geen toegang V met groene achtergrond: Ongelimiteerde toegang V met blauwe achtergrond: Alleen toegang tot objecten waar desbetreffende gebruiker recht op heeft. Bijv. een auteur kan alleen cursussen beheren waarvan hij de auteur is. Cursussen waarvan hij geen auteur is, kan deze auteur ook niet beheren Account aanvragen Aanvraag verwerpen/accepteren Inschrijven voor cursus Zoekfunctie Cursus volgen Contentbeheer (content binnen cursus) Categoriebeheer Gebruikersprofielen beheren Toetsresultaten bekijken Cursusprogramma beheren
Niet ingelogd
Cursist
Auteur
Docent
Beheerder
V X V1 X X X X X X X
X X V V V X X V V2 X
X X X V X V X V X X
X X X V X X X V V3 X
X V X V X V V V X V
Samenvattingstabel rechten binnen 2boost 1
:
2
: :
3
Niet ingelogde gebruikers kunnen zich wel inschrijven voor een cursus, maar dit moet wel geaccordeerd worden door de beheerder(s). Cursisten kunnen alleen hun eigen zoekresultaat bekijken Docenten kunnen alleen zoekresultaten bekijken van cursisten aan wie ze les geven
Functioneel en interactief ontwerp 2boost Pascal Alferink
15
Algemene, openbare functionaliteiten De meeste pagina’s binnen 2boost zitten achter een inlog. Wanneer de gebruiker niet is ingelogd, ziet deze de inlogpagina. Hierop heeft de gebruiker maar 3 functies tot zijn beschikking: Formulier Inloggen Formulier Wachtwoord vergeten Cursusaanbod komende maanden Deze functies zijn allemaal te benaderen via de buttons in de horizontale menubalk
Cursusaanbod komende maanden Te bereiken vanaf: inlogpagina (Menubalk Cursusaanbod) Toegang: iedereen Wanneer op het cursusaanbod geklikt wordt, krijgt de gebruiker te zien welke cursussen in de komende 3 maanden starten (eerste terugkomdag is in deze maand of in de komende twee maanden). Per cursus is het volgende te zien (zie schema daaronder voor de herkomst van alle data):
Naam cursus Categorie waarbinnen cursus valt Beschrijving van cursus Datum waarop cursus start (vroegste waarde uit tabel comebackdays die hangt aan deze courseclass) Terugkomdata (alle data uit tabel comebackdays die hangen aan deze courseclass) Locatie waarop cursussen gegeven wordt. Audiovisuele introductie Inschrijfknop
De cursussen zijn geordend op startdatum oplopend; de cursus die als eerste start, staat bovenaan.
Functioneel en interactief ontwerp 2boost Pascal Alferink
16
Cursusdetails op pagina Cursusaanbod Wanneer op de inschrijfknop geklikt wordt, moet de gebruiker inloggen op de inlogpagina. Alleen geregistreerde gebruikers kunnen namelijk cursussen volgen. Indien de gebruiker geen account heeft, wordt deze geleid naar het formulier ‚Account aanvragen‛.
Audiovisuele introductie Om de aanstaande cursist een beeld te geven van de inhoud van de cursus bestaat er de mogelijkheid om de bezoeker te teasen met een korte introductie. Deze introductie bestaat uit een video waarin de volgende punten worden behandeld: Omschrijving van de cursus Aantal lessen dat cursus bevat De introductie is optioneel en puur om de toekomstige cursist te teasen. Vanuit didactisch perspectief is de les niet interessant. De demoles is te bereiken door in het cursusaanbod te klikken op de thumb ‚Bekijk demoles‛. Wanneer de gebruiker met zijn muis over de afbeelding gaat, wordt de afspeelknop (groene driehoek) groter. Wanneer op de afbeelding geklikt wordt, wordt de video in een lightbox afgespeeld.
Functioneel en interactief ontwerp 2boost Pascal Alferink
17
Account aanvragen Te bereiken vanaf: inlogpagina (Menubalk Account aanvragen) Toegang: iedereen Gebruikers die geen inlogcodes hebben, kunnen een account aanvragen bij 2Boost. Het aanvragen van een account kan via het formulier dat elke gebruiker ziet die niet ingelogd is.
Formulier Account Aanvragen Wanneer de gebruiker vanaf de pagina cursusaanbod op deze pagina terecht komt, is ook de cursus aangevinkt die de aanvrager heeft aangeklikt, het blijft echter ten aller tijde mogelijk om op meerdere cursussen in te schrijven. Wanneer de aanvrager het formulier correct heeft ingevuld en het formulier verzendt, worden drie processen gestart: de aanvraag wordt opgeslagen. De beheerder(s) krijgen via email bericht dat er een nieuwe aanvraag is binnengekomen. De beheerders zien wanneer ze inloggen op 2boost de binnenkomen aanvraag op hun homepage In het schema getiteld Registratieproces is dit proces schematisch weergegeven.
Functioneel en interactief ontwerp 2boost Pascal Alferink
18
Flow Gebruikersaccount aanvragen
Functioneel en interactief ontwerp 2boost Pascal Alferink
19
Inlogprocedure Te bereiken vanaf: nvt. Pagina is startpagina Toegang: Iedereen Bij het aanmaken van gebruikersaccounts wordt een username en wachtwoord verstrekt aan de gebruiker. Met deze gegevens kan de gebruiker inloggen.
Formulier Inloggen In het schema getiteld ‚Inlogproces‛ staat het inlogproces schematisch weergegeven.
Flow inlogproces Functioneel en interactief ontwerp 2boost Pascal Alferink
20
Wachtwoord vergeten Te bereiken vanaf: Inlogpagina (menubalk Wachtwoord vergeten) Toegang: Iedereen Het kan voorkomen dat de gebruiker zijn of haar wachtwoord vergeet. In dat geval kan de gebruiker zijn wachtwoord resetten via het formulier ‘Wachtwoord vergeten’. Op de homepage is dit formulier aanwezig. De gebruiker vult hier zijn e-mailadres in. Hierna wordt er een mail gestuurd naar het e-mailadres wat ingevuld is. Vanuit deze email kan de gebruiker klikken op een hyperlink waarmee de gebruiker op de homepage van 2boost komt. Hier wordt het proces voltooid door het wachtwoord aan te passen in het systeem. Na voltooiing krijgt de gebruiker via een pop-up feedback dat het wachtwoord succesvol is aangepast.
Formulier Wachtwoord vergeten
Functioneel en interactief ontwerp 2boost Pascal Alferink
21
Proces wachtwoord vergeten
Helpfunctie Te bereiken vanaf: Elke pagina (knop Help in header) Toegang: Iedereen Op elke pagina is er een helpfunctie aanwezig. Deze helpfunctie bevindt zich boven het zoekveld. Omdat niet elke pagina hetzelfde is, verschilt ook de inhoud van de helpfunctie per pagina. Wanneer de gebruiker op de helpfunctie klikt, wordt de helpfunctie in een pop-up geopend. De helpfunctie bestaat altijd uit een paar vaste onderdelen:
Inleiding, Schermuitleg, wat kun je hier doen evaluatie.
Inleiding In dit eerste stukje tekst wordt bevestigd dat de gebruiker op de helpfunctie heeft geklikt. Hier wordt ook in het kort uitgelegd wat er in deze helpfunctie staat.
Waar ben ik? Hier wordt in het kort uitgelegd waar de gebruiker zich momenteel bevindt en wat hij hier kan doen. Dit gebeurt eerst globaal uitgelegd, er is ook een schematische indeling met benaming van de onderdelen weergegeven.
Wat kan ik hier doen? Hier wordt dieper ingegaan op de diverse onderdelen op deze pagina. Per onderdeel wordt uitgelegd wat er te zien is en wat er mee gedaan kan worden.
Evaluatie In dit deel wordt in het kort gevraagd aan de gebruiker of deze helpfunctie hem geholpen heeft. Is dat het geval, dan kan de gebruiker het venster sluiten. Wanneer de gebruiker toch met een vraag blijft zitten wordt hij gevraagd deze vraag te mailen naar één van de beheerders. De beheerder zal contact met deze gebruiker opnemen en eventueel wordt de helpfunctie ook aangepast.
Functioneel en interactief ontwerp 2boost Pascal Alferink
22
Helpfunctie in pop-up
Functioneel en interactief ontwerp 2boost Pascal Alferink
23
Afgeschermde functionaliteiten Homepage (na inlog) Te bereiken vanaf: Inlogpagina Toegang: Iedereen die ingelogd is (functionaliteit varieert per gebruikersprofiel) Nadat de gebruiker is ingelogd ziet de gebruiker zijn homepage. Wat direct opvalt is dat de menubalk andere content bevat. De menubalk bevat na inlog de volgende functionaliteiten: Homepage Geavanceerd zoeken Cursusbeheer Gebruikersbeheer Log uit Zoekfunctie
(linkt naar homepage) (linkt naar zoekpagina) (linkt naar beheerpagina cursussen) (alleen Auteur en Beheerder) (linkt naar beheerpagina gebruikers) (alleen Beheerder) (logt huidige gebruiker uit) (linkt naar pagina zoekresultaten)
Elke gebruiker (ongeacht gebruikersprofiel) ziet onder het menu zijn persoonlijke gegevens staan. Hieronder is te zien hoe deze persoonlijke gegevens gepresenteerd worden:
Gebruikersdetails op homepage Onder de gebruikersgegevens staan 2 knoppen: Pas eigen profiel aan. Deze knop linkt naar de profielpagina alwaar de gebruiker zichzelf kan bewerken. Pas wachtwoord aan: Deze knop linkt naar pagina waar gebruiker zijn/haar wachtwoord kan aanpassen. Functioneel en interactief ontwerp 2boost Pascal Alferink
24
Het tonen van de gebruikersdetails is voor elke ingelogde gebruiker hetzelfde. De overige gegevens in het contentdeel verschillen per gebruikersprofiel. Wanneer een gebruiker niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Homepage gebruikersprofiel Cursist Gebruikers met het profiel Cursist zien na het inloggen op de homepage informatie betreffende de cursus(sen) waarvoor ze zijn ingeschreven Huidige cursussen Is een cursist ingeschreven voor een cursus dan ziet de gebruiker een tabel met de cursussen waaraan hij/zij deelneemt. Per cursus is het volgende te zien: Cursustitel: linkt naar cursuspagina Docent: linkt naar profielpagina van docent Aantal lessen binnen cursus
Openstaande cursussen op homepage voor cursist Voltooide cursussen Wanneer een cursus is afgelopen wordt deze bij de voltooide cursussen geplaatst. Dit is eenzelfde tabel onder de tabel met openstaande cursussen. Per cursus is het volgende te zien: Cursustitel (linkt naar cursuspagina) Docent (linkt naar profielpagina van docent) Aantal lessen binnen cursus Cijfer
Voltooide cursussen op homepage voor cursist Het cijfer wat in het overzicht staat is groen indien de waarde hoger is dan 5,4. Is de waarde 5,4 of lager dan is de kleur rood. Functioneel en interactief ontwerp 2boost Pascal Alferink 25
Homepage gebruikersprofiel Auteur Gebruikers met het profiel Auteur zien na het inloggen op de homepage informatie betreffende de cursussen waarvan zij de Auteur zijn. Per cursus is het volgende te zien: Cursustitel Aantal lessen ‘Beheer cursus’
(linkt naar de cursuspagina) (linkt naar de beheerpagina van de cursus)
Cursussen waarbij gebruiker de auteur is
Homepage gebruikersprofiel Docent Gebruikers met het profiel Docent zien na het inloggen op de homepage informatie betreffende de cursussen waarvan zij de Auteur zijn. Per cursus is het volgende te zien: Cursustitel (linkt naar de cursuspagina) Lesgroep (linkt naar lesgroeppagina) Lesgroepoverzicht o Naam van leerling (linkt naar profielpagina) o Cijfer (linkt naar evaluatie)
Cursussen waarbij gebruiker de docent is Omdat het cijfer linkt naar de evaluatie wordt deze niet in een groene of rode tekstkleur getoond, maar blauw.
Functioneel en interactief ontwerp 2boost Pascal Alferink
26
Homepage gebruikersprofiel Beheerder Gebruikers met het profiel Beheerder zien na het inloggen op de homepage ingekomen en verwerkte aanvragen. Openstaande aanvragen Potentiële gebruikers van 2boost kunnen zich inschrijven voor een cursus. Dit gebeurt door het invullen van het formulier op de homepage (Account aanmaken). Na verzending krijgt de beheerder(s) een email met de aanvraag. Daarnaast is op de homepage van de beheerder een overzicht te zien van alle binnengekomen aanvragen. Per openstaande aanvraag is het volgende te zien: Aanvrager Bedrijf Datum (waarop aanvraag is ingediend) Cursus(sen): cursussen waarop aanvrager zich wil inschrijven Aantal accounts: Aantal useraccounts die aangemaakt moeten worden Status: Huidige status van de aanvraag. o Openstaand o Afgewezen o Geaccepteerd Reden van verwerping: (Alleen zichtbaar bij status ‘Afgewezen’)
Ingekomen aanvraag Meer over het accepteren en verwerpen van binnengekomen aanvragen in het deel waarin de specifieke functionaliteiten van Beheerders worden behandeld.
Functioneel en interactief ontwerp 2boost Pascal Alferink
27
Algemene functies voor elke gebruiker binnen 2boost Vele functies achter de inlog binnen 2boost zijn afhankelijk van het gebruikersprofiel van de gebruiker. Enkele functies zijn echter voor elke gebruikersprofiel hetzelfde:
Eigen profiel aanpassen Te bereiken vanaf: Persoonlijke homepage Toegang: Iedereen die ingelogd is Elke gebruiker kan enkele naw-gegevens aanpassen. Dit kan de gebruiker doen door na het inloggen op de homepage te klikken op Pas eigen profiel aan. De gebruiker komt vervolgens op een formulier terecht die bestaat uit de onderstaande velden: Voornaam: (user.firstname) Achternaam: (user.lastname) E-mail: (user.email) Alle velden bevatten waardes die uit de database gehaald zijn.
Formulier Eigen profiel aanpassen Nadat alle velden correct zijn ingevoerd en het formulier verzonden is, komt de gebruiker op zijn homepage terecht. Hier krijgt de gebruiker feedback dat het profiel is aangepast. Alleen de velden Voornaam, Achternaam en E-mail zijn aanpasbaar Wanneer een gebruiker niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Wachtwoord wijzigen Te bereiken vanaf: Persoonlijke homepage Toegang: Iedereen die ingelogd is Elke gebruiker die ooit aangemaakt is, heeft willekeurig wachtwoord gekregen. Gebruikers hebben de mogelijkheid om dit willekeurige wachtwoord aan te passen naar een wachtwoord wat voor de gebruiker makkelijker te onderhouden is. Functioneel en interactief ontwerp 2boost Pascal Alferink
28
Op de homepage staat onder het blok met naw-gegevens de knop Pas wachtwoord aan. Door hierop te klikken wordt een formulier geopend waarmee de gebruiker zijn wachtwoord kan aanpassen. Het formulier bestaat uit twee velden: Nieuw wachtwoord Herhaal nieuw wachtwoord Wanneer hierna op de verzendknop geklikt wordt (en de beide nieuwe wachtwoorden zijn gelijk), wordt het formulier verzonden. Hierna worden de volgende processen gestart: Gebruiker wordt uitgelogd en gelinkt naar de inlogpagina Wachtwoord wordt geëncrypt in database geüpdate Nieuw wachtwoord wordt gemaild naar het e-mailadres dat aan de gebruiker hangt.
Formulier Wachtwoord wijzigen
Flow wachtwoord aanpassen
Functioneel en interactief ontwerp 2boost Pascal Alferink
29
Profiel bekijken van anderen Te bereiken vanaf: verschillende punten (veelal door op een naam te klikken van gebruiker) Toegang: Iedereen die ingelogd is Elke gebruiker op 2Boost een zijn eigen profielpagina. Op deze pagina staan de nawgegevens van de geselecteerde gebruiker. Deze pagina lijkt grotendeels op de startpagina van de gebruikers binnen 2boost. Hierbij zijn de volgende uitzonderingen:
Algemeen Geen knoppen Wachtwoord aanpassen en Profiel aanpassen
Cursist Bij cursisten is zichtbaar welke cursussen voltooid zijn en waarop de gebruiker is ingeschreven. Bij voltooide cursussen is het cijfer niet zichtbaar.
Auteur Bij auteurs is zichtbaar van welke cursussen de geselecteerde gebruiker de auteur is. De beheerfunctie is hierbij uitgeschakeld.
Docent Bij docenten is zichtbaar van welke cursussen de geselecteerde gebruiker de docent is. De beheerfunctie is hierbij uitgeschakeld. Ook de resultaten van de gebruikers zijn niet zichtbaar.
Beheerder Bij beheerders is geen extra informatie zichtbaar. Zowel openstaande als afgeronde aanvragen zijn dus niet zichtbaar. Wanneer een gebruiker niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Details van lesgroepen bekijken Te bereiken vanaf: verschillende punten (veelal door op de naam van een lesgroep te klikken) Toegang: Iedereen die ingelogd is Een lesgroep is een bundeling van cursisten die dezelfde cursus(sen) volgen. Elke gebruiker binnen de applicatie kan alle lesgroepen bekijken. Op de lesgroeppagina zijn de volgende gegevens zichtbaar: Overzicht van cursisten binnen lesgroep Overzicht van cursussen waarvoor lesgroep is ingeschreven Functioneel en interactief ontwerp 2boost Pascal Alferink
30
Cursistenoverzicht In het cursistenoverzicht staan alle cursisten die binnen de geselecteerde lesgroep vallen. Per cursist is het volgende te zien: Naam E-mailadres van gebruiker Knop Bekijk profiel (linkt naar profielpagina van gebruiker)
Cursusoverzicht In het cursusoverzicht staan alle cursussen waarvoor de lesgroep is ingeschreven. Per cursus is het volgende te zien: Naam Cursus (Linkt naar cursuspagina) Docent die cursus geeft (Linkt naar profielpagina) Aantal lessen binnen cursus
Zoeken op content en gebruikers Te bereiken vanaf: Persoonlijke homepage Toegang: Iedereen die ingelogd is Nadat de gebruiker ingelogd is, ziet deze in de menubalk de knop Geavanceerd zoeken en rechts een zoekformulier.
Snel zoeken Door gebruik te maken van het zoekformulier aan de rechterkant wordt genavigeerd naar de zoekresultatenpagina, waarbij gezocht wordt op hetgeen wat ingevoerd is in het invoerveld. Er wordt gezocht op de volgende punten:
Catgorietitel, Categorie-omschrijving Cursustitel, Cursusomschrijving Lestitel, Lesomschrijving Inlognaam Gebruikersnaam
(category.title) (category.description) (course.title) (course.description) (lesson.title) (lesson.description) (user.username) (user.firstname, user.lastname)
Functioneel en interactief ontwerp 2boost Pascal Alferink
31
Geavanceerd zoeken Naast de bovenstaande zoekfunctie, kan ook geavanceerder gezocht wordt. Door op de knop Geavanceerd zoeken te klikken komt de gebruiker op een uitgebreide zoekpagina terecht. Hier kunnen specifiekere filteringen aangebracht worden in de zoekopdracht:
Zoek binnen een bepaalde categorie Zoek binnen een bepaalde cursus Zoek binnen cursussen van een bepaalde auteur Zoek binnen een bepaald lestype Zoek binnen een bepaalde tijdsspanne waarop cursus is aangemaakt.
Naast deze uitgebreide zoekfunctie kan ook nog steeds gebruik gemaakt worden van de snelle zoekfunctie.
Geavanceerde zoekfunctie
Functioneel en interactief ontwerp 2boost Pascal Alferink
32
Zoekresultaten Of er snel gezocht is, of via de geavanceerdere maakt voor het tonen van de zoekresultaten niet veel uit. Het maakt voor de zoekfunctie ook niet uit of de gebruiker recht heeft op de gevonden content of niet. Content waarop de gebruiker geen recht heeft, wordt niet gefilterd. Op de zoekresultatenpagina wordt het volgende getoond:
Zoekstring + eventuele filteringen Aantal resultaten content Aantal resultaten gebruikers Zoekresultaten content Zoekresultaten gebruikers
Per content-resultaat wordt het volgende getoond: Titel van cursus (linkt naar cursus) Auteur van cursus (linkt naar profielpagina) Categorie waarbinnen cursus valt (linkt naar categorie) Omschrijving van cursus Per gebruikersresultaat wordt het volgende getoond: (Gebruikers)naam van persoon (linkt naar profielpagina) Type gebruiker
Geen resultaten gevonden Wanneer de gebruiker heef gezocht en er geen gebruiker/content is gevonden die voldoen aan de gestelde criteria, dan verschijnt er het bericht ‚Er is geen gebruiker/content gevonden die voldeden aan uw zoekcriteria, zoek nog eens of stel hier uw vraag aan de beheerder‛. Hieronder staat een invoerveld waarin de vraag gesteld kan worden. Wanneer de gebruiker het bericht verzendt komt deze automatisch in de mail van de beheerder(s) terecht. Wanneer een gebruiker niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Functioneel en interactief ontwerp 2boost Pascal Alferink
33
Zoekresultaten: gevonden content
Cursus volgen, Categorie bekijken Te bereiken vanaf: verschillende punten (veelal door op een categorietitel te klikken) Toegang: Iedereen die ingelogd is Categoriepagina’s zijn toegankelijk voor elke geregistreerde gebruiker. Vanuit de homepage kan de cursist op een categoriepagina komen door op één van de categorieën in het categorieoverzicht rechtsonderin te klikken. Op de categoriepagina zijn de volgende details te zien: De titel van de categorie, Omschrijving van de categorie het aantal cursussen dat deze categorie bevat
Details van Categorie Onder deze details is het cursusoverzicht te zien. Per cursus is het volgende te zien: Titel van de cursus (tevens hyperlink naar cursuspagina) Omschrijving van cursus Aantal lessen binnen de cursus Om het verschil tussen de regels te accentueren zijn regels wisselend lichtgroen en wit gemarkeerd. Functioneel en interactief ontwerp 2boost Pascal Alferink
34
Cursussen binnen Categorie Wanneer een gebruiker niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Functioneel en interactief ontwerp 2boost Pascal Alferink
35
Specifieke Functionaliteiten voor cursisten Nadat een cursist is ingelogd op 2boost heeft deze de mogelijkheid om de cursussen te bezoeken waarop hij toegang heeft. Elke cursus binnen 2boost heeft dezelfde opbouw. Deze opbouw bestaat uit de volgende onderdelen: 1. Een cursus valt binnen één categorie 2. Een cursus bevat één of meer lessen 3. Er is mogelijkheid tot het geven en lezen van feedback via Commentaar en Rating 4. Een cursus bevat één examen met meerdere multiple-choice vragen Wanneer een gebruiker toegang heeft tot een cursus betekent dit, dat hij ook recht heeft op de bovenstaande functies. Wanneer de cursist in het schema hieronder recht heeft op cursus x, betekent dit dat hij ook recht heeft op alle onderliggende functionaliteiten.,
Opbouw van content binnen 2boost
Functioneel en interactief ontwerp 2boost Pascal Alferink
36
Cursus volgen, Cursusdetails bekijken Te bereiken vanaf: verschillende punten (veelal door op een cursustitel te klikken) Toegang: Ingelogde cursist die ingeschreven staat voor desbetreffende cursus Ingelogde docent die desbetreffende cursus geeft Ingelogde auteur die auteur is van desbetreffende cursus De Cursuspagina is de homepage van de cursus. Vanuit deze pagina kan genavigeerd worden naar elke onderliggende functie. De cursuspagina is alleen toegankelijk voor de cursisten die ingeschreven staan voor de desbetreffende cursus. Op de cursuspagina zijn de onderstaande gegevens zichtbaar: 1. Titel cursus 2. Omschrijving 3. Categorie waarbinnen cursus valt (tevens link naar categoriepagina) 4. Auteur die cursus opgesteld heeft (tevens link naar profielpagina van auteur) 5. Aantal lessen binnen de cursussen 6. Aantal gebruikers die cursus in het verleden voltooid hebben. 7. Gemiddelde resultaat dat deze gebruikers behaald hebben. 8. Gemiddelde rating 9. Aantal keer dat een rating is gegeven op deze cursus 10. Laatst geplaatste commentaar. 11. Auteur van het laatst geplaatste commentaar (tevens link naar profielpagina van gebruiker) 12. Examen: Wel of niet gemaakt, a. Indien wel gemaakt dan link naar evaluatie, b. indien niet gemaakt, dan link naar examen. 13. Overzicht van lessen binnen cursus. Per les is het volgende te zien: a. Volgnummer van les binnen cursus b. Titel van les (tevens link naar lespagina) Indien de gebruiker niet is ingeschreven voor de desbetreffende cursus ziet de cursist alleen de eerste vijf items uit de bovenstaande lijst. Daaronder is de melding ‚U staat niet ingeschreven voor deze cursus.‛ Te lezen. Wanneer een gebruiker helemaal niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Functioneel en interactief ontwerp 2boost Pascal Alferink
37
Screenshot cursusdetails
Cursus volgen, Commentaar bekijken en plaatsen Te bereiken vanaf: Cursuspagina Toegang: Ingelogde cursist die ingeschreven staat voor desbetreffende cursus Ingelogde docent die desbetreffende cursus geeft Ingelogde auteur die auteur is van desbetreffende cursus Vanuit de cursuspagina kan er naar het commentaaroverzicht genavigeerd worden door op de commentaarknop te klikken. Op de commentaarpagina is het volgende te zien:
Formulier Commentaar plaatsen 1. Naam van huidige gebruiker, deze wordt na plaatsing zichtbaar bij het geplaatste bericht. 2. Bericht, hier staat het commentaar. Door op de knop Plaats bericht te klikken wordt het bericht geïnsert in de database en zichtbaar naast alle andere reeds geplaatste berichten. Na verzending blijft de gebruiker op de commentaarpagina. Naast de knop Plaats bericht is er ook een knop Keer terug naar cursus. Door hierop te klikken keert gebruiker terug naar de cursuspagina
Functioneel en interactief ontwerp 2boost Pascal Alferink
38
Formulier Commentaar plaatsen
Overzicht geplaatst commentaar Onder het formulier waarmee een bericht geplaatst kan worden staan alle reeds geplaatste berichten. Per bericht is het volgende te zien: 1. Datum en tijd waarop het bericht geplaatst is. 2. Gebruiker die bericht geplaatst heeft (tevens link naar profielpagina van de desbetreffende gebruiker) 3. Het bericht zelf. De berichten zijn geordend op datum van plaatsing aflopend. Het laatst geplaatste bericht staat dus bovenaan. Indien er meer dan 20 berichten aanwezig zijn op de commentaarpagina wordt een pagebrowser toegevoegd. Hiermee kan er genavigeerd worden naar oudere berichten. Indien de gebruiker niet is ingeschreven voor de desbetreffende cursus ziet de cursist geen commentaar, maar de melding ‚U staat niet ingeschreven voor deze cursus.‛ Te lezen. Wanneer een gebruiker helemaal niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Cursus volgen, lesdetails bekijken Te bereiken vanaf: Cursuspagina Toegang: Ingelogde cursist die ingeschreven staat voor desbetreffende cursus Ingelogde docent die desbetreffende cursus geeft Ingelogde auteur die auteur is van desbetreffende cursus Op de cursuspagina is een tabel zichtbaar waarin alle lessen staan die in de desbetreffende cursus aanwezig zijn. Elke lestitel linkt naar de lespagina. Op de lespagina staat allerlei informatie over de les zelf. De volgende informatie is zichtbaar: 1. 2. 3. 4. 5.
Titel van de les, Cursus waarbinnen de les zich bevindt, Categorie waarbinnen de les zich bevindt, Auteur van de cursus Beschrijving van de les.
Functioneel en interactief ontwerp 2boost Pascal Alferink
(linkt naar cursuspagina) (linkt naar categoriepagina) (linkt naar profiepagina auteur)
39
Onder deze lesdetails staat het lesmateriaal. Dit materiaal zelf kan in verschillende formats zichtbaar zijn: 1. Embedded Video 2. Downloadbare bestanden (bijvoorbeeld .doc-bestanden, .pdf-bestanden etc.) 3. Afbeelding Indien de gebruiker niet is ingeschreven voor de desbetreffende cursus ziet de cursist niet de lesdetails, maar de melding ‚U staat niet ingeschreven voor deze cursus.‛ Te lezen. Wanneer een gebruiker helemaal niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Cursus volgen, Toets maken Te bereiken vanaf: Cursuspagina Toegang: Ingelogde cursist die ingeschreven staat voor desbetreffende cursus Elke cursus bevat een toets. De toets is een bundeling van een variabel aantal multiplechoice-vragen. De vragen komen voort uit de lesstof die in één van de lessen binnen de cursus behandeld is. Per vraag is het volgende te zien: 1. Vraagstelling 2. één goed antwoord 3. drie foute antwoorden. De antwoorden staan per vraag geordend op alfabet. Op deze manier is het onmogelijk voor de cursist om te zien welk antwoord goed is. Onder de laatste vraag is de submit-knop zichtbaar. Door hierop te klikken worden de antwoorden geïnsert in de database. Naast alle antwoorden wordt ook het behaalde resultaat berekend en geïnsert in de database. De formulier voor het berekenen van het eindresultaat is:
(Aantal goede antwoorden / totaal aantal vragen) x 10 Na het opslaan van alle data komt de gebruiker op de evaluatiepagina. Indien de gebruiker niet is ingeschreven voor de desbetreffende cursus ziet de cursist niet de toets, maar de melding ‚U staat niet ingeschreven voor deze cursus.‛ Te lezen. Heeft de gebruiker de toets al eens gemaakt, dan wordt de evaluatie getoond. Wanneer een gebruiker helemaal niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Functioneel en interactief ontwerp 2boost Pascal Alferink
40
Cursus volgen, Evaluatie bekijken Te bereiken vanaf: Cursuspagina Toegang: Ingelogde cursist die ingeschreven staat voor desbetreffende cursus én de toets heeft gemaakt Ingelogde docent die desbetreffende cursus geeft Op de pagina van de evaluatie is de uitslag van de toets te zien. Daarnaast is per vraag te zien wat het goede antwoord is en wat de gebruiker heeft ingevuld. Het goede antwoord is gemarkeerd met een groene ‚V‛. Indien de vraag fout is beantwoord, wordt het foute gegeven antwoord gemarkeerd met een rode ‚X‛. Per vraag is ook de bron te zien waarin de lesstof behandeld werd.
Evaluatie van toets Indien de gebruiker niet is ingeschreven voor de desbetreffende cursus ziet de cursist niet de toets, maar de melding ‚U staat niet ingeschreven voor deze cursus.‛ Te lezen. Heeft de gebruiker de toets al eens gemaakt, dan wordt de evaluatie getoond. Wanneer een gebruiker helemaal niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Functioneel en interactief ontwerp 2boost Pascal Alferink
41
Specifieke Functionaliteiten voor auteurs Gebruikers met gebruikersprofiel ‘Auteur’ bevatten specifieke functionaliteiten die andere gebruikers niet hebben. De auteurs zijn diegene die de cursussen schrijven, plaatsen en beheren. Auteurs kunnen alleen content beheren waarvan ze de eigenaar zijn. Cursussen van anderen kunnen zijn niet beheren. De auteurs binnen 2boost worden aangesteld door de beheerder(s). Opsomming van specifieke functionaliteiten voor gebruikersprofiel Auteur:
Aanmaken van cursus Beheren van eigen cursus Verwijderen van eigen cursus Aanmaken van les binnen eigen cursus Beheer van les binnen eigen cursus Verwijderen van les binnen eigen cursus Aanmaken van lesmateriaal binnen eigen cursus Beheer van lesmateriaal binnen eigen cursus Verwijderen van lesmateriaal binnen eigen cursus Aanmaken van toetsvragen binnen eigen cursus Beheer van toetsvragen binnen eigen cursus Verwijderen van toetsvragen binnen eigen cursus
Naast deze functionaliteiten, zijn ook de onderstaande functionaliteiten voor auteurs beschikbaar die reeds beschreven staan bij de functionaliteiten specifiek voor cursisten Cursusdetails bekijken Commentaar bekijken en plaatsen Lesdetails bekijken Al deze functionaliteiten zijn beschikbaar wanneer de auteur is ingelogd. Na het inloggen ziet de auteur een knop genaamd Cursusbeheer in de menubalk die cursisten en docenten niet zien. Door hierop te klikken wordt het beheergedeelte voor content geopend.
Extra knop ‘Cursusbeheer’ in menubalk
Functioneel en interactief ontwerp 2boost Pascal Alferink
42
Content beheren, cursus selecteren Te bereiken vanaf: Persoonlijke homepage Toegang: Ingelogde gebruikers met gebruikersprofiel Auteur of Beheerder Nadat de gebruiker op de knop Cursusbeheer heeft geklikt, ziet de auteur het cursusoverzicht waarvan hij/zij de eigenaar is. Hiernaast staan een tweetal knoppen: Pas cursus aan Maak nieuwe cursus aan Wanneer de auteur uit het pulldowmenu een cursus selecteert en hierna op Pas cursus aan klikt, wordt een formulier geopend waarin de cursusdetails aangepast kan worden en de overige content binnen de cursus bekeken kunnen worden. Door te klikken op Maak nieuwe cursus wordt eenzelfde formulier getoond, maar uiteraard zijn hier dan de velden leeg.
Cursusoverzicht op pagina Cursusbeheer Wanneer een gebruiker niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Content beheren, cursusdetails Te bereiken vanaf: Persoonlijke homepage Toegang: Ingelogde gebruikers met gebruikersprofiel Auteur of Beheerder Nadat een cursus geselecteerd is, worden kan deze hier beheerd worden. Ook kunnen de lessen en toetsvragen beheerd worden vanaf hier. De pagina bevat de volgende onderdelen:
Cursusdetails aanpassen Cursus verwijderen Les(sen) binnen deze cursus openen om ze te beheren Nieuwe les aanmaken binnen deze cursus Toetsvragen binnen deze cursus openen om deze te beheren Nieuwe toetsvraag maken
Functioneel en interactief ontwerp 2boost Pascal Alferink
43
Cursusdetails aanpassen De volgende cursusdetails kan de auteur aanpassen.
Titel van cursus Omschrijving van de cursus Categorie waarbinnen cursus valt Auteur van de cursus
Nadat er op verstuur wijzigingen is geklikt, worden de wijzigingen doorgevoerd in de database. De gebruiker gaat na verzending naar de cursuspagina. Hier krijgt de auteur de bevestiging dat de cursus is aangepast.
Cursusdetails aanpassen
Cursus verwijderen Naast het aanpassen van cursusdetails is het ook mogelijk om de cursus te verwijderen. Een cursus kan alleen verwijderd worden wanneer voldaan wordt aan de volgende punten: Er hangen geen lessen aan de cursus Er hangen geen toetsvragen aan de cursus De cursus wordt niet gevolgd door één of meerdere lesgroepen. Indien dit het geval is, en er geklikt wordt op verwijder deze cursus wordt geklikt, wordt een confirmationbox getoond. Wanneer de auteur hier bevestigt, dat de cursus inderdaad verwijderd mag worden, wordt deze verwijderd uit de database. Na verwijdering van de cursus, gaat de gebruiker naar zijn homepage. Aan het verwijderen van een cursus zitten wel een aantal restricties. Een cursus die gevolgd wordt door een lesgroep kan bijvoorbeeld niet verwijderd worden. Meer hierover in het deel ‚Objecten verwijderen‛. Functioneel en interactief ontwerp 2boost Pascal Alferink
44
Lesoverzicht Onder het blok waarin de cursusdetails aangepast kunnen aangepast worden, staat een tabel met de lessen die binnen de cursus vallen. Per les is het volgende te zien: Titel van lex (linkt naar lespagina), met hiervoor het volgnummer van de les Beheerknop (linkt naar beheerpagina van les)
Lesoverzicht op pagina cursusdetails
Les toevoegen Onderin de tabel met daarin de aanwezige lessen is een knop aanwezig met de tekst Voeg les toe. Door hierop te klikken wordt het formulier geopend waarmee een nieuwe les aangemaakt kan worden.
Toetsvragen overzicht Net zoals er een tabel aanwezig is met daarin de lessen die binnen de geselecteerde cursus vallen, zo is er ook een tabel met toetsvragen die binnen de desbetreffende cursus vallen. Per toetsvraag is het volgende te zien: Vraagstelling Beheerknop (linkt naar beheerpagina van toetsvraag)
Toetsvraag toevoegen Onderin de tabel met daarin de aanwezige toetsvragen is een knop aanwezig met de tekst Voeg vraag toe. Door hierop te klikken gaat de auteur naar de pagina (admin_questio.php) alwaar het formulier geopend wordt, waarmee een nieuwe vraag aangemaakt kan worden. Indien de auteur niet als auteur staat ingeschreven voor de desbetreffende cursus ziet de auteur niet de beheerpagina, maar de melding ‚U staat niet geregistreerd als auteur voor deze cursus.‛ . Wanneer een gebruiker niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Functioneel en interactief ontwerp 2boost Pascal Alferink
45
Content beheren, lesdetails Te bereiken vanaf: Contentbeheer Toegang: Ingelogde gebruikers met gebruikersprofiel Auteur of Beheerder Wanneer de gebruiker in het cursusoverzicht op de beheerknop van een les heeft geklikt, wordt de beheerpagina van de les geopend. Op deze pagina kan het volgende beheerd worden: Lesdetails aanpassen Les verwijderen Lesmaterialen beheren
Lesdetails aanpassen De volgende lesdetails kunnen aangepast worden door de auteur. Lestitel Omschrijving van de les Volgorde waarin de les binnen de cursus getoond wordt Nadat er op verstuur wijzigingen is geklikt, worden de wijzigingen doorgevoerd in de database. De gebruiker gaat na verzending naar de lespagina. Hier krijgt de auteur de bevestiging dat de les is aangepast.
Les verwijderen Naast het aanpassen van lesdetails is het ook mogelijk om de les te verwijderen. Een les kan alleen verwijderd worden wanneer voldaan wordt aan de volgende punten: Er hangen geen toetsvragen aan de les De cursus wordt niet gevolgd door één of meerdere lesgroepen. Indien dit het geval is, en er geklikt wordt op verwijder deze les wordt geklikt, wordt een confirmationbox getoond. Wanneer de auteur hier bevestigt, dat de les inderdaad verwijderd mag worden, wordt deze verwijderd uit de database. Na verwijdering van de les, gaat de gebruiker naar zijn homepage.
Lesmaterialen overzicht Onder de lesdetails staat de tabel met alle aanwezige lesmaterialen. Per lesmateriaal is het volgende te zien: Titel van lesmateriaal Type lesmateriaal Beheerknop (linkt naar beheerpagina van lesmateriaal)
Functioneel en interactief ontwerp 2boost Pascal Alferink
46
Binnen een les moet het mogelijk zijn lesmaterialen aan te bieden. Deze lesmaterialen kunnen als volgt worden aangeboden: Embedded (bijv. video) Als download (bijv. pdf-document) Als afbeelding Aan de hand van het type les kan het lesmateriaal optimaal gepresenteerd worden. Indien de auteur niet als auteur staat ingeschreven voor de desbetreffende cursus ziet de auteur niet de beheerpagina, maar de melding ‚U staat niet geregistreerd als auteur voor deze cursus.‛ . Wanneer een gebruiker niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Lesmateriaal toevoegen Onderin de tabel met daarin de aanwezige lesmaterialen is een knop aanwezig met de tekst Voeg lesmateriaal toe. Door hierop te klikken wordt het formulier geopend waarmee nieuw lesmateriaal toegevoegd kan worden aan de les.
Content beheren, details lesmateriaal Te bereiken vanaf: Contentbeheer Toegang: Ingelogde gebruikers met gebruikersprofiel Auteur of Beheerder Wanneer de gebruiker in het lesoverzicht op de beheerknop in de regel van het lesmateriaal heeft geklikt, wordt de beheerpagina van het desbetreffende lesmateriaal geopend. Op deze pagina is een formulier zichtbaar waarmee het lesmateriaal beheerd worden. Het formulier bestaat uit de volgende velden: Titel van lesmateriaal Type lesmateriaal Bron: o URL o Bestand Het maakt voor het tonen van materiaal niet uit of het lesmateriaal intern of extern staat. Materialen die extern staan (bijvoorbeeld een video op Youtube) kunnen geembed worden door in het formulierveld URL de url van de video te plakken. Staat de content niet extern, dan biedt 2boost de mogelijkheid om het bestand te uploaden naar de server. In dat geval moet het bestand bij het formulierveld Bestand worden ge-upload.
Functioneel en interactief ontwerp 2boost Pascal Alferink
47
Wanneer het formulier verzonden wordt, worden de wijzigingen opgeslagen in de database. De gebruiker gaat na verzending naar de lespagina. Hier krijgt de auteur de bevestiging dat de les is aangepast. Indien de auteur niet als auteur staat ingeschreven voor de desbetreffende cursus ziet de auteur niet de beheerpagina, maar de melding ‚U staat niet geregistreerd als auteur voor deze cursus.‛ . Wanneer een gebruiker niet is ingelogd en op deze pagina komt, krijgt hij/zij de melding ‘U bent niet ingelogd’ te zien, met daaronder het inlogformulier.
Functioneel en interactief ontwerp 2boost Pascal Alferink
48
Content beheren, details toetsvraag Te bereiken vanaf: Contentbeheer Toegang: Ingelogde gebruikers met gebruikersprofiel Auteur of Beheerder Wanneer de gebruiker in het overzicht met de toetsvragen op de beheerknop in de regel van de toetsvraag heeft geklikt, wordt de beheerpagina van het desbetreffende toetsvraag geopend.
Toetsvraag aanpassen Op deze pagina is een formulier zichtbaar waarmee de desbetreffende toetsvraag beheerd worden. Het formulier bestaat uit de volgende velden:
Vraagstelling Goede antwoord Fout antwoord nr 1 Fout antwoord nr 2 Fout antwoord nr 3 Lesbron
Wanneer de auteur wijzigingen heeft toegepast en op verstuur wijzigingen heeft geklikt wordt het formulier verzonden en worden de wijzigingen opgeslagen in de database. De gebruiker gaat na verzending naar de lespagina. Hier krijgt de auteur de bevestiging dat de toetsvraag is aangepast.
Toetsvraag verwijderen Naast het aanpassen van een toetsvraag is het ook mogelijk om een toetsvraag te verwijderen. Dit kan door op de knop Toetsvraag verwijderen te klikken. Een les kan ten aller tijde verwijderd worden. Indien op Toetsvraag verwijderen wordt geklikt, wordt een confirmationbox getoond. Wanneer de auteur hier bevestigt, dat de toetsvraag inderdaad verwijderd mag worden, wordt deze verwijderd uit de database. Na verwijdering van de les, gaat de gebruiker naar de lespagina alwaar de auteur de bevestiging krijgt dat een toetsvraag is verwijderd.
Functioneel en interactief ontwerp 2boost Pascal Alferink
49
Specifieke Functionaliteiten voor docenten Net als gebruikers met gebruikersprofiel ‘Auteur’, hebben ook gebruiker met gebruikersprofiel ‘Docent’ specifieke functionaliteiten die andere gebruikers niet hebben. De docenten zijn diegene die cursusinhoud geven aan lesgroepen. Daarnaast monitoren docenten de cursisten binnen de lesgroepen waaraan ze les geven. De docent presenteert in feite het cursusmateriaal aan de cursist. Aan de inhoud van de cursus op 2boost kan de docent niets veranderen. Docenten binnen 2boost worden aangesteld door de beheerder(s). Naast de specifieke functionaliteiten voor docenten, zijn ook de onderstaande functionaliteiten voor docenten beschikbaar die reeds beschreven staan bij de functionaliteiten specifiek voor cursisten Cursusdetails bekijken Commentaar bekijken en plaatsen Lesdetails bekijken
Cursisten monitoren Docenten hebben geen uitgebreide beheerfunctie zoals auteurs dat hebben. De enige extra functionaliteit, specifiek voor docenten, is het bekijken van resultaten van cursisten binnen lesgroepen waaraan de docent lesgeeft. Het bekijken van deze resultaten is direct beschikbaar nadat de docent is ingelogd. Op de homepage van de docent staat onder het blok met de details van de docent een overzicht van alle lesgroepen die cursussen volgen van de desbetreffende docent. Per lesgroep is het volgende te zien: Titel van Lesgroep (linkt naar lesgroep) Titel van cursus die lesgroep volgt(linkt naar cursus) Overzicht van cursisten binnen de desbetreffende lesgroep. Per cursist is het volgende te zien: o Naam van cursist (linkt naar profielpagina van cursist) o Behaald resultaat (linkt naar evaluatie van gemaakte toets) Omdat het behaalde resultaat link naar de evaluatiepagina, wordt deze blauw weergegeven in plaats van een indicatieve kleuren groen en rood.
Functioneel en interactief ontwerp 2boost Pascal Alferink
50
Cursistenoverzicht binnen cursus
Functioneel en interactief ontwerp 2boost Pascal Alferink
51
Specifieke functionaliteiten voor Beheerders Gebruikers met gebruikersprofiel Beheerder zijn de administrators van 2boost. Gebruikers binnen deze groep hebben vrijwel alle rechten die gebruikers binnen andere groepen ook hebben. Daarnaast hebben gebruikers die vallen onder deze groep de volgende specifieke functionaliteiten:
Accepteren en verwerpen van aanvragen Lesgroepen (ont)koppelen aan cursussen en docenten Beheer van alle categorieën, cursussen en onderliggende content Beheer van alle lesgroepen en gebruikers
Accountaanvraag verwerpen/accepteren Te bereiken vanaf: Persoonlijke homepage Toegang: Beheerder Wanneer een gebruiker een accountaanvraag heeft gedaan, wordt de beheerder(s) van 2boost genotificeerd via 2 kanalen: 1. De beheerder(s) krijgen een e-mail met daarin de aanvraag. Vanuit hier kunnen ze direct inloggen op 2boost. 2. De beheerder(s) zien wanneer ze inloggen op 2boost de aanvraag op hun homepage. Wanneer de beheerder is ingelogd worden alle openstaande aanvragen getoond. Per aanvraag zijn de volgende gegevens te zien: Voor- en achternaam Aanvrager (user.firstname, user.lastname) Bedrijf (user.company) E-mail (user.email) Aantal aangevraagde accounts (request.useramount) Status (request.status) De status is middels een pulldownmenu aan te passen. Er zijn drie opties binnen deze select. Openstaand (standaardwaarde) Verwerpen Toegestaan
Functioneel en interactief ontwerp 2boost Pascal Alferink
52
Binnengekomen aanvraag
Aanvraag verwerpen Wanneer de beheerder de status van de aanvraag op ‘Afgewezen’ wordt gezet, en op bevestigen wordt geklikt, wordt de beheerder gevraagd een motivatie te geven voor de afwijzing. Nadat deze motivatie is ingevuld, worden de volgende processen gestart: Afwijzende terugkoppeling naar aanvraag via e-mail Status van aanvraag wordt in database op ‘Afgewezen’ gezet
Aanvraag accepteren Wanneer de beheerder akkoord gaat met de aanvraag, zal deze beheerder de aanvraag op status ‘Toegestaan’ zetten. Wanneer dit het geval is, worden de volgende processen gestart:
Aanvraag verwerpen Indien de aanvraag verworpen wordt, moet de beheerder in een formulier een motivatie toevoegen. Nadat dit gebeurd is en het formulier verstuurd wordt, wordt een record weggeschreven in de database. Daarnaast wordt de aanvrager gemaild met het bericht dat de aanvraag verworpen is, met motivatie. De aanvraag wordt ook verwijderd uit het overzicht met openstaande aanvragen.
Functioneel en interactief ontwerp 2boost Pascal Alferink
53
Flow Acceptatie / verwerping van aanvraag
Toegang beheren tot cursussen Gebruikers met gebruikersprofiel beheerder, zijn diegene die de toegang tot cursussen bepalen. Deze toegang tot het volgen van cursussen bestaat uit de volgende componenten:
Wie mag de cursus volgen (lesgroep) Welke cursus mag gevolgd worden Wie is de docent van de cursus Begin- en einddatum waartussen de cursus gevolgd mag worden
De koppeling tussen deze 4 componenten bepaald gezamenlijk de toegang tot een cursus voor zowel cursisten als de docent. Het beheren van deze koppeling kan door in de menubalk op de knop Cursustoegang te klikken. Deze knop is alleen beschikbaar voor gebruikers met profiel ‘Beheerder’.
Knop Cursustoegang in hoofdmenu Omdat gebruikers met profiel ‘Beheerder’ drie extra knoppen tot zijn beschikking hebben, is er ruimtegebrek ontstaan in het hoofdmenu. Dit is verholpen door het zoekveld smaller te maken.
Functioneel en interactief ontwerp 2boost Pascal Alferink
54
Overzicht gekoppelde cursussen Te bereiken vanaf: Persoonlijke homepage Toegang: Ingelogde gebruikers met gebruikersprofiel Beheerder Beheerders kunnen de koppelingen aanmaken, aanpassen en verwijderen. Het beheren van deze koppelingen kan allemaal vanuit de pagina Cursustoegang. Op de pagina cursustoegang ziet de gebruiker een overzicht van alle aangemaakte koppelingen. Deze zijn onderverdeeld in drie blokken: Overzicht van cursussen die momenteel actief zijn. Overzicht van cursussen waarvan de einddatum bereikt is. Overzicht van cursussen die in de komende drie maanden starten. Per blok is de volgende informatie zichtbaar:
Start- en einddatum Naam van lesgroep (linkt naar lesgroep) Titel van cursus (linkt naar cursuspagina) Naam van docent (linkt naar profielpagina) Beheerknop (niet in het blok van verlopen cursussen)
Binnen alle blokken zijn de gegevens geordend op startdatum.
Overzicht actieve cursussen Wanneer op de beheerknop geklikt wordt, wordt de pagina geopend waar de de desbetreffende koppeling aangepast kan worden. Wanneer een gebruiker geen beheerder en op deze pagina komt, krijgt hij/zij de melding ‘U heeft geen recht op deze pagina’ te zien, met daaronder het inlogformulier.
Functioneel en interactief ontwerp 2boost Pascal Alferink
55
Cursustoegang beheren Te bereiken vanaf: Persoonlijke homepage Toegang: Ingelogde gebruikers met gebruikersprofiel Beheerder Het beheren van de toegang tot cursussen is alleen toegankelijk voor beheerders. Maar ook zij hebben een aantal restricties binnen het beheer van de toegang tot cursussen. Cursussen waarvan de einddatum bereikt is kunnen in zijn geheel niet worden aangepast. Cursussen die momenteel actief zijn op de volgende punten vergrendeld: o Startdatum van cursus o Lesgroep die cursus volgt
Gebruikersprofielen beheren Te bereiken vanaf: Persoonlijke homepage (Gebruikersbeheer) Toegang: Ingelogde gebruikers met gebruikersprofiel Beheerder Cursisten, Auteurs en Docenten kunnen hun eigen profiel grotendeels beheren. De eigenschappen die zij kunnen beheren zijn: Voornaam Achternaam Email Gebruikers met gebruikersprofiel Beheerder hebben echter nog een paar extra velden waarmee ze de gebruikers verder kunnen beheren. De extra velden die beheerders zijn zijn: Lesgroep Gebruikersprofiel Beide extra velden zijn pulldownmenu’s.
Gebruikers verwijderen Daarnaast beschikken gebruikers met gebruikersprofiel Beheerder ook de mogelijkheid om gebruikers te verwijderen. Dit kan door onder het formulier waarin de gebruiker aangepast kan worden, op de knop Verwijder gebruiker te klikken. Wanneer de gebruiker hierop klikt (en in de confirmationbox dit bevestigd), wordt de gebruiker inactief gezet. Wanneer een gebruiker probeert in te loggen met een account die niet meer geldig is, krijgt de gebruiker via een pop-up feedback dat het account niet meer geldig is. Functioneel en interactief ontwerp 2boost Pascal Alferink
56
Formulier Gebruiker aanpassen
Functioneel en interactief ontwerp 2boost Pascal Alferink
57