ТРИЗ. Три инструмента для проектировщика интерфейса Андрей Шапиро, Byndyusoft

Почему стоит послушать этот доклад — Решение трудных задач — зона развития 
 веб-, UX/UI-дизайнеров и проектировщиков сервисов — Мы в ситуации перманентного кризиса, поэтому смена или расширение специализации дело обычное — Специализация 1 => Специализация 2 — Специализация => Универсальность

Андрей Шапиро — Дизайнер интерфейса, 
 арт-директор в Byndyusoft — Проектирую интерфейс цифровых продуктов с 2006 — Увлекаюсь автоматизацией дизайна и визуализацией данных — Член клуба практиков БА ТРИЗ, закончил практический курс «ТРИЗ для управления продаж и производства», практикую 2 года

Photo by Joakim Honkasalo on Unsplash

Теория
 решения
 изобретательских
 задач Карта Валерия Сучкова

Графическая форма технического противоречия 1 Вход: нежелательный эффект, противоречие Выход: задачи, идеи решений

Что называют техническим противоречием Ситуация, когда при улучшении одной характеристики системы ухудшается её другая характеристика

Словесная форма противоречия — Если система находится в состоянии A, то свойство 1 улучшается, но ухудшается свойство 2, что недопустимо. — Если система находится в состоянии НЕ-A, то свойство 2 улучшается, но ухудшается свойство 1, что недопустимо. Графическая форма Ядро Свойство 2 Свойство 1 + − − + «А» «НЕ-А» крайнее состояние крайнее состояние

Как зарисовать противоречие в графической форме

Рассмотрим одну сторону противоречия Для того, чтобы обеспечить низкий расход топлива, корпус судна должен быть узким, потому что ... так создается меньшее сопротивление водным массам Корпус судна Удобство размещения грузов Расход топлива Широкий Узкий + + - -

Как поставить задачу? Корпус судна Удобство размещения грузов Расход топлива Широкий Узкий + + - - Как сделать так, чтобы корпус оставался широким, но при этом создавал меньшее сопротивление водным массам? Для того, чтобы обеспечить низкий расход топлива, корпус судна должен быть узким, потому что ... так создается меньшее сопротивление водным массам

Примеры разрешения противоречия

Пример с разваливанием баннера Комплект щеток стеклоочистителя · Febi Распродажные позиции в наличии на складе, Новосибирск Масло трансмиссионное синте- тическое для МКПП 75W-85 SAE API GL4 1 Масло моторное полусинтети- ческое 10W40 MAGNATEC DIESEL CF, A3/B3 4 Масло трансмиссионное мине- ральное 80W-90 GL-5 для диффе- ренциалов 1341,94 920,13 ₽ 1418,73 972,78 ₽ 1112,72 1112,72 ₽ Комплект щеток стеклоочистителя · Febi Распродажные позиции в наличии на складе, Новосибирск Нож Лак Клей 1341,94 920,13 ₽ 1418,73 972,78 ₽ 212,72 112,72 ₽ Нежелательный эффект — пустоты при коротком контенте Комплект щеток стеклоочистителя · Febi Распродажные позиции в наличии на складе, Новосибирск Масло трансмиссионное синте- тическое для МКПП 75W-85 SAE API GL4 1 Масло моторное полусинтети- ческое 10W40 MAGNATEC DIESEL CF, A3/B3 4 Масло трансмиссионное мине- ральное 80W-90 GL-5 для диффе- ренциалов 1341,94 920,13 ₽ 1418,73 972,78 ₽ 1112,72 1112,72 ₽ Комплект щеток стеклоочистителя · Febi Распродажные позиции в наличии на складе, Новосибирск Нож Лак Клей 1341,94 920,13 ₽ 1418,73 972,78 ₽ 212,72 112,72 ₽

Схема противоречия блока с ценником Для того, чтобы обеспечить вместимость, текстовый блок должен быть многострочным, потому что это повышает информированность читателя Текстовый блок с ценником под ним Многострочный Однострочный Вместимость текста Собранность (неразрывность, не-рыхлость) + − + − Как сделать так, чтобы блок оставался однострочным, но повышал информированность читателя?

Пример с разваливанием баннера

Добавим пользы:
 — вхождение в чарты 
 — гарантии
 — полезная статистика
 — назначение Пример с разваливанием баннера

Задачи, идеи решений Граф.форма технического противоречия Противоречие, нежелатель-
 ный эффект

Причинно- следственный анализ 2 Вход: проблемная ситуация, набор проблем Выход: задачи, идеи решений

Всеми любимый «пять почему» Почему? ? Почему? Проблема Корневое решение

На основе курса А. Кожемяко и А. Кудрявцева Правила построения причинно- следственных цепочек

Разберём на примере ситуации в стихе Не было гвоздя, – подкова пропала. Не было подковы, – лошадь захромала. Лошадь захромала, – командир убит. Конница разбита, армия бежит. Враг вступает в город, пленных не щадя, Оттого что в кузнице не было гвоздя! Английская армейская песенка в переводе С.Я. Маршака

Причинно-следственные цепочки Город взят Армия бежит Армия плохо обучена Командир убит Лошадь захромала Подкова пропала Не было гвоздя Армия вышла в поле Слабые укрепления Нет средств Перестроим в виде причинно- следственной цепочки. Каждый элемент вглубь получен постановкой вопроса «почему».

1. Субъект » Описание влияния » Объект — СУБЪЕКТ (А) воздействует — на ОБЪЕКТ (Б) — с ОПИСАНИЕМ негативной функции

2. Выбирайте субъектом действия элемент, который возможно изменять или на его изменение имеется больше ресурсов Враг вступает в город —> Город впускает врага

3. Объект и субъект не должны совпадать Лошадь захромала —> Неровности местности повреждают ногу лошади —> Копыта лошади плохо сопротивляются 
 повреждениям неровностями местности

3. Объект и субъект не должны совпадать — Смеркалось — Продажи маленькие — Нож тупится — Сотрудник лентяй Плохо Контуры объектов перестали обнаруживаться наблюдателем Продукт вызывает слабый интерес у покупателей Поверхность стола затупляет нож Сотрудник игнорирует поручения Хорошо

4. Проверяйте в обратную сторону НЭ (нежелательный эффект) НЭ НЭ НЭ Почему Если, то… Почему Если, то… НЭ НЭ

Для решения проблемы достаточно разорвать цепь в любом месте, поставив задачу НЭ (нежелательный эффект) НЭ НЭ НЭ НЭ НЭ НЭ

Постановка задачи через оператор отрицания Армия отступает из города —>
 Город впускает врага
 Армия отступает из города —>
 НО Город НЕ впускает врага

Разрываем причинно-следственную цепочку Враг вступает в город, пленных не щадя Конница разбита, армия бежит Командир убит Лошадь захромала Не было подковы Не было гвоздя Как сделать так, чтобы подковы крепились на лошадей без гвоздей? Как сделать так, чтобы при отсутствующем командире армия оставалась боеспособна? Как сделать так, чтобы армия бежала, но город не впускал врага?

Примеры

и и

No content

Задачи, идеи решений Причинно- следственный анализ Проблемная ситуация, набор проблем

Оператор «Идеальный конечный результат» 3 Вход: нежелательный эффект Выход: набор рабочих идей

No content

Ненакрывающая подсказка. 1. Модель конфликта Перекрытие информации подсказкой Нежелательное явление:

Ненакрывающая подсказка. 1. Модель конфликта Зона вблизи курсора, включающая подсказку и накрываемые им тексто- графические элементы и фон Оперативная зона:

Ненакрывающая подсказка. 1. Модель конфликта Подсказка -> препятствует -> видимости других элементов при видимой подсказке Модель конфликта: „Инструмент“ Подсказка Накрываемые элементы „Изделие“

Ненакрывающий тултип. 2. Поиск ресурсов Рамка: форма, цвет, размер, абрис, фон Текст: положение, кегель, промежуток между букв, между буквами, цвет, прозрачность, гарнитура/начертание шрифта. Ресурсы «Инструмента» (подсказки)

Формула ИКР: x-элемент сам выполняет полезное действие x-элемент сам обеспечивает видимость других элементов при видимой подсказке Рамка: форма, цвет, размер, абрис, фон Текст: положение, кегель, промежуток между букв, между буквами, цвет, прозрачность, гарнитура/начертание шрифта. Ресурсы «Инструмента» (подсказки)

Варианты решений 
 Пространство между строк само обеспечивает видимость других элементов при видимой подсказке

Варианты решений 
 Пространство между строк, цвет текста сами обеспечивают видимость других элементов при видимой подсказке

Варианты решений Интерлиньяж, светлота, кегль, гарнитура сами обеспечивают видимость других элементов при видимой подсказке

Варианты решений Межбуквенные просветы сами обеспечивают видимость других элементов при видимой подсказке. «Расступившиеся» буквы

Ненакрывающий тултип. 2. Поиск ресурсов Текст-якорь : текст (содержание, рамка, местоположение), рамка, ... 
 
 Графический элемент: прямоугольник, пятно, фактура, тон, ... Текст: положение, кегель, промежуток между букв, между буквами, цвет, прозрачность, гарнитура/начертание шрифта, ... Ресурсы «Изделия» (накрываемых элементов)

Варианты решений Местоположение текст-якоря само обеспечивает видимость других элементов при видимой подсказке

Ситуация на кассе Модель конфликта:

x-элемент сам обеспечивает фиксацию информации о сделке Ресурсы в оперативной зоне: — Продавец — Приложение — дата последней сессии авторизации — посещение страницы с товаром — подтверждение товара — управление полкой (складские адреса) — Товарный ассортимент — размер остатка в наличии — цена
 — Покупатель — идентификатор покупателя — идентификатор сделки — идентификатор товара — отметка получил ли, были ли проблемы

Набор рабочих идей Оператор «Идеальный конечный результат» Нежелательный эффект

Куда двигаться дальше?

Как начать изучать ТРИЗ — Лучше всего пройти курс с наставником. Я проходил курс у Антона Кожемяко в «Бизнес-ассоциации ТРИЗ», — Важна практика, важно решать практические задачи, иначе останутся только рассуждения о терминах — Будут вопросы — пишите!

На какие ещё методы ТРИЗ стоит обратить внимание дизайнеру — Схематизация проблемной ситуации — Системный оператор — Разрешение противоречия по Хоменко — Матрицы Г. Альтшуллера / Д. Манна — MPV-анализ — Анализ потоков — Сокращенная версия АРИЗ-85В — Вещественно-полевой анализ — Линии развития и деревья эволюции постановка задачи генерация идей решательный механизм стандарты решений анализ ценностей изыскание резервов решательный механизм алгебраизация мышления прогноз развития системы

ТРИЗ. Три инструмента для проектировщика интерфейса Андрей Шапиро [email protected] @xraizor That’s all folks! bit.ly/design-triz