Wk08 Strukturer

StrukturerWK’08 - uge 41Christian Winther Bech

[email protected]

Strukturer- eller informationsarkitektur og interaktionsdesign

InteraktionsdesignUser behavior/system limitations

..altså brugeren i fokus

4

Strukturer på websites

- Sekvens

- Hierarki

- Grid/net/matrix (Veen - Garrett)

- Stackonomy (Veen

- Web (WSG)/rhizome (Deleuze)/organic (Garrett

5

Lynch & Hortons Web Style Guide

Information that naturally flows as a narrative, time line, or in logical order is ideal for sequential

treatment.

Grids are a good way to correlate variables, such as a time line versus historical information in a

number of standard categories such as "events," "technology," "culture," etc.

Information hierarchies are one of the best ways to organize complex bodies of information.

Hierarchical organization schemes are particularly well-suited to Web sites, because Web sites should always be organized as off-shoots of a single home

page.

Webs work best for small sites dominated by lists of links, aimed at highly educated or experienced users

looking for further education or enrichment.

(Web Style Guide)

6

Sekvens

http://tuborg.dk/

7

Hierarki

http://www.aros.dk

8

Hierarki

9

Grid/net

10

Grid/net/matrix

12

Netværk/rhizome/organic

http://archive.hi-res.net/TheThirdPlace/

13

Netværk/rhizome

14

Strukturer og websitets formål

Information that naturally flows as a narrative, time line, or in logical order is

ideal for sequential treatment.

Grids are a good way to correlate variables, such as a time line versus historical information in a number of

standard categories such as "events," "technology," "culture," etc.

Information hierarchies are one of the best ways to organize complex bodies

of information. Hierarchical organization schemes are particularly

well-suited to Web sites, because Web sites should always be organized as off-

shoots of a single home page.

Webs work best for small sites dominated by lists of links, aimed at

highly educated or experienced users looking for further education or

enrichment.

hvad med..?

Mark Pearrow: The Card Sort

Anvendes til strukturering af websites - herunder indplacering af nye sider

Testdeltagerne må helst ikke kende sitet detaljeret

Kan anvendes med overskriftskort (heading cards)

Indikerer under hvilken heading brugeren forventer at finde informationen

Eller uden overskriftskort

Testpersonen inddeler informationen (i headings)

Øvelse: Omvendt Card Sort

Moesgård Museum

Udstillinger

Aktiviteter

Herregård, park og skov

Undervisning

Om museet

http://www.moesmus.dk/

Moesmus-card sort:Menupunkter alfabetisk

Herregården Moesgård, Illerup Ådal, kalender, netudstillinger, Pilefestivalen, Runehallen, skoletjenesten, Stavkirken, museets udbygning, UNESCO-samlingerne, Vikingetræffet

Organizing information

1. Divide your content into logical units

2. Establish a hierarchy of importance among the units

3. Use the hierarchy to structure relations among units

4. Build a site that closely follows your information structure

5. Analyze the functional and aesthetic success of your system

Typer af sites i flg. WSG

Menu home pages (oversigt)

News-oriented home pages (indhold)

Path-based home pages (portal)

Splash screens (flash)

hvad med..?

23

Relavansteori (kognitivisme)

Kommunikativ sammenhæng som en kognitiv akt hos læseren/lytteren

Implicatures

Potentielle, logiske sammenhænge

Kode/programmere budskabet

Information vs. lyrisk

Susana Tosca

24

• Kun beskrivende links

• Få potentielle, logiske sammenhænge

• Destinationen skal være klar

• Lav navigatoriske hjælpemidler

• Brug fx et indeks til at strukturere

Informative links

25

Udtryksfulde links

Mange vage, potentielle sammenhænge

Leg med forskellige måder at lave links på

Lad læseren opdage strukturen

Leg med læserens forventninger. Beløn med indhold.

Lyriske links

Og videre..

Tags - folksonomies

Cory Doctorow: Metacrap: Putting the torch to seven straw-men of the meta-utopia: http://www.well.com/~doctorow/metacrap.htm

Web 3.0/Semantic web: Tim Berners-Lee: http://www.sciam.com/article.cfm?id=the-semantic-web