Бутоните са обикновен, всеки дневен елемент на дизайн. Въпреки това, понеже бутоните са визуален елемент, част от създаването на един лесен са възприемане процес в сайтовете и приложенията, трябва да обърнем повече внимание на тези основни най-добри практики за бутоните. Също така трябва да разгледаме типовете бутони и техните позици – важна информация която трябва да знаете за да създадете ефективен бутон който подобрява потребителското изживяване.

Най-добрите практики при бутоните

Направете бутона да изглежда като бутон

Помислете как дизайна съобщава за достъпност. Как потребителите разбират че елемента е бутон? Използвайте форми и цветове за да направите нещата да изглеждат като бутон.

Също така помислете внимателно докато правите дизайн за размера и отстоянията при натискане. Размерът на бутона играе важна роля за разпознаването на този елемент от потребителите. Различните платформи имат различни изисквания за минималния размер на бутоните. Резултати от проучването на MIT Touchlab са показали че средният размер на върховете на пръстите с които натискаме е между 10мм и 14мм а върховете е между 8мм и 10мм което прави бутон 10мм на 10мм идеалния минимален размер.

Местоположение и подредба

Поставете бутоните там където потребителите очакват да са или където лесно могат да ги видят. Пример е iOS Guidelines който ни показва позиции за бутони.

Обърнете внимание и на подредбата на бутоните. Редът по който потребителите виждат бутоните, особено ако те си кореспондират един с друг като Напред и Назад е важен. Уверете се че дизайнът ви слага акцент на най важното действие.

В примера по долу ние използваме червено за бутона който извършва потенциално разрушително действие. Обърнете внимание как основния бутон е е само подсилен чрез цвят и контраст, но също е и от дясната страна на диалоговия прозорец.

Етикети

Етикетите на бутоните обясняват какво правят те. Поставете ясно послание какво ще се случи след като бутона бъде натиснат.

Ето пример с картинката от по горе но без обяснителен текст. Изглежда ли различно?

Call To Action

Направете най-важния бутон ( особено ако ги използвате за Call to action ) да изглежда като най-важния бутон.

Формата на бутона.

Обикновено, правим бутоните да са правоъгълни или правоъгълни със заоблени ъгли, в зависимост от стила на сайта или приложението. Според някой проучвания показват че заоблените бутони подобряват информационните процеси и насочват погледа към центъра на елемента.

Може да бъдете по креативни като използвате и други форми като кръг, триъгалник или дори някаква произволна форма, но имайте в предвид че последното мое да е малко рисковано.

Уверете се че поддържате консистентност през целия интерфейс, така че потребителите лесно да могат да индентифицират и разпознаят графични елементи от интерфейса като бутоните.

Типове бутони и тяхното поведение

1. Повдигнат бутон.

Това е бутон най често правоъгален който чрез засенчване изглежда че е повдигнат. Този тип бутони придават допълнително измерение към плоски дизайни. Те наблягат на функцията при оживено или широко пространство.

Използване

Редово за да се даде по-голямо значение на действие в дизайн с много различно съдържание.

Поведение

Този тип бутони се повдигат и изпълват с цвят при натискане.

Пример

Повдигнатите бутони изпъкват повече от плоските бутони. Пример за това са андроид приложенията.

2. Плоски бутоните

Плоските бутони не се повдигат, а се изпълват с цвят при натискане. Основното предимство при този тип бутони е че те са изключително прости – те не разсейват от основното съдържание.

Използване

В диалогови ( за да се обединят действието на бутона и съдържанието на диалоговия прозорец)

На поле с инструменти

В съдържанието с растояние за да могат лесно да се открият.

Поведение

Пример

Плоските бутони при андроид диалогови прозорци.

3. Превключващи бутоните

Превключващите бутони позволяват на потребителите да променят настройките между две или повече положения.

Използване

Най-популярният начин за използване на тези бутони е за включване или изключване на дадена настройка

Също така този тип бутони могат да се използват вързани в група, но оформлението трябва да е направено подходящо, че да се разбира даденият превключвател е в група с други настройки. Този тип бутони си имат и изисквания

Да имате поне три бутона в група

Те могат да са бутон с текст, иконка или и двете.

Иконките са подходящи за превкючващ бутон който ви позволява единствено да избирате между избрано или не избрано, като добавянето на лайк във фейсбук. Най-добрата локация за тях е в бара на приложенията, инструментите, бутони с действия или превключватели.

Много е важно да се избере подходяща иконка за бутона. Това е покрито в друга статия .

Пример

iOS използват превключватели за секцията с найстройките.

4. Призрачни бутони

Призрачните бутони са тези бутони които са прозрачни или празни като имат проста форма като например правоъгалник. Те обикновено са с рамка от много тънка линия, докато вътрешната част съдържа обикновен текст.

Използване

Използването на призрачен бутон като CTA бутон обикновено не е добра идея. Може да видите bootstrap примерно и техния призрачен бутон за сваляне на bootrastrap който изглежда по абсолютно същия начин като логото им което може да обърка хората.

Тези бутони са подходящи за използване като второстепени или третостепенни действия, защото те няма да се съревновават с вашият основен CTA бутон. Вие бихте искали хората да видят идеално вашият CTA и ако не ги заинтригува тогава да минат на второстепения.

Позитивните действия винаги имат по голям контраст и хората ги виждат ясно като действие.

Поведение

Пример

AirBnB имат призрачен бутон за действието Стани хост

5. Плаващи акшън бутони.

Плаващите акшън бутони са част от Google Material Designe. Той е кръгъл бутон който при натискане се изместа и разтяга.