SlideShare a Scribd company logo
1 of 22
Designing for interactions not visuals Creative Commons
[object Object],[object Object],[object Object],[object Object],Gritty Reality Web 2.0
Turning Design into Interaction ,[object Object],[object Object]
For example ,[object Object],[object Object]
Case Study 1 ,[object Object]
Tabs ,[object Object],[object Object],[object Object],[object Object]
Why are search tabs different? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Radio Button ,[object Object],[object Object],[object Object]
Degraded states uk.tv.yahoo.com www.yahoo.com
Why does this happen? ,[object Object],[object Object],[object Object]
Case Study 2 ,[object Object]
The visual way ,[object Object],[object Object],[object Object],[object Object]
The Result? Epic Fail 2.0
The Interaction way ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What is a tree menu? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tree Structure in HTML <ul> <li> <ul> <li>Leaf 1</li> <li>Leaf 2</li> </ul> </li> <li>Leaf 3</li> </ul>
Checking criteria <ul> <li><span>1st Level, 2 Sub elements. Fully selected</span> <ul> <li><span>2nd Level, 0 Sub elements</span>Leaf 1</li> <li><span>2nd Level, 0 Sub elements</span>Leaf 2</li> </ul> </li> <li><span>1st Level, 0 Sub elements</span>Leaf 3</li> </ul>
Conclusions
Conclusions ,[object Object],[object Object],[object Object]
3 Steps For Practice. ,[object Object],[object Object],[object Object]
Authors of this talk ,[object Object],[object Object],[object Object]
Thanks CC Flickr Photos Flickr Photos ,[object Object],[object Object],[object Object]

More Related Content

Similar to Designing For Use Not Visuals

03. session 03 using lists and tables
03. session 03   using lists and tables03. session 03   using lists and tables
03. session 03 using lists and tables
Phúc Đỗ
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
mlackner
 
02. session 02 working with html elements
02. session 02   working with html elements02. session 02   working with html elements
02. session 02 working with html elements
Phúc Đỗ
 

Similar to Designing For Use Not Visuals (20)

Html5 accessibility
Html5 accessibilityHtml5 accessibility
Html5 accessibility
 
Scopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
 
How to use a blog for publishing scientific research: A training guide part 2
How to use a blog for publishing scientific research: A training guide part 2How to use a blog for publishing scientific research: A training guide part 2
How to use a blog for publishing scientific research: A training guide part 2
 
Html basic
Html basicHtml basic
Html basic
 
03. session 03 using lists and tables
03. session 03   using lists and tables03. session 03   using lists and tables
03. session 03 using lists and tables
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Design Tools Html Xhtml
Design Tools Html XhtmlDesign Tools Html Xhtml
Design Tools Html Xhtml
 
Practical Accessibility - Midwest UX conference 2011
Practical Accessibility - Midwest UX conference 2011Practical Accessibility - Midwest UX conference 2011
Practical Accessibility - Midwest UX conference 2011
 
Html For Beginners 2
Html For Beginners 2Html For Beginners 2
Html For Beginners 2
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
 
HTML5 - One spec to rule them all
HTML5 - One spec to rule them allHTML5 - One spec to rule them all
HTML5 - One spec to rule them all
 
Web Accessbility
Web AccessbilityWeb Accessbility
Web Accessbility
 
Aria Widgets
Aria WidgetsAria Widgets
Aria Widgets
 
02. session 02 working with html elements
02. session 02   working with html elements02. session 02   working with html elements
02. session 02 working with html elements
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
PPT
PPTPPT
PPT
 
Html interview-questions-and-answers
Html interview-questions-and-answersHtml interview-questions-and-answers
Html interview-questions-and-answers
 
How to Create and Submit an XML SItemap
How to Create and Submit an XML SItemapHow to Create and Submit an XML SItemap
How to Create and Submit an XML SItemap
 

More from Tom Croucher

Using Node.js to Build Great Streaming Services - HTML5 Dev Conf
Using Node.js to  Build Great  Streaming Services - HTML5 Dev ConfUsing Node.js to  Build Great  Streaming Services - HTML5 Dev Conf
Using Node.js to Build Great Streaming Services - HTML5 Dev Conf
Tom Croucher
 
Streams are Awesome - (Node.js) TimesOpen Sep 2012
Streams are Awesome - (Node.js) TimesOpen Sep 2012 Streams are Awesome - (Node.js) TimesOpen Sep 2012
Streams are Awesome - (Node.js) TimesOpen Sep 2012
Tom Croucher
 
Using Node.js to improve the performance of Mobile apps and Mobile web
Using Node.js to improve  the performance of  Mobile apps and Mobile webUsing Node.js to improve  the performance of  Mobile apps and Mobile web
Using Node.js to improve the performance of Mobile apps and Mobile web
Tom Croucher
 
Writing robust Node.js applications
Writing robust Node.js applicationsWriting robust Node.js applications
Writing robust Node.js applications
Tom Croucher
 
Creating the Internet of Things with JavaScript - Fluent Conf
Creating the Internet of Things with JavaScript - Fluent ConfCreating the Internet of Things with JavaScript - Fluent Conf
Creating the Internet of Things with JavaScript - Fluent Conf
Tom Croucher
 
Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone
Tom Croucher
 
A million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scaleA million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scale
Tom Croucher
 
OSCON 2011 - Node.js Tutorial
OSCON 2011 - Node.js TutorialOSCON 2011 - Node.js Tutorial
OSCON 2011 - Node.js Tutorial
Tom Croucher
 
Lessons from a coding veteran - Web Directions @Media
Lessons from a coding veteran - Web Directions @MediaLessons from a coding veteran - Web Directions @Media
Lessons from a coding veteran - Web Directions @Media
Tom Croucher
 
Multi-tiered Node Architectures - JSConf 2011
Multi-tiered Node Architectures - JSConf 2011Multi-tiered Node Architectures - JSConf 2011
Multi-tiered Node Architectures - JSConf 2011
Tom Croucher
 
A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...
Tom Croucher
 
How to stop writing spaghetti code
How to stop writing spaghetti codeHow to stop writing spaghetti code
How to stop writing spaghetti code
Tom Croucher
 
Doing Horrible Things to DNS in the Name of Science - SF Performance Meetup
Doing Horrible Things to DNS in the Name of Science - SF Performance MeetupDoing Horrible Things to DNS in the Name of Science - SF Performance Meetup
Doing Horrible Things to DNS in the Name of Science - SF Performance Meetup
Tom Croucher
 
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
Tom Croucher
 
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010
Tom Croucher
 
Node.js and How JavaScript is Changing Server Programming
Node.js and How JavaScript is Changing Server Programming  Node.js and How JavaScript is Changing Server Programming
Node.js and How JavaScript is Changing Server Programming
Tom Croucher
 
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yetServer Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Tom Croucher
 

More from Tom Croucher (20)

Using Node.js to Build Great Streaming Services - HTML5 Dev Conf
Using Node.js to  Build Great  Streaming Services - HTML5 Dev ConfUsing Node.js to  Build Great  Streaming Services - HTML5 Dev Conf
Using Node.js to Build Great Streaming Services - HTML5 Dev Conf
 
Streams are Awesome - (Node.js) TimesOpen Sep 2012
Streams are Awesome - (Node.js) TimesOpen Sep 2012 Streams are Awesome - (Node.js) TimesOpen Sep 2012
Streams are Awesome - (Node.js) TimesOpen Sep 2012
 
Using Node.js to improve the performance of Mobile apps and Mobile web
Using Node.js to improve  the performance of  Mobile apps and Mobile webUsing Node.js to improve  the performance of  Mobile apps and Mobile web
Using Node.js to improve the performance of Mobile apps and Mobile web
 
Writing robust Node.js applications
Writing robust Node.js applicationsWriting robust Node.js applications
Writing robust Node.js applications
 
Creating the Internet of Things with JavaScript - Fluent Conf
Creating the Internet of Things with JavaScript - Fluent ConfCreating the Internet of Things with JavaScript - Fluent Conf
Creating the Internet of Things with JavaScript - Fluent Conf
 
Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone Using Node.js to make HTML5 work for everyone
Using Node.js to make HTML5 work for everyone
 
A million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scaleA million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scale
 
OSCON 2011 - Node.js Tutorial
OSCON 2011 - Node.js TutorialOSCON 2011 - Node.js Tutorial
OSCON 2011 - Node.js Tutorial
 
Lessons from a coding veteran - Web Directions @Media
Lessons from a coding veteran - Web Directions @MediaLessons from a coding veteran - Web Directions @Media
Lessons from a coding veteran - Web Directions @Media
 
Multi-tiered Node Architectures - JSConf 2011
Multi-tiered Node Architectures - JSConf 2011Multi-tiered Node Architectures - JSConf 2011
Multi-tiered Node Architectures - JSConf 2011
 
A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...
 
A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...
 
How to stop writing spaghetti code
How to stop writing spaghetti codeHow to stop writing spaghetti code
How to stop writing spaghetti code
 
Doing Horrible Things with DNS - Web Directions South
Doing Horrible Things with DNS - Web Directions SouthDoing Horrible Things with DNS - Web Directions South
Doing Horrible Things with DNS - Web Directions South
 
Doing Horrible Things to DNS in the Name of Science - SF Performance Meetup
Doing Horrible Things to DNS in the Name of Science - SF Performance MeetupDoing Horrible Things to DNS in the Name of Science - SF Performance Meetup
Doing Horrible Things to DNS in the Name of Science - SF Performance Meetup
 
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
 
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010
 
Sf perf
Sf perfSf perf
Sf perf
 
Node.js and How JavaScript is Changing Server Programming
Node.js and How JavaScript is Changing Server Programming  Node.js and How JavaScript is Changing Server Programming
Node.js and How JavaScript is Changing Server Programming
 
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yetServer Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
 

Recently uploaded

NewBase 17 May 2024 Energy News issue - 1725 by Khaled Al Awadi_compresse...
NewBase   17 May  2024  Energy News issue - 1725 by Khaled Al Awadi_compresse...NewBase   17 May  2024  Energy News issue - 1725 by Khaled Al Awadi_compresse...
NewBase 17 May 2024 Energy News issue - 1725 by Khaled Al Awadi_compresse...
Khaled Al Awadi
 
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
prakheeshc
 
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot ReportFuture of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
Dubai Multi Commodity Centre
 
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
daisycvs
 

Recently uploaded (20)

Innomantra Viewpoint - Building Moonshots : May-Jun 2024.pdf
Innomantra Viewpoint - Building Moonshots : May-Jun 2024.pdfInnomantra Viewpoint - Building Moonshots : May-Jun 2024.pdf
Innomantra Viewpoint - Building Moonshots : May-Jun 2024.pdf
 
NewBase 17 May 2024 Energy News issue - 1725 by Khaled Al Awadi_compresse...
NewBase   17 May  2024  Energy News issue - 1725 by Khaled Al Awadi_compresse...NewBase   17 May  2024  Energy News issue - 1725 by Khaled Al Awadi_compresse...
NewBase 17 May 2024 Energy News issue - 1725 by Khaled Al Awadi_compresse...
 
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
A BUSINESS PROPOSAL FOR SLAUGHTER HOUSE WASTE MANAGEMENT IN MYSORE MUNICIPAL ...
 
Pitch Deck Teardown: Goodcarbon's $5.5m Seed deck
Pitch Deck Teardown: Goodcarbon's $5.5m Seed deckPitch Deck Teardown: Goodcarbon's $5.5m Seed deck
Pitch Deck Teardown: Goodcarbon's $5.5m Seed deck
 
Elevate Your Online Presence with SEO Services
Elevate Your Online Presence with SEO ServicesElevate Your Online Presence with SEO Services
Elevate Your Online Presence with SEO Services
 
wagamamaLab presentation @MIT 20240509 IRODORI
wagamamaLab presentation @MIT 20240509 IRODORIwagamamaLab presentation @MIT 20240509 IRODORI
wagamamaLab presentation @MIT 20240509 IRODORI
 
Global Internal Audit Standards 2024.pdf
Global Internal Audit Standards 2024.pdfGlobal Internal Audit Standards 2024.pdf
Global Internal Audit Standards 2024.pdf
 
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot ReportFuture of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
Future of Trade 2024 - Decoupled and Reconfigured - Snapshot Report
 
Should Law Firms Outsource their Bookkeeping
Should Law Firms Outsource their BookkeepingShould Law Firms Outsource their Bookkeeping
Should Law Firms Outsource their Bookkeeping
 
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
Abortion pills in Muscut<Oman(+27737758557) Cytotec available.inn Kuwait City.
 
Raising Seed Capital by Steve Schlafman at RRE Ventures
Raising Seed Capital by Steve Schlafman at RRE VenturesRaising Seed Capital by Steve Schlafman at RRE Ventures
Raising Seed Capital by Steve Schlafman at RRE Ventures
 
Exploring-Pipe-Flanges-Applications-Types-and-Benefits.pptx
Exploring-Pipe-Flanges-Applications-Types-and-Benefits.pptxExploring-Pipe-Flanges-Applications-Types-and-Benefits.pptx
Exploring-Pipe-Flanges-Applications-Types-and-Benefits.pptx
 
Most Visionary Leaders in Cloud Revolution, Shaping Tech’s Next Era - 2024 (2...
Most Visionary Leaders in Cloud Revolution, Shaping Tech’s Next Era - 2024 (2...Most Visionary Leaders in Cloud Revolution, Shaping Tech’s Next Era - 2024 (2...
Most Visionary Leaders in Cloud Revolution, Shaping Tech’s Next Era - 2024 (2...
 
Blinkit: Revolutionizing the On-Demand Grocery Delivery Service.pptx
Blinkit: Revolutionizing the On-Demand Grocery Delivery Service.pptxBlinkit: Revolutionizing the On-Demand Grocery Delivery Service.pptx
Blinkit: Revolutionizing the On-Demand Grocery Delivery Service.pptx
 
Moradia Isolada com Logradouro; Detached house with patio in Penacova
Moradia Isolada com Logradouro; Detached house with patio in PenacovaMoradia Isolada com Logradouro; Detached house with patio in Penacova
Moradia Isolada com Logradouro; Detached house with patio in Penacova
 
Daftar Rumpun, Pohon, dan Cabang Ilmu (2024).pdf
Daftar Rumpun, Pohon, dan Cabang Ilmu (2024).pdfDaftar Rumpun, Pohon, dan Cabang Ilmu (2024).pdf
Daftar Rumpun, Pohon, dan Cabang Ilmu (2024).pdf
 
Goal Presentation_NEW EMPLOYEE_NETAPS FOUNDATION.pptx
Goal Presentation_NEW EMPLOYEE_NETAPS FOUNDATION.pptxGoal Presentation_NEW EMPLOYEE_NETAPS FOUNDATION.pptx
Goal Presentation_NEW EMPLOYEE_NETAPS FOUNDATION.pptx
 
MichaelStarkes_UncutGemsProjectSummary.pdf
MichaelStarkes_UncutGemsProjectSummary.pdfMichaelStarkes_UncutGemsProjectSummary.pdf
MichaelStarkes_UncutGemsProjectSummary.pdf
 
Unlocking Growth The Power of Outsourcing for CPA Firms
Unlocking Growth The Power of Outsourcing for CPA FirmsUnlocking Growth The Power of Outsourcing for CPA Firms
Unlocking Growth The Power of Outsourcing for CPA Firms
 
HAL Financial Performance Analysis and Future Prospects
HAL Financial Performance Analysis and Future ProspectsHAL Financial Performance Analysis and Future Prospects
HAL Financial Performance Analysis and Future Prospects
 

Designing For Use Not Visuals