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

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

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

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

Alexey Taktarov

October 17, 2019
Tweet

More Decks by Alexey Taktarov

Other Decks in Programming

Transcript

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

    View Slide

  2. что такое промышленный дизайн?
    история и предпосылки
    °
    принципы дизайна и код, который мы пишем

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. Wilhelm Wagenfeld, 1923 Marcel Breuer, 1925

    View Slide

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

    View Slide

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

    View Slide

  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 ”

    View Slide

  10. https://principles.design

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. import random from "random"

    View Slide

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

    View Slide

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

    View Slide

  20. 1 .
    2 .

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  35. https://github.com/contra/react-responsive

    {matches => ... }

    Паттерн Function-as-a-Prop был популяризирован React-Motion,
    а теперь активно применяется сообществом

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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: [email protected]

    View Slide

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

    View Slide

  52. The Commuter's Lament, Norman B Colp, 1991

    View Slide

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

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  59. First portable tape recorder Philips EL 3302, 1971

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. View Slide

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

    код 2244 — запомнить проще простого!

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  73. View Slide

  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

    View Slide

  75. @ M L F R G

    View Slide