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

Обычно по ним ничего невозможно понять, и неясно, зачем их выкладывать. А иногда всё понятно, и неясно, зачем было выступать.

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

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

Управляемая загрузка предполагает муторное программирование, поэтому она доступна немногим разработчикам. Есть инструменты, которые несколько упрощают работу, однако останавливает сама необходимость программирования. Я хочу демократизировать управляемую загрузку и снять необходимость в программировании.

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

• class="emerge" — появись только после того, как все твои внутренности будут загружены;
• data-effect="slide" data-up="100px" — появись, пролетев снизу вверх 100 пк;
• data-spin-parent="true" — показывай ромашку в родительском элементе, пока не загрузишься.

По умолчанию любой элемент с классом emerge появляется после загрузки всех содержащихся в нём изображений с полусекундным фейдом (изображения, прописанные через ЦСС, тоже учитываются). Эффекты позволяют модифицировать это поведение. Кроме встроенных эффектов, можно создать любой с помощью параметров data-style-1 и data-style-2. Стиль элемента переключится из первого во второе состояние, как только элемент будет готов — программирования снова не потребуется (используются ЦСС-анимации).

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

В первой публичной версии будет как минимум:

• несколько встроенных эффектов появления;
• создание эффектов вручную с помощью ЦСС-анимаций;
• появление с заданной временной задержкой после готовности;
• зависимость (ожидание готовности другого элемента);
• ромашка в родительском элементе, пока грузится данный;
• поддержка Вебкита (в неподдерживаемых браузерах, как и с выключенным Джаваскриптом, страницы открываются обычно).

Эмёрдж будет платным продуктом и выйдет в ноябре.

Вот Кац написал про пустые поезда со станции «Октябрьское поле». Это хорошо. Глупо возить воздух в часы пик. Если пассажиры будут знать о пустых поездах и планировать поездки с их учётом, нагрузка на систему будет лучше сбалансирована.

Но Каца не все пока читают. Почему бы вот метрополитену не повесить об этом плакаты прямо на станции?

См. также плакаты для станции ВДНХ.

Некоторые переходы в метро ведут на середину платформы:

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

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

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

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

Допустим, вы банк. Вы привлекаете вклады и показываете свои условия на сайте. Но многие люди не знают, как пользоваться вкладами; боятся нести по улице значительные суммы денег; не хотят думать, в какое отделение идти. Новые клиенты придут скорее, если сразу помочь им с этим. Заранее объяснить, как потом перевести деньги со своего счёта в другом банке на этот вклад, не снимая наличные. Показать ближайшее отделение и график работы. Дать почитать договор, объяснить его комментариями на полях. Познакомить с менеджерами.

Или, например, вы устанавливаете окна. У вас на сайте перечислены варианты стеклопакетов и профилей, есть калькулятор стоимости. Но многие не знают, как вообще устанавливаются окна. Как всё померить? Кто будет вытаскивать старые окна? Сколько времени займёт вся работа по замене? Реально ли это делать, когда на улице −20 °C? Что, если новое окно не влезет? Можно ли оплатить всё карточкой? Новые клиенты придут скорее, если ответить им на эти вопросы, описав весь процесс. Заранее объяснить, что может пойти не так и как этого избежать. Показать ближайший магазин, где можно посмотреть образцы, график работы, телефоны. Дать почитать договор, объяснить его комментариями на полях. Познакомить с менеджерами.

А может быть, вы предоставляете веб-хостинг. На сайте вы перечисляете услуги, тарифы, технические платформы, опции. Но если человек первый раз делает сайт, он вообще не понимает, почему домен и хостинг — это разные, не связанные услуги. Он не понимает, нужна ли ему поддержка CGI, SSL и mod_hz. Понятия не имеет, как заставить работать почту на новом домене. Спросите, зачем ему хостинг, помогите понять, какой выбор влечёт какие ограничения. Новые клиенты придут скорее, если позаботиться о том, чтобы им было легко и безопасно начать. Рассказать о том, что какой путь предстоит пройти от покупки хостинга до открытия нового сайта. Помочь разобраться с ДНС, выбрать и настроить ФТП-клиент. Познакомить с сотрудниками поддержки.

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

Подход «Провести за ручку» лежит, например, в основе дизайна сайта «Формула лома». Сайт по пунктам рассказывает о том, как компания «Унимет» покупает и перерабатывает медный лом. И прямо внутри рассказа есть приглашения сделать очередной шаг.

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

Это заблуждение. Всем нравится забота. Если у вас «провести за ручку» превращается в снисходительное отношение, значит вы просто недостаточно искренне позаботились о клиенте.

Периодически встречаю такое в письмах:

Пожалуйста, сохраняйте историю переписки при ответе на это письмо.

Сразу хочется ответить:

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

Нет ничего ужаснее писем, где смысловая часть составляет десятую долю объёма.

В прошлой серии я рассказал вам о том, как делать в Фотошопе пунктирное или тонкое подчёркивание, а сегодня поведаю секрет знака рубля:

Читайте всё по тегу Фотошоп.

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

The large circle is too big. Many apps in iOS 7 use it: all the Store apps, Safari, Messages, Photos… In all these icons, the big shape in the center is simply too big. Every icon designer I’ve asked would instead draw something like the icon on the right. To our eyes—and we get paid to have good ones, we’re told—this is more correct.

Сначала мне тоже правый вариант казался аккуратнее, сбалансированнее. В текущем 6-м Ай-ОСе иконка Апстора как раз примерно такая.

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

И вот на днях у меня окончательно всё сложилось в голове, когда я увидел, как выглядит современная стиральная машина. Дело в том, что моей стиральной машине лет 20 уже (досталась по наследству), и я не слежу за прогрессом в этой области, потому что она удивительным образом всё ещё работает. Так вот, слева на картинке современная стиральная машина, а справа — моя (еле нашёл фотку в интернете):

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

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

Наши представления о красоте в значительной степени формирует технический прогресс.

Эпл вовсю использует ФФФ.

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

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

Очень просто:

Фича остаётся в описании релиза, но помечается меткой «Скоро». В каком-нибудь там 7.1 появится, когда будет готова.

Тут Сергей Доренко вернулся на «Эхо Москвы», и я по этому поводу решил вспомнить молодость и нарезать всякую смешную чепушень, которую он говорил во время первых своих двух недель.

Раз — пьяный капитан, прислуживание Милонова в храме, выборщики в США, руководство Омском по скайпу, письмо компартии США, союз правообладателей, поднятие женского пенсионного возраста, возможное освобождение Меннинга по УДО, предложение Шойгу подчинить МЧС Минобороны и всё остальное:

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

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