ACTION BUTTONS (КНОПКИ ДІЙ)
Щоб перейти до наступного кроку або завершити завдання, користувачі повинні відправити форму після її заповнення. Щоб користувачі могли продовжити виконання завдання і при цьому не загубилися будь-які дані, важливо, щоб користувачі вибирали вірне дію.
Мал. 2.30. У цій формі на сайті LinkedIn чітко вказано основна дія Send - відправити
Кнопки зазвичай ототожнюються з виконанням будь-яких дій, наприклад відправкою заповненої форми, що відрізняє їх від посилань, які надають можливість переміщатися між сторінками. Завдяки їх формі (опуклі, схожі на справжні кнопки), на кнопки хочеться «натиснути» або «клацнути» по ним. Крім того, оскільки користувачі зустрічаються з кнопками в настільних клієнтських додатках, кнопки надають хорошу можливість вибору способу виконання дії.
Мал. 2.31. У додатку Dell основна дія оформлення замовлення (Checkout) представлено у вигляді кнопки, а другорядне дію продовження покупок (Continue Shopping) представлено у вигляді посилання
Якщо керуючих кнопок занадто багато, інтерфейс може здаватися перевантаженим і користувачам буде складно вирішити, яку дію потрібно виконати, щоб завершити завдання. У подібних випадках спробуйте змінити кілька кнопок на посилання (або посилання з іконками), особливо якщо ці кнопки другорядні. Крім того, спробуйте об'єднати пов'язані один з одним кнопки в кілька зовні розділених груп.
Назви кнопок повинні бути зрозумілими і лаконічними
Використовуйте назви, чітко описують дії, щоб звести до мінімуму будь-яку можливість здійснення помилкового дії. Оскільки кнопки використовуються, щоб виконати завдання або досягти результату, то для подання цього завдання або результату при іменуванні кнопок використовуйте дієслова. Уникайте використання таких ярликів, як «Відправити», які відображають тільки сам процес відправки форми; замість цього вдавайтеся до таких назв, як «Зберегти зміни», «Знайти авіаквиток» або «Знайти користувачів» (рис. 2.32). Нижче наведені два додаткових ради по іменування керуючих кнопок:
• Використання «Прибрати» і «Видалити». Використовуйте назву «Видалити», якщо дані будуть видалятися остаточно і не буде можливості внести замість них інші дані. При цьому використовуйте назву «Прибрати», якщо дані видаляються тільки з цього контексту, але доступні в інших контекстах. Наприклад, під час відправлення електронного листа для того, щоб видалити документ зі списку додатків, використовуйте назву «Прибрати додаток» або «Прибрати». А щоб видалити повідомлення зі списку повідомлень, використовуйте «Видалити повідомлення» або «Видалити».
• Використання «Додати» і «Нове». Використовуйте назву «Нове» при створенні абсолютно нового запису (або елемента даних). Використовуйте назву «Додати» при виборі або співвіднесенні існуючого елемента даних з іншими елементами даних. Наприклад, щоб створити нову призначену для користувача обліковий запис, використовуйте назву «Новий користувач» або «Нове», а щоб створити новий список справ, використовуйте «Додати новий список справ» або «Додати».
Мал. 2.32. На сайті Expedia кнопок присвоєні такі мітки, які описують дії, наприклад, Search for flights (Знайти авіаквиток) і Search for flights + hotels (Знайти авіаквиток + готель)
Вирівнюйте першорядні керуючі кнопки щодо полів для введення даних
Мал. 2.33. На сторінці входу в обліковий запис сервісу Basecamp першорядне дію Sign In (Увійти Зареєструватись) вирівняно щодо елементів форми
Надайте користувачам можливість виконувати першорядне дію шляхом натискання на клавішу Enter
Першорядне дію форми повинно виконуватися за замовчуванням, якщо користувачі натискають клавішу Enter. Це особливо важливо при заповненні тих форм, які містять всього одне поле для введення, наприклад, «Пошук». Це завдання можна виконати за допомогою HTML наступним чином:
Coxpaніть зміни
Будьте уважні при відключенні першорядного дії
У коротких формах іноді допустимо відключити кнопку першорядного дії до тих пір, поки користувачі не заповнять необхідні поля (рис. 2.34). Цей спосіб дає можливість уникнути тих помилок, які викликані неуважною відправкою не до кінця заповненої форми. Однак такий підхід може виявитися невідповідним для великих або складних форм, оскільки користувачі можуть не зрозуміти, чому першорядне дію неможливо виконати. Вони можуть прийти до помилкового висновку, що форма не працює належним чином і відмовитися від її заповнення.
Мал. 2.34. На сайті Campfire кнопка Sign me up ... (Зареєструвати мене) відключена до тих пір, поки всі поля не будуть заповнені
Після першого клацання відключайте керуючу кнопку
Виконання одного і того ж дії кілька разів (при повторному натисканні керуючої кнопки) може привести до небажаних наслідків. Наприклад, неодноразове натискання на керуючу кнопку може привести до того, що замовлення буде розміщений кілька разів. У таких випадках відключайте керуючу кнопку або приховуйте її і замінюйте таким написом, як «Обробка ...» або «Будь ласка, зачекайте ...». Так користувачі переконаються, що їх дія підтверджено і веб-додаток чекає відповіді (рис. 2.35).
Мал. 2.35. На сайті компанії Advanta кнопка Continue (Продовжити) замінюється текстом Please Wait ... (Будь ласка, зачекайте), щоб користувачі знали, що вони успішно виконали дію і додаток чекає відповіді
Приберіть кнопки скидання
Пов'язані шаблони проектування
Щоб форма була відправлена, зазвичай її необхідно якимось чином підтвердити. Якщо формі було відмовлено в підтвердженні, користувачі повинні бути поінформовані про причини відмови. Зазвичай це можна здійснити за допомогою шаблону ERROR MESSAGES.