gebruikersgericht ontwerpen
TRANSCRIPT
![Page 1: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/1.jpg)
Making good websites:planning
& information architecture
![Page 2: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/2.jpg)
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.
![Page 3: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/3.jpg)
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.
![Page 4: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/4.jpg)
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
![Page 5: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/5.jpg)
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
![Page 6: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/6.jpg)
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
![Page 7: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/7.jpg)
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.
![Page 8: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/8.jpg)
Normaal Gewijzigd kleurenzicht
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/)
![Page 9: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/9.jpg)
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
![Page 10: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/10.jpg)
Thrustworthiness
• Eerste indruk telt• Identificeer jezelf• Vermeld je bronnen» Latere les
![Page 11: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/11.jpg)
Usability: gebruiksgemak: ergonomie
• hangt af van de vaardigheden van je gebruikers
• gebruiksgemak kan je makkelijk testen
![Page 12: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/12.jpg)
Usability >> Beauty
• anticipeer op het gebruik van je web site• user-centred design
Convention >> Originality
![Page 13: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/13.jpg)
Het Webdesign Stappenplan
Enkele bronnen: •Web Style Guide http://webstyleguide.com/wsg3/index.html• Douglas Bowman, A Design Process Revealed
![Page 14: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/14.jpg)
Stappenplan
Plan• definieer uw doelstellingen• omschrijf uw doelpubliek, bepaal gebruikersscenario’s• verken de concurrentieOntwikkel• bepaal inhoud en functionaliteiten• structureer de inhoud met een site map• structureer de navigatie met een navigatieplan• schets de opbouw van pagina’sDesign• bepaal stijl, kleurenpalet, grafische elementen• Planning etc.: http://www.webstyleguide.com/
![Page 15: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/15.jpg)
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
![Page 16: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/16.jpg)
Ontwikkelen: Structuur schetsen
Vooraf: • alle inhoud verzamelen • indelen in secties • met bijhorende activiteitenVisuele voorstelling:• boomdiagram
![Page 17: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/17.jpg)
Schets het grondplan
• Teken site-structuur– Flowchart of sitemap
![Page 18: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/18.jpg)
Voordeel van boomdiagram
• overzicht• duidelijke labels plakken op alle onderdelen • commentaar vragen van buitenstaanders • goede balans en diepte vinden voor de
verschillende secties
![Page 19: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/19.jpg)
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.
![Page 20: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/20.jpg)
Duidelijke labels
• Kort en trefzeker• Vermijd restcategorieën
– “verdere info” – “allerlei”
![Page 21: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/21.jpg)
Het aantal knoppen
• De labels voor de hoofdonderdelen worden de belangrijkste navigatieknoppen.
• Meer dan acht knoppen in een navigatiebalk = onoverzichtelijk.
![Page 22: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/22.jpg)
Klikdiepte
• Alle belangrijke onderdelen mogen niet verder dan twee keer klikken van de eerste pagina verwijderd zitten.
![Page 23: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/23.jpg)
Software voor diagrammen
– MS Visio– MS Powerpoint– Inspiration
![Page 24: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/24.jpg)
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/
![Page 25: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/25.jpg)
![Page 26: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/26.jpg)
![Page 27: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/27.jpg)
![Page 28: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/28.jpg)
Grafisch design
• Kleurenpalet• Lettertypes• Grafische elementen
Maquette of prototype • Integreert stramien met grafisch design
![Page 29: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/29.jpg)
design patronen komt uit Architectuur
• “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. "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..."
• Hier betekent patroon: optimale oplossing voor veelvoorkomende problemen.
![Page 30: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/30.jpg)
Enkele site types
• Portaal• Museum
![Page 31: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/31.jpg)
Portaal
•Grote variatie aan info
•Horizontaal: sub-sites
•3 kolommen:Rechts hoofdinformatie
Links contextuele info of thema’s
http://www.bbc.co.uk/http://techrepublic.com.com/
![Page 32: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/32.jpg)
Portaalvoorbeeld
![Page 33: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/33.jpg)
Museum
1. Tentoonstellingen 2. Shop 3. Bezoekersinfo 4. Lidmaatschap, de “vrienden van museum x” 5. Educatieve afdeling
![Page 34: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/34.jpg)
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
![Page 35: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/35.jpg)
Navigatie is cruciaal
• browsen: geen notie van schaal, richting, locatie
bv: http://www.w3.org/1998/02/Potential.html http://www.w3.org/
![Page 36: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/36.jpg)
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
![Page 37: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/37.jpg)
Basiselementen1. site id: welke site is dit?2. sections: wat zijn de onderdelen?3. (utilities or features)4. home button5. a way to search6. subsections7. page name: welke pagina is dit?8. local nav9. "you are here" indicator: waar bevind ik me?10. small text version of main nav
Persistent navigation
![Page 38: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/38.jpg)
Persistent navigation
• set van navigatie elementen die op elke pagina verschijnen
• uitzondering: home page en formulieren
XYZ XYZ
News Products Downloads Support
SEARCHHome
About XYZ
Sign in
Sections
Site ID A way home Utilities A way to search
![Page 39: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/39.jpg)
Site ID
• Logo of merkteken dat een website identificeert• Top van de visuele en logische hiërarchie• Men verwacht het rechts bovenaan
XYZ XYZ
News Products Downloads Support
SEARCHHome
About XYZ
Sign in
Sections
Site ID A way home Utilities A way to search
![Page 40: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/40.jpg)
Sections of afdelingen
• Ook Primary Navigation: de hoofdonderdelen• Secondary navigation: Subsections binnen een
bepaalde afdeling
XYZ XYZ
News Products Downloads Support
SEARCHHome
About XYZ
Sign in
Sections
Site IDA way home Utilities A way to search
Mosselen Zakmessen Hefbomen
Subsections
![Page 41: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/41.jpg)
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
XYZ XYZ
News Products Downloads Support
SEARCHHome
About XYZ
Sign in
Sections
Site ID A way home Utilities A way to search
![Page 42: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/42.jpg)
Home
• Aan te raden: maak van de site-id een link naar de home page
XYZ XYZ
News Products Downloads Support
SEARCHHome
About XYZ
Sign in
Sections
Site ID A way home Utilities A way to search
![Page 43: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/43.jpg)
Verder...
• Page name: Verschijnt prominent, als titel vlakbij de unieke inhoud van de pagina.
• "You are here" indicator– zie: bread crumbs, tabs, ...
![Page 44: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/44.jpg)
Veelvoorkomende navigatieoplossingen
• Tabbladen• Rondleiding• “Bread Crumbs”• “Deurmat”
![Page 45: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/45.jpg)
Tabbladen
![Page 47: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/47.jpg)
“Bread Crumbs”
Probleem: weg vinden in grote hiërarchische informatiestructuur
Oplossing:
• een pad van tekstlinks die toelaten “terug te springen” naar eerdere niveau’s
![Page 48: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/48.jpg)
“Deurmat”
![Page 49: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/49.jpg)
Soorten pagina's
Home page Section-level page
ProductsWelcome to XYZ!we make STUFF
aboutNews
support
XYZ
>News All Products>Products > hardware > software>support>about
![Page 50: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/50.jpg)
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
![Page 51: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/51.jpg)
![Page 52: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/52.jpg)
Site ID Mission(tagline)
Short-cuts to frequently requested pieces of content
Reputation, credibility and trust
Search
Where to start...
Reputation, credibility and trust
What you can find here:
content hierarchy
![Page 53: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/53.jpg)
Site ID You are here indicator:section level
SectionsSearch
Advertisement
Subsections
Page name
Advertisement
Local navigation
you
are
here
in
dica
tor
Feature promo
![Page 54: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/54.jpg)
![Page 55: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/55.jpg)
Site identity
Site content:sections
Site features
Content promo's Where to start: Today's agenda
Site features
search
![Page 56: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/56.jpg)
![Page 57: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/57.jpg)
Sections Subsections
Featuressearch
UtilitiesContent promos
![Page 58: Gebruikersgericht Ontwerpen](https://reader036.vdocuments.net/reader036/viewer/2022062513/5564d95cd8b42ad9498b5113/html5/thumbnails/58.jpg)
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?