Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Дизайн

Профессия

Принципы и методы

Как правильно

Наблюдения

Что-то там

Ворчание

Ещё теги

Упрощение легенды

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

Фото Артёма Горбунова

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

В Лондоне у некоторых станций метро висит крестик (†). (В русской традиции он обычно означает дату смерти, но на западе это один из обычных знаков сноски наряду со звёздочкой.) Вот смотрите на Викторию в слева сверху и Кеннингтон снизу:

Крестик сам по себе ничего не означает, он просто говорит: посмотри в сноску. А там написано про каждую станцию своё:

Понятно, что не всегда подойдёт, но иногда можно попробовать.

 2 комментария    977   22 ноября   дизайн   инфографика

Стрелка и пальчик

Есть такой дизайнерский спор: надо ли превращать курсор мыши в пальчик над кнопками на сайтах. Недавно у меня в очередной раз спросили, как правильно, а у меня нет мнения на этот счёт. Я даже не помню, как у меня сделано в Эгее. В общем, я стал думать, что надо бы разобраться в вопросе. Вот что успел надумать. Это одна из тех заметок, где в конце не будет правильного ответа или инструктажа «делай так».

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

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

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

Меню в каждой программе в одном месте и ведёт себя одинаково — можно дополнительно не подсказывать. Точно так же написанное слово File в другом месте уже никто не воспримет как что-то, что можно нажать. Кнопки передают нажимаемость выпуклостью — их можно поставить где угодно, и человек поймёт. Никакой обратной связи при наведении не требовалось.

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

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

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

В одной из версий Виндоуса в тулбарах убрали выпуклость кнопок, оставили просто иконки:

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

Получается, у нас есть три варианта. Обратная связь при наведении:

  1. Отсутствует — объект своим видом однозначно передаёт нажимаемость.
  2. Проявляется в самом объекте (подсветка, рамка).
  3. Проявляется в курсоре мыши (пальчик, балка).

Интересно, что сами ссылки очень долгое время ограничивались только изменением курсора, но сейчас почти все дизайнеры добавляют и изменение вида самой ссылки (обычно это изменение цвета; иногда что-то делают с подчёркиванием). И для меня совершенно точно ссылка, которая не подсвечивается при наведении, выглядит немножко сломанной.

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

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

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

В Эгее, кстати, оказалось так: у кнопок курсор — пальчик, но у чекбоксов и радиокнопок — стрелка. Получается как будто совсем уж непоследовательно: не подходит ни логика «всё, что нажимается — с пальчиком», ни логика «как в операционной системе». Но я не хочу ничего менять, как щас — лучше всего.

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

Серый текст на белом и на чёрном

Сейчас расскажу вам о том, как можно относиться к серому цвету на белом и на чёрном фоне.

Белый фон — это бумага, а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна! Серый на белом выглядит компромиссно и поддельно:

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

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

Он как бы не «серый», а просто темнее. А вот жирность на чёрном работает плохо — разницы между заголовком и текстом почти не видно:

Я ещё в самом тексте одно из слов выделил жирным, но сделал бледнее на четверть — оно полностью растворилось среди соседних.

У меня на сайте на всех страницах на белом фоне заголовки жирные (пример: документация по Жуэлю). Но есть несколько страниц на тёмном, и там жирности недостаёт для выделения заголовков. Чтобы они зажглись, приходится делать текст «тусклее» (пример: Вайрлесс-диджей).

Итого: серый на белом — искусственно; тусклый на чёрном — естественно. Это полезное знание на случай, если вы делаете разные светлый и тёмный скины для какой-то программы или сайта. Нужно, чтобы ваша система скинов умела менять и цвета, и жирность.

Ещё про серый текст:
Не забледняй

Как заменить белый фон прозрачным в Фотошопе

Оказывается, фавыконка нового Зерулса случайно была на белом фоне. Если у вас есть картинка на белом фоне, и его надо сделать прозрачным, при этом сохранив весь антиалиасинг (пиксели промежуточных цветов по краям контура), то это делается вот так:

На самом деле вдвое быстрее, но я тут ещё комментирую.

 3 комментария    1726   2018   видео   дизайн   студентам   Фотошоп

Подтемнить пересвет на краях фотографии на белом фоне

Есть такая засада, когда вёрстка пытается использовать прямоугольность фоток, а фотки этому сопротивляются, потому что пересвеченые:

Конечно, лучше всего такие фотки заменить нормальными. Но предположим, что это почему-то невозможно. Фотограф в отпуске, открываться нужно через 15 минут.

Можно попробовать взять такие фотки в рамки:

Но это выглядит фигово. Особенно, если соседствуют и такие и такие:

Намного лучше немного подтемнить фотку с нужной стороны. Я тут ещё и подсинил чуток, так как это снег:

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

Это копипейст из канала в телеграме. Это бы попало в стенограмму за 5—11 февраля, но я выкусил и делаю отдельной заметкой. Заметку помог подготовить Вениамин Векк.

Звёзды не надо делать пухлыми

Звёзды не надо делать пухлыми. Они выглядят дебильно:

Вот эта штука должна быть прямой линией:

Звезда здорового человека, короче, такая:

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

Сергей Чикин пишет: «Если ты Энгрибердс, то пухленькие — норм».

Это копипейст из канала в телеграме. Это бы попало в стенограмму за 5—11 февраля, но я выкусил и делаю отдельной заметкой. Заметку помог подготовить Вениамин Векк.

Селигерский кусок и метроплакат с указателем

Полтора года назад я выпустил схему московского метро с Окружной линией — вам она известна под дебильным названием МЦК. Так вышло, что пока я рисовал схему, считалось, что Октябрьское Поле и Панфиловская никак не связаны, ну я так и нарисовал:

Но когда МЦК запустили, их вдруг решили считать пересадкой (там 750 метров по улице).

С тех пор открывались новые отрезки Марьина Роща — Петровско-Разумовская (Люблинская линия), Парк Победы — Раменки (Солнцевская линия), и я их добавлял на схему. Но это место не трогал, потому что там надо было всё взорвать, чтобы эту пересадку нарисовать.

А потом пришёл Илья Харитонов и буквально за годик всё сделал (пришлось даже Тверскую чуточку подвинуть):

Да ещё и алфавитный указатель заверстал:

В указателе используется система, которую я изобрёл пять лет назад:

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

Cкачайте ПДФ, проверьте плиз, где мы накосячили?

Я ещё обновил картинку на странице схемы. Но плакат, на который там ведёт кнопка «Купить», пока не обновился. Будем держать вас в курсе, в общем.

Илья тем временем написал пост про всю эту петрушку. Там есть листалка вариантов решения отрезка Полежаевская — Октябрькое Поле.

Ссылки по теме:

Про ворованную схему метро Софии

По образу и подобию классической челябинской схемы и её следующих версий дизайнеры делают разные другие схемы. В этом нет проблемы, нам даже приятно. Сама-то наша схема тоже опирается на достижения предыдущих поколений дизайнеров.

Вот смотрите какая классная схема движения общественного транспорта Севастополя:

Здесь используются похожие на наши графические приёмы, но в голову не придёт упрекнуть авторов в копировании. На любой вопрос «а почему именно так?» авторы могут ответить «ну а как?». Схему нарисовали исходя из задачи, использование всех приёмов оправдано целью.

Но вот на днях какой-то чувак опубликовал схему метро Софии:

Эта схема срисована с нашей схемы метро Минска. На любой вопрос «а почему именно так?» ответ один: «срисовал с Минска». Можно же было не повторять один-в-один вёрстку блочка с радиусом круга-центра? Можно было вообще иначе выделить центр, придумать свои деревья, выбрать чуть другие цвета линий, иконки другие нарисовать. Использование приёмов никак не оправдано целью.

Минскую схему мы делали с Ваней Звягиным и Костей Евстратенко. Смешно, что через какое-то время после публикации автор добавил упоминания меня и Вани (без ссылки и без слова «Минск», где-то между делом), а Костю не добавил. Хотя Костя, например, делал здания, которые этот чувак тоже нагло спёр. Костин стадион слева и его стадион справа:

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

Ну а поржать над автором — наше святое право, я считаю.

Остерегайтесь подделок.

 4 комментария    2613   2018   дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ранее Ctrl + ↓