SlideShare a Scribd company logo
1 of 30
Interaction design do’s & don’ts harish sivaramakrishnan computer scientist & evangelist Adobe Systems
experience matters!
Interaction design The 5 demandments.
beautiful
fast & agile
expressive
accessible
everywhere!
Flexibility is key.
RIA !=Jazzy (?)
Don’t take users for granted. Incorrect: I know my users, they will eventually come to terms with my UI / UX
Workflow is not the only King! Incorrect: Interaction design *only* if I have time.
HTML has Pages RIA’s Don’t! Hence, If your interaction design means page migration. Press the panic button. Now!
Animations are nice. Only when relevant. Don’t re-invent skip intros
bad design and programming are technology agnostic.
exhibit A for bad design and programming are technology agnostic. http://bouncebargainrentals.com/
exhibit B for bad design and programming are technology agnostic. http://www.html5zombo.com/
DO: Make a design that concurs to the demandments DON’T Rehash your existing design with a new technology.
DO: Keep in mind the multiple form factors your app needs to work on. DON’T Build hard wired layouts, whenever you can.
DO: Small devices need larger clickable areas. Design your controls for that. DON’T Hard port your Web UI to small devices, it’s a different screen, different metaphor.
DO: Give haptic feedback, wherever necessary DON’T Do random things in the name of haptic feedback
DO: Use your creative freedom keeping your end user in mind.  DON’T Invent knee-jerk patterns.
DO: Maintain the identity of a control while creating experiences around it.  DON’T Make buttons look like rockets and scroll bars look like UFOs.
DO: More in one place. Use the states metaphor.  DON’T Make an app that looks like a  <frameset>, that’s oh! So 90s!
let’s fix our part first. before we blame the technology.
let’s differentiate between “can” and “should”.
let’s differentiate between “want” and “need”.
While making technology choices, let’s not take sides. remember, their battle is not our battle.
questions?
email: hsivaram@adobe.com twitter: @hsivaramweb: http://blog.flexgeek.in

More Related Content

What's hot

Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserStephen Hay
 
4 most common mobile app development and design mistakes
4 most common mobile app development and design mistakes4 most common mobile app development and design mistakes
4 most common mobile app development and design mistakesCooperative Computing
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your WebsiteFloown
 
Lean prototyping for entrepreneurs
Lean prototyping for entrepreneursLean prototyping for entrepreneurs
Lean prototyping for entrepreneursAmir Khella
 
Continuous Design and Delivery
Continuous Design and Delivery Continuous Design and Delivery
Continuous Design and Delivery Thoughtworks
 
Top 15 Start up Questions in Web design field
Top 15 Start up Questionsin Web design fieldTop 15 Start up Questionsin Web design field
Top 15 Start up Questions in Web design fieldAlsayed Sabry
 
The Designer’s Guide to Creating Churn
The Designer’s Guide to Creating ChurnThe Designer’s Guide to Creating Churn
The Designer’s Guide to Creating ChurnJohn Need
 
Gappsy Review - Create faster and Amazing apps for IOS and Android
Gappsy Review - Create faster and Amazing apps for IOS and AndroidGappsy Review - Create faster and Amazing apps for IOS and Android
Gappsy Review - Create faster and Amazing apps for IOS and AndroidRavi Prakash Singh
 
Collaborating Effectively with Developers
Collaborating Effectively with DevelopersCollaborating Effectively with Developers
Collaborating Effectively with DevelopersJayde Ly
 
Delivering Content via Mobile
Delivering Content via Mobile Delivering Content via Mobile
Delivering Content via Mobile Adam Fellowes
 
Creating an Interactive Book with iBooks Author #mLearnCon15
Creating an Interactive Book with iBooks Author #mLearnCon15Creating an Interactive Book with iBooks Author #mLearnCon15
Creating an Interactive Book with iBooks Author #mLearnCon15Nick Floro
 
How to write compelling user stories
How to write compelling user storiesHow to write compelling user stories
How to write compelling user storiesBalaji Rajagopalan
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axureAndrii Rusakov
 
Digital summit denver creating customer experience design
Digital summit denver   creating customer experience designDigital summit denver   creating customer experience design
Digital summit denver creating customer experience designCody Landefeld
 
Web Design Assessment
Web Design AssessmentWeb Design Assessment
Web Design Assessmentdarrenmcilroy
 
How to Improve Mobile Business (SqueezeMobillionaire)
How to Improve Mobile Business (SqueezeMobillionaire)How to Improve Mobile Business (SqueezeMobillionaire)
How to Improve Mobile Business (SqueezeMobillionaire)Squeeze Mobi
 
Build Key UI Elements in High Fidelity
Build Key UI Elements in High FidelityBuild Key UI Elements in High Fidelity
Build Key UI Elements in High FidelitySV.CO
 

What's hot (19)

Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
 
4 most common mobile app development and design mistakes
4 most common mobile app development and design mistakes4 most common mobile app development and design mistakes
4 most common mobile app development and design mistakes
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website
 
Lean prototyping for entrepreneurs
Lean prototyping for entrepreneursLean prototyping for entrepreneurs
Lean prototyping for entrepreneurs
 
Continuous Design and Delivery
Continuous Design and Delivery Continuous Design and Delivery
Continuous Design and Delivery
 
Top 15 Start up Questions in Web design field
Top 15 Start up Questionsin Web design fieldTop 15 Start up Questionsin Web design field
Top 15 Start up Questions in Web design field
 
The Designer’s Guide to Creating Churn
The Designer’s Guide to Creating ChurnThe Designer’s Guide to Creating Churn
The Designer’s Guide to Creating Churn
 
50 Great Products For Startups
50 Great Products For Startups50 Great Products For Startups
50 Great Products For Startups
 
Gappsy Review - Create faster and Amazing apps for IOS and Android
Gappsy Review - Create faster and Amazing apps for IOS and AndroidGappsy Review - Create faster and Amazing apps for IOS and Android
Gappsy Review - Create faster and Amazing apps for IOS and Android
 
Collaborating Effectively with Developers
Collaborating Effectively with DevelopersCollaborating Effectively with Developers
Collaborating Effectively with Developers
 
Mvp tools
Mvp toolsMvp tools
Mvp tools
 
Delivering Content via Mobile
Delivering Content via Mobile Delivering Content via Mobile
Delivering Content via Mobile
 
Creating an Interactive Book with iBooks Author #mLearnCon15
Creating an Interactive Book with iBooks Author #mLearnCon15Creating an Interactive Book with iBooks Author #mLearnCon15
Creating an Interactive Book with iBooks Author #mLearnCon15
 
How to write compelling user stories
How to write compelling user storiesHow to write compelling user stories
How to write compelling user stories
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axure
 
Digital summit denver creating customer experience design
Digital summit denver   creating customer experience designDigital summit denver   creating customer experience design
Digital summit denver creating customer experience design
 
Web Design Assessment
Web Design AssessmentWeb Design Assessment
Web Design Assessment
 
How to Improve Mobile Business (SqueezeMobillionaire)
How to Improve Mobile Business (SqueezeMobillionaire)How to Improve Mobile Business (SqueezeMobillionaire)
How to Improve Mobile Business (SqueezeMobillionaire)
 
Build Key UI Elements in High Fidelity
Build Key UI Elements in High FidelityBuild Key UI Elements in High Fidelity
Build Key UI Elements in High Fidelity
 

Similar to Interaction design Do's & Dont's

10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAs10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAsEffective
 
10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAs10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAsEffectiveUI
 
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesMobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesApigee | Google Cloud
 
Design, Create and Develop Your Own Matrimony Website
Design, Create and Develop Your Own Matrimony WebsiteDesign, Create and Develop Your Own Matrimony Website
Design, Create and Develop Your Own Matrimony WebsiteSidu Ponnappa
 
Interactive Design Basics
Interactive Design Basics Interactive Design Basics
Interactive Design Basics katy walker
 
Web Designer vs Web Developer What’s the Difference
Web Designer vs Web Developer What’s the DifferenceWeb Designer vs Web Developer What’s the Difference
Web Designer vs Web Developer What’s the DifferencePixlogix Infotech
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile appRyan Stewart
 
Adesiyan Report on GUI effectiveness
Adesiyan Report on GUI effectivenessAdesiyan Report on GUI effectiveness
Adesiyan Report on GUI effectivenessJelilat Adesiyan
 
Front End Development
Front End Development Front End Development
Front End Development Вѓд Сн
 
Web design vs web development- This is all you need to know
Web design vs web development- This is all you need to knowWeb design vs web development- This is all you need to know
Web design vs web development- This is all you need to knowsangerarayal
 
Responsive Website Design
Responsive Website DesignResponsive Website Design
Responsive Website DesignArin Shamima
 
Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012Prophets Agency
 
UX Super Powers with #ProjectComet
UX Super Powers with #ProjectCometUX Super Powers with #ProjectComet
UX Super Powers with #ProjectCometDemian Borba
 
web development versus web design
web development versus web designweb development versus web design
web development versus web designDigital Ipsum
 
How To be a Backend developer
How To be a Backend developer    How To be a Backend developer
How To be a Backend developer Ramy Hakam
 

Similar to Interaction design Do's & Dont's (20)

Design Prototyping
Design PrototypingDesign Prototyping
Design Prototyping
 
10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAs10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAs
 
10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAs10 Pitfalls to Avoid in Creating RIAs
10 Pitfalls to Avoid in Creating RIAs
 
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesMobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
 
Design, Create and Develop Your Own Matrimony Website
Design, Create and Develop Your Own Matrimony WebsiteDesign, Create and Develop Your Own Matrimony Website
Design, Create and Develop Your Own Matrimony Website
 
Maintainable design
Maintainable designMaintainable design
Maintainable design
 
Interactive Design Basics
Interactive Design Basics Interactive Design Basics
Interactive Design Basics
 
Web Designer vs Web Developer What’s the Difference
Web Designer vs Web Developer What’s the DifferenceWeb Designer vs Web Developer What’s the Difference
Web Designer vs Web Developer What’s the Difference
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 
Prophets trends-in-interactive-design
Prophets trends-in-interactive-designProphets trends-in-interactive-design
Prophets trends-in-interactive-design
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
Adesiyan Report on GUI effectiveness
Adesiyan Report on GUI effectivenessAdesiyan Report on GUI effectiveness
Adesiyan Report on GUI effectiveness
 
Front End Development
Front End Development Front End Development
Front End Development
 
Web design vs web development- This is all you need to know
Web design vs web development- This is all you need to knowWeb design vs web development- This is all you need to know
Web design vs web development- This is all you need to know
 
Responsive Website Design
Responsive Website DesignResponsive Website Design
Responsive Website Design
 
Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012
 
UX Super Powers with #ProjectComet
UX Super Powers with #ProjectCometUX Super Powers with #ProjectComet
UX Super Powers with #ProjectComet
 
web development versus web design
web development versus web designweb development versus web design
web development versus web design
 
How To be a Backend developer
How To be a Backend developer    How To be a Backend developer
How To be a Backend developer
 
Rules For Modern Web App Development
Rules For Modern Web App DevelopmentRules For Modern Web App Development
Rules For Modern Web App Development
 

Recently uploaded

Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 

Recently uploaded (20)

Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 

Interaction design Do's & Dont's