24 апреля 2016 года в Петербурге прошел митап Теплицы социальных технологий. Участники встречи узнали про основные ошибки при проектировании сайта для НКО и разобрали на практике примеры эффективных и неудачных дизайнерских решений.
Редактор компании Тинькофф.Банк и РБК Саша Волкова рассказала о пяти принципах управления вниманием пользователя:
- определить желаемый сценарий поведения пользователя;
- четко сформулировать одну приоритетную задачу для сайта (сбор пожертвований, привлечение волонтеров, информирование о проблеме или явлении);
- найти информационный «мусор», отвлекающий внимание пользователя: лишние слова и тексты, «кричащий» цвет второстепенных по значимости кнопок;
- избавиться от него;
- на каждой стадии создания сайта проверять, выполняется ли приоритетная задача (как минимум 70% пространства сайта работает именно на нее).
Среди 22 участников встречи присутствовали представители благотворительных организаций «Перспективы», «Ночлежка», «Антон тут рядом», «Помогать легко». На примерах сайтов этих фондов Саша рассказала о понятии «баннерной слепоты», неудобных алгоритмах платежа и особенностях кнопок Call-To-Action (кнопка с призывом к действию: «Пожертвовать», «Подписаться», «Вступить», «Позвонить»).
Что такое «баннерная слепота»?
15 лет назад маркетологи придумали добавлять на сайты рекламу. Обычно баннеры занимали место по бокам и наверху страницы, и глаз пользователя довольно быстро привык «не замечать» рекламную информацию. Появилось понятие баннерной слепоты: автоматическое игнорирование информации, размещенной по бокам страницы. Поэтому важные сведения и ссылки необходимо располагать вне зоны «баннерной слепоты».
Если цель сайта НКО – сбор средств, то максимальное внимание следует уделить алгоритму платежа и сделать его удобным, в первую очередь, для пользователя.
Время между желанием пользователя пожертвовать деньги организации и непосредственным платежом должно быть минимальным. Форма платежа на сайте НКО – самое сложное место в этом путешествии: при неудобном алгоритме фонды могут терять до половины потенциальных доноров. Серьезные компании тратят огромные деньги на UX-исследования, в которых отслеживают реакции людей, движения их глаз, движения рук во время заполнения платежных форм. Если у фонда нет такой возможности, попросите хотя бы одного вашего друга при вас выполнить простой сценарий: перевести через сайт сто рублей на счет организации. Скорее всего, вы удивитесь, как долго он будет это делать.
Саша Волкова, редактор компании Тинькофф.Банк
Типограф Филипп Нуруллин посвятил лекцию типографике и работе со шрифтами.
Представьте сайт в виде персонажа, которому предстоит общаться с пользователями. Какой он? Строгий? Деловой? Немного ироничный? Открытый и доброжелательный? Задача заключается в выборе типографики, отражающей этот персонаж. Визуальная составляющая текста несет в себе огромное смысловое значение. Важно, чтобы он отвечал особенностям восприятия зрительной информации.
Филипп Нуруллин, типограф
Где искать информацию и полезные сайты по типографике и написанию статей на сайт
На четырех примерах Филипп вместе с участниками разобрал «характер» шрифтов, их взаимодействие между собой на странице сайта, показал неудобные для отображения в веб-версии элементы кириллицы.
В заключение Филипп сформулировал алгоритм работы с типографикой на сайте:
- выбор «рабочей лошадки» – главного шрифта (эмоциональное соответствие «персонажу», тест на адекватное отображение на различных устройствах);
- подбор пары к основному шрифту;
- настройки их совместной работы (длина строки, контраст, интерлиньяж).
Подробнее о выборе шрифтов для сайта смотрите в презентации Филиппа.
Презентация Саши Волковой