{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "ivan's blog: posts tagged интерфейс", "_rss_description": "It is my diary. I’m ivan zviahin, an designer, manager, car enthusiast.", "_rss_language": "en", "_itunes_email": "ivanzviahin@gmail.com", "_itunes_categories_xml": "", "_itunes_image": "https:\/\/www.ivanzviahin.by\/blog\/user\/userpic-square@2x.jpg?1711411913", "_itunes_explicit": "no", "home_page_url": "https:\/\/www.ivanzviahin.by\/blog\/tags\/interfeys\/", "feed_url": "https:\/\/www.ivanzviahin.by\/blog\/tags\/interfeys\/json\/", "icon": "https:\/\/www.ivanzviahin.by\/blog\/user\/userpic@2x.jpg?1711411913", "author": { "name": "Ivan Zviahin", "url": "https:\/\/www.ivanzviahin.by\/blog\/", "avatar": "https:\/\/www.ivanzviahin.by\/blog\/user\/userpic@2x.jpg?1711411913" }, "items": [ { "id": "175", "url": "https:\/\/www.ivanzviahin.by\/blog\/all\/koridornye-testy\/", "title": "Коридорные тесты", "content_html": "

на русском · in english<\/a><\/p>\n

\n\"\"\n<\/div>\n

Для чего нужны эти ваши тесты<\/h2>\n

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

Это просто, расскажу тезисно<\/h2>\n

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

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

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

1 шаг. Определить гипотезы<\/h2>\n

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

2 шаг. Выбрать метод тестирования<\/h2>\n

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

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

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

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

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

3 шаг. Выбор респондентов<\/h2>\n

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

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

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

4 шаг. Формирование задания<\/h2>\n

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

    \n
  1. Трактуется однозначно.<\/li>\n
  2. Озвучено в полном объёме.<\/li>\n
  3. Релевантно опыту респондента.<\/li>\n
  4. Возможно выполнить без подсказок. <\/li>\n<\/ol>\n

    5 шаг. Подготовка прототипа<\/h2>\n

    Тестовый прототип может быть:<\/p>\n

      \n
    1. Интерактивный кликабельный прототип.<\/li>\n
    2. Тестовая версия или работающий сайт.<\/li>\n
    3. Просто картинка.<\/li>\n<\/ol>\n

      Чек-лист для проверки прототипа:<\/p>\n

        \n
      1. Сценарии, заложенные в задании, выполняются.<\/li>\n
      2. Предусмотрены разные варианты выполнения сценария.<\/li>\n
      3. Тексты, цифры и визуальный контент похожи на настоящие.<\/li>\n
      4. Нет ошибок и опечаток в текстах и цифрах.<\/li>\n
      5. Нет подсказок.<\/li>\n
      6. Заложена возможность быстро вернуться к началу сценария.<\/li>\n<\/ol>\n

        6 шаг. Процесс тестирования<\/h2>\n

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

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

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

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

        В каких случаях помогать:<\/p>\n

          \n
        1. Респондент должен чувствовать, что вы подбадриваете его, а не продукт.<\/li>\n
        2. Если респондент испробовал несколько способов действий и просит о помощи.<\/li>\n
        3. Респондент думает, что задание выполнено, но это не так.<\/li>\n<\/ol>\n

          Как это делать:<\/p>\n

            \n
          1. Сфокусировать на задании, напомнить цель задания.<\/li>\n
          2. Сделать общий намек: «Вспомните, как вы начали выполнять задание», «Вы уже видели это».<\/li>\n
          3. Сказать прямо, что делать дальше.<\/li>\n<\/ol>\n

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

            7 шаг. Фиксирование результатов и выводы<\/h2>\n

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

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

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

            Таблица для фиксирования результатов<\/h2>\n
            \n\"\"\n
            Шаблон таблицы в Google Docs<\/a><\/div>\n<\/div>\n", "date_published": "2021-12-20T22:07:27+00:00", "date_modified": "2022-08-19T09:53:47+00:00", "image": "https:\/\/www.ivanzviahin.by\/blog\/pictures\/david-travis-WC6MJ0kRzGw-unsplash-2.jpg", "_date_published_rfc2822": "Mon, 20 Dec 2021 22:07:27 +0000", "_rss_guid_is_permalink": "false", "_rss_guid": "175", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/www.ivanzviahin.by\/blog\/pictures\/david-travis-WC6MJ0kRzGw-unsplash-2.jpg", "https:\/\/www.ivanzviahin.by\/blog\/pictures\/Screenshot-2021-12-21-at-00.57.17-3.jpg" ] } }, { "id": "144", "url": "https:\/\/www.ivanzviahin.by\/blog\/all\/modal-interface\/", "title": "Модальный интерфейс", "content_html": "

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

            \n\"\"\n
            Только там все трясётся ещё<\/div>\n<\/div>\n

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

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

            \n\"\"\n
            Минск: с паркинга упал Mercedes ML Brabus, onliner.by<\/a><\/div>\n<\/div>\n

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

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

            Без режимов<\/h2>\n

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

            \n\"\"\n<\/div>\n

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

            Квазирежимы<\/h2>\n

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

            \n\"\"\n
            Cайт Crossfit Martell<\/a><\/div>\n<\/div>\n

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

            \n

            Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме<\/a> или RSS<\/a>.<\/p>\n", "date_published": "2020-05-31T08:45:23+00:00", "date_modified": "2021-05-22T13:09:15+00:00", "image": "https:\/\/www.ivanzviahin.by\/blog\/pictures\/Screen-Shot-2020-05-30-at-16.06.31.jpg", "_date_published_rfc2822": "Sun, 31 May 2020 08:45:23 +0000", "_rss_guid_is_permalink": "false", "_rss_guid": "144", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/www.ivanzviahin.by\/blog\/pictures\/Screen-Shot-2020-05-30-at-16.06.31.jpg", "https:\/\/www.ivanzviahin.by\/blog\/pictures\/Screen-Shot-2020-05-02-at-18.55.01.png", "https:\/\/www.ivanzviahin.by\/blog\/pictures\/Screen-Shot-2020-05-30-at-16.43.24.jpg", "https:\/\/www.ivanzviahin.by\/blog\/pictures\/Screen-Shot-2020-05-30-at-17.28.23.png" ] } }, { "id": "145", "url": "https:\/\/www.ivanzviahin.by\/blog\/all\/check-list-to-verify-the-interface\/", "title": "Самостоятельная проверка интерфейса", "content_html": "

            на русском · in english<\/a><\/p>\n

            \n\"\"\n<\/div>\n

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

              \n
            1. А есть ли в этом случае у человека какая-то привычка? Есть ли в мире какие-то привычные паттерны такого интерфейса? Могу ли я сделать максимально приближённый интерфейс к этой привычке?<\/li>\n
            2. Не заставляю ли я делать что-то пользователя, что может сделать компьютер? Например, поле сразу в фокусе.<\/li>\n
            3. Не потерял ли я данные, которые дал мне пользователь?<\/li>\n
            4. Убрал ли я все лишнее с этого экрана? Есть ли возможность соединить какую-то функциональность? Могу ли я добавить какую-то полезность?<\/li>\n
            5. Я стараюсь представить, что я не видел ничего до попадания на конкретный экран. А понятно ли мне на этом экране всё, с учётом всего вышесказанного?<\/li>\n
            6. Сделал ли я всё, чтобы не использовать модальный интерфейс? Могу ли я показать все функции сразу? Могу ли я использовать квазирежим? Хорошо ли я продумал навигацию стеков?<\/li>\n
            7. Легко ли мне попасть в каждый элемент? Показал ли я области клика?<\/li>\n
            8. Подумал ли я об обратной связи каждого действия? Она должна быть быстрой, постоянной и ненавязчивой. Местами эмоциональный, где то нужно. Подготовил ли я анимацию важных элементов интерфейса? Нужна ли тактильная обратная связь и звуковая?<\/li>\n
            9. А действительно ли мой интерфейс находится в границах ментальной модели пользователя? Могу ли я снизить сопротивление, если выхожу за границы этой модели?<\/li>\n
            10. Систематизирован ли мой интерфейс? Могу ли я что-то переиспользовать? Соответствуют ли все элементы дизайн-системе?<\/li>\n
            11. Выглядит ли мой интерфейс просто, понятно и красиво?<\/a> Не потерял ли я простоту, пытаясь объяснить что это за экран?<\/li>\n
            12. Не забыл ли я про даркмод?<\/li>\n
            13. Не забыл ли я про планшеты? Про маленькие смартфоны?<\/li>\n
            14. Не забыл ли я учесть, как будет выглядеть интерфейс с увеличенным шрифтом?<\/li>\n
            15. Описал ли я все крайние состояния? Сколько строк текста? Как позиционировать картинки и так далее. Как выглядит экран без данных?<\/li>\n
            16. Нет ли лишних лоудеров? В идеале не должно быть лоудеров вообще. Нужны ли скелетоны?<\/li>\n
            17. Если есть пуши, то не забыл ли я показать куда они ведут?<\/li>\n
            18. Обсудил ли я синтаксис с редактором?<\/li>\n
            19. Добавил ли я вишенку на торт? Сделал ли я что-то мелкое, но важное, что удивит пользователя?<\/li>\n<\/ol>\n", "date_published": "2020-05-23T17:38:25+00:00", "date_modified": "2023-08-23T13:35:34+00:00", "image": "https:\/\/www.ivanzviahin.by\/blog\/pictures\/checklist.png", "_date_published_rfc2822": "Sat, 23 May 2020 17:38:25 +0000", "_rss_guid_is_permalink": "false", "_rss_guid": "145", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/www.ivanzviahin.by\/blog\/pictures\/checklist.png" ] } } ], "_e2_version": 3849, "_e2_ua_string": "E2 (v3849; Aegea)" }