Эффективный сайт некоммерческой организации. Как донести идею

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

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

Фрагмент сайта Ночлежка
Фрагмент сайта Odyssey

Победа любит подготовку

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

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

Итак, какая информация на самом раннем этапе проектирования нам необходима?

1. Миссия проекта или организации

Перед тем, как пытаться в чем-либо убедить других людей, необходимо четко понимать самому, в чем именно. В процессе изложения миссии проекта (mission statement) такое понимание как раз и будет достигнуто.

Несмотря на громкое название, миссия, по сути, представляет собой ответ на несколько «простых» вопросов: Чего мы хотим достичь? Почему это важно? Что мы делаем для этого? Кажущаяся простота не отменяет фундаментального значения этих вопросов для всего проекта и сайта в частности. Сформулированные ответы на них – это тот критерий, по которому в дальнейшем мы будем оценивать всё, в том числе и дизайнерские альтернативы и принимать решения.

2. Представление об аудитории

Если сообщение безадресно, оно никогда не достигнет цели. Поэтому необходимо определить чётко, к кому мы обращаемся в первую очередь. Аудитория любого благотворительного проекта неоднородна по определению. Как минимум, можно выделить (с поправкой на специфику проекта) следующие основные группы:

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

Необходимо составить описание каждой из перечисленных групп применительно к вашему проекту. Кто наиболее типичный представитель каждой группы? Какие у него интересы? Как наш проект с этими интересами резонирует? Какая информация ему может потребоваться?

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

3. Как это делают другие?

Любой благотворительный проект реализуется не вакууме и его сайт – не единственный в сети. С одной стороны, проекту придется конкурировать за внимание посетителя с другими ресурсами, с другой – придерживаться устоявшихся конвенций и стереотипов, чтобы быть интуитивно понятным и удобным.

Не нужно быть экспертом по пользовательским интерфейсам, чтобы посетить сайты других благотворительных организаций и проектов, сохраняя ссылки или скриншоты в списках «нравится» и «не нравится» (для этого можно использовать онлайн приложения, такие как Gimmebar или Evernote). После того как количество ссылок в каждом перевалит за второй десяток само собой обнаружится, что структура собственного сайта вырисовывается уже достаточно ясно: что на нём должно быть и чего не должно.

Источники информации и вдохновения можно искать на разнообразных сайтах-галереях и в иллюстрированных подборках, публикуемых в блогах и социальных сетях, например:

  • Раздел сайтов некоммерческих организаций в галерее Site Inspire
  • подборка сайтов некоммерческих организаций и проектов в блоге DesignM.ag
  • подборка сайтов (и полезных советов в онлайн журнале Smashing Magazine

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

Ключевые принципы изложения

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

1. Соответствие формы подачи идеям проекта

Фрагмент сайта проекта Let’s bike it

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

2. Язык изложения

Фрагмент сайта фонда «Живой»

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

3. Реальные истории

Фрагмент сайта charity: water

Один из лучших способов донести идею до людей – практический пример. Рассказывая реальные истории, представляя достигнутые результаты (даже если они пока незначительны) мы даем возможность людям, помогающим нам, почувствовать себя частью настоящего, реального дела. Каждый день мы делаем этот мир немного лучше – дайте возможность другим узнать об этом.

4. Использование различных типов содержания

Фрагмент сайта Amnesty International

Содержание (content) — это все элементы, присутствующие на сайте: тексты, призывы, изображения, фотографии, видео, документы и т.п. Использование в различных сочетаниях этих элементов раскрывает те или иные стороны «жизни» вашего проекта и позволяет обращаться к людям, по-разному воспринимающим информацию: кто-то предпочитает читать или просматривать тексты, на кого-то большее воздействие оказывают изображения, кто-то воспринимает сообщения исключительно на слух и т.п.

Отдельно хотелось бы остановиться на использовании фотографий. Велик соблазн обратиться к фото-сайтам в поиске «подходящих» изображений. Но не всякую найденную в интернете фотографию можно опубликовать на собственном (пусть и некоммерческом) сайте. Большинство изображений защищено авторским правом и если возможность их использования прямо не указывается (например, посредством публикации под лицензией Сreative Сommons, то такую фотографию «позаимствовать» нельзя.

Кроме того, для репутации проекта будет куда лучше использовать собственные (оригинальные) фотографии, представляющие реальных людей, реальные объекты или события. Приглядитесь внимательно к своему окружению, в нем наверняка отыщется как минимум один фотограф-любитель или даже профессионал, готовый организовать необходимые съемки.

Практический инструментарий

Какими же практическими инструментами изложения своей идеи мы располагаем, где на нашем сайте подходящее для этого место?

1. Специальная страница

Фрагмент сайта Благотворительного собрания Все Вместе

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

2. Главная страница сайта

Фрагмент сайта The Michael J. Fox Foundation

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

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

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

3. Все остальные страницы

Фрагмент сайта Ночлежка

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

  • элементов связанных с брендом проекта (логотип, девиз)
  • виджетов (элементов интерфейса), содержащих информацию о проекте, внедряемых в структуру страницы
  • перекрестных ссылок в текстах
  • прямого упоминания в текстах, адресованных разным группам посетителей

Заключительный, но значительный фактор

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

В силу своей иррациональной природы доверие возникает (или не возникает) по причинам, не поддающимся формализации, и главная среди них – искренность. Нет измерителя искренности сайта, который бы показывался в отчетах Google Analytics, но тем не менее есть несколько косвенных критериев, на которые так или иначе (часто интуитивно) опирается посетитель, оценивая тот или иной проект, как вызывающий или не вызывающий доверие:

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

Собранные вместе, эти небольшие причины действительно имеют значение, поэтому последним (по упоминанию, но не по значимости) усилием в поддержку нашей идеи на сайте должно стать внимание к мелочам, и конечно, вдохновение, для которого мы приведем еще несколько завершающих примеров:

Фрагмент сайта фонда Межрегионального благотворительного фонда «София»
Фрагмент сайта Women’s Sport Foundation
Фрагмент сайта Livestrong