Юзабилити-лаборатория: как получить самую быструю обратную связь по сайту

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

Что мы проверяли

Для сегодняшнего обзора мы выбрали 2 разноплановых сайта:

1. studyqa\.com\/newsletter\/international-relations – лендинг, который должен побудить подписаться на платную рассылку студентов, специализирующихся на международных отношениях.

Запрос заказчика: «Насколько пользователям будет понятно, какие услуги здесь предлагаются, и побуждает ли лендинг регистрироваться»;

2. visairkutsk.ru – база отдыха на Байкале.

Запрос владельца сайта: «Проверить главную на конверсию».

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

Как мы проверяли

1) Мы открывали указанные выше ссылки в браузере Google Chrome на ноутбуке с размером экрана 1366х768.

2) Затем звали к экрану своих коллег. Всего было опрошено 10 человек.

3) Сначала мы показывали респондентам 1-й экран страницы в течение 5 секунд, затем закрывали страницу и просили рассказать, что они запомнили.

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

Что важно понимать

Коридорное тестирование позволяет получить очень быстрый, но недостаточно репрезентативный фидбек. Это связано с тем, что:

• мы опрашивали тех, кто попался нам на глаза/согласился уделить нам время, а не реальных пользователей-представителей целевой аудитории;
• эти люди находились не в тех условиях, в которых они обычно смотрят сайты (вообще не за своим компьютером или рабочим местом);
• у респондентов не было достаточно времени для того, чтобы погрузиться в изучение сайтов.

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

Итак, поехали.

Иллюстрация: Яндекс.Картинки

Главная страница сайта visairkutsk.ru – турбаза «Бухта Песчаная»: отдых на побережье Байкала

5-секундное тестирование

Из 10 опрошенных:

• 5 человек увидели, что это база отдыха на берегу Байкала;
• 4 человека запомнили только, что это база отдыха;
• 3 человека увидели возможность забронировать путевку;
• 1 человек не понял, что это за сайт.

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

1-й экран

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

Необходимо:

1. Реализовать текст «Официальный представитель» в том же виде, в котором реализован весь остальной обычный текст на баннере. В данном случае белым цветом.

2. Сделать фон и текст на баннере более контрастными друг другу. Для этого необходимо затемнить фоновую картинку или сделать непрозрачную (менее прозрачную) подложку под текстом. Например:

2-й экран

• 5 пользователей отметили, что им не хватает более подробной информации об условиях проживания (например, какие домики, сколько в них комнат, как они выглядят, фото комнат и т.п.);
• 3 пользователя отметили, что они ожидали увидеть эту информацию по клику на текст под картинками («Питание», «Проживание» и т.д.);
• 4 пользователя сказали, что текст под общим заголовком «выпадает» из зоны их видимости, картинки с подписями сразу «перетягивают» внимание на себя;
• 2 пользователя опять-таки отметили, что им было трудно читать текст (слишком бледный, слишком мелкий);
• 1 пользователь сказал, что описание преимуществ слишком многословное и нужно короче.

Необходимо:

1. Сделать текст с описанием преимуществ крупнее и контрастнее.

2. Отказаться от текста под общим заголовком блока (по крайней мере не размещать здесь какой-либо важной информации) и сразу переходить к описанию преимуществ.

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

3-й экран

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

Необходимо:

1. Сделать заголовок блока крупнее, заметнее.

2. Реализовать просмотр фотографий в виде слайдера, чтобы изображения можно было перелистывать из стороны в сторону.

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

4. Добавить к каждой фотографии краткую подпись о том, что на ней представлено.

5. По наведению курсора на фото можно отображать более подробное описание (на затемненной подложке). Например (не слайдер):

4-й экран

Ни 1 из 10 респондентов не понял, что в этом блоке предлагаются экскурсии;

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

Необходимо:

1. Поместить в блоке более соответствующие его тематике фотографии.

2. Добавить к названиям экскурсий ин формацию об экскурсиях: стоимость, длительность, особые условия и т.п. Например:

5-й экран

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

Необходимо:

1. Представить информацию из блока справа в таком же наглядном виде, как и в блоке слева. Например, не только рассказать о том, как добраться до базы, но и показать на карте.

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

6-й экран

• все участники исследования отметили неровную верстку формы: некоторые ее элементы слишком «прилеплены» друг к другу, что-то отображается неровно, при том что в блоке с формой достаточно много свободного места, чтобы разместить поля формы корректно;
• 5 участников сказали, что им не хватает «маски» (формата) ввода номера телефона в поле «Контактный телефон»;
• 2 участника при этом указали, что приняли это поле за поле для ввода email и даже поля подписки на рассылку;
• 2 участника сообщили, что текст снова слишком бледный;
• 2 участника сказали, что форма не вызывает у них доверия: все сделано небрежно, неровно, при этом в заголовке предлагается заказать консультацию, в тексте под заголовком – оставить заявку, а кнопка отправки формы называется «Задать вопросы».

Необходимо:

1. Привести в соответствие заголовок, описание и кнопку отправки формы.

2. Выровнять верстку формы, отображение ее полей и элементов.

3. Расположить элементы чуть дальше друг от друга, чтобы было больше воздуха.

4. Добавить формат ввода данных в поле «Контактный телефон», чтобы пользователи сразу видели, что в это поле нужно вводить именно телефонный номер и в каком виде.

Пример формы заявки (без маски ввода):

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

Страница studyqa.com/newsletter/international-relations – еженедельная рассылка для международников и политологов

5-секундное тестирование

Из 10 опрошенных:

• 8 человек сказали, что они не поняли, о чем этот сайт;
• 5 человек при этом сказали, что поняли, что это «какая-то рассылка», но не поняли, что именно за рассылка;
• 2 человека отметили, что здесь предлагается подбор обучений;
• 1 человек понял, что это «образование для студентов»;
• и только 1 человек успел понять, что это «сайт с возможностью подписаться на платную рассылку по теме образования за рубежом платное или со стипендией».

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

Необходимо:

Дать более очевидное пояснение того, что именно предлагается на этом сайте: кому и на какую рассылку предлагают подписаться. Например:

1-й экран

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

Все вышесказанное еще больше подтверждает необходимость более наглядного пояснения сути рассылки и ее содержания.

Необходимо:

Более доходчиво рассказать пользователям о предложении компании. Например, так:

Ищете учебные программы за рубежом? Не знаете, как выбрать лучшее? Боитесь нарваться на мошенников?

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

Пример (не рассылка, краткое изложение сути предложения на одном экране):

2-й экран

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

Необходимо:

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

Поэтому стоит поместить более понятное объяснение коммерческого предложения компании (которое сейчас приводится на втором экране) именно на первом экране.

3-й экран

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

Необходимо:

1. Использовать для всей страницы термин «программы» вместо «возможности», чтобы не путать пользователей («Каждую неделю мы будем присылать вам по 10 международных программ обучения»).

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

4-й экран

• Здесь пользователи были единодушны: все 10 человек сказали, что им сложно и не хочется читать этот текст, так как, во-первых, он еле виден, а во-вторых, выравнивание по центру затрудняет прочтение и восприятие информации;
• Кроме того, в конце предложений нет точек, непонятно, где заканчивается одно предложение и начинается другое. Сами фразы построены неестественно;
• 2 пользователя также отметили, что заголовок блока не соответствует той информации, которая приводится в тексте ниже: заголовок, по мнению пользователей, обещает рассказ непосредственно о том, как подбираются программы, в чем их уникальности, какие даются гарантии и т.п. А в тексте ниже перечисляются общие условия участия в программах.

Необходимо:

1. Привести в соответствие заголовок блока и его содержимое. Например, заголовок может быть таким: «Учиться за рубежом – это просто!».

2. Более наглядно преподнести информацию об условиях участия в программах: в виде иллюстраций и подписей к ним. Например:

5-й экран

• Здесь респонденты также были едины в своих желаниях и ожиданиях – все 10 человек сказали, что это блок с отзывом студентки, которая уже подписалась на рассылку или съездила на обучение;
• Также 1 респондент отметил, что блоку не хватает заголовка;
• Еще 1 респондент сказал, что этот «блок с отзывом» выглядит как слайдер и что «хочется его полистать, посмотреть еще отзывы».

Необходимо:

1. Добавить к блоку заголовок, например, «Слово основателю проекта». Примеры блоков с обращениями руководителей:

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

6-й экран

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

Необходимо:

1. В блоке «Оплата» пояснить, какие именно услуги предлагается оплатить.

2. Заметнее выделить блок с контактами.

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

Пример подачи информации о том, что пользователь получит, оформив платную подписку:

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

А данная компания предлагает своим клиентам (ЦА – именно студенты, изучающие международные связи) платить по $4,98 в месяц и получать информацию о новых программах, стажировках, школах и т.д. и т.п. без необходимости регулярного мониторинга сотен ресурсов. То есть за небольшую плату менеджеры компании ищут, подбирают, формируют и рассылают пользователям списки самых актуальных предложений из гарантированно надежных источников. Клиенту остается только выбирать самое понравившееся.

Именно это уникальное коммерческое предложение и нужно было донести странице до своих читателей:

• Что именно предлагается?
• Для кого этот сервис/подписка?
• Как будет осуществляться поиск?
• Где, из каких ресурсов собирается информация?
• Что и в каком виде будет получать пользователь?
• Как будет выглядеть рассылка/файл/список ссылок?
• Сколько это стоит?
• В чем выгода для клиента?
• Квалификация тех, кто подбирает программы.
• Отзывы тех, кому этот сервис помог и т.п.

Послесловие

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

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

Рекомендуем не пренебрегать этим способом оценки интерфейса. Он практически не требует подготовки, не занимает много времени и для его проведения почти не требуется владения специфическими знаниями и навыками. У каждого в окружении найдется несколько человек, которых можно спросить прямо «здесь и сейчас», в крайнем случае, можно просто отправить ссылку по скайпу. При этом фидбек вы получаете мгновенный.

Благодарим владельцев наших сегодняшних сайтов за смелость! Надеемся, что полученные данные будут вам полезны. По крайней мере, вам теперь точно есть, над чем подумать :)

Иллюстрация: Яндекс.Картинки