Ководство Лебедев Артемий

§ 36. Убитое поколение

Иных уж нет…

А. С. Пушкин

Старые предметы – будь то сберкнижка тридцатых годов или вывеска пятидесятых – бесконечно приятны. Совсем не тем, что они стары. А тем, что в них видна рука автора, обладавшего представлением о прекрасном.

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

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

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

С момента прихода к власти Хрущева мы вдруг видим резкий перепад в другую сторону. В сторону полного отсутствия творческого начала. Связано это с тем, что Никита Сергеевич был приверженцем максимального сокращения всех трат. Именно ему мы обязаны «хрущобами» с потолками два пятьдесят.

Лирическое отступление

Низкие потолки придумал не Госплан, а господин Ле Корбюзье. Последний является автором модулора – набора пропорций, основанных на пропорциях человека. Ключевыми точками были пупок, грудь, голова, вытянутая вверх рука и так далее. Подо все это подводилась теоретическая база, доказывающая приятность этих пропорций для человеческого существования и восприятия. Следующей точкой по модулору была высота потолка два пятьдесят, которую якобы человеку было любо над собой видеть…

А человек всегда хотел иметь потолки никак не меньше трех метров высотой.

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

Типичный российский пейзаж. Тюмень, 2004

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

Брежневские времена не подарили миру блестящих творцов.

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

Периодические попытки этого поколения заняться творчеством приводят к тому, что мы видим вокруг – «мир глазами пигмея».

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

§ 40. Цветовые теории

Первобытные общества выделяли три основных цвета – красный (кровь, огонь), белый (молоко, день), черный (земля, ночь). Чем сложнее и утонченнее общество, тем более широкая цветовая гамма существует в его культуре.

Лирическое отступление

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

Сегодня нет разделения цветов на главные и второстепенные. Есть набор упорядоченных и закономерных чисел. Цветовые системы различаются теперь не столько цветами, взятыми за основу, сколько детализацией разбивки и способностью описать и передать любой цвет.

Выбор цветовой модели оправдывается лишь областью применения. CMYK – в полиграфии, RGB – на экране, LAB – для описания и хранения любого цвета, который нельзя передать ни на бумаге, ни на мониторе.

Хозяйке на заметку

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

Многие полиграфисты убеждены, что в аббревиатуре CMYK буква K – последняя от слова black, которую якобы взяли для избежания путаницы с буквой B, обозначающей blue в цветовой модели RGB. На самом деле CMYK расшифровывается как cyan, magenta, yellow, key color. Причем key color (ключевой цвет) может быть любым: хочешь – черным, а хочешь – серебряным.

Современный дизайнер не испытывает затруднений с нахождением того или иного цвета – доступны все. Именно тут возникает вопрос: какие выбрать? Многие специально формализуют доступные им цветовые модели математически, беря за основу некоторые цифровые показатели. Скажем, черно-белую шкалу (256 градаций) можно разбить на 20 градаций:

При этом у зрителя остается впечатление полной гаммы.

Этот маленький пример – упрощенная модель восприятия сегодняшних зрителей. Никто не пытается изобрести свою цветовую модель, достаточно придумать числовую закономерность в существующих цветовых пространствах. Никакой тайны в последовательности цифр нет. Просто многим удобнее таким образом находить гармонию среди бесконечного количества цветов.

§ 41. Шесть приемов порноиндустрии

По внешним признакам всегда легко узнать информационный сайт, каталог, домашнюю страницу, поисковую систему. То же и с порнографическими сайтами: их всегда можно легко и безошибочно распознать, так как они редко бывают похожи на сайт новостного агентства. (См. также § 25. Явление формата)

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

Ставить рядом два больших баннера вообще категорически запрещено. Если никак нельзя обойтись одним баннером, нужно располагать их на значительном расстоянии друг от друга (вверху и внизу страницы, например). Бывают случаи, когда подряд идут пять-шесть баннеров. Это один из главных признаков порносйта. Многие не думают о репутации и готовы зарабатывать показы любым способом.

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

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

Этим страдают почти все службы, предоставляющие бесплатный хостинг (во «вспомогательном» окне показывается, как правило, баннер). Первая реакция пользователя – закрыть такое окно, не дожидаясь загрузки содержимого. Многие сайтостроители думают, что в таком окне уместно дать рекламу какого-либо события на сайте или нарисовать «пульт управления» сайтом. Как правило, никто этих вещей не видит, потому что пользователям трудно побороть свои условные рефлексы.

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

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

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

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

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

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

§ 42. Родовая травма рунета

12 октября 1999

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

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

Самые популярные русские сайты в 1995 году (когда пятьдесят посещений в день считались сногсшибательным достижением) тоже содержали ссылки на все, что только можно. И это было огромной пользой для тех, кто тогда был в сети.

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

В рунете все начиналось на западный манер, но идеи первооткрывателей при них же и остались – новички идеей ссылок не прониклись.

Современные сценарии

На сайте нет вообще ни одной ссылки. «Зачем я буду кого-то рекламировать? Мне же не платят за это».

На сайте есть раздел «Ссылки», в котором стоит ссылка на microsoft.com. «А бывают другие сайты?»

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

Хозяйке на заметку

Кнопку размером 88  31 придумали в компании «Нетскейп». Первая картинка в этом формате выглядела так:

Потом такую же сделал «Микрософт» для рекламы «Эксплорера». Потом еще кто-то, потом еще. Так в мире появился один из самых идиотских форматов. Ни два ни полтора.

Большинство сайтовладельцев боятся ставить ссылки. Те, кто сумел перебороть страх, пишут письма: «Прошу вас дать разрешение поставить ссылку на ваш сайт».

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

Мораль: ссылки можно и нужно ставить на любую страницу в интернете. Спрашивать разрешения никогда не надо.

§ 43. Открывание новых окон

Открывать новые окна против желания пользователя – смертный грех.

Монитор – это центральный пульт управления компьютером. Только при помощи монитора человек имеет возможность взаимодействовать с компьютером и получает адекватную отдачу от своих действий. Без монитора нельзя узнать – набрался ли текст, открылась ли программа, перемещается ли курсор, работает ли компьютер.

Окно браузера – это центральный пульт управления интернетом и основной информационный канал пользователя. Окно браузера практически автономно – оно позволяет отображать любой вид данных (текст, графику, видео, звук и пр.) без помощи вспомогательных окон. Окно браузера снабжено системой навигации – кнопками «вперед» и «назад». (См. также § 75. Про дом и про ссылки на самого себя)

Хозяйке на заметку

Средний пользователь кнопкой «вперед» пользуется во много раз реже, чем кнопкой «назад». Более того, постоянная необходимость в кнопке «назад» говорит о том, что «домоцентризм» веба (то есть принятие людьми модели «дома» в качестве отправной точки) ничуть не устарел. Начиная навигацию с определенной страницы, человек будет постоянно к ней возвращаться. Было бы удобно, если бы кнопка «домой», используемая сегодня не по назначению, вела на главную страницу сайта, на котором человек сейчас находится.

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

Насильно открывать новое окно в браузере – все равно что ставить на стол пользователю второй монитор без спросу. Разумеется, работать с двумя мониторами бывает иногда удобно. Разумеется, иногда удобно открыть и новое окно в браузере, чтобы в нем смотреть ссылки из «основного» окна. И то и другое должно быть исключительно добровольным выбором пользователя.

Автор уверен, что на Западе делать сайты вообще не умеют. Иностранные сайты очень часто устроены по принципу открывания нового окна фиксированного размера, в котором показываются флеш-ролики. Смотрится это, может быть, и красиво, но это нельзя считать сайтами. Это мультимедийные презентации. Самый главный недостаток подобной организации – невозможность поставить ссылку на конкретный раздел или страницу.

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

Иногда для создания логического разделения между «проверенной» и «непроверенной» информацией на серьезном аналитическом или государственном сайте внешние ссылки могут открываться в новом окне.

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

§ 46. Заставки на сайтах. Часть первая

Каждый день она входила и каждый день молилась о том, чтобы это ежедневное свидание сошло благополучно.

Л. Н. Толстой. Война и мир

Существуют страницы-заставки, выполняющие роль входной двери. На некоторых сайтах можно встретить первую страницу, которая не посвящена анонсам свежих материалов или перечню рубрик, а просто содержит красивую (или некрасивую) картинку.

Впервые в рунете такая специальная заставка была применена 16 февраля 1996 года на сайте Н.Ж.М.Д.

В те дни не было автоматического определения кодировок (в известном автору пространстве, по крайней мере), и вообще все русские сайты в то время были на английском. Тогда для каждой кодировки (для «Виндоуса», ДОСа, Маков и пр.) держалась своя отдельная копия сайта.

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

Некоторые сайтостроители вообще делали сайты только в какой-либо одной кодировке.

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

Заставки потеряли свой первоначальный смысл (направо пойдешь – КОИ найдешь). Теперь они нужны только на презентационных сайтах (и без всякого выбора кодировок). Потому что любой информационный сайт уже не должен задерживать пользователя лишней страницей.

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

Ужасная манера – в качестве заставки вешать скриншот с основной страницы сайта. Это особенно раздражает тем, что посетитель невольно вчитывается в названия разделов, выбирает понравившийся, тыкает в него… и оказывается на странице, где еще раз нарисована вся навигация.

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

§ 47. Заставки на сайтах. Часть вторая

Это было глухое отгороженное место, где лежали какие-то материалы.

Ф. М. Достоевский. Преступление и наказание

• Он неприступен, словно крепость,
• Словно цитадель,
• Поскольку охраняют вход
• Как засекреченный завод,
• и даже строже…

Группа «Секрет»

Обсудим функциональность и смысловую нагрузку заставок.

I. Простая графическая заставка, коллаж, фотография, анимация, являющаяся ссылкой на главную страницу с содержанием.

II. Флеш-заставка. Обычный презентационный ролик. Часто размещается временно – чтобы заставить всех посмотреть информацию, скажем, о скидках. Месяц повисит – и исчезнет.

III. Простая страница, на которой расположена информация о технических ограничениях (например, «Сайт работает только в первом „Эксплорере“ при разрешении 100  100») или предупреждение для несовершеннолетних.

IV. Любой набор информации – ссылки на свежие новости, анонсы продуктов, адреса.

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

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

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

Хозяйке на заметку

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

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

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

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

§ 48. Боремся за чистоту урлов

Рассмотрим один из самых важных моментов веб-навигации – возможность посетителя быстро и безошибочно определить свое местонахождение на сайте.

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

Хозяйке на заметку

URL означает uniform resource locator. Впервые эта аббревиатура появилась в рабочем документе автора веба Тима Бернерса-Ли 21 марта 1994 года. Изначально Бернерс-Ли использовал понятие UDI – uniform document identifier.

Для начала необходимо решить, на каком языке будут даны названия файлов. Лучше всего использовать английский. В редких случаях уместен русский (точнее, волапюк, транслитерация или клер) – например, при написании матерных слов, при рассказах о Бабе-Яге и Змее Горыныче, при употреблении русских слов, ставших частью английского. Крайне нежелательно смешивать языки, например: sait.ru/staff/sekretarsha/new/novichki.html.

Данный параграф имеет в интернете адрес www.artlebedev.ru/kovodstvo/48/. Каждый читатель может навигироваться по сайту, стирая справа части адреса до ближайшей косой черты. Если стереть 48, попадаешь в оглавление параграфов, и так далее.

Если бы адрес был чем-нибудь типа www.artlebedev.ru/kovodstvo/?q=%E8%E4%E8%EEF2%F1%EA%E8%E9+%E7%E0%EF%F0%EE%F1+%ED%E0 %+%F1%E9%F2&num=10 читатель совершенно терял бы ориентацию. К сожалению, многие сайтостроители не следят за чистотой адресов, за что посетители им платят сполна: не запоминают ни одной внутренней страницы.

Лирическое отступление

Длинные и неудобоваримые адреса часто возникают из-за лени программистов. Надо один раз всех программистов собрать и объяснить, что пока адреса не станут нормальными, проект не откроется. Повозмущаются и сделают как надо.

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