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 full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Wilhelm Wagenfeld, 1923 Marcel Breuer, 1925

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  10. https://principles.design

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. import random from "random"

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. // 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 full-size slide

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

    View full-size slide

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

    {matches => ... }

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. Дизайн 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 full-size slide

  54. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. First portable tape recorder Philips EL 3302, 1971

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  71. 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 full-size slide