IA – NAVIGATIE Rogier van der Linde & Davy De Winne, 2014.

Presentatie over: "IA – NAVIGATIE Rogier van der Linde & Davy De Winne, 2014."— Transcript van de presentatie:

1 IA – NAVIGATIE Rogier van der Linde & Davy De Winne, 2014

2 UX DESIGN FRAMEWORK 2 ISO 9241-210 framework U BENT HIER

3 INFORMATIE ARCHITECTUUR 3 Onderdelen van Informatie Architectuur: 1. organisatie hiërarchie, structuur, sorteren, layout, groeperen... 2. navigatie hoofd- en submenu, deurmat, paginering, breadcrumb, zoeken... 3. labels tags, linkteksten, titels, hulpteksten, buttonteksten... ONDERWERP VAN VANDAAG

4 FLOW 4 Observatie 1: slechts een kleine fractie van de bezoekers komt binnen via de adresbalk Observatie 2: de homepage is niet noodzakelijk de eerste pagina die bezoekers zien Observatie 3: bezoekers navigeren vaak niet lineair maar zigzaggend naar hun doel, en keren vaak terug Observatie 4: bij elke stap verlies je een belangrijk deel van de bezoekers typische Google Analytics flow chart

5 FLOW 5 de homepage is dus niet noodzakelijk de eerste pagina...

6 PAGINATYPES 6 Er zijn ruwweg drie paginatypes: keuzepagina: moet de bezoeker verder helpen naar zijn doel; voorbeelden zijn de homepagina, producten overzichtspagina’s enz... informatiepagina: pagina met gezochte informatie; bevat teksten, afbeeldingen, video’s... transactiepagina: interactiepagina, b.v. met formulieren Verder spreekt men ook vaak van de landingspagina, d.i. een pagina die specifiek ontworpen is als eerste pagina waarmee de gebruiker in contact komt, b.v. de homepagina, campagnepagina’s...

7 PAGE TABLES 7 formulier geinsipreerd op http://iallenkelhet.no/2014/06/27/responsive-day- out-2-slides-and-resources-from-my-talk-on-the-norwegian-cancer-society/http://iallenkelhet.no/2014/06/27/responsive-day- out-2-slides-and-resources-from-my-talk-on-the-norwegian-cancer-society/ page tables zijn een schematische voorstelling van de eerder vernoemde vragen: waarlangs komen bezoekers binnen? wat zijn onze doelstellingen? wat zijn hun doelstellingen? waar en hoe sturen we ze best door? oefening: vul deze tabel in voor -een producten keuzepagina, b.v. van fototoestellen -een product detailpagina, b.v. van een Canon D300 -een winkelmandje, b.v. met een camera en twee lenzen

8 NAVIGATIE ELEMENTEN 8 Binnenkomende bezoekers verder helpen gebeurt via navigatie elementen. Er zijn ruwweg 4 soorten navigatie: -globale navigatie: komt sitewide identiek voor, b.v. hoofdmenu -supplementaire navigatie: valt buiten de normale navigatie, b.v. sitemap -lokale navigatie: laat toe om op een deelgebied te navigeren, b.v. submenu -contextuele navigatie: content-afhankeklijke navigatie, b.v. lijst gerelateerde topics

9 GLOBALE NAVIGATIE – KLIKBAAR LOGO 9 een logo moet altijd aanklikbaar zijn en verwijzen naar de homepagina

10 GLOBALE NAVIGATIE – HOOFDMENU 10 primaire onderverdeling in categorieën card sorting kan helpen de items te bepalen de eerste link verwijst best naar de homepagina

11 GLOBALE NAVIGATIE – MEGA MENU’S 11 de zgn. mega-menu’s lijken prima te werken (in schril contrast met klassieke en zeker multi-level dropdowns!)

12 GLOBALE NAVIGATIE – DEURMAT 12 permanent onderaan zichtbaar lijkt vaak goed te werken bij sites met veel inhoud

13 GLOBALE NAVIGATIE – HULPLINKS 13 ook wel hulplinks of toolbar genoemd meestal boven of rechtsboven kan alles bevatten dat buiten de normale content valt: taalkeuze, contactlink, sitemap, aboutpagina...

14 GLOBALE NAVIGATIE – FOOTER 14 onderaan, nog onder een eventuele deurmat bevat typisch disclaimer, sitemap, help... dient tevens als visueel einde van de pagina -> voorbeelden en ideeën op webdesignerwall.com webdesignerwall.com

15 HULPNAVIGATIE – SITEMAP 15 laatste strohalm voor verloren bezoeker; hou het zo eenvoudig mogelijk inhoudelijke samenvatting van de site items moeten gelinkt zijn niet noodzakelijk dezelfde hiërarchie als hoofdmenu/submenu een goede deurmat kan een sitemap vervangen

16 HULPNAVIGATIE – INDEX 16 is net zoals een sitemap de weergave van de volledige site inhoud, maar dan met alfabetische inhoudsopgave

17 HULPNAVIGATIE – TAALKEUZE 17 meestal uitgevoerd als hulplinks vlaggen zijn geen talen!

18 HULPNAVIGATIE – ZOEKEN 18 een zoekvenster is nooit een vervanging van een navigatie, beschouw het als een extra

19 LOKALE NAVIGATIE – SUBMENU 19 submenu blijft vast zolang men binnen de hoofdcategorie navigeert kan horizontaal uitgevoerd worden onder het hoofdmenu, of als verticaal menu links komt minder en minder voor

20 LOKALE NAVIGATIE – FILTERS 20 Filters laten toe content uit te filteren, b.v. zoekresultaten op basis van categorie

21 LOKALE NAVIGATIE – FACETNAVIGATIE 21 facetnavigatie = combinatie van filters uitvoering met eenvoudige links, of complexere controls als checkboxes, sliders... geschikt bij veel (10+) items die veel op elkaar lijken ook geschikt indien card sorting te verschillende resultaten oplevert meer over facetnavigatie: http://www.agconsult.com/nl/usability- blog/filteren-productcatalogus-design-tips

22 LOKALE NAVIGATIE – BREADCRUMB 22 breadcrumb = kortste weg naar deze pagina (maar niet noodzakelijk het pad waarlangs de gebruiker op deze pagina is geraakt) alle kruimels behalve de laatste zijn aanklikbaar

23 CONTEXTUELE NAVIGATIE – GERELATEERD 23 denk aan: alternatieven ‘did you mean’ suggesties meest bekeken populairste gerelateerde informatie

24 CONTEXTUELE NAVIGATIE – CALLS TO ACTION 24 CTA = uitnodiging om een actie te ondernemen

25 CONTEXTUELE NAVIGATIE – CALLS TO ACTION 25 vaak rechtstreeks gerelateerd aan de businessdoelstellingen, en daarom van kritisch belang ze moeten er goed uitspringen, en over groote, plaatsing en opmaak moet goed nagedacht worden CTA’s komen hier nog beter uit de verf

26 CONTEXTUELE NAVIGATIE – CALLS TO ACTION 26 kan een link, een knop of rechtstreekse actie zijn

27 CONTEXTUELE NAVIGATIE – CALLS TO ACTION 27 waar is de call to action??

28 CONTEXTUELE NAVIGATIE – TAGS 28 tags kunnen verwijzen naar categorieën of zoektermen

29 CONTEXTUELE NAVIGATIE – CONTEXTUEEL MENU 29 menu in de content zelf met relevante (contextuele) links op het einde van een blok; leid de aandacht niet vroegtijdig af

30 CONTEXTUELE NAVIGATIE – CONTEXTUEEL MENU 30

31 CONTEXTUELE NAVIGATIE – HYPERLINKS 31 e-mails, URL’s, twitter accounts, events, interne links... links in teksten missen groepering, leiden de aandacht af en zorgen voor een vroegtijdige exit van de content, gebruik dus met mate

32 CONTEXTUELE NAVIGATIE – HYPERLINKS 32 als je wil verwijzen naar een bijkomende uitleg of deelcontent, kan een verborgen detailspanel een alternatief zijn

33 CONTEXTUELE NAVIGATIE – KAARTEN 33

34 BEDENKINGEN – PAGINATYPES 34 bij transactiepagina’s: verwijder menu’s en alle niet-relevante informatie; dit is niet het moment om de gebruiker af te leiden focus zuiver op de transactie

35 BEDENKINGEN – GLOBALE NAVIGATIE 35 “Although it has some limited use, global navigation is overrated. Contextual navigation offers much more value, providing direct links to elements that are highly relevant to the user’s current location (and presumably their current interest).” – Jacob Nielsen http://www.nngroup.com/articles/situate-follow-ups-in-context/

36 BEDENKINGEN – GLOBALE NAVIGATIE 36 zeker voor sites die focussen op een taak is een hoofdmenu niet altijd nodig

37 BEDENKINGEN – GLOBALE NAVIGATIE 37 zelfs sites met veel inhoud als Amazon kunnen het zonder hoofdmenu (of weggemoffeld onder een dropdown); ze hebben echter wel een submenu

38 BEDENKINGEN – TAALKEUZE 38 waarom is een aparte taalkeuze pagina geen goed idee? hoe los je best de taalkeuze op? Google vindt deze indexpagina maar niks

39 BEDENKINGEN – PROFIELKEUZE 39 bij uitbreiding: waarom is een profileringspagina vaak geen goed idee? wat als je een jonge werkeloze journalist bent?

40 BEDENKINGEN – ZOEKEN 40 als je een zoekvenster voorziet, zorg er minstens voor dat het werkt...

41 BEDENKINGEN – ZOEKEN 41 als je een zoekvenster voorziet, zorg er minstens voor dat het werkt...

42 BEDENKINGEN – ZOEKEN 42 overschat het nut van geavanceerd zoeken niet; als Google het met een enkel tekstvak kan... overweeg eenvoudig zoeken met filters of facetten

43 BEDENKINGEN – SUBMENU 43 Herhaal geen links uit het submenu in het contentgebied  Submenu links uit de hoofdnavigatie herhalen kan bij een dropdown dan weer wel (behalve dat dropdowns sowieso zuigen)  veel beter zonder submenu links

44 BEDENKINGEN – SUBMENU 44 Let er op dat structuur en terminologie gebruikt in het submenu overeenkomst met de content andere onderdelen in het submenu dan in de content

45 BEDENKINGEN – SUBMENU 45 wat doe je als een hoofdcategorie aangeklikt is? vullen met onzintekst?

46 BEDENKINGEN – SUBMENU 46 wat doe je als een hoofdcategorie aangeklikt is? een lege pagina dan maar?

47 BEDENKINGEN – SUBMENU 47 wat doe je als een hoofdcategorie aangeklikt is? of gewoon de links herhalen?

48 BEDENKINGEN – SUBMENU 48 “The primary purpose of web navigation is to help people to move forward. It is not to tell them where they have been, or where they could have gone.” – Gerry McGovern http://www.conversionchronicles.com/Web_Navigation_Is_About_Moving_Forward.html

49 BEDENKINGEN – SOCIALE INTEGRATIE 49 vraag je de meerwaarde af van sociale links; de meeste gebruikers weten heus wel hoe ze een pagina moeten delen op facebook of twitter

50 BEDENKINGEN – CONTEXTUEEL MENU 50 contextuele menu’s zijn meestal een goed alternatief voor een submenu prima voorbeeld: http://www.amsterdam.nl/http://www.amsterdam.nl/ navigatie steunt bijna volledig op contextuele navigatie + breadcrumb

51 BEDENKINGEN – CONTEXTUEEL MENU 51 vergelijk dit met http://www.gent.be/, waar de navigatie veel meer steunt op klassieke hoofd- en submenunavigatie...http://www.gent.be/

52 OEFENING 52 becommentarieer de navigatiestructuur van deze pagina

53 OEFENING 53 becommentarieer de navigatiestructuur van deze pagina