Створення кращої сторінки контактів

38

Від автора: хороша сторінка контактів дуже важлива для підтримання відносин зі своїми відвідувачами. Чи говоримо ми про електронну комерцію, журналах, особистих вебсайтах, онлайн-сервісах – як перший засіб комунікації з вами користувачі зазвичай шукають контактну сторінку. Дивно, але багато веб-дизайнери нехтують скромною контактної сторінкою, навіть вважають її одним з найменш важливих аспектів вебсайту. Давайте це виправимо.

Значення хорошій сторінки контактів

Сторінку контактів часто упускають з виду. Скільки вебсайтів ви відвідували, бажаючи зв’язатися, щоб поскаржитися на продукт або послугу, або задати питання? І як часто вам доводилося битися з контактною формою?

Хороша контактна сторінка вигідна будь-якого виду бізнесу. Вона здатна збільшити задоволеність клієнтів, допомагаючи з вирішенням їх проблем. Вона також може допомогти поліпшити свою продукцію і послуги, забезпечивши широку дорогу для цінного відкликання.

Коли мова заходить про відкликання безпосереднього користувача, інші канали можуть виявитися обмеженими. Телебачення, радіо, журнали, газети… всі вони є формою односторонньої комунікації. Онлайн-комунікація повинна бути вулицею з двостороннім рухом; діалогом між бізнесом і відвідувачем. Отримують користь від цього обидві сторони, і ось чому так важлива хороша сторінка контактів.

Розташування

Перший крок: місце розміщення вашої контактної інформації. Немає сенсу мати найкращу контактну сторінку на світі, якщо ваші відвідувачі не можуть її знайти. Допомогти їм можна, якщо дотримуватися деяких дизайнерських традицій.

Загалом, контактна інформація може знаходитися в двох місцях:

Основна навігація – ідеальне місце для посилання на контактну сторінку. Відвідувачі зазвичай шукають контактну сторінку справа, тому що вона бачиться елементом другорядного значення. Отже, ви просто побачите посилання на контактну сторінку, як один з останніх елементів навігації сайту.

Ще ми можемо подивитися на меншу субнавигацию у верхньому правому куті екрану. Це теж цінна позиція для контактної сторінки. До речі, краще уникати розміщення контактної сторінки в випадаючому меню, так як там її легко пропустити.

Нижній колонтитул також є популярним місцем для контактної інформації. Він може містити посилання на контактну сторінку:

…або саму важливу контактну інформацію:

Передбачити потік відвідувачів на контактну сторінку складно, так що розміщення посилань щонайменше у двох згаданих місцях добре підстрахує вас.

Найважливіше в сторінці контактів

Тепер ви спокійні – ваші відвідувачі зможуть знайти шлях до контактної сторінці, і пора подумати про її фактичному вмісті. Почнемо з основного і розглянемо ту інформацію, яка повинна бути представлена.

Адреса електронної пошти / контактна форма

Адреса електронної пошти – найлегший спосіб онлайн-спілкування у бізнесі. В якості альтернативи можна використовувати контактну форму, яка відсилає електронну пошту. За допомогою форми ви отримуєте більше контролю над вмістом (необхідні для заповнення поля) і так можна запобігти спам. Про контактних формах ми розповімо в цій статті нижче.

Адреса

Бізнес з традиційним магазином не повинен забувати згадати свою адресу. Якщо у вас багато магазинів, краще створити індивідуальну сторінку для кожного. Заповніть її окремою контактною інформацією цього магазину, годинами роботи, схемою проїзду і т. д. Це потрібно не лише відвідувачам, але і може допомогти вашому сайту в місцевих пошукових запитах.

Телефон

Відображення телефонного номера викликає почуття довіри. Це часто розглядається як знак реально існуючої компанії, і дійсно допомагає онлайн-магазинах.

Соціальні мережі

Багато веб-сайти стали додавати на контактну сторінку кнопки соціальних мереж. Хоча, можливо, це не всім сайтам йде на користь, для деяких відвідувачів має додаткове значення. Особливо з тих пір, як все більше і більше компаній пропонують підтримку клієнтів через Twitter (іноді навіть цілодобово і без вихідних).

Додатково

Не існує універсального рішення для хорошої контактної сторінки. Будь-який сайт або бізнес вимагає певних елементів, які можуть виявитися зайвими на інших сайтах.

Є безліч додаткової інформації або властивостей, які виявляться корисними на контактній сторінці. Для традиційних магазинів хороша ідея – згадати, скажімо, години роботи. Великим компаніям можна було б зробити посилання на їх Live Chat, а сайти електронної комерції можуть закріпити довіру користувачів, вивісивши свій номер VAT.

Зручна інформація

Зручність застосування інформації захистить ваших відвідувачів від розчарування сторінкою контактів.
Замість зображень включіть свою інформацію у вигляді тексту HTML. Текст HTML можна скопіювати і вставити, що полегшує відвідувачу збереження ваших контактних даних.

Адреса електронної пошти повинен використовувати посилання mailto. Це дає відвідувачеві можливість клацнути на неї і послати повідомлення без необхідності копіювання адреси доставки та відкривання поштового клієнта. З цією технікою, однак, може виникнути проблема в особі спам-ботів, збирають адреси електронної пошти, пов’язаних з посиланням mailto:. Тому ви можете вирішити спочатку заплутати їх за допомогою сервісу зразок mailtoencoder.com.

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

Бізнеси, сильно залежать від своїх традиційних магазинів, часто отримують велику користь від інтерактивної карти, даючи користувачеві можливість швидко знайти шлях до торгових точок. Показати адреса магазину добре, а додати інтерактивну карту ще краще.

Завдяки Google Maps вставити це корисна властивість простіше простого. Просто введіть свою адресу в Google Maps і клацніть на іконку посилання в боковій колонці. Там для вас знайдеться код вставки.

Ви знали, що можна адаптувати карту під себе? Ви можете відредагувати кольору картки, додати на карту користувальницькі покажчики і створити легенду. Детальніше про це можна прочитати на developers.google.com. Також можна обдумати застосування альтернативних сервісів, таких як досить привабливий Mapbox.

Не забудьте про пошукової оптимізації

Будучи відвідувач, ви миттєво дізнаєтеся на сторінці контактної адресу. Пошуковим системам, однак, потрібна невелика допомога при розпізнаванні різних елементів.

Цю проблему можна вирішити, застосувавши структуровані дані. Структуровані дані – це форма розмітки HTML, що дає пошуковим системам більше інформації про базовому значенні вмісту.

Як це працює? Скажімо, у нас є агентство веб-дизайну під назвою «Fine Design», розташоване за адресою: 3102 Highway 98, Mexico Beach, FL. Микроданные дають можливість пошуковим системам краще розпізнати цю адресу. HTML-Код буде виглядати приблизно так:

<div itemscope itemtype="http://schema.org/LocalBusiness">
<h2><span itemprop="name">Fine Design</span></h2>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">3102 Highway 98</span>
<span itemprop="addressLocality">Mexico Beach</span>,
<span itemprop="addressRegion">FL</span>
</div>
</div>

Можна було б зробити ще один крок і обернути цей блок елемент address. Елемент address слід застосовувати тільки до адрес, релевантними до змісту сайту, не просто будь-якою адресою, який може опинитися посеред вашого контенту. Роками застосування цього елемента було головним болем для розробників, так що якщо не впевнені в собі, то не турбуйтеся про нього!

Ось і все відносно адреси компанії. Однак микроданные також можна застосовувати для телефонних номерів і адрес електронної пошти:

Tel: <span itemprop="telephone">850-648-4200</span>
Email: <a href="mailto:[email protected]" itemprop="email">[email protected]</a>

Завдяки цій розмітці пошукові системи знають, що це адреса, номер телефону та електронна пошта компанії «Fine Design». Це прихована інформація – відвідувачі не можуть її бачити – але дуже корисна для пошуковиків.

Також ви могли б обміркувати можливість застосування мікроформати hCard, який дозволяє з легкістю зберігати контактну інформацію на різних платформах. Детальніше про микроформатах можна прочитати на html5doctor.com.

Контактні форми

Велика частина вебсайтів застосовують на своїй сторінці контактну форму. Тим не менш, деякі форми надмірно ускладнені і недружественны до користувача.

Якою б простою не здавалася контактна форма, насправді це – комбінація декількох компонентів. Вони всі повинні працювати разом, щоб гарантувати найкраще враження користувача.

Поля введення

Поля введення, такі як текстові поля, кнопки вибору опцій (радіокнопки), чекбокси та ін. дають змогу внести необхідну інформацію.

Відвідувачі сайту більше схильні заповнювати короткі форми, так як вони вимагають менше зусиль. Кількість полів вводу – це балансування між враженням користувача і потребами бізнесу. На Hubspot проаналізували понад 40 000 форм і розглянули ефект збільшення кількості полів введення. Результат їх дослідження говорить, що слід використовувати як можна менше полів форми і бути особливо обережним з ускладненими текстовими областями і випадними списками.

Допоможіть своїм відвідувачам заповнити поля, вказавши правильний формат. Телефонні номери та дати можуть виявитися підводним каменем, особливо для іноземних відвідувачів. Атрибут HTML5 placeholder надасть вам допомогу.

Далі переконайтеся, що виділили необхідні для заповнення поля (їх традиційно виділяють з допомогою зірочки *). Найбезпечніше однозначно вказати обов’язкові і необов’язкові для заповнення поля.
Нарешті, корисно виділити активне поле. Воно може бути позначено ледь-ледь або дуже яскраво – як хочете.

Нижче наведено приклад контактної форми з підручника Джима Нільсена (Jim Nielsen). Він використовує червону зірочку для обов’язкових до заповнення полів, дає поради по форматам і виділяє активне поле.

Валідація форми

Внутрішня валідація також здатна запобігти деякі хвороби контактних форм. Необхідність відправлення і перевідправки форми через введення невірних даних або даних у неправильному форматі дуже дратує. Як тут вже згадувалося, краще всього надати відвідувачам допомогу, показавши потрібний формат (наприклад, дати, номера…).

Кнопки

Без кнопки відправки не буває контактної форми. Вона повинна знаходитися в самому кінці. В якості тексту використовуйте кнопки «надіслати повідомлення» замість «відправити», щоб нагадати клієнтам, що вони роблять.
Звичайний стандарт з минулого року – включити кнопку «скидання» або «очистити форму». Не робіть цього. На неї випадково натиснуть. Немає нічого гірше, ніж надрукувати продумане докладне повідомлення і втратити його з вини кнопки «скидання».

Відгук

Відвідувач вніс свою контактну інформацію, написав повідомлення і натиснув кнопку «відправити». Що тепер? Дійшло повідомлення чи ні?

Впевніть своїх відвідувачів у тому, що повідомлення успішно відправлено, відобразивши відповідне повідомлення. Також добре застосувати повідомлення електронної пошти з підтвердженням.

Той же порада стосується помилок. Показ помилки при невдачі з надсиланням повідомлення – необхідність, яка може запобігти безліч майбутніх суперечок. Повідомлення про помилку повинне бути доброзичливим, тому уникайте показувати насторожуючі коди помилок.

Дизайн контактної сторінки

До дизайну контактної станиці застосовується безліч технічних вимог, але не будемо забувати один з найважливіших моментів: візуальні стилі.

Якщо використовуєте контактну форму, зробіть поля великими, дружніми і ваблячими заповнити їх. Білий простір і відступ послужать вам хорошу службу.

Відвідувачі вебсайту йдуть шаблоном у формі літери F при перегляді веб-сторінки, так що при створенні своєї розмітки пам’ятайте про це. Для контактних форм найкраще розташувати всі поля по вертикалі замість розміщення їх один біля іншого. Так знижується кількість необхідних рухів погляду відвідувача при заповненні форми.

Контактна сторінка повинна поєднуватися з візуальними особливостями сайту. Послідовність – ключ до досконалості. Подивіться, наприклад, на цю контактну сторінку let’s Travel Somewhere, створену у вигляді поштової листівки.

І, як у випадку більшості пов’язаних з веб-дизайном завдань; творчий підхід відмінно окупається. Ніл Пейтел (Neil Patel) створив свою контактну сторінку у вигляді інфографіки, потроївши кількість контактних запитів.

Приклади контактних форм

Говорячи про хороших контактних формах, давайте заради натхнення подивимося на ці приклади (для відвідування відповідного сайту клацніть на зображення):

Висновок

Перед створенням дизайну своєї контактної сторінки переконайтеся, що відвідувачі можуть її знайти. Зробіть посилання на неї з основної навігації або нижнього колонтитула. Пам’ятайте, що більшість людей шукають контактну інформацію на правій стороні екрану.

Продумайте, яку інформацію потрібно включити. Конче важлива можливість послати повідомлення через електронну пошту або контактну форму. Адреса і номер телефону теж можуть виявитися корисними. Додаткова інформація, така як посилання на профілі в соціальних мережах і години роботи для деяких видів бізнесу, теж потрібна.

Важлива інтерактивність. Застосуйте атрибут mailto для адрес електронної пошти і атрибут tel: для телефонних номерів (дуже стане в нагоді відвідувачам з мобільних пристроїв). Можна вставити інтерактивну мапу, таку як Google Maps, але обміркуйте її наслідки для продуктивності.

Юзабіліті контактної форми може створити або зруйнувати контактну сторінку. Запитуйте лише найнеобхіднішу інформацію. Уникнути головного болю можна, показуючи правильний формат полів введення і застосовуючи внутрішню валідацію. На забувайте відображати успішну відправку повідомлень при відправці форми.