Проектирование и дизайн сайта НКО: краткое руководство к действию

В Петербурге прошла встреча активистов и сотрудников НКО с веб-дизайнерами. Говорили о правилах проектирования сайтов и типичных ошибках, возникающих при этом. Фото: Кирилл Куликов.
В Петербурге прошла встреча активистов и сотрудников НКО с веб-дизайнерами. Говорили о правилах проектирования сайтов и типичных ошибках, возникающих при этом. Фото: Кирилл Куликов.

24 апре­ля 2016 года в Петер­бур­ге про­шел митап Теп­ли­цы соци­аль­ных тех­но­ло­гий. Участ­ни­ки встре­чи узна­ли про основ­ные ошиб­ки при про­ек­ти­ро­ва­нии сай­та для НКО и разо­бра­ли на прак­ти­ке при­ме­ры эффек­тив­ных и неудач­ных дизай­нер­ских реше­ний.

Редактор компании Тинькофф.Банк и РБК Саша Волкова рассказала о пяти принципах управления вниманием пользователя:

  1. опре­де­лить жела­е­мый сце­на­рий пове­де­ния поль­зо­ва­те­ля;
  2. чет­ко сфор­му­ли­ро­вать одну при­о­ри­тет­ную зада­чу для сай­та (сбор пожерт­во­ва­ний, при­вле­че­ние волон­те­ров, инфор­ми­ро­ва­ние о про­бле­ме или явле­нии);
  3. най­ти инфор­ма­ци­он­ный «мусор», отвле­ка­ю­щий вни­ма­ние поль­зо­ва­те­ля: лиш­ние сло­ва и тек­сты, «кри­ча­щий» цвет вто­ро­сте­пен­ных по зна­чи­мо­сти кно­пок;
  4. изба­вить­ся от него;
  5. на каж­дой ста­дии созда­ния сай­та про­ве­рять, выпол­ня­ет­ся ли при­о­ри­тет­ная зада­ча (как мини­мум 70% про­стран­ства сай­та рабо­та­ет имен­но на нее).

Сре­ди 22 участ­ни­ков встре­чи при­сут­ство­ва­ли пред­ста­ви­те­ли бла­го­тво­ри­тель­ных орга­ни­за­ций «Пер­спек­ти­вы», «Ноч­леж­ка», «Антон тут рядом», «Помо­гать лег­ко». На при­ме­рах сай­тов этих фон­дов Саша рас­ска­за­ла о поня­тии «бан­нер­ной сле­по­ты», неудоб­ных алго­рит­мах пла­те­жа и осо­бен­но­стях кно­пок Call-To-Action (кноп­ка с при­зы­вом к дей­ствию: «Пожерт­во­вать», «Под­пи­сать­ся», «Всту­пить», «Позво­нить»).

Что такое «баннерная слепота»?

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

Саша Волкова. Фото: Кирилл Куликов.
Редак­тор ком­па­нии Тинькофф.Банк и РБК Саша Вол­ко­ва. Фото: Кирилл Кули­ков.

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

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

Саша Вол­ко­ва, редак­тор ком­па­нии Тинькофф.Банк

Филипп Нуруллин. Фото: Кирилл Куликов.
Типо­граф Филипп Нурул­лин. Фото: Кирилл Кули­ков.

Типограф Филипп Нуруллин посвятил лекцию типографике и работе со шрифтами.

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

Филипп Нурул­лин, типо­граф

Где искать инфор­ма­цию и полез­ные сай­ты по типо­гра­фи­ке и напи­са­нию ста­тей на сайт

На четы­рех при­ме­рах Филипп вме­сте с участ­ни­ка­ми разо­брал «харак­тер» шриф­тов, их вза­и­мо­дей­ствие меж­ду собой на стра­ни­це сай­та, пока­зал неудоб­ные для отоб­ра­же­ния в веб-вер­сии эле­мен­ты кирил­ли­цы.

В заклю­че­ние Филипп сфор­му­ли­ро­вал алго­ритм рабо­ты с типо­гра­фи­кой на сай­те:

  • выбор «рабо­чей лошад­ки» – глав­но­го шриф­та (эмо­ци­о­наль­ное соот­вет­ствие «пер­со­на­жу», тест на адек­ват­ное отоб­ра­же­ние на раз­лич­ных устрой­ствах);
  • под­бор пары к основ­но­му шриф­ту;
  • настрой­ки их сов­мест­ной рабо­ты (дли­на стро­ки, кон­траст, интер­ли­ньяж).

Подроб­нее о выбо­ре шриф­тов для сай­та смот­ри­те в пре­зен­та­ции Филип­па.

Пре­зен­та­ция Саши Вол­ко­вой