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

Slides:



Advertisements
Verwante presentaties
1 Op Stap naar het SO. 2 • Waar gaat het om ? • Eerst even kijken naar het keuzewerkboek • Wat moest er zo dringend veranderen ? • Studiekeuzetaken !
Advertisements

BRIDGE Vervolgcursus Vervolg op starterscursus Bridgeclub Schiedam ‘59 info: Maandagavond: 19: – of
> Met websitestatistieken naar een betere website Rick Koopman.
Sudoku puzzels: hoe los je ze op en hoe maak je ze?
De elektronische verzamelaanvraag Ruben Fontaine Markt- en Inkomensbeheer – dienst Aangiftes.
‘SMS’ Studeren met Succes deel 1
Paulus' eerste brief aan Korinthe (20) 23 januari 2013 Bodegraven.
28 juni 2009 Paëllanamiddag 1 Paëllanamiddag 28 juni 2009 Voorbereiding vrijdagavond (Loopt automatisch - 7 seconden)
Werkwoorden d t dt.
NEDERLANDS WOORD BEELD IN & IN Klik met de muis
WAAROM? Onderzoek naar het meest geschikte traject voor de verlenging tot in Sint-Niklaas van het bestaande fietspad naast de Stekense Vaart en de Molenbeek.
BRIDGE Vervolgcursus Vervolg op starterscursus Bridgeclub Schiedam ‘59 info: Maandagavond: 19: – of
November 2013 Opinieonderzoek Vlaanderen – oktober 2013 Opiniepeiling Vlaanderen uitgevoerd op het iVOXpanel.
Uitgaven aan zorg per financieringsbron / /Hoofdstuk 2 Zorg in perspectief /pagina 1.
Personalisatie van de Archis website Naam: Sing Hsu Student nr: Datum: 24 Juni 2004.
Ontwikkeld door Anne Coppens en Carlo Verhaar les Navigatie I-C1#, datum.
1 COVER: Selecteer het grijze vlak hiernaast met rechtsklik & kies ‘change picture’ voor een ander beeld of verwijder deze slide & kies in de menubalk.
Global e-Society Complex België - Regio Vlaanderen e-Regio Provincie Limburg Stad Hasselt Percelen.
Workshop Nieuwe begroting
STAPPENPLAN GRAMMATICUS.
Ronde (Sport & Spel) Quiz Night !
Een Concert van het Nederlands Philharmonisch Orkest LES 4 1.
Start.
Kb.1 Ik leer op een goede manier optellen en aftrekken
Tevredenheids- enquête 2012 P. Grouwels Inleiding Mogelijke antwoorden: Zeer goed: 4 sterren ****: volledig tevreden; Goed: 3 sterren ***:
© BeSite B.V www.besite.nl Feit: In 2007 is 58% van de organisaties goed vindbaar op internet, terwijl in 2006 slechts 32% goed vindbaar.
Leiden University. The university to discover. ICLON, Interfacultair Centrum voor Lerarenopleiding, Onderwijsontwikkeling en Nascholing Denkgereedschap.
9 januari 2013 Bodegraven 1. 1Korinthe 11 1 Wordt mijn navolgers, gelijk ook ik Christus navolg. 2.
Nooit meer onnodig groen? Luuk Misdom, IT&T
Hoofdstuk 6: Controle structuren
FOD VOLKSGEZONDHEID, VEILIGHEID VAN DE VOEDSELKETEN EN LEEFMILIEU 1 Kwaliteit en Patiëntveiligheid in de Belgische ziekenhuizen anno 2008 Rapportage over.
Elke 7 seconden een nieuw getal
1 introductie 3'46” …………… normaal hart hond 1'41” ……..
Oefeningen F-toetsen ANOVA.
Wat levert de tweede pensioenpijler op voor het personeelslid? 1 Enkele simulaties op basis van de weddeschaal B1-B3.
1 WIJZIGINGEN UNIEK VERSLAG. 2 Agenda Verbeteringen Veranderingen formulieren Praktische herinneringen Nieuwe formulieren Sociale en culturele participatie.
13 maart 2014 Bodegraven 1. 1Korinthe Want gelijk het lichaam één is en vele leden heeft, en al de leden van het lichaam, hoe vele ook, een lichaam.
Geometrie en topologie Rob Kromwijk, 26 juli 2012.
Afrika: Topo nakijken en leren.
Informatiebad sociaal infopunt Demo portaalsite. Lokaal Sociaal Beleidsplan – sociaal infopunt 2 Demo portaalsite Je vindt de portaalsite door te surfen.
User management voor ondernemingen en organisaties
2009 Tevredenheidsenquête Resultaten Opleidingsinstellingen.
ribwis1 Toegepaste wiskunde Lesweek 01 – Deel B
ribwis1 Toegepaste wiskunde – Differentieren Lesweek 7
Workshop Informatievaardigheden
Op Stap naar het SO versie met oefeningen
ECHT ONGELOOFLIJK. Lees alle getallen. langzaam en rij voor rij
17/08/2014 | pag. 1 Fractale en Wavelet Beeldcompressie Les 5.
17/08/2014 | pag. 1 Fractale en Wavelet Beeldcompressie Les 3.
Fractale en Wavelet Beeldcompressie
Fractale en Wavelet Beeldcompressie
De financiële functie: Integrale bedrijfsanalyse©
1 Amsterdam, april 2005 Drs. Frits Spangenberg Rotary Extern imago.
ERIC Zoeken op onderwerp Universiteitsbibliotheek.
1 Zie ook identiteit.pdf willen denkenvoelen 5 Zie ook identiteit.pdf.
12 sept 2013 Bodegraven 1. 2  vooraf lezen: 1Kor.7:12 t/m 24  indeling 1Korinthe 7  1 t/m 9: over het huwelijk  10 t/m 16: over echtscheiding  16.
13 november 2014 Bodegraven 1. 2 de vorige keer: 1Kor.15:29-34 indien er geen doden opgewekt worden...  vs 29: waarom dopen?  vs.30-32: waarom doodsgevaren.
IA – LABELS Rogier van der Linde & Davy De Winne, 2014.
1 Week /03/ is gestart in mineur De voorspellingen van alle groten der aarden dat de beurzen zouden stijgen is omgekeerd uitgedraaid.
DIGITAL ANALYTICS TOOLS. 2 DIGITALE MEDIA - METEN.
Rode assen Rogier van der Linde & Davy De Winne, 2014.
45 levenslessen Klikken voor vervolg Muziek: snowdream.
Rogier van der Linde & Davy De Winne, 2014
ONTSPAN , LUISTER EN LEES
23 mei 2013 Bodegraven vanaf hoofdstuk 6: hoofdst.1: de wijsheid van de wereld hoofdst.2: de wijsheid van God hoofdst.3: Gods akker en Gods bouwwerk.
1 XSLT processing & control Datamodellering 2006.
Planning Usability Week 1: Wat is usability, Homepage H1,2 Week 2: Navigatiestructuur, Zoekdienst, Servicepagina’s H3,4,5 Week 3: Ontwerp en Webschrijven.
IA – LABELS Rogier van der Linde & Davy De Winne, 2014.
Transcript van de presentatie:

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

UX DESIGN FRAMEWORK 2 ISO framework U BENT HIER

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

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

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

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...

PAGE TABLES 7 formulier geinsipreerd op out-2-slides-and-resources-from-my-talk-on-the-norwegian-cancer-society/ 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

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

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

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

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!)

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

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...

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

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

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

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

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

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

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

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: blog/filteren-productcatalogus-design-tips

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

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

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

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

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

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

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

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

CONTEXTUELE NAVIGATIE – CONTEXTUEEL MENU 30

CONTEXTUELE NAVIGATIE – HYPERLINKS 31 s, 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

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

CONTEXTUELE NAVIGATIE – KAARTEN 33

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

BEDENKINGEN – CONTEXTUEEL MENU 51 vergelijk dit met waar de navigatie veel meer steunt op klassieke hoofd- en submenunavigatie...

OEFENING 52 becommentarieer de navigatiestructuur van deze pagina

OEFENING 53 becommentarieer de navigatiestructuur van deze pagina