Най-добри практики при дизайна на бутони за мобилно приложение

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

Визията е ключова
Как потребителите разбират, че даден елемент на дизайна на мобилно приложение е бутон? Те се опират на визуални „подсказки“ като форма например. Важно е да отбележим, че разчитат на предишния си опит при работа с интерфейси.

Форма
Стандартната форма за бутони в потребителския интерфейс е правоъгълната, като нейният по-модерен вариант е правоъгълникът със закръглени ъгли. С въвеждането на плаващите бутони в мобилните приложения за Android, кръглата форма също стана много популярна и универсално приета. Експериментирането с други форми винаги е опция пред дизайнерите, стига те да са лесно разпознаваеми от потребителската аудитория на бранда.

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

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

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

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

Когато глаголът е част от фраза, като например „Създайте профил“, тя трябва да се използва в своята цялост за яснота, дори и бутонът да стане по-голям. За да има оформлението прегледност и естетика, размерът на бутона може да се уеднакви с този на други свързани елементи. В случай, че той е част от форма за попълване, може да е еднакъв по големина с полетата ѝ.

Местоположение и последователност
При създаване на native мобилно приложение, екипът на разработчика следва насоките за потребителския интерфейс, установени за Android и iOS съответно. Така се постига последователност, която създава удобство на потребителите и им пести време. Разбира се, използването на бутоните като част от навигацията се тества щателно от разработчика още на ниво прототип. Така се постигат най-добрите възможни резултати.

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

Размер и разстояние
На първо място един бутон трябва да е съразмерен с останалите елементи на екрана. Същевременно той трябва да е достатъчно голям, за да може да е удобен за натискане с пръст. При определянето на оптималния му размер, могат да се използват данни за ширината на възглавничката и върха на пръстите. Възглавничките са средно между 10 и 14 милиметра широки, а върховете на пръстите между 8 и 10 милиметра. Можем да заключим, че един бутон с минимален размер 10 на 10 милиметра ще бъде удобен за натискане на всички членове на целевата аудитория на мобилното приложение.

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

Визуална обратна връзка
Тук дизайнерите се фокусират върху взаимодействието между потребителя и бутона. Като интерактивен елемент на дизайна, бутонът може да има най-малко две състояния - ненатиснат и натиснат. Чрез визуалната обратна връзка се дава информация за неговото състояние. Това е основен принцип на материалния дизайн, който се стреми към непрекъснато подобряване на потребителското преживяване.

Каква обратна връзка да се даде? Има няколко основни похвата, които мога да се използват. Бутоните, които са активни (могат да бъдат натиснати), са в ярък цвят, докато тези, които не са достъпни, обикновено са в същия цвят, но са по-бледи. Сред основните похвати за означаване не действие е анимацията. Обичайна практика е при натискането на активен бутон, той да премигне, означавайки, че желаното от потребителя действие се извършва.

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

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

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

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

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

Споделете в: