SlideShare a Scribd company logo
1 of 36
Download to read offline
Design of Everyday Things
Fundamental Principles of Interaction
Isaac
Learn how to code
2
The book and author
3
Chapters
● There are many other content
● Only one paragraph taught me A LOT!
4
Agenda
- Warm up
- Norman Doors
- Discoverability and Understanding
- Fundamental Principles of Interaction
- Affordances
- Signifier
- Mapping
- Feedback
- Conceptual Models
- What I learned as a developer
5
Warm up
● Norman Doors
● Discoverability and Understanding
How to drink a cup
of coffee….??
6
Have you ever...
●
● Got a requirement
● Just implement it
● Don’t know who is the user
● Don’t know how user use it
● Don’t care,
just resolve ticket anyway
Try to figure out
● Who is the user
● What is the user intention
● How user use it
Whom you fight for?
What you fight for?
Norman Doors
● Doors should be simple
● Norman Doors confuse people
● It seems you can pull
● But it want you push
● Sometimes is designed for
beautiful, but become invisible
and unusable
9
Norman Doors
● Sometimes is designed for beautiful, but become
invisible and unusable
10
Discoverability and Understanding
● It’s the most important characteristics of good design
● Discover-ability
○ Figure out what actions are possible
○ Where and how to perform them
● Understanding
○ What does it all mean?
○ How is the product supposed to be used?
○ What do all the different controllers and settings mean?
11
Discoverability and Understanding
Discoverability: can push only
Understanding: just push to open the door
Discoverability: Won’t notice there is a door
Understanding: Can’t understand how to
open, need try-and-error
12
Discoverability and Understanding
Buttons are visible, but unable to know the meaning
13
Discoverability and Understanding
● Large method
○ Discoverable
○ Can’t be understood
● @DoWhateverYouNeed
○ Can’t be discoverable
○ Can be understood
It’s easy to build another
kind of Norman Doors
Fundamental Principle of Interactions
In order to come out good design, need take care of following principles:
● Affordances
● Signifier
● Feedback
● Mapping
● Conceptual Models
15
Affordances
An affordance is a relationship between the properties of an object and the
capabilities of the agent that determine just how the object could possibly be used.
A chair affords support and sitting
16
Consider...
What device user use when designing software feature
● PC
● Mobile
○ Browser
○ Apps
● SMS
● Monitor system
○ Time series
○ Event based
● IOT
Signifier
● Affordance: it is a relationship
● Affordance determine what actions are possible.
● Signifiers communicate where the action should take place.
18
Signifier
Some doors unable to know how to open without a signifier
19
Signifier
Signifier is an important device for communication, whether or not communication
is intended
20
Signifier
The sink that would not drain
A door unable to push/pull
Signifier confuses people
21
Consider..
Based on feature and afaffordance
● How user find a signifier and understand how to use it
● How other developers find your code and understand it
○ Have you separate or decouple high cohesion code far far away?
■ Ex. An annotation to code pre/post action far away from core logic?
■ Ex. An annotation to commit a transaction based on internal counter, which is far away
from the place user persist data?
○ Have you use design pattern to decouple high cohesion logic to many many small pieces code
code?
● Visit oodesign.com to learn design pattern’s when to use
.
Mapping
● Mapping is the relationship between the elements of two sets of things
● Ex. Switch mapping Lights in office
● Mapping the layout of controls and displays
23
Mapping
Steeling a car, rotate the steering wheel clockwise to cause the car to turn right.
24
Mapping
Tank is different,its designed to control wheel speed because it uses track
25
Consider..
When designing a feature
● How you explain how will you implement to others?
● Is there same term in your code?
● Why you separate modules?
● When you separate modules, will other developers know where to find a
specific model?
● Is there a way for developers to map a feature/idea to modules/models?
Feedback
User can’t control things without feedback
27
Feedback
● Feedback must be immediate: even a delay of a tenth of a second can be
disconcerting. If the delay is too long, people often give up, going off to do
other activities.
28
Feedback
● Too much feedback become annoying.
29
Feedback
● Use one simple signal producer to reduce cost, let people not easy to
remember (Beep code)
● Beep code definition may be different in different machines. We'll be confused
when those machines beep together.
● Feedback has to be planned and prioritized.
● Feedback is essential, but it has to be done correctly. Appropriately.
30
Consider...
In order to build things easy to control, need to have good feedback
(“User” can be API/method client code)
● Does your code always response quickly?
● Sometimes may not have quick response, how user know it?
● Can user choose not to wait?
● What will happen when user choose not to wait and cancel?
Does it really stop or keep running under the scene?
● Does your code thread safe, so that status won’t become out of control?
● Provide a way for user to understand what’s going on.
Conceptual Models
● A conceptual model is an explanation, usually highly simplified, of how something
works.
● Ex. There are folders in screen, but it doesn't means there is really a folder in disk
● Ex. User browse data in PC and think it's a data in PC, but data is in cloud actually.
32
Conceptual Models
● Conceptual models are often inferred from the device itself. Some models are
passed on from person to person. Some come from manuals.
● Some conceptual models come from experience, so wrong conceptual
models let devices hard to use
● How things work come from user perceived structure
○ Signifier
○ Affordance
○ Mappings
33
Consider...
User may try by himself or study document before try.
● How user understand your system?
● How to understand your design?
○ Need a document
○ Introduce mental model
○ Design decisions
○ Introduce where to find code
○ How to troubleshoot
○ It will be great to provide ways to monitor
Learn from Spring
● Many abstraction layers, from documentation to code level.
● Need easy to read, discover and easy to understand
35
What I learned as a developer
● Developer design API to interact with Users/Developers
● Every RestAPI/Framework/library/method/lineOfCode are API
● When designing APIs, we need make sure design is good
● Good design is discoverable and easy to understand
● Good document is a must have for complex conceptual models
● How to come out a good design?
○ Affordance
○ Signifier
○ Mapping
○ Feedback
○ Conceptual Models
● Whenever you read Code Complete/Clean Code/Design Pattern/Effective
Java, masters want to share how to come out good design 36

More Related Content

Similar to Design of Everyday Things Fundamental Principles

Book: Software Architecture and Decision-Making
Book: Software Architecture and Decision-MakingBook: Software Architecture and Decision-Making
Book: Software Architecture and Decision-MakingSrinath Perera
 
CIS375 Interaction Designs Chapter11
CIS375 Interaction Designs Chapter11CIS375 Interaction Designs Chapter11
CIS375 Interaction Designs Chapter11Dr. Ahmed Al Zaidy
 
How we sold design systems to internal team and then to our clients
How we sold design systems to internal team and then to our clientsHow we sold design systems to internal team and then to our clients
How we sold design systems to internal team and then to our clientsCzech Design Systems Community
 
A friendly guide to requirements management
A friendly guide to requirements managementA friendly guide to requirements management
A friendly guide to requirements managementAnnika Dahlqvist
 
UX class presentation
UX class presentationUX class presentation
UX class presentationTheo V
 
From conception to realization
From conception to realizationFrom conception to realization
From conception to realizationMarek Sotak
 
Your first 5 PHP design patterns - ThatConference 2012
Your first 5 PHP design patterns - ThatConference 2012Your first 5 PHP design patterns - ThatConference 2012
Your first 5 PHP design patterns - ThatConference 2012Aaron Saray
 
Introduction to building wireframes
Introduction to building wireframesIntroduction to building wireframes
Introduction to building wireframesHong Qu
 
Clean application development tutorial
Clean application development tutorialClean application development tutorial
Clean application development tutorialAdam Culp
 
"What we learned from 5 years of building a data science software that actual...
"What we learned from 5 years of building a data science software that actual..."What we learned from 5 years of building a data science software that actual...
"What we learned from 5 years of building a data science software that actual...Dataconomy Media
 
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...Ultan O'Broin
 
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...Ultan O'Broin
 
Software Engineering Primer
Software Engineering PrimerSoftware Engineering Primer
Software Engineering PrimerGeorg Buske
 
Picking the right architecture and sticking to it
Picking the right architecture and sticking to itPicking the right architecture and sticking to it
Picking the right architecture and sticking to itPetter Holmström
 
ATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologiesATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologiesFloat
 
When and how start learning computer
When and how start learning computer  When and how start learning computer
When and how start learning computer Ali Ghasempour
 
The future of CMS @T3UNI 2013 Annecy France
The future of CMS @T3UNI 2013 Annecy FranceThe future of CMS @T3UNI 2013 Annecy France
The future of CMS @T3UNI 2013 Annecy FranceOlivier Dobberkau
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introductionIsmail Norri
 

Similar to Design of Everyday Things Fundamental Principles (20)

Book: Software Architecture and Decision-Making
Book: Software Architecture and Decision-MakingBook: Software Architecture and Decision-Making
Book: Software Architecture and Decision-Making
 
CIS375 Interaction Designs Chapter11
CIS375 Interaction Designs Chapter11CIS375 Interaction Designs Chapter11
CIS375 Interaction Designs Chapter11
 
How we sold design systems to internal team and then to our clients
How we sold design systems to internal team and then to our clientsHow we sold design systems to internal team and then to our clients
How we sold design systems to internal team and then to our clients
 
A friendly guide to requirements management
A friendly guide to requirements managementA friendly guide to requirements management
A friendly guide to requirements management
 
UX class presentation
UX class presentationUX class presentation
UX class presentation
 
From conception to realization
From conception to realizationFrom conception to realization
From conception to realization
 
Your first 5 PHP design patterns - ThatConference 2012
Your first 5 PHP design patterns - ThatConference 2012Your first 5 PHP design patterns - ThatConference 2012
Your first 5 PHP design patterns - ThatConference 2012
 
Introduction to building wireframes
Introduction to building wireframesIntroduction to building wireframes
Introduction to building wireframes
 
Clean application development tutorial
Clean application development tutorialClean application development tutorial
Clean application development tutorial
 
"What we learned from 5 years of building a data science software that actual...
"What we learned from 5 years of building a data science software that actual..."What we learned from 5 years of building a data science software that actual...
"What we learned from 5 years of building a data science software that actual...
 
Designing and prototyping
Designing and prototypingDesigning and prototyping
Designing and prototyping
 
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
 
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
 
Software Engineering Primer
Software Engineering PrimerSoftware Engineering Primer
Software Engineering Primer
 
Picking the right architecture and sticking to it
Picking the right architecture and sticking to itPicking the right architecture and sticking to it
Picking the right architecture and sticking to it
 
ATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologiesATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologies
 
Designing and prototyping
Designing and prototypingDesigning and prototyping
Designing and prototyping
 
When and how start learning computer
When and how start learning computer  When and how start learning computer
When and how start learning computer
 
The future of CMS @T3UNI 2013 Annecy France
The future of CMS @T3UNI 2013 Annecy FranceThe future of CMS @T3UNI 2013 Annecy France
The future of CMS @T3UNI 2013 Annecy France
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 

More from Isaac Liao

Java reference objects basic
Java reference objects   basicJava reference objects   basic
Java reference objects basicIsaac Liao
 
Effective java item 80 and 81
Effective java   item 80 and 81Effective java   item 80 and 81
Effective java item 80 and 81Isaac Liao
 
Effective java item 80 prefer executors, tasks, and streams to threads
Effective java   item 80  prefer executors, tasks, and  streams to threadsEffective java   item 80  prefer executors, tasks, and  streams to threads
Effective java item 80 prefer executors, tasks, and streams to threadsIsaac Liao
 
Coding practice
Coding practiceCoding practice
Coding practiceIsaac Liao
 
Concurrent package classes
Concurrent package classesConcurrent package classes
Concurrent package classesIsaac Liao
 
Count downlatch & implementation
Count downlatch & implementationCount downlatch & implementation
Count downlatch & implementationIsaac Liao
 
Study effective java item 78 synchronize access to mutable data
Study effective java   item 78  synchronize access to mutable dataStudy effective java   item 78  synchronize access to mutable data
Study effective java item 78 synchronize access to mutable dataIsaac Liao
 

More from Isaac Liao (8)

Java reference objects basic
Java reference objects   basicJava reference objects   basic
Java reference objects basic
 
Effective java item 80 and 81
Effective java   item 80 and 81Effective java   item 80 and 81
Effective java item 80 and 81
 
Effective java item 80 prefer executors, tasks, and streams to threads
Effective java   item 80  prefer executors, tasks, and  streams to threadsEffective java   item 80  prefer executors, tasks, and  streams to threads
Effective java item 80 prefer executors, tasks, and streams to threads
 
Coding practice
Coding practiceCoding practice
Coding practice
 
Concurrent package classes
Concurrent package classesConcurrent package classes
Concurrent package classes
 
Count downlatch & implementation
Count downlatch & implementationCount downlatch & implementation
Count downlatch & implementation
 
Study effective java item 78 synchronize access to mutable data
Study effective java   item 78  synchronize access to mutable dataStudy effective java   item 78  synchronize access to mutable data
Study effective java item 78 synchronize access to mutable data
 
Concurrency
ConcurrencyConcurrency
Concurrency
 

Recently uploaded

The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi
 
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...Amil baba
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdftbatkhuu1
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfParomita Roy
 
Presentation.pptx about blender what is blender
Presentation.pptx about blender what is blenderPresentation.pptx about blender what is blender
Presentation.pptx about blender what is blenderUbaidurrehman997675
 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxmirandajeremy200221
 
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Delhi Call girls
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation decktbatkhuu1
 
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable BricksCosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricksabhishekparmar618
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile
 
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...Pooja Nehwal
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...Call Girls in Nagpur High Profile
 
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
SCRIP Lua HTTP PROGRACMACION PLC  WECON CASCRIP Lua HTTP PROGRACMACION PLC  WECON CA
SCRIP Lua HTTP PROGRACMACION PLC WECON CANestorGamez6
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxjanettecruzeiro1
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home
 
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...Suhani Kapoor
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...ranjana rawat
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsCharles Obaleagbon
 
Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptxFashion trends before and after covid.pptx
Fashion trends before and after covid.pptxVanshNarang19
 

Recently uploaded (20)

The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
 
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
 
Presentation.pptx about blender what is blender
Presentation.pptx about blender what is blenderPresentation.pptx about blender what is blender
Presentation.pptx about blender what is blender
 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptx
 
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable BricksCosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricks
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
 
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
SCRIP Lua HTTP PROGRACMACION PLC  WECON CASCRIP Lua HTTP PROGRACMACION PLC  WECON CA
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past Questions
 
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
 
Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptxFashion trends before and after covid.pptx
Fashion trends before and after covid.pptx
 

Design of Everyday Things Fundamental Principles

  • 1. Design of Everyday Things Fundamental Principles of Interaction Isaac
  • 2. Learn how to code 2
  • 3. The book and author 3
  • 4. Chapters ● There are many other content ● Only one paragraph taught me A LOT! 4
  • 5. Agenda - Warm up - Norman Doors - Discoverability and Understanding - Fundamental Principles of Interaction - Affordances - Signifier - Mapping - Feedback - Conceptual Models - What I learned as a developer 5
  • 6. Warm up ● Norman Doors ● Discoverability and Understanding How to drink a cup of coffee….?? 6
  • 7. Have you ever... ● ● Got a requirement ● Just implement it ● Don’t know who is the user ● Don’t know how user use it ● Don’t care, just resolve ticket anyway
  • 8. Try to figure out ● Who is the user ● What is the user intention ● How user use it Whom you fight for? What you fight for?
  • 9. Norman Doors ● Doors should be simple ● Norman Doors confuse people ● It seems you can pull ● But it want you push ● Sometimes is designed for beautiful, but become invisible and unusable 9
  • 10. Norman Doors ● Sometimes is designed for beautiful, but become invisible and unusable 10
  • 11. Discoverability and Understanding ● It’s the most important characteristics of good design ● Discover-ability ○ Figure out what actions are possible ○ Where and how to perform them ● Understanding ○ What does it all mean? ○ How is the product supposed to be used? ○ What do all the different controllers and settings mean? 11
  • 12. Discoverability and Understanding Discoverability: can push only Understanding: just push to open the door Discoverability: Won’t notice there is a door Understanding: Can’t understand how to open, need try-and-error 12
  • 13. Discoverability and Understanding Buttons are visible, but unable to know the meaning 13
  • 14. Discoverability and Understanding ● Large method ○ Discoverable ○ Can’t be understood ● @DoWhateverYouNeed ○ Can’t be discoverable ○ Can be understood It’s easy to build another kind of Norman Doors
  • 15. Fundamental Principle of Interactions In order to come out good design, need take care of following principles: ● Affordances ● Signifier ● Feedback ● Mapping ● Conceptual Models 15
  • 16. Affordances An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used. A chair affords support and sitting 16
  • 17. Consider... What device user use when designing software feature ● PC ● Mobile ○ Browser ○ Apps ● SMS ● Monitor system ○ Time series ○ Event based ● IOT
  • 18. Signifier ● Affordance: it is a relationship ● Affordance determine what actions are possible. ● Signifiers communicate where the action should take place. 18
  • 19. Signifier Some doors unable to know how to open without a signifier 19
  • 20. Signifier Signifier is an important device for communication, whether or not communication is intended 20
  • 21. Signifier The sink that would not drain A door unable to push/pull Signifier confuses people 21
  • 22. Consider.. Based on feature and afaffordance ● How user find a signifier and understand how to use it ● How other developers find your code and understand it ○ Have you separate or decouple high cohesion code far far away? ■ Ex. An annotation to code pre/post action far away from core logic? ■ Ex. An annotation to commit a transaction based on internal counter, which is far away from the place user persist data? ○ Have you use design pattern to decouple high cohesion logic to many many small pieces code code? ● Visit oodesign.com to learn design pattern’s when to use .
  • 23. Mapping ● Mapping is the relationship between the elements of two sets of things ● Ex. Switch mapping Lights in office ● Mapping the layout of controls and displays 23
  • 24. Mapping Steeling a car, rotate the steering wheel clockwise to cause the car to turn right. 24
  • 25. Mapping Tank is different,its designed to control wheel speed because it uses track 25
  • 26. Consider.. When designing a feature ● How you explain how will you implement to others? ● Is there same term in your code? ● Why you separate modules? ● When you separate modules, will other developers know where to find a specific model? ● Is there a way for developers to map a feature/idea to modules/models?
  • 27. Feedback User can’t control things without feedback 27
  • 28. Feedback ● Feedback must be immediate: even a delay of a tenth of a second can be disconcerting. If the delay is too long, people often give up, going off to do other activities. 28
  • 29. Feedback ● Too much feedback become annoying. 29
  • 30. Feedback ● Use one simple signal producer to reduce cost, let people not easy to remember (Beep code) ● Beep code definition may be different in different machines. We'll be confused when those machines beep together. ● Feedback has to be planned and prioritized. ● Feedback is essential, but it has to be done correctly. Appropriately. 30
  • 31. Consider... In order to build things easy to control, need to have good feedback (“User” can be API/method client code) ● Does your code always response quickly? ● Sometimes may not have quick response, how user know it? ● Can user choose not to wait? ● What will happen when user choose not to wait and cancel? Does it really stop or keep running under the scene? ● Does your code thread safe, so that status won’t become out of control? ● Provide a way for user to understand what’s going on.
  • 32. Conceptual Models ● A conceptual model is an explanation, usually highly simplified, of how something works. ● Ex. There are folders in screen, but it doesn't means there is really a folder in disk ● Ex. User browse data in PC and think it's a data in PC, but data is in cloud actually. 32
  • 33. Conceptual Models ● Conceptual models are often inferred from the device itself. Some models are passed on from person to person. Some come from manuals. ● Some conceptual models come from experience, so wrong conceptual models let devices hard to use ● How things work come from user perceived structure ○ Signifier ○ Affordance ○ Mappings 33
  • 34. Consider... User may try by himself or study document before try. ● How user understand your system? ● How to understand your design? ○ Need a document ○ Introduce mental model ○ Design decisions ○ Introduce where to find code ○ How to troubleshoot ○ It will be great to provide ways to monitor
  • 35. Learn from Spring ● Many abstraction layers, from documentation to code level. ● Need easy to read, discover and easy to understand 35
  • 36. What I learned as a developer ● Developer design API to interact with Users/Developers ● Every RestAPI/Framework/library/method/lineOfCode are API ● When designing APIs, we need make sure design is good ● Good design is discoverable and easy to understand ● Good document is a must have for complex conceptual models ● How to come out a good design? ○ Affordance ○ Signifier ○ Mapping ○ Feedback ○ Conceptual Models ● Whenever you read Code Complete/Clean Code/Design Pattern/Effective Java, masters want to share how to come out good design 36