41. Передача требований к анимации

В этом выпуске: видео о навыках проектировщика интерфейсов, ошибке выжившего, Поле Шер, статьи о курсе Ильи Бирмана, борьбе с токсичным поведением, упрощении работы с большими таблицами, применении эвристик Якоба Нильсена для интерфейса, передаче разработчикам требований к анимации, разнице между западным и российским дизайном. Ссылки обновлены 14.06.2024.

Навыки проектировщика интерфейсов

2 недели назад я сходил на ITGM #10 и записал доклад Ольги Павловой, какие навыки стоит прокачать проектировщику интерфейсов и в какие области, наоборот, не стоит соваться (из неочевидного, например, не стоит заниматься написанием текста, бизнес-анализом).

Видео длится 43 минуты, но основное содержание начинается с 6:20.

Навыки в смежных темах (начинается в 6:20):

  • Компоновка текста;
  • Вёрстка в базовом варианте (html&css);
  • Преобразование сырого материала в таблицы и схемы;
  • Создание бумажных интерфейсов (например, бланков);
  • Понимание сырых данных.

Второй блок полезных навыков (начинается в 16:00):

  • Проработка концепции решения;
  • Создание интерактивных прототипов;
  • Использование реалистичного контента в прототипе;
  • Работа ручкой и бумагой (оставаться в этом режиме как можно дольше);
  • Повышение скорости работы (клавиатурные сокращения);
  • Использование библиотек;
  • Автоматизация работы (скрипты для рутинных операций);
  • Изучение новых форматов взаимодействия (VR);
  • Командная работа (как минимум признавать необходимость команды);
  • Вытягивать вводные по задаче;
  • Умение внимательно читать;
  • Участвовать (не вести его, а только участвовать) в мозговом штурме;
  • Презентовать свою работу.

В какие области лезть не стоит. Или если вы этим занимаетесь, стоит задуматься о смене профессии (с 32:10):

  • Написание текста, который читает пользователь (включая микротекст);
  • Бизнес-анализ и решение бизнес-задач. Проектировщик не должен решать бизнес-проблемы. Он зачастую не способен их даже понять. Лучше учиться пользоваться результатами труда аналитиков;
  • Исследование и анализ пользователей (социология);
  • Управление проектами;
  • Внедрение UX-процессов в компании.

Ошибка выжившего

Видео о таком когнитивном искажении как ошибка выжившего.

  • Не всегда стоит смотреть на успешный продукт и делать так же;
  • Для улучшения продукта стоит опрашивать в том числе тех, кто отказался от его использования.

Курс Ильи Бирмана

Кирилл Беляев написал о курсе Ильи Бирмана «Пользовательский интерфейс и представление информации».

Пользовательские данные бесконечно ценны. К ним относится и выбор, который делал пользователь. Раньше не думал так о выборе. Просто представлял, как мешает, когда система не помнит, что выбрано или сама меняет выбор по неочевидным правилам.

Понравился рассказ, как Илья отправлял Артёму свою первую схему челябинских троллейбусов и трамваев. Он предложил Илье убрать промежутки между параллельными линиями. Илья убрал и написал, что теперь линии плохо различимы и отступы нужно вернуть. Артём ответил, что вместо отступов, цвета подбирают так, чтобы те хорошо различались.

Борьба с токсичным поведением

Психолог из Valve Майк Амбиндер рассказал о человеческом внимании, предпочтениях, когнитивных искажениях, мотивации и как это использовать при разработке игр. Хороший пример борьбы с токсичным поведением:

В конце матча стали задавать 2 вопроса. Сначала просили оценить уровень командной работы. Отношение игрока к своей команде — полезные данные, но мы спросили это только ради следующего вопроса: оцените собственный уровень работы в команде.

Конечно, игроку в любой ситуации хочется оценить себя на 5 звёзд. Но если он вёл себя плохо, ругался на окружающих или нарочно вредил собственной команде, ему будет намного сложнее это сделать.

Из-за конфликтующих идей возникает когнитивный диссонанс: я плохо работал в команде, но я очень хотел бы оценить себя на 5. Совсем небольшое изменение, маленький опрос, но общее число ежедневных жалоб упало на 12,5%.

Видео in English.

Упрощение работы с большими таблицами

Эндрю Койл написал об интерфейсных приёмах, с помощью которых можно упростить работу с большими таблицами.

  • Закрепление заголовка;
  • Закрепление столбца с параметрами и отдельных столбцов;
  • Возможность изменить ширину столбца;
  • Чередование фона в строках (зебра);
  • Отображение сводки по табличным данным;
  • Появление управляющих кнопок при наведении курсора на строку;
  • Возможность редактирования данных в строке;
  • Отображение дополнительных данных, связанных со строкой (Эндрю предлагает несколько разных способов);
  • Сортировка и фильтрация (разные способы);
  • Настройка отображаемых столбцов и их порядка следования.

In English.

Применение эвристик Якоба Нильсена для интерфейса

Рауль Гулати собрал примеры применения эвристик Якоба Нильсена для интерфейса. Несмотря на название статьи «Проектируем удобный дэшборд», там не только дашборды.

In English.

Передача разработчикам требований к анимации

Пол ван Ойен написал, как передавать разработчикам требования к анимации.

Анимации в интерфейсе становится всё больше. Крупные компании вроде Google и IBM в своих рекомендациях уделяют ей отдельное внимание.

Часто разработчики получают от дизайнеров довольно смутное описание задачи: видео или GIF с анимацией в несколько секунд и пара комментариев. Им приходится самостоятельно анализировать происходящее на картинке, а дизайнер часто получает не то, что планировал.

Спасти ситуацию может кривая анимации или моушн-граф — графическое представление временной шкалы анимации, на которой показаны подробности движения элементов.

In English.

(Внезапно самая популярная ссылка за прошедшие две недели, если судить по количеству лайков в ВК.)

Пола Шер

6-я серия Abstract рассказывает о графическом дизайнере Поле Шер из Pentagram — о логотипах, плакатах и работе со шрифтом.

Разница между западным и российским дизайном

Консультант по маркетингу Александр Левитас написал о разнице между западным и российским дизайном. На западе дизайн создаёт новые качества предмета и новые возможности для пользователя. В России дизайн — это игра со стилем, зачастую в ущерб функциональности.

Подобранные Александром примеры — это «дизайн для нищих духом» в классификации Влада Головача. Вот что Влад об этом пишет:

Дизайн для нищих поднял иронию на недосягаемую для постмодернистов высоту. Оказалось, что можно делать дизайн, в котором, кроме иронии, нет ничего. Примеров так много, что приводить их кажется неспортивным, лучше придумаю (скорее всего, кто-то уже придумал и производит, дело нехитрое) примеров, скажем, из области ковриков:
— Коврик в виде кляксы или лужи
— Коврик в виде меловых контуров тела (как в кинодетективе!)
— Коврик в виде глаза/уха/ладони или любой другой части тела простой и узнаваемой формы
— Коврик с надписью «Это коврик»
— Коврик с надписью «Опасно для жизни»
— Коврик в виде люка
— Коврик с нанесёнными на него знаками дорожной разметки
— Коврик в виде окна
— Коврик, на котором напечатан лежащий котик.

Дальше придумывать лень. Характерная черта такого дизайна — его можно передать словами. Собственно, в нем ничего, кроме слов «Гыы, прикольно!» и нету.

Дизайн для нищих духом дело хорошее, с какой стороны ни посмотри. Если подходить с моральных позиций, он хорош, потому что людей, начисто лишённых воображения, очень жалко, нужно сделать их жизнь приятнее. Если с аморальных — тоже неплохо, ведь деньги переходят в карман более достойного. Приятно, что дизайну для нищих духом уготована долгая судьба, просто потому, что его потребители, простецы, самовоспроизводятся. Но немного досадно, что сейчас это убожество — самое заметное проявление социализма и гуманистического мировоззрения вообще.