Je zou toch nooit zonder ontwerp een

Transcriptie

1 8.0 Overzicht Je zou toch nooit zonder ontwerp een wolkenkrabber bouwen? Als je aannemers laat beginnen met het erin slaan van spijkers en het lassen van staal zonder een plan van aanpak kan dat alleen maar leiden tot een dure ramp. Op dezelfde wijze, ongeacht het visuele design of bruikbaarheids overwegingen, is de fysieke ontwikkeling van een website die op verschillende apparaten goed werkt, van computers tot tablets en smartphones, voor veel bedrijven een enorme investering. In principe is het beantwoorden van behoeften van klanten de enige reden om zo n investering te maken. Of de klanten nu je interne verkopers, zakenpartners of consumenten zijn, het bestaansrecht van de website is de eindgebruiker. Om die reden is de enige manier waarop de ontwikkelingskosten gerechtvaardigd en je return on investment geoptimaliseerd kan worden het verzekeren dat je de website van het begin af aan correct ontwerpt en wel op een manier die op de behoeften van de klant vooruitloopt en er volledig in voorziet. Dit proces begint met informatie architectuur. 8.1 Definieer het publiek Veel bedrijven bedienen een aantal typen klanten. De website kan wel of niet proberen al deze typen klanten in hun behoeften te voorzien. Definieer eerst de bedrijfs- en marketingdoelen voor het project en stel dan pas vast op welk klantensegment de website gericht wordt. Tijdens een recent project gaf de klant bijvoorbeeld aan dat de website op jongeren gericht moest worden. Hun oudere klantenkring was al uitgebreid en aan hen verkochten ze al prima. De klant maakte zich echter zorgen dat, omdat de oudere groep ouder wordt, hun vaste klantenkring spoedig zou slinken en vond het daarom noodzakelijk om de volgende generatie aan te trekken en daarmee een nieuwe merk relatie aan te gaan. Daarom werd de website volledig toegespitst op de wensen en behoeften van jonge consumenten. De boodschap van de website was daar ook op gefocust, omdat het er geheel toe diende om nieuwe relaties met hen aan te gaan en het merk bij hen te introduceren. De klant interviewen Hoe stel je vast wat het publiekssegment is, waar je de website op moet richten? Ik zou beginnen met het interviewen van de klant zijn merk- en marketingmanagers. Zij kennen hun klanten namelijk het beste. Hier is een lijst met vragen die je kunt overwegen ze te stellen. 1. Hoeveel verschillende klantengroepen heb je? 2. Ten aanzien van dit project, welke klantsegmenten zou je de prioriteit geven? 3. Zijn er enkele segmenten die de website zou moeten negeren? 4. Beschrijf het profiel van ieder uitgekozen type klanten. Wat voor mensen zijn zij? 5. Wat zijn iedere klant zijn barrières die hen belet jouw merk te kopen of zich bij jouw merk betrokken te voelen? De prijs? Willen ze het product kunnen uitproberen voordat ze kopen? 6. Wat is de grootste toevoeging die deze nieuwe website aan iedere klantengroep zal leveren? Hoe zullen ze de website gebruiken? Ontwikkel gebruikerspersonages De interviews met de klant zal je een goed startpunt geven om de klanten van jouw klant te kunnen begrijpen. De volgende stap kan zijn het interviewen van de klant zijn klanten zelf, uit ieder belangrijk segment. Het doel van dit onderzoek is om jou en je ontwerpteam een duidelijk beeld te geven van de mensen voor wie je de website ontwerpt. Vaak maken gebruikers ervaringsteams onechte profielen, genaamd personages, om iedere klantengroep weer te geven. Zoals Figuur 8-1 laat zien krijgt het personage een naam, een foto, een geslacht, een leeftijd, een inkomensniveau, een onderwijsniveau en zelfs een lijst met merken waar ze zich betrokken bij voelen. Het idee is om deze persoon te leren kennen zodat je kunt denken zoals zij zouden denken en beter kunt inzien wat wel of niet belangrijk is voor hem of haar. Een ander onderdeel dat vastgelegd moet worden is welke struikelblokken ze hebben, als ze die al hebben, met betrekking tot het zich betrokken voelen bij het merk. Is het geboden merk te duur of kost het Excel With Business

2 teveel tijd? Wordt het merk als goedkoop beschouwd of als slechte kwaliteit? Zijn zij de besluitnemers of beïnvloeden ze de kopers? In Figuur 8-1, ontmoeten we Ash. Hij valt geheel binnen de jongere generatie die mijn klant probeert te bereiken. Om iemand als Ash te motiveren om mijn klant zijn producten te kopen, zie ik nu duidelijk wat er gedaan moet worden. Ten eerste moet de content van mijn website geloofwaardig en cool zijn. Het kan niet te marketing georiënteerd zijn, maar juist veel meer op de levensstijl gericht. Het zou sociale media discussies en video s moeten integreren en misschien zelfs een handig hoe overtuig ik mijn ouders dat dit een goed product is spiekblad, geschreven op een ietwat oneerbiedige, maar toch informatieve manier. Figuur 8-1: Een personage is een onecht profiel ontworpen om het team inzicht te geven in de klanten doelgroep Klant segmentatie Veel bedrijven bieden meer dan één product of dienst aan, die voor verschillende klantgroepen relevant zijn. Dat maakt het erg lastig, omdat deze klantengroepen vaak heel verschillend zijn. De manier om dit bekende scenario te overkomen is door een klanten matrix te creëren die laat zien hoe de verschillende producten en diensten zich op verschillende klantengroepen richten. Zoals je in Figuur 8-2 kunt zien maakt een fietsfabriek vier soorten fietsen, zoals in de verticale kolommen is weergegeven. Tijdens de personage oefening identificeerden we zes verschillende vooraanstaande klantsegmenten, die in de horizontale rijen worden weergegeven. Echter, voelen niet alle klantsegmenten zich Excel With Business

3 Figuur 8-2: Voor bedrijven die een grote variëteit aan typen klanten bedienen en hen meerdere producten uit verschillende categorieën aanbieden kan het helpen om een klanten matrix te creëren en daarmee de belangrijkste groepen vast te leggen. aangetrokken tot alle soorten fietsen. Waar een klantsegment interesse voor het type fiets heeft, hebben we een vinkje gezet. Zo kun je bijvoorbeeld zien dat Ash alleen deelneemt in de Mountain Biking en Street/Park riding categorieën. 8.2 Gebruikersstroom Diagrammen Nu dat je precies weet op welk type mensen je website zich zal richten, is de volgende stap om voor hen enkele uit het leven gegrepen scenario s uit te denken. Hoe zal iemand als Ash bijvoorbeeld op de website terecht komen? Dit is meer een marketing vraag, maar het heeft ook een impact op het ontwerp. Als ze op een ingebouwde link van YouTube klikken, dan is dat een kans om ze naar een pagina te leiden die op hun levensstijl en cultuur van toepassing is. Dus, bovenop de gebruikelijke product categorie pagina s zoals voor Mountain bikes is het ook mogelijk Na het creëren van deze matrix kan ik zien dat de website tot wel 11 potentiële segmenten moet ondersteunen. Dat zijn veel segmenten, dus we zullen prioriteiten moeten stellen. Gezien de klant zijn bedrijfsdoelen om nieuw en jonger publiek aan te trekken, werd het besluit genomen om vooral op de vier blauw omlijnde segmenten te focussen. We zouden nog steeds wel proberen om de andere segmenten te bedienen, maar in mindere mate. Figuur 8-3: Gebruikersstroom Diagrammen geven inzicht in de verschillende manieren waarop gebruikers een taak volbrengen Excel With Business

4 om levensstijl pagina s te maken zoals voor de verschillende varianten als opgesomd in het diagram. Afhankelijk van waar de gebruikers vandaan komen, of hoe ze zichzelf segmenteren, zullen ze naar verschillende levensstijl pagina s geleid worden, waar ze dan voor hen relevante content vinden. Een andere zaak waar je aan kunt denken is wat je denkt dat de gebruiker op de website wil bereiken. Waar zal Ash op de website naar op zoek zijn? Zoekt hij coole video s waar toevallig de producten van het bedrijf in voorkomen? Is hij op zoek naar raad verhouding staan. Zoals Figuur 8-4 laat zien, hoeven sitemaps er niet mooi uit te zien. Ze hoeven alleen maar de reikwijdte en structuur van de website weer te geven. Om die reden zal ieder software of online hulpmiddel waar je mee overweg kunt voldoen. Sitemap hulpmiddelen Informatie architecten maken normaal gesproken hun sitemap horizontaal op een 11x17 tabloid, of op een A3 formaat blad papier. De meest Figuur 8-4: Een sitemap laat de hiërarchie van een website zien en hoe alle pagina s zich tot elkaar verhouden. over producten? Welke stappen zal hij nemen om deze doelen te behalen? Hoe kun jij, als ontwerper, deze stappen in kaart brengen om het nut van al deze stappen te achterhalen? Zodra deze paden in een illustratie ondergebracht zijn noemen we dat een Gebruikersstroom Diagram. 8.3 Sitemap Ontwikkeling De sitemap is het diagram dat de hele website in één oogopslag inzichtelijk maakt. Het laat niet alleen alle pagina s zien, maar door middel van een boomstructuur ook hoe de pagina s tot elkaar in populaire software hulpmiddelen om sitemaps te produceren zijn Microsoft Visio, Omnigraffle en zelfs Adobe InDesign. Maar er zijn ook enkele online hulpmiddelen zoals Slickplan.com. Hier is een lijst met handige links: Slickplan.com Gliffy.com Omnigraffle Microsoft Visio Excel With Business

5 Figuur 8-5: De GillyHicks.com website is een goed voorbeeld van visueel gedifferentieerde primaire en secundaire navigatiemiddelen, die ieder een overzichtelijk aantal links bieden Afbeelding Gilly Hicks, Wanneer je de sitemap maakt, kun je erover denken om je pagina op die manier in te richten: normaal gesproken wordt je primaire set met de belangrijke categorieën je primaire navigatiemiddel. Zoals je in Figuur 8-5 kunt zien heeft het primaire navigatiemiddel van deze website zeven onderdelen. Door op ieder te klikken beland je op de hoofdpagina van deze sectie, met de introductie, welke links geeft naar alle pagina s die daaronder vallen. Omdat veel websites te uitgebreid zijn om op één vel papier te tekenen zullen veel informatie architecten zich op één sectie tegelijk focussen. Een grote online winkel zou bijvoorbeeld alle gebruikersregistratie en account management pagina s gedetailleerd op één pagina van de sitemap weer kunnen geven, terwijl de aankoop uitcheck pagina s op een andere pagina staan. Informatie categoriseren en prioriteren Een belangrijk aspect van het maken van een gebruiksvriendelijke website is het prioriteren van informatie, zodat niet alles in één keer aan de gebruiker gepresenteerd wordt. Je moet je in de doelgroep inleven om te bepalen wat het belangrijkst is voor de meeste klanten, en dan deze onderdelen de eerste rang geven. Ik zie met betrekking tot website categorieën altijd drie groepen: de primaire, de secundaire en de minst belangrijke groep. Als je bijvoorbeeld een website voor een restaurant maakt, dan zou je aan kunnen nemen dat Menu en Locaties belangrijker zijn dan Ons Verhaal en Carrière Mogelijkheden. Figuur 8-6: De Home pagina start de nummering met 0.0. Pagina s waar de Home pagina naartoe linkt worden op de volgende regel weergegeven en zijn met hele getallen genummerd. Het is belangrijk dat de primaire en secundaire navigatiemiddelen niet meer dan 5 tot 7 keuzemogelijkheden bieden. Meer dan dit aantal kan gebruiks- en visuele ontwerp problemen geven. Deze keuzemogelijkheden zouden ook vanuit het content perspectief aan elkaar gerelateerd moeten zijn en dezelfde visuele behandeling krijgen. Zet bijvoorbeeld niet de Klanten Service link direct naast Menu en Locaties. De laatste twee zijn erg klantgericht terwijl de eerste slechts voor een paar mensen relevant is. Daarom moet hij waarschijnlijk in het tertiaire navigatiemiddel opgenomen worden Excel With Business

6 Pagina s op de sitemap tekenen en nummeren Alle sitemaps worden hiërarchisch weergegeven als een boomdiagram. De stam van de sitemap is altijd de Home of de Index pagina. Het makkelijkste gedeelte van het tekenen van een sitemap is dan ook een box bovenaan de pagina te zetten en het Home te noemen. Wat belangrijker is, is dat je nummering ook bij de Home pagina begint. Sitemaps nummeren iedere pagina, zodat zodra de website in productie gaat, het team een richtlijn heeft om alle wireframes, visuele ontwerp bestanden en zowel copy als content componenten op de juiste pagina weten te plaatsen. Normaal gesproken nummeren ontwerpers de Home pagina als 0.0 of 1.0. Zelf geef ik er de voorkeur aan om voor de Home pagina 0.0 te gebruiken. Kijk naar de drie sitemap voorbeelden in Figuur 8-7. Alle drie deze sitemaps hebben 20 pagina s, exclusief de Homepagina. In voorbeeld A zijn er maar liefst 10 hoofd secties! Dat betekent dat de navigatie op iedere pagina maar liefst 10 keuzemogelijkheden heeft. Zoveel keuzen kan de gebruiker overweldigen, wat leidt tot een slechte gebruikerservaring. En, zoals je in voorbeeld A kunt zien, is er onder deze 10 keuzemogelijkheden niet veel content beschikbaar. Dat noemen we een platte Zoals weergegeven in Figuur 8-6 worden alle pagina s waar de Home pagina naar linkt op de volgende regel gezet en genummerd als 1.0, 2.0, 3.0 enzovoorts. Alle pagina s die van deze secties aftakken worden als 1.1, 1.2, 1.3 genummerd. Als de boomdiagram nog verder aftakt, dan worden pagina s genummerd als 1.1.1, 1.1.2, en zo door. Ontwerp een uitgebalanceerde website De laatste overweging die bij het maken van een website gemaakt moet worden is de balans. Figuur 8-7: Deze drie sitemap voorbeelden laten duidelijk zien wanneer een website te breed (A) of te diep (B) is. Vanuit het oogpunt van bruikbaarheid en ontwerp is het t beste om naar een uitgebalanceerde website te streven, zoals voorbeeld C Excel With Business

7 hiërarchie alles is direct aan de oppervlakte van het scherm gepropt. Tegenovergesteld heeft voorbeeld B maar drie keuzemogelijkheden voor de gebruiker. Het is geen probleem om maar drie keuzemogelijkheden te hebben, maar kijk eens hoe diep sectie 2 gaat. Als sectie 2 nou niet vier niveaus diep van de Homepagina had gegaan, dan zou dit niet zo n slechte structuur zijn. Vanuit het oogpunt van bruikbaarheid is het t beste om maximaal drie niveaus diep te gaan. In deze diagrammen worden alle 1.0, 2.0, 3.0 enzovoorts tot niveau 1 gerekend. De pagina s genummerd als 2.1 of 3.3 behoren tot niveau 2. De nummers bestaande uit drie getallen zijn niveau 3. Wanneer een website te diep gaat, zoals voorbeeld B laat zien, is het moeilijk om navigatiemiddelen te bieden die de gebruiker weer uit het dal terugleiden. Voorbeeld C is de best uitgebalanceerde van de drie. Met slecht 6 hoofd keuzemogelijkheden op de Homepagina worden gebruikers niet overweldigd. Iedere sectie heeft ongeveer dezelfde hoeveelheid content en nergens gaat het meer dan drie niveaus diep. NEXT volgende Hoofdstuk 9 User Interface Design Excel With Business