Блог Кирилла Беляева

о дизайнерском росте, подаче информации, интерфейсах, ведении проектов и жизненной среде.

Работаю дизайнером в Лаборатории данных. Работал в Дизайн‑бюро Артёма Горбунова и соосновал дизайн-группу «Кипо». Веду Твитер, Фейсбук, Инстаграм и ЖЖ.

Приём тары в Берлине

В Германии сдают и переиспользуют тару. В Берлине в большинстве продуктовых стоит автомат, который принимает пластиковые и стеклянные бутылки и банки.

Интерфейсы таких автоматов разные. В этот раз попадались образцовые. У автомата три элемента: отверстие для тары, двуцветный экранчик и кнопка. У другого экран был побольше и сенсорный, что позволило кнопке стать софтверной. То есть элементов всего два. Увы, выглядят грустно необоснованные переходы форм и огромный посредственный логотип.

Такой минимум элементов работает на ура. Когда в отверстие попадает бутылка, срабатывают сенсоры, валик начинает крутить бутылку, чтобы считать штрихкод. Если бутылка неформатная, автомат её вернёт. Экран показывает сколько штук и на какую сумму автомат принял. В любой момент можно нажать зелёную кнопку (на сенсорном экране она тоже зелёная), тогда автомат перестанет крутить валики и напечатает чек. Если поторопился, можно просто засунуть ещё бутылок и напечатать второй чек.

В этот раз сдал на 2,95 €.

Дальше чек отдают кассиру. Он его сканирует и сумма вычитается из стоимости покупок. Возможно, если отдать чек без покупок, кассир выдаст наличные, но я не проверял.

Интерфейс процесса такой, что чувствовал себя не бомжом, а гражданином, который экономит, помогает экономить производству и защищает природу.

Графредактор — интерактивная детская игра

Детям дизайнеров повезло — у родителей есть бесконечная интерактивная игра «графический редактор». Картинки в книжке уже готовы, пазлы тоже предопределены, а в графредакторе можно что угодно. Гнуть формы, собирать домики из прямоугольничков, бес конца всё перекрашивать. Скачать иконки и загрузить семейные фотографии, чтобы сделать папу пиратом с попугаем на плече. Самое простое начало — эмодзи. И неважно, что там у них с разрешением.

Мой двухлетний сын с удовольствием помогает расставлять объекты и выбирать животных. И показывает где то, что я спросил на картинках:

Поводок-рулетка для выгула собак

Заметка для тех, у кого есть или будет собака.

Выгуливаю собаку на поводке-рулетке четыре года. У рулеток пяток параметров. Один из них — соединение ручки и карабина, которых держит ошейник. Знаю два с половиной типа.
1. Лента:

2. Троc:

2,5. Трос с куском ленты на конце, который всегда остаётся снаружи:

Обычно последний вариант — разновидность второго. Все тросы на большой вес для крупных собак заканчиваются куском ленты. Этот куск — лютая гадость. С ним рулетка некомпактна и пачкает. Зачем так комбинируют для меня остаётся загадкой. Гугл не помог. Ссылаются на безопасность, но как это работает непонятно.

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

Рулетки с лентой лучше прочих.

Выбора размера штанов в интернете

На курсе «Пользовательский интерфейс и представление информации» Илья рассказал, как упростили выбор размеров джинсов для интернет-магазина «Гетвеара» — вместо больших таблиц соответствия дали выбор нужной шкалы:

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

Так делают «Квеле». Но делают неэлегантно — в пять шагов. Кнопки ломаются, ссылки выбранных пунктов почему-то ведут на редактирование шага. И всё равно забота радует.

Увы, в половине случаев они показываю всё те же таблицы соответствия:

Видео выходное дня: Питер Бё

Раз в полгода попадается ролик, который ах, какой красивый или ух, какой интересный. Скопирую формат и иногда буду публиковать такие ролики. Развлекательный видеоконтент будет выходить по выходным.

Сегодня — «Осень» Питера Бё, Джона Ли и Карла Бертона:

6 мая   видео

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

В 2013...2014 я 9 месяцев стажировался в бюро, поэтому сверхоткрытий от курса не ждал. Сходил, чтобы понять, чем курс полезен для лабораторной команды и вспомнить всё. Оказалось, что базу знаю нормально, несмотря на практические ошибки.

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

Без картинок конспект тяжело расшифровать. Сейчас бы вместо записей снимал на телефон каждый пример — по ним-то как раз легко вспомнить материал. Все картинки разом Илья не даёт — предлагает писать на почту, какая нужна, тогда он вышлет.

1-й день, пользовательский интерфейс

Интерфейс — это правила взаимодействия. Пользовательский интерфейс — правила взаимодействия человека с машиной. Ещё есть АПИ — правила для двух машин, и скрипты — правила для двух людей: оператора поддержки и пользователя.

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

О грубой и нежной обратной связи:

Отступление:

Вообще, обратная связь важнее другого для интерфейса. Если она непрерывная нежная наглядная и последовательная, то пользователь научится пользоваться даже самым сложным интерфейсом. Это похоже на то, как человек осваивает окружающий мир. Пробуя взаимодействовать с деревом, мы получаем от него обратную связь: твёрдое, но мягче камня, защищает от дождя, некоторые дают плоды...

Cпросил Илью, как оформлять ссылки в веб-приложениях, которые выглядят и работают, как десктопные программы. Правило простое: подчёркивание — свойство гипертекста. В почтовом клиенте ссылки в тексте подчёркнуты. И в мобильном приложении подчёркивание в тексте будут выглядеть привычно.

Классно, когда Ильи рассказывает истории. Одна из них — мнемоника для теней от кнопок. Тени должны падать строго вниз, поэтому Рома Воронежский шутил: «Солнце никогда не заходит над Яндексом».

Тем, кому помогают чек-листы, советую скопировать темы курса. Можно на два-три разбить, чтобы не проверять печатные таблицы на закон Фиттса. Особенно интерфейсные темы полезно проверять чек-листом, чтобы не забыть какую-нибудь взаимосвязь и скрытую логику:

2-й день, представление информации

В основе дня — Тафти.

Для меня стал важным рассказ о вёрстке колонок. В 2014 я читал заметку, но ещё не дорос до простейшего совета: оставить только левые границы колонок, а справа давать необходимые отступы. Сейчас пошло на ура.

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

Схема вышла в 2008 году:

Когда Илья начинал, остановки были толстыми с белой обводку. Артём предложил убрать обводку, как лишний элемент. Илья убрал и написал, что теперь остановки теряются. Тогда Артём предложил сделать линии остановок сильно тоньше. В этот момент рассказа Илья округляет глаза, показывая первую реакцию на это предложение: «их же и так не видно! Окей, попробую,» — приходит позже. Тонкие остановки стали заметнее. Илья опять удивился и пошёл узнавать у Артёма, как так. В ответе был совет изучить тему информационных слоёв.

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

Среди тем был «Многомерный мир на плоском носителе». Илья там показывал крутящуюся девушку. Это редкая тема, которую я не понял, как применить.

3-й день, практические занятия

Здорово, что на курсе половина времени — практика. Переделывали таблицу, график и форму. Сила в том, что нет контекста — не нужно думать о целом продукте, просто механическая чистка.

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

Таблицы я успел две. 1-я с исходными данными, 2-я с пересчётом в тонны и м³:

А график наоборот: понял только, что нужна таблица, но сделать нормально не успел:

В форме хак. Всю нужную информацию о машине содержит ВИН-номер, поэтому лишние поля убираются, если научить систему парсить ВИН:

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

4-й день, презентация и разбор домашнего задания

Задание сделал за полдня. Выложил работу последним, потому что затупил. Не делайте так, на последних не остаётся сил. Задание было таким: 

Сайт для заказа пиццы. Имеется семь разных видов пицц. У некоторых можно выбирать начинку. Можно заказать доставку домой, а можно в офис.

Если можно добавлять ингредиенты, значит, можно самому собрать пиццу — так появился конструктор. А поскольку на сайте всего 7 сортов в меню, я добавил на главной ссылки на другие пиццерии. Конечно, это будет работать, только если другие пиццерии будут платить за такие ссылки.

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

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

Рекомендую курс всем, кто работает за компьютером :-) Никакой базы для курса не нужно. Разработчикам полезно понимать, что им приносит дизайнер и за какие ошибки его пинать. Опытным дизайнерам полезно сверить часы, систематизировать знания, возможно, узнают новое.

Объекты показывают сами себя до абсурда

Пока писал разбор графиков с реальными объектами, понял, что если довести до абсурда приём «объекты показывают сами себя», то получатся «Избыточные часы» Джи Ли:

Интересно, что один приём трансформируется в другой. А ценность всё равно остаётся.

3 мая   метод

Разбор графиков с реальными объектами

В этот раз снова посмотрим на приём.

Работа Кевина Квили и Марго Сенгер-Кац для Нью-Йорк Таймс о пользе продуктов с точки зрения американцев и диетологов

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

Теперь, когда хлопья нас увлекли, интересно разобрать каркас — основу графика.
У него две оси:

  • по иксу отложен процент всех американцев, которые считают, что продукт полезен,
  • по игреку — процент диетологов, которые считают, что продукт полезен.

Сырые данные в таблице пришли бы в трёх колонках: продукты, мнение всех, мнение диетологов. В строках 1-й колонки — продукт, во 2-й и 3-й — оценки. И глядя на эту таблицу не всегда приходит в голову, что один и тот же параметр — оценки — можно разместить на перпендикулярных осях. Кажется, что их нужно ставить столбиками рядом.

Через весь график под 45° проходит пунктир. Он хорошо ложится в основной сценарий изучения. Все продукты делятся на три большие группы: американцы недооценивают пользу, переоценивают и видят её такой же, как диетологи. Пунктир как раз делит график на эти три группы: выше пунктира лежат недооценённые продукты, ниже — переоценённые, и на самом пунктире — с одинаковой оценкой. Если размыть все продукты в одно пятно, оно будет идти вдоль 45-градусной линии — оценки расходятся, но не сильно.

Поскольку оценки в процентах, икс и игрек получаются одной длины. А вся площадь графика делится на квадратики. Они упрощают поиск значений для конкретного продукта.

Меня удивило кокосовое масло, я, как и все американцы считал, что оно полезнее, чем считают эксперты. А попкорн, наоборот, специалисты считают полезней, чем все американцы, я думал он будет сильно ближе к левому нижнему углу.

График соотношения массы мозга и тела, который переоформил Эдвард Тафти для своей книги «Beautiful Evidence»

Тафти пишет, о пропорциональности объектов, обнажая побочный эффект: размеры объектов на графике могут не соотноситься с реальными. В идеале использовать пропорциональные объекты, особенно там, где важны физические характеристики объектов.

Визуализация характеристик танков из игры «Ворлд оф тенкс», которую сделали в Лабораторнии данных

В этом примере как раз соблюдены пропорции танков. Ещё примечательно, что информацию могут нести не только сами объекты, но и их части:

«Истории флагов» датского агентства «Фердио»

Приём с трудом подойдёт для сложных и плотных данных, из-за сложной формы объектов. Но если у объектов формы простых геометрических фигур, их можно собирать в графики достаточно плотно:

Диаграмма длиннейших рек и высочайших гор 1854 года

Тут автор идёт дальше и собирает из объектов столбчатые диаграммы, подчёркивая их природу:

Работа Тима Меко, Денисе Лу, Лазаро Гамио и Криса Алкантары для Вашингтон Пост о олимпийском инвентаре

Чтобы показать соотношения объектов, авторы используют прокрутку. Периодически напоминая о масштабе шкалами и объектами из повседневной жизни — коробкой с пиццей или самолётом:

Концентрирую: изображения реальных объектов делают визуализации увлекательнее и информативнее.

Предлагаю собрать в комментариях объекты и их свойства, которым под силу представлять самих себя. Я начну:

  • техника (размер, размер и форма видимых деталей),
  • деревья (высота, форма кроны, размер и форма листьев),
  • мебель (размер и форма),
  • смартфоны (размер, диагональ экрана),
  • здания (высота, форма, площадь фундамента, площадь остекления фасада)...

Следующий разбор — в мае, если успею.

P. S. Читайте Таню Бибикову о визуальных атомах: 1-я часть, 2-я и 3-я.

Ctrl + ↓ Ранее