В предыдущей главе мы говорили о том, как сайт выглядит и почему его оформление помогает узнать проект. Теперь посмотрим на сайт глазами человека, который открыл его с конкретной целью. Он хочет выбрать событие, найти удобное место, предложить сотрудничество или просто понять, чем может быть полезен. Получится ли у него сделать следующий шаг без подсказки координатора?
Именно это и есть задача интерфейса. Хороший интерфейс не заставляет посетителя изучать устройство движения и запоминать названия разделов. Он ведет от интереса к действию понятным и коротким путем. На «Щедром Екатеринбурге» такой путь хорошо виден в связке календаря, карточек событий, всплывающих окон, полных страниц мероприятий и карт.
7.1. Главная задача интерфейса
Первое знакомство с городской акцией часто происходит между делами: человек открывает сайт, и у него есть минута, чтобы понять, стоит ли задержаться. Если вместо ясных вариантов участия он видит только общие слова о благотворительности, внимание легко потерять. Поэтому интерфейс должен быстро отвечать на практический вопрос: «Что я могу сделать здесь и сейчас?»
Для «Щедрого Екатеринбурга» один из главных ответов — выбрать событие. На главной странице видны календарь и карточки, а в меню есть отдельные разделы для событий и карты. Человек может начать с даты, с описания акции или с места на карте. Это разные входы в одну программу добрых дел.
Не всякому региональному сайту нужны сразу все способы выбора. В первый год важнее обеспечить хотя бы один ясный маршрут до действия и проверить его на реальных материалах. Если посетителю приходится переходить через несколько страниц, чтобы узнать время, адрес или способ участия, путь стоит сократить.
7.2. Основные вопросы пользователя
Команда хорошо знает своих организаторов и внутренние договоренности. Новый посетитель — нет. Ему нужно быстро выяснить, куда он попал, что происходит в его городе, кто проводит событие и что именно требуется от участника. Если предстоит оставить контакты или перейти на другой сайт, он также должен понимать, кому передает данные и что случится после действия.
Проверьте любую важную страницу этими вопросами. В карточке события должны легко находиться название, дата, время и короткое объяснение. Если человеку нужно больше сведений, он может открыть всплывающее окно, а за полной историей и условиями перейти на отдельную страницу мероприятия. Если акция проходит в нескольких местах, одного общего адреса недостаточно: нужен способ выбрать подходящую точку.
На сайте «Щедрого Екатеринбурга» есть три уровня подачи информации. Карточка дает короткий обзор и помогает заметить интересное событие. Нажатие на кнопку карточки открывает всплывающее окно: в нем можно узнать больше, не уходя из общего списка. А отдельная страница содержит полный рассказ об акции. Человек углубляется в тему постепенно и может остановиться на том уровне, которого ему достаточно. Это полезно, когда мероприятий много: общая программа остается обозримой, а важная информация не теряется.
7.3. Разные аудитории — разные пути
Житель, представитель НКО, компания и журналист могут прийти на один сайт, но ищут разное. Жителю нужна возможность выбрать дело и понять, как присоединиться. Организации — предложить событие или связаться с командой. Компании — понять, какие формы участия возможны и кому направить предложение. Журналисту — найти факты, истории и контакт для комментария.
Это не означает, что на главной странице нужно разместить четыре одинаково длинных инструкции. Достаточно, чтобы каждый человек видел понятную точку входа. На «Щедром Екатеринбурге» посетителю помогают календарь и карта, а для потенциального участника кампании есть форма заявки. Она собирает сведения об организации или компании и передает обращение организатору акции через Битрикс24. Это отдельный путь: форма не является регистрацией жителя на конкретное мероприятие.
Сотрудничество не обязательно должно начинаться только с формы. На сайте указаны контакты координатора — живого человека, которому можно написать и обсудить идею. Новости и «Банк идей» показывают возможные форматы участия. Для небольшой команды такой набор понятных входов полезнее сложного кабинета с множеством ролей.
7.4. Пользовательские сценарии
Чтобы увидеть слабые места сайта, полезно описать путь человека как небольшую историю. Например: он располагает свободным временем в субботу и хочет найти дело поблизости. Открывает календарь, выбирает дату, видит число событий и просматривает карточки. Нажимает кнопку понравившейся карточки, читает подробности во всплывающем окне и, если нужно, открывает полную страницу мероприятия. Узнав условия, адрес и способ участия, он переходит к регистрации у организатора, если запись требуется.
На «Щедром Екатеринбурге» регистрация на события проходит на стороне организаций, которые их проводят. В карточке или описании размещается ссылка на сайт организатора либо на предоставленную им форму. Это позволяет не создавать одну универсальную анкету для разных акций: у лекции, волонтерской смены и благотворительного сбора разные условия. Задача региональной площадки — сделать переход к записи коротким и понятным. Команда не управляет чужим интерфейсом, но старается проверить, что условия регистрации прозрачны и человек не остается в неведении.
Есть и другой сценарий: человек готов участвовать, но сначала хочет понять, куда ехать. Общая карта показывает расположение событий. Выбрав точку, он может открыть сведения о мероприятии. Для акции с множеством адресов может понадобиться отдельная карта конкретных пунктов. Так путь продолжается от интереса к событию до выбора удобного места.
Сценарии стоит описывать и для других аудиторий. Представитель компании может прочитать о вариантах участия, посмотреть идеи, затем написать координатору или заполнить форму. Для каждой истории важен не идеальный набор экранов, а отсутствие тупика: на любом шаге понятно, что делать дальше.
7.5. Карточки: главное с первого взгляда
Карточки помогают показать много событий без длинной стены текста. В календаре «Щедрого Екатеринбурга» они дают короткий обзор. Всплывающее окно раскрывает событие подробнее, не отрывая человека от списка, а полная страница оставляет место для всех сведений об акции. В «Банке идей» карточки помогают просмотреть разные предложения, не открывая каждое по очереди. Единый формат снижает усилие: после нескольких карточек человек уже понимает, где искать название, описание и переход к подробностям.
Иллюстрация для верстки: схема трех уровней информации о событии — карточка, всплывающее окно и полная страница. Показать, какую задачу решает каждый уровень, и использовать один и тот же пример события на всех трех экранах. Указать адрес страницы и дату съемки экранов.
У карточек событий и идей есть еще одно действие — сердечко. Если предложение откликнулось, посетитель может поставить лайк, а подсказка объясняет, что для этого нужно сделать. Это легкий способ проявить интерес, даже когда человек пока не готов записаться на событие или предложить свою инициативу. Видимое число откликов может привлечь внимание к карточке и показать, что тема интересна другим. Но количество лайков не говорит само по себе, сколько людей действительно приняли участие и насколько полезной оказалась идея.
Карточку стоит проверять на самом сложном материале, а не на удобном коротком примере. Поместится ли длинное название? Понятна ли дата, если событие длится несколько дней? Видно ли главное действие? Можно ли различить предложение прийти, пожертвовать и зарегистрироваться? Ответы на эти вопросы важнее декоративных деталей.
Не пытайтесь вместить в карточку все условия акции. Ее задача — помочь выбрать, что открыть дальше. Во всплывающем окне можно дать больше деталей для быстрого решения, а на полной странице — объяснить смысл события, порядок участия, информацию об организаторе и особенности места. Карточке идеи тоже нужен ясный краткий текст, чтобы посетитель понял предложение и мог на него откликнуться.
7.6. Небольшие действия тоже требуют ясного ответа
Путь пользователя состоит не только из крупных переходов. Нажатие на кнопку, отправка формы, выбор даты или открытие точки на карте — маленькие действия, после которых человек ждет понятного результата. Если интерфейс молчит, возникает сомнение: сработало ли нажатие?
Всплывающее окно тоже должно быть простым в обращении: его легко открыть, закрыть и вернуться к тому месту в списке, где человек остановился. Если посетитель уже решил участвовать, окно не должно превращаться в лишнюю преграду на пути к нужной ссылке.
Лайк — тоже такое действие. Сердечко должно ясно показывать, что отклик учтен, а интерактивная подсказка — помогать понять назначение элемента до нажатия. Для команды это измеримый признак интереса к событию или идее, своего рода первый шаг к участию. При оценке результата его стоит считать отдельно от переходов к регистрации, заявок и фактического участия: эти действия означают разную степень вовлеченности.
Незаполненные обязательные поля должны получать сообщение об ошибке рядом с полем. Это помогает исправить заявку, не разыскивая причину в начале страницы. Но не менее важно проверить завершение сценария: после отправки человек должен ясно увидеть, принята ли заявка и когда ждать ответа. Если форма передает обращение в Битрикс24, результат на экране все равно должен быть понятен посетителю, а не только сотруднику, который получает лид.
Иллюстрация для верстки: скриншот формы для организаций с незаполненным обязательным полем и сообщением об ошибке рядом с ним. Дополнительно показать экран успешной отправки. Перед публикацией скрыть все реальные персональные данные; указать адрес страницы и дату съемки экрана.
С записью на события есть особенность. Переход ведет на ресурс организатора, и региональный сайт не может обещать, как именно тот подтверждает регистрацию. Поэтому ссылка должна прямо объяснять действие — например, что человек перейдет к форме организатора, — а перед публикацией команда может пройти этот путь сама. Если условия на внешней странице изменились или ссылка перестала работать, информацию в карточке нужно обновить.
7.7. Обязательные элементы интерфейса
Для старта нужен небольшой, но надежный набор элементов: понятное меню, заметные переходы к главным действиям, доступные контакты, ясные подписи кнопок и ссылки на важные документы. На страницах событий особенно важно выделить дату, место, организатора и способ участия. На страницах с формами — показать обязательные поля, согласие на обработку данных, ошибки и результат отправки.
Отдельно подумайте о ситуациях, когда обычный путь не срабатывает. Что увидит человек, если по выбранной дате нет событий? Можно ли легко вернуться ко всему календарю? Что произойдет, если внешняя ссылка недоступна? Есть ли контакт, по которому можно уточнить информацию? Такие состояния редко попадают на презентационный макет, но именно они определяют удобство в реальной жизни.
По мере роста сайта могут понадобиться поиск, дополнительные фильтры, подсказки внутри формы и другие элементы. Не стоит добавлять их только потому, что они встречаются у больших платформ. Сначала проверьте, помогает ли существующее меню и календарь решать основные задачи вашей аудитории.
7.8. Навигация
Названия разделов должны быть понятны человеку, который не участвовал во внутренних обсуждениях команды. «Календарь» обещает выбор по времени, «Карта» — выбор по месту, «Новости» — актуальные истории. Такие слова помогают посетителю заранее представить, что он найдет после перехода.
Навигацию стоит проверять не только на главной странице. Человек может попасть сразу на страницу события из сообщения друга или публикации СМИ. С этой страницы он должен суметь узнать больше о проекте, вернуться к другим событиям и найти контакт. Если акция имеет много точек, ссылка на ее отдельную карту должна быть рядом с объяснением, зачем эта карта нужна.
Общая карта программы и карта отдельной акции с множеством адресов решают разные задачи. Первая помогает увидеть географию всех событий. Вторая — выбрать пункт участия, когда инициатива уже известна. Такое разделение полезно и другим регионам: не заставляйте человека искать нужный адрес среди всей программы, когда он уже выбрал конкретную акцию.
7.9. Формы
Форма должна соответствовать цели человека. Если он записывается на мероприятие, ему не нужна анкета для партнерства. Если организация предлагает участие в кампании, ей могут понадобиться поля о компании, контактном лице и планируемых событиях. Смешивание этих задач в одной форме затрудняет заполнение и обработку заявок.
На «Щедром Екатеринбурге» форма для организаций собирает обращение и передает его организатору акции в Битрикс24. В ней запрашиваются данные контактного лица и сведения о компании или инициативе. При этом регистрация обычных участников отдельных мероприятий остается у проводящих их организаций. Разделение ответственности здесь важно объяснять прямо, чтобы посетитель понимал, кому он пишет и где оформляет участие.
Перед запуском проверьте форму на телефоне и на пустых или ошибочных данных. Видны ли подписи? Ясно ли, какие поля обязательны и зачем они нужны? Понятно ли согласие на обработку данных? Получает ли человек подтверждение после отправки? Внутреннее получение заявки не заменяет ответ на экране: пользователь не видит, что происходит в рабочей системе команды.
7.10. Поиск, фильтры и карта
Разным людям удобны разные способы выбора. Один знает, когда у него есть время, и начинает с календаря. Другой хочет найти что-то рядом с домом и открывает карту. Третий увидел знакомую тему в карточке и сразу читает подробности. Интерфейс выигрывает, когда эти пути ведут к одним и тем же достоверным сведениям о событии.
На «Щедром Екатеринбурге» календарь показывает даты и количество событий, а выбор даты помогает сузить программу. Карточка дает краткую информацию, всплывающее окно раскрывает детали, полная страница рассказывает об акции целиком. Общая карта показывает места проведения разных мероприятий. Для акции «Переплавка» с множеством пунктов приема крышек создана отдельная карта. Это не два одинаковых раздела: общий обзор помогает выбрать дело, а карта акции — конкретную точку участия.
Иллюстрация для верстки: сравнительный скриншот общей карты программы и отдельной карты многоточечной акции. Подпись должна объяснять различие задач: выбор события и выбор конкретного пункта участия. Указать адреса страниц и дату съемки экранов.
Дополнительные фильтры нужны тогда, когда программа стала достаточно большой и действительно трудно выбрать по одной дате. На «Щедром Екатеринбурге» их техническая основа уже подготовлена; для полноценной работы редакции нужно последовательно назначить событиям метки. Пользователь должен видеть, что выбрал, как вернуться ко всем событиям и что делать при пустом результате. Поиск полезен тем, кто уже знает название организации, события или места, но он не заменит ясную навигацию и хорошо заполненные карточки.
7.11. Доступность
Региональный сайт обращен к очень разным людям. Поэтому важную информацию нельзя прятать в мелком тексте, обозначать только цветом или делать доступной лишь при сложном действии мышью. Дата, адрес, название организации и следующий шаг должны читаться и на небольшом экране, и при увеличенном масштабе.
Проверяйте простые вещи: достаточно ли контрастен текст, можно ли перейти по странице с клавиатуры, видны ли подписи полей, понятны ли сообщения об ошибках, есть ли текстовое объяснение у значков и смысловых изображений. Всплывающее окно должно открываться и закрываться без мыши, а возврат к списку — быть понятным. Карта полезна для выбора места, но адреса и способы участия стоит давать также текстом: не каждому удобно пользоваться интерактивной схемой.
Это ориентиры для проверки, а не утверждение, что существующий сайт уже прошел отдельный аудит доступности. Если у команды нет возможности провести полный аудит перед первым запуском, начните с основных сценариев: прочитать событие, найти адрес, перейти к регистрации и отправить обращение.
7.12. Пользователи старшего возраста
Среди участников и тех, кому помогают региональные инициативы, могут быть люди старшего возраста. Им, как и другим посетителям, полезны ясные слова, заметные кнопки, читаемый текст и возможность связаться с человеком напрямую. Не стоит предполагать, что всем удобен один и тот же способ участия: кому-то проще открыть форму, кому-то — уточнить детали по почте или телефону.
Проверьте, можно ли понять карточку без расшифровки значков и мелких подписей. Видно ли, где проходит событие? Не теряется ли контакт среди логотипов и служебных ссылок? Если акция проходит во многих местах, есть ли помимо карты текстовый адрес нужного пункта? Эти вопросы помогают сделать интерфейс удобнее не для одной возрастной группы, а для всех.
7.13. Мобильный путь пользователя
Часто ссылка на событие приходит в мессенджере. Человек открывает ее с телефона по дороге и хочет за несколько секунд проверить время, адрес и условия. В этот момент ему не нужна уменьшенная версия большого экрана. Ему нужен короткий путь к главным сведениям и действиям.
Перед публикацией пройдите этот маршрут на нескольких устройствах: откройте ссылку на конкретное событие, найдите место, перейдите к карте или регистрации, вернитесь назад. Убедитесь, что текст читается, кнопки удобно нажимать, форма не требует угадывать подписи, а внешняя страница организатора открывается без неожиданного тупика. Для акции с несколькими адресами особенно важно проверить, можно ли с телефона выбрать ближайший пункт и прочитать его название.
Команда «Щедрого Екатеринбурга» проверяет сайт перед запуском на разных устройствах и вариантах отображения. Предусмотреть все невозможно, поэтому после запуска остается важной обратная связь. Если пользователь сообщает, что не нашел адрес или не смог завершить действие, это повод проверить весь соответствующий путь, а не только одну кнопку.
7.14. Тестирование интерфейса
Самая полезная проверка — предложить человеку выполнить обычную задачу, не объясняя заранее, куда нажимать. Попросите найти событие в свободный день, выбрать удобную локацию, понять способ участия или найти координатора. Наблюдайте, где он останавливается и какие вопросы задает. Иногда одно такое наблюдение показывает проблему яснее долгого обсуждения макета.
В «Щедром Екатеринбурге» интерфейс проверяют внутри команды, обмениваются мнениями и тестируют отображение на разных устройствах. После запуска команда готова выслушать пользователя, если что-то не сработало, и исправить найденное место. Это практичный подход для регионального проекта: не ждать идеального знания обо всех возможных ситуациях, а поддерживать сайт в рабочем состоянии и улучшать его по реальным сигналам.
Полезно записывать повторяющиеся вопросы. Если люди спрашивают, где регистрация, возможно, ссылка названа неясно. Если не находят адрес, его стоит поднять выше в карточке или уточнить связь с картой. Если обращение через форму регулярно вызывает сомнение, проверьте сообщение после отправки. Так обратная связь превращается в конкретные задачи по улучшению интерфейса.
Что важно сделать к запуску
В первый год не требуется строить сложную платформу с личными кабинетами и множеством вариантов фильтрации. Достаточно пройти несколько основных путей: от календаря через карточку и, при необходимости, подробности события к участию; от описания события к адресу; от предложения сотрудничества к контакту или форме. Проверьте эти пути с телефона и убедитесь, что на каждом шаге человеку понятно, что произойдет дальше.
Позже, когда появятся новые события и наблюдения за работой сайта, можно доработать поиск, фильтры, сообщения в формах и навигацию по карте. Основанием для таких изменений должны быть реальные задачи посетителей и команды, а не желание добавить еще одну функцию.
После проверки основных пользовательских путей возникает следующий вопрос: какие из них действительно работают? Ответ дают измеримые действия, интерес к событиям и результаты всей региональной кампании — об этом пойдет речь дальше.