Від теорії до дій: як НУО зробити сайт зручним і функціональним

Про те, як неурядовим організаціям робити сайт зручним і зрозумілим для користувачів, а також мотивувати їх до певних дій, з нами поділився senior UX-дизайнер у компанії Legatics Олексій Веклич.

Навіщо той сайт, коли є Інста?

Попри еру соцмереж, сайт для НУО є все ще ефективним і універсальним інструментом для різних потреб. Часто організації розміщують на ньому детальну інформацію про свою діяльність, фінансові звіти, реальні історії та фідбек, контакти, фотографії тощо — це позитивно впливає на прозорість ініціативи й, відповідно, довіру до неї. Підсвідомо, заходячи на сучасну, наповнену і гарну вебсторінку з власним доменом, ми, звичайні користувачі, думаємо: «Солідно, можна довіряти». Навіть грантодавці охочіше допомагають тим організаціям, які мають сайт — такі ніби надійніші. 

Сайт — це паспорт неурядової організації, ідентифікаційний документ, що допомагає швидко знайти всю необхідну інформацію про неї замість того, щоб стрибати по постах і нишпорити у хайлайтсах. Як в архіві, там можна зберігати великі обсяги даних та структурувати їх так, як зручно для гостя, а не як дозволяють налаштування соцмережі. 

На сайті відкриваються додаткові можливості для організацій — створити свій блог, окремий розділ про допомогу, розмістити активну кнопку «задонатити» прямо на головному екрані, вбудовувати великі відео, інтегрувати платіжні системи тощо. До того ж він буде активно видаватися пошуковими сервісами на кшталт Google без додаткової реклами. Власний сайт гарантує незалежність та свободу у донесенні інформації. Алгоритми ж соцмереж змінюються постійно і часто це означає більше обмежень, ніж можливостей.

«Той же Інстаграм — це ресурс, візуал і текст на якому треба постійно оновлювати. Якщо ти дивишся на дату публікації останнього посту, а він був три місяці тому, це викликає запитання. Сайт в цьому плані водночас гнучкий і сталий. Там можна розмістити інформацію, яка є неформатною для соцмереж. А за останні кілька років ми побачили, що вони по-різному ставляться до контенту щодо охоплень і щодо того, що вважати мовою ворожнечі, наприклад. Коли у вас свій сайт, ніхто крім вас не модерує контент», — зазначає Олексій Веклич.  

Сайт дозволяє збирати статистику і це дещо глибша аналітика, ніж у соцмережах. Найпростіший варіант — використовувати Google Analytics. Або Crazy Egg — цей інструмент дозволяє подивитися, на яких сторінках були люди, куди вони натискали, а також де найчастіше зупинялися, з якої сторінки йшли та куди переходили. Це важливі спостереження для покращення сайту та вивчення цільової аудиторії. 

Як зробити сайт базово зручним?

Для НУО Олексій пропонує декілька варіантів побудови сайту. Перший — невелика, але розгалужена структура сторінок. Тобто сайт, який має розділи — окремі вкладки, на які можна натиснути та перейти: про нас, допомогти, проєкти, звітність, контакти тощо. Або ж один лендінг, на якому блоки з інформацією підв’язані до меню, наприклад, збоку. Таким чином, натискаючи на слово з переліку, сайт автоматично прогортає сторінку до потрібного блоку інформації, тому її не треба вишукувати. Другий варіант простіший для розробника, але менш зручний для користувача. 

Можна скористатися конструктором з категорії «what you see is what you get». Вони дозволяють будувати сайти без коду на основі стандартних блоків і шаблонів. Наприклад, карусель з картинками або вже гарний зверстаний блок «про нас», який залишилося тільки наповнити вашою інформацією. Всі такі сервіси платні, але натомість пропонують багато бонусів, як-то можливість купити власне доменне імʼя та хостинг, не покидаючи конструктор. З таких Readymag, Good Promo, WIX, Webflow. А от всіма колись шанованою Tilda користуватися не радимо — це російський конструктор. 

Обличчя сайту — його головна сторінка. Тому, вочевидь, саме там має бути назва організації — самостійно або обгорнута логотипом. Обрамленням слугують хедер і футер. Хедер — це шапка сайту, саме вона має орієнтувати гостя. Він не має бути перевантаженим, тому ваша задача — обрати, що саме має розміщуватися на цьому невеличкому клаптику вебсторінки. Це можуть бути елементи айдентики організації, логотип, меню з основними категоріями, кнопка для входу або реєстрації, перемикання мов інтерфейсу, кнопка для донатів. Логотип зазвичай розміщується в верхньому лівому кутку, а перемикання мов або кнопка реєстрації — у правому верхньому. Може бути, але не обов'язково, пошук. 

Найголовніша у хедері все ж навігація, адже якщо є різні блоки інформації, відвідувачу треба швидко між ними перемикатися. В мобільній версії вона найчастіше виглядає як іконка з двома-трьома рисками одна під одною. Їх ще називають «бургер» або «кебаб». Якщо дозволяє сервіс, варто зафіксувати хедер на сторінці, щоб під час її гортання той залишався в полі зору. 

Футер розміщується в самому низу сторінки. Там зазвичай є логотип, детальніші контакти, кнопки соцмереж, додатковий блок інформації, наприклад, законодавчої: Terms and Privacy, Cookie Policy тощо. А також так звана «мапа» — структура сайту з усіма можливими підвкладками, які можуть бути сильно заховані в навігації.

Які ще є поради, щоб зробити сайт user friendly?

1. Головна сторінка має чітко та містко презентувати короткі вижимки з кожного важливого розділу. Наприклад, невеличкий абзац про діяльність організації, що ви взяли з насправді об’ємного розділу «Про нас». Кілька речень про велику подію через тиждень, яка розлого розписана у вкладці «Івенти». Пару слів про важливий збір і активну кнопку для донатів з розділу «Допомога»;

2. Так само на головній сторінці на видному місці має майоріти інформація про саму організацію. Коротко і по справі: хто ви, чим займаєтеся, які вже маєте результати та чому це важливо;

3. В окремому розділі або блоці має знаходитися звітність. Для потенційних партнерів, свідомих благодійників і навіть випадкових гостей вашого сайту це буде свідченням, що ви витрачаєте ресурси за призначенням і на вас можна покластися;

4. Варто не забути і про десктопну (що відкривається на комп’ютері) та мобільну версії сайту. Наприклад, якщо на десктопі є QR-код на банку, то на екрані телефона він не матиме сенсу — адже цим самим телефоном цей код треба просканувати;

5. Добре, якщо є розділ/блок зі згадками у ЗМІ. Статті та новини у медіа про організацію можуть закрити одразу кілька питань: розлогіше розповісти про вас читачу без зайвих зусиль, додати ще більше плюсів до довіри, якщо це впізнаване видання, ніби провести замість читача розслідування та фактчекінг про проєкт;

6. Публікувати дані про команду. Не особисті, а ті, які можуть познайомити з людьми, яким довіряють гроші та інші ресурси. Наприклад, фото членів команди та невеличка розповідь про них вже створює емоційний зв’язок з благодійником;

7. Критично дивитися на інформацію, що публікується на сайті, і перевіряти — чи дійсно вона так важлива його гостям, а не тільки вам. До обговорення можна залучити всю команду або навіть провести фокус-групу;

«У своїй практиці я часто стикався з тим, що люди роблять сайт і хочуть помістити туди важливу, на їхню думку, інформацію, а натомість перевантажують його. Дані, якими хочуть поділитися творці, далеко не завжди є цікавою для інших. Це умовні фактоїди, наприклад, “Ми існуємо вже 4838 днів”. Це ні про що не каже користувачу, адже він не знає, це багато чи мало в порівнянні з конкурентами», — пояснює пан Олексій. 

8. Українські шрифти роблять сайти локальних НУО автентичними та відповідними до часу. Багато з них доступні до завантаження для некомерційного використання. Серед них: шрифти Kyiv Region та NAMU від Дмитра Растворцева — завантажити тут і відповідно тут. Дизайнер також створив офіційний шрифт ЗСУ UAF Sans, який доступний за посиланням. Також є Irpin Type від Олексія Поповцева, Kharkiv Tone від Катерини Дрозд, Ermilov від Кирила Ткачова. Натомість не використовуйте російську «Іжицю»;

9. Вкладки мають відкриватися в тому самому вікні, якщо людина «гуляє» тільки по сайту. Тому що вона все ще в одному цифровому просторі. Не варто налаштовувати так, щоб кожен розділ на нашому сайті відкривався в окремій вкладці — буде перемикатися фокус. Це доцільно робити тільки, якщо вимушено треба перевести людину на сторонній сервіс, наприклад, на Patreon;

10. В контактах має бути робоча пошта та мобільний телефон, за яким можна подзвонити. Не міський, тому що вже не всі оператори в пакеті дозволяють на нього дзвонити. А також, для найкращого користувацького досвіду, вбудована кнопка, за якою можна перейти в месенджер і написати: Viber або WhatsApp.

Кольори — окрема тема

Суворих правил щодо кольорової гами на вебсторінках немає, проте в контексті user friendly важливо дотримуватися правильного контрасту елементів. Так не варто розміщувати дуже світлий (ніжно-жовтий) текст на білому тлі — він буде нечитабельним. І навпаки — темно-синій на чорному також змусить напружувати очі. Є різні інструменти, наприклад, Паліттер, які можуть перевірити кольоровий контраст. І варто враховувати суто візуально-естетичну частину, адже зазвичай ми не хочемо читати яскраво-салатовий текст на рожевому тлі — це незручно, а іноді й болісно для нас. 

Кольори на сайті бувають акцентні та технічні. Акцентних, тобто головних, має бути кілька — зазвичай вони переплітаються в логотипі. А от технічних може бути навіть близько десятка. Для прикладу, в одному блоці є заголовок і технічна інформація, наприклад, дата і час публікації. Перший ми виділяємо яскравим акцентним кольором, наприклад, чорним, а другий — сірим, адже ми хочемо менше звернути увагу на цю інформацію. В такому випадку сірий — технічний колір. Також є синій колір, який використовується в логотипі, ним виділяємо елементи на сайті: меню, якусь стрілку або кнопку.

«Я б радив все одно дотримуватися мінімалізму в кольорах і не атакувати користувача палітрою з двадцяти відтінків», — додає Олексій.  

Як налаштувати збір коштів?

Для звичайного користувача можливість задонатити — зазвичай це кнопка «донат» або «підтримати», які мають бути на головній сторінці у швидкому доступі. 

«Я часто заходжу на сторінку “Дронопаду” від фонду Повернись живим і вже пам'ятаю, де розташована кнопка для донатів. І навіть до того, як завантажився безпосередньо сайт, я вже натискаю у правий верхній кут, бо знаю, що кнопка Монобанка там. Тобто в мене виходить доволі простий шлях від “я хочу задонатити” до “я задонатив”», — ділиться Олексій. 

Бажано вбудувати інтегрувати платіжні системи на кшталт Google Pay та Apple Pay, які допомагають людям ухвалити рішення про швидкий донат. Тоді благодійнику не треба буде вручну вводити свої банківські дані, що також виглядає безпечніше та заохочує пройти процес до кінця. 

На сайті має бути інформація для переказу коштів за банківськими реквізитами, що особливо важливо для великих сум. І додатково — для транзакцій у доларах і окремо у євро. Окремо біля даних IBAN можна розмістити кнопку «скопіювати», щоб + змушувати людину курсором його виділяти. Здавалося б, це кілька секунд, але навіть така маленька дрівбниця може затримати людину на сторінці. Буває, що навіть скопіювавши IBAN та вставивши його в у вікно банківського застосунку, не підтягуються інші дані. На цьому етапі користувача можна легко втратити. Натомість можна звернутися один раз в банк і назавжди все налаштувати так, щоб одразу всі реквізити підвантажувалися.  

Інклюзивність для сайтів

Є міжнародний стандарт — Web Content Accessibility Guidelines (WCAG). Він містить багато рівнів і визначає, як зробити цифрові продукти та сайти доступними для всіх користувачів, зокрема, для людей з інвалідністю. Три рівні (A — базовий, AA — стандартний, AAA — найвищий) визначають, наскільки ваш сайт відповідає різним потребам. Тож ваш сайт можна нескінченно покращувати та адаптувати. 

Так база — користувач може користуватися сайтом без миші за допомогою клавіатури, зупиняти анімацію або відео, що запускаються автоматично, та прочитати alt-підказки під картинками щодо того, що безпосередньо намальовано. Стандарт — між фоном і текстом має бути контраст мінімум 4:5:1, до відео обов’язкові субтитри, а шрифти мають адаптуватися за розміром без втрати структури. І найвищий рівень — абревіатури або терміни пояснюються при наведенні на них, віртуальний помічник озвучує все, що користувач бачить на сторінці, до субтитрів додається жестова мова, а інформація пояснюється так, щоб і в школі зрозуміли.  

Сайт для НУО — ключовий інструмент для комунікації, іміджу та залучення допомоги. А для того, щоб гості сторінки затримувалися на ній довше та зокрема хотіли задонатити, варто робити його зручним та зрозумілим — з чіткою структурою та навігацією, важливим, але вибірковим наповненням, лаконічним дизайном і логічним розміщенням елементів. Всі ці дрібниці разом формують загальне враження користувачів не тільки про сайт, на який вони потрапили, а й про організацію, якій він належить. 

Також вас може зацікавити стаття про те,  як НУО працювати із штучним інтелектом.

_{*прев'ю зображення згенероване за допомогою ШІ.}