Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Прототип мобильного приложения. Чего хотят юзаб...

Прототип мобильного приложения. Чего хотят юзабилити-тестировщики?

Андрей Клёц, наш проектировщик, рассказывает, как подготовить прототип мобильного интерфейса к тестированию, на что стоит обратить внимание, каких ошибок избегать и какие инструменты лучше использовать.

More Decks by USABILITYLAB — знаем всё о юзабилити интерфейсов

Other Decks in Design

Transcript

  1. 2 О чем речь? Прототип мобильного приложения для тестирования с

    пользователями • Каким должен быть? • На каком “железе” тестировать? • В каком софте сделать?
  2. 3 Зачем тестировать прототип приложения? + Подтвердить работоспособность концепции +

    Проверить гипотезы + Найти возможные юзабилити- проблемы = Сократить расходы на дизайн и разработку Если эксперимент удался, что- то здесь не так… Из “Законов Мэрфи”
  3. 4 О каких тестах речь? Качественное юзабилити-тестирование, оценка удобства и

    эффективности интерфейса: • малое число респондентов; • каждый респондент выполняет несколько заданий в интерфейсе прототипа; • в результате - описание проблем и рекомендации, основанные на поведении, а не на мнении пользователей.
  4. 5 Пример задания Представьте, что на счете вашего телефона закончились

    деньги, вы хотите пополнить его с помощью мобильного приложения. Номер телефона лежит на столе перед вами. Пополните счет телефона на 100 рублей с вашей карты.
  5. 7 Условия тестирования • изолированное помещение; • квалифицированный модератор; •

    релевантный респондент; • стенд для записи видео, звука; • реальное мобильное устройство; • прототип будущего приложения.
  6. 9 Тестируем на компьютере? • курсор и тач - разные

    взаимодействия • лишние интерфейсы
  7. 11 Тестируем на любой ОС? ≠ Разные жесты для вызова

    функций: • возврат • вызов панели уведомлений • вызов поиска Привычка пользователя к другой ОС может исказить результаты теста.
  8. • Ссылки, кнопки, табы • Вертикальный скролл • Горизонтальный скролл

    • Плавающие и закрепленные элементы • Поп-ап меню • Модальные окна • “Расхлопы” • Свайп 16 С интерактивностью
  9. 18 Контент, релевантный пользователю и задачам • Lorem ipsum dolor

    sit amet... • Мерил Александровна Стрип • и другой рыбный и шуточный контент
  10. Быстро собранный разработчиками макет приложения с тестовым контентом и функционалом:

    • использует конечный дизайн • минимум функций • минимум интерактива • нерелевантный контент • не динамический контент • не адаптирован к устройству • долгий цикл внесения изменений 20 Прототип == Макет приложения (тестовое ПО) Быстрый перевод
  11. Прототип приложения, созданный специально для тестов: • дизайн технический/ конечный

    • представлены основные функции • интерактивный прототип • релевантный контент • динамический контент • адаптирован к устройству • оперативное внесение изменений 21 Прототип в специализированном софте лого
  12. 23 Демонстрируется “живой” прототип • нельзя править прототип во время

    теста • требуется постоянное подключение к одной сети • требуются “яблочные” устройства (Framer Classic, Sketch)
  13. 25 Служебные действия при пользовательских жестах В Figma Mirror тройной

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

    Демонстрация на iPhone Демонстрация на Android Независимый просмотр Axure PR Sketch Invision Adobe XD Figma Framer
  15. 28 Рецепт хорошего прототипа для теста Правильный смартфон Задуманная интерактивность

    Реалистичный контент Подходящий софт Разнообразные сценарии Релевантный прототип + + = Эффективное тестирование Ценные результаты