SlideShare a Scribd company logo
Principles of Interactive
Design
By Nick Schuler
Consistency
Humans are wired to be sensitive to change. Changes to a layout is okay, as long
as key elements in the design remain the same. You don’t want people asking
why something changed, because that means they are distracted by the layout.
When designs and layouts are consistent, people tend to stay more focused on
their tasks.
Visibility
Interaction is key. You don’t want people to have to search for interaction or
discover it accidentally. Keep it simple, people like to review an interface fast and
know immediately where they can interact. Don’t have any hidden surprises, with
the exception on making a video game.
Learnability
In a perfect world, people should interact with an interface once, learn it, and be
able to come back next time and go through the same motions. But in real life, it
takes users a few times to get the hang of the interactions of an interface. Again,
keep it simple and easy to learn.
Predictability
Keeping things predictable will be helpful to your users, because you are saving
them time. I know that I hate when I go to a website and I have to interact without
knowing what the next screen will be. You can be predictable by having
animations, videos, or overlays that will show what will happen before the person
decides to interact.
Feedback
Feedback is very important. It should compliment the experience, not complicate
it. It provides acknowledgement about interactions and info about the outcomes.
Do not over do it though… Provide feedback when people need it. If they make
mistakes, give them an idea on how to fix it!

More Related Content

Similar to Principles of Interactive Design

Principles of Interactive Design
Principles of Interactive DesignPrinciples of Interactive Design
Principles of Interactive Design
Karen Krull
 
Transcript for the presentation
Transcript for the presentationTranscript for the presentation
Transcript for the presentation
Pulavarthy Dheeraj
 
3 common ux mistakes killing good design
3 common ux mistakes killing good design3 common ux mistakes killing good design
3 common ux mistakes killing good design
Halil Eren Çelik
 
Ten Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileTen Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for Mobile
Vicke Cheung
 
Ppp2
Ppp2Ppp2
Perfect pixel
Perfect pixelPerfect pixel
Perfect pixel
Anibal Estrella Haiek
 
Ppp2
Ppp2Ppp2
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
nolly00
 
Designing Interfaces [TIDWELL] - Resumo do 1º capitulo
Designing Interfaces [TIDWELL] - Resumo do 1º capituloDesigning Interfaces [TIDWELL] - Resumo do 1º capitulo
Designing Interfaces [TIDWELL] - Resumo do 1º capitulo
Sabine Araujo
 
Pixel Perfect Precision Handbook (Graphic E-book)
Pixel Perfect Precision Handbook (Graphic E-book)Pixel Perfect Precision Handbook (Graphic E-book)
Pixel Perfect Precision Handbook (Graphic E-book)
Mohamad Khairel Izzarman Ismail
 
Pixel perfect precision (ppp) handbook
Pixel perfect precision (ppp) handbookPixel perfect precision (ppp) handbook
Pixel perfect precision (ppp) handbook
Jessie Doan
 
Design Plxel perfect precision
Design Plxel perfect precisionDesign Plxel perfect precision
Design Plxel perfect precision
Krystal Weaver
 
Pixel Perfect Guide
Pixel Perfect GuidePixel Perfect Guide
Pixel Perfect Guide
Geoffrey Dorne
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction Design
Cheryl Platz
 
Best Practices for a Great User Experience
Best Practices for a Great User ExperienceBest Practices for a Great User Experience
Best Practices for a Great User Experience
User Experience Labs
 
Push conference 2018 key takeaways
Push conference 2018 key takeawaysPush conference 2018 key takeaways
Push conference 2018 key takeaways
Justin Crowell
 
Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
Mark Jenkins
 
HCI Basics
HCI BasicsHCI Basics
HCI Basics
Zdeněk Lanc
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
InVision App
 
Usability
UsabilityUsability
Usability
Eloy Zuniga Jr.
 

Similar to Principles of Interactive Design (20)

Principles of Interactive Design
Principles of Interactive DesignPrinciples of Interactive Design
Principles of Interactive Design
 
Transcript for the presentation
Transcript for the presentationTranscript for the presentation
Transcript for the presentation
 
3 common ux mistakes killing good design
3 common ux mistakes killing good design3 common ux mistakes killing good design
3 common ux mistakes killing good design
 
Ten Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileTen Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for Mobile
 
Ppp2
Ppp2Ppp2
Ppp2
 
Perfect pixel
Perfect pixelPerfect pixel
Perfect pixel
 
Ppp2
Ppp2Ppp2
Ppp2
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
 
Designing Interfaces [TIDWELL] - Resumo do 1º capitulo
Designing Interfaces [TIDWELL] - Resumo do 1º capituloDesigning Interfaces [TIDWELL] - Resumo do 1º capitulo
Designing Interfaces [TIDWELL] - Resumo do 1º capitulo
 
Pixel Perfect Precision Handbook (Graphic E-book)
Pixel Perfect Precision Handbook (Graphic E-book)Pixel Perfect Precision Handbook (Graphic E-book)
Pixel Perfect Precision Handbook (Graphic E-book)
 
Pixel perfect precision (ppp) handbook
Pixel perfect precision (ppp) handbookPixel perfect precision (ppp) handbook
Pixel perfect precision (ppp) handbook
 
Design Plxel perfect precision
Design Plxel perfect precisionDesign Plxel perfect precision
Design Plxel perfect precision
 
Pixel Perfect Guide
Pixel Perfect GuidePixel Perfect Guide
Pixel Perfect Guide
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction Design
 
Best Practices for a Great User Experience
Best Practices for a Great User ExperienceBest Practices for a Great User Experience
Best Practices for a Great User Experience
 
Push conference 2018 key takeaways
Push conference 2018 key takeawaysPush conference 2018 key takeaways
Push conference 2018 key takeaways
 
Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
 
HCI Basics
HCI BasicsHCI Basics
HCI Basics
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
Usability
UsabilityUsability
Usability
 

Recently uploaded

一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
7jpwahiy
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
GregMichaelTapawan
 
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
yeytf
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
RPWORLD Manufacturing
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
i990go7o
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
mfria419
 
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
xnhwr8v
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
SirmaDuztepeliler
 
一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理
k4krdgxx
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
aonx8o5f
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
yqyquge
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
wkip62b
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
stgq9v39
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
k4krdgxx
 

Recently uploaded (20)

一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
一比一原版(lbs毕业证书)伦敦商学院毕业证如何办理
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
 
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
一比一原版(UVM毕业证)佛蒙特大学毕业证如何办理
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
一比一原版(Teesside毕业证)英国提赛德大学毕业证如何办理
 
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
一比一原版(falmouth毕业证书)法尔茅斯大学毕业证如何办理
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
 
一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理一比一原版英国伦敦大学毕业证(London学位证)如何办理
一比一原版英国伦敦大学毕业证(London学位证)如何办理
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
 
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
一比一原版(Deakin毕业证书)澳洲迪肯大学毕业证文凭如何办理
 

Principles of Interactive Design

  • 2. Consistency Humans are wired to be sensitive to change. Changes to a layout is okay, as long as key elements in the design remain the same. You don’t want people asking why something changed, because that means they are distracted by the layout. When designs and layouts are consistent, people tend to stay more focused on their tasks.
  • 3. Visibility Interaction is key. You don’t want people to have to search for interaction or discover it accidentally. Keep it simple, people like to review an interface fast and know immediately where they can interact. Don’t have any hidden surprises, with the exception on making a video game.
  • 4. Learnability In a perfect world, people should interact with an interface once, learn it, and be able to come back next time and go through the same motions. But in real life, it takes users a few times to get the hang of the interactions of an interface. Again, keep it simple and easy to learn.
  • 5. Predictability Keeping things predictable will be helpful to your users, because you are saving them time. I know that I hate when I go to a website and I have to interact without knowing what the next screen will be. You can be predictable by having animations, videos, or overlays that will show what will happen before the person decides to interact.
  • 6. Feedback Feedback is very important. It should compliment the experience, not complicate it. It provides acknowledgement about interactions and info about the outcomes. Do not over do it though… Provide feedback when people need it. If they make mistakes, give them an idea on how to fix it!