Embed Size (px)
Citation preview
Making good websites:planning
& information architecture
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.
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.
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
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
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
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.
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/)
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
Thrustworthiness
• Eerste indruk telt• Identificeer jezelf• Vermeld je bronnen» Latere les
Usability: gebruiksgemak: ergonomie
• hangt af van de vaardigheden van je gebruikers
• gebruiksgemak kan je makkelijk testen
Usability >> Beauty
• anticipeer op het gebruik van je web site• user-centred design
Convention >> Originality
Het Webdesign Stappenplan
Enkele bronnen: •Web Style Guide http://webstyleguide.com/wsg3/index.html• Douglas Bowman, A Design Process Revealed
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/
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
Ontwikkelen: Structuur schetsen
Vooraf: • alle inhoud verzamelen • indelen in secties • met bijhorende activiteitenVisuele voorstelling:• boomdiagram
Schets het grondplan
• Teken site-structuur– Flowchart of sitemap
Voordeel van boomdiagram
• overzicht• duidelijke labels plakken op alle onderdelen • commentaar vragen van buitenstaanders • goede balans en diepte vinden voor de
verschillende secties
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.
Duidelijke labels
• Kort en trefzeker• Vermijd restcategorieën
– “verdere info” – “allerlei”
Het aantal knoppen
• De labels voor de hoofdonderdelen worden de belangrijkste navigatieknoppen.
• Meer dan acht knoppen in een navigatiebalk = onoverzichtelijk.
Klikdiepte
• Alle belangrijke onderdelen mogen niet verder dan twee keer klikken van de eerste pagina verwijderd zitten.
Software voor diagrammen
– MS Visio– MS Powerpoint– Inspiration
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/
Grafisch design
• Kleurenpalet• Lettertypes• Grafische elementen
Maquette of prototype • Integreert stramien met grafisch design
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.
Enkele site types
• Portaal• Museum
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/
Portaalvoorbeeld
Museum
1. Tentoonstellingen 2. Shop 3. Bezoekersinfo 4. Lidmaatschap, de “vrienden van museum x” 5. Educatieve afdeling
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
Navigatie is cruciaal
• browsen: geen notie van schaal, richting, locatie
bv: http://www.w3.org/1998/02/Potential.html http://www.w3.org/
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
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
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
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
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
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
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
Verder...
• Page name: Verschijnt prominent, als titel vlakbij de unieke inhoud van de pagina.
• "You are here" indicator– zie: bread crumbs, tabs, ...
Veelvoorkomende navigatieoplossingen
• Tabbladen• Rondleiding• “Bread Crumbs”• “Deurmat”
Tabbladen
“Bread Crumbs”
Probleem: weg vinden in grote hiërarchische informatiestructuur
Oplossing:
• een pad van tekstlinks die toelaten “terug te springen” naar eerdere niveau’s
“Deurmat”
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
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
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
Site ID You are here indicator:section level
SectionsSearch
Advertisement
Subsections
Page name
Advertisement
Local navigation
you
are
here
in
dica
tor
Feature promo
Site identity
Site content:sections
Site features
Content promo's Where to start: Today's agenda
Site features
search
Sections Subsections
Featuressearch
UtilitiesContent promos
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?
