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

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

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

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

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

Дизайн сайтов

Позднее Ctrl + ↑

Вертикальное выравнивание заголовков полей форм

Заголовки полей форм ставятся на базовую линию с текстом в самих полях:

Заголовки полей форм ставятся на базовую линию с текстом в самих полях

Если заголовок выровнять вертикально по центру поля, он сползёт при переносе:

Если заголовок выровнять вертикально по центру поля, он сползёт при переносе

Тому, кому нравится, что такой заголовок «как раз» выровнялся по высоте с полем, предлагаю ужаснуться виду трёхстрочного заголовка:

Предлагаю ужаснуться виду трёхстрочного заголовка

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

Первая строка заголовка должна всегда оставаться на месте:

Первая строка заголовка должна всегда оставаться на месте

То же самое с многострочными полями:

Первая строка многострочного поля должна всегда оставаться на месте

Форма — редактируемая таблица, поэтому в ней работают законы вёрстки таблиц.

 296   2014   веб-дизайн   веб-формы   дизайн сайтов

Онлайн-консультанты на сайтах

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

Умники говорят, что зато с онлайн-консультантами конверсия растёт. Я хотел бы уточнить: для роста конверсии загораживание собственной витрины — это обязательное условие? Если дать посетителю возможность задать свой вопрос Ольге, но при этом не мешать шины смотреть, конверсия сразу упадёт? Если Ольга — главная надежда отдела продаж, почему нельзя предусмотреть для неё место на странице?

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

 75   2014   веб-дизайн   дизайн сайтов

Три состояния пункта меню сайта

Пункт меню на сайте имеет три возможных состояния.

Невыбранное:

Три состояния пункта меню сайта

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

Текущее:

Три состояния пункта меню сайта

Мы находимся на главной странице раздела «Дрожжи». Текст выделен фоном, никак не реагирует на наведение и клики.

Родительское:

Три состояния пункта меню сайта

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

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

 420   2014   веб-дизайн   дизайн сайтов   обратная связь   студентам

Уродские и опрятные письма

Бесят уродские письма. Автор может оказаться прекрасным человеком, но жизнь несправедлива — встречают по одёжке.

Примеры уродских писем

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

Две огромные ссылки не пришей кобыле хвост, муха посередине, нет подписи:

Бесформенный текст, невнятное деление на абзацы, три ссылки в случайных местах:

Строки с маленькой буквы, неприличных размеров подпись со всеми орденами — смысловая часть занимает около десяти процентов объёма сообщения:

Каша, капслок, линейки из знаков равенства — настоящий ад:

Как написать опрятное письмо

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

Вот нормальное письмо, которое приятно читать:

Несколько советов:

  1. Разбивайте текст на предложения. Предложения начинаются с большой буквы и заканчиваются точкой, вопросительным или, редко, восклицательным знаком, разделяются одним пробелом. Злоупотребление многоточием и скобками приводит к тому, что становится непонятно, где заканчивается одна мысль и начинается другая.
  2. Отделяйте абзацы пустой строкой. Для начала сработает простое правило: если нажали Энтер один раз, нажимайте второй. Не переносите строку, если не начинаете новый абзац. Не начинайте абзац с отступа слева (электронное письмо и бумажная книга — разные вещи). Нет ничего хуже абзацев, отделённых одновременно и отступом слева, и пустой строкой.
  3. Не вставляйте длинные ссылки внутрь абзаца. Особенно плохо выглядит синяя ссылка, разорванная переносом. Лучше выделить ей отдельную строку. Такая строка может прилипнуть к предыдущему или следующему абзацу, если она имеет к нему отношение.
  4. Не цитируйте всю переписку. Оставьте только ту часть цитируемого письма, на которую отвечаете, не заставляйте адресата проделывать работу по выуживанию смысла. Чем короче ваше письмо, тем быстрее вы получите ответ.
  5. Сократите подпись до минимума. Нужно ли каждому адресату знать все ваши реквизиты, включая номер ай-си-кью? Как правило, нет.
  6. Оформите подпись как следует. Пример плохого приёма — отделение подписи линейкой, составленной из дефисов. Не обводите подпись в рамку, не ставьте туда логотип (его лучше засунуть в какое-либо другое место). Не раскрашивайте текст. Любой добавленный к палитре цвет, даже серый, добавляет неряшливости. Особенно плохо смотрятся серые подписи с синими ссылками, они сразу приковывают к себе внимание вместо того, чтобы сидеть тихо.
  7. Оставьте две пустых строки перед подписью. Этот самый простой и эффективный способ выделить подпись без внесения шума.

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

Пишите.

 3122   2014   дизайн   дизайн сайтов   жизнь   эл. почта
 540   2014   дизайн   дизайн сайтов   Мак   студентам

Тонкое подчёркивание через бордер

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

Это всё удивительные усилия, направленные на ухудшение результата.

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

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

Провести за ручку

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

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

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

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

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

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

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

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

 580   2013   дизайн   дизайн сайтов

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

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

Пример: письмо о необходимости перейти по ссылке для завершения регистрации

Типичная ошибка (все ссылки в примерах никуда не ведут, но вы всё равно попытаетесь их нажать):

Дорогой наш Илья!

Вы попытались зарегистрироваться на сайте «Супермегасайт». Для подтверждения регистрации перейдите по ссылке. Узнавайте о наших новостях из нашего блога и не забудьте установить наше приложение для айфона.

Искренне ваш «Супермегасайт»

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

Внимание, правильный ответ:

Илья, подтвердите регистрацию:
Подтвердить и перейти на Супермегасайт

Супермегасайт

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

Пример: письмо о том, что купленная вами книга отправлена

Типичная ошибка:

Самого доброго времени суток вам, кормилец наш, покупатель Илья!

Вы заказали Книгу «Как заказать книгу», в чём можете убедиться в вашей истории заказов. Ваша книга была передана в службу доставки. Трекинг-код: HZ4382430324j.

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

В вашей корзине сейчас 0 товаров. Так как вы купили книгу «Как заказать книгу», мы также рекомендуем вам ознакомиться с книгами: «Как подчёркивать ссылки», «Почему письма-уведомления сосут» и «Что делать, если вы не придумали третье название книги».

С благодарностью, интернет-магазин «Азот»

Особенно вот бесит эта привычка не сделать ссылкой то единственное, что меня волнует — трекинг-код!

Внимание, правильный ответ:

Илья, книга «Как заказать книгу» отправлена вам.
Узнать статус доставки и ознакомиться с рекомендациями

Азот

Ссылка ведёт на страницу c трекингом, рекомендациями и всеми служебными ссылками.

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

Разумеется, это правило не применяется к письмам-рассылкам, которые никуда не ведут, предназначены для чтения прямо в почте и потому самодостаточны. О том, как делать рассылки, читайте Максима Ильяхова.

 334   2013   дизайн   дизайн сайтов   эл. почта

Резиновый дизайн, респонсив и адаптив

Хорошие веб-дизайнеры всегда делали сайты резиновыми, а плохие — кирпичом.

Хороший дизайнер смотрит на споры о необходимости резины с удивлением. Ясен пень, дизайн должен уметь жить при разных размерах экрана, о чём тут спорить? Сайт — не плакат.

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

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

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

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

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

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

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

Делайте сайты полезными и привычными независимо от размеров экрана.

 823   2013   веб-дизайн   веб-разработка   дизайн   дизайн сайтов

Навигация на сайте Студии Лебедева

Изучал устройство необъятного портфолио Студии Лебедева и обнаружил любопытную вещь. Вот, например, недавняя работа — пакет для кафе. Где в структуре сайта лежит эта страница? Смотрим на верхнее меню:

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

Нет, не так. Посмотрим, куда ведут ссылки в меню, и на адрес страницы пакетов:

Наше всё /everything/
Графдизайн /everything/graphic/
Проекты студии /everything/als/
Пакеты для кафе /everything/als/gift-bag/

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

Берём приём на вооружение.

Ранее Ctrl + ↓