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

Дизайнеры, которые уже научились этому, иногда допускают такую ошибку:

Они делают фактоиды слишком похожими на товары. Из-за этого оба эффекта ослабляется: вёрстка выглядит однообразнее, а фактоиды не привлекают внимание.

Правильно — делать фактоиды совсем другими, чем товары:

По теории близости мы ставим заголовки ближе к своему тексту, чем к чужому:

А Брингхерст ставит заголовки ровно посередине между фрагментами текста:

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

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

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

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

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

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

Назрела необходимость переворота в мобильном интерфейсе.

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

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

Спрашивается: нафига ставить кнопки наверх, а потом придумывать костыли, если можно сразу их поставить снизу?

На Виндоус-фонах адресная строка браузера снизу:

Правда, там непонятно: на половине скриншотов всё-таки сверху. Эпл, когда сделаешь так же?

Интересно, что переворот уже коснулся приложения «Карты». Было-стало:

Поле поиска и результаты переехали вниз. Почему это изменение коснулось только одного приложения?

В Сейви (умный диктофон) мы тоже заморочились, чтобы важное прибивалось к низу. Пара промежуточных макетов:

Сначала управление записью жило наверху (слева). Потом плей переехал вниз (справа).

Но в итоге вообще весь интерфейс стал стремиться к низу:

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

Правило: в мобильных интерфейсах важные элементы управления ставьте вниз.

Это в первую очередь для студентов Школы стажёров, но вообще для всех.

Начинающие дизайнеры интерфейса порой рисуют подделки:

Вот что это за батарейка в ПВУ? Что за поле поиска такое невозможное? В нём всё не настоящее: размеры, углы, тень, расположение иконки и текста.

Или мишень в центре. Откуда она такая? Зачем?

Ещё и от самого телефона тень куда-то вбок падает.

Другой вариант:

Весь статусбар поддельный: не тот размер, не такие кружки, не тот шрифт, не та батарейка. Между статусбаром и тулбаром линейка, которой на настоящем Айфоне нет. В поле поиска тоже всё не настоящее, особенно стирающий крестик справа.

Тут сам телефон поддельный:

Откуда с правой стороны три фигулины торчат? Неужели трудно найти фотографию Айфона и вспомнить, с какой стороны у него что? Что творится с бликами по всему периметру?

Андроид:

В Андроиде я меньше понимаю, но шрифт точно поддельный, да ещё и порендерен чуть ли не на Виндоусе с «Клиртайпом». И поиск на Андроидах выглядит не так.

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

Ещё студентам:

• Почти, но не совсем (к последней картинке относится в полной мере)
• Не используйте Мирьяд-про
• Дизайнеры, рисуйте клавиатуру на айфонах
• Продолжение полуовала у знака рубля
• Как подчеркнуть ссылку пунктиром

Как вы, возможно, слышали, «Аэрофлот» собирался сделать редизайн своего сайта, а потом рассобирался, сообщив, что не видит в этом необходимости:

Разница в голосах пассажиров между действующим дизайном и дизайном одного из новых вариантов оказалась незначительной — на уровне статистической погрешности (43 голоса или 0,6%). Принимая во внимание, что исследование не выявило явного лидера, а процесс обновления сайта дорогостоящий, «Аэрофлот» не видит необходимости в срочной смене текущего дизайна.

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

Но я вас собрал не за этим. Я хочу вам показать, как устроена регистрация на рейс «Аэрофлота» на существующем сайте, а потом признаться «Аэрофлоту» в любви.

Когда открывается регистрация, приходит письмо:

Здесь уродлива каждая деталь. Зачем-то мне показывают какой-то технический «код бронирования», который меня совершенно не волнует. Единственное, что мне нужно от этого письма — понять, о каком рейсе речь, и нажать кнопку «Зарегистрироваться». Как видите, в письме нет в явном виде ни того, ни другого. Чтобы найти, когда и куда я лечу, нужно внимательно прочитать гору текста. А кнопки «Зарегистрироваться» вообще нет. Зато есть десяток ссылок.

См. Принцип одной ссылки.

Глаз выхватывает «Онлайн регистрацию» (безграмотно написанную без дефиса). Переходим по ней и попадаем сюда:

Добро пожаловать на сайт «Аэрофлота», улучшение дизайна которого «Аэрофлот» (со ссылкой на пассажиров) считает нецелесообразным! Тут простыня текста, начинающаяся с заголовка «Преимущества Онлайн-регистрации» (на этот раз с дефисом, но зато с какого-то перепугу с большой буквы). Как будто мне нужно эту онлайн-регистрацию продавать сейчас, когда я и так пошёл за ней уже сам. Здесь есть и пример посадочного талона в виде ПДФ, с ума сойти.

Но эта страница прокручивается, тут целая гора мусора:

Снова куча ссылок. Наверное, автор представляет себе, что большинство пассажиров по ним всем ходят, внимательно всё читают. Да и как не ознакомиться с правилами поведения пассажира на борту, отправлясь в полёт?

В конце — чекбокс с подписью, безграмотно сформулированной в повелительном наклонении (правильно — от первого лица пользователя: «Я ознакомился...»).

После нажатия на кнопку попадаем сюда:

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

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

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

См. Дизайн веб-форм: в какой момент выводить ошибки.

Ввожу код регистрации (возвращаюсь в письмо, чтобы его посмотреть). Потом ввожу фамилию:

Что значит «неверный формат»? А какой формат верный? Это блин моя фамилия, что тебе надо, тупой сайт!? Оказывается, надо написать фамилию латиницей. Почему не написать это, почему я должен гадать?

Следующий слайд, пожалуйста.

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

Следующий слайд:

(Ой, вёрстка поехала.)

Тут есть кнопки «Регистрация» и «Выберите место» (правильно: «Зарегистрироваться» и «Выбрать место»). Но они не работают. Видимо, потому что не стоит чекбокс напротив моего имени сверху? А он не ставится, потому что ниже написано «Введите информацию». Но какую информацию? Куда ввести?

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

См. Синтаксис элементов интерфейса.

Жмём, открывается окно:

Тут мне надо выбрать, мужчина я или женщина (или бесполый ребёнок), при том, что «Аэрофлот» это знает про меня: я это указывал, когда покупал билеты, а также когда регистрировался на рейс предыдущие сто раз. Заодно обратите внимание на то, насколько чудовищно уродская кнопка про ребёнка. Я уж молчу, что всё написано заглавными буквами.

Выбрать пол недостаточно, окно не пропадёт:

Нужно ещё «Сохранить» (странно, что не написали «Сохраните»). А можно отменить! Ну, вдруг я передумал сообщать «Аэрофлоту» информацию о своём поле?

Но это мне ещё повезло. Иногда в этом окне заставляют ввести полные паспортные данные — все из которых «Аэрофлот» тоже знает и так!

Сохраняю:

Божечки, я готов к регистрации! К десятой картинке достиг готовности! Наконец-то можно перейти к регистрации, ура. Даже можно простить вылезшие непойми откуда синие полосы.

Жму в зелёное «Готов к регистрации», но оно не нажимается. Это уже не кнопка! Хотя красное «Введите информацию», расположенное в том же месте, было кнопкой. Тогда жму «Выберите, дорогой сайт, место»:

Ёлки. Это ещё что? Я уже нажал, зачем мне это показывают? Ну а потому что надо же где-то написать «Для Вашего удобства Вы». Самое время рассказать мне о пользе выбора места, когда я уже сам выразил желание его выбрать.

Снова жму «Выберите, дорогой сайт, место». Попадаю в окно прогресса:

Какой-то дизайнер решил, что надо сделать такое окно, а программист не стал возражать. И пофиг, что у этого процесса в принципе нет понятия процентов завершения и после 0% сразу загорается 100%, пусть будет крутилка.

У крутилки перхоть:

И вот, торжественный момент! На тринадцатом шаге мы видим салон самолёта:

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

Но я отвлёкся. Видите, написано «Нет сиденья назначен»? И я вижу.

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

Я уж не знаю, кто и при каких обстоятельствах решил именно эту кнопку исправить и назвать нормально глаголом в начальной форме, но вот какое-то минутное просветление у разработчиков когда-то случилось. Другое дело, что «Вернуться» — это всё равно бред. Нафига мне возвращаться? Я-то дальше хочу.

(И зачем-то влепили буквы «Х» на занятых креслах, которых, видите, в старой версии не было.)

Ясен пень после того, как ткнёшь в место, нельзя сразу перейти к следующему шагу. Во-первых, нужно место сохранить:

Во-вторых, нажать «Вернуться»:

Почему я выбрал именно место 11F? См. Выбор мест в самолёте.

В-третьих — убедившись, что я выбрал место(-а) — нажать на «Регистрацию»:

Теперь ЭВМ может спокойно всё обдумать:

(Я фиг знаю, что за говно про варианты полёта снизу вылезло.)

И вот, я зарегистрирован:

Теперь осталась самая малость. Нужно отправить себе посадочный по почте. Разумеется, «Аэрофлот» не может просто молча сделать это сам, нужно меня измучить этим обязательно. Снизу есть две кнопки: «Посадочный талон по email» и «Печать посадочного талона» (эти кнопки отчего-то в именительном падеже).

Но что же скрывается за кнопкой «Посадочный талон» со стрелкой вниз? Любопытно!

Смотрите, это же «Печать посадочного талона» и «Посадочный талон по email»! Ну как, как? Почему? Зачем?

Жму «Посадочный талон по email», но хрен мне! «Аэрофлот» говорит:

«Аэрофлот», родной, ну ты знаешь мой адрес электронной почты. Очнись! Ты же только что прислал мне на него письмо, с которого всё это началось! Помнишь? Ну вспоминай! Нет?..

Пишу почту:

И вы видите, что происходит? Эта дура за каким-то хреном пишет заглавными буквами. То есть просто представьте. Само так делаться не будет. Значит какой-то программист сидел и писал скрипт, который превращает все нормальные буквы в адресах электронной почты в заглавные.

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

Как живётся этому человеку? Почему он писал этот код? Как он сам себе объяснял свои действия?

Короче, дописываю, жму «Отправить». И получаю:

Имеющийся, мать его, в наличии посадочный талон (-ы) отправлен.

* * *

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

Последние несколько лет я летаю «Аэрофлотом» пару десятков раз в год, и я не помню ни одной заметной задержки рейса. У «Аэрофлота» всегда есть место для ног в эконом-классе. «Аэрофлот» всегда выдаёт мне плед сразу, как я захожу в самолёт. Проводники «Аэрофлота» всегда доброжелательны. Для сравнения, тупейшая авиакомпания «Эс-семь» ставит кресла впритык друг к другу, пытается взять деньги за выбор из этих говёных мест, а плед выдаёт только после взлёта (при этом сами пледы у них говно). Я уж молчу, что «Эс-семь» летает в худший в мире аэропорт Домодедово.

Дорогой «Аэрофлот»! Ты такой клёвый! Давай сделаем тебе нормальную регистрацию?

Максим Ильяхов обновил Главред: теперь он не только подсвечивает стоп-слова, но и проверяет синтаксис. Между режимами переключают табы:

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

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

Табами их делает размещение на рамке переключаемой ими области.

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

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

Две просьбы тем, кто шлёт мне картинки.

Во-первых, не присылайте большие картинки атачами к письму. На такие мегабайты никаких облаков не хватает. Присылайте ссылки на картинки.

Во-вторых, присылайте нормальные ссылки.

Дропбокс не катит. Дропбокс — самое плохое средство шаринга картинок в мире:

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

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

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

Гугль-Драйв — такое же говно.

Я больше всего люблю Дроплер и пользуюсь только им. Ещё хорошо себя ведёт Кибако. В крайнем случае можно Гязу — она хоть и с рекламой, но картинку даёт увидеть.

А идеальный вариант — когда по ссылке открывается сама картинка, безо всякой обёртки вообще.

Весной я читал в Киеве лекцию о понимании задачи:

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

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

Это прям лекция, там больше двух часов с вопросами. Дизайнерам смотреть обязательно. Последние десять минут без видео — что-то сбойнуло в записи.

Ах да, ещё раз спасибо Андрею и Алексею за приглашение и организацию, а Ксении — за съёмку.

На следующий день: Сергей Король законспектировал.

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

В принципе он нормальный:

Но по иронии судьбы как раз кириллица в нём совершенно отвратительна:

Достаточно один раз увидеть его кириллические „ж“ и „к“, чтобы больше никогда его не использовать.