SlideShare a Scribd company logo

Quill slides-www2013

These slides have been presented during WWW 2013, the 2nd World Wide Web International Conference, on May 17th during the developers track. By Dave Raggett and Vivian Motti

1 of 26
Download to read offline
Quill: A Collaborative DesignQuill: A Collaborative Design
Assistant for Cross Platform WebAssistant for Cross Platform Web
Application User InterfacesApplication User Interfaces
Vivian G. Motti, Université catholique de Louvain
Dave Raggett, World Wide Web Consortium
WWW2013, Rio de Janeiro, 2013
This was supported by funding from the European Commission’s Seventh
Framework Program under grant agreement number 258030 (FP7-ICT-2009-5).
2
How mobile-ready areHow mobile-ready are
corporate websites?corporate websites?
● UK companies not ready for mobile internet
– Two-thirds of companies in the FTSE 100 have websites that are difficult to use on
smartphones, a study shows.
– Robert Cookson, Financial Times, 2 January 2013
●
http://on.ft.com/Zp4UZI
●
“FTSE 100 companies are not mobile-ready and are wasting millions of pounds on internet
advertising by sending visitors to websites that do not work as users expect them to,” said
Jonathan Bass of Incentivated
●
Domino’s Pizza, one of the pioneers of online fast-food sales in the UK, reported in
September that purchases from mobile phones were growing at almost 50 per cent a year
and accounted for nearly a fifth of its online sales.
● CIOs struggling to meet mobility challenge
– 78% of respondents state their mobility strategy is at low to medium maturity
according to a 2013 study by Teksystems
●
http://teksystems.com/resources/research/it-trends/mobile-outsourcing-landscape-infograp
hic
3
It's only going to get worse...It's only going to get worse...
● Increasing variety of devices
– Desktop, mobile, tablets, connected TVs
– Regular and ultra high resolution displays
● Coming soon
– Multi-screen applications
●
In the living room and in the office
– Cars
●
Dashboard displays, smart phones, heads up displays,
multimodal interaction, and concerns over ensuring driver safety
– Wearable devices
●
Smart watches and glasses
●
Sports and healthcare
4
Why Web Apps?Why Web Apps?
● Current practice is to use web sites for
desktop, and native apps for other platforms
● Developers need to learn new programming
languages and SDKs for each platform
● Web technologies reduce the cost and
increase the reach!
● Save time and money by avoiding app stores!
– Keep all of your income
● Responsive Design techniques
● But need for better developer tools!
5
Desktop vs PhoneDesktop vs Phone
Captured from mobile App
6
Desktop vs PhoneDesktop vs Phone
Captured from mobile App

Recommended

Mohammed Elsabry pm resume
Mohammed Elsabry pm resumeMohammed Elsabry pm resume
Mohammed Elsabry pm resumeNazzelha
 
Enterprise mobility MADP MEAP MCAP struggles and approaches
Enterprise mobility MADP MEAP MCAP struggles and approachesEnterprise mobility MADP MEAP MCAP struggles and approaches
Enterprise mobility MADP MEAP MCAP struggles and approachesANOOP KUMAR P
 
MADP - Mobile Application Development Platform - CRE8 Brasil MEAP
MADP - Mobile Application Development Platform - CRE8 Brasil MEAPMADP - Mobile Application Development Platform - CRE8 Brasil MEAP
MADP - Mobile Application Development Platform - CRE8 Brasil MEAPVictor Sebastian
 
Smart quill seminar report final
Smart quill seminar report finalSmart quill seminar report final
Smart quill seminar report finalPramod Kumar
 
smart quill pen
smart quill pensmart quill pen
smart quill penranjith12
 

More Related Content

Similar to Quill slides-www2013

Design Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX WireframesDesign Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX WireframesDianaGray10
 
How Responsive Is Your Testing?
How Responsive Is Your Testing?How Responsive Is Your Testing?
How Responsive Is Your Testing?Cognizant
 
MAGE PROCESSING BASED BILLING STRUCTURE USING EDGE COMPUTING AND REACTJS
MAGE PROCESSING BASED BILLING STRUCTURE USING EDGE COMPUTING AND REACTJSMAGE PROCESSING BASED BILLING STRUCTURE USING EDGE COMPUTING AND REACTJS
MAGE PROCESSING BASED BILLING STRUCTURE USING EDGE COMPUTING AND REACTJSIRJET Journal
 
MuleSoft Meetup Adelaide 7th April 2021
MuleSoft Meetup Adelaide 7th April 2021MuleSoft Meetup Adelaide 7th April 2021
MuleSoft Meetup Adelaide 7th April 2021Nicholas Bowman
 
Analysis On The Tour Guide Robot
Analysis On The Tour Guide RobotAnalysis On The Tour Guide Robot
Analysis On The Tour Guide RobotJessica Lopez
 
Household Veritas - A platform that provides household services
Household Veritas - A platform that provides household servicesHousehold Veritas - A platform that provides household services
Household Veritas - A platform that provides household servicesIRJET Journal
 
20101007 how smart use cases drive web development
20101007   how smart use cases drive web development20101007   how smart use cases drive web development
20101007 how smart use cases drive web developmentSander Hoogendoorn
 
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdf
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdfInternship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdf
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdfVitulChauhan
 
User Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesUser Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesIRJET Journal
 
IRJET - Survey Paper on Tools Used to Enhance User's Experience with Cons...
IRJET -  	  Survey Paper on Tools Used to Enhance User's Experience with Cons...IRJET -  	  Survey Paper on Tools Used to Enhance User's Experience with Cons...
IRJET - Survey Paper on Tools Used to Enhance User's Experience with Cons...IRJET Journal
 
Development of Android Based Mobile App for PrestaShop eCommerce Shopping Ca...
Development of Android Based Mobile App for PrestaShop eCommerce  Shopping Ca...Development of Android Based Mobile App for PrestaShop eCommerce  Shopping Ca...
Development of Android Based Mobile App for PrestaShop eCommerce Shopping Ca...IRJET Journal
 
Preparing_for_PCA_Workbook.pptx
Preparing_for_PCA_Workbook.pptxPreparing_for_PCA_Workbook.pptx
Preparing_for_PCA_Workbook.pptxmambrino
 
online shopping
online shopping online shopping
online shopping Ankuj Kumar
 
Importance of Mobile App Architecture For Mobile App Development
Importance of Mobile App Architecture For Mobile App DevelopmentImportance of Mobile App Architecture For Mobile App Development
Importance of Mobile App Architecture For Mobile App DevelopmentHelios Solutions
 

Similar to Quill slides-www2013 (20)

DHANA_CV
DHANA_CVDHANA_CV
DHANA_CV
 
Design Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX WireframesDesign Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX Wireframes
 
How Responsive Is Your Testing?
How Responsive Is Your Testing?How Responsive Is Your Testing?
How Responsive Is Your Testing?
 
MAGE PROCESSING BASED BILLING STRUCTURE USING EDGE COMPUTING AND REACTJS
MAGE PROCESSING BASED BILLING STRUCTURE USING EDGE COMPUTING AND REACTJSMAGE PROCESSING BASED BILLING STRUCTURE USING EDGE COMPUTING AND REACTJS
MAGE PROCESSING BASED BILLING STRUCTURE USING EDGE COMPUTING AND REACTJS
 
MuleSoft Meetup Adelaide 7th April 2021
MuleSoft Meetup Adelaide 7th April 2021MuleSoft Meetup Adelaide 7th April 2021
MuleSoft Meetup Adelaide 7th April 2021
 
Analysis On The Tour Guide Robot
Analysis On The Tour Guide RobotAnalysis On The Tour Guide Robot
Analysis On The Tour Guide Robot
 
Somnath Resume
Somnath ResumeSomnath Resume
Somnath Resume
 
Household Veritas - A platform that provides household services
Household Veritas - A platform that provides household servicesHousehold Veritas - A platform that provides household services
Household Veritas - A platform that provides household services
 
20101007 how smart use cases drive web development
20101007   how smart use cases drive web development20101007   how smart use cases drive web development
20101007 how smart use cases drive web development
 
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdf
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdfInternship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdf
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdf
 
M 4 iot..
M 4 iot..M 4 iot..
M 4 iot..
 
Mobile Application Testing af Frederik Carlier, Jamo Solutions
Mobile Application Testing af Frederik Carlier, Jamo SolutionsMobile Application Testing af Frederik Carlier, Jamo Solutions
Mobile Application Testing af Frederik Carlier, Jamo Solutions
 
User Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesUser Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile Devices
 
IRJET - Survey Paper on Tools Used to Enhance User's Experience with Cons...
IRJET -  	  Survey Paper on Tools Used to Enhance User's Experience with Cons...IRJET -  	  Survey Paper on Tools Used to Enhance User's Experience with Cons...
IRJET - Survey Paper on Tools Used to Enhance User's Experience with Cons...
 
Development of Android Based Mobile App for PrestaShop eCommerce Shopping Ca...
Development of Android Based Mobile App for PrestaShop eCommerce  Shopping Ca...Development of Android Based Mobile App for PrestaShop eCommerce  Shopping Ca...
Development of Android Based Mobile App for PrestaShop eCommerce Shopping Ca...
 
Project synopsis.
Project synopsis.Project synopsis.
Project synopsis.
 
Preparing_for_PCA_Workbook.pptx
Preparing_for_PCA_Workbook.pptxPreparing_for_PCA_Workbook.pptx
Preparing_for_PCA_Workbook.pptx
 
online shopping
online shopping online shopping
online shopping
 
Importance of Mobile App Architecture For Mobile App Development
Importance of Mobile App Architecture For Mobile App DevelopmentImportance of Mobile App Architecture For Mobile App Development
Importance of Mobile App Architecture For Mobile App Development
 
Technology Trend 2018
Technology Trend 2018Technology Trend 2018
Technology Trend 2018
 

More from Vivian Motti

Keynote speech - Webmedia 2020
Keynote speech - Webmedia 2020Keynote speech - Webmedia 2020
Keynote speech - Webmedia 2020Vivian Motti
 
Smartwatch Applications as Assistive Technologies
Smartwatch Applications as Assistive TechnologiesSmartwatch Applications as Assistive Technologies
Smartwatch Applications as Assistive TechnologiesVivian Motti
 
Wearable technologies
Wearable technologiesWearable technologies
Wearable technologiesVivian Motti
 
Cards - Users with Disabilities - Course Material
Cards - Users with Disabilities - Course MaterialCards - Users with Disabilities - Course Material
Cards - Users with Disabilities - Course MaterialVivian Motti
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Vivian Motti
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Vivian Motti
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Vivian Motti
 
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...Vivian Motti
 
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...Vivian Motti
 
Wearable privacy skeletons in the data closet
Wearable privacy  skeletons in the data closetWearable privacy  skeletons in the data closet
Wearable privacy skeletons in the data closetVivian Motti
 
Wearable Life: a Wrist-Worn Application to Assist Students in Special Education
Wearable Life: a Wrist-Worn Application to Assist Students in Special EducationWearable Life: a Wrist-Worn Application to Assist Students in Special Education
Wearable Life: a Wrist-Worn Application to Assist Students in Special EducationVivian Motti
 
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...Vivian Motti
 
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...Vivian Motti
 
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...Vivian Motti
 
Toward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy ConceptsToward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy ConceptsVivian Motti
 
Wearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and PrivacyWearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and PrivacyVivian Motti
 
Micro interactions and multi dimensional graphical user interfaces in the des...
Micro interactions and multi dimensional graphical user interfaces in the des...Micro interactions and multi dimensional graphical user interfaces in the des...
Micro interactions and multi dimensional graphical user interfaces in the des...Vivian Motti
 
An Overview of Wearable Applications for Health Care: Requirements and Challe...
An Overview of Wearable Applications for Health Care: Requirements and Challe...An Overview of Wearable Applications for Health Care: Requirements and Challe...
An Overview of Wearable Applications for Health Care: Requirements and Challe...Vivian Motti
 

More from Vivian Motti (20)

Keynote speech - Webmedia 2020
Keynote speech - Webmedia 2020Keynote speech - Webmedia 2020
Keynote speech - Webmedia 2020
 
Usable Privacy
Usable PrivacyUsable Privacy
Usable Privacy
 
Smartwatch Applications as Assistive Technologies
Smartwatch Applications as Assistive TechnologiesSmartwatch Applications as Assistive Technologies
Smartwatch Applications as Assistive Technologies
 
Wearable technologies
Wearable technologiesWearable technologies
Wearable technologies
 
Cards - Users with Disabilities - Course Material
Cards - Users with Disabilities - Course MaterialCards - Users with Disabilities - Course Material
Cards - Users with Disabilities - Course Material
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
 
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
 
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
 
Wearable privacy skeletons in the data closet
Wearable privacy  skeletons in the data closetWearable privacy  skeletons in the data closet
Wearable privacy skeletons in the data closet
 
Wearable Life: a Wrist-Worn Application to Assist Students in Special Education
Wearable Life: a Wrist-Worn Application to Assist Students in Special EducationWearable Life: a Wrist-Worn Application to Assist Students in Special Education
Wearable Life: a Wrist-Worn Application to Assist Students in Special Education
 
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
 
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
 
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
 
Toward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy ConceptsToward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy Concepts
 
Wearable Health
Wearable HealthWearable Health
Wearable Health
 
Wearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and PrivacyWearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and Privacy
 
Micro interactions and multi dimensional graphical user interfaces in the des...
Micro interactions and multi dimensional graphical user interfaces in the des...Micro interactions and multi dimensional graphical user interfaces in the des...
Micro interactions and multi dimensional graphical user interfaces in the des...
 
An Overview of Wearable Applications for Health Care: Requirements and Challe...
An Overview of Wearable Applications for Health Care: Requirements and Challe...An Overview of Wearable Applications for Health Care: Requirements and Challe...
An Overview of Wearable Applications for Health Care: Requirements and Challe...
 

Recently uploaded

Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...BookNet Canada
 
Python For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emPython For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emNho Vĩnh
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerSaiLinnThu2
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceVijayananda Mohire
 
AI for Educators - Integrating AI in the Classrooms
AI for Educators - Integrating AI in the ClassroomsAI for Educators - Integrating AI in the Classrooms
AI for Educators - Integrating AI in the ClassroomsPremsankar Chakkingal
 
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...ShapeBlue
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...2toLead Limited
 
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Jay Zhao
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriSafe Software
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfRodneyThomas28
 
software-quality-assurance question paper 2023
software-quality-assurance question paper 2023software-quality-assurance question paper 2023
software-quality-assurance question paper 2023RohanMistry15
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024BookNet Canada
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxNeo4j
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...SearchNorwich
 
KUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ionKUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ionNeo4j
 
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueShapeBlue
 
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Cprime
 
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Chris Bingham
 
TrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc
 

Recently uploaded (20)

Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
 
Python For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emPython For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ em
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial Intelligence
 
AI for Educators - Integrating AI in the Classrooms
AI for Educators - Integrating AI in the ClassroomsAI for Educators - Integrating AI in the Classrooms
AI for Educators - Integrating AI in the Classrooms
 
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & Esri
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdf
 
software-quality-assurance question paper 2023
software-quality-assurance question paper 2023software-quality-assurance question paper 2023
software-quality-assurance question paper 2023
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
 
KUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ionKUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ion
 
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
 
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
 
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
 
TrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI Innovations
 

Quill slides-www2013

  • 1. Quill: A Collaborative DesignQuill: A Collaborative Design Assistant for Cross Platform WebAssistant for Cross Platform Web Application User InterfacesApplication User Interfaces Vivian G. Motti, Université catholique de Louvain Dave Raggett, World Wide Web Consortium WWW2013, Rio de Janeiro, 2013 This was supported by funding from the European Commission’s Seventh Framework Program under grant agreement number 258030 (FP7-ICT-2009-5).
  • 2. 2 How mobile-ready areHow mobile-ready are corporate websites?corporate websites? ● UK companies not ready for mobile internet – Two-thirds of companies in the FTSE 100 have websites that are difficult to use on smartphones, a study shows. – Robert Cookson, Financial Times, 2 January 2013 ● http://on.ft.com/Zp4UZI ● “FTSE 100 companies are not mobile-ready and are wasting millions of pounds on internet advertising by sending visitors to websites that do not work as users expect them to,” said Jonathan Bass of Incentivated ● Domino’s Pizza, one of the pioneers of online fast-food sales in the UK, reported in September that purchases from mobile phones were growing at almost 50 per cent a year and accounted for nearly a fifth of its online sales. ● CIOs struggling to meet mobility challenge – 78% of respondents state their mobility strategy is at low to medium maturity according to a 2013 study by Teksystems ● http://teksystems.com/resources/research/it-trends/mobile-outsourcing-landscape-infograp hic
  • 3. 3 It's only going to get worse...It's only going to get worse... ● Increasing variety of devices – Desktop, mobile, tablets, connected TVs – Regular and ultra high resolution displays ● Coming soon – Multi-screen applications ● In the living room and in the office – Cars ● Dashboard displays, smart phones, heads up displays, multimodal interaction, and concerns over ensuring driver safety – Wearable devices ● Smart watches and glasses ● Sports and healthcare
  • 4. 4 Why Web Apps?Why Web Apps? ● Current practice is to use web sites for desktop, and native apps for other platforms ● Developers need to learn new programming languages and SDKs for each platform ● Web technologies reduce the cost and increase the reach! ● Save time and money by avoiding app stores! – Keep all of your income ● Responsive Design techniques ● But need for better developer tools!
  • 5. 5 Desktop vs PhoneDesktop vs Phone Captured from mobile App
  • 6. 6 Desktop vs PhoneDesktop vs Phone Captured from mobile App
  • 7. 7 Desktop vs PhoneDesktop vs Phone Captured from mobile App
  • 8. 8 Desktop vs PhoneDesktop vs Phone Captured from mobile App
  • 9. 9 Design ProcessDesign Process ● Agree on the business requirements ● Map them into domain and task models ● Use automated design tool to generate rough design proposals for each target platform ● Adjust the design to suit your taste ● Apply a UI skin and generate the final UI for each class of device ● Review and adapt until done!
  • 10. 10 Abstraction LayersAbstraction Layers Domain Tasks Abstract UI Concrete UI Final UI User Platform Environment Context of Use Platform Independent Platform Dependent Device Dependent UI Skins
  • 11. 11 Abstraction LayersAbstraction Layers Domain Tasks Abstract UI Concrete UI Final UI Platform Independent Platform Dependent Device Dependent Desktop Phone Tablet TV Car User Platform Environment Context of Use UI Skins
  • 12. 12 Abstraction LayersAbstraction Layers Domain Tasks Abstract UI Concrete UI Final UI Platform Independent Platform Dependent Device Dependent e.g. iPhone User Platform Environment Context of Use UI Skins
  • 13. 13 Abstraction LayersAbstraction Layers Domain Tasks Abstract UI Concrete UI Final UI Platform Independent Platform Dependent Device Dependent Distinguish between normal and advanced features User Platform Environment Context of Use UI Skins
  • 14. 14 Abstraction LayersAbstraction Layers Domain Tasks Abstract UI Concrete UI Final UI Platform Independent Platform Dependent Device Dependent Not all tasks are relevant to every platform User Platform Environment Context of Use UI Skins
  • 15. 15 QuillQuill ● Open Source, HTML5 based design tool ● Expert system generates proposals via a search of the design space – You select which one you prefer ● You can adjust the design at each layer of abstraction ● Your changes are considered as constraints and propagated to reduce the size of the search space as Quill looks for consistent designs – Quill synchronizes changes across layers and platforms – Ensures that the UI remains consistent across devices – Dependency based explanation when search space is over constrained
  • 17. 17 Quill – Abstract UI modelsQuill – Abstract UI models
  • 18. 18 Quill – Abstract UI modelsQuill – Abstract UI models
  • 19. 19 Quill – Abstract UI modelsQuill – Abstract UI models
  • 20. 20 Domain ModelsDomain Models ● Notation inspired by WebIDL ● Parsed into JavaScript Object model ● Annotated with – Relevancy conditions – Validity constraints – Default values – Call outs to handlers @import "clauses" @import "vehicles" interface customer { first_name string; last_name string; email email_address; phone phone; young_driver boolean; marketing_opt_in boolean; } interface card { type {MasterCard, VISA, AMEX}; number string; expiry_month month; expiry_year year; } interface itinerary { pickup_date date_time; return_date date_time; pickup_location location using find_location(); return_to_origin boolean; return_location location using find_location(); pay {now, at_location}; #relevant return_location !return_to_origin #default return_location pickup_location }
  • 21. 21 Task ModelsTask Models ● High level – Independent of UI details ● Hierarchy of tasks – Task – sub-tasks – Normal/advanced tasks ● Ordering constraints – One task enabling another – Unordered tasks – Task preconditions task "make a reservation" { task "Customer details" using customer; enables { task "Pick up and return" { task "pick up details" { concurrent { task "find rental location" using itinerary.pickup_location; task "enter date and time" using itinerary.pickup_date; task "Return to pickup location" using itinerary.return_to_origin; } } task "return details" { concurrent { task "find location" using itinerary.return_location #precondition !itinerary.return_to_origin; task "enter date and time" using itinerary.return_date; } } task "Pay now or at pickup" using itinerary.pay; } task "pick car model" using agreement.vehicle; task "Choose extras" using extras; task "Review and book" using agreement; } }
  • 22. 22 Abstract UI ModelsAbstract UI Models ● Platform independent ● Generated from domain and task models – Bindings to interfaces defined in domain model – Annotated to express constraints, e.g. relevancy group "make a reservation" { group "Customer details" { select customer.first_name; select customer.last_name; select customer.email; select customer.phone; select customer.young_driver; select customer.marketing_opt_in; } group "Pick up and return" { group "pick up details" { select "find rental location" itinerary.pickup_location; select "enter date and time" itinerary.pickup_date; select "Return to pickup location" itinerary.return_to_origin; } group "return details" { select "find location" itinerary.return_location #precondition !itinerary.return_to_origin; select "enter date and time" itinerary.return_date; } select "Pay now or at pickup" itinerary.pay; } group "pick car model" { using agreement.vehicle; } group "Choose extras" { using extras; } group "Review and book" { using agreement; } }
  • 23. 23 Quill's ArchitectureQuill's Architecture ● Models held in the cloud – Node.js based processor ● Direct manipulation interface in browser – HTML5 Canvas for graphical models – Force directed layout (charges and springs) ● Uses window.requestAnimationFrame() for smooth animation ● Plan to combine with hierarchical Voronoi cells for tree models ● Changes to models transmitted in text format over web sockets – Live editing through near real-time revision control ● A work in progress, with deadline of September 2013
  • 24. 24 Constraint PropagationConstraint Propagation ● Decision points – where human designer can force a given choice – e.g. decisions on layout and sub-dialogs ● Some things follow naturally from domain/task model – Changes to abstract or concrete UI that effect domain/task models ● Relationships across abstraction layers – Abductive Reasoning ● If you know certain facts and also that certain relationships hold true, then it is possible to infer additional facts that must be true if the relationship is to hold – Formalized as combination of relational joins and unification ● Demo http://www.w3.org/2013/01/abduction/ – Replaces lots of event-condition-action rules
  • 25. 25 Developer Survey – QuotesDeveloper Survey – Quotes ● Yes, I believe that models are very relevant and useful but the lack of "easy to use" applications, "easy to draw models" puts a certain level of resistance of using this tools from part of developers" ● ... if the model-based approach is directly responsible for the generated code and any changes in the code automatically reflects in the model then it would be extremely relevant to have this kind of approach in my development phase. The model would give me a macro approach to my application helping me to quickly understand what the application is doing... ● ... maintaining the docs and the code in a disjoint manner makes me waste some of the time [...] given that the coding sometimes needs to be changed to work ● I'm not sure models could be used in our domain: UIs are very complex and uses custom widgets.
  • 26. 26 Related WorkRelated Work ● EU FP7 Serenoa project – Context aware model-based user interfaces – http://www.serenoa-fp7.eu/ ● W3C Model-Based UI Working Group – Standardizing task models and abstract UI – http://www.w3.org/2011/mbui/ ● Responsive Design, e.g. – http://www.w3.org/2013/Talks/responsive-design.pdf ● This talk and associated short paper – http://www.w3.org/2013/Talks/quill-slides-www2013.pdf – http://www.w3.org/2013/Talks/quill-paper-www2013.pdf