Gebruikersgericht Ontwerpen

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

Opgelegde sequentie

http://textism.com/writing/

“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?