3 заметки с тегом

интерфейс

[Застройщикам] Как писать номера телефонов

Часто на сайтах застройщиков я встречаю криво записанные номера телефонов: (495) 111-11-11, 8 495 111-11-11, 8-499- 111 11 11. Продолжать можно долго. Так писать — отстой, и тому четыре причины: скобки вокруг кода, неиспользование «+7», левые знаки в номере и переносы из-за пробелов.

Скобки вокруг кода

Вообще, скобки используют для поясняющей, необязательной информации. В нашем случае без кода Москвы 495 или 499 или без кода мобильного оператора не дозвониться, а значит, это не дополнительная, а как раз обязательная информация. Нельзя с мобильного набрать 111-11-11 и попасть в офис питерского застройщика, например. Поэтому код города в скобки брать нельзя.

Восьмёрка вместо +7 или без +7

Тут всё просто. Стоит мне уехать за пределы разумного страны, и я снова вам не дозвонюсь. А если у вас номер мобильного с восьмёрки, то не факт, что я вам и СМС смогу отправить. Даже внутри России. А если написать вообще без +7, то я просто не смогу позвонить с мобильника в один тап.

Пробелы, звёздочки внутри номера

Тут нестрого, но лучше для единообразия использовать дефисы. Это самый безопасный и консервативный вариант, который тоже гарантирует, что если я зашла на ваш сайт с мобильника и тапнула по номеру телефона, то я смогу вам дозвониться. Со звёздочками и пробелами гарантий нет, особенно если у клиента не самый свежий смартфон.

UPD. Переносы из-за пробелов

(За дополнение и код спасибо Жене Лазареву)

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

<span style="white-space:nowrap;">...</span>

Нормальный формат записи: +7 999 123-45-67.

См. также:

Земактив, вторая версия

Запустили вторую версию промостраницы Земактива и новые страницы двух посёлков: «Вяземских садов» и «Кореньков».

Промостраница Земактива рассказывает о посёлках и о компании. Полезное действие — направить читателя на один из посёлков или получить телефон читателя, который с посёлком не определился.

Проблема первой версии промостраницы — наркомания с логикой повествования и структурой. Слишком плотная вёрстка и большое количество акцентов путали читателя. Хардкорное американское параллельное изложение торопило. Это мешало читателю принимать взвешенное решение и осознанно выбирать посёлок. Абзацы о посёлках были пережатые.

Новость выглядела, как заголовок, а заголовок был плохой. На фотографиях не хватало домов, а в тексте — рассказа о посёлках. Банка с вареньем отвлекала и была не к месту. Заголовки слева от текста в блоке «О компании» не выглядели, как заголовки. Были общие проблемы вёрстки, а ещё мы нарушили принципы теории близости.

Сравните первую и вторую версии:

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

Сделано в «Биодинамической редакции» и «Кодельной». Советом помогли Михаил Нозик, Максим Ильяхов и Артём Горбунов.

Пост про обновления сайта на корпоративном портале

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

Sastroy.com: обновления марта

2015 год в Сибакадемстрое объявили «Годом риэлтора», но в онлайне мы дополнительно анонсировали «Год постоянных улучшений сайта». Статья посвящена самым интересным изменениям на сайте Сибакадемстроя, которые мы сделали за март.

Улучшили поля ввода информации

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

Сложно продавать, когда общаешься только в почте.

Сперва мы переименовали поля в более очевидные «Имя», «Телефон» и «Электронная почта». Потом добавили «подсказки». Теперь при заполнении поля «Имя» пользователь видит их:

В зависимости от того, что пишет пользователь, сайт предлагает варианты имени, отчества и фамилии:

Та же логика работает при заполнении поля «Электронная почта». Предлагаем наиболее распространённые почтовые сервисы не писать, а выбрать из списка. C корпоративными доменами не всегда всё гладко, но yandex.ru, gmail.com и даже ngs.ru наш сайт понимает.

В поле «Телефон» добавили так называемую «маску ввода». Когда ставишь курсор в поле, сразу видишь, в каком формате писать телефон:

Изменили навигацию в разделе «Пресс-центр»

Раньше нужно было нажать в верхнем меню «Пресс-центр», потом выбрать «Новости», «Публикации» или «Отзывы» — и снова нажать. Чем отличались новости от публикаций, было непонятно.

Мы слили новости и публикации в один раздел, назвали его «Новости». Любому теперь понятно — здесь всякие тексты про компанию и около стройки. И открывается в один клик — без меню-выпадайки. А отзывы перенесли в раздел о компании.

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

UPD. Сегодня меню выглядит так:

Упростили звонки в офис для мобильных

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

Зелёная анимированная кнопка вызова работает только на мобильных, с компьютера не отображается. Когда пользователь нажимает кнопку, телефон предлагает позвонить нам. Решение подсмотрели в московском Лексусе.

 4   2015   интерфейс   сайт   Сибакадемстрой