With semantic technology growth we have seen more questions about designing interactions and visualizations. Some of those questions can be answered by adopting interesting interaction styles from existing sites. Other design questions require considering the unique behaviors of semantically-enabled data, relationships and interactions. Participants provided example sites/applications to share in discussion. Presented at Semantic Technology Conference, June 2011

1. Show, Tell, Explore…
Semantic Web Interface Design
Duane Degler & Jasmin Phua
Design for Context
www.DesignForContext.com
www.DesignForSemanticWeb.com
Submitted URLs from participants: www.designforsemanticweb.com/shareurl
Examples we’ve collected previously: www.designforcontext.com/examples
© Degler/Phua, Design for Context. 6.6.2011 Slide 1

2. Today
 Goals
 Perspectives
• On the Semantic Web
• On Design
 We explore examples together
• Ask questions
• Propose interesting sites/applications
• Share what you’re working on
• We discuss the design implications and techniques
We talk We all talk
(briefly) (longer)
© Degler/Phua, Design for Context. 6.6.2011 Slide 2

3. Contributing to the exploration
 Provide examples: www.DesignForSemanticWeb.com/shareurl
 Discussion
• Be involved
• Be positive
© Degler/Phua, Design for Context. 6.6.2011 Slide 3

4. Perspective
on
Semantic Technologies and Design
© Degler/Phua, Design for Context. 6.6.2011 Slide 4

5. Context matters
Contextual mistakes / anomalies destroy trust
© Degler/Phua, Design for Context. 6.6.2011 Slide 5

6. The Context Web  User Experience
• Relevant
• Integrated
• Illuminating
• Personal
Data experience

• Social
• Shareable structures
• Open Linked Data
• Mobile
• Models that represent data domains • Location-aware
• Increasing number of tools for data • Situated
display, translation and manipulation
• Temporal
 Design experience • Multi-modal
• Flexible and fluid interactions
• Platform independence
and integration
• Knowledge of users and their
patterns of use
• Methods focused on context
and relevance-awareness
© Degler/Phua, Design for Context. 6.6.2011 Slide 6

7. Technology is not a barrier
© Degler/Phua, Design for Context. 6.6.2011 Slide 7

8. Can our interactions be…
 Seamless – User goals and tasks are facilitated more easily, no
matter what technologies and applications involved
 Frictionless – Data is free to move between applications and uses
as needed
But we need to design in…
 The ability to easily manipulate an interface to respond to a user’s
situation and support user, organizational, and societal goals
 The ability to extend and change underlying model(s) that drive
interaction, to remain relevant to users
© Degler/Phua, Design for Context. 6.6.2011 Slide 8

9. Semantic Web / Linked Data
Powerful advantages for design
from one simple capability…
(direction)
Subject Object
and Insight (context)
Naming the lines
© Degler/Phua, Design for Context. 6.6.2011 Slide 9

10. Person
Is author of…
Spoke at…
Book
Conference
Sold at…
Joined…
Sponsored…
Org
Collaborates with… Is author of…
Chaired…
Psych
Published by… Founded…
Belongs to… Studied…
Person
Plays…
Is author of… Article
Person Sports
© Degler/Phua, Design for Context. 6.6.2011 Slide 10

11. My diffuse self on the disconnected Web…
Photos I’ve My recorded
My brief taken thoughts (in public)
musings
My recorded
My comments thoughts (in private)
on others’ work
Photos with My profiles My digital
me in them (recorded patterns) “footprints”
My
presentations My profiles
My photos with
(professional)
others’ in them
My “status”
musings My written
My profiles
thoughts
(personal)
All the stuff I
don’t know about
Mentions of
me by others
© D. Degler, Design for Context. 4.2.2011 Slide 11

12. User goals… outside the system, but facilitated by the system
Situation
Experience
Expectations Platforms
Mental
models
Information
© Degler/Phua, Design for Context. 6.6.2011 Slide 12

13. The “Magic” Behind Usable Design
Understanding Designing a
the needs solution that works
Users Brainstorm
Design
Goals ITERATION
Tasks Test
with users
Context
Best practices for
usable design
Multidisciplinary collaboration
© Degler/Phua, Design for Context. 6.6.2011 Slide 13

14. Show, Tell, Explore
Topic Areas
Share an example:
www.designforsemanticweb.com/shareurl
© Degler/Phua, Design for Context. 6.6.2011 Slide 14

15. Share an example: www.designforsemanticweb.com/shareurl
Interaction Categories
 Information landscapes
 Seeking
 Visualization
 Creating and sharing information
 Vocabulary and relationship management
 Personal and social issues
© Degler/Phua, Design for Context. 6.6.2011 Slide 15

16. Share an example: www.designforsemanticweb.com/shareurl
Information Landscapes
 Challenges
• Where am I?
• Wayfinding & signposting
• Whoa!
• Exposing rich content relationships
• Huh?
• Resolving ambiguity
 Opportunities
• Relevance
• Control over quantity
• Personal pathways
© Degler/Phua, Design for Context. 6.6.2011 Slide 16

17. Share an example: www.designforsemanticweb.com/shareurl
Seeking
 Challenges
• I’m looking for…
• Structure matching mental model of domain(s)
• Was this what I said?
• Interpretation
• Is this everything?
• Confidence in underlying algorithms
• Huh?
• Resolving ambiguity
 Opportunities
• Goal-relevance
• Recognition enhancing recall
• Iteration (berry picking)
© Degler/Phua, Design for Context. 6.6.2011 Slide 17

18. Share an example: www.designforsemanticweb.com/shareurl
Visualization
 Challenges
• What is this telling me?
• Patterns and interpretations
• Whoa!
• Crossing from quality to quantity
• Wait! Stop!
• Representation form and consistency
 Opportunities
• Surfacing insights – seeing relationships in new ways
• User control of complex analysis
• Mingling visual and textual in seamless ways
© Degler/Phua, Design for Context. 6.6.2011 Slide 18

19. Share an example: www.designforsemanticweb.com/shareurl
Creating and sharing information
 Challenges
• Why bother?
• How many i‘s to dot and t’s to cross
• If the machine says so…
• Quality of automated assistance
 Opportunities
• Streamlining processes
• More structure > less effort
• Consistency and quality
© Degler/Phua, Design for Context. 6.6.2011 Slide 19

20. Share an example: www.designforsemanticweb.com/shareurl
Vocabulary and relationship management
 Challenges
• Was your degree in linguistics or philosophy?
• Suitability to purpose
• How much?
• Quantity
• But I meant…
• Respecting and resolving ambiguity
 Opportunities
• Longevity without rigidity
• A forgiving nature
• Cultural relevance > flexibility of interpretation
• Fail-safes
© Degler/Phua, Design for Context. 6.6.2011 Slide 20

21. Share an example: www.designforsemanticweb.com/shareurl
Personal and social issues
 Challenges
• Is what I’m seeing trustworthy?
• Transparency
• Provenance
• What is this application doing with my stuff?
• Clarity
• Respect
• Informed consent
• Does it understand what I mean?
• Humility
• Permissions
• Who sees what I’m sharing?
• Privacy
• Rules of engagement / behavior
© Degler/Phua, Design for Context. 6.6.2011 Slide 21

22. Show, Tell, Explore…
Semantic Web Interface Design
Duane Degler & Jasmin Phua
Design for Context
www.DesignForContext.com
www.DesignForSemanticWeb.com
© Degler/Phua, Design for Context. 6.6.2011 Slide 22