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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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