Створення рекомендацій щодо дизайну кнопок може здатися зайвим. Зрештою, ви вже знаєте, як виглядають веб-кнопки, чи не так?
Як і звичайні кнопки, не слід забувати, що вони є центральною частиною веб-дизайну з важливими функціями:
- Кнопки часто є основним закликом до дії.
- Кнопки "Купити" сильно впливають на прибуток.
- Кнопки реєстрації електронної пошти допомагають створити клієнтську базу.
- Кнопки надсилання форми важливі для керування.
- Соціальні кнопки допомагають поділитись своїм контентом.
Пропонуємо практичний посібник зі створення кнопок. Мета керівництва: допомогти вам створити кнопки, які перетворять та наближають вас до досягнення мети вашого сайту.
1. Переконайтеся, що кнопки добре поєднуються з вашим сайтом та брендингом
Кнопки повинні виділятись, щоб користувачі натискали на них, але в позитивному ключі. Враховуйте свій брендинг та дизайн. Переконайтеся, що кнопки гармоніюють з палітрою кольорів і стилем вашого сайту.
Водночас не бійтеся експериментувати. Сплеск сміливого кольору може бути тим, що збільшить конверсії.
2. Дотримуйтесь встановлених угод про дизайн
Цей момент має бути очевидним, але не завжди це так. Для того, щоб користувачі могли натискати на кнопки, вони повинні знати, що ця опція існує. Якщо ваш дизайн занадто далекий від звичайних правил, це може завадити користувачам розпізнавати кнопки.
Встановлені угоди
Форма. Завдяки тривалій еволюції комп'ютерів найбільш знайомою формою є прямокутник (із закругленими кутами чи ні). Як приклад, погляньте на WordPress.
Оскільки тривалий час користувачі стикаються із цим стилем, вони легко впізнають його. Звичайно, зараз популярні інші види кнопки, наприклад, з опцією вкл./вимк. Але вони також звичні для користувача.
Тіні та відблиски. Тіні зі зміщенням стають універсальним сигналом у тому, що це можна натиснути. Тому не забудьте зробити ваші кнопки більш опуклими.
Яку б форму та дизайн кнопок ви не вибрали для свого сайту, просто переконайтеся, що ви залишаєтеся послідовними. Якщо ваші кнопки дуже відрізняються одна від одної на одній сторінці сайту або на різних, це заплутає користувачів і завадить їм зробити вибір (натиснути на кнопку).
Дивіться також:
Багато цікавої інформації у розділі Уроки WordPress.
3. Використовуйте мітки
Наступним пунктом нашого посібника з дизайну кнопок є мітки. Без підказки про те, що робить кнопка, користувачі не зможуть визначити, чи потрібно натискати на кнопку.
Це необов'язково має бути текстом, іноді достатньо вказати іконки. Ви можете бачити це у соціальних клавішах обміну, які стали всюдисущими.
Також можлива комбінація тексту та зображень. Єдине, що має значення, щоб користувач однозначно ідентифікував ефект при натисканні на кнопку.
Обов'язково зробіть свої мітки описовими та конкретними, використовуйте дієслова, що описують дію, яку вона виконуватиме (наприклад, купівля або купити), та створіть актуальність цієї дії, наприклад, зі словом зараз. Це особливо важливо для закликів до дії, які часто є центральною частиною будь-якої веб-сторінки.
4. Розмір та інтервал кнопок
Розмір кнопки та відстань праворуч від неї особливо важливий для мобільного дизайну. На мобільній версії натискання повинно враховуватися не так точно, як при використанні мишки, оскільки дотик пальцем має похибку.
Важливо створити кнопки таким чином, щоб:
а) зробити їх придатними для використання,
b) запобігати випадковому використанню користувачем неправильної інформації.
Коли справа стосується розміру, слід враховувати, що середній людський кінчик пальця становить 16-20 мм. Це приблизно 45 – 57 пікселів. Щоб врахувати це, Apple рекомендує використовувати розмір кнопки щонайменше 44 х 44 пікселя.
Для інтервалу між кнопкою та іншим контентом немає конкретних правил. Просто переконайтеся, що ваші кнопки розташовані таким чином, що користувач натисне саме на них, а не на інші кнопки/посилання. Забезпечення достатнього простору може допомогти виділити найважливіші кнопки, такі як заклики до дії.
5. Впровадження зворотного зв'язку
Як тільки ви розробили свої кнопки так, щоб користувачі могли їх чітко ідентифікувати, робота не припиняється. Наступне питання: що відбувається, коли користувачі використовують кнопки? Як виявилось, ці елементи дизайну мають більше одного стану:
- звичайний – ясно видно, що ця кнопка запрошує до взаємодії.
- Сфокусований - Як правило, ефекти наведення миші підтверджують, що взаємодія з елементом можлива.
- Натиснуто - Винагороджує користувача за дію, підтверджує, що відбувається якась дія.
- Зайнято – показує активність, що відбувається у фоновому режимі.
- Відключено - Дає зрозуміти, що можливі інші дії, тільки не в даний час.
6. Позиція Кнопка помітна
Звичайно, коли ви створили свої кнопки, останній крок – переконатися, що користувачі можуть їх знайти. В іншому випадку, як вони натиснуть на них? Тому також важливо вибрати правильне розташування кнопки.
Тут також є сенс узгодити дії із встановленими угодами. Наприклад, більшість людей очікують, що основний заклик до дії буде вищим за фокус, так що це гарне місце для його розміщення.
Інші кнопки також можуть мати такі ж умовні позначення, як кнопки соціальних мереж у нижньому колонтитулі.
7. Контрастність
Виділяючи кнопки з решти дизайну, ви даєте зрозуміти, що взаємодія можлива і бажана. Це також запобігає втраті кнопок у загальній масі контенту.
Загальні інструменти для створення розмаїття:
- Колір – використовуйте контрастні кольори, у тому числі для позначки кнопки.
- Розмір - Великі елементи виділяються краще.
- Типографіка - Сміливий текст або використання іншого шрифту може привернути увагу.
- пропуск - Більше порожнього місця навколо елемента означає більше уваги до нього.
Хороший спосіб з'ясувати, чи достатньо контрасту використовувати тест на примружування. Для цього просто відсуньтеся від екрану, примружте очі і подивіться, чи виділяється все ще кнопка.
Як створювати кнопки у WordPress
Тепер, коли ви знаєте, як мають виглядати кнопки, постає питання: як їх створити на своєму сайті? Новий редактор Gutenberg робить це дуже просто.
1. Створіть блок-елемент
У Gutenberg є можливість створити кнопку, як будь-який інший блоковий елемент. Просто натисніть на символ плюс ліворуч. Коли відкриється меню, перейдіть до елементів макета, щоб знайти елемент Кнопка (Button).
Натисніть, щоб додати її до своєї сторінки.
2. Налаштувати текст та призначення кнопки
Після натискання WordPress відкриває це меню.
У вас є такі варіанти:
- Змінити орієнтацію – використовуйте символи вгорі, щоб вирівняти кнопку вліво, в центрі або вправо щодо сторінки.
- Текст кнопки "Редагувати" – натисніть кнопку, і тоді ви зможете ввести та редагувати текст: напівжирним, курсивом або закресленим шрифтом.
- Введення посилання – там, де редактор говорить Вставити URL-адресу або тип, ви вказуєте, куди буде перенаправлено відвідувачів при натисканні кнопки.
3. Відредагуйте дизайн
Можна змінити колір кнопки та тексту лише за кілька кліків.
Або виберіть один із доступних параметрів або використовуйте панель вибору кольорів, щоб створити новий відтінок. Також можна ввести шістнадцятковий код певного відтінку. Якщо ви оберете комбінацію кольорів, яку важко прочитати, редактор попередить вас про це.
У розділі «Додатково» можна додати до кнопки стиль CSS. Таким чином, можна створити власний дизайн із розміткою CSS, включаючи ефекти зависання та багато іншого.
І це все - найпростіший спосіб додати кнопку WordPress.
Джерело: torquemag.io
Коментарі до запису: 0