Functioneel Ontwerp. digital4u.nl effectief op internet. Klant. Digitale Vaardigheden. Project. Website. April Datum

Transcriptie

1 Functioneel Ontwerp Klant Project Datum Website April 2013 digital4u.nl effectief op internet

2 2 Inhoudsopgave Introductie Functioneel Ontwerp Homepagina Header, Sidebar Video, Testimonials Nieuwsarchief Werkgevers Veelgestelde vragen, Zoekresultaten Werknemers, Onderwijs Agenda Examenlocaties Contact DQ Test Nieuwsbrief Gebruikte plugins

3 3 Functioneel Ontwerp Introductie Het Functioneel Ontwerp (F.O.) is de blauwdruk van uw website. In het F.O. staan de functionaliteiten van de website beschreven. Het F.O. is zeer belangrijk om het ontwikkelproces efficiënt te laten verlopen en eventuele misverstanden ten aanzien van de gewenste functionaliteiten zoveel mogelijk te voorkomen. Het maakt ook het testproces eenvoudiger. In dit F.O. is verder de volgende informatie opgenomen: Schematisch overzicht van diverse soorten pagina s (wireframe), zoals: homepagina, algemene tekstpagina; Beschrijving op voldoende detailniveau van de functionaliteiten per paginasoort, zodat het voor zowel u als onze ontwikkelaars duidelijk is wat de functionaliteiten inhouden; Schematisch stroomschema (flowchart); Navigatie binnen de website; Breadcrumbs (kruimelpad); Pagina ontwerp & belangrijke pagina elementen; Social media; Controle van dit document Wij vragen u dit document nauwkeurig door te lezen. Hierna worden in overleg eventueel gewenste wijzigingen door Digital4u doorgevoerd. Na goedkeuring van het definitieve F.O. start Digital4u met de ontwikkeling van het project.

4 4 Homepagina De homepagina bestaat uit de volgende belangrijke elementen: Menu Hoofd-navigatie van de website; Header Header met 3 links naar hoofd pagina s; Content homepagina Content van de homepagina. Met links naar belangrijke pagina s en actueel nieuws zoals agenda items, laatste nieuwsberichten; Testimonials Testimonials van partners; Top In de top is de volgende informatie altijd te vinden: Logo (link naar pop-up video); Submenu; Social Media links; Zoekfunctie; Footer In de footer is de volgende informatie altijd te vinden: Contactgegevens; Links; Social Media links; Nieuwsbrief aanmeldings formulier; Twitterfeed;

5 Homepagina

6 6 Header De header op de homepagina werkt als volgt: Wanneer een bezoeker met de muis over de blokjes van de header heen gaat lichten ze op, tegelijkertijd veranderd de foto en de omschrijving. Wanneer de bezoeker vervolgens klikt op de titel (of de foto) wordt deze doorverwezen naar de pagina die aan deze slide gelinkt staat. Een slide heeft de volgende inhoud: Een titel; Een omschrijving; Een foto; Een link Maximaal 3 slides zijn tegelijkertijd mogelijk. Informatie Sidebar De meeste subpagina s in de website hebben rechts en/of links naast de algemene content van de pagina een sidebar. Dit is een ruimte aan de zijkant van de pagina waar belangrijke, interessante of nuttige informatie geplaatst kan worden door middel van widgets. Bij het aanmaken van een pagina zijn de volgende sidebar instellingen mogelijk: Sidebar links Sidebar rechts Sidebar rechts & links

7 Informatie 7 Video Op de homepagina bevindt zich een informatieve (YouTube) video. Zodra de bezoeker de video afspeelt, zal deze full-screen getoond worden en afspelen. Informatie Testimonials Onderaan de homepagina worden testimonials van partners getoond. Een testimonial bevat: Een afbeelding; Een naam; Een titel/functie; Een (korte) tekst; Wanneer de bezoeker met de muis over de foto s heen gaat wordt de bijbehorende quote/testimonial getoond. Plugin: Testimonial Rotator Informatie Uitklapmenu Wanneer pagina s in het navigatie menu subpagina s bevatten wordt automatisch altijd een uitklapmenu getoond.

8 Nieuwsarchief 8 Kruimelpad: Home > Nieuws Het nieuwsarchief toont standaard de laatst geplaatste nieuwsberichten. In het archief worden de berichten getoond met een korte samenvatting en een afbeelding. Met de nieuwsarchief-widget kunnen de berichten per maand gefilterd worden. Wanneer bijvoorbeeld maart 2013 geselecteerd is, worden alleen de berichten uit deze maand getoond. Berichten:...kunnen geplaatst worden door verschillende gebruikers;...kunnen gecategoriseerd worden in categorieën Paginatie In het voorbeeld hiernaast worden per pagina 6 nieuwsberichten getoond, door middel van de paginatie onderaan kan door het gehele archief gebladerd worden. Enkel nieuwsbericht Kruimelpad: Home > Nieuws > Nieuwsbericht De detailpagina van een nieuwsbericht. Hier word de hele inhoud van het nieuwsbericht getoond. Klikken op de foto opent een lightbox met de vergrootte afbeelding. Met de volgende/vorige links onderaan kun je gemakkelijk het vorige of volgende bericht lezen.

9 Nieuwsarchief Maart 2013

10 10 Werkgevers Kruimelpad: Home > Werkgevers De introductiepagina voor de hoofdpagina Werkgevers. De pagina kan gevuld worden met alle gewenste content zoals tekst en afbeeldingen. Sidebar Deze soort pagina heeft standaard aan de linker- en rechterkant een sidebar. De linkerkant bevat de widgets: Submenu items van Werkgevers Projectleider informatie Subpagina Kruimelpad: Home > Werkgevers > subpagina Een subpagina van de hoofdpagina Werkgevers. De inhoud van de pagina kan gevuld worden met alle gewenste content. Sidebar De linker sidebar is hetzelfde als de hoofdpagina Werkgevers.

11 Veelgestelde vragen 11 Kruimelpad: Home > Werkgevers > Veelgestelde vragen De subpagina Veelgestelde vragen onder de hoofdpagina Werkgevers. Vragen kunnen onderverdeeld worden in categorieën (bijv: Werkgevers, Onderwijs, etc.). Zo kunnen onder een hoofdpagina alleen vragen getoond worden die betrekking hebben op dat onderwerp. Plugin: WP Super FAQ Zoekresultaten Kruimelpad: Home > Zoek resultaten... De resultaten pagina wanneer een zoekopdracht via het zoek formulier is gegeven. Samenvatting Resultaten worden getoond als samenvatting (titel + pagina/bericht inhoud). Wanneer er een afbeelding beschikbaar is, word deze getoond. Indien er geen afbeelding in de pagina zit, word er ook geen afbeelding getoond.

12 Voorbeeld introductiepagina Werkgevers

13 13 Werknemers Kruimelpad: Home > Werknemers De introductiepagina voor de hoofdpagina Werknemers. Bovenaan de tekst staat vast het blok Werknemers. Daaronder kan de pagina gevuld worden met alle gewenste content. Sidebar Deze pagina heeft standaard aan de linker- en rechterkant een sidebar. De linkerkant bevat twee widgets: Submenu items van Werknemers Projectleider informatie Onderwijs Kruimelpad: Home > Onderwijs De introductiepagina voor de hoofdpagina Onderwijs. Bovenaan de tekst staat vast het blok Onderwijs. Daaronder kan de pagina gevuld worden met alle gewenste content. Sidebar Deze pagina heeft standaard aan de linker- en rechterkant een sidebar. De linkerkant bevat twee widgets: Submenu items van Onderwijs Projectleider informatie

14 Agenda 14 Kruimelpad: Home > Agenda Standaard toont de agenda een maandweergave. De huidige maand word standaard direct geladen. Datum Linksboven kan de gewenste datum (maand + jaar) geselecteerd worden. Hover Wanneer je met de muis over een agenda-item beweegt komt er een pop-up naar voor. Klikken op het item opent het agenda item in een nieuw pagina (zie hieronder). Plugin: The Events Calendar Agenda detail pagina Kruimelpad: Home > Agenda >... Voorbeeld detail pagina van een agenda-punt. Zet in mijn agenda Bezoekers kunnen het agendapunt in hun eigen digitale agenda importeren met de button rechstboven.

15 Agenda maandweergave

16 16 Examenlocaties Kruimelpad: Home > Examenlocaties De pagina waar de bezoeker kan zoeken naar examenlocaties in zijn of haar buurt. Zoeken Via het zoekformulier kan gezocht worden door middel van de postcode. Zoekresultaten Kruimelpad: Home > Examenlocaties Zoekresultaten worden zowel in lijstweergave (sidebar) getoond, als ook in de kaart zelf. Details Klikken op een resultaat opent meer details over de vestiging.

17 Examenlocaties zoekresultaten

18 Contact 18 Kruimelpad: Home > Contact De contactpagina toont alle mogelijkheiden om in contact te komen, namelijk: Contactformulier formulier. Contactegevens Naast het formulier worden contactgegevens getoond. Deze gegevens kunnen als vcard aan het digitale adresboek van een bezoeker toegevoegd worden met de link Zet in mijn adresboek.

19 DQ test 19 Kruimelpad: Home > DQ test Introductiepagina van de DQ test. Met bijvoorbeeld informatie over de test. Deze introductie kan naar wens gevuld worden met gewenste content. De button Start de test start de test en verwijst direct door naar de eerste stap. Plugin: WP Pro Quiz DQ test vraag Kruimelpad: Home > DQ test >... Voorbeeld van een vraag. De bovengenoemde plugin biedt verder o.a. de volgende mogelijheden voor het maken van vragen: Te verdienen punten per vraag instellen; Multiple/ single choice; Open vragen; Tijdslimiet; Hints per vraag instellen; Afbeeldingen in vragen en antwoorden; Correct/incorrect melding bij elke vraag instellen;

20 DQ test resultaat 20 Kruimelpad: Home > DQ test >... Resultaten pagina van de test. De pagina toont het behaald aantal punten en een score-percentage. Optioneel is het laten zien van best behaalde scores. Bezoekers kunnen er dan uiteindelijk voor kiezen om hun eigen score ook te delen in de lijst van best behaalde scores.

21 Nieuwsbrief 21 Nieuwsbrief welke klanten kunnen ontvangen wanneer zijn geabonneerd zijn. De nieuwsbrief bestaat uit de volgende stukken: Header Header afbeelding. Hier kan het logo in geplaatst worden, maar ook bijvoorbeeld gecombineerd met een uitgelicht onderwerp (in het voorbeeld de DQ test). Algemene tekst Deze tekst kan gevuld worden met alle gewenste content zoals tekst, afbeeldingen, links, etc. Nieuwsberichten Nieuwsberichten kunnen geselecteerd worden om in de nieuwsbrief te tonen. Nieuwsberichten tonen een stukje tekst met een lees verder-link welke linkt naar het volledige bericht op de website. Footer Footer met social media links en contactgegevens. Plugin: WYSIJA Newsletters

22 22 Functioneel Ontwerp Gebruikte plugins Voor bepaalde functionaliteiten zullen plugins worden gebruikt. In dit F.O. zijn funcionaliteiten omschreven waar de volgende plugins voor zullen worden gebruikt: Agenda Plugin: The Events Calendar URL: Nieuwsbrief Plugin: WYSIJA Newsletters URL: Veelgestelde vragen Plugin: WP Super FAQ URL: DQ Test Plugin: WP Pro Quiz URL: Testimonials Plugin: Testimonial Rotator URL: