How to apply design principles in software engineering?

Ever wondered what

Transcript

1. W A I T … D E S I G N ? I N T R O D U C T I O N
2. “We’ve been building this brand new app using cutting-edge technologies for X months, but eventually it was NEVER LAUNCHED…” S O U N D S F A M I L I A R ?
3. “I’ve published this NPM package that I spent X months working on, but for some reason NO ONE REALLY USES IT…” S O U N D S F A M I L I A R ?
4. W H Y M Y S T A R T U P / P R O J E C T / L I B R A R Y / I S N ’ T S U C C E S S F U L poor marketing https://www.entrepreneur.com/article/307724
5. W H Y M Y S T A R T U P / P R O J E C T / L I B R A R Y / I S N ’ T S U C C E S S F U L poor marketing not the right team https://www.entrepreneur.com/article/307724
6. run out of cash / energy W H Y M Y S T A R T U P / P R O J E C T / L I B R A R Y / I S N ’ T S U C C E S S F U L poor marketing not the right team https://www.entrepreneur.com/article/307724
7. run out of cash / energy W H Y M Y S T A R T U P / P R O J E C T / L I B R A R Y / I S N ’ T S U C C E S S F U L poor marketing not the right team https://www.entrepreneur.com/article/307724 no market need
8. run out of cash / energy W H Y M Y S T A R T U P / P R O J E C T / L I B R A R Y / I S N ’ T S U C C E S S F U L poor marketing not the right team https://www.entrepreneur.com/article/307724 no market need ⇵ doesn’t solve anyone’s problem
9. D E S I G N
10. the art of solving problems D E S I G N
11. Can D esign P rinciples Help Me To Become a Be tter Software Engin ee r? A L E X E Y T A K T A R O V @ M L F R G S P B F R O N T E N D M E E T U P — 0 5 / 0 3 / 2 0 1 9 !
12. T H E O R I G I N S O F D E S I G N C H A P T E R 1
13. BAUHAUS school of design: art and technology — a new unity 1 9 1 9 — 1 9 3 3
14. Bauhaus building in Dessau, designed by Walter Gropius
15. Founded in 1919 by Walter Gropius, BAUHAUS mission was to research multidisciplinary art through: C O LO U R T H E O RY, G E O M E T RY, PAT T E R N S A N D M AT E R I A L S
16. Gunta Stölzl, 1927 Paul Klee Wassily Kandinsky, 1922
17. Most of the artwork was still not available to the general audience.
18. Most of the artwork was still not available to the general audience. A P R O D U C T D E S I G N However, BAUHAUS gave birth to what later will be called:
19. Wilhelm Wagenfeld, 1923 Marcel Breuer, 1925
20. The school was shot down by the Nazis in 1933. ✕
21. The school was shot down by the Nazis in 1933. ✕ The artists moved to the U.S., Britain, or Russia, where they were well accepted and took the school tradition to other institutions. ← → →
22. Technologies and materials discovered through the war meet the consumer market T H E P O S T W A R D E S I G N
23. To make individual products attractive to customers. T H E N E W R O L E O F D E S I G N Max Bill’s wall clock for Junhangs, 1956
24. Braun T-24 by Dieter Rams, 1956 Tizio desk lamp by Richard Sapper, 1972
25. Nikon-1, 1948 IBM corporate identity, by Paul Rand, 1956 Atari 2600, 1977
26. A P P L Y I N G T H E R U L E S O F D E S I G N C H A P T E R 2
27. Are there any methods of design that can be applied in Software Engineering? Q U E S T I O N
28. “Since the early 50s the activity of designing has been the subject of systematic and scientific analysis, it has been codified into a set of procedures … by manufacturing corporations (Philips, IBM)” P E T E R D O R M E R , “ D E S I G N S I N C E 1 9 4 5 ”
29. turns out there are dozens of them… https://principles.design
30. V I S I B I L I T Y P R I N C I P L E the more visible functions are, the more likely users will be able to know what to do next. prioritise important functions!
31. Panasonic RQ-2101 Panasonic RQ-2105 Visibility Recording is what matters now
32. // Cancels an active subscription // and sends a confirmation email function cancelSubscription(user, email, testMode) { // ... } cancelSubscription(user, "email@example.com", false);
33. function cancelSubscription(user, email = null, testMode = false) // better! function cancelSubscription(user, options = {}) cancelSubscription(user) cancelSubscription(user, { sendConfirmationTo: 'someone@example.com', testMode: true }) // Ruby cancel_subscription(user, with_test_mode: true)
34. C O N S T R A I N T S P R I N C I P L E an artificially reduced complexity may improve the user experience
37. A S M A R T D O O R L O C K F O U N D I N S W E D E N has only 4 digits, order does not matter 44 = 256 combinations code is 2244 — damn easy to remember
38. A S M A R T D O O R L O C K F O U N D I N S W E D E N has only 4 digits, order does not matter 44 = 256 combinations code is 2244 — damn easy to remember
39. F E E D B A C K & M A P P I N G P R I N C I P L E S a relationship between user’s actions and effects in the real world
40. Mapping When I press ▶ the wheel starts to spin Panasonic RQ-2105 Feedback A button: press to activate, immediate physical feedback
41. Feedback & Mapping — is what makes users feel confident with your product. It also powers the creativity.
42. Let’s say you’re working on an interactive part of your app that is only activated when a specific element gets into a viewport. E X A M P L E F R O M E N G I N E E R I N G
43. Let’s say you’re working on an interactive part of your app that is only activated when a specific element gets into a viewport. E X A M P L E F R O M E N G I N E E R I N G This looks like a black-box, developing this becomes painful: code → refresh → scroll → …
44. — proper decomposition — reducing side-effects — testing and TDD — development tools R E D U C I N G T H E F E E D B A C K C Y C L E
45. Saving in time feels like simplicity T H E L A W O F S I M P L I C I T Y
46. Saving in time feels like simplicity T H E L A W O F S I M P L I C I T Y # code > create-react-app new-app # test > npx localtunnel --port 8080 # deploy > now
47. A F F O R D A N C E P R I N C I P L E an attribute of an object that allows people to know how to use it
48. Yamaha CR-600 Affordance A Control Knob reflects the natural movement pattern
49. A F F O R D A N C E C A N B E I M P L I E D B Y T H E C O N T E X T
50. A F F O R D A N C E C A N B E I M P L I E D B Y T H E C O N T E X T A Lemon Squeezer by Philippe Starck, 1990
51. <MediaQuery minDeviceWidth={700}> {matches => <div> ... </div>} </MediaQuery> Function-as-a-Prop pattern popularised by React-Motion is now widely accepted by the developers
52. https://github.com/contra/react-responsive <MediaQuery minDeviceWidth={700}> {matches => <div> ... </div>} </MediaQuery> Function-as-a-Prop pattern popularised by React-Motion is now widely accepted by the developers
53. A D E S I G N P R O C E S S C H A P T E R 3
54. Empathy → Problem → Solution → Insight → UX
55. Empathy → Problem → Solution → Insight → DX ▶ Alex Kotliarskyi: Facebook product Infrastructure as a developer I know that … … building complex UIs is hard an idea of reconcilation UI(data) React
56. S T O R Y T E L L I N G I N D E S I G N a good design is about telling stories
57. Feature: uploader with file storage and versions I want to upload files to the filesystem Background: Given an uploader class that uses the 'file' storage And that the uploader class has a version named 'thumb' Scenario: store a file When I store the file 'fixtures/bork.txt' Then there should be a file at 'public/uploads/bork.txt' Cucumber (BDD) is a great example of storytelling in software design
58. Timecop’s (a Ruby gem for time travel in tests) design is based on a 1994 sci-fi movie with the same name starring Jean-Claude Van Damme Timecop.freeze(1.week.ago) sleep(10) new_time == Time.now # ==> true Timecop.return # "turn off" Timecop Timecop.travel(1.month.from_now)
59. A R E W E T H E D E S I G N E R S ? C H A P T E R 4
60. “Designer — is a planner with an aesthetic sense. He has an ability to respond to whatever demand is made of him … and he helps people to solve certain problems without stylistic preconceptions” B R U N O M U N A R I , “ D E S I G N A S A R T ”
61. “Designer — is a planner with an aesthetic sense. He has an ability to respond to whatever demand is made of him … and he helps people to solve certain problems without stylistic preconceptions” B R U N O M U N A R I , “ D E S I G N A S A R T ” Engineer
62. Our job as engineers is not about writing code, it’s about solving problems and being responsible for the solution.
63. Victor Papanek Design for the Real World Don Norman The Design of Everyday Things Deyan Sudjic The Language of Things John Maeda The Laws of Simplicity • Peter Dormer, “Design Since 1945” • Charlotte and Peter Fiell, “The Story of Design” • ▶ Mike Monteiro, "How Designers Destroyed the World” • ▶ Hainbach YouTube Channel