A presentation given for MAS.671, New Paradigms in Human Computer Interaction, at the Massachusetts Institute of Technology by Solomon Bisker

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

20. challengesdesigner
fresnel as
Data design is often in the context of a larger
page design, and the design of unrelated data

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