Designidm C L P Revised
-
Upload
guest7ff51a -
Category
Design
-
view
698 -
download
2
Transcript of 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
Munch’s web site http://www.munchundberlin.org
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
– …
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
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
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
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
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
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
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
Item 1 Item 2 Item n. . .
Patterns_2
Index (I)
Index + Guided Tour (I+GT)
Item 1 Item 2 Item n. . .
Item 1 Item 2 Item n. . .
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
Thematic Tour
Masterpieces
All prints
IDM dialogue map – logical (web version)
Themes
Munch und Berlin exhibition – www.munchundberlin.org
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>
< Fixed content: logo, payoff, banners… >
< 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….)
< Fixed content: logo, payoff, banners… >
< Group links >
< Landmarks >
< Page title >
< Page type name > - < Instance name >
Structural link 1Structural link 2…Structural link n
< Orientation info >
< Write your content here (images, text…) >
Page schema for a dialogue act derived from Single topic
< Topic name > - < Dialogue act name>
< Fixed content: logo, payoff, banners… >
< Semantic links (to the target of the relationship, i.e., the pages for the related topics)>
< Landmarks >
< Page title >
< Page type name > - < Instance name >
< Write your content here (images, text…) >
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)>
< Orientation info >
< Fixed content: logo, payoff, banners… >
< Landmarks >
Le stampe con tecnica Puntasecca
Page for a Transition act
Torna alla tecnica Puntasecca
Il pianto 1911
< Semantic links >L’urlo, 1921
EXAMPLE (built with the class during the lesson….)
< Fixed content: logo, payoff, banners… >
< Other Group links >
< Landmarks >
< Page title >
< Page type name > - < Instance name >
< Write your content here (images, text…) >
Page schema for an Introductory act
(Multiple) group name name > - < Introductory act name>
< Group links >
< Orientation info >
< Fixed content: logo, payoff, banners… >
< Landmarks >
I capolavori di questa esposizione
< Page type name > - < Instance name >
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
EXAMPLE (built with the class during the lesson….)
< Fixed content: logo, payoff, banners… >
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 …..
EXAMPLE (built with the class during the lesson….)
< Fixed content: logo, payoff, banners… >
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 •…..
EXAMPLE (built with the class during the lesson….)
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!)