nobelfaik


Блог Игоря Штанга

Доктор, мой макет не дышит!


Previous Entry Поделиться Next Entry
Переверстка №3. Блок «Как стать клиентом» на сайте компании
nobelfaik
Павел пишет: Это блок «Как стать клиентом» на сайте компании. Судя по Яндекс.Метрике, на нем почти не останавливаются. Форму еще ни разу не заполнили. Связывались ли клиенты с фирмой по телефону или почте, неизвестно. Что же не так?




Почему не останавливаются на телефоне и не заполняют форму, я объяснять не возьмусь. Возможно, ответ лежит за областью дизайна. Займемся текстом и его формой.

Сначала диагностика:
1. Посчитаем, сколько на картинке кеглей. Пять типоразмеров в сочетании с дополнительными начертаниями и цветами делают верстку беспокойной. Трех будет достаточно.




2. Посмотрим на отступы. Они все разные:




3. Прищуримся. Строчки равномерно размазаны по макету, деление на группы неочевидно:




Прежде чем начинать переверстку, разберусь с текстом:




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




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




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




Не хватает только вишенки:




Пусть трубка будет зеленой, а плашка бледно-коричневой:




Было и стало:




Слева текст расползается, справа две четкие группы:




Присылайте ваши макеты на переверстку. Описание и правила рубрики

Записи из этого журнала по тегу «переверстка»


  • 1
А подсказка формата ввода телефона не нужна?

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

Да, в идеале. Но если не продемонстрировать приемлемый формат, то это может вызвать замешательство у пользователя. Что не очень хорошо.

Замешательство? Что за бред. Просто будут писать как им удобно 89871234567 / 8 (987) 123-45-67 / +7 987 123-45-67. Если это так важно, то чтобы соблюсти формат можно прямо в инпукте сделать форматирование телефона http://robinherbots.github.io/jquery.inputmask/

Да пусть пишут в это поле все, что хотят помимо номера телефона)

Спасибо за переверстку!

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

И насчет имени. По-моему проще звонить человеку, имя которого уже знаешь. Я смотрел, как с формами «Стать клиентом» поступали студия Лебедева и бюро Горбунова. Они тоже ставят поле для имени.

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

Имя можно убрать, можно добавить. Мы с вами не можем однозначно утверждать, что конверсия формы с именем будет выше конверсии формы без имени. Более-менее однозначный ответ может дать A/B тест.

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

(Анонимно)
Для телефона можно использовать маску. Это когда человек кликает по полю, а там уже появилась заготовка +7 (...) ... .. .. И он понимает, в каком формате надо ввести номер.

Ребята, спасибо за комментарии, но вы немного отклонились от темы. У кого есть вопросы или комментарии про верстку?)

Вопрос: как выбиралось расстояние между доп. телефонами и почтой?

На глаз. Такое, чтобы разделить строку на две части и при этом сохранить ее цельность

Вопрос: Нужен ли вообще заголовок?

Содержимое блока не отвечает на вопрос «Как стать клиентом?». Это контактные данные и форма обратной связи. Номер телефона сам по себе является заголовком, всем понятно что это и зачем оно нужно.

И еще.

Можно ли сделать так или это не ок?
https://www.dropbox.com/s/1wu499gbvbljgz6/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202015-06-01%2012.17.00.png?dl=0

Edited at 2015-06-01 07:19 (UTC)

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

Edited at 2015-06-01 10:15 (UTC)

Почему не стал бы сдвигать блоки?

Мне лично кажется, что заголовок в этом виде даже мешает. Вопрос в заголовке предполагает ответ в блоках, графическую рифму между ними, а её нет и она и не нужна-то особо, блоки и так отлично работают.

Спасибо за подробные, интересные рассказы процесса!

Один вопрос.
Расположение строки «Доп. телефоны...» не является ли нарушением правила внутреннего и внешнего по отношению к строке с номером телефона?
Тот же самый вопрос о расположении «Оставьте номер...» на плашке.

Формально является: пробелы между цифрами больше, чем расстояние между строками. Но если сделать всё по правилам, то строка с доп. телефонами улетит слишком далеко — как в исходном варианте. Здесь группировка и компактность важнее.

Расстояния над и под строкой «Оставьте номер...» равны, поэтому правило не нарушено. Внутреннее ≤ внешнее.

Edited at 2015-06-02 20:36 (UTC)

  • 1
?

Log in

No account? Create an account