Изкуството на дизайна на бутони на потребителския интерфейс на уебсайта: 10 тенденции и съвети
Страхотният дизайн на бутони е нещо, за което повечето потребители на уебсайтове никога не се замислят ... защото, когато работи добре, той е почти невидим. Най-добрите бутони са лесни за щракване или докосване, имат очевидна функция и помагат на потребителите да взаимодействат с дизайна, без да мислят.
Това е доста проста формула, но може да е трудно да се проектира, ако я оставите като замислена.
Днес разглеждаме тенденциите в дизайна на бутони, както и няколко съвета, които ще ви помогнат да проектирате бутон за потребителски интерфейс, който хората да кликват отново и отново. Дайте тласък на вашия бутон с тези съвети, тенденции и идеи, за да предизвикате вдъхновение.
Разгледайте дизайнерските ресурси
1. Поддържайте го просто
Всичко се връща към тази класическа фраза в теорията на дизайна: Дръжте го просто, глупаво (или глупаво, ако предпочитате).
Дизайнът на бутоните на уебсайтове не се различава. Дизайнът на бутоните не трябва да е прекалено сложен. Тя трябва да бъде очевидна и функционална. Понякога други тенденции в дизайна могат да пречат на това и това може да повлияе на реализациите на вашия уебсайт.
Така че, що се отнася до дизайна на бутоните, помислете така - и не го преодолявайте. Бутон трябва да изглежда като бутон. Това е толкова просто.
2. Осигурете изобилие от контраст
Почти толкова важно, колкото да имате разпознаваем бутон, е да сте сигурни, че е лесно да се види.
Причината стилове на бутони за призраци върху изображенията да са с тенденция и избледняване бързо са, защото бутоните нямат достатъчно контраст, за да бъдат лесно разпознаваеми. Потребителите не можаха да ги намерят веднага.
Не крийте бутони с лош контраст. Накарайте ги да се открояват и да викате с много цветен и пространствен контраст, така че да стоят отделно от другите елементи на екрана. Оставете много подплънки около бутоните, за да могат да дишат.
Това прави бутоните по-лесни за потребителите да намерят и идентифицират като елементи за кликване, както и ги прави физически по-лесно да щракват, без да получат грешен елемент по грешка.
3. Използвайте Цвят
Забелязали ли сте някога колко копчета са червени или оранжеви? Това е така, защото ярките цветове привличат окото към тези елементи и насърчават действията.
Използването на цвят също е доста модерна техника за дизайн. От ярки цветове до бутони с прости наклони, цветът може да бъде един от по-лесните начини да помогнете на хората да взаимодействат с дизайна.
4. Напишете микрокопие, което създава очакване
Не правете тази грешка: Бутон с думите „Кликнете тук“ върху него. (Колко спам е това?)
Микрокопирането в рамките на дизайн на бутон трябва да създаде ясно очакване какво ще се случи с едно щракване. Кажете на потребителите какво ще получат след това. Това може да е толкова просто като „Изпращане“ за въвеждане на данни или щракване на връзка към „Научете повече“ или гледане на видео. Независимо какво е действието, кажете на потребителите в микрокопирането.
Тази информация може да помогне за създаване на доверие у потребителите и увеличаване на реализациите с действия / взаимодействия, които потребителите считат за желани.
5. Ангажирайте с фина анимация
Има тенденция в дизайна на бутони, при която уебсайтовете използват два бутона едно до друго. Единият е изпълнен, другият е призрак стил. И двете включват анимация с курсор, която допълнително подчертава два варианта за кликване.
Анимацията може да помогне за привличане на вниманието върху бутоните и дори насърчава кликванията. Стана общоприет потребителски модел, който включва анимация на курсора върху бутони и предоставя прост реплика на потребителите, които те трябва да ангажират.
Просто не прекалявайте. Завъртането, въртенето, мигащите бутони са повече досадни, отколкото полезни.
6. Направете го достатъчно достатъчно за докосване
Бутоните трябва да включват зона с възможност за кликване (с възможност за натискане), която е с диаметър най-малко 10 милиметра, а по-голямата е винаги наред. Този съвет идва от проучване на MIT Touch Lab, което изглежда с размерите на подложките за пръсти във връзка с устройства с докосване.
Нека поставим това в перспектива. Типичният клавиш на физическа компютърна клавиатура е 15 милиметра на 15 милиметра. Това е добра цел. (Просто не забравяйте да отчитате различни размери на екрана, така че вашият бутон да не се губи на малки екрани.)
Ако все пак трябва да използвате по-малки бутони, помислете за добавяне на широк радиус на щракване към него. По този начин, ако потребителят пропусне самите бутони, има достатъчно място около него, така че желаното действие все пак да се случи. (Посетителите на вашия уебсайт ще ви благодарят.)
7. Използвайте познат стил
Има няколко общи стила на бутони, с които всички са запознати. Използвайте един от тях.
- Правоъгълен запълнен бутон с квадратни ръбове и текст вътре
- Правоъгълен запълнен бутон със заоблени ръбове и текст вътре
- Правоъгълен запълнен бутон с видима сянка (горе)
- Правоъгълен бутон за призраци
- Обикновени кръгови бутони, най-често използвани в долния десен ъгъл за обозначаване на подкрепа, помощ или чат
8. Поставете на очаквано място
Бутоните не само трябва да се появяват и да функционират очаквано, но и трябва да бъдат разположени на място, което потребителите ще ги търсят.
- За началните страници това включва разположение на бутоните под основно заглавие или блок текст. Бутоните обикновено са оставени подравнени с текста или в центъра на екрана.
- За формулярите след въвеждането се появяват бутони. Някои единични форми за въвеждане подравняват бутона на същия ред вдясно от входа.
- Общите CTA бутони се появяват директно под съдържанието, за което се позовават.
- Бутоните за пускане или стартиране на видео или игра често са в центъра на екрана за визуализация.
- Обикновено бутоните за пазаруване или електронната търговия са в горния десен ъгъл.
9. Не забравяйте обратната връзка
Бутонът реагира ли на взаимодействие? Уверете се, че в дизайна на интерфейса на бутона е включен очевиден цикъл за обратна връзка.
Осигурете визуална или инструкция щека, че бутонът е свършил своята работа. Някои бутони ще изискват повече работа от други. Бутоните, които препращат към друга страница или уебсайт, например, предоставят обратна връзка, че бутонът е работил, ако новата страница се зареди. Бутонът за подаване на формуляр може да предостави на екрана съобщение „благодаря“, ако информацията е изпратена правилно.
10. Използвайте бутоните умишлено
Твърде много бутони създават хаос.
Използвайте бутони там, където имат смисъл. Не претоварвайте дизайна с бутони навсякъде. Потребителите няма да имат ясна представа къде и какво е най-важно да кликнат.
Запазване на бутони за използване с цели на уебсайта. Те трябва да насочват посетителите към елементите, които са най-важни в цялостния ви дизайн.
заключение
Бутонът на уебсайта е елемент, който преобразува вашето призив за действие в резултат. Отделете време да помислите за този дизайн, от цвят до функция до микрокопиране. Тестови дизайни на бутони, за да се гарантира, че имате най-функционалната версия във вашия интерфейс.
Ако имате бутон, който работи, не попадайте в капана на тенденциите и не променяйте дизайна. Когато става въпрос за бутони, функцията трябва да бъде основен приоритет.
