Веб-дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Гантель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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