Алексей Тактаров — @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
}
Паттерн 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: support@resume.io
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