Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

01bf97df3784afa10fc2b561e251a41c?s=128

Alexey Taktarov

October 17, 2019
Tweet

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

    .
  66. None
  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

  73. None
  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