Slide 1

Slide 1 text

Алексей Тактаров — @mlfrg ИНЖЕНЕРЫ ПРИДУМАЛИ ДИЗАЙН: ПРОДУКТОВЫЙ ПОДХОД ДЛЯ РАЗРАБОТЧИКОВ T V E R . I O 1 7 / 1 0 / 2 0 1 9

Slide 2

Slide 2 text

что такое промышленный дизайн? история и предпосылки ° принципы дизайна и код, который мы пишем
 (на примере open-source пакетов) ° продуктовый подход для разработчиков ° П Л А Н Н А С Е Г О Д Н Я

Slide 3

Slide 3 text

Ч Т О Т А К О Е П Р О М Ы Ш Л Е Н Н Ы Й Д И З А Й Н ? Г Л А В А 1

Slide 4

Slide 4 text

Peter Behrens for AEG, 1920 сделать промышленную продукцию привлекательной для покупателя. З А Д А Ч А Д И З А Й Н А

Slide 5

Slide 5 text

Здание школы Баухаус в Дессау, проект Вальтера Гропиуса

Slide 6

Slide 6 text

Wilhelm Wagenfeld, 1923 Marcel Breuer, 1925

Slide 7

Slide 7 text

П Р И Н Ц И П Ы Д И З А Й Н А В П Р О Г Р А М М И Р О В А Н И И Г Л А В А 2

Slide 8

Slide 8 text

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

Slide 9

Slide 9 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 10

Slide 10 text

https://principles.design

Slide 11

Slide 11 text

Universal Principles of Design (2003) – справочник из 100 универсальных рецептов дизайна

Slide 12

Slide 12 text

дизайн-принципы чаще всего основаны на особенностях работы мозга и нашего восприятия

Slide 13

Slide 13 text

З А К О Н Ф И Т Т С А ( F I T T S ’ S L A W ) A B C D E F G H I ~ 0.15s ~ 0.3s A B A B C D E З А К О Н Х И К А ( H I C K ’ S L A W ) ~ 0.1s ~ 0.5s

Slide 14

Slide 14 text

В И Д И М О С Т Ь ( V I S I B I L I T Y ) чем более видимы функции объекта, тем более вероятно, что пользователь поймет, что делать дальше. следствие: важные функции должны иметь больший приоритет!

Slide 15

Slide 15 text

Panasonic RQ-2105 Принцип Видимости “Запись” важнее

Slide 16

Slide 16 text

import { Generator, MT19937 } from "random" README: Getting Started…

Slide 17

Slide 17 text

import random from "random"

Slide 18

Slide 18 text

Flexibility-Usability trade-off — проблема выбора между функциональностью и простотой в использовании

Slide 19

Slide 19 text

Flexibility-Usability trade-off — проблема выбора между функциональностью и простотой в использовании

Slide 20

Slide 20 text

1 . 2 .

Slide 21

Slide 21 text

UI-паттерн — спрятать дополнительные функции (на картинке интерфейс Stripe)

Slide 22

Slide 22 text

import convert from “currencies" const value = convert(15).from("USD").to("EUR") пример пакета для конвертации валют (прототип: easy-currencies)

Slide 23

Slide 23 text

import { Converter } from "currencies" const converter = new Converter({ provider: "OpenExchangeRates", key: "API_KEY" }) converter.convert(15, "USD", "EUR")

Slide 24

Slide 24 text

number_to_human(1, units: :distance) # "1 meter" именованные параметры и параметры по-умолчанию: разделить основной и дополнительный функционал

Slide 25

Slide 25 text

П Р И М Е Р И З N P M пакет для работы с Promise-очередью

Slide 26

Slide 26 text

const promise1 = (next, error, param) => { new Promise((resolve, reject) => { ... }) .then((res) => next(null, res)) }; const queue = makeQueue([], 3, 'someParam') queue.push(promise1, promise2, ...); G I T H U B : ★ 1

Slide 27

Slide 27 text

G I T H U B : ★ 5 7 6 const queue = new Queue() const queue = new Queue({ concurrency: 1 })

Slide 28

Slide 28 text

Н А Г Л Я Д Н О С Т Ь ( A F F O R D A N C E ) свойство объекта, которое позволяет пользователю моментально понимать, как этим объектом пользоваться.

Slide 29

Slide 29 text

Yamaha CR-600 Наглядность Регулятор громкости повторяет натуральное движение руки

Slide 30

Slide 30 text

Н А Г Л Я Д Н О С Т Ь В К О Н Т Е К С Т Е Соковыжималка цитрусовых, Philippe Starck, 1990

Slide 31

Slide 31 text

Н А Г Л Я Д Н О С Т Ь В И Н Т Е Р Ф Е Й С А Х skylight.io

Slide 32

Slide 32 text

Н А Г Л Я Д Н О С Т Ь В И Н Т Е Р Ф Е Й С А Х airbnb.com

Slide 33

Slide 33 text

// ok const open = true const write = true const fruit = true // better! const isOpen = true const canWrite = true const hasFruit = true https://hackernoon.com/the-art-of-naming-variables-52f44de00aad

Slide 34

Slide 34 text

array.empty? string.start_with?(‘foo’) pool.available? array.shuffle! string.capitalize! user.destroy! не меняют состояние, нет эффектов, getters меняют состояние, есть сайд-эффекты, setters

Slide 35

Slide 35 text

https://github.com/contra/react-responsive {matches =>
...
} Паттерн Function-as-a-Prop был популяризирован React-Motion, а теперь активно применяется сообществом

Slide 36

Slide 36 text

К О Н Ц Е П Т У А Л Ь Н А Я М О Д Е Л Ь представление пользователя о том, как вещь работает

Slide 37

Slide 37 text

концептуальная модель диммера для регулировки света 1: Максимум света в крайнем правом положении 0: Свет выключен в крайнем левом положении

Slide 38

Slide 38 text

Subscription.create({ start_date: '2019-10-17 19:30:00' }) start_date задает дату, когда подписка начинает работать

Slide 39

Slide 39 text

как создать подписку, которая активируется моментально? # ERROR: start_date isn't specified! Subscription.create()

Slide 40

Slide 40 text

уффф… # ERROR: start_date must be greater # than the current date! Subscription.create({ start_date: Time.now })

Slide 41

Slide 41 text

концептуальная модель нарушена # ok… Subscription.create({ start_date: 2.minutes.from_now })

Slide 42

Slide 42 text

О Б Р А Т Н А Я С В Я З Ь ( F E E D B A C K ) соответствие между действием пользователя и эффектом в реальном мире

Slide 43

Slide 43 text

Соответствие Когда я нажимаю на ▶, колесико начинает крутиться Panasonic RQ-2105 Обратная связь Кнопка дает моментальную обратную связь: нажать, чтобы запустить

Slide 44

Slide 44 text

Принципы соответствия и обратной связи → пользователи уверенно чувствуют себя и проявляют креативность

Slide 45

Slide 45 text

сокращение времени ожидания ощущается как простота З А К О Н П Р О С Т О Т Ы # code > create-react-app new-app # test > npx localtunnel --port 8080 # deploy > now

Slide 46

Slide 46 text

Р А Б О Т А Р А З Р А Б О Т Ч И К А В П Р О Д У К Т О В Ы Х К О М А Н Д А Х Г Л А В А 3

Slide 47

Slide 47 text

решает проблему группы людей Источник: https://www.romanpichler.com

Slide 48

Slide 48 text

концептуальная модель разработчика: архитектура, схема БД, классы, декомпозиция методов

Slide 49

Slide 49 text

концептуальная модель разработчика концептуальная модель пользователя

Slide 50

Slide 50 text

Stripe::Exception Your card has insufficient funds! Stripe::APIException Unexpected error communicating when trying to connect to Stripe. NoMethodError Undefined method 'code' for nil:NilClass ⾠ ⾠ ⾠ Sorry, we couldn’t charge your card. Your card has insufficient funds! с чем работает разработчик что видит пользователь We encountered an unexpected error while processing your payment. Your card hasn't been charged yet. Please contact us: [email protected]

Slide 51

Slide 51 text

Э М О Ц И О Н А Л Ь Н Ы Й Д И З А Й Н хороший дизайн — это правильно рассказанная история

Slide 52

Slide 52 text

The Commuter's Lament, Norman B Colp, 1991

Slide 53

Slide 53 text

Дизайнер: Наото Фукусава

Slide 54

Slide 54 text

Дизайн Timecop (гем Ruby для имитации времени в тестах) вдохновлен одноименным sci-fi фильмом 1994 года с Жан-Клод Ван Даммом в главной роли. Timecop.freeze(1.week.ago) sleep(10) new_time == Time.now # ==> true Timecop.return # "turn off" Timecop Timecop.travel(1.month.from_now)

Slide 55

Slide 55 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) — превосходный пример сторителлинга при разработке

Slide 56

Slide 56 text

Stripe: карточки для тестирования оплаты (DX)

Slide 57

Slide 57 text

популярные проекты не рождаются с идеальным дизайном. Х О Р О Ш И Й Д И З А Й Н Т Р Е Б У Е Т В Р Е М Е Н И

Slide 58

Slide 58 text

Эмпатия → Проблема → Решение → Инсайт → UX Д И З А Й Н — И Т Е Р А Т И В Н Ы Й П Р О Ц Е С С

Slide 59

Slide 59 text

First portable tape recorder Philips EL 3302, 1971

Slide 60

Slide 60 text

В 1979 году компания Sony заметила, что люди чаще пользуются воспроизведением ▶, чем записью ⬤ Д И З А Й Н — И Т Е Р А Т И В Н Ы Й П Р О Ц Е С С

Slide 61

Slide 61 text

Дизайнеры Sony убрали микрофон и внешний динамик… Так родился Sony Walkman. Э М П А Т И Я → С К Р Ы Т О Е З Н А Н И Е Sony Walkman TPS-L2, 1979 →

Slide 62

Slide 62 text

Эмпатия → Проблема → Решение → Инсайт → DX ▶ Alex Kotliarskyi: Facebook product Infrastructure как разработчик я знаю, что… … разработка UI в браузере — сложно концепт Virtual DOM UI(data) React

Slide 63

Slide 63 text

источник: Billy Hollis, Fundamental Design Principles for Developers

Slide 64

Slide 64 text

В Ы В О Д Ы Г Л А В А 4

Slide 65

Slide 65 text

Дизайн-принципы — это не догма. Важен контекст и проблема. 1 .

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

У М Н Ы Й З А М О К Н А Ш В Е Д С К О Й Д В Е Р И только 4 цифры, порядок не имеет значения 44 = 256 комбинаций код 2244 — запомнить проще простого!

Slide 68

Slide 68 text

Дизайн-принципы могут быть использованы разработчиками. KISS, SOLID, паттерны проектирования — это другой способ сказать то же самое. 2 .

Slide 69

Slide 69 text

Продуктовая разработка — молодая профессия. Многое можно перенять из опыта промышленного дизайна. 3 .

Slide 70

Slide 70 text

Engineering teams don’t exist to write code. Engineering teams exist to apply science to build products to grow the company. ” I N T E R C O M O N S T A R T I N G U P

Slide 71

Slide 71 text

Задача разработчиков не в написании кода, а в решении проблем и ответственности за решение. 4 .

Slide 72

Slide 72 text

Авария на АЭС Three Mile Island, 28 марта 1979

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 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

Slide 75

Slide 75 text

@ M L F R G