Download - Human Design For Developers - Codestock 2015
![Page 1: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/1.jpg)
HUMAN DESIGN FOR DEVELOPERS
July 10, 2015 - Codestock Richard Lee - @richardlee_tn - [email protected]
![Page 2: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/2.jpg)
1. What problem does it solve?
2. How does this affect the user?
3. Why is it better than the alternative?
Three questions for the developers AND designers
in the room
![Page 3: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/3.jpg)
<—- Chasm
King —->
![Page 4: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/4.jpg)
Crazy smart developers
![Page 5: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/5.jpg)
![Page 6: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/6.jpg)
HAT ++1;
![Page 7: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/7.jpg)
![Page 8: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/8.jpg)
![Page 9: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/9.jpg)
![Page 10: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/10.jpg)
![Page 11: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/11.jpg)
![Page 12: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/12.jpg)
![Page 13: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/13.jpg)
![Page 14: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/14.jpg)
![Page 15: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/15.jpg)
Developer-adjacent
![Page 16: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/16.jpg)
![Page 17: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/17.jpg)
———>
![Page 18: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/18.jpg)
![Page 19: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/19.jpg)
![Page 20: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/20.jpg)
As designers that also code a bit, our taste is better than our craft.
!As developers who do more than code,
our craft is better than our taste. !
Both are equally noble, and both benefit from learning more about the other.
![Page 21: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/21.jpg)
![Page 22: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/22.jpg)
![Page 23: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/23.jpg)
![Page 24: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/24.jpg)
…sorry?
![Page 25: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/25.jpg)
Design is…Design includes things like visual graphics, user interfaces and animation. !Design is also early research into problems and users. !Design is also making good use of the research findings. !Design is also testing concepts with real users, and being open to change, to improvement.
![Page 26: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/26.jpg)
Refactoring your code is design. !Making your application extensible - that’s design. !Ensuring you have defaults in place so things don’t blow up when dependencies fail - that’s just good design.
![Page 27: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/27.jpg)
![Page 28: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/28.jpg)
sensory memory !attention !short-term memory
The Memory Cycle
![Page 29: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/29.jpg)
![Page 30: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/30.jpg)
#RAGEQUIT
![Page 31: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/31.jpg)
Designing for emotion(This one’s for my little girl)
![Page 32: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/32.jpg)
<—- WINNING!
![Page 33: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/33.jpg)
![Page 34: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/34.jpg)
hierarchy of needs
![Page 35: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/35.jpg)
hierarchy of user needs
![Page 36: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/36.jpg)
Usable = edible. We can do better.
![Page 37: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/37.jpg)
Let’s push for pleasurable. Let’s demand delicious.
![Page 38: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/38.jpg)
Now for a look at Perception(See what I did there?)
![Page 39: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/39.jpg)
PerceptionDepicting depth & distance (Distance cues)
•Absolute cues •Relative cues •Two types of distance
![Page 40: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/40.jpg)
![Page 41: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/41.jpg)
Designers should provide:
•Affordances
•Good conceptual model
•Visibility
•Good mapping
•Feedback
![Page 42: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/42.jpg)
!
Norman’s 7 Stages of Action
•Forming the goal
•Forming the intention
•Specifying an action
•Executing the action
•Perceiving the state of the world
•Interpreting the state of the world
•Evaluating the outcome
![Page 43: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/43.jpg)
• Stay out of people’s way
• Present few choices
• Limit distractions
• Group related objects near each other
• Create visual hierarchy to match user’s needs
• Provide strong information scent
• Provide signposts and cues
• Provide context
• Avoid jargon
• Make things efficient
• Use appropriate defaults
• Use constraints appropriately
• Make actions reversible
• Reduce latency
• Provide feedback
• Use emotion
• Less is more
• Be consistent
• Make a good first impression
• Be credible and trustworthy
Experience design principles (big nod to Whitney Hess @whitneyhess)
![Page 44: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/44.jpg)
!
Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity
![Page 45: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/45.jpg)
!
Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity
![Page 46: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/46.jpg)
!
Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure
![Page 47: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/47.jpg)
!
Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure
4. Law of Symmetry
![Page 48: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/48.jpg)
!
Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure
4. Law of Symmetry 5. Law of Common Fate
![Page 49: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/49.jpg)
!
Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure
4. Law of Symmetry 5. Law of Common Fate 6. Law of Continuity
![Page 50: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/50.jpg)
!
Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure
4. Law of Symmetry 5. Law of Common Fate 6. Law of Continuity
7. Law of Simplicity
![Page 51: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/51.jpg)
!
Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure
4. Law of Symmetry 5. Law of Common Fate 6. Law of Continuity
7. Law of Simplicity 8. Law of Past XP
![Page 52: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/52.jpg)
!
Gestalt !Gestalt = “unified whole” Gestalt Laws of Grouping !1. Law of Proximity 2. Law of Similarity 3. Law of Closure
4. Law of Symmetry 5. Law of Common Fate 6. Law of Continuity
7. Law of Simplicity 8. Law of Past XP 9. Law of Figure and Ground
![Page 53: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/53.jpg)
Designers and developers get consistency, predictability & efficiency. (so do users) !Generally a really good idea. !Avoid if… • Grid too expensive for project • Consistency NOT DESIRED
Let’s briefly talk about Grid systems Why are grids and grid systems important?
![Page 54: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/54.jpg)
1. What problem does it solve?
2. How does this affect the user?
3. Why is it better than the alternative?
Remember these? !
As designers & as developers, for every decision we make or solution we offer, we should be able to answer these three questions:
These questions get to the heart of any brisk debate and can resolve conflicting viewpoints effectively.
![Page 55: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/55.jpg)
Final thoughts !Designers are strongly opinionated creatures who by and large are fairly certain that our opinion is valuable based on our experience solving problems using design. Please, go get as much exposure as you can to the tech that supports your design work. You’ll be a better designer for it. !
![Page 56: Human Design For Developers - Codestock 2015](https://reader038.vdocuments.net/reader038/viewer/2022110315/55cdd09dbb61ebe6038b45e7/html5/thumbnails/56.jpg)
Final thoughts !Developers on the other hand are strongly opinionated creatures who by and large are fairly certain that our opinion is valuable based on our experience solving problems using code. Go get as much exposure as you can to the research, planning and design that provides structure and reason to your development work. You’ll be a better developer for it. !
Thank you, and happy learning!