SlideShare a Scribd company logo
1 of 6
Principles of
Interactive Design
BY KATHRYN WILEY
Consistency
 https://www.fitbit.com
 Pages employ similar fonts/ font weights, color schemes, and button styles. Voice and behavior are
consistent. Images used have similar look and qualities. Consistent use of large, high resolution images
occupying much of the page.
Visibility
 https://turbotax.intuit.com/
 User is given small, simple selections to choose from which expand to lead the user into more specific areas.
The site is highly responsive to the user, and makes sophisticated suggestions to them based on their input.
Recommended user options are highlighted by greying out the other options, making it easy for the user to
navigate. The site is mobile friendly and does not require users on touch screens to hover to navigate.
Learnability
 https://www.rainforestfoods.com/experience/#!/slide-intro
 User is slowly eased into an immersive experience that they control the pace of. Starting from a basic and
mostly still image, the user is encouraged to "explore" their surroundings in a way that is not unlike exploring a
jungle. User can discover various products and learn about how they are made while learning to navigate the
site. Clicking on a product to buy brings the user to a page that they can purchase it from.
Predictability
 https://www.meetup.com/
 Labels are clear and inform the user of future actions to take and what the results of that action will be.
Thumbnails and descriptions offer a preview of what is to come if the user clicks on something. Contrast and
color are used to guide the user towards certain actions (buttons).
Feedback
 https://www.protest.eu/
 On selection there are a number of visual cues when navigating the site. For example, the drop down menus
that expand when a user hovers over them. The loading screens and animations when an object is clicked make
it clear that the user’s action is leading them to a different page. This extends to selecting items to buy, adding
them to your cart, and finding a location where they are sold.

More Related Content

Viewers also liked

Viewers also liked (18)

Design Is Invisible - euroIA 2014 - Brussels
Design Is Invisible - euroIA 2014 - BrusselsDesign Is Invisible - euroIA 2014 - Brussels
Design Is Invisible - euroIA 2014 - Brussels
 
UX Poland 2016 - Marcin Bober - Invisible UI and other lies.
UX Poland 2016 - Marcin Bober - Invisible UI and other lies.UX Poland 2016 - Marcin Bober - Invisible UI and other lies.
UX Poland 2016 - Marcin Bober - Invisible UI and other lies.
 
Understanding impact of aging workforce april, 2011 paullin
Understanding impact of aging workforce april, 2011 paullinUnderstanding impact of aging workforce april, 2011 paullin
Understanding impact of aging workforce april, 2011 paullin
 
SXSW Interactive 2016 Keynote: Esteban Contreras - Identity and the Chemistry...
SXSW Interactive 2016 Keynote: Esteban Contreras - Identity and the Chemistry...SXSW Interactive 2016 Keynote: Esteban Contreras - Identity and the Chemistry...
SXSW Interactive 2016 Keynote: Esteban Contreras - Identity and the Chemistry...
 
Webinar - Re-design the Organisation for Business Agility
Webinar - Re-design the Organisation for Business AgilityWebinar - Re-design the Organisation for Business Agility
Webinar - Re-design the Organisation for Business Agility
 
Usability and user experience the case of skype
Usability and user experience   the case of skypeUsability and user experience   the case of skype
Usability and user experience the case of skype
 
Calm technology
Calm technologyCalm technology
Calm technology
 
Less interaction
Less interactionLess interaction
Less interaction
 
GPB Medicare Telesales Opportunity
GPB Medicare Telesales OpportunityGPB Medicare Telesales Opportunity
GPB Medicare Telesales Opportunity
 
Thinking beyond UX
Thinking beyond UX Thinking beyond UX
Thinking beyond UX
 
Web interactive design, Online Marketing
Web interactive design, Online MarketingWeb interactive design, Online Marketing
Web interactive design, Online Marketing
 
Important but invisible: What the Aging Workforce Needs from Design -- Big De...
Important but invisible: What the Aging Workforce Needs from Design -- Big De...Important but invisible: What the Aging Workforce Needs from Design -- Big De...
Important but invisible: What the Aging Workforce Needs from Design -- Big De...
 
The age of Augmented Humanity
The age of Augmented Humanity The age of Augmented Humanity
The age of Augmented Humanity
 
Visual thinking for service design — CanUX November 2016
Visual thinking for service design — CanUX November 2016Visual thinking for service design — CanUX November 2016
Visual thinking for service design — CanUX November 2016
 
Strategic UX Workshop - UX Bristol
Strategic UX Workshop - UX BristolStrategic UX Workshop - UX Bristol
Strategic UX Workshop - UX Bristol
 
Designing Calm Technology
Designing Calm TechnologyDesigning Calm Technology
Designing Calm Technology
 
SxSW Interactive 2016: In Quotes
SxSW Interactive 2016: In Quotes SxSW Interactive 2016: In Quotes
SxSW Interactive 2016: In Quotes
 
Ux, l'innovation invisible waq
Ux, l'innovation invisible   waqUx, l'innovation invisible   waq
Ux, l'innovation invisible waq
 

Recently uploaded

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 

Recently uploaded (20)

Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 

Principles of Interactive Design

  • 2. Consistency  https://www.fitbit.com  Pages employ similar fonts/ font weights, color schemes, and button styles. Voice and behavior are consistent. Images used have similar look and qualities. Consistent use of large, high resolution images occupying much of the page.
  • 3. Visibility  https://turbotax.intuit.com/  User is given small, simple selections to choose from which expand to lead the user into more specific areas. The site is highly responsive to the user, and makes sophisticated suggestions to them based on their input. Recommended user options are highlighted by greying out the other options, making it easy for the user to navigate. The site is mobile friendly and does not require users on touch screens to hover to navigate.
  • 4. Learnability  https://www.rainforestfoods.com/experience/#!/slide-intro  User is slowly eased into an immersive experience that they control the pace of. Starting from a basic and mostly still image, the user is encouraged to "explore" their surroundings in a way that is not unlike exploring a jungle. User can discover various products and learn about how they are made while learning to navigate the site. Clicking on a product to buy brings the user to a page that they can purchase it from.
  • 5. Predictability  https://www.meetup.com/  Labels are clear and inform the user of future actions to take and what the results of that action will be. Thumbnails and descriptions offer a preview of what is to come if the user clicks on something. Contrast and color are used to guide the user towards certain actions (buttons).
  • 6. Feedback  https://www.protest.eu/  On selection there are a number of visual cues when navigating the site. For example, the drop down menus that expand when a user hovers over them. The loading screens and animations when an object is clicked make it clear that the user’s action is leading them to a different page. This extends to selecting items to buy, adding them to your cart, and finding a location where they are sold.