How to apply design principles in software engineering?

Slide 1

Slide 1 text

W A I T … D E S I G N ? I N T R O D U C T I O N

Slide 2

Slide 2 text

“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 ?

Slide 3

Slide 3 text

“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 ?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

D E S I G N

Slide 10

Slide 10 text

the art of solving problems D E S I G N

Slide 11

Slide 11 text

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 !

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

BAUHAUS school of design: art and technology — a new unity 1 9 1 9 — 1 9 3 3

Slide 14

Slide 14 text

Bauhaus building in Dessau, designed by Walter Gropius

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Gunta Stölzl, 1927 Paul Klee Wassily Kandinsky, 1922

Slide 17

Slide 17 text

Most of the artwork was still not available to the general audience.

Slide 18

Slide 18 text

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:

Slide 19

Slide 19 text

Wilhelm Wagenfeld, 1923 Marcel Breuer, 1925

Slide 20

Slide 20 text

The school was shot down by the Nazis in 1933. ✕

Slide 21

Slide 21 text

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. ← → →

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Braun T-24 by Dieter Rams, 1956 Tizio desk lamp by Richard Sapper, 1972

Slide 25

Slide 25 text

Nikon-1, 1948 IBM corporate identity, by Paul Rand, 1956 Atari 2600, 1977

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Are there any methods of design that can be applied in Software Engineering? Q U E S T I O N

Slide 28

Slide 28 text

“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 ”

Slide 29

Slide 29 text

turns out there are dozens of them… https://principles.design

Slide 30

Slide 30 text

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!

Slide 31

Slide 31 text

Panasonic RQ-2101 Panasonic RQ-2105 Visibility Recording is what matters now

Slide 32

Slide 32 text

// Cancels an active subscription // and sends a confirmation email function cancelSubscription(user, email, testMode) { // ... } cancelSubscription(user, "[email protected]", false);

Slide 33

Slide 33 text

function cancelSubscription(user, email = null, testMode = false) // better! function cancelSubscription(user, options = {}) cancelSubscription(user) cancelSubscription(user, { sendConfirmationTo: '[email protected]', testMode: true }) // Ruby cancel_subscription(user, with_test_mode: true)

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Mapping When I press ▶ the wheel starts to spin Panasonic RQ-2105 Feedback A button: press to activate, immediate physical feedback

Slide 41

Slide 41 text

Feedback & Mapping — is what makes users feel confident with your product. It also powers the creativity.

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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 → …

Slide 44

Slide 44 text

— 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

Slide 45

Slide 45 text

Saving in time feels like simplicity T H E L A W O F S I M P L I C I T Y

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Yamaha CR-600 Affordance A Control Knob reflects the natural movement pattern

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

{matches =>

...

} Function-as-a-Prop pattern popularised by React-Motion is now widely accepted by the developers

Slide 52

Slide 52 text

https://github.com/contra/react-responsive {matches =>

...

} Function-as-a-Prop pattern popularised by React-Motion is now widely accepted by the developers

Slide 53

Slide 53 text

A D E S I G N P R O C E S S C H A P T E R 3

Slide 54

Slide 54 text

Empathy → Problem → Solution → Insight → UX

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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)

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

“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 ”

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Our job as engineers is not about writing code, it’s about solving problems and being responsible for the solution.

Slide 63

Slide 63 text

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