interaction design for the semantic...

1

Interaction Design for the Semantic Web

Lynda Hardman http://www.cwi.nl/~lynda/courses/USI08/

CWI, Interactive Information Access UvA, Institute for Informatics

2

Presentation of Google results: text

2

3

Presentation of Google results: image

4

3

5

One size doesn’t fit all

Reflection on development of different media types

• Image • Text • Audio • Video

6

4

7

We had images

Cave Chauvet-Pont-D’Arc © Jean Clottes

8

5

9

And then we developed text

Dead Sea scrolls

Newspapers

Recording sound

10

Thomas Edison Phonograph, 1877 http://www.firstsounds.org/sounds/scott.php

6

11

Visual (moving images)

12

Visual (moving images)

7

“Media” types are flourishing

•  Personal computers –  spreadsheet – word processor

• Web –  browser –  “Google” –  link-based search algorithms

• Web 2.0 –  blogs –  facebook –  (linked data)

13

Why can’t “we” design new technology? •  users

–  unable to see beyond current technology

•  technologists –  busy developing incremental, complex technology –  new technology enables new/unpredictable functionality –  don’t know how to talk users about their real needs

•  interface designers –  new solutions close to existing solutions

•  (new media) artists –  “random” exploration of interaction space – driven by

novel/creative but not “useful”

14

8

The Problem

• The semantic web is new technology – and is developing rapidly

• We don’t know how users want to use it • We don’t know how to combine pieces of

media and knowledge to help users

15

16

The Context

• Web – open and linked –  is with us now

• Semantic Web – open and richly linked –  is under development – particularly for machine processing

• User’s information seeking task

9

17

Interaction Design for the SW •  Long term goal to find and present information to end-users

–  In a way that is useful to them •  You understand interfaces and how to design them by hand.

–  How can machines help us with the details? •  We can capture semantics about information design for re-use.

–  Not there yet. •  We can use information sources available on the SW and make them

available to end-users. –  That’s what much of this week is about.

•  Then we need to deal with: –  Selecting a sub-set (semantic search) –  Grouping and ordering (linking to extra) for presentation.

(Start with "data" based structuring and move to discourse based.) •  New search functionality

–  beyond fact-finding •  And then we need to understand what good new interfaces are.

–  Evaluating an existing interface is relatively easy

18

Overview of topics

• Dependencies in multimedia design • Semantics for improving interaction • NewsML 2.0: semantics of news media

assets • Vox Populi: creating argument structure

with video fragments

10

19

20

Three ingredients

Content

11

21

Content of example

Clair-obscur (Frans) en chiaroscuro (Italiaans) betekenen 'licht-donker'. Beide termen worden gebruikt om sterke licht-donkercontrasten in schilderijen, tekeningen en prenten aan te duiden. Hoewel het effect al eerder werd toegepast, is de term pas sinds het einde van de 16de eeuw in zwang. De oorsprong van het woord ligt in Italië. De schilder Caravaggio (1573-1610) maakte het chiaroscuro-effect tot zijn handelsmerk. Hij was een meester in het schilderen van donkere taferelen met één felle lichtbundel.

22

Three ingredients

Content

Presentation structure

12

23

Presentation structure of example

Clair-obscur (Frans) en chiaroscuro (Italiaans) betekenen 'licht-donker'. Beide termen worden gebruikt om sterke licht-donkercontrasten in schilderijen, tekeningen en prenten aan te duiden. Hoewel het effect al eerder werd toegepast, is de term pas sinds het einde van de 16de eeuw in zwang. De oorsprong van het woord ligt in Italië. De schilder Caravaggio (1573-1610) maakte het chiaroscuro-effect tot zijn handelsmerk. Hij was een meester in het schilderen van donkere taferelen met één felle lichtbundel.

Chiaroscuro & Rembrandt Harmensz. Van Rijn

description examples

title

24

Three ingredients

Content


Aesthetics

abcdefghij abcdefghijklmn ABCDEFGHIJK abcdefghijklm abcdefghijklm

13

25

Aesthetics of example

Colours

Fonts

Layout

Colours

26

Design dependencies

Content


Aesthetics

abcdefghij abcdefghijk ABCDEFGHIJK abcdefghijk abcdefghijk

14

27

Presentation Structure depends on Layout

description

title

title

description


title


title

28

Style Depends on Content

Chiaroscuro & Rembrandt

The Stone Bridge (1638)

Chiaroscuro & Rembrandt

The Stone Bridge (1638)

15

29

Rembrandt

Caravaggists

Presentation structure depends on content

chiaroscuro

1631 1628

1638

1623

1628

30

1631 1628 1638 1623 1628

Example Presentation Structure

Rembrandt

Chiaroscuro

Caravaggists

16

31

Different presentation styles

• Large amount of information • High interaction

32

17

33

34

18

35

36

19

37

Different presentation styles

• Entertainment rather than information • Low interaction

38

20

39

40

21

41

42

Flexible interfaces to MM on SW

•  Creating multimedia presentations requires –  understanding the message of the presentation

–  knowing specifications of use context

–  taking design dependencies into account

•  The SW can help by – making domain and design knowledge explicit

–  deploying rules that use this knowledge

–  to generate richly annotated hyper/multimedia presentations

interaction design for the semantic...

Documents