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

РСС — лучше всего

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как подчеркнуть ссылку пунктиром

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

Я называю такие ссылки «недоссылками», а Артём говорит «дыдыдышка» (изображает прерывистость линии словом dash).

Это редко когда годится, поэтому общий совет: не уверены — не используйте.

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

Остальные варианты на этой картинке не годятся.

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

И саму линию надо делать тоньше. Но всё же толще, чем для сплошного подчёркивания, чтобы оно не потерялось. В моём хорошем примере линия полупиксельная. Если сделать четвертьпиксельную — уже плохо видно. А сплошному подчёркиванию вполне бы хватило.

Опытным путём установлено, что идеальный паттерн — это чередование трёхпиксельных штрихов и двухпиксельных пробелов (это как раз то, около чего галочка):

Непунктирные ссылки по теме:

Дизайнерские скидки

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

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

2015   дизайн   дизайн продуктов   дизайн сайтов

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

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

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

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

Лишний кабинет

На многих сайтах есть «Личный кабинет», а не надо.

За ссылкой «Личный кабинет» скрываются разделы, доступные только узнанным пользователям: «Мои заказы», «Отслеживание отправлений», «Пополнение счёта».

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

Мои заказы

Мы вас не узнали. Укажите эл. почту:
[ И тут поле такое ] [ и Кнопка ]
Пришлём рабочую ссылку на историю заказов через минуту

Если вы ещё не покупали у нас, расскажем в письме о скидках и акциях.

Ключевое слово — незаметно. Тут стоит напомнить, что и регистрация не нужна.

2015   дизайн сайтов   пользовательский интерфейс

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак:

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

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

Интерфейс и волшебные слова

На прошедшем курсе по следам темы информационного стиля в интерфейсе обсуждали вопрос: стоит ли быть вежливым в интерфейсе. Когда сайт должен говорить «спасибо»? Говорить ли «пожалуйста», обращаясь к пользователю с просьбой? Извиняться ли в сообщении об ошибке? Что важнее — человечность или информативность?

Волшебное слово уместно в интерфейсе в словах человека — автора программы, директора фирмы, сотрудника поддержки:

Спасибо, мы приняли заявку и ответим завтра!

Подлежащее не оставляет сомнений, что это текст человека. Можно фотку рядом поставить (не со стока).

Без волшебных слов хуже, от текста веет безразличием:

Мы приняли заявку и ответим завтра

Если же человека исключить совсем, подлежащие станут слабыми:

Заявка принята, ответ поступит завтра

Другой пример:

Извините, на завтра мест не осталось
[ Записаться на другой день ]

Без извинений — нейтрально:

Мест не осталось
[ Записаться на другой день ]

Невежливости не ощущается, потому что это просто надпись, констатация факта. Как «Мест 38» на железнодорожном вагоне. Но можно и извиниться, хуже не будет.

А тут волшебное слово выглядит нелепо:

Извините, к сожалению произошла ошибка -4325

Неискренние извинения только раздражают (а у железки они всегда неискренние).

Операция невозможна. Пожалуйста, пополните счёт

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

Операция невозможна. Пополните счёт

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

На счету 30 000 ₽
[ Пополнить на 10 000 ₽ и заказать Айфон ]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текущее:

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

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

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

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

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

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

2014   веб-дизайн   дизайн сайтов   студентам
Ctrl + ↓ Ранее