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

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

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

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

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

Веб-дизайн

Позднее Ctrl + ↑

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 957   2016   Бюро   веб-дизайн   дизайн продуктов   дизайн сайтов   работа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак:

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

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

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

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

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

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

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

 346   2014   веб-дизайн   пользовательский интерфейс

Стрелка в выпадайке

Стрелка справа подсказывает, что перед нами выпадайка:

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

 141   2014   веб-дизайн   пользовательский интерфейс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текущее:

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

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

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

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

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

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

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

Что почитать на выходных — 97

Вот:

  1. The Fermi Paradox. «Moving back to just our galaxy, and doing the same math on the lowest estimate for stars in the Milky Way (100 billion), we’d estimate that there are 1 billion Earth-like planets and 100,000 intelligent civilizations in our galaxy... Where is everybody?».
  2. What is it like to work with Elon Musk?
  3. Landing pages are for wimps.
  4. Основные ошибки при выключке текста по левому краю, по центру и по формату. Игорь Штанг сделал наглядную памятку.
 19   2014   веб-дизайн   дизайн   жизнь   чтиво
Ранее Ctrl + ↓