Бутоните са едни от най-важните елементи на вашия сайт. Те, както всеки друг елемент на сайта ви трябва да имат последователност, не само помежду си, бидейки един и същ размер, с едно и също отстояние, държейки се по един и същ начин при интеракция и имащи едни и същи цветове, но трябва да следват и дизайна на вашия сайт.
Една от по-обичайните практики, при създаването на бутон е да се ползват т.нар. акцентиращи цветове. Тоест, ако логото ви има 3 цвята, от които един е по-скоро страничен, просто допълващ, неосновен, този цвят, особено ако е достатъчно ярък, бихте могли да ползвате за акцентиране в дизайна си, както и за цветовете на бутоните.
Забележка: Бутонът отгоре е примерен и не води никъде.
По принцип бутоните трябва да следват следните принципи:
Основен стил
Основният стил на бутоните е този, който ще ползвате най-често. Бутоните имат следните основни форми – със фон (запълнени), без фон (очертани), без фон и очертание – подчертани. Обикновено безфоновите или подчертаните бутони се ползват за второстепенна страница. Например, ако в началото на сайта ви, имате бутон „купи“, до него може да има второстепенен (за вас и целите на бизнеса ви) бутон, който да казва „научи повече“. Тези бутони обикновено са или просто подчертавка или с много по-блед, сливащ се фон, докато основните, важните за вас и бизнес целите ви бутони са с наситени ярки цветове. Разбира се, като всичко друго, бутоните също зависят от контекста и ако имате много наситен цветен фон, по-добре би било бутонът ви да бъде просто бял, отколкото да поставите друг наситен цвят отгоре, още повече, ако цветовете не си подхождат.
Форма
Освен стил, бутоните имат и форма – вътрешно отстояние (padding) между текста и границите на бутона, сенки (box-shadow), и заобляне или липса на заобляне по ъглите (border-radius). Важно е тези стилове да бъдат подходящи за общия стил на сайта ви. Бутони с остри ъгли не стоят добре, когато всичко останало в сайта ви е заоблено, както и обратното.
Варианти
Както бе споменато и по-нагоре, бутоните следва да имат няколко варианта, които трябва да сте си подготвили.
- Основен – най-често използваният бутон. Целта им е да бъдат натиснати, следователно трябва да бъдат лесно различими. Това се постига с по-ярки цветове или такива, които се отличават на фона, в който са поставени.
- Второстепенни бутони – без значение дали имат фон (с, например, сив цвят), представляват просто очертания или само подчертавка, трябва да имате дизайн за второстепенните си бутони, който да следвате.
- Неактивни бутони – какво се случва с бутон, който не може да бъде натиснат, преди потребителя да изпълни някакво действие? Хубаво е тези бутони не само да са по-бледи, но и да съобщават на потребителите какво трябва да направят, за да активират опцията, която стои зад тях, без значение дали това е регистрация или нова информация.
Съдържание
Съдържанието и текстовете, които пишем, както знаем са си цяла наука, поради което един цял отрасъл от маркетинга и рекламата са посветени на т.нар. текстописци (copywriters).
За текста в бутоните следва да опитате да постигнете:
- Разбираемост – потребителят трябва да може да разбере лесно какво ще последва при натискането на бутона.
- Привлекателност – особено бутоните свързани с някакво важно за вас действие, като покупка или регистрация, например, трябва да бъдат с достатъчно привлекателно съобщение, съобразявайки се в същото време с тона на бранда ви.
- Контекстуалност – бутоните следва да бъдат съобразени с мястото на което се намират. В случаи, че тона на бранда ви е твърде лежерен, може да е, но може и да не е добра идея да използвате същия тон при важни действия, като приемане на „бисквитките“ например. Напълно нормално е текстът на бутона да гласи „Съгласен съм“ или „Отмени“/“Отхвърли“.