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

Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryWilliamVickery6
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptxIntroduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptxnewslab143
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一
定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一
定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一lvtagr7
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...narwatsonia7
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造kbdhl05e
 
NATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detailNATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detailDesigntroIntroducing
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdfvaibhavkanaujia
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfSumit Lathwal
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
Call Girls Satellite 7397865700 Ridhima Hire Me Full Night
Call Girls Satellite 7397865700 Ridhima Hire Me Full NightCall Girls Satellite 7397865700 Ridhima Hire Me Full Night
Call Girls Satellite 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back17lcow074
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts ServiceCall Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Servicejennyeacort
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 

Recently uploaded (20)

Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptxIntroduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一
定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一
定制(RMIT毕业证书)澳洲墨尔本皇家理工大学毕业证成绩单原版一比一
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...
Housewife Call Girls NRI Layout - Call 7001305949 Rs-3500 with A/C Room Cash ...
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
 
NATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detailNATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detail
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 night
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 nightCheap Rate Call girls Kalkaji 9205541914 shot 1500 night
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 night
 
Call Girls Satellite 7397865700 Ridhima Hire Me Full Night
Call Girls Satellite 7397865700 Ridhima Hire Me Full NightCall Girls Satellite 7397865700 Ridhima Hire Me Full Night
Call Girls Satellite 7397865700 Ridhima Hire Me Full Night
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts ServiceCall Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).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