ivan's blog: posts tagged интерфейс

Коридорные тесты

Ivan Zviahin — Mon, 20 Dec 2021 22:07:27 +0000

на русском · in english

Для чего нужны эти ваши тесты

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

Это просто, расскажу тезисно

Гипотезы у нас уже сформулированы, поэтому просто выписываем их. Формулируем задания для пользователей, обязательно письменно.

Готовим кликабельны прототип, если он нужен. Фиксируем «створы ворот», другими словами конверсионные отметки интерфейса. Например: открытие формы, успешное заполнение, отправка и так далее.

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

1 шаг. Определить гипотезы

Гипотезы — это предположения, которые мы собираемся проверить в ходе исследования. Её лучше формулировать по шаблону: «Если мы сделаем (сама идея), то он сможет положительно повлиять на (критерий успеха), так как (почему это идея хорошая)».

2 шаг. Выбрать метод тестирования

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

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

Бок-о-бок. Суть метода заключается в сравнении двух вариантов и выбора одного по принципу лучшей видимости или узнаваемости целевого объекта. Респондентам предлагается сравнить две картинки интерфейса или выбрать в определенный элемент на двух вариантах изображения. Например: «Найдите и выберите способ оплаты A1», «Какой из вариантов баннера более узнаваем для материала “Машины в лизинг на авэ”».

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

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

3 шаг. Выбор респондентов

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

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

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

4 шаг. Формирование задания

Качество результатов и их объективность напрямую зависит от формулировки вопросов и заданий в тестировании. Чек-лист для формулировки задания:

Трактуется однозначно.
Озвучено в полном объёме.
Релевантно опыту респондента.
Возможно выполнить без подсказок.

5 шаг. Подготовка прототипа

Тестовый прототип может быть:

Интерактивный кликабельный прототип.
Тестовая версия или работающий сайт.
Просто картинка.

Чек-лист для проверки прототипа:

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

6 шаг. Процесс тестирования

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

Большую часть времени в ходе тестирования говорит респондент. Модератор говорит только в случае крайней необходимости. Любое вмешательство модератора влияет на ход эксперимента и искажает данные.

Если респондент перестал «мыслить вслух» – напомнить ему об этом: «Итак… Так, вы думаете, что... Что вы видите здесь? Скажите мне, что случилось».

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

В каких случаях помогать:

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

Как это делать:

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

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

7 шаг. Фиксирование результатов и выводы

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

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

На основе этого документа делаем выводы о подтверждении или неподтверждении гипотез, а также формулируем новые, если это нужно.

Таблица для фиксирования результатов

Шаблон таблицы в Google Docs

Модальный интерфейс

Ivan Zviahin — Sun, 31 May 2020 08:45:23 +0000

Мой отец как-то звонит мне со словами: «Вань, у меня айфон опять не работает, приложения не запускаются». Я прихожу к нему и вижу на экране вот это:

Только там все трясётся ещё

Проблема в том, что интерфейс вошёл в модальный режим, а мой отец этого не понимает.

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

Минск: с паркинга упал Mercedes ML Brabus, onliner.by

Интерфейс называется модальным если одно и то же действие может выполнять разные функции в зависимости от режима. Чаще всего модальный интерфейс — это плохо. Он приводит к ошибкам и разочарованиям. Но как не использовать такой интерфейс?

В книге «Пользовательский интерфейс» Ильи Бирмана я подсмотрел и вынес для себя два самых главных правила на мой взгляд: первый — стараться не использовать режимы, второй — использовать «квазирежимы». Теперь чуть подробнее об этом.

Без режимов

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

Или пример с видео и фото на iPhone. Люди частенько путают режим и случайно снимают на видео или наоборот из-за того, что кнопка одна, а режимов много. В книге Ильи есть пример, где сразу выведены две кнопки: для фото и для видео в одном экране. И кажется, что это лучше.

Квазирежимы

Джеф Раскин называет такое состояние интерфейса, в котором пользователь его удерживает физически. Квазирежим невозможно не заметить. Например, встроенный Google maps на сайте блокирует зум по скролу, чтобы небыло случайных зумов. Зум работает в квазирежиме с зажатой клавишей ⌘.

Cайт Crossfit Martell

Программа для видеозвонков Zoom включает ваш микрофон, если вы удерживаете SPACE. Или при вводе текста вы можете вводить заглавные буквы с зажатым SHIFT. А вот CAPS LOCK плохой пример модального интерфейса, он приводит к ошибкам и разочарованиям. Избегайте модальный интерфейс.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Самостоятельная проверка интерфейса

Ivan Zviahin — Sat, 23 May 2020 17:38:25 +0000

на русском · in english

Перед каждым экраном интерфейса я задаю себе вопросы:

А есть ли в этом случае у человека какая-то привычка? Есть ли в мире какие-то привычные паттерны такого интерфейса? Могу ли я сделать максимально приближённый интерфейс к этой привычке?
Не заставляю ли я делать что-то пользователя, что может сделать компьютер? Например, поле сразу в фокусе.
Не потерял ли я данные, которые дал мне пользователь?
Убрал ли я все лишнее с этого экрана? Есть ли возможность соединить какую-то функциональность? Могу ли я добавить какую-то полезность?
Я стараюсь представить, что я не видел ничего до попадания на конкретный экран. А понятно ли мне на этом экране всё, с учётом всего вышесказанного?
Сделал ли я всё, чтобы не использовать модальный интерфейс? Могу ли я показать все функции сразу? Могу ли я использовать квазирежим? Хорошо ли я продумал навигацию стеков?
Легко ли мне попасть в каждый элемент? Показал ли я области клика?
Подумал ли я об обратной связи каждого действия? Она должна быть быстрой, постоянной и ненавязчивой. Местами эмоциональный, где то нужно. Подготовил ли я анимацию важных элементов интерфейса? Нужна ли тактильная обратная связь и звуковая?
А действительно ли мой интерфейс находится в границах ментальной модели пользователя? Могу ли я снизить сопротивление, если выхожу за границы этой модели?
Систематизирован ли мой интерфейс? Могу ли я что-то переиспользовать? Соответствуют ли все элементы дизайн-системе?
Выглядит ли мой интерфейс просто, понятно и красиво? Не потерял ли я простоту, пытаясь объяснить что это за экран?
Не забыл ли я про даркмод?
Не забыл ли я про планшеты? Про маленькие смартфоны?
Не забыл ли я учесть, как будет выглядеть интерфейс с увеличенным шрифтом?
Описал ли я все крайние состояния? Сколько строк текста? Как позиционировать картинки и так далее. Как выглядит экран без данных?
Нет ли лишних лоудеров? В идеале не должно быть лоудеров вообще. Нужны ли скелетоны?
Если есть пуши, то не забыл ли я показать куда они ведут?
Обсудил ли я синтаксис с редактором?
Добавил ли я вишенку на торт? Сделал ли я что-то мелкое, но важное, что удивит пользователя?