Юзабилити-лаборатория: как получить самую быструю обратную связь по сайту
Не хуже кого мы уже объясняли ранее при запуске сбора заявок интересах этой лаборатории, «коридорное тестирование» – сие, когда мы показываем страницу/экран/макет первым попавшимся людям и милости просим их ответить на пару вопросов относительно того, (как) будто они понимают тот или иной элемент интерфейса, иконку, этноним ссылки, видят ли они, как перейти в нелишний нам раздел и тому подобное в зависимости от того, какие домашние гипотезы мы хотим проверить.
Что мы проверяли
В (видах сегодняшнего обзора мы выбрали 2 разноплановых сайта:
1. studyqa.com/newsletter/international-relations – лендинг, какой-никакой должен побудить подписаться на платную рассылку студентов, специализирующихся для международных отношениях.
Запрос заказчика: «Насколько пользователям брось понятно, какие услуги здесь предлагаются, и побуждает ли лендинг регистрироваться»;
2. visairkutsk.ru – опора отдыха на Байкале.
Запрос владельца сайта: «Поверить главную на конверсию».
Ввиду неточности запроса пишущий эти строки также проверяли главную страницу этого сайта бери предмет понимания ее содержимого теми пользователями, которые увидели ее в первый раз.
Как мы проверяли
1) Мы открывали указанные перед этим ссылки в браузере Google Chrome на ноутбуке с размером экрана 1366х768.
2) П звали к экрану своих коллег. Всего было опрошено 10 люда.
3) Сначала мы показывали респондентам 1-й экран страницы в лагерь 5 секунд, затем закрывали страницу и просили рассказать, фигли они запомнили.
4) После этого респонденты уже паче тщательно (но недолго) рассматривали каждую страницу, а автор просили их рассказать, как они понимают, какими судьбами им предлагается на том или ином экране, в томик или ином блоке и т.д.
Что важно понимать
Коридорное опробывание позволяет получить очень быстрый, но недостаточно характерный фидбек. Это связано с тем, что:
- мы опрашивали тех, кто именно попался нам на глаза/согласился уделить нам век, а не реальных пользователей-представителей целевой аудитории;
- сии люди находились не в тех условиях, в которых они привычно смотрят сайты (вообще не за своим компьютером alias рабочим местом);
- у респондентов не было достаточно времени на того, чтобы погрузиться в изучение сайтов.
Однако результаты такого мини-тестирования до сего времени равно помогают обнаружить некоторые проблемы проектирования. Особенно сие бывает полезным при тестировании макетов, когда ценник совершения, а также исправления ошибки еще не такая высокая.
Из этого следует, поехали.
Иллюстрация: Яндекс.Картинки
Главная страница сайта 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. Претворить в жизнь просмотр фотографий в виде слайдера, чтобы изображения годится. Ant. нельзя было перелистывать из стороны в сторону.
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 человек успел влындать, что это «сайт с возможностью подписаться на платную рассылку точно по теме образования за рубежом платное или со стипендией».
Небось, что информация о том, что это за спам и для кого она, преподносится на первом экране лендинга неудовлетворительно эффективно. Пользователи в первые секунды своего пребывания держи странице не могут понять, что им тогда предлагают. В нашем случае мы просили ребят превзойти страницу дальше. В реальной же жизни подобная продажа с (c (аукциона может привести к тому, что посетители страницы откажутся через дальнейшего взаимодействия со ней, не поняв, почему это такое.
Необходимо:
Дать более очевидное вдалбивание того, что именно предлагается на этом сайте: кому и в какую рассылку предлагают подписаться. Например:
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 в месячишко и получать информацию о новых программах, стажировках, школах и т.д. и т.п. за исключением. Ant. с необходимости регулярного мониторинга сотен ресурсов. То трескать (за (в) обе щеки) за небольшую плату менеджеры компании ищут, подбирают, формируют и рассылают пользователям списки самых актуальных предложений изо гарантированно надежных источников. Клиенту остается только останавливать) на чём самое понравившееся.
Именно это уникальное коммерческое рецепт и нужно было донести странице до своих читателей:
- Отчего именно предлагается?
- Для кого этот сервис/обещание?
- Как будет осуществляться поиск?
- Где, из каких ресурсов собирается уведомление?
- Что и в каком виде будет получать пользователь?
- Наравне будет выглядеть рассылка/файл/список ссылок?
- Насколько это стоит?
- В чем выгода для клиента?
- Техника тех, кто подбирает программы.
- Отзывы тех, кому таковой сервис помог и т.п.
Послесловие
Результаты наших коридорных тестирований ясно показали проблемы анализируемых страниц. При этом оказалось, что-то в принципе не так было важно, что автор этих строк опрашивали не представителей ЦА (это, пожалуй, проявилось всего в том, что некоторые из респондентов не понимали значения болтология «международники»).
Коридорное тестирование не рассчитано на проверку полноценных пользовательских сценариев и безграмотный отменяет проведения «нормального» юзабилити-тестирования. Однако числом всему вышеприведенному очевидно, что первичные барьеры близ взаимодействии пользователей со страницей такое мини-зондирование выявить вполне способно.
Рекомендуем не пренебрегать сим способом оценки интерфейса. Он практически не требует подготовки, никак не занимает много времени и для его проведения примерно не требуется владения специфическими знаниями и навыками. У каждого в окружении не кошелек с деньгами несколько человек, которых можно спросить прямо «здесь и сейчас», в крайнем случае, разрешено просто отправить ссылку по скайпу. При этом фидбек ваша сестра получаете мгновенный.
Благодарим владельцев наших сегодняшних сайтов ради смелость! Надеемся, что полученные данные будут вас полезны. По крайней мере, вам теперь действительно есть, над чем подумать 🙂
Иллюстрация: Яндекс.Картинки
Источник:
нет комментариев