Webcommunicatie / college 2

1,764 views

Published on

Onderwerpen: informatie architectuur, navigatie, formulieren en testen

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,764
On SlideShare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Webcommunicatie / college 2

    1. 1. Websitecommunicatie College 2 / Het skelet
    2. 2. Programma <ul><li>Actualiteit </li></ul><ul><li>Toelichting: het skelet </li></ul><ul><ul><li>Navigatie </li></ul></ul><ul><ul><li>Formulieren </li></ul></ul><ul><li>Gebruikerstesten </li></ul><ul><li>De opdrachten </li></ul>
    3. 3. Actualiteit Het communicatienieuws van deze week….
    4. 4. Virale sint! <ul><li>http:// sint.detelefoongids.nl </li></ul><ul><li>Het doel: help de sint met z’n To Do lijst voor pakjesavond. Doe je dat goed, dan kun je je verlanglijstje winnen. En hoe vaker je hm doorstuurt, hoe meer kado’s dat kunnen zijn. En de leveranciers voor alle pakjes? Die vindt de Sint natuurlijk in de Telefoongids. </li></ul><ul><li>Interessant: de promotie </li></ul>Waarom is dit leuk? Wanneer werkt zo’n virale campagne?
    5. 5. Onderdeel deze week: het skelet
    6. 6. Styleguide, kleurenkaart, typografie, buttons, actions, moodboards Grid, wireframe, navigation, storyboard Structure; -hierarchy, matrix, organic, sequential-, Flowchart, metaphores, dialogs Card sorting, moscow analyses, medium verantwoording Business doelen, gebruikerseisen, personas, user scenario’s, task analyses, moodboards Terug naar het schema
    7. 7. User experience - Skeleton <ul><li>Skeleton plane: </li></ul><ul><li>Presentatie van de INHOUD </li></ul><ul><li>Arrangement van USER INTERFACE elementen </li></ul><ul><li>Navigatie </li></ul>
    8. 8. Informatie architectuur
    9. 9. Belangrijke term - informatiearchitectuur <ul><li>Informatie architectuur </li></ul><ul><ul><li>Structureren van de informatie voor publicatie op het web </li></ul></ul><ul><ul><li>Ontsluiten van de informatie op een bruikbare manier </li></ul></ul>
    10. 10. Organisatie principes (categori een ) <ul><li>Task-based </li></ul><ul><ul><li>Buy, Contact Us, Browse, Manage Account </li></ul></ul><ul><li>User Type </li></ul><ul><ul><li>Students, Employees, Visitors, Investors </li></ul></ul><ul><li>Topical </li></ul><ul><ul><li>Cars, DVD’s, Books, Pictures, Ringtones </li></ul></ul><ul><li>Organizational </li></ul><ul><ul><li>Support, Sales, Research and development, Management </li></ul></ul><ul><li>Implementation-based </li></ul><ul><ul><li>Because the site is technically built like this… </li></ul></ul><ul><ul><li>E.g. ‘Html-Flash’ </li></ul></ul>
    11. 11. Labeling categorieen <ul><li>Information Scent </li></ul><ul><ul><li>Labels scheppen verwachtingen </li></ul></ul><ul><ul><li>Labels moeten de lading dekken </li></ul></ul><ul><ul><li>Labels moeten betekenisvol zijn voor de doelgroep </li></ul></ul><ul><li>Praktische Richtlijnen </li></ul><ul><ul><li>Hou labels kort, max 3-4 woorden </li></ul></ul><ul><ul><li>Spreek de taal van de doelgroep </li></ul></ul><ul><ul><li>Vermijd vage of zeer subjectieve termen </li></ul></ul><ul><ul><li>Voldoe aan verwachtingen </li></ul></ul><ul><ul><li>Gebruik informatie uit je analyses </li></ul></ul>
    12. 12. Meer informatie…. <ul><li>http://usableweb.com/topics/000290-0-0.html </li></ul><ul><li>http://en.wikipedia.org/wiki/Information_architecture </li></ul>
    13. 13. Navigatie
    14. 14. Skeleton plane - Navigatie <ul><li>Bij het maken van een functioneel ontwerp zijn de richtlijnen gebaseerd op drie vragen die de bezoeker kan stellen: </li></ul><ul><li>Waar ben ik? </li></ul><ul><li>Waar ben ik geweest? </li></ul><ul><li>Waar kan ik naar toe? </li></ul>Hoe krijg je als bezoeker overzicht?
    15. 15. Typen Navigatie Systemen <ul><li>Navigatie: het toepassen van IA op een website </li></ul><ul><li>Horizontale/vertical navigatie </li></ul><ul><li>Top-left navigatie </li></ul><ul><li>Fly-out menus </li></ul><ul><li>Breadcrumbs </li></ul><ul><li>Directory Navigatie </li></ul><ul><li>Minesweeping (AKA Mystery meat navigation) </li></ul>
    16. 16. Horizontale navigatie <ul><li>Tot +/- 10 enkelvoudige woorden </li></ul><ul><li>Tot 2 rijen mogenlijk, daarna moet een aanvulling worden gekozen </li></ul><ul><li>Makkelijk te ‘scannen’ </li></ul><ul><li>Alle items op het 1e niveau blijven zichtbaar </li></ul><ul><li>Beperkte woordlengte </li></ul>
    17. 17. Verticale navigatie <ul><li>Tot +/- 10 items (in geval A of B) </li></ul><ul><li>Items kunnen naar beneden worden gedrukt en daardoor minder zichtbaar worden </li></ul><ul><li>Snoept horizontale ruimte weg </li></ul>Level 1 item Level 1 item Level 1 item Level 1 item Level 1 item Level 1 item Level 1 item Level 1 item Level 2 item Level 2 item Level 2 item Level 1 item Level 1 item ... Level 1 label Level 2 item Level 2 item Level 2 item Level 1 label Level 2 item Level 2 item (A) (B) (C)
    18. 18. Top-left <ul><li>Standaardoplossing voor 2/3 niveau’s </li></ul>
    19. 19. Fly-out Menus <ul><li>Voor meerdere niveaus, kost weinig ruimte </li></ul><ul><li>Alleen eerste niveau blijft zichtbaar </li></ul><ul><li>DHTML </li></ul>
    20. 20. Breadcrumbs <ul><li>Toont waar je bent! </li></ul><ul><li>Laat de structuur zien </li></ul><ul><li>Altijd samen met ander navigatiemechanisme gebruiken </li></ul>
    21. 21. Directory Navigation
    22. 22. Minesweeping
    23. 23. Minesweeping
    24. 24. Minesweeping <ul><li>De contentstructuur blijft verborgen! </li></ul><ul><ul><li>Niet geschikt voor informatierijke sites </li></ul></ul><ul><li>Nodigt uit tot interactie </li></ul><ul><ul><li>Kan bijdrage aan het “fun” / experience element </li></ul></ul>
    25. 25. Navigatie <ul><li>Belangrijk in navigatie: </li></ul><ul><li>Consistentie: zorg voor een consistente UI op verschillende pagina’s van de site. Verander dus niet drastisch van vormgeving op verschillende onderdelen van een site. </li></ul><ul><li>Houdt het simpel: niet teveel opties, niet te diepe menu-structuren etc. Vermijd trendy oplossingen (‘minesweeping’) </li></ul><ul><li>Context: zorg dat bezoekers weten waar ze zijn. Zeker belangrijk bij ‘deeplinking’ (zoekmachines). </li></ul>
    26. 26. Interactie en formulieren
    27. 27. Interactie <ul><li>Meest voorkomende vormen: </li></ul><ul><li>Dialoog </li></ul><ul><li>Formulieren </li></ul>Hierbij wordt een lijst met vragen (om gegevens) afgewerkt, waarbij de gebruiker de antwoorden moet invullen. Op basis van antwoorden van een gebruiker wordt de volgende vraag gepresenteerd.
    28. 28. Waarom zijn formulieren belangrijk? <ul><li>Formulieren zijn het belangrijkste dat op internet bestaat: </li></ul><ul><li>Ze zijn nodig voor contact met gebruikers of voor het verkopen van producten </li></ul><ul><li>Gebruikers die problemen hebben met het invullen van een formulier zijn erg kostbaar voor een organisatie. Iemand die midden in een bestelproces afhaakt betekent direct verloren omzet, terwijl er wel geld is uitgegeven om die persoon zo ver te krijgen aan het formulier te beginnen. </li></ul>
    29. 29. Toverwoord: conversie <ul><li>Conversie: bezoekers een actie laten uitvoeren. </li></ul><ul><li>Welke acties verwacht je als organisatie van je bezoekers? </li></ul><ul><li>Een bestelling plaatsen </li></ul><ul><li>Abonneren op een nieuwsbrief </li></ul><ul><li>Offerte opvragen </li></ul><ul><li>… </li></ul>
    30. 30. Stellingen over formulieren <ul><li>Formulieren zijn lang en ingewikkeld </li></ul><ul><li>Formulieren zijn onduidelijk, soms is niet eens duidelijk waar ze voor dienen </li></ul><ul><li>Formulieren dwingen gebruikers vragen te beantwoorden, zelfs als de gebruiker de vragen irrelevant vindt </li></ul><ul><li>Formulieren verkleinen de controle die gebruikers hebben door dingen verplicht te stellen </li></ul><ul><li>Formulieren worden door marketeers misbruikt om informatie te achterhalen voor direct marketing </li></ul><ul><li>Websites geven gebruikers de schuld van het verkeerd invullen van formulieren </li></ul>
    31. 31. <ul><li>Kies titels van namen en velden met betekenis. </li></ul><ul><li>Groepeer velden op een logische wijze. </li></ul><ul><li>Zorg voor een aantrekkelijke opmaak. </li></ul><ul><li>Gebruik waar mogelijk default waarden. </li></ul><ul><li>Wees consistent in spelling, lay-out, woordgebruik etc. </li></ul><ul><li>Laat duidelijk zien hoe groot de invulvelden zijn en of ze ingevuld moeten / mogen. </li></ul><ul><li>Laat zo min mogelijk navigeren door het formulier. </li></ul><ul><li>Denk aan de mogelijkheid om fouten te corrigeren </li></ul>Vuistregels invulformulieren
    32. 32. Formulier - elementen
    33. 33. Formulieren <ul><li>Een formulier kan uit verschillende elementen bestaan: </li></ul><ul><li>Tekstvelden (waar de bezoeker één regel kan invullen) </li></ul><ul><li>Tekstgebieden (waar de bezoeker meerdere regels kan invullen) </li></ul><ul><li>Radiobuttons </li></ul><ul><li>Checkboxen </li></ul><ul><li>Keuzelijsten </li></ul><ul><li>Verzendknop </li></ul><ul><li>Herstelknop </li></ul>
    34. 34. Tips en trucks formulieren <ul><li>Een perfect overzicht vind je op usarchy.com </li></ul>
    35. 35. Gestructureerd testen
    36. 36. Manieren om te testen <ul><li>Testen op de afzetmarkt </li></ul><ul><ul><li>Riskante methode. Slechte naam niet snel kwijt! </li></ul></ul><ul><li>Testen door 'experts’ </li></ul><ul><ul><li>Onderling slechte dingen melden is niet erg, wel als het naar buiten komt. </li></ul></ul>
    37. 37. Manieren om te testen <ul><li>Laboratoriumtests </li></ul><ul><ul><ul><li>Nepomgeving met mensen uit de doelgroep. </li></ul></ul></ul><ul><ul><ul><li>Een observator bekijkt de mensen achter een spiegel (candid camera). </li></ul></ul></ul><ul><ul><ul><li>Vaak vastgelegd op video. </li></ul></ul></ul><ul><ul><ul><li>Kostbaar. </li></ul></ul></ul><ul><ul><ul><li>Beperkt aantal gebruikers (zoveel er in het lab passen) </li></ul></ul></ul><ul><ul><ul><li>Onderzoek wijst uit: </li></ul></ul></ul><ul><ul><ul><ul><li>Drie (3) Testpersonen = genoeg! </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Voldoende om bruikbaarheid te testen! </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Meer mensen levert niet echt extra informatie op. </li></ul></ul></ul></ul>
    38. 38. Manieren om te testen <ul><li>Participerende gebruikersobservatie </li></ul><ul><ul><li>Meest voorkomende manier. </li></ul></ul><ul><ul><li>Lijkt op lab test. </li></ul></ul><ul><ul><li>Test op de werkplek met eindgebruiker. </li></ul></ul><ul><ul><li>Testpersoon voert aantal taken uit. </li></ul></ul><ul><ul><li>Testleider observeert de testpersoon. </li></ul></ul>
    39. 39. Manieren om te testen <ul><li>Gebruikersinterviews & vragenlijsten </li></ul><ul><li>Meestal gecombineerd met een andere methode. </li></ul><ul><li>Voordeel vragenlijsten: </li></ul><ul><li>Groot bereik </li></ul><ul><li>Standaard antwoorden (makkelijker meten met oog op statistische analyse) </li></ul><ul><li>Nadeel vragenlijsten: </li></ul><ul><li>Weinig diepgaande informatie </li></ul><ul><li>Persoonlijk interview ( achteraf) -> Nadeel: Je ziet gebruikers niet bezig. Globaal beeld (mening gebruikers alleen). </li></ul>
    40. 40. Volgorde testprocedure <ul><li>1. Stel doel en probleemstelling vast </li></ul><ul><ul><ul><li>Wat moet er precies onderzocht worden. </li></ul></ul></ul><ul><ul><ul><li>B.v. Helderheid van de site: kan de gebruiker zich altijd oriënteren? </li></ul></ul></ul><ul><ul><ul><li>Weet deze waar hij zich bevindt. </li></ul></ul></ul><ul><li>2. Concretiseer de probleemstelling. Stel onderzoeksvragen op </li></ul><ul><li>‘ Wat is de bruikbaarheid van site X?’ Is een te ruime vraag. </li></ul><ul><ul><ul><li>Maak deelproblemen. </li></ul></ul></ul><ul><ul><ul><li>Beter is: ‘voert de gebruiker gegevens sneller in bij lay-out A dan bijlay-out B?’ </li></ul></ul></ul>
    41. 41. Volgorde testprocedure <ul><li>3. Maak een testplan </li></ul><ul><li>Wie doet wat wanneer en waar? </li></ul><ul><ul><ul><li>Welke opdrachten voeren de testpersonen uit (gerelateerd aan de geconcretiseerde probleemstelling). </li></ul></ul></ul><ul><ul><ul><li>Schrijf de opdrachten uit. </li></ul></ul></ul><ul><ul><ul><li>Op welke observatiepunten wordt gelet: Kan de gebruiker snel tot de oplossing van de opdracht komen? </li></ul></ul></ul>
    42. 42. Volgorde testprocedure <ul><li>4. Zoek de juiste testpersonen en bepaal hun aantal </li></ul><ul><li>Representatief voor de doelgroep. B.v.: </li></ul><ul><ul><ul><li>mensen uit een bepaalde branche </li></ul></ul></ul><ul><ul><ul><li>mensen met een bepaald kennisniveau </li></ul></ul></ul><ul><li>5. Bereid de test goed voor </li></ul><ul><li>Zorg dat het materiaal in orde is (zelf eerst testen!). </li></ul><ul><ul><ul><li>Testapparatuur moet hetzelfde zijn als bij de gebruiker. </li></ul></ul></ul>
    43. 43. Volgorde testprocedure <ul><li>6. Neem de test af </li></ul><ul><li>Leg acties van de testpersoon(en) vast (video, geluidsband, noteren) </li></ul><ul><li>7. Analyseer de resultaten en formuleer aanpassingen voor het ontwerp. </li></ul><ul><li>Formuleer niet alleen de te verbeteren eigenschappen van de site, maar ook de goede eigenschappen. </li></ul><ul><li>Risico is anders dat er goede dingen mee veranderen. </li></ul><ul><li>Dus zowel goede als te verbeteren punten in het aanpassingsdeel. </li></ul>
    44. 44. De opdrachten Volgende week…
    45. 45. Opdracht 1: site check <ul><li>Uitgebreide site-analyse </li></ul><ul><ul><li>Bouwt voort op de site-check van afgelopen week… </li></ul></ul>
    46. 46. Opdracht 2: klik, klik, klik <ul><li>Hoe vaak moet een bezoeker klikken om bij een bepaalde pagina te komen? </li></ul>
    47. 47. Opdracht 3: Navigatie en besturing <ul><li>Doe een formulieranalyse </li></ul>
    48. 48. Vanmiddag…. <ul><li>Bespreken plannen van aanpak </li></ul><ul><li>Discussie / tips over de aanpak van het project </li></ul>

    ×