Юзабилити сайта НКО: как интуитивно понятный интерфейс помогает увеличить пожертвования и не потерять читателей

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

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

‒ Андрей, каким должен быть сайт некоммерческой организации с точки зрения юзабилити?

‒ Безусловно, сайт должен быть удобным для конкретного читателя. Его интерфейс должен отвечать на базовые вопросы. Где я нахожусь? Безопасно ли здесь? Как это все работает? Что я могу получить, и что требуется от меня?

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

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

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

С эмоциональной точки зрения сайт работает с ожиданиями человека, которые возникают как результат его предыдущего опыта работы с сайтами. Если ожидания не подтверждаются, возникают негативные эмоции, если сайт удивляет ‒ положительные. За это отвечает UX.

Проектировщик UI/UX выстраивает эффективный процесс общения между человеком и организацией через сайт или приложение.

‒ С помощью чего можно проверить, удобен ли сайт для пользования? Какие методы вы бы посоветовали?

‒ Понять общие принципы устройства сайта несложно. Достаточно наблюдать за устройством самых посещаемых сайтов, например, сайты поисковиков, видео или музыкальных сервисов. Такие сервисы используют поведенческие привычки пользователей и формируют опыт пользователя. Там работают сильные команды проектировщиков. И обычно их интерфейсы разработаны круто.

Открываете, например, сайт журнала The-Village, Esquire, Meduza и сравниваете по блокам, отличаются ли у них оформление и подача информации от подачи на вашем сайте. Если ваш сайт сильно «выбивается» из привычных ожиданий людей, это повод задуматься.

Чтобы проверить сайт на удобство, нужно как минимум посмотреть ресурс, аналогичный вашему, но лучше изучать не только сайты НКО. Можно смотреть на крупные продуктовые ресурсы, сайты услуг, банков, международные.

Еще по теме: Как устроен современный дизайн: желание, участие и мнение пользователей важнее всего.

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

Допустим, сказать, чтобы они нашли на вашем сайте телефон приемной или пожертвовали 100 рублей на программу психологической помощи. И попросить в процессе выполнения озвучивать все их мысли. Этот способ также поможет понять функциональность и доступность навигации на сайте. А еще можно воспользоваться аудитом Теплицы.

‒ Каким образом можно понять, что нужно обязательно переделать на сайте?

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

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

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

‒ Для чего нужно изучать поведение пользователей, как эти знания помогут улучшить сайт?

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

Сценарии чтения пользователей на примере сайта проекта "Команда 29". Изображение: скриншот из презентации Андрея Мисюрева.
Сценарии чтения пользователей на примере сайта проекта «Команда 29». Изображение: скриншот из презентации Андрея Мисюрева.

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

‒ Могут ли сотрудники НКО самостоятельно разбираться, как устроена психология целевой аудитории?

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

Еще по теме: Где найти интересные дизайн-решения для разработки пользовательского интерфейса.

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

‒ Я выделяю три способа, которые помогут улучшить страницу сбора. Во-первых, нужно сложное делать простым. Задача НКО – вызвать как можно больше чувств, эмоций у людей. Простыня текста мало кому интересна на странице сайта. Для максимального убеждения стоит использовать визуальный ряд, лучше всего видеоконтент. Видеоролики помогают донести много невербальных вещей, которые влияют на доверие. Так что по возможности нужно заменить картинки видео, а текст картинками.

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

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

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

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

Посмотреть презентацию Андрея Мисюрева о том, какой должна быть страница сбора средств, можно по ссылке.