Юзабилити сайта НКО: как интуитивно понятный интерфейс помогает увеличить пожертвования и не потерять читателей

Андрей Мисюрев рассказал, как юзабилити сайта влияет на читателей, с помощью чего можно улучшить интерфейс сайта общественного проекта и страницы сбора пожертвований. Изображение сделано в canva.com
Андрей Мисюрев рассказал, как юзабилити сайта влияет на читателей, с помощью чего можно улучшить интерфейс сайта общественного проекта и страницы сбора пожертвований. Изображение сделано в canva.com

Что­бы раз­ра­бо­тать удоб­ный для поль­зо­ва­те­лей сайт, НКО нуж­но учить­ся у круп­ных ком­па­ний: от бан­ков до поис­ко­ви­ков и музы­каль­ных сер­ви­сов. В этом уве­рен дизай­нер, руко­во­ди­тель про­ек­та «Бре­мен­ские кон­суль­тан­ты» Андрей Мисю­рев. В интер­вью замре­дак­то­ра Теп­ли­цы Ната­лье Бара­но­вой спе­ци­а­лист рас­ска­зал о том, как юза­би­ли­ти сай­та вли­я­ет на чита­те­лей, с помо­щью чего мож­но улуч­шить интер­фейс сай­та обще­ствен­но­го про­ек­та и стра­ни­цы сбо­ра пожерт­во­ва­ний.

‒ Андрей, каким должен быть сайт некоммерческой организации с точки зрения юзабилити?

‒ Без­услов­но, сайт дол­жен быть удоб­ным для кон­крет­но­го чита­те­ля. Его интер­фейс дол­жен отве­чать на базо­вые вопро­сы. Где я нахо­жусь? Без­опас­но ли здесь? Как это все рабо­та­ет? Что я могу полу­чить, и что тре­бу­ет­ся от меня?

Захо­дя на сайт, чита­тель начи­на­ет его рас­по­зна­вать. Смот­рит на лого­тип, кото­рый обыч­но сле­ва свер­ху, меню, начи­на­ет раз­гля­ды­вать стра­ни­цу от круп­ных бло­ков и форм к более мел­ким дета­лям. И если поль­зо­ва­те­лю будет ком­форт­но в этом про­цес­се рас­по­зна­ва­ния инфор­ма­ции, он про­дви­нет­ся по сай­ту даль­ше. А если мозг пере­тру­дит­ся, он, ско­рее все­го, перей­дет туда, где попро­ще.

Сайт дол­жен «обслу­жить» поль­зо­ва­те­ля: сде­лать так, что­бы он потра­тил мини­маль­ное коли­че­ство энер­гии на мыс­ли­тель­ную рабо­ту и полу­чил мак­си­маль­ное коли­че­ство впе­чат­ле­ний в про­цес­се изу­че­ния.

С инфор­ма­ци­он­ной точ­ки зре­ния сайт помо­га­ет чело­ве­ку отве­тить на вопро­сы, за кото­ры­ми он при­шел. Зада­ча эле­мен­тов сай­та помочь разо­брать­ся в инфор­ма­ции, кото­рую на него выва­ли­ва­ет орга­ни­за­ция. Чита­тель не дол­жен дол­го раз­би­рать­ся, все долж­но быть понят­но на инту­и­тив­ном уровне. За это отве­ча­ет UI.

С эмо­ци­о­наль­ной точ­ки зре­ния сайт рабо­та­ет с ожи­да­ни­я­ми чело­ве­ка, кото­рые воз­ни­ка­ют как резуль­тат его преды­ду­ще­го опы­та рабо­ты с сай­та­ми. Если ожи­да­ния не под­твер­жда­ют­ся, воз­ни­ка­ют нега­тив­ные эмо­ции, если сайт удив­ля­ет ‒ поло­жи­тель­ные. За это отве­ча­ет UX.

Про­ек­ти­ров­щик UI/UX выстра­и­ва­ет эффек­тив­ный про­цесс обще­ния меж­ду чело­ве­ком и орга­ни­за­ци­ей через сайт или при­ло­же­ние.

‒ С помощью чего можно проверить, удобен ли сайт для пользования? Какие методы вы бы посоветовали?

‒ Понять общие прин­ци­пы устрой­ства сай­та неслож­но. Доста­точ­но наблю­дать за устрой­ством самых посе­ща­е­мых сай­тов, напри­мер, сай­ты поис­ко­ви­ков, видео или музы­каль­ных сер­ви­сов. Такие сер­ви­сы исполь­зу­ют пове­ден­че­ские при­выч­ки поль­зо­ва­те­лей и фор­ми­ру­ют опыт поль­зо­ва­те­ля. Там рабо­та­ют силь­ные коман­ды про­ек­ти­ров­щи­ков. И обыч­но их интер­фей­сы раз­ра­бо­та­ны кру­то.

Откры­ва­е­те, напри­мер, сайт жур­на­ла The-Village, Esquire, Meduza и срав­ни­ва­е­те по бло­кам, отли­ча­ют­ся ли у них оформ­ле­ние и пода­ча инфор­ма­ции от пода­чи на вашем сай­те. Если ваш сайт силь­но «выби­ва­ет­ся» из при­выч­ных ожи­да­ний людей, это повод заду­мать­ся.

Что­бы про­ве­рить сайт на удоб­ство, нуж­но как мини­мум посмот­реть ресурс, ана­ло­гич­ный ваше­му, но луч­ше изу­чать не толь­ко сай­ты НКО. Мож­но смот­реть на круп­ные про­дук­то­вые ресур­сы, сай­ты услуг, бан­ков, меж­ду­на­род­ные.

Еще по теме: Как устро­ен совре­мен­ный дизайн: жела­ние, уча­стие и мне­ние поль­зо­ва­те­лей важ­нее все­го.

Сле­ду­ю­щий шаг – это опре­де­лить при­выч­ки и осо­бен­но­сти, кото­рые харак­тер­ны толь­ко для ауди­то­рии ваше­го сай­та, и раз­ра­бо­тать интер­фейс под эти при­выч­ки. К при­ме­ру, у вас сайт для людей, кото­рым слож­но фоку­си­ро­вать свое вни­ма­ние. Оче­вид­но, что люди не могут дол­го кон­цен­три­ро­вать­ся на тек­сте, зна­чит, пиши­те коро­че, делай­те чаще заго­лов­ки и под­за­го­лов­ки, добав­ляй­те фото­гра­фии и видео. Хоро­ший спо­соб – это спро­сить сотруд­ни­ков, кото­рые при­ни­ма­ют обра­ще­ния, напри­мер, отве­ча­ют в чатах или по горя­чим лини­ям. Они полу­ча­ют мно­го поже­ла­ний и пред­ло­же­ний. Встре­тить­ся вжи­вую с ваши­ми чита­те­ля­ми и дать им кон­крет­ное зада­ние.

Допу­стим, ска­зать, что­бы они нашли на вашем сай­те теле­фон при­ем­ной или пожерт­во­ва­ли 100 руб­лей на про­грам­му пси­хо­ло­ги­че­ской помо­щи. И попро­сить в про­цес­се выпол­не­ния озву­чи­вать все их мыс­ли. Этот спо­соб так­же помо­жет понять функ­ци­о­наль­ность и доступ­ность нави­га­ции на сай­те. А еще мож­но вос­поль­зо­вать­ся ауди­том Теп­ли­цы.

‒ Каким образом можно понять, что нужно обязательно переделать на сайте?

‒ В этом помо­гут Яндекс.Метрика, Гугл ана­ли­ти­ка и кар­та кли­ков (Яндекс.Вебвизор). С помо­щью этих инстру­мен­тов мож­но отсле­дить пове­де­ние поль­зо­ва­те­лей. Напри­мер, если текст не дочи­ты­ва­ют до кон­ца, про­пус­ка­ют абза­цы – при­чин это­му может быть мно­го. Этот факт нуж­но под­твер­ждать с помо­щью гипо­тез. Напри­мер, вы пред­по­ла­га­е­те, что текст не чита­ют, пото­му что у него несек­су­аль­ная пода­ча.

В таком слу­чае поэкс­пе­ри­мен­ти­руй­те. Сде­лай­те два раз­ных фор­ма­та: в одном оставь­те текст и его верст­ку без изме­не­ний, а в дру­гом сокра­ти­те текст, сде­лай­те шрифт круп­нее, добавь­те изоб­ра­же­ний, цитат и видео. Затем опуб­ли­куй­те вто­рой вари­ант и сно­ва посмот­ри­те Мет­ри­ку. Срав­ни­те пока­за­те­ли. Так про­хо­дят про­вер­ки гипо­тез.

Но заме­чу, что не нуж­но ста­рать­ся сде­лать иде­аль­ный сайт. Он дол­жен быть немно­го непра­виль­ным, нату­раль­ным. Если же на нем все иде­аль­но – у ауди­то­рии будут очень завы­шен­ные тре­бо­ва­ния. Пусть на сай­те НКО будут ошиб­ки. Кон­цен­три­ро­вать­ся надо на глав­ных гипо­те­зах и боле­вых точ­ках, а не уде­лять вни­ма­ние всем отсту­пам и пик­се­лям.

‒ Для чего нужно изучать поведение пользователей, как эти знания помогут улучшить сайт?

‒ Успеш­ные дизай­не­ры про­ек­ти­ру­ют стра­ни­цу сай­та или лон­гри­дов на осно­ве прин­ци­пов пси­хо­ло­гии пове­де­ния чело­ве­ка. Это помо­га­ет сде­лать стра­ни­цу удоб­нее для вос­при­я­тия. Здесь важ­но знать, как рабо­тать с цве­том, фор­мой, ком­по­зи­ци­ей, пат­тер­ном, типо­гра­фи­кой. И это уме­ние ведет к управ­ле­нию ауди­то­ри­ей, полу­ча­ет­ся сде­лать так, что­бы она вела себя опре­де­лен­ным обра­зом.

Сценарии чтения пользователей на примере сайта проекта "Команда 29". Изображение: скриншот из презентации Андрея Мисюрева.
Сце­на­рии чте­ния поль­зо­ва­те­лей на при­ме­ре сай­та про­ек­та «Коман­да 29». Изоб­ра­же­ние: скрин­шот из пре­зен­та­ции Андрея Мисю­ре­ва.

Напри­мер, когда поль­зо­ва­тель чита­ет текст, он не видит осталь­ные эле­мен­ты, пото­му что фокус вни­ма­ния толь­ко на тек­сте. Воз­ни­ка­ет бан­нер­ная сле­по­та. Часто на стра­ни­це пожерт­во­ва­ний, поми­мо при­зы­ва помочь, мож­но уви­деть бло­ки с дру­гой инфор­ма­ци­ей «фоном» в пра­вой колон­ке. Но ее чело­век не про­чи­та­ет. Так что не сто­ит в одну стра­ни­цу поме­щать мак­си­мум инфор­ма­ции – инфор­ма­цию чело­век вос­при­ни­ма­ет по эта­пам, поэто­му сто­ит раз­де­лить стра­ни­цы. Такие нюан­сы помо­га­ют избе­гать оши­бок.

‒ Могут ли сотрудники НКО самостоятельно разбираться, как устроена психология целевой аудитории?

‒ Само­сто­я­тель­но изу­чить пове­де­ние поль­зо­ва­те­лей слож­но. Это как научить­ся ездить на вело­си­пе­де по учеб­ни­ку. На это тре­бу­ет­ся вре­мя. Я сове­тую брать биб­лио­те­ки гото­вых успеш­ных интер­фей­сов, напри­мер, UI Movement, читать иссле­до­ва­ния спе­ци­а­ли­ста по юза­би­ли­ти Яко­ба Ниль­се­на или зака­зать сто­рон­нюю экс­пер­ти­зу. Экс­пер­ты смо­гут опре­де­лить гру­бые пове­ден­че­ские ошиб­ки на сай­те, какие нару­ше­ны и как их мож­но поме­нять.

Еще по теме: Где най­ти инте­рес­ные дизайн-реше­ния для раз­ра­бот­ки поль­зо­ва­тель­ско­го интер­фей­са.

‒ Особое внимание на сайте НКО занимает страница сбора пожертвований. Какой она должна быть, чтобы люди захотели и смогли без трудностей поддержать проект?

‒ Я выде­ляю три спо­со­ба, кото­рые помо­гут улуч­шить стра­ни­цу сбо­ра. Во-пер­вых, нуж­но слож­ное делать про­стым. Зада­ча НКО – вызвать как мож­но боль­ше чувств, эмо­ций у людей. Про­сты­ня тек­ста мало кому инте­рес­на на стра­ни­це сай­та. Для мак­си­маль­но­го убеж­де­ния сто­ит исполь­зо­вать визу­аль­ный ряд, луч­ше все­го видео­кон­тент. Видео­ро­ли­ки помо­га­ют доне­сти мно­го невер­баль­ных вещей, кото­рые вли­я­ют на дове­рие. Так что по воз­мож­но­сти нуж­но заме­нить кар­тин­ки видео, а текст кар­тин­ка­ми.

Во-вто­рых, нуж­но исполь­зо­вать при­выч­ные бло­ки пода­чи инфор­ма­ции. Такие бло­ки встре­ча­ют­ся от сай­та к сай­ту, инфор­ма­ция в них в виде фото, видео, тек­ста или цитат объ­еди­не­на одной целью. Ско­рость ком­му­ни­ка­ции вырас­тет, при­выч­ный вид попа­да­ет в ожи­да­ние поль­зо­ва­те­ля и повы­ша­ет дове­рие к инфор­ма­ции.

Напри­мер, блок «отзы­вы и цита­ты» при­зван рабо­тать с воз­ра­же­ни­я­ми, кото­рые могут появить­ся у поль­зо­ва­те­ля. Важ­но, что­бы отзы­вы были не ано­ним­ные, а лица не закры­ты. Цита­ты, к при­ме­ру, рабо­та­ют как соци­аль­ное дока­за­тель­ство. А раз­дел «отче­ты» дает чита­те­лям чув­ство без­опас­но­сти и осве­дом­лен­но­сти, куда пой­дут день­ги. Нали­чие таких бло­ков ‒ это пра­ви­ло хоро­ше­го тона.

Зача­стую такие бло­ки на сай­тах НКО быва­ют не визу­а­ли­зи­ро­ва­ны, а пред­став­ле­ны в виде про­сты­ни тек­ста. Луч­ше упро­стить чело­ве­ку путь поис­ка и чте­ния инфор­ма­ции. Недо­ста­точ­но напи­сать в исто­рии про­ек­та: «к нам обра­ти­лось мно­го людей» ‒ пока­жи­те фото­гра­фии этих людей или ста­ти­сти­ку, выра­жен­ную коли­че­ствен­но.

И, в-тре­тьих, нуж­но изу­чать пове­де­ние поль­зо­ва­те­лей. Смот­реть ана­ли­ти­ку сай­та, фор­му­ли­ро­вать гипо­те­зы, про­во­дить интер­вью с чита­те­ля­ми, тести­ро­вать ваш интер­фейс кон­крет­ны­ми зада­ни­я­ми. Делать это непре­рыв­но. Пове­де­ние людей меня­ет­ся с тече­ни­ем вре­ме­ни. Уста­ре­ва­ет не сайт, а его спо­соб рабо­тать с пода­чей инфор­ма­ции и ожи­да­ни­я­ми поль­зо­ва­те­лей.

Посмот­реть пре­зен­та­цию Андрея Мисю­ре­ва о том, какой долж­на быть стра­ни­ца сбо­ра средств, мож­но по ссыл­ке.