Видеозапись и материалы вебинара «Юзабилити‑практики»

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

Есть несколько правил проектирования сайтов, которые полезно знать и соблюдать.

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

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

Другой способ поддержать фокус — это целевые страницы. Этот способ хорош, если у вас есть несколько направлений бизнеса или несколько разных групп клиентов. Например, у БК есть отчетность, бизнес и версия для бухгалтеров. Мы сделали целевую страницу для тех, кто ищет в поисковике «отчетность». На этой странице кроме отчетности ничего не упоминается, нет навигации, есть только большая кнопка «сдай отчетность». Фокус 100%.

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

Основной способ — это социальное подтверждение, т.е. отзывы клиентов и демонстрация того, что многие люди пользуются вашими услугами. BASECAMP использует социальное подтверждение на главной странице. Тут большая фотография пользователя с отзывом, точное число фирм, зарегистрировавшихся на прошлой неделе. Очень здорово, что это число не круглое, такие числа кажутся более верными. Ну и еще одна цифра, 97% клиентов рекомендуют.

На доверие еще влияет эстетика и хороший дизайн, но про это я сегодня говорить не буду.

Следующий показатель хорошего сайта — качественные тексты. Тексты должны быть полезны читателям. Саморекламу лучше заменить примерами, объяснениями, советами. Вместо того, чтобы написать «Мы ремонтируем велосипеды лучше всех» напишите, сколько времени у вас занимает ремонт велосипеда, покажите фотографию вашей мастерской. Дайте полезный совет, например, напишите, почему нельзя мыть велосипеды в автомойке.

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

4-й принцип — удобные формы. В виде форм обычно делают отправку заявки, регистрацию, покупку. Фактически это самые важные действия на вашем сайте.

Формы должны быть короткими. Чем больше полей в форме, тем меньше пользователей дойдет до конца.

Даже если форма состоит из двух полей, ее можно улучшить. Подумайте, что вам нужно больше — дополнительное поле или +20% к переходам.

Всегда хорошо объяснять, зачем вам понадобилась та или иная информация. Вот Мегаплан рассказывает, как он будет использовать ваш телефон.

Хорошим тоном считается сразу показывать ошибки заполнения, а не после нажатия на кнопку отправки.

Но это все теория. Давайте поговорим о практических способах проверки юзабилити сайта, учитывающих вашу специфику.

Основной метод — это юзабилити-тестирование. ЮТ — эксперимент, в котором пользователь пытается работать с вашим сайтом, а вы за этим наблюдаете.

Проводить ЮТ несложно, это можно сделать самостоятельно.

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

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

Сколько человек приглашать? Если у вас на сайте есть очевидные проблемы, это будет понятно уже после двух-трех тестирований. В этом случае лучше сначала исправить самые крупные недостатки, и только потом продолжить исследование, т.к. на фоне крупных проблем мелкие будут незаметны. Вообще для понимания того, что нужно исправить, обычно хватает 5-ти человек.

Вот известная картинка на эту тему. Здесь по вертикали, по горизонтали. Видно, что после тестирования с 1 участником вы откроете, с 5 — 80%.

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

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

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

Обязательно попросите человека говорить вслух все мысли, которые приходят в голову во время выполнения задания, и не стесняться комментировать и критиковать все что угодно.

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

4. На что обращать внимание во время ЮТ?

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

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

Прелесть ЮТ в том, что результаты часто бывают неожиданными. Вот например мы тестировали отправку отчета в профи-версии БК. Задание заключалось в том: но его не так-то просто было выполнить.

5. Помимо классического ЮТ, очень весело проводить ЮТ сайтов ваших конкурентов, не говоря им об этом. Чтобы сравнить результаты с вашим сайтом, используйте аналогичные задания. Если вы хотите сделать все по науке, лучше подобрать количественные метрики для сравнения: сколько заданий было выполнено успешно, сколько времени было потрачено на выполнение каждого задания, сколько попыток предпринято.

6. Еще есть простая и познавательная методика — пятисекундный тест. Человеку, не знакомому с сайтом и с вашим бизнесом, на 5 секунд покажите главную страницу вашего сайта, потом закройте ее и спросите, что это за сайт, чем занимается, и какую информацию со страницы человек запомнил. Результат вам о многом скажет.

После ЮТ вы сможете выделить и устранить основные проблемы, и в целом, можно ожидать, что ваш сайт будет выполнять работать хорошо. Теперь можно попробовать сделать его еще лучше. В попытке улучшить что-то работающее, главное — не навредить. Поэтому все свои гениальные идеи лучше проверять. Расскажу, как это сделать с помощью статистики использования сайта, например, Google Analytics и Яндекс Метрики.

Допустим, вы думаете, что размещение щеночка рядом с кнопкой основного действия увеличит количество кликов на кнопку. Но есть и опасения — вдруг ваши пользователи не любят собак. Чтобы проверить это, можно провести т.н. А/В тест. Смысл А/В теста в том, чтобы одной части посетителей показать один вариант страницы, вариант без изменений, а другой части — вариант со щеночком. И спустя какое-то время сравнить количество кликов на кнопку в этих двух вариантах.

АБ тесты можно проводить с помощью Гугл аналитики, это находится в левом меню в разделе эксперименты.

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

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

Теперь определите, в чем вы будете измерять успех.

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

Надеюсь, у вас появились идеи о том, как сделать ваш сайт удобнее.