Современные условия рынка требуют всё большей заинтересованности и вовлечённости конечных потребителей. Поэтому к проектированию и разработке мобильных и веб-приложений предъявляются новые требования. Сегодня успешные приложения в комплексе должны быть эстетически красивыми, удобными для пользователей и, конечно, эффективно решать задачи бизнеса. Таким образом, качественный пользовательский интерфейс (UI) является одной из главных причин успеха. В таком контексте тестирование пользовательских интерфейсов (UI-тестирование) приобретает новый смысл. В ходе вебинара мы: разберём термины и основные понятия UI-тестирования; определим задачи данного вида тестирования; перечислим участников и коснёмся вопроса участия тестировщиков в работе дизайн-команды, в том числе на стадии проектирования прототипов; рассмотрим порядок проведения UI-тестирования, а так же особенности работы с макетами, составления тестовых сценариев и определения приоритетов для обнаруженных дефектов. Кроме того, обсудим некоторые практические приёмы и «популярные» UI-дефекты для веб-платформ и мобильных приложений.

1. Основы
тестирования
пользовательских
интерфейсов
Варфоломеева Александра

2. Обо мнеОбщий опыт в тестировании –
около 8 лет
● Инженерные системы
● Системы проектирования для
авиационной отрасли
● Банки
● Государственные органы
● Консалтинг
● Стартапы

3. План вебинара:
● Термины и основные понятия
тестирования графических
интерфейсов
● Общий процесс и участники
● Тестирование требований к
пользовательским интерфейсам
● Тестовые сценарии
● Ошибки
● Особенности UI-тестирования

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

5. Графические пользовательские
интерфейсы (GUI)

6. UX-дизайн (User Experience
Design, опыт
взаимодействия)
Комплексный подход к
проектированию взаимодействия
пользователя с интерфейсом.
UI-дизайн
Более узкое понятие, включающее в
себя дизайн конечных элементов
интерфейсов.

7. Задачи UI-тестирования
UI определяет качество продукта
● Ошибки в интерфейсе (несоответствие
проектной документации, прототипам,
макетам, требованиям к интерфейсам)
● Потеря или искажение данных,
передаваемых через элементы
интерфейса
● Необработанные исключения при
взаимодействии с интерфейсом
● Ошибки в функциональности
посредством интерфейса

8. Участники процесса
Менеджер
Координация работ и
контроль за
изменений
Организация
командного ревью
UX/UI Дизайнер Разработчик
● Проектирование
архитектуры
взаимодействия, “изучение
пользователей”, Usability...
● Создание концепции,
макетов, прототипов
● Участие в
проектировании
архитектуры
● Ревью макетов и
прототипов
● Разработка
Тестировщик/
аналитик
Тестирование
требований к
интерфейсам
UI-тестирование
Контроль за

9. Общий порядок
проведения работ
Дизайн
Разработка макетов
I. Дизайн и внутреннее дизайн-
ревью командой UX/UI
II. Тестирование требований,
прототипов и макетов &
Командное ревью
III.Подготовка тестовых
сценариев
IV.Тестирование и исправление
ошибок
V. Ретроспектива

10. Для создания макетов и дизайна:
● Sketch
● Adobe Illustrator
● Adobe Photoshop
Прототипирование:
● Invision
● Marvel
● Origami
Хранение макетов:
● Dropbox
● Zeplin
Инструменты дизайнера

11. Тестирование требований
к интерфейсам
Сценарии использования и общая
логика
Непротиворечивость и общность
используемых элементов
Навигация
Usability testing
Опыт использования

12. Работа с макетами
● Собрать и письменно
зафиксировать замечания к
макетам
● Проверить исправления
(повторное тестирование
требований к интерфейсам)
● Предложить улучшения на
стадии проектирования
(UX и Usability)

13. Тестовые сценарии?

14. Ошибки дизайна?
● Ошибка дизайна
● Ошибка реализации
● Ошибка или улучшение?
● Приоритет?
! Коммуникации
! Фиксация изменений
! Связь корневой задачи и багов
! Контроль

15. Особенности UI-
тестирования

16. Базовые концепции хорошего дизайна
Guidelines
Набор рекомендаций от создателей
платформы, соблюдение которых при
разработке приложений сторонними
разработчиками, позволяет добиться
единообразия.
iOS Human Interface Guidelines
Android Guidelines. Material Design
UI kit
Набор элементов пользовательского
интерфейса. Набор элементов в одном
стиле, стандарт.

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

18. Контроль соблюдением принципа единства элементов
! Контроль за изменениями:
● Изменение цветовой схемы
элементов
● Изменение состояний
элементов
● Изменение вордингов
! Регрессионное тестирование

19. Разметка страниц
Хороший дизайн
соответствует
● эстетическим принципам
● пропорциям
! Точность и аккуратность
при работе с сеткой в макетах
? Как должна вести себя страница при
изменении размеров браузеров?
? Как будет вести себя приложение на
девайсах разных размеров?

20. Шаблоны восприятия
● Выделение цветом основной
кнопки
● Использование теней
● Раскраска кнопок
● ссылка
● Свайпы
● Кнопка Назад

21. Шаблоны восприятия “внутри” приложения
! Гамбургер-меню: порядок элементов в меню и хэдере
! Используемые иконки

22. Анимация и hover-эффекты
Основной принцип:
осмысленная анимация
! Избыточность и наложение
анимации
! Скорость восприятия
! Анимации на разных версиях ОС
мобильных устройств

23. Скроллы и скролл-эффекты
Основной принцип:
Скорость и тип скролла должны
быть одинаковыми
! Лэндинги
! Разные варианты скролл-эфектов:
https://codyhouse.co/demo/page-scroll-
effects/scaledown-hijacking.html

24. Типографика в интерфейсах
Ввод данных:
● длина и тип
вводимых символов
● реальные данные
● смайлики
● регистр
● разные клавиатуры
(языки)
● Шрифты
● Форматирование
текстов
Статические вординги:
● Использован нужный для
бизнеса текст, а не “рыба”
● Ошибки правописания
● Локализации и сокращения
● Работа с клавиатурой
● Ввод - Готово - Ок - Далее

25. Адаптивный дизайн. Устройства и браузеры
● Формат устройства
● Размер экрана
● Операционная система
● Разные браузеры
● Разные версии одного браузера
(особенно старые версии)
! Разрешения мониторов дизайнеров
? Как должна вести себя страница при изменении размеров
браузеров

26. Особые истории
● Ограничения
серверной части
(обработка
таймаутов)
● Push-уведомления
● Ограничения
скорости или
отсутствие интернета

27. Навигация
● Дизайн не должен заставлять
думать
● Правило трех кликов
! Внимание на “повисшие” экраны
! Внимание на экраны, не
участвующие в изменениях

28. Контакты
Skype: redaap88
Почта:
avarfolomeeva.sqa@gmail.com
Соц. сети:
https://www.facebook.com/alexandra.
varfolomeeva.50

29. Вопросы