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

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

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

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

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

Веб-дизайн

Текст поверх фотографии

Дизайнер иногда ставит текст поверх фотографии, и получается нечитаемо:

Текст поверх фотографии

Если дизайнер это замечает, он пытается спасти ситуацию. Затемняет фотку под текстом:

Текст поверх фотографии

Или кладёт контрастную плашку:

Текст поверх фотографии

Или делает полупрозрачную плашку, но размывает фотографию под ней:

Текст поверх фотографии

Это всё костыли: в результате хуже видно и фотку, и текст.

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

Текст поверх фотографии

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

Текст поверх фотографии

Здесь нормально читается всё, что выше горизонта в зоне расфокуса:

Текст поверх фотографии

Здесь фон вполне позволял поставить текст без проблем, но автор сделал его светло-оранжевым, поэтому он всё равно не читается:

Текст поверх фотографии

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

Читайте также секрет дизайнерских правил.

В заметке использованы работы студентов-дизайнеров.

24 июля   веб-дизайн   дизайн   студентам

Фактоиды должны отличаться от товаров

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

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

Фактоиды должны отличаться от товаров
Студенческая работа в Школе стажёров

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

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

11 июня   веб-дизайн   дизайн сайтов   студентам

Новости сайта: январь 2017

За последний месяц на моём сайте случилось два важных обновления.

Новый дизайн

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

Новости сайта — 2017

А в «Музыке» — другие релизы того же жанра, например, соседние альбомы:

Новости сайта — 2017

Под заголовком раздела по-прежнему может появиться ещё одна строка меню — эта строка нужна для версий одного и того же, например, схем метро:

Новости сайта — 2017

Туда же идут всякие подразделы с общим заголовком.

Всякие такие провязки делаются автоматически — см. как работает мой сайт.

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

Новости сайта — 2017

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

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

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

Новости сайта — 2017

Я, конечно, хочу ещё лучше, но пока успел так. Когда-нибудь улучшения доберутся и до «Мира».

А ещё я прикрутил новые шрифты. Ну, вы видели.

Новый поиск по блогу

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

Новый поиск склоняет слова и учитывает всякие там разные факторы, чтобы нашлись варианты получше. «Берлин»:

Новости сайта — 2017

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

Круче всего, когда в заметке много картинок. «Автобан германия»:

Новости сайта — 2017

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

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

2017   веб-дизайн   дизайн   проекты   этот сайт

Новый сайт Эгеи

Запустили с Ильёй Страйковым новый сайт Эгеи:

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

Теперь вот нормальный сайт, где нормально объяснено, что за Эгея, и почему она клёвая. Отдельное спасибо Максиму Ильяхову.

Документация переехала в Гугль-док — ссылки на статьи живут в разделе «Помощь». Если вы увидите ошибку в документации, сможете написать комментарий прямо там. И мне будет проще её дополнять.

2016   веб-дизайн   продукты   релиз   Эгея
2016   веб-дизайн   дизайн   чтиво   шрифты

Кнопка «Купить» всегда доступна

Мы рисовали страницу машины для Энви, и там справа есть жёлтый блок, который мы называли «ценником» — на нём кнопка «Арендовать»:

Кнопка «Купить» всегда доступна

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

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

Пошёл я презентовать дизайн Илье Синельникову (один из создателей Энви). Рассказываю, значит, про тот ценник.

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

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

Тут Илья перебивает:
— Что-то ты усложняешь, пусть кнопка просто всегда доступна, пофиг на даты.

Что? Машины же может не быть в эти даты.

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

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

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

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

Принцип: кнопка «Купить» всегда доступна.

Гантельная шапка обычно не очень

Такую форму шапки на сайте я называю гантелью:

Гантель
Из работ студентов Школы стажёров

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

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

Гантель попячена
2016   веб-дизайн   дизайн   студентам   Школа стажёров

Подвал на сайте

Часто в подвал сайта ставят что-нибудь вроде «© 2015, Фирма „Дося“». При этом название фирмы уже известно из заголовка страницы, а год редко имеет значение. У себя я пишу годы, но они на каждой странице относятся именно к ней. Стоит подумать, как сделать подвал информативным: указать средства связи, дать реквизиты, поставить служебные ссылки.

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

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

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

В древности ошибки в веб-формах выводили только после отправки на сервер. Человек всё заполнял, нажимал «Отправить», а потом попадал на страницу с ошибкой.

Современную форму скрипт проверяет по ходу заполнения. Но это не повод орать на пользователя до того, как он хоть что-то ввёл:

Дебилизм в «Альфа-клике»

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

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

Дебилизм в «Телеграме»

Это «Телеграм». Он зачем-то говорит мне красными буквами, что в имени пользователя должно быть хотя бы пять символов, но я ж просто ещё не дописал, тупица! Инфостиль равен нулю: надо было написать «5+ characters (a-z, 0-9, _)» в самом начале, а уже потом всю фигню свою длинную ставить.

Правильно говорить об ошибке тогда, когда я закончил ввод и вышел из поля.

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

Дебилизм не помню где

Не помню, откуда это. По полям прогулялся — всю форму залило кровью. Куда это годится? Я имею право ткнуть в поле, а потом ткнуть в другое поле, а потом опять в первое без осуждения со стороны машины.

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

Итак:

  • об ошибках говорим при выходе из полей,
  • о незаполненных обязательных полях говорим при попытке отправки.

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

Комментарий к заказу

Самое глупое поле в формах заказа — «Комментарий».

Любое текстовое поле, в которое можно вписать что угодно, дизайнеры упорно называют словом «Комментарий», и считают, что это окей. Вызываешь такси — на тебе поле «комментарий». Покупаешь наушники — на тебе поле «комментарий».

Я сразу представляю, как у меня вместо компьютера откуда ни возьмись вылезает журналист с микрофоном с набалдашником и спрашивает: «Вы заказали пиццу! Как вы можете это прокомментировать?!»

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

Ранее Ctrl + ↓