Designidm C L P Revised

HYPERMEDIA CONCEPTUAL DESIGN: the IDM model

FRANCA GARZOTTO, PAOLO PAOLINI

OUTLINE• Preliminary concepts

– Defining design – The aspects informing design– User requirements– Channel, situation, and context

• Hypermedia design: main modeling dimensions• IDM – Interaction Dialogue Model: Basic concepts• C-IDM• L-IDM• P-IDM

Reference material: Paper• D. Bolchini and P. Paolini “Intercation Dialogue Model: A Design Technique for Multichannel Appplications” -

under publication at ACM Transaction on Multimedia

Munch’s web site http://www.munchundberlin.org

OUTLINE

• Preliminary concepts– Defining design – The aspects informing design– User requirements– Channel, situation, and context

• Hypermedia design: main dimensions• Design models for hypermedia applications• IDM – Interaction Dialogue Model: Basic concepts• C-IDM• L-IDM• P-IDM

Reference material: Paper• D. Bolchini and P. Paolini “Intercation Dialogue Model: A Design Technique for Multichannel Appplications” - under

publication at ACM Transaction on Multimedia


Preliminary concepts: What do we mean by “design”?

… many different things, depending on the discipline

From Enciclopaedia Britannica (vol 7, p. 298):

Design” (from the Latin designare = to mark out), is the PROCESS of developing plans or schemes; more particularly, a design may be a DEVELOPED plan or scheme, …, set forth as a drawing or model.

…..

“… A design is ordinarily conceived with a number of limiting factors in mind: the capacities of the material employed; ….; the effect of the end result on those who may see it, use it, or become involved in it.”

What does inform design?

• Many aspects:– Stakeholder(1) characteristics and needs– Context of use

(1) Stakeholder: any entity interested in the product (including end user, client, developers, …)

Understanding Requirements_1

• Who • Who are the users? Who are the stakeholders?

• Why • Why do they need/want the product?

• When• When do they use use the product? • During which activity?

• Where• Where do they use the product?

In summary: What scenarios does the product support?

A „story of use“ – a description of what the user would like to do with the

product, using which devices or materials, and in which situations or context of use

Scenario– User profile(s)– User motivations– Typical context(s) of use– Used device(s) or material(s)

Scenario

CHANNEL

What does inform hypermedia design?

• Hypermedia application= an interactive application perceived by the user as a network of multimedia nodes that (s)he can navigate by selecting links

• Adding new dimensions to the WHO, WHY, WHEN, WHERE aspects that inform the design: the characteristics of the fruition device

Premise

Web Applications are becoming multichannel, ubiquitous and interoperable

• Deployed on a variety of devices:• Desktop web• Pocket PCs• Tablet PCs• Palmtops• Cellular & smart phones• Interactive TV• Room screens• Kiosks• GPS navigators (embedded, portable, mobile)

• Anytime – anywhere – anymedia availability

• Interoperability– User can complete operations-transactions over different channels– E.G.start a reservation with a PC, complete it with a palm-top, get confirmation and reservation number

over cell phone– The application integrates different channel and support transitions between channels (cross-channel

experience)

Defining a channel

Device

System SW

Application

PhysicalChannel + Context

of Use

Channel =

Differences among channels

• Differences among channels may concern:

– Physical Channel• The technological features of the channel of delivery

– Context of use• The contextual & individual-social characteristics shaping

the way of interacting with the channel

Physical Channel - 1

• Screen– Resolution, size, angle/light reflection, color

combinations, …

• I/O mechanisms– Pointing devices

• Pen, touch, keystroke, audio

– Typing devices• Video keyboard, device keyboard, audio, external

keyboards

– Output• Visual, audio, tactile

Physical Channel - 2

• Connectivity– Availability

• Service affordance

– Reliability• Service stability

– Security• Capability of protecting data

• Performances– Throughput

– Storage capacity

Contexts of use - 1

• Environmental conditions– Indoor vs outdoors

• Heat, light, position, …

– Still or moving• Concentration capability, pointing precision,

– Standing vs sitting• Time affordance, distance from device, …

– City or remote location• Availability of service

– What surrounds the interaction

Contexts of use - 2

• Social circumstances– Individual use

• e.g. home, office, or pc lab

– Individual use close to other people• e.g. exhibition,

– Collaborative use• e.g. group visit

– …



• Hypermedia design: main modeling dimensions

• IDM – Interaction Dialogue Model: Basic concepts• C-IDM• L-IDM• P-IDM

Reference material: Paper• D. Bolchini and P. Paolini “Intercation Dialogue Model: A Design Technique for Multichannel Appplications” - under

publication at ACM Transaction on Multimedia


Why a design model?

• When designing an interactive multimedia experience, a model (a

language) can help to express, communicate and give shape to design ideas and decisions

• Our vision for a design model:– Easy to teach– Easy to learn for designers and other stakeholders– Usable– Lightweight in documentation– Offering few concepts to master the complexity– Effective for brainstorming ideas– Directly related to the requirements of the application

Hypermedia: Main modeling “dimensions”– Information (content)– Navigation (interaction) – Operation – Presentation

NAVIGATION/INTERACTION

OPERATION

CONTENT

PRESENTATION



• Hypermedia design: main modeling dimensions

• IDM – Interaction Dialogue Model: Basic concepts– C-IDM– L-IDM– P-IDM

Reference material: Paper• D. Bolchini and P. Paolini “Intercation Dialogue Model: A Design Technique for Multichannel Appplications” - under publication at ACM

Transaction on Multimedia


Designing dialogues

• Each use of the application makes a „dialogue“ happen

• The application is a „dialogue generator” – it serves for the actualization of a (large, but limited)

number of possible dialogues.

• The user can interact within the boundaries set by the dialogue designer

• Design means defining the rules for effective dialogues to take place

IDM – Interactive Dialogue Model

• IDM (Interactive Dialogue Model)– Joint effort by TEC-Lab (University of Lugano) and HOC

(Politecnico di Milano)– IDM is of the mature results of the WED (Web as Dialogue)

FNSRS project

• Basic assumption– The user experience is shaped as a „dialogue“ – Dialogues should be conceived and structured,

before detailing the technological architecture needed.

IDM in a nutshell• IDM allows to design a hypermedia application in

three basic steps:

• Conceptual IDM (or „content“ IDM)– Decide what is the dialogue about

• Logical IDM – Structure in detail how the dialogue works

• Page IDM– Decide how to support the dialogue with pages

Design example

• Website and PDA guide for the 2003 exhibition of Edvard Munch‘s prints, hosted at the State Museum in Berlin.– demonstrative application developed within the HELP project

(EU-funded, programme CULTURE, 2003)

• The website mainly aims at presenting the temporary exhibition

• The PDA mainly aims at supporting the user during on-site visit.

• www.munchundberlin.org

C-IDM

• What should be said?• What are the relevant changes of subjects to be

supported?• What are the possible different ways to organize

the dialogue subjects

These decisions should be taken during conceptual design or content design (supported by C-IDM primitives)

Basic primitives of C-IDM

• Topic

• Kind of Topic (sometimes called “Multiple Topic”)

• Relevant Relation (change of subject)

• Group of Topic

• Multiple Group of Topics

Conceptual IDM - primitives• What should be said?

–Topic–Multiple topic (Kind of Topic)

• What are the relevant changes of subjects to be supported?–Relevant relation

• How to organize the dialogue?–Group of topics–Multiple group of topics

Topic

• Something that can be the subject of conversation between the user and the interactive application

• What the application can speak about

E.g.

–“THE LIFE OF EDVARD MUNCH”

THE LIFE OF EDVARD MUNCH

Multiple topic or Kind of Topics

• A category of possible subjects of conversation

• E.g.–“technique”

–“print”

• “DRYPOINT” is an example of “technique”print

Relevant relation

• Change of subject, shift of topic

• Determines how the dialogue can switch from a multiple of topic to another one

• E.g.–“made with” is a possible change of subject relating any

PRINT to one TECHNIQUEprint technique

„made with“

Group of topic• Determines a specific set of topics, possible

subject of conversation–Crucial for inviting, guiding, intriguing and

capturing the user to the dialogue with the application

–Necessary to locate and access the content

• E.g.– MASTERPIECES– ALL PRINTS All Prints

Multiple group of topic

• Determines a family of group of topics–E.g.: “prints of a theme X”

• Each multiple group of topics has a corresponding ”higher-level” group of topics–E.g.: “all themes”

• allows to select the specific group of topics of interest (e.g.: “prints about theme “sickness”)

Prints of Theme XThemes

How to represent the above concepts for a specific application?

• Diagram (called C-IDM Schema or C-IDM Dialogue Map)

integrated with

• Textual descriptions and comments

EXAMPLE in our case study Munch und Berlin exhibition – www.munchundberlin.org

Kind of topic (multiple topic)

Topic

Group of topics (the arrow points to the kind topics that are grouped)

Multiple (parametric) group of topics (the arrow points to the kind topics that are grouped)

Relevant Relation

IDM – Notation for the graphic representation of C-IDM schemas

Print

Thematic Tour

Masterpieces

All prints

IDM dialogue MAP – conceptual

Themes

Munch und Berlin exhibition – www.munchundberlin.org

Technique

All techniques

Period of Life

Munch’s Life

Artistic Movement

Artist

Munch

Museum

Contacts

Credits

The Exhibition

Is Made with

Was used for

Was made during

Represented by

Belonging to

Influenced by

Room

Contains

Refers to

Events

Textual description

(comments in italics)

Topics:• EXHIBITION: an introduction to the exhibition• MUNCH: a brief introduction to Edvard Munch• CONTACT US: relevant contacts for this web siteKinds Of Topic:• PRINT: the description of a print of the exhibition• PERIOD OF LIFE: the description of a specific period of Munch’s life• ARTIST: the description of an artist, living during Munch’s time• ARTISTIC MOVEMENT: the description of a relevant artistic movement

that may have influenced Munch• TECHNIQUE: description of a technique used by Munch for his prints

Print

Thematic Tour

Masterpieces

All prints

IDM dialogue MAP – conceptual

Themes


Technique

All techniques

Period of Life

Munch’s Life

Artistic Movement

Artist

Munch

Museum

Contacts

Credits

The Exhibition

Is Made with

Was used for

Was made during

Represented by

Belonging to

Influenced by

Room

Contains

Refers to

Events

CHANGES OF SUBJECT (RELEVANT RELATIONS)

CREATED IN: print period of life; if a print is the subject, you can switch to the corresponding period of life

MADE WITH: print technique; if a print is the subject, you can switch to the corresponding technique

HAS BEEN USED FOR: technique prints; if a technique is the subject, you can switch to the prints made with it

CONTEMPORARY: period of life artistic movement; if a period of life is the subject, you can switch to the artistic movements active at the same time

ACTIVE IN: artistic movement artist; if an artistic movement is the subject, you can switch to the artists being part of it

GROUPS OF TOPICS:MASTERPIECES: those prints that the curator consider the most representatives of the

exhibitionALL PRINTS: the complete set of the prints in the exhibitionTECHNIQUES: the complete set of techniques used by MunchMUNCH’S LIFE: the complete set of periods of life of Munch

MULTIPLE GROUPS OF TOPICS:• PRINTS OF THE SAME THEME T: the set of prints of theme T

Conceptual IDM – wrap up

• Topic (e.g. Munch’s life)

• Multiple topic or Kind of Topic (e.g. an artwork)

• Relevant relation (or topic shift, e.g. artwork MADE BY Munch)

• Group of topic (starting points of the dialogue, e.g. Artworks of the theme “Landscapes”)

• Multiple group of topic (e.g. artworks of theme “X”)

L-IDM: answering 4 key questions

• What should be said about each (kind of) topic? (Which are the self-contained units of dialogue about a topic (of a given kind)?)

• What should be said about each (multiple) group of topics?

• How does the dialogue flow– Among the units of dialogue about a topic– From one topic to another– Within a (multiple) group of topics

• What should be said when there are multiple possibilities of switiching from one topic to other related ones?

If we see interaction as a dialogue, we can say that L-IDM is about the design of the NAVIGATION-BASED INTERACTION

Logical IDM – Primitives_1• What should be said about a “Print”, and how?

–(Representative) Dialogue act and Structural Strategy• How to shift from “Print” to “Technique”?

–Transition act and Transition strategy• How to introduce the “Masterpieces” and proceed to talk about each

of them?

–Introductory act and Subject Strategy• How to introduce “Prints of theme X” and proceed to talk about each

of them?

–Multiple Introductory act and Subject Strategy

In the following slides we will discuss these concepts and how they relate to the concepts of C-IDM

L-IDM – Primitives 2

DIALOGUE/INTERACTION CONCEPTS RELATED TO TOPICS AND KINDS OF TOPICS

• Dialogue act– an atomic unit of dialogue about a topic (of a given kind)– The content of a topic is either a single dialogue act, or several ones

• Representative Dialogue act (or Default Dialogue Act)– A dialogue act from which the “conversation” about a given topic (of a given

kind) tipically starts

• Structural strategy– How the dialogue flows among the dialogue acts of the same topics (see

next slides)

L-IDM – Primitives_3

CONCEPTS RELATED TO (MULTIPLE) GROUPS OF TOPICS

• Introductory Act– an atomic unit of dialogue about a group of topics

• Multiple Introductionary Act– an atomic unit of dialogue about a multiple group of topics

• Subject Strategy – how the dialogue flows from an introductory act of a (multiple) group

of topics and the dialogue acts of the topics of the group (see next slides)

L-IDM Basic concepts 3

CONCEPTS RELATED TO RELEVANT RELATIONSHIP

• Transition Act– an atomic unit of dialogue that supports a change of topic

(according to some Relevant Relationship) from one topic to several ones

• Cardinality– how many instances we expect to have for a relevant relationship

• Transition Strategy – how the dialogue flows from the dialogue acts of a topic and the

dialogue acts of a RELATED topic

L-IDM – Basic concepts_4

Concepts related to the operations user can invoke

• Operation Act– a unit of dialogue that supports the execution of an operation– Users „input“ commands and or/ information, not only request

information

L-IDM – Basic concepts_5

Strategies: the flows of dialogue, in situations of branching, i.e., when the dialogue can continue proceed from one “point” to multiple directions

Dialogues flows follow a limited set of PATTERNS

Defining a strategy means defining the pattern for a dialogue flow.

• Structural Strategy: is defined by – The pattern of dialogue flow among dialogue acts of the same topics

• Transition Strategy: is defined by – The pattern of dialogue flow from a dialogue act of a topic (of a given kind) to the

dialogue acts of topics related by the same Relevant Relationship (needed for 1-N relationships)

• Subject Strategy: is defined by – The pattern of dialogue flow among an introductory act and the dialogue acts of a

group of topics

“Schemas” of flows of dialogues in groups of “elements” (dialogue acts, introductory acts or transition acts)

Most common patterns:• Index• Guided Tour• Circular Guided Tour (2 versions)• All-to-all• Index + (circular) guided tour

PATTERNS

Item 1 Item 2 Item n. . .

Patterns_1

Guided Tour (GT)

Item 1 Item 2 Item n

. . .

.

2

4

.

Circular Guided Tour (C GT) – version 1

Circular Guided Tour (C GT) – version 2

(Note: a combination of the 2 versions is also possible)

Item 1 Item 2 Item n

.

2

3


Patterns_2

Index (I)

Index + Guided Tour (I+GT)



Patterns_3

ALL-To-ALL (A)

How to represent L-IDM concepts for a specific application?

• Diagram (called L-IDM Schema)

integrated with

• Textual descriptions and comments: – The detailed content of each act should be defined textually (not

graphically)

– The patterns associated to each strategy should be defined textually (not graphically)

• associate the pattern names (e.g., Index, (Circular) Guided tour, Index + Guided tour, All to all) to Introductory acts and Relevant Relationships or Transition Acts

L-IDM – Notation for the graphic representation of L-IDM schemas

Dialogue Act

Representative Dialogue Act

Transition Act

Introductory Act

Relevant Relationship: if 1-N, it must be associated to a Transition Strategy if (pattern)

XXX

YYY

Multiple Introductory Act

Operation Act

Structural Strategy

[X, Y] Cardinality X and Y can be 0 or 1 or N

Subject Strategy

Print

Thematic Tour

Masterpieces

All prints

IDM dialogue map – logical (web version)

Themes


Technique

All techniques

Period of Life

Munch’s Life

Artistic Movement

Artist

Munch

Museum

ContactsCredits

The Exhibition

Listen to this website

Is Made with1:1

Was used for1:n

Was made during1:1

Represented by1:n

Belonging to1:1

Influenced by0:1

Introduction

Description

Big Image

Description

Encounters

Photo Gallery

Historicalbackground

DistinctiveFeatures

Explanation

Essential Profile

Historicalbackground

Bibliography

Munch and Berlin

RepresentativeWork

Practical information

History

Locate us

KulturforumWelcome

Practicalinformation

The collection

Listen to this site

EnhanchedAccessibility

Try yourself

Get a demo

About this project

CreditsContacts

MyTour - Remove print•Re-Order prints

Events

Event•Add / remove tickets / reservation for press events (Parameters: N° of tickets)•View my s.c.•Undo order•Check-out Shopping Cart

•Add print

Examples of Textual Specification

Dialogue Acts for Topics:EXHIBITION• Welcome: <exhibition_title; representative_image; short

description>

Dialogue Acts for kinds of topics:PRINT:• Introduction <title, image, short description, technical data

(e.g., date, size, …)>• Big Image <large image, caption, technical data>• Description: <title, image, long description, technical data

(e.g., date, size, …)>

TRANSITION ACTS:

“Represented by”– Relevant relationship: From Artistic Movement to Artist: – Content: <list of artists: name, years>– Associated transition strategy: Index

INTRODUCTORY ACTS:

Masterpieces • Content: <intro_to_masterpiecs (text), list of prints previews (a

thumbnail, a title)>• Associated subject strategy: Index+Guided Tour

MULTIPLE INTRODUCTORY ACTS:PRINTS OF THE SAME THEME: • Content: <list of the print previews (thumbnail, print nume, title>• Associated subject strategy: Index + Guided Tour

P-IDM: From Logical Design to Pages (PAGE DESIGN)

• Page: The unit of display (the “channel” of dialogue)

• P-IDM: the conceptual structure of pages– Which content/conversation units?– Which links/tools for changing the current conversation unit?

• Page design shapes the logical component of the page

• It is NOT layout design

• It is NOT graphic design

Default Mapping L-IDMP-IDM• Dialogue act Page• Introductory act Page• (Important) Topic Landmark• (Important) Group of Topic Landmark• Transition Act may become a page (or a set of transition

links inside the page)• 1-1 Relevant relationship Transition or semantic links• Strategy Links

– Structural Links (induced by structural strategy)– Semantic Link (induced by transition strategy)– Collection (or group) links (induced by subject strategy)

How to decide which content to put in a page?

• The content of the corresponding act

+

• Some orientation info– To give the sense of the “context of the discourse”

How to decide which links to put in a page

• If the page correspond to a dialogue act:– Structural links – according to the structural strategy– Transition links: for each relationship in which it is involved as source

• 1-1 relationship of the topic: one link • 1-N relationships: see transition strategy

– Group of topics links: • For each group of topic the dialogue act belongs to, all links that make

sense according to the subject strategy of the group

• If the page correspond to a transition act: – Transition links: see transition strategy

• If the page correspond to an introductory act:– all links that make sense according to the subject strategy of the

group• IN ALL PAGES: LANDMARKS (links to “pages” to which the

user may be interested to jump to at any time)

In practice…

• Use the following “schemas” or “templates” to describe your IDM pages

• For each page, fill the template with – a sample of content (i.e., some fictitius but realistic

data) for the correspondining dialogue act, transition act, introductory act, defined in your L-IDM schema

– the proper links

< Fixed content: logo, payoff, banners… >

< Group links >

< Landmarks >

< Page title >

< Page type name > - < Page instance >

Structural link 1Structural link 2…Structural link n

Transition link 1Transition link 2…Transition link n

< Orientation info >

< Write your content here (images, text…) >

Page schema for a dialogue act derived from Kind of topic

< Kind of Topic name > - < Dialogue act name>


< Landmarks >

L’urlo

•Big Image•Description

•In che periodo e’ stata creata^•Quale e’ la sua tecnica pittorica

Sei nella sezione “Stampe”

1923-194DrypointTitolo: L’urlo

Magnifica stampa del primo periodo della vita di munch…..

<Print> - < Introduction>

Transition Links

Structural Links

Group links Sei nel gruppo “masterpieces”

HOME CONTATTI CREDITI MUNCH TUTTE LE OPERE IL MUSEO ONLINE SHOP

EXAMPLE (built with the class during the lesson….)


< Group links >

< Landmarks >

< Page title >

< Page type name > - < Instance name >

Structural link 1Structural link 2…Structural link n



Page schema for a dialogue act derived from Single topic

< Topic name > - < Dialogue act name>


< Semantic links (to the target of the relationship, i.e., the pages for the related topics)>

< Landmarks >

< Page title >



Page schema for a Transition act< Transition act name>

< Semantic link (to the source of the relationship, i.e., the page from which the “relationship?” has been invoked)>



< Landmarks >

Le stampe con tecnica Puntasecca

Page for a Transition act

Torna alla tecnica Puntasecca

Il pianto 1911

< Semantic links >L’urlo, 1921



< Other Group links >

< Landmarks >

< Page title >



Page schema for an Introductory act

(Multiple) group name name > - < Introductory act name>

< Group links >



< Landmarks >

I capolavori di questa esposizione


Il pianto 1911

Page for an Introductory act

Masterpieces - Overview

< Group links >

Questa esposizione presenta tra i capolavori della produzioen gfrafica di E. Munch…

L’urlo, 1921

HOME CONTATTI CREDITI MUNCH TUTTE LE OPERE IL MUSEO ONLINE SHOP



Vai a tutti i temi possibili Vail al tema precedente Vai al tema successivo

< Landmarks >

Le stampe di tema “Amore e Morte”

>

Il pianto 1911

Page for an Introductory actStampe per tema X - Overview

< Group links >L’urlo, 1921

il tema amore e morte …..



I temi delle stampe di questa esposizione

< Landmarks >

Le stampe di tema “Amore e Morte”

>

Il pianto 1911

Introductory actStampe per tema X - Overview

< Group links >L’urlo, 1921

il tema amore e morte …..• Amore e morte •Il Paesaggio •La giovinezza •La malattia •…..


Exercise

• Identify the discussed concepts in the following web site: http://www.rijksmuseum.nl/

• “Reverse-design” a portion of the above site (warning: it’s huge!)

Designidm C L P Revised

Design

Transcript of Designidm C L P Revised