1. Making good websites:planning & information architecture

2. What is a website? Wikipedia: A website (also spelled web site) is a collection of related web pages, images, videos or other digital assets that are addressed with a common domain name or IP address in an Internet Protocol-based network. A web site is hosted on at least one web server, accessible via the Internet or a private local area network.

3. What is a Web Page? Wikipedia: A web page is a document, typically written in plain text interspersed with formatting instructions of Hypertext Markup Language (HTML, XHTML). A web page may incorporate elements from other websites with suitable markup anchors.

4. Working definition A website is a collection of static web pages, addressed with a common domain name. STATIC: presents pre-defined information to the user Not: web service or web application ex. Gmail and Hotmail are web services

5. Wat is een “goede” website? Makkelijk in gebruik, efficient»usability Heldere, betrouwbare inhoud »high level of trust Makkelijk te vinden »findability Toegankelijk voor mensen met functiebeperking »accessibility

6. Accessibility Toegankelijkheid voor mensen met een functiebeperking, die het internet via aangepaste hulpmiddelen gebruiken. Randapparatuur en software aangepast toetsenbord, muis, joystick text browser, screen reader, screen magnifier Belgisch label: Anysurfer

7. Visuele aandachtspunten Zorg voor voldoende contrast. Flexibele lettergrootte. Verwerk belangrijke tekst nooit (enkel) in afbeeldingen. Hou rekening met personen met een gewijzigd kleurenzicht. Gebruik bewegend beeld alleen als het echt niet anders kan.

8. Illustratie. Kleuren en contrast: kleurenblindheid. Screenshots van de website http://www.vangoghgauguin.com/ werden onderworpen aan een kleurenfilter die het effect van kleurenblindheid nabootst. (zie: www.vischeck.com/) Normaal Gewijzigd kleurenzicht

9. Findability Iedereen wil een toppositie in de Google zoekresultaten (ranking) Search Engine Optimization (SEO) is big business Hoe vindt Google je site? Wat kan je zelf doen? Hoe kan je je publiek analyseren? »Latere les

10. Thrustworthiness Eerste indruk telt Identificeer jezelf Vermeld je bronnen »Latere les

11. Usability: gebruiksgemak: ergonomie hangt af van de vaardigheden van je gebruikers gebruiksgemak kan je makkelijk testen

12. Usability >> Beauty anticipeer op het gebruik van je web site user-centred design Convention >> Originality

15. Planningsfase Omschrijf de (primaire en secundaire) doelen van site Definieer doelgroepen: Voorkennis Computervaardigheden Stel profiel op Je kan werken met "personas" Definieer gebruikerstaken Probleemstelling van doelgroep Gebruikersscenario State of the Art

16. Ontwikkelen: Structuur schetsen Vooraf: alle inhoud verzamelen indelen in secties met bijhorende activiteiten Visuele voorstelling: boomdiagram

17. Schets het grondplan Teken site-structuur Flowchart of sitemap

18. Voordeel van boomdiagram overzicht duidelijke labels plakken op alle onderdelen commentaar vragen van buitenstaanders goede balans en diepte vinden voor de verschillende secties

19. Zinvolle eenheden Elke sectie, maar ook elke webpagina vormt een logische eenheid Per pagina: een centraal, afgerond thema Navigatie: Het voorgestelde traject in de site moet duidelijk zijn.Dat betekent dat er genoeg wegwijzers aangebracht moeten worden.

20. Duidelijke labels Kort en trefzeker Vermijd restcategorieën “verdere info” “allerlei”

21. Het aantal knoppen De labels voor de hoofdonderdelen worden de belangrijkste navigatieknoppen. Meer dan acht knoppen in een navigatiebalk = onoverzichtelijk.

22. Klikdiepte Alle belangrijke onderdelen mogen niet verder dan twee keer klikken van de eerste pagina verwijderd zitten.

23. Software voor diagrammen MS Visio MS Powerpoint Inspiration

24. Plan de pagina’s Schets homepagina én verschillende sub-pagina’s Wireframe, layout grid, of stramien= zonder designelementen Papieren prototypes: wireframes_updatehistory.pdf, http://arenbergcenter.com/design/

29. Enkele site types Portaal Museum

31. Horizontaal: sub-sites

32. 3 kolommen:Rechts hoofdinformatieLinks contextuele info of thema’s http://www.bbc.co.uk/ http://techrepublic.com.com/

33. Portaalvoorbeeld

34. Museum Tentoonstellingen Shop Bezoekersinfo Lidmaatschap, de “vrienden van museum x” Educatieve afdeling

35. Patronen in webpagina’s Beproefde opmaak- en navigatie-oplossingen Metaforen: Boek, landkaarten, wegwijzers, etc. Patronen vind je op elke schaal van een website: interface en layout structuur van informatie en navigatiedynamiek inhoud: doel van een web site, afbakening van een onderwerp, communicatiestrategie

36. Navigatie is cruciaal browsen: geen notie van schaal, richting, locatie bv: http://www.w3.org/1998/02/Potential.html http://www.w3.org/

37. Met minimale middelen moet navigatie: houvast bieden inzicht in de inhoud bieden tonen hoe de site gebruikt kan worden het imago van de site uitdragen

38. Basiselementen site id: welke site is dit? sections: wat zijn de onderdelen? (utilities or features) home button a way to search subsections page name: welke pagina is dit? local nav "you are here" indicator: waar bevind ik me? small text version of main nav Persistent navigation

39. Persistent navigation set van navigatie elementen die op elke pagina verschijnen uitzondering: home page en formulieren Sections Site ID A way home Utilities A way to search XYZ SEARCH Home Sign in News Products Downloads Support About XYZ

40. Site ID Logo of merkteken dat een website identificeert Top van de visuele en logische hiërarchie Men verwacht het rechts bovenaan Sections Site ID A way home Utilities A way to search XYZ SEARCH Home Sign in News Products Downloads Support About XYZ

41. Sections of afdelingen Sections Ook Primary Navigation: de hoofdonderdelen Secondary navigation: Subsections binnen een bepaalde afdeling Site ID A way home A way to search Utilities XYZ Subsections SEARCH Home Sign in News Products Downloads Support About XYZ Mosselen Zakmessen Hefbomen

42. Utilities of voorzieningen Utilities zijn links naar belangrijke onderdelen van een site, die geen deel uitmaken van de hiërarchie van de inhoud. Bv. FAQs, Help, Press, Sign in, Site Map, Store locator Sections Site ID A way home Utilities A way to search XYZ SEARCH Home Sign in News Products Downloads Support About XYZ

43. Home Aan te raden: maak van de site-id een link naar de home page Sections Site ID A way home Utilities A way to search XYZ SEARCH Home Sign in News Products Downloads Support About XYZ

44. Verder... Page name: Verschijnt prominent, als titel vlakbij de unieke inhoud van de pagina. "You are here" indicator zie: bread crumbs, tabs, ...

45. Veelvoorkomende navigatieoplossingen Tabbladen Rondleiding “Bread Crumbs” “Deurmat”

46. Tabbladen

47. Opgelegde sequentie http://textism.com/writing/

49. Soorten pagina's Home page Section-level page Products Welcome to XYZ!we make STUFF about News support XYZ >News All Products >Products > hardware > software >support >about

50. Home page = unique Site identity and mission Site hierarchy: What can I find here? What can I do here? Search Featured content: top stories, content promo, deals Registration Where to start? Establish credibility and trust

52. Site ID Mission (tagline) What you can find here: content hierarchy Where to start... Search Reputation, credibility and trust Short-cuts to frequently requested pieces of content Reputation, credibility and trust

53. Site ID You are here indicator:section level Search Sections Advertisement Subsections Feature promo Page name you are here indicator Local navigation Advertisement

55. Site identity Site content: sections Content promo's Where to start: Today's agenda Site features search Site features

57. Sections Subsections Content promos Features search Utilities

58. Efficiënte navigatie? Doe de test What site is this? (site ID) What page am I on? (Page name) What are the major sections of this site? (Sections) What are my options at this level? (Local navigation) Where am I in the scheme of things? ("you are here" indicator) How can I search?