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
12. Usability >> Beauty anticipeer op het gebruik van je web site user-centred design Convention >> Originality
13.
14.
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
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.
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.
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/
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, ...
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
51.
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
54.
55. Site identity Site content: sections Content promo's Where to start: Today's agenda Site features search Site features
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?