1. common sense design
bringing common sense design
to the semantic web
solomon bisker
new paradigms in hci
april eleventh
two thousand and seven
2. up front
_________________
the semantic web is…
…a platform for computer reasoning
…but not a substitute for human
knowledge
So, we ask, how can we leverage human
knowledge?
3. crash course: semantic web
semantic web is one of relationships between
facts that can be understood by computers
we can say: <subject> <verb> <object>
pat is a person
a person is a mammal
a mammal is a …
and so on, and so on, and so on…
4. crash course: ontologies
data is swell…but ontologies are the lingua franca
of the semantic web
without ontologies with ontologies
<#pat> <#isA> <#Person> <#pat> <rdfs:isA> <foaf:Person>
to me and you: to me and you:
pat is a person pat conforms to foaf:Person
to me: a person has a name foaf tells me and you: a person has a name
a person has a body names are text
a body has a neck a person has a body
a body has a torso a body has a neck
to you: a body has a torso
a person has a name
…
a person has a neck
a person has a torso
5. crash course: fresnel
crash course: fresnel
fresnel is, “simply put”, a presentation
language for data that conforms to ontologies
6. why fresnel:
why fresnel:
fresnel lets
designers define
UI’s that “mold” to
the structure of
their content
…and since it’s
semantic rdf data,
the data can come
from anywhere
7. why fresnel:
why fresnel:
fresnel is data-centric
fresnel fragments are “copy and paste-able”
fresnel is as flexible as CSS
why (not (just) fresnel:
why not just) fresnel:
fresnel is not visual thinking
:personLabelLens rdf:type fresnel:Lens ;
fresnel:purpose fresnel:defaultLens ;
fresnel:classLensDomain foaf:Person ;
fresnel:showProperties
( foaf:name ph:tel_sha1sum foaf:mbox ) ;
fresnel:group :gr .
8. fresnel as a designer
fresnel as designer
fresnel lets you create custom design
situations for each data scenario…
…but, fails at helping you build a
consistent, solid design across
scenarios
9. fresnel as a designer
fresnel as designer
November, 2006 - Gus Gollings proposes the
“Common Sense Design Agent”, modeled on Push
Singh’s Emotional Machine
Goal: Dynamically create Fresnel lenses based on:
-structure of data (RDF)
-the goal of the user (context)
-“common sense design” principles
The first two are fine…
…but what is “common sense design”!?
10. my projectdesigner
fresnel as (finally):
The Idea:
PEOPLE KNOW GOOD DESIGN
WHEN THEY SEE IT
(even if they’ve got no idea why they like it)
Can we build a corpus of common sense
design…
…by letting designers point out good and bad
examples?
11. one idea: designer
fresnel as
Leverage Thresher
(Hogue-Google, Karger-CSAIL - 2005)
*When you want to mark
data as having
“common structure”…
…you mark it as a
“wrapper”
12. one idea: designer
fresnel as
*Then data of similar
structure can match
this “wrapper”
(via a very cute DOM edit distance
algorithm)…
*…and can be used
semantically (“Chat
with”, “Remind me to
read this”, etc…)
13. my proposal:
fresnel as designer
Start small: highlight a chunk of data, pull out
the associated CSS tags
14. my proposal:
fresnel as designer
*When you find a
presentation you
like, create a
wrapper for the
data’s structure…
15. my proposal:
fresnel as designer
Now the agent looks at design relationships
to similar data on the same page…
16. my proposal:
fresnel as designer
…as well as semantically similar data on other
sites entirely.
17. my proposal:
fresnel as designer
Designers can rate the design of a data
instance subjectively….
“Computer, this
presentation of
‘Contact Info’ data
is
*a 8 or 9 in terms
of cleanliness
*a 10 in terms of
readablity
*a 7 in terms of
formality…”
18. my proposal:
fresnel as designer
…or selection of larger design elements can
point out “the big picture”
“Computer,
the style of
‘Contact Info’
data here
comes from
THIS [short,
wide]
presentation”
19. scenario designer
fresnel as
Kim wants to generate a Fresnel display for
her address data…
“Computer, this
is the sort of
data I want to
display”
“Computer, I like
this design here,
and that one,
but not…”
Design Agent looks at
*White Space *Color *Contrast *Font selection
*Relationship in size between semantic items
*Relationship in focus (color, placement) between semantic items
*Relationship between multiple instances
…
produces Fresnel-based options for the user
and
21. challengesdesigner
fresnel as
How can designers explain related data
separated visually?
(In this case, data has a “focus” style element)
“Computer, this data…”
“…is tied structurally
to this data”
22. challenges:
fresnel as designer
What about highly abstracted data in a pure image
form?
Can we analyze the image itself to relate image
elements to corresponding data structure?
(In SVG, yes.
In pixel-based formats…have fun.)
23. fin(ally) as designer
fresnel
Questions?
Gollings, G. Common Sense Design: Aided Visualisation of the Semantic Web. (Conference Paper)
SWUI Workshop 2006.
Pietriga, E.: http://www.w3.org/2005/04/fresnel-info/fsl-20050726 (2005) Fresnel Selector Language for
RDF.
Bizer, C., Lee, R., Pietriga, E.: Fresnel — A Browser-Independent Presentation Vocabulary for RDF. In:
Proceedings of the Second International Workshop on Interaction Design and the Semantic Web, Galway,
Ireland (2005)
Thresher: Automating the Unwrapping of Semantic Content from the World Wide Web (Conference
Paper) WWW 2005 Andrew Hogue and David Karger
Quan, D., Huynh, D., Karger, D.R.: Haystack: A platform for authoring end user semantic web
applications. In: 2nd International Semantic Web Conference (ISWC). (2003) 738–753