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

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

Можно настроить навороченные моки, с хитрыми ХТТП-заголовками, задержкой и чем угодно ещё:

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

Подробнее об интерфейсе — на странице проекта.

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

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

Это какие-то дворы. Кайф их в том, что они очень рельефные: какие-то части сильно ниже или выше. Из-за такой «неприступности» там очень мало машин.

1

2

3

4

5

6

7

8

9

10

11

Во всех заметках с тегом «мир» снизу автоматически подгружается форма поиска авиабилетов.

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

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

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

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

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

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

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

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

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

Андроид:

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

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

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

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

Я обрабатываю фотографии в Лайтруме и слабо ориентируюсь в этой части Фотошопа. В Лайтруме чинить баланс белого просто: тыкаешь в серую, на твой вкус, область картинки, и он правит цвета всей фотки. Меня всегда удивляло отсутствие аджастмента White Balance в Фотошопе.

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

Кладём над слоем кривые:

Берём там вот эту пипетку:

Тыкаем ею точку, которая должна быть серой, например, на чёрно-белой фотографии мужика, висящей на стене слева, и Фотошоп сам гнёт кривые так, чтобы всё стало нормально:

Было-стало:

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

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

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

Я прилетел в сектор A, а мне надо было в C. Удачно прошёл через всё. Схема сектора A:

Иконка гейта в клёвом кружочке:

Для навигации на транспорте достаточно двух цветов: один для всего, что связано с самой транспортировкой, а другой — для инфраструктуры. Аэропортная классика — жёлтый и чёрный. Здесь всё про вылеты синее, а остальное — красное:

Реклама в навигации. Последний дьютифри перед вылетом — такое важно продублировать на русском:

Иду в сторону сектора C через B:

Лаконичная схема аэропорта на знаке. Расстояния между секторами указаны минутах:

Фотка получилась по-киношному синяя:

Можно не писать слово «гейт», когда есть диапазон:

Куча знаков в секторе B:

Схема сектора B:

Цвет линейки, отделяющей стрелку от остального, в отличие от цвета текста, дружит с фоном:

Человек на распутье:

Туалет на знаке в центре скромно встал в угол:

Пиктограмма паспортного контролёра:

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

Другие гражданства — почему-то на белом фоне:

Вот я и в секторе C:

На схему налеплена реклама временного магазина «Молескина»:

Путь к гейту лежит через очередной дьютифри (да, тот был не последним):

Мусульманская молельная комната с полумесяцем:

Круто, что кружочки гейтов стоят на месте, обычном для стрелок на других знаках:

На компактный красный знак не влез текст, но всё понятно и без него:

Ещё фотозаметки из Германии:

• Музей БМВ в Мюнхене
• Уличные таблички Штутгарта
• Автобаны в Германии

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

Инициалы должны умереть вместе с веками римскими цифрами. Нормальные ребята пишут имена.

Добавил себе в редстандарты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сохраняю:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пишу почту:

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

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

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

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

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

* * *

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

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

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

В субботу поиграл техно в «Буковском». Так:

Плейлист:

Есть страница микса на Промодиджее.

В прошлый раз я вам показал навигацию в Ельцин-центре, а теперь несколько штук из самой, эм, экспозиции.

Автомобиль с чертежом (см. также заметку про музей БМВ, где подобного дофига — ну там красивее, конечно):

Один из залов рассказывает историю 20 века:

Всё красиво размещено, на стены проецируются фильмы и хроника:

Газета:

На полу пиктограммой звука отмечены точки, где лучше всего слышно звуки эпохи — всякие там радиопередачи и прочее:

Депутатский билет:

СССР — Россия:

Ловко показано письмо Горбачёву:

Листы довольно неразборчивого текста лежат рядом друг с другом, а слева весь тот же текст набран на компьютере:

Параллельное изложение!

Пустые прилавки:

Выступление на пленуме ЦК КПСС (звучит аудиозапись):

На специальной штуке подписано, кто есть кто. Красота:

За дверью — баррикады:

Я устал, я ухожу:

Свобода: