Strategie. concept. Schatkamer van de Toekomst

Transcriptie

1 Strategie en concept Schatkamer van de Toekomst

2 Inhoudsopgave Inleiding 3 Online strategie 4 Templates 6 Grid 7 Top-level template 8 Mid-level template 11 Bottom-level template 15 Mijn omgeving 23 Thema skinning 34 Design impressie 36 Homepages 37 Themapagina s 38 Overviewpagina s 39 Contentpagina s 40 Mijn menu 41 Componenten 24 Functioneel - Basis 25 Functioneel - Informatie 26 Functioneel - Content elementen 27 Functioneel - Formulier elementen 28 Ontdekken 29 Verzamelen en delen 30 Omgeving switch 31 Inloggen 32 Adaptief 33

3 1 Inleiding Dit document is bedoeld om inzicht te geven in de Bibliotheek strategie en concept. Het legt uit waar de website aan moet voldoen om de doelstellingen te behalen en online succesvol te kunnen zijn. Verder wordt het op de opbouw van de verschillende omgevingen en pagina s toegelicht, dus welke templates en componenten er gebruikt moeten/kunnen worden. Dit document is voor iedereen die betrokken is bij dit project en iedereen die zich wil aansluiten en wil participeren aan de Bibliotheek website.

4 2 Online strategie De online strategie dient als kompas bij het ontwerpen van functionaliteiten, interactie en vormgeving van de website. Het geeft de belangrijkste pijlers van bibliotheek.nl weer: Zoeken & Vinden, Ontdekken & Reizen en Verzamelen & Delen. Met deze strategische ontwerpeisen kan bibliotheek.nl de beoogde internetambitie waar maken.

5 2.0 Online strategie 5 Strategische ontwerpeisen waaraan Bibliotheek.nl moet voldoen om de internetambitie waar te maken. Internetambitie Bibliotheek.nl 2011 Schatkamer en ontmoetingsplaats De bibliotheek is een plek voor ontdekkingen, voor reizen met de geest. De bibliotheek is een ontmoetingsplaats waar ervaringen en ideeën worden gedeeld met andere gebruikers. De bibliotheek maakt je een interessanter mens. (Geeft verhalen om te delen) De bibliotheek is een plaats om je wereld te verbreden en jezelf te ontwikkelen. 2. Ontdekken en reizen (Schatkamer) Zonder overzicht en structuur is het lastig ontdekken en ontmoeten. De ontwerpregels die genoemd worden in deze pijler zijn basisvoorwaarde voor het realiseren van de kernbelofte Schatkamer en ontmoetingsplaats (pijler 2 en 3). De gebruiker wordt uitgedaagd om verder te exploreren. De gebruiker wordt verrast in zijn journey. De gebruiker moet op basis van zijn behoeftes in zijn reis het gevoel krijgen steeds in een compleet nieuwe wereld te kunnen stappen. De overgangen tussen de verschillende werelden moeten intuitief en vloeiend zijn (switchen tussen verschillende thema s). Zorg voor genoeg afleiding en vermaak tijdens de reis. Bij ontdekken hoort verbergen: content verrassend verpakken. Ontdekken en reizen ondersteunen met rijke interactie en beleving (visuals, video s, short copy). 3. Verzamelen en delen (Ontmoetingsplaats) In deze pijler worden de ontwerpregels beschreven die de kernbelofte Ontmoetingsplaats realiseren Bezoekers kunnen hun ontdekkingen verzamelen en vastleggen op lijstjes en deze lijstjes delen. Gebruikers stimuleren elkaar om tot andere inzichten te komen. Op die manier wordt je uitgedaagd je blikveld te verruimen. Ratings en reviews triggeren de gebruiker. Wat deden andere gebruikers? Testimonials,verpakt in een spannende vorm, kunnen als gids dienen voor bezoekers. Bezoekers worden in de mogelijkheid gesteld rondom thema s hun kennis en ervaringen te delen. De site moet een verzamelplaats van interessante en vernieuwende ideeen zijn. Wat je gevonden of ontdekt hebt tijdens je reis (lees: widgets) neem je mee naar plaatsen waar je vaak bent zoals Hyves, Facebook etcetera of deel je via andere middelen zoals magazines. 1. Zoeken en vinden (Functioneel) Zonder overzicht en structuur is het lastig ontdekken en ontmoeten. De ontwerpregels die genoemd worden in deze pijler zijn basisvoorwaarde voor het realiseren van de kernbelofte Schatkamer en ontmoetingsplaats (pijler 2 en 3). De basisfuncties (site, pagina- en navigatiestructuur ) zijn helder en consistent. De behoeften van de bezoeker zijn leidend voor ingangen, taalgebruik en samen- stelling van pagina content. De site biedt hulp waar nodig in verschillende vormen (Virtuele Assistant). Informatie en functionaliteit moeten in positie en timing relevant zijn voor de gebruiker. Pagina s zijn goed scanbaar, het taalgebruik is helder en eenvoudig. De website past zich aan aan de behoeftes van de gebruiker bijvoorbeeld door middel van personaliseren en het aanbieden van verschillende weergaveopties.

6 3 Templates Om structuur en overzicht te bieden tijdens het ontwerpproces, zijn er een aantal basistemplates ontworpen die gebruikt kunnen worden om bibliotheek.nl op te bouwen. De templates kunnen gebruikt worden voor het maken van landelijke en lokale pagina s. Er zijn 4 verschillende niveaus waarin deze templates gebruikt kunnen worden. Hoe dieper het niveau, des te meer ruimte er beschikbaar is voor content en detailinformatie. Hoe hoger het niveau, des te meer ruimte voor het bieden van overzicht en inspiratie. Type templates: Homepage template Overzicht template Content template Mijn profiel

7 3.0 Structuur Homepage template Homepage Thema Mijn/Groep De website bevat verschillende niveaus. Elk niveau heeft verschillende variaties Variaties geven de pagina s een eigen karakter, maar in basis maken ze gebruik van hetzelfde template 3.2 Overzicht template Overviewpage Resultaten Highlight 3.3 Content template Contentpage Nieuwsartikel Dossierartikel Titeldetail Auteurdetail Videodetail 3.4 Mijn profiel 3.4 Mijn profiel

8 3.1.1 Homepage template 8 Homepage Top-level template Gebruik voor: BNL en Valkenzande omgevingen Toepassing: Homepage landelijke website Homepage lokale websites Template niveau: Pijler 1: Zoeken en vinden Pijler 2: Ontdekken en reizen Pijler 3: Verzamelen en delen Content items Componenten Widgets Fixed items

9 3.1.2 Homepage template 9 Thema Top-level template Gebruik voor: BNL en Valkenzande omgevingen Toepassing: Branded/Hybrid omgeving Klantenservice Literatuurplein Leesplein Digatale etalages Template niveau: Content items Componenten Widgets Fixed items

10 3.1.3 Homepage template 10 Mijn / Groep Top-level template Gebruik voor: BNL en Valkenzande omgevingen De homepage template kan gebruikt worden om een eigen pagina te maken. Hier zien we een eigen gemaakte pagina. Voorbeelden: Custom bibliotheek.nl Leesgroeppagina Template niveau: Content items Componenten Widgets Fixed items

11 3.2.1 Overzicht template 11 a. Overview - Lijst Mid-level template Gebruik voor: BNL en Valkenzande omgevingen Voor deelcollecties (onderwerp en/of type) Toepassing: Zoekresultaten Overzichtspagina s Template niveau: Content items Componenten Widgets Fixed items

12 3.2.1 Overzicht template 12 b. Overview - Afbeeldingen Mid-level template Gebruik voor: BNL en Valkenzande omgevingen Voor deelcollecties (onderwerp en/of type) Toepassing: Zoekresultaten grid-view ebooks eregalerij Template niveau: Content items Componenten Widgets Fixed items

13 3.2.1 Overzicht template 13 Overview - Cluster Mid-level template Gebruik voor: BNL en Valkenzande omgevingen Voor deelcollecties (onderwerp en/of type) Toepassing: Zoekresultaten Template niveau: Content items Componenten Widgets Fixed items

14 3.2.3 Overzicht template 14 Overview met highlights Mid-level template Gebruik voor: BNL en Valkenzande omgevingen Voor deelcollecties (onderwerp en/of type) Toepassing: Overzicht dossier artikelen Overzicht nieuws Overzicht agenda Overzicht video etc... Template niveau: Content items Componenten Widgets Fixed items

15 3.3.1 Content template 15 Portrait mode Bottom-level template Gebruik voor: BNL en Valkenzande omgevingen De linker kolom verplaatst zich bij een smallere beeldscherm naar boven de content. De content wordt zichtbaar door midel van een uitklap mechanisme. Toepassing: Artikel pagina s Content pagina s Formulieren Template niveau: Content items Componenten Widgets Fixed items

16 3.3.1 Content template 16 Portrait mode expanded Bottom-level template Gebruik voor: BNL en Valkenzande omgevingen Hier is een voorbeeld te zien van een uitgeklapte navigatie boven de content. Toepassing: Content pagina s Formulieren Template niveau: Content items Componenten Widgets Fixed items

17 3.3.1 Content template 17 Landscape mode Bottom-level template Gebruik voor: BNL en Valkenzande omgevingen Dit is een weergave voor breedbeeld schermen. De linker kolom staat links i.p.v boven de content. Toepassing: Content pagina s Formulieren Template niveau: Content items Componenten Widgets Fixed items

18 3.3.2 Content template 18 Nieuwsartikel Bottom-level template Gebruik voor: BNL en Valkenzande omgevingen Door gebruik te maken van een aantal vaste componenten wordt een specifieke pagina gecreeerd. Toepassing: Nieuwsartikel Template niveau: Content items Componenten Widgets Fixed items

19 3.3.3 Content template 19 Dossierartikel Bottom-level template Gebruik voor: BNL en Valkenzande omgevingen Door gebruik te maken van een aantal vaste componenten wordt een specifieke pagina gecreeerd. Toepassing: Dossierartikel Template niveau: Content items Componenten Widgets Fixed items

20 3.3.4 Content template 20 Titeldetail Bottom-level template Gebruik voor: BNL en Valkenzande omgevingen Door gebruik te maken van een aantal vaste componenten wordt een specifieke pagina gecreeerd. Toepassing: Titeldetail Template niveau: Content items Componenten Widgets Fixed items

21 3.3.5 Content template 21 Auteurdetail Bottom-level template Gebruik voor: BNL en Valkenzande omgevingen Door gebruik te maken van een aantal vaste componenten wordt een specifieke pagina gecreeerd. Toepassing: Auteurdetail Template niveau: Content items Componenten Widgets Fixed items

22 3.3.6 Content template 22 Videodetail Bottom-level template Gebruik voor: BNL en Valkenzande omgevingen Door gebruik te maken van een aantal vaste componenten wordt een specifieke pagina gecreeerd. Toepassing: Videodetail Template niveau: Content items Componenten Widgets Fixed items

23 3.4 Mijn profiel 23 Mijn profiel Mijn omgeving template Gebruik voor: BNL en Valkenzande omgevingen Persoonlijke instellingen, gegevens inzien en beheren, recommender Vanuit deze omgeving gaat de gebruiker naar dieperliggende pagina s zoals; Persoonlijke gegevens, Reserveringen etc. Template niveau: Content items Componenten Widgets Fixed items

24 24 4 Componenten en widgets Elke pagina binnen bibliotheek.nl wordt opgebouwd uit componenten. Deze componenten worden ontworpen en verzameld in de componenten library. Het waarborgen van consistentie en het bieden van overzicht zijn de belangrijkste doelstellingen van deze library.

25 4.1 Functioneel - Basis Header Footer Auto complete Inloggen Stel een vraag Hoofdnavigatie In de hoofdnavigatie worden de belangrijkste onderdelen van de website getoond. Bij een rollover over een menu item (bijv. Jeugd ) wordt een dropdown menu uitgeklapt met daarin de subcategorieen behorende bij dit onderdeel (voor Jeugd bijv. muziek, boeken, films, activiteiten). Ieder hoofdmenu item heeft een thema overzichtspagina (wanneer de gebruiker klikt op bijv Jeugd, wordt deze thema overzichtspagina geopend). Zoeken Dit is een algemene zoekfunctie, die zowel op de website zoekt, als in de catalogus. De gebruiker kan dus erg breed zoeken met behulp van deze zoekfunctie. Bij het intypen verschijnt er een auto-complete functie, opgedeeld in categorieen (mediatype, bijv boeken, films, muziek). Nadat de gebruiker op Vind heeft geklikt, opent de zoekresultaatpagina. De gebruiker kan daar desgewenst zijn resultaten verfijnen. Stel een vraag Hier wordt in het klein een ingang naar de virtueel assistent aangeboden. Bij het klikken op stel een vraag wordt in een lightbox/ uitklap de virtueel assistent functie geopend. Winkelwagen Hier wordt een ingang naar de winkelwagen getoond. Het aantal ietms dat in de winkelwagen zit, worden tussen haakjes achter het icoon getoond. Als de gebruiker hierop klikt, wordt de winkelwagen geopend. Inloggen Indien de gebruiker nog niet ingelogd is, worden deze links hier getoond. Als de gebruiker wel is ingelogd, wordt hier de volgende dropdown getoond: In deze dropdown bevinden zich quicklinks naar belangrijke account pagina s, zoals Mijn gegevens, Uitloggen, Instellingen etc. Als de gebruiker op inloggen klikt, worden in een uitklap de inlog velden getoond (gebruikersnaam en wachtwoord).

26 4.2 Functioneel - Informatie Actueel Mediabank Imagebrowser Locatie Nieuws Externe widgets Agenda Sponsors Actueel In deze widgets wordt een overzicht getoond van bijv. de laatste nieuwsberichten. Met behulp van de paginering kan de gebruiker binnen de widget verschillende pagina s met berichten bekijken. Er kunnen maximaal 3 pagina s binnen 1 widget geplaatst worden. Het gehele overzicht van bijv. nieuwsberichten is te vinden op de bijbehorende overzichtspagina. Mediabank In de mediabank widget kunnen maximaal 4 video s geplaatst worden. In de videoplayer wordt standaard de eerste video getoond. De gebruiker kan een andere video uit de lijst eronder selecteren zodat deze afgespeeld wordt in de player. Het volledige video-overzicht is te vinden op de video overzichtspagina. Imagebrowser De gebruiker kan door de afbeeldingen scrollen door te klikken op de pijlen. Bij iedere afbeelding wordt een bijbehorende tekst getoond. 1 aanbieder Locatie Hier wordt een ingang naar de winkelwagen getoond. Het aantal ietms dat in de winkelwagen zit, worden tussen haakjes achter het icoon getoond. Als de gebruiker hierop klikt, wordt de winkelwagen geopend. Inloggen De Locatie widget maakt gebruik van GoogleMaps. Hierin worden bijv. de plaatselijke bibliotheken geplot. Meerdere aanbieders

27 4.3 Functioneel - Content elementen Intro Videoplayer Opsomming Paragraaf Paragraaf IMG links IMG groot Opsom. met linkjes Paragraaf IMG rechts Tabel Catalogus objecten Videoplayer Video s worden afgespeeld in de You- Tube player

28 4.4 Functioneel - Formulier elementen Feedback Foutmelding Waarschuwing Attentie Tekstinvoer Tekstveld Radio buttons Inactieve tekstveld Actieve Tekstveld Foute invoer Validatie Checkboxen Actief Inactief Actief Inactief Dropdown Tooltips Actief Inactief Help balloons on Focus Tekstinvoer De gebruiker moet visuele feedback krijgen bij het klikken in een inputveld, het juist invoeren of het fout invoeren, zodat de gebruiker een groter gevoel van controle krijgt Datepicker Tooltips Tooltips moeten bij een rollover verschijnen, met een subtiele animatie (korte fade-in). Help balloons on Focus Sommige inputvelden kunnen uitleg geven over hoe ze ingevuld moeten worden. Deze uitleg verschijnt dan bij invoer naast de inputbox m.b.v. een help ballon

29 4.5 Ontdekken Viewers Schatkamer Tabbed banner Rich browser Teruglegkar Uitgelicht Gerelateerd Associatief zoeken Highlight Tag cloud Aanwinsten Image cloud Videoplayer De gebruiker kan hier d.m.v. een coverflow mechanisme door een geselecteerd catalogus aanbod scrollen. Als de gebruiker op een cover klikt, komt deze in het midden van de coverflow te staan. Wanneer de gebruiker op het vraagteken icoon klikt, zal deze cover omflippen en in een overlay de cover en beschrijving tonen. De gebruiker kan vanuit hier doorklikken naar de bijbehorende detailpagina. Rich browser In deze widget kunnen highlights getoond worden. De gebruiker kan door deze highlights navigeren door verticaal hier doorheen te scrollen d.m.v. de pijlen/ mouse rollover. Als de gebruiker op een item klikt, wordt deze in de widget geopend. Vanuit hier kan doorgelinkt worden naar een bijbehorende detailpagina. Variatie: ebooks eregalerij Teruglegkar Hier worden covers getoond die net terug zijn gebracht door leden. Dit correspondeert met de fysieke teruglegkar in de bibliotheek. Deze teruglegkar kan als inspiratiebron dienen voor gebruikers van de site. Soort interactie nog bedenken > meer de metafoor van een teruglegkar terug laten komen. Lijst top X Uitgelicht Deze widgets dienen allemaal hetzelfde doel, namelijk catalogus items uitlichten, maar hiervoor kunnen verschillende verschijningsvormen gekozen worden. De interactie van de Aanwinsten en EBooks eregallerij is hetzelfde; de eregallerij moet er alleen visueel iets meer uitspringen.

30 4.6 Verzamelen en delen Beoordelen Toevoegen en delen Recensies Nieuwsbrief Lijstjes Beoordelen De gebruiker kan een catalogus item beoordelen door op de sterren te klikken. Door opnieuw op een ster te klikken, kan hij deze weer uit zetten. Toevoegen en delen Dit component kan op elke detailpagina geplaatst worden. De gebruiker kan deze pagina toevoegen aan zijn favorieten, of deze pagina delen via twitter, facebook of mail a friend. Ook de like functie van facebook wordt aangeboden. Recensies Hier worden recensies van gebruikers en van professionals getoond. De gebruiker kan ook zelf een recensie toevoegen door op d eknop schrijf recensie te klikken. Lijst Hier worden de belangrijkste persoonlijke lijsten van een gebruiker getoond, zoals Favorieten, Reserveringen, Geleend etc.

31 31 5 Omgeving switch Het hele digitale bibliotheek landschap bestaat uit verschillende omgevingen. De belangrijkste omgevingen zijn de landelijke website (bibliotheek.nl) en de lokale websites (bijv. van bibliotheek Valkenzande). Een gebruiker kan beide omgevingen bezoeken en gebruiken. Als een gebruiker binnen de lokale bibliotheek website content bekijkt die afkomstig is van de landelijke website, blijft de gebruiker gewoon binnen de lokale website en wordt hij niet geconfronteerd met deze verschillende omgevingen. De gebruiker merkt hier dus niets van. De gebruiker moet wel ten alle tijden kunnen switchen van omgeving. Deze switch mogelijkheid kan bijvoorbeeld aangeboden worden in de header van beide websites.

32 5.1 Omgeving switch - Inloggen 32 Inloggen Inloggen Landelijk: Gebruikers krijgen keuze om naar lokale site te gaan Inloggen Lokaal: Gebruikers gaan direct naar Lokale site Het switchen tussen verschillende omgevingen wordt gemakkelijk gemaakt met een omgeving toggle Gebruikers kunnen gemakkelijk tussen Landelijk, lokaal en eigen omgeving switchen

33 5.2 Omgeving switch - Adaptief 33 Adaptief Wanneer een gebruiker in de lokale site op landelijke content klikt, blijft de gebruiker in de lokale omgeving. De content is belangrijker dan de omgeving. De content kan zich op verschillende omgevingen bevinden, maar wordt door google als 1 pagina geïndexeerd.

34 34 6 Thema skinning Pagina s met een bepaald thema (bijvoorbeeld Jeugd) binnen bibliotheek.nl krijgen, afhankelijk van het niveau waarop zij zich bevinden in de structuur, een bepaalde mate van thematisering mee. Op het hoogste niveau een Thema overzichtspagina zal deze mate van thematisering erg groot zijn, om zo de sfeer van het thema goed mee te geven en de gebruiker te inspireren. Op diepere niveaus zal de mate van thematisering afnemen en steeds subtieler worden. Wel blijft de gebruiker nog steeds de connectie met het thema behouden, maar de focus komt dan meer te liggen op de content en functionaliteiten van de pagina.

35 6.1 Thema skinning 35 Thema skinning Als er weinig gebruik gemaakt wordt van externe content zal het merkbeeld van de Bibliotheek sterk aanwezig zijn. Hoe meer externe content op een pagina, bijvoorbeeld in de vorm van externe widgets, des te meer het de Bibliotheek merkbeeld zal afnemen.

36 36 7 Woordverklaring In dit hoofdstuk worden de termen uitgelegd die in dit document voorkomen.

37 7.0 Woordverklaring 37 Template Een template is een basissjabloon die gebruikt word om verschillende pagina s mee te kunnen maken. Bijvoorbeeld een overzicht template wordt gebruikt om een zoekresultaten pagina te maken, maar kan ook gebruikt worden om een nieuwsoverzichtpagina te maken. Componenten Componenten zijn onderdelen binnen de Bibliotheek omgeving die een vaste plek hebben op pagina s. Deze componenten kunnen niet gedeeld worden op externe pagina s zoals Hyves en Facebook. Widgets Wigets zijn flexibele onderdelen binnen de Bibliotheek omgevingen. De widegets kunnen zich op verschillende pagina s bevinden en kunnen ook op externe sites geplaatst worden. Tevens is het mogelijk om widgets te plaatsen op bijvoorbeeld Hyves en FaceBook. Content items Content items zijn bouwblokken om een pagina mee op de maken. Dit zijn de verschillende content blokken zoals een inleiding, paragraaf met en zonder afbeeldingen, videoplayer enz. Als er weinig gebruik gemaakt wordt van externe content zal het merkbeeld van de Bibliotheek sterk aanwezig zijn. Hoe meer externe content op een pagina, bijvoorbeeld in de vorm van externe widgets, des te meer het de Bibliotheek merkbeeld zal afnemen. Skinning Skinning is het grafische weergave van widgets en pagina s. Enkele grafische elementen van de pagina worden zo aangepast dat de pagina een specifieke uiterlijk krijgt. De digitale etalages maken gebruik van de homepage template met skinning om het een specifieke karakter te geven. Fixed Fixed elementen op de website hebben een vaste positie op de pagina. Deze moeten op de aangegeven plaatst komen.

38 38 8 Designs In dit hoofdstuk zijn een aantal design impressies te zien van de verschillende templates met content. De definitieve designs kunnen enigszins verschillenen van deze impressies.

39 Homepage template Homepage landelijk Homepage lokaal

40 Homepage template Literatuurplein *Schets Digitale etalages

41 Overzicht template Overzicht: Zoekresultaten Overzicht: Afbeeldingen

42 Content template Content pagina Formulieren

43 Mijn profiel Mijn profiel *Schets

44 Componenten Header Tabbed banner Schatkamer Footer

45 Widgets Uitgelicht: Highlight Uitgelicht: Aanwinsten Uitgelicht: ebooks eregalerij Uitgelicht: Lijst top X Dossier browser Dossier archief Sponsors Mediabank

46 Widgets Teruglegkar Afbeeldingen browser Actueel: Evenementen Actueel: Nieuws Mijn lijstjes Banner