semantic web user interfaces - do they have to be ugly?
DESCRIPTION
Presentation at Semantic Tech Conference 2010 On lack of good frameworks, good UI libraries, etc.TRANSCRIPT
![Page 1: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/1.jpg)
User Interfaces for Semantic Web:
Do They Have to Be Ugly?
Andraz Tori, [email protected]
Twitter: @andraz
![Page 2: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/2.jpg)
Talking about
• Topic: Semantic Web + World Wide Web development & user interfaces
• Services based around data like Linking Open Data or custom/proprietary graphs
• Talking about both Semantic Web and semantic web
• From perspective of a developer
![Page 3: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/3.jpg)
So, do they have to be ugly?
![Page 4: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/4.jpg)
No.
![Page 5: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/5.jpg)
But often they still are...
… complicated, convoluted, ugly and sometimes useless
![Page 6: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/6.jpg)
Right now, Smantic Web on the web is like an ugly duckling
![Page 7: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/7.jpg)
![Page 8: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/8.jpg)
Maybe one day, it's going to be a beautiful swan.
Unfortunately it won't happen by itself.
![Page 9: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/9.jpg)
Seen so far
• Both Semantic Web & semantic web
• Twine, Sindici, OpenLink faceted search, Freebase, Freebase Autosuggest, ViewChange player, rkbexplorer, Faviki, Glue, Facebook open graph, Zemanta, BBC (Nature, Music, Programme), Siri
• Let's look at them in random order
![Page 10: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/10.jpg)
Before we start
What is a semantic web user interface?
![Page 11: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/11.jpg)
4
Down the rabbit hole...
![Page 12: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/12.jpg)
http://lod.openlinksw.com/
![Page 13: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/13.jpg)
http://lod.openlinksw.com/
![Page 14: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/14.jpg)
http://www.bbc.co.uk/sn/
![Page 15: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/15.jpg)
![Page 16: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/16.jpg)
![Page 17: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/17.jpg)
![Page 18: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/18.jpg)
![Page 19: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/19.jpg)
ViewChange.org
![Page 20: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/20.jpg)
![Page 21: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/21.jpg)
Faviki
![Page 22: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/22.jpg)
![Page 23: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/23.jpg)
Freebase suggest
![Page 24: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/24.jpg)
![Page 25: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/25.jpg)
![Page 26: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/26.jpg)
![Page 27: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/27.jpg)
![Page 28: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/28.jpg)
![Page 29: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/29.jpg)
![Page 30: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/30.jpg)
The pattern
• Some start with a problem and arrive to SemWeb technologies as one part of a solution
• Some start with semantic web solution and start to look for the problem
• Which ones do you like more?
• What goes wrong?
![Page 31: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/31.jpg)
An example: Barack Obama
Born: August 4, 1961 (1961-08-04), age 48, Honolulu, Hawaii
Birth name:Barack Hussein Obama II
Nationality: American
Political party:Democratic
Spouse(s): Michelle Obama (m. 1992)
![Page 32: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/32.jpg)
How SW engineer sees that?
Barack Obama
1961-08-04
Event object 321321
Birth event
Date
Honolulu, Hawaii Place
Sexmale
Marriage partner1Marriage Object 1231321
Michelle Obama Marriage partner2
Political party
portrait u
rl
http://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Official_portrait_of_Barack_Obama.jpg/225px-Official_portrait_of_Barack_Obama.jpg
![Page 33: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/33.jpg)
This graph is fantastic!
• We can find people born on the same day!
• We can find who is in Democratic party!
• We can find the most similar people (not via SPARQL, but still)
• We can exchange identifiers with everyone!
• We can display the results easily, no mess!
Barack Obama
1961-08-04
Event object 321321
Birth event
Date
Honolulu, Hawaii Place
Sexmale
Marriage partner1Marriage Object 1231321
Michelle Obama Marriage partner2
Political party
portrait u
rl
http://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Official_portrait_of_Barack_Obama.jpg/225px-Official_portrait_of_Barack_Obama.jpg
![Page 34: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/34.jpg)
Except
• The queries mentioned are mostly boring
• In reality the LOD data is too sparse for 'discover anything, ask anything'
• We usually want either a shallow search or truly deep and comprehensive data
• Our app will have to do one thing and do it well
![Page 35: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/35.jpg)
a perfect abstraction
The semantic web is
![Page 36: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/36.jpg)
From engineer's perspective
• Abstractions are great
• You can represent almost anything with a graph
• You can query for anything you want in the same way!
• You get all the cool things like validation, refactoring, reasoning.
• ....
• So you can treat all your data in the same way!
![Page 37: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/37.jpg)
So you can treat all your data in the same way!
Until the user sees it or interacts with it !!!
![Page 38: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/38.jpg)
Abstraction
• Is a blessing for an engineer
• But a curse for user interaction and user interfaces
• Semantic web technology tends to attract “architecture astronauts”
![Page 39: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/39.jpg)
Architecture astronauts
The hallmark of an architecture astronaut is that they don't solve an actual problem... they solve something that appears to be the template of a
lot of problems. Or at least, they try.
– Joel Sposlky
<
![Page 40: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/40.jpg)
Let's not be architectural astronauts.
Let's solve one problem and solve it well
Rule number one
![Page 41: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/41.jpg)
User experience
• We need to tailor the experience to specific use-cases
• Ignoring (powerful) underlying technology at first!
• Spending more than just the last 10% of the time figuring out how the software/data are going to be used in practice
• User experience is not just graphics design!
![Page 42: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/42.jpg)
User experience
• It might be advantageous to have an unified data model on the backend
• But that doesn't matter on the frontend/UX
• Your software could theoretically offer limitless flexibility.... but are you sure you want to pay the price?
• The price is a software that can do everything and is not good at anything in particular
![Page 43: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/43.jpg)
Throw away a dream of unified interfaces for data access
And start designing software that concentrates on limited, but efficient ways to deal with data in scope of a
specific task or a problem
![Page 44: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/44.jpg)
So where are the tools?
• SemWeb is full of tools to manage ontologies, to extract data and to query data
• But when it comes to interacting with data by end users on the web, the tools (libraries, frameworks) are missing
• It's even worse. Everything beyond the triple store and SPARQL server is missing.
![Page 45: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/45.jpg)
![Page 46: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/46.jpg)
Web 2.0 developer's toolbox
![Page 47: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/47.jpg)
Semantic Web developer's toolbox
Sparql
Freebase Acre
![Page 48: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/48.jpg)
We don't have enough time
• Everyone needs to do visualizations, interfaces, data interactions on his own
• But most of the time we're just reimplementing bottom layers
• Thus there is no time to actually concentrate on interfaces
• So we need to have the 'framework' problem solved in order to have resources for UI/UX
![Page 49: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/49.jpg)
SemWeb web development -missing parts
• Semantic ORM built deep into the framework
• Scaffolding admin, user management
• Javascript library capable of dealing with SPARQL on one side and HTML/CSS on the other
• Frameworks with preselected ontologies
• Easy installations of development environments (really, this matters!)
• Community?
![Page 50: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/50.jpg)
SIOC
• Semantically-Interlinked Online Communities
• Arguably ontology that went furthest in gaining support
• But still no development frameworks
![Page 51: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/51.jpg)
SIOC could be practical
![Page 52: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/52.jpg)
Looking solely at UI side
• An UI toolset capable of dealing with specific ontologies
• For starters: a decent graph presenting/manipulating JS library?
• When I deal with dates, people, places, events, ... I want to 'outsource' design and interaction to people more capable than myself in bringing machines and computers together.
![Page 53: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/53.jpg)
Ideas: PlaceSemWebUI
• Assuming common geo ontologies
• Displaying the data using Google Maps or Cloudmade
• Allowing for 'smart' display of multiple entities, 'smart' selection, editing, route planning, overlaying with other data, etc.
![Page 54: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/54.jpg)
Ideas: PersonSemWebUI
• Understanding common person ontologies
• Understanding what type of things people want to do with “Person” objects
• Offer different visualizations, listing friends, contacts, relationships in different ways
• Mashing it up with Facebook, LinkedIn, Twitter, Glue, etc...
![Page 55: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/55.jpg)
Good tools to start with
• Sparta (ORM for Python, dead)
• ActiveRDF, HyperDE (ORM for Ruby)
• Simile MIT project (Timeline, Seek)
• Longwell (RDF faceted browser)
• Freebase Parallax (open sourced)
• Freebase Acre (Semantic PaaS)
![Page 56: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/56.jpg)
Do you know how stupidly hard it is to display such a graph on the web?
![Page 57: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/57.jpg)
Why are there no frameworks?
• Because they are hard
• Because there's no specification up front (Frenzel failed)
• No immediate benefits to authors, questionable demand
• It takes UI/UX designer, designer, semweb expert, backend engineer and frontend engineer (5 different people!)
• Or maybe I just don't know about them??
![Page 58: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/58.jpg)
So you want to be a hero?
• You might be the savior of SemWeb – making it appeal to wider web development community
• If you are Semantic Web backend provider, you can look at this as a complementary product which rises demand for your main one
• Since there is so little competition, you can take the world by storm
![Page 59: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/59.jpg)
And don't hesitate about
• Making politically incorrect requirements (“to run this fast, please download whole Freebase locally into MySQL database”)
• Building opinionated software (Apple...)
• Creating ontology specific solutions
• Releasing it as open source, even half baked
![Page 60: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/60.jpg)
RDFa, Microdata?
• Browsers turned away from creating useful default interactions for common data types
• Extensions like Mozilla Operator seem to be a dead end (unfortunately)
• However new browser wars are coming!
• And that is a good thing for semantic web!
![Page 61: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/61.jpg)
![Page 62: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/62.jpg)
Facebook Open Graph
• Publishing stuff in Facebook-supported way might become more important than anything else regarding RDFa or microdata
• Useful for people dealing with social or 'popular' objects
• Are FB apps based on this actually semantic apps already?
![Page 63: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/63.jpg)
Is Facebook offering the best SemWeb UX/UI design, ever?
![Page 64: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/64.jpg)
When to do what?
• Start with use-cases
• Involve user experience designers early on
• Exploration is overrated
• If there's one thought I want to leave you with:
Not constraining yourself to specific use-cases is the greatest design sin of Semantic Web, ever.
![Page 65: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/65.jpg)
Conclusion
• SemWeb on the web right now is mostly a data interchange layer
• Creating web applications based solely on SemWeb stack is for most advanterous
• We need more of a 'pull' projects, 'push' isn't getting us anywhere
![Page 66: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/66.jpg)
Killer app for semantic web?
First we need killer frameworks!
![Page 67: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/67.jpg)
User Interfaces for Semantic Web:
Do They Have to Be Ugly?
Yes, … for now.
Andraz Tori, [email protected]
Twitter: @andraz
![Page 68: Semantic web user interfaces - Do they have to be ugly?](https://reader033.vdocuments.us/reader033/viewer/2022051817/547bb806b379596a2b8b4e59/html5/thumbnails/68.jpg)
Images
• http://www.flickr.com/photos/pasma/485201047/
• http://www.flickr.com/photos/steffe/2457114284/
• http://www.flickr.com/photos/bradybd/2819339876/
• http://en.wikipedia.org/wiki/File:Alice_par_John_Tenniel_02.png
• NASA
• Wikipedia