Дизайн принципы для разработчиков. Может ли дизайн сделать наши программы лучше?

Доклад на продуктовом митапе Tver.io, 17.10.2019

Transcript

1. Алексей Тактаров — @mlfrg ИНЖЕНЕРЫ ПРИДУМАЛИ ДИЗАЙН: ПРОДУКТОВЫЙ ПОДХОД ДЛЯ РАЗРАБОТЧИКОВ T V E R . I O 1 7 / 1 0 / 2 0 1 9
2. что такое промышленный дизайн? история и предпосылки ° принципы дизайна и код, который мы пишем
 (на примере open-source пакетов) ° продуктовый подход для разработчиков ° П Л А Н Н А С Е Г О Д Н Я
3. Ч Т О Т А К О Е П Р О М Ы Ш Л Е Н Н Ы Й Д И З А Й Н ? Г Л А В А 1
4. Peter Behrens for AEG, 1920 сделать промышленную продукцию привлекательной для покупателя. З А Д А Ч А Д И З А Й Н А
5. Здание школы Баухаус в Дессау, проект Вальтера Гропиуса
6. Wilhelm Wagenfeld, 1923 Marcel Breuer, 1925
7. П Р И Н Ц И П Ы Д И З А Й Н А В П Р О Г Р А М М И Р О В А Н И И Г Л А В А 2
8. Nikon-1, 1948 IBM corporate identity, by Paul Rand, 1956 Atari 2600, 1977
9. “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 ”
10. https://principles.design
11. Universal Principles of Design (2003) – справочник из 100 универсальных рецептов дизайна
12. дизайн-принципы чаще всего основаны на особенностях работы мозга и нашего восприятия
13. З А К О Н Ф И Т Т С А ( 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
14. В И Д И М О С Т Ь ( V I S I B I L I T Y ) чем более видимы функции объекта, тем более вероятно, что пользователь поймет, что делать дальше. следствие: важные функции должны иметь больший приоритет!
15. Panasonic RQ-2105 Принцип Видимости “Запись” важнее
16. import { Generator, MT19937 } from "random" README: Getting Started…
17. import random from "random"
18. Flexibility-Usability trade-off — проблема выбора между функциональностью и простотой в использовании
19. Flexibility-Usability trade-off — проблема выбора между функциональностью и простотой в использовании
20. 1 . 2 .
21. UI-паттерн — спрятать дополнительные функции (на картинке интерфейс Stripe)
22. import convert from “currencies" const value = convert(15).from("USD").to("EUR") пример пакета для конвертации валют (прототип: easy-currencies)
23. import { Converter } from "currencies" const converter = new Converter({ provider: "OpenExchangeRates", key: "API_KEY" }) converter.convert(15, "USD", "EUR")
24. number_to_human(1, units: :distance) # "1 meter" именованные параметры и параметры по-умолчанию: разделить основной и дополнительный функционал
25. П Р И М Е Р И З N P M пакет для работы с Promise-очередью
26. 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
27. G I T H U B : ★ 5 7 6 const queue = new Queue() const queue = new Queue({ concurrency: 1 })
28. Н А Г Л Я Д Н О С Т Ь ( A F F O R D A N C E ) свойство объекта, которое позволяет пользователю моментально понимать, как этим объектом пользоваться.
29. Yamaha CR-600 Наглядность Регулятор громкости повторяет натуральное движение руки
30. Н А Г Л Я Д Н О С Т Ь В К О Н Т Е К С Т Е Соковыжималка цитрусовых, Philippe Starck, 1990
31. Н А Г Л Я Д Н О С Т Ь В И Н Т Е Р Ф Е Й С А Х skylight.io
32. Н А Г Л Я Д Н О С Т Ь В И Н Т Е Р Ф Е Й С А Х airbnb.com
33. // 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
34. array.empty? string.start_with?(‘foo’) pool.available? array.shuffle! string.capitalize! user.destroy! не меняют состояние, нет эффектов, getters меняют состояние, есть сайд-эффекты, setters
35. https://github.com/contra/react-responsive <MediaQuery minDeviceWidth={700}> {matches => <div> ... </div>} </MediaQuery> Паттерн Function-as-a-Prop был популяризирован React-Motion, а теперь активно применяется сообществом
36. К О Н Ц Е П Т У А Л Ь Н А Я М О Д Е Л Ь представление пользователя о том, как вещь работает
37. концептуальная модель диммера для регулировки света 1: Максимум света в крайнем правом положении 0: Свет выключен в крайнем левом положении
38. Subscription.create({ start_date: '2019-10-17 19:30:00' }) start_date задает дату, когда подписка начинает работать
39. как создать подписку, которая активируется моментально? # ERROR: start_date isn't specified! Subscription.create()
40. уффф… # ERROR: start_date must be greater # than the current date! Subscription.create({ start_date: Time.now })
41. концептуальная модель нарушена # ok… Subscription.create({ start_date: 2.minutes.from_now })
42. О Б Р А Т Н А Я С В Я З Ь ( F E E D B A C K ) соответствие между действием пользователя и эффектом в реальном мире
43. Соответствие Когда я нажимаю на ▶, колесико начинает крутиться Panasonic RQ-2105 Обратная связь Кнопка дает моментальную обратную связь: нажать, чтобы запустить
44. Принципы соответствия и обратной связи → пользователи уверенно чувствуют себя и проявляют креативность
45. сокращение времени ожидания ощущается как простота З А К О Н П Р О С Т О Т Ы # code > create-react-app new-app # test > npx localtunnel --port 8080 # deploy > now
46. Р А Б О Т А Р А З Р А Б О Т Ч И К А В П Р О Д У К Т О В Ы Х К О М А Н Д А Х Г Л А В А 3
47. решает проблему группы людей Источник: https://www.romanpichler.com
48. концептуальная модель разработчика: архитектура, схема БД, классы, декомпозиция методов
49. концептуальная модель разработчика концептуальная модель пользователя
50. 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
51. Э М О Ц И О Н А Л Ь Н Ы Й Д И З А Й Н хороший дизайн — это правильно рассказанная история
52. The Commuter's Lament, Norman B Colp, 1991
53. Дизайнер: Наото Фукусава
54. Дизайн 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)
55. 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) — превосходный пример сторителлинга при разработке
56. Stripe: карточки для тестирования оплаты (DX)
57. популярные проекты не рождаются с идеальным дизайном. Х О Р О Ш И Й Д И З А Й Н Т Р Е Б У Е Т В Р Е М Е Н И
58. Эмпатия → Проблема → Решение → Инсайт → UX Д И З А Й Н — И Т Е Р А Т И В Н Ы Й П Р О Ц Е С С
59. First portable tape recorder Philips EL 3302, 1971
60. В 1979 году компания Sony заметила, что люди чаще пользуются воспроизведением ▶, чем записью ⬤ Д И З А Й Н — И Т Е Р А Т И В Н Ы Й П Р О Ц Е С С
61. Дизайнеры Sony убрали микрофон и внешний динамик… Так родился Sony Walkman. Э М П А Т И Я → С К Р Ы Т О Е З Н А Н И Е Sony Walkman TPS-L2, 1979 →
62. Эмпатия → Проблема → Решение → Инсайт → DX ▶ Alex Kotliarskyi: Facebook product Infrastructure как разработчик я знаю, что… … разработка UI в браузере — сложно концепт Virtual DOM UI(data) React
63. источник: Billy Hollis, Fundamental Design Principles for Developers
64. В Ы В О Д Ы Г Л А В А 4
65. Дизайн-принципы — это не догма. Важен контекст и проблема. 1 .
67. У М Н Ы Й З А М О К Н А Ш В Е Д С К О Й Д В Е Р И только 4 цифры, порядок не имеет значения 44 = 256 комбинаций код 2244 — запомнить проще простого!
68. Дизайн-принципы могут быть использованы разработчиками. KISS, SOLID, паттерны проектирования — это другой способ сказать то же самое. 2 .
69. Продуктовая разработка — молодая профессия. Многое можно перенять из опыта промышленного дизайна. 3 .
70. 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
71. Задача разработчиков не в написании кода, а в решении проблем и ответственности за решение. 4 .
72. Авария на АЭС Three Mile Island, 28 марта 1979
74. 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
75. @ M L F R G