Strategie en concept Schatkamer van de Toekomst
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
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.
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.
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.
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
3.0 Structuur 7 3.1 Homepage template 3.1.1 Homepage 3.1.2 Thema 3.1.3 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 3.2.1 Overviewpage 3.2.2 Resultaten 3.2.3 Highlight 3.3 Content template 3.3.1 Contentpage 3.3.2 Nieuwsartikel 3.3.3 Dossierartikel 3.3.4 Titeldetail 3.3.5 Auteurdetail 3.3.6 Videodetail 3.4 Mijn profiel 3.4 Mijn profiel
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 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.
4.1 Functioneel - Basis 25 4.1.1 Header 4.1.2 Footer 4.1.3 Auto complete 4.1.5 Inloggen 4.1.4 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).
4.2 Functioneel - Informatie 26 4.2.1 Actueel 4.2.2 Mediabank 4.2.3 Imagebrowser 4.2.4 Locatie Nieuws 4.2.5 Externe widgets Agenda 4.2.6 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
4.3 Functioneel - Content elementen 27 4.3.1 Intro 4.3.6 Videoplayer 4.3.9 Opsomming 4.3.2 Paragraaf 4.3.3 Paragraaf IMG links 4.3.7 IMG groot 4.3.10 Opsom. met linkjes 4.3.4 Paragraaf IMG rechts 4.3.5 Tabel 4.3.8 Catalogus objecten Videoplayer Video s worden afgespeeld in de You- Tube player
4.4 Functioneel - Formulier elementen 28 4.4.1 Feedback Foutmelding Waarschuwing Attentie 4.4.2 Tekstinvoer Tekstveld 4.4.3 Radio buttons Inactieve tekstveld Actieve Tekstveld Foute invoer Validatie 4.4.4 Checkboxen Actief Inactief Actief Inactief 4.4.5 Dropdown 4.4.6 Tooltips Actief Inactief 4.4.7 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. 4.4.8 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
4.5 Ontdekken 29 4.5.1 Viewers Schatkamer Tabbed banner Rich browser Teruglegkar 4.5.2 Uitgelicht 4.5.4 Gerelateerd 4.5.5 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.
4.6 Verzamelen en delen 30 4.6.1 Beoordelen 4.6.2 Toevoegen en delen 4.6.3 Recensies 4.6.2 Nieuwsbrief 4.6.3 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 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.
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
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 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.
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 7 Woordverklaring In dit hoofdstuk worden de termen uitgelegd die in dit document voorkomen.
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 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.
8.1 39 Homepage template Homepage landelijk Homepage lokaal
8.1 40 Homepage template Literatuurplein *Schets Digitale etalages
8.2 41 Overzicht template Overzicht: Zoekresultaten Overzicht: Afbeeldingen
8.3 42 Content template Content pagina Formulieren
8.4 43 Mijn profiel Mijn profiel *Schets
8.5 44 Componenten Header Tabbed banner Schatkamer Footer
8.6 45 Widgets Uitgelicht: Highlight Uitgelicht: Aanwinsten Uitgelicht: ebooks eregalerij Uitgelicht: Lijst top X Dossier browser Dossier archief Sponsors Mediabank
8.6 46 Widgets Teruglegkar Afbeeldingen browser Actueel: Evenementen Actueel: Nieuws Mijn lijstjes Banner