Позднее Ctrl + ↑

Информативность и ложная информативность

На курсе и в книге я рассказываю о повышении информативности. Большинство интерфейсов, которые мы видим вокруг, низкоинформативны: не показывают то, что нужно для принятия решения. Например, знаки вопроса в сложных формах, по которым открываются попапчики с объяснениями полей — что за тупизм? Объяснения должны быть прямо в форме.

Вот завалялась картинка:

Я сначала случайно прочитал day light вместо day flight и подумал: ого, они показывают, с какой стороны будет солнце! Вот вам пример повышения информативности. Это полезно, это влияет на выбор места (обычно я в уме представляю, как полетит самолёт и где будет солнце, чтобы не дай бог не попасть под него).

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

Что мне толку с того, что вариантов именно 26? Как это повлияет на моё желание перейти по ссылке? Меня-то интересует, есть ли там что-то подходящее. Лучше написать, что за варианты: со шнурками и без, с прорезиненной подошвой. Или показать превьюшечки.

Количество имеет смысл, например, тут:

Число позволяет мне оценить, сколько работы меня ждёт (а окружающим — умею ли я пользоваться почтой; это, конечно, не мой скриншот). Если я недавно видел 2, а теперь вижу 5, я понимаю, что пришла новая почта.

Но чаще всего количество элементов внутри не приносит никакой пользы. В одной из позапрошлых версий Эгеи я перестал показывать количество черновиков рядом с их иконкой — это просто мусор.

Что почитать на выходных — 168

Вот:

  1. Designing Windows 95’s User Interface. Золотая находка. История дизайна Виндоуса-95. «The team faced a major decision: spend weeks changing the spec to reflect the new ideas and lose valuable time for iterating or stop updating the spec and let the prototypes and code serve as a „living“ spec». А также: «The Windows 95 project was the first experience for many of the team members for doing iterative design, usability testing, and problem tracking».
  2. Что делать с масштабом временных рядов. Клёвая фишка с графиками.
  3. В пятницу в квартире через одну над нами случился пожар. Антон Ловчиков делится мыслями.
  4. Почему нельзя употреблять глагол «кушать» вместо «есть»?

Однажды в Википедии: Begadkefat.

Хотите стать спонсором рубрики? Пишите: ilyabirman@ilyabirman.ru

Новая схема челябинских трамваев

Больше десяти лет назад я сделал схему челябинских трамваев и троллейбусов. На этот дизайн решающим образом повлияли советы и комментарии Артёма Горбунова. Тогда мы нашли несколько хороших универсальных решений — на основе того дизайна десятки дизайнеров делали схемы разных транспортных систем.

Три года назад мы с Сашей Караваевым сделали новую версию схемы. В ней была целая куча схемодизайнерских изобретений: «карандашный» слой с автобусами и троллейбусами, «акварельные» водоёмы, 3Д-конечные, новая форма пеньков. Тогда же родился логотип челябинских трамваев в виде герба Челябинска с пантографом.

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

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

Полина рассказывает подробнее у себя на сайте, посмотрите.

Что ещё посмотреть:

Участники моих проектов

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

Зерулс 2.0 заставил меня унифицировать это дело, в его описании теперь такой подвал:

Наконец-то я сделал себе штуку, чтобы такое ставить:

<?= i8team ([
  'ib' => 'Арт-директор | и разработчик',
  'rp' => 'Со-разработчик | технологии поиска',
  'vk' => 'Веб-разработчик',
  'vy' => 'Дизайнер',
  'ad' => '§§-шрифтовик',
  'gg' => 'Сисадмин',
]); ?>

Конечно, идея обозначать людей двумя буквами, оказалась дебильной: Александру Бабаеву, Алексею Блинову и Александру Банкину пришлось подраться. Наверное, я это потом поменяю. Но главное, что эта штучка знает фотки и сайты людей, и это всё хранится в одном месте, поэтому если кто-то помогал мне с несколькими вещами, он будет одинаковый везде.

Если вывести всех, кого пока знает эта функция, выглядит так:

Тут я должен извиниться перед теми, кто пока не попал в этот список, но при этом много чего сделал. Например, это все, кто помогал в разное время с Эгеей, особенно в последнее время Игорь Адаменко и Иван Щолоков. Дело в том, что Эгея живёт на другом сайте, а не в виде рассказа в портфолио, поэтому с ней другая история. Может, я что-нибудь ещё придумаю. Если вы чувствуете, что я вас забыл, напишите мне, пожалуйста, куда именно хотели бы, чтобы я вас добавил. Скорее всего, я всё-таки не забыл, а просто пока не нашёл подходящего места, но вдруг. Если вы хотите поменять фотку или ссылку, тоже говорите.

Всем большое спасибо!

Зерулс переехал на ХТТПС

Эта новость расстроит тех, кто использовал сайт «Зерулс» для входа в вайфай с браузерной авторизацией. Да, сайт переехал на ХТТПС.

И ещё я забыл рассказать, что теперь можно шарить параграфы в соцсети. Под параграфами иконочки. На скриншоте — просто какой-то параграф. Расскажите всем, какие правила русского языка вам нравятся больше всего (хе-хе)!

В рассказе о проекте переделался этаж с участниками снизу — теперь все с фоткам и ссылками. И туда добавился Глеб Гончаров, который помог настроить новый сервер и завести ХТТПС. С Глебом мы также делаем сервис Эгеи, и он помогает с моим сайтом и сайтом самой Эгеи.

Телеграм за неделю 29 января — 4 февраля 2018

22—28 янв ← → 5—11 фев

Вот как выглядела позапрошлая неделя в моём канале в телеграме (пардон, дайджесты отстают от реального времени, поэтому лучше читать в прямом эфире):

Вообще, с окнами подтверждения удивительная история. Я на каждом курсе рассказываю о том, что они бесполезны и только вырабатывают привычку жать «Да», не читая вопрос. Все это внимательно слушают, а потом в домашке каждый второй рисует подтверждающий экран.

Причём дело не в том, что люди пропустили или забывают. Когда спрашиваешь, зачем, говорят, что помнят тему, «но в данном случае же действительно важно убедиться...».

Поэтому напоминаю всем, что подтверждения нужно убирать не потому, что убеждаться не важно. А потому, что они не помогают убедиться.

Так что если убеждаться не очень важно, то подтверждение не так страшно — это будет просто раздражающее препятствие на пути. Но вот если убедиться важно, то его точно надо убрать и заменить на надёжное анду:

Телеграм за неделю 29 января—4 февраля 2018

А вы режете сыр и колбасу так, чтобы максимально равномерно покрыть поверхность хлеба?

Телеграм за неделю 29 января—4 февраля 2018

Нет, я же не ку-ку! — 634 (62%)
Да, а как же? — 384 (38%)
1018 человека проголосовало.

Наверняка это антинаучно, но я отношу такие штуки к проявлениям обсессивно-компульсивного расстройства. Это когда тебе некомфортно оттого, что в чём-то неосязаемом нет порядка.

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

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

Википедия пишет: «Больные ОКР — чаще всего люди с высоким уровнем интеллекта». Ну, хоть какая-то радость.

А вот это, слава богу, не про меня: «Такие действия, как постоянное мытьё рук и умывание, сплёвывание слюны, многократное предотвращение потенциальной опасности (бесконечная проверка электроприборов, закрытия двери, закрытия молнии на ширинке), повторение слов, счёт. Например, с целью убедиться, что дверь закрыта, больному необходимо дёргать ручку определённое количество раз (при этом считать разы). Проведя ритуал, больной испытывает временное облегчение, переходя в „идеальное“ постритуальное состояние. Однако спустя какое-то время всё повторяется заново».

Телеграм за неделю 29 января—4 февраля 2018
Плитка в Вене, по которой невозможно гулять спокойно

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

А потом им говоришь «а ещё бесит, когда конфеты из коробки берут так, что паттерн оставшихся конфет становится несимметричным», и они такие: «О, МЕНЯ ЭТО ВООБЩЕ ВЫВОДИТ ИЗ СЕБЯ!»

Телеграм за неделю 29 января—4 февраля 2018
Иконка красивая и цвет почти совпал с цветом интерфейса Апстора — клёво

Забавно. Пригласил людей из твиттера подписаться на канал:

Телеграм за неделю 29 января—4 февраля 2018

Запостилось «AAAAA!», и это реально рабочая ссылка.

Телеграм за неделю 29 января—4 февраля 2018

Смотрите, какой любопытный баг в Ютюбе:

Телеграм за неделю 29 января—4 февраля 2018

Обычно программисты вообще забывают склонять существительные при числительных и пишут «просмотров: 1 тыс., дней назад: 5». Тут чуваки заморочились и просклоняли.

Но он пишет «1 тыс. просмотра» вместо «просмотров».

Такое ощущение, что там сначала срабатывает код, который подбирает падеж для настоящего числа просмотров (а их, скажем, 1022), а уже потом код, который сокращает эти 1022 до «1 тыс.»

Разработчики, будьте внимательнее. Вызывайте код в нужном порядке.

Konstantin Dubrovsky:
Илья, расскажи голосом или суперпостом как ты отслеживаешь новую музыку и дискаверишь её.

Эплы не считают свой логотип суперсвятым, с ним можно и поиграть. Вот как они строили Эпл-стор в Амстердаме:
https://ilyabirman.net/meanwhile/all/apple-store-in-amsterdam/

Телеграм за неделю 29 января—4 февраля 2018

А вот картинка из Вены, где тоже новый Эпл-стор:

Телеграм за неделю 29 января—4 февраля 2018

Александр Путилин:

Зацените британскую инструкцию к аспирину. Написано нормальным человеческим языком, а не сухим канцеляритом:

Телеграм за неделю 29 января—4 февраля 2018 Телеграм за неделю 29 января—4 февраля 2018

Прекрасно. Я прочитал половину текста с интересом.

Это нужно показывать, когда клиент из какой-нибудь там терминологически заумной области типа страхования боится писать нормальным языком, потому что это «несолидно».

Телеграм за неделю 29 января—4 февраля 2018
Если вырезать из чего-то букву со скруглёнными краями, то у того, что останется, появятся засечки (при этом тут буквы I и N)

Иконочки:

Телеграм за неделю 29 января—4 февраля 2018
Телеграм за неделю 29 января—4 февраля 2018
Клёвая идея — сделать кнопки или активные зоны в программе непрямоугольной формы

Мне написала письмо Виктория:

«Илья, добрый день.

Подскажите, как лучше называть и хранить файлы при работе над проектом? Чтобы в конце не было „project-name-final-final-123.ai“? Есть ли у вас какая-то конвенция при работе с файлами?

Как у вас устроен процесс архивации и хранения сделанных вами проектов (дата начала/выпуска, кто принимал участие в проекте и т. п.)? Эксель/Намберс табличка? Какой-то сервис? В какой системе лучше хранить свои проекты дизайнеру?»

Отвечаю.

Чтобы не было -final-final я просто никогда не пишу -final. Даже не представляю, как приходит в голову такое написать, какая-то декларация, не имеющая отношения к делу. Всё равно, что написать -iwillgetmoneyforthis. Может, это и правда, но зачем это в названии файла? Достаточно после каждого смыслового изменения сохранять версию под новым номером. Иногда полезно отражать в имени файла, что изменилось: *-417-hovrino-opens.ai.

Что касается всего остального, то никакой системы у меня нет :-) И я нисколько из-за этого не страдаю.

Дайджест подготовил higimo

Почему Фотошоп важен для дизайнера интерфейса

В Скетче можно одним кликом скруглить края по-нормальному, а не радиусом. И очень легко сделать матовую поверхность, так как кроме прозрачности там настраивается размытие фона:

Иллюстрация Константина Дубровского

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

Эти фичи есть в Скетче, потому что дизайнеры с Фотошопом их придумали.

Замкнутость интерфейса: проверочные вопросы

Я вчера написал про замкнутость. Продолжаю в режиме черновиков.

Вот вопросы, которые дизайнер должен задать себе, глядя на каждый макет интерфейса:

  1. Для каждой нарисованной кнопки: что произойдёт, если нажать? Не обязательно должна быть прям картинка следующего состояния, но понадобится внятный ответ.
  2. Для каждой кнопки «Закрыть», «Скрыть» и подобных: как снова открыть, показать?
  3. Для каждой переменной величины: что, если значение будет отрицательным, нулём, единицей, в сто раз больше, в сто раз меньше, длиннее, короче? Что, если значение изменится в реальном времени?
  4. Для каждого переменного числа элементов (список, матрица иконок и т. д.): что, если элементов будет ноль, один; в сто раз больше, чем нарисовано. Что, если число элементов изменится в реальном времени?

Это довольно занудная фигня, непонятно, как её системно применять, но я ж говорю, это черновик. Дополняйте в комментариях, что ли.

Ранее Ctrl + ↓