Gebruikersgericht Ontwerpen

1,456 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,456
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Gebruikersgericht Ontwerpen

  1. 1. Making good websites:planning & information architecture<br />
  2. 2. What is a website?<br />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.<br />
  3. 3. What is a Web Page?<br />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.<br />
  4. 4. Working definition<br />A website is a collection of static web pages, addressed with a common domain name.<br />STATIC: presents pre-defined information to the user<br />Not: web service or web application<br />ex. Gmail and Hotmail are web services<br />
  5. 5. Wat is een “goede” website?<br />Makkelijk in gebruik, efficient»usability<br />Heldere, betrouwbare inhoud »high level of trust<br />Makkelijk te vinden »findability<br />Toegankelijk voor mensen met functiebeperking »accessibility<br />
  6. 6. Accessibility<br />Toegankelijkheid voor mensen met een functiebeperking, die het internet via aangepaste hulpmiddelen gebruiken.<br />Randapparatuur en software<br />aangepast toetsenbord, muis, joystick<br />text browser, screen reader, screen magnifier<br />Belgisch label: Anysurfer<br />
  7. 7. Visuele aandachtspunten<br />Zorg voor voldoende contrast.<br />Flexibele lettergrootte.<br />Verwerk belangrijke tekst nooit (enkel) in afbeeldingen.<br />Hou rekening met personen met een gewijzigd kleurenzicht.<br />Gebruik bewegend beeld alleen als het echt niet anders kan.<br />
  8. 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/)<br />Normaal<br />Gewijzigd kleurenzicht<br />
  9. 9. Findability<br />Iedereen wil een toppositie in de Google zoekresultaten (ranking)<br />Search Engine Optimization (SEO) is big business<br />Hoe vindt Google je site?<br />Wat kan je zelf doen?<br />Hoe kan je je publiek analyseren?<br />»Latere les<br />
  10. 10. Thrustworthiness<br />Eerste indruk telt<br />Identificeer jezelf<br />Vermeld je bronnen<br />»Latere les<br />
  11. 11. Usability: gebruiksgemak: ergonomie<br />hangt af van de vaardigheden van je gebruikers<br />gebruiksgemak kan je makkelijk testen<br />
  12. 12. Usability &gt;&gt; Beauty<br />anticipeer op het gebruik van je web site<br />user-centred design<br />Convention &gt;&gt; Originality<br />
  13. 13. Het Webdesign Stappenplan<br />Enkele bronnen: <br /><ul><li>Web Style Guide http://webstyleguide.com/wsg3/index.html
  14. 14. Douglas Bowman, A Design Process Revealed</li></li></ul><li>Stappenplan<br />Plan<br />definieer uw doelstellingen<br />omschrijf uw doelpubliek, bepaal gebruikersscenario’s<br />verken de concurrentie<br />Ontwikkel<br />bepaal inhoud en functionaliteiten<br />structureer de inhoud met een site map<br />structureer de navigatie met een navigatieplan<br />schets de opbouw van pagina’s<br />Design<br />bepaal stijl, kleurenpalet, grafische elementen<br />Planning etc.: http://www.webstyleguide.com/<br />
  15. 15. Planningsfase<br />Omschrijf de (primaire en secundaire) doelen van site<br />Definieer doelgroepen:<br />Voorkennis<br />Computervaardigheden<br />Stel profiel op<br />Je kan werken met &quot;personas&quot;<br />Definieer gebruikerstaken<br />Probleemstelling van doelgroep<br />Gebruikersscenario<br />State of the Art<br />
  16. 16. Ontwikkelen: Structuur schetsen<br />Vooraf: <br />alle inhoud verzamelen <br />indelen in secties <br />met bijhorende activiteiten<br />Visuele voorstelling:<br />boomdiagram<br />
  17. 17. Schets het grondplan<br />Teken site-structuur<br />Flowchart of sitemap<br />
  18. 18. Voordeel van boomdiagram<br />overzicht<br />duidelijke labels plakken op alle onderdelen <br />commentaar vragen van buitenstaanders <br />goede balans en diepte vinden voor de verschillende secties<br />
  19. 19. Zinvolle eenheden<br />Elke sectie, maar ook elke webpagina vormt een logische eenheid <br />Per pagina: een centraal, afgerond thema <br />Navigatie: Het voorgestelde traject in de site moet duidelijk zijn.Dat betekent dat er genoeg wegwijzers aangebracht moeten worden. <br />
  20. 20. Duidelijke labels<br />Kort en trefzeker<br />Vermijd restcategorieën <br />“verdere info” <br />“allerlei”<br />
  21. 21. Het aantal knoppen<br />De labels voor de hoofdonderdelen worden de belangrijkste navigatieknoppen. <br />Meer dan acht knoppen in een navigatiebalk = onoverzichtelijk. <br />
  22. 22. Klikdiepte<br />Alle belangrijke onderdelen mogen niet verder dan twee keer klikken van de eerste pagina verwijderd zitten.<br />
  23. 23. Software voor diagrammen<br />MS Visio<br />MS Powerpoint<br />Inspiration<br />
  24. 24. Plan de pagina’s<br />Schets homepagina <br />én verschillende sub-pagina’s<br />Wireframe, layout grid, of stramien= zonder designelementen<br />Papieren prototypes:<br />wireframes_updatehistory.pdf, http://arenbergcenter.com/design/<br />
  25. 25.
  26. 26.
  27. 27.
  28. 28. Grafisch design<br />Kleurenpalet<br />Lettertypes<br />Grafische elementen<br />Maquette of prototype<br /><ul><li>Integreert stramien met grafisch design</li></li></ul><li>design patronen komt uit Architectuur<br />“Design Patterns” Christopher AlexanderAlexander e.a., A pattern language (1977)Een patroon ontstaat in een herhaald sociaal proces van verzamelen, uitwisselen en versterken van gedeelde ervaring en kennis.<br />&quot;describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use that solution a million of times over...&quot;<br />Hier betekent patroon: optimale oplossing voor veelvoorkomende problemen.<br />
  29. 29. Enkele site types<br />Portaal<br />Museum<br />
  30. 30. Portaal<br /><ul><li>Grote variatie aan info
  31. 31. Horizontaal: sub-sites
  32. 32. 3 kolommen:Rechts hoofdinformatie</li></ul>Links contextuele info of thema’s<br />http://www.bbc.co.uk/<br />http://techrepublic.com.com/<br />
  33. 33. Portaalvoorbeeld<br />
  34. 34. Museum<br />Tentoonstellingen<br />Shop <br />Bezoekersinfo<br />Lidmaatschap, de “vrienden van museum x”<br />Educatieve afdeling<br />
  35. 35. Patronen in webpagina’s<br />Beproefde opmaak- en navigatie-oplossingen <br />Metaforen: Boek, landkaarten, wegwijzers, etc. <br />Patronen vind je op elke schaal van een website:<br />interface en layout<br />structuur van informatie en navigatiedynamiek <br />inhoud: doel van een web site, afbakening van een onderwerp, communicatiestrategie <br />
  36. 36. Navigatie is cruciaal<br />browsen: geen notie van schaal, richting, locatie<br />bv: http://www.w3.org/1998/02/Potential.html<br />http://www.w3.org/<br />
  37. 37. Met minimale middelen <br />moet navigatie:<br />houvast bieden<br />inzicht in de inhoud bieden<br />tonen hoe de site gebruikt kan worden<br />het imago van de site uitdragen<br />
  38. 38. Basiselementen<br />site id: welke site is dit?<br />sections: wat zijn de onderdelen?<br />(utilities or features)<br />home button<br />a way to search<br />subsections<br />page name: welke pagina is dit?<br />local nav<br />&quot;you are here&quot; indicator: waar bevind ik me?<br />small text version of main nav<br />Persistent <br />navigation<br />
  39. 39. Persistent navigation<br />set van navigatie elementen die op elke pagina verschijnen <br />uitzondering: home page en formulieren<br />Sections<br />Site ID<br />A way home<br />Utilities<br />A way to search<br />XYZ <br />SEARCH<br />Home<br />Sign in<br />News<br />Products<br />Downloads<br />Support<br />About XYZ<br />
  40. 40. Site ID<br />Logo of merkteken dat een website identificeert<br />Top van de visuele en logische hiërarchie<br />Men verwacht het rechts bovenaan<br />Sections<br />Site ID<br />A way home<br />Utilities<br />A way to search<br />XYZ <br />SEARCH<br />Home<br />Sign in<br />News<br />Products<br />Downloads<br />Support<br />About XYZ<br />
  41. 41. Sections of afdelingen<br />Sections<br />Ook Primary Navigation: de hoofdonderdelen<br />Secondary navigation: Subsections binnen een bepaalde afdeling<br />Site ID<br />A way home<br />A way to search<br />Utilities<br />XYZ <br />Subsections<br />SEARCH<br />Home<br />Sign in<br />News<br />Products<br />Downloads<br />Support<br />About XYZ<br />Mosselen<br />Zakmessen<br />Hefbomen<br />
  42. 42. Utilities of voorzieningen<br />Utilities zijn links naar belangrijke onderdelen van een site, die geen deel uitmaken van de hiërarchie van de inhoud.<br />Bv. FAQs, Help, Press, Sign in, Site Map, Store locator<br />Sections<br />Site ID<br />A way home<br />Utilities<br />A way to search<br />XYZ <br />SEARCH<br />Home<br />Sign in<br />News<br />Products<br />Downloads<br />Support<br />About XYZ<br />
  43. 43. Home<br />Aan te raden: maak van de site-id een link naar de home page<br />Sections<br />Site ID<br />A way home<br />Utilities<br />A way to search<br />XYZ <br />SEARCH<br />Home<br />Sign in<br />News<br />Products<br />Downloads<br />Support<br />About XYZ<br />
  44. 44. Verder...<br />Page name: Verschijnt prominent, als titel vlakbij de unieke inhoud van de pagina.<br />&quot;You are here&quot; indicator<br />zie: bread crumbs, tabs, ...<br />
  45. 45. Veelvoorkomende navigatieoplossingen<br />Tabbladen<br />Rondleiding<br />“Bread Crumbs”<br />“Deurmat”<br />
  46. 46. Tabbladen<br />
  47. 47. Opgelegde sequentie<br />http://textism.com/writing/<br />
  48. 48. “Bread Crumbs”<br />Probleem: weg vinden in grote hiërarchische informatiestructuur<br />Oplossing: <br /><ul><li> een pad van tekstlinks die toelaten “terug te springen” naar eerdere niveau’s </li></li></ul><li>“Deurmat”<br />
  49. 49. Soorten pagina&apos;s<br />Home page<br />Section-level page<br />Products<br />Welcome to XYZ!we make STUFF<br />about<br />News<br />support<br />XYZ<br />&gt;News All Products<br />&gt;Products<br /> &gt; hardware<br /> &gt; software<br />&gt;support<br />&gt;about<br />
  50. 50. Home page = unique<br />Site identity and mission<br />Site hierarchy:<br />What can I find here? What can I do here?<br />Search<br />Featured content: <br />top stories, content promo, deals<br />Registration<br />Where to start?<br />Establish credibility and trust<br />
  51. 51.
  52. 52. Site ID<br />Mission<br />(tagline)<br />What you can find here: content hierarchy<br />Where to start...<br />Search<br />Reputation, credibility and trust<br />Short-cuts to frequently requested pieces of content<br />Reputation, credibility and trust<br />
  53. 53. Site ID<br />You are here indicator:section level<br />Search<br />Sections<br />Advertisement<br />Subsections<br />Feature promo<br />Page name<br />you are here indicator<br />Local navigation<br />Advertisement<br />
  54. 54.
  55. 55. Site identity<br />Site content:<br />sections<br />Content promo&apos;s<br />Where to start: Today&apos;s agenda<br />Site features<br />search<br />Site features<br />
  56. 56.
  57. 57. Sections<br />Subsections<br />Content promos<br />Features<br />search<br />Utilities<br />
  58. 58. Efficiënte navigatie? Doe de test<br />What site is this? (site ID)<br />What page am I on? (Page name)<br />What are the major sections of this site? (Sections)<br />What are my options at this level? (Local navigation)<br />Where am I in the scheme of things? (&quot;you are here&quot; indicator)<br />How can I search?<br />

×