Юзабилити-лаборатория: экспертная оценка мобильного приложения для iOS. Как это работает? Проверьте, как приложение запрашивает разрешения
Невероятный рост популярности мобильных приложений и сервисов сделало работу UX дизайнера более сложной и интересной. Приложения становятся интереснее, сложнее, и, в связи с этим, сложнее их становится не только разрабатывать, но и тестировать. Тестирование приложения с точки зрения пользователя теперь стало как никогда важным этапом разработки.
К сожалению, в отличие от ситуации с разработкой десктопных приложений, для тестирования и записи тестов юзабилити мобильных приложений нет такого специального программного обеспечения, типа Silverback или Camtasia, которое можно «достать из коробки» и начать тестить.
Даже если вы не разрабатываете мобильное приложение, есть вероятность, что большая часть трафика на ваш сайт приходит как раз по мобильным каналам. Проведение регулярных тестов мобильного юзабилити является практически единственным способом оценить то, насколько хорошо этот канал работает для ваших клиентов, насколько он им полезен и удобен.
Потребуется немного «хакинга». Нет, речь не о взломе, а скорее о нетривиальных методах использования некоторых вещей. Мы считаем, что существует один такой «хак», который смело можно назвать лучшим в своем роде. Если вы хотите протестить юзабилити приложения для iPhone или устройства на Android OS, то решение, о котором мы расскажем, вы найдете весьма высококачественным, продуктивным и доступным.
Немного истории: провода и клейкая лента
В былые дни, мы использовали «сани», чтобы установить смартфон и камеру в положение, которое давало бы нам возможность записывать то, что происходит на экране смартфона в тот момент, когда им пользуется пользователь. Чтобы создать сани, мы купили какую-то штуку (увидите на фотографии ниже) из акрила, которая подошла нам по форме, и согнули ее определенным образом.
Мы закрепили веб-камеру на этих «санях» с помощью клейкой ленты, а на противоположной стороне - телефон с помощью липучек. Оглядываясь назад, можно сказать, что устройство выглядело довольно стремно и сыро. Это было не очень естественно и еще менее удобно для пользователей, которые смартфон привыкли держать двумя руками одновременно.
Технически это не было надежным. Мы использовали две камеры, подключенные к одному ноутбуку (камера на «санях» и встроенная камера ноутбука), у нас должны были работать одновременно два приложения для работы с камерами. Это все вело к понижению производительности всей системы, сложности в работе возникали частенько.
Предостаточно было и прочих вопросов, вроде бликов экрана и фокуса камеры. В целом, на настройку и стабилизацию такой системы в купе со средой тестирования уходило много времени, но это лучшее решение, которое нам было известно на то время. Для пользователей, которые, по сценарию, должны были пользоваться приложением «под запись», такая установка, тем не менее, выглядела очень неестественной.
Пожалуй, более современный и подходящий способ - беспроводная связь
В идеале, оборудование и ПО для тестирования должны быть невидимыми для пользователей. Мы хотим симулировать максимально естественную среду, насколько это возможно для пользователей смартфонов - без проводов, камер, и прочих подручных приспособлений.
Команде разработчиков UX необходимо фокусироваться на изучении и понимании. Мы не хотим потеть над установкой и беспокоиться об отключениях.
Расскажем вам о простом сетапе, который позволяет нам достичь всех этих целей. Он позволит команде UX-дизайнеров сосредоточиться на том, что действительно имеет значение, а пользователям - на своих телефонах. Эта система максимально надежна и ее можно смело использовать в работе, что мы и делаем.
Мы сосредоточимся на тестировании юзабилити на смартфонах, используя MacBook в качестве устройства записи. Тем не менее, с ПК на Windows система работает тоже.
Чтобы узнать насколько удобен сайт или другой программный продукт для пользователей, надо спросить об этом у них самих. Но считается, что тестирование на «на живых людях» отнимает много сил и времени у разработчика и/или владельца ресурса.
На этот случай существуют онлайн инструменты для юзабилити-тестирования. Они помогают выяснить, насколько продукт соответствует ожиданиям пользователей, и в то же время, экономят время и средства на проведение исследований.
В этой статье представлен обзор десяти простых и доступных инструментов для юзабилити-тестирования сайтов. Что приятно, всеми описанными приложениями, за исключением последнего, можно воспользоваться бесплатно: они вообще не требуют оплаты или имеют бесплатные версии с ограниченным функционалом.
Сначала идет описание всех десяти приложений, а затем сравнительная таблица, где отражены их основные характеристики.
UsabilityHub
На сайте доступны три онлайн инструмента, позволяющие тестировать юзабилити сайта или веб-приложения по скриншотам страниц.Optimal Workshop
На сайте OptimalWorkshop можно оптимизировать сайт, используя три разных инструмента:
- Optimalsort - это инструмент, который помогает организовать структуру сайта с помощью метода сортировки карточек .
- Treejack - приложение для тестирования многоуровневой информационной архитектуры (ИА) сайта. Чтобы начать тестирование, структуру веб-сайта необходимо организовать как таблицу и загрузить в Treejack.
- Calkmark предназначен для тестирования юзабилити веб-страниц. Он помогает понять, насколько просто (или сложно) пользователям сайта находить нужную информацию. Чтобы начать работу, загружаем скриншот веб-страницы и ставим перед пользователями какую-либо задачу. Calkmark накапливает ответы и выдает результаты тестирования в виде тепловой карты кликов, а также сообщает среднее время, необходимое для выполнения каждой задачи.
В бесплатной версии можно создавать только небольшие проекты, со следующими ограничениями:
- OptimalSort: десять участников и 30 карточек за один опрос.
- Chalkmark и Treejack: 10 участников и 3 обследуемые задачи за один опрос.
Этот бесплатный онлайн инструмент можно интегрировать на сайт. Он создает небольшой опрос посетителей сайта, состоящий всего из 4 вопросов. Вопросы сформулированы таким образом, чтобы можно было выявить наиболее достоверную обратную связь от пользователей.
Интегрируется с Google Analytics и доступен на 10 языках, хотя русского, к сожалению, среди них пока нет.
Feng-GUI
Feng-GUI имитирует взгляд пользователя в течение первых 5 секунд воздействия визуального эффекта. Это приложение создает карту движения глаз по странице (heatmap) на основе алгоритма, который предсказывает, на что, скорее всего, будет смотреть реальный человек.Прямо на главной странице сайта можно загрузить скриншот и увидеть вероятные области повышенного внимания посетителя.
ClickHeat
Это бесплатное программное обеспечение с открытым кодом интегрируется на сайт и создает визуальную тепловую карту кликов посетителей веб-страницы. А так как код ClickHeat находится непосредственно на сервере, то карта отражает результат работы реальных пользователей сайта.
WebVisor
Российская система, которая после установки javasript-кода на страницы сайта, позволяет отслеживать и анализировать поведение пользователей.С ее помощью можно:
- Записывать действия посетителей сайта: клики, скроллинг, нажатие клавиш, заполнение форм, выделение и копирование текста.
- Воспроизводить записанные действия в режиме «живого видео».
- Проводить детальную аналитику поведения посетителей веб-сайта.
- Составлять карты активности пользователей: тепловые карты кликов, карты внимания и карты скроллинга.
SitePolice
Еще один русскоязычный онлайн инструмент для юзабилити-тестирования сайтов. Он дает возможность владельцам сайта протестировать свой ресурс при помощи аудиторов, а аудиторам заработать своим трудом.Как это работает?
- Заказчик выставляет свой сайт на суд «полицейских», формулирует несколько вопросов, на которые хотел бы получить ответы и выбирает тарифный план аудита.
- Аудиторы пишут отчет по сайту в практически свободной форме. В отчете есть только два обязательных раздела: «анализ юзабилити сайта и способы решения проблем» и «общий вывод». За свои отчеты и активность на сайте «полицейские» получают баллы, которые потом могут превратить в деньги.
- Если заказчик аудита не против, то все отчеты «полицейских» остаются на сайте сервиса для общего просмотра.
Сравнительная таблица инструментов для юзабилити-тестирования
| Название | Русский язык | Кто тестирует | Объекты тестирования | Результаты тестирования | Наличие бесплатной версии |
| UsabilityHub | Есть | Тестеры сервиса; другие пользователи UsabilityHub | Скриншот веб-страницы | Ответы на вопросы, сформулированные в начале теста; тепловая карта кликов | Бесплатно с ограничением — пользователи бесплатной версии должны сами тестировать чужие сайты |
| UserPlus | Есть | Своими силами с помощью опросника; тестеры сервиса (в бета-версии) | Скриншот веб-страницы | Оценка страницы на соответствие международным стандартам | Бесплатно с ограничением — один скриншот в месяц |
Навигация мобильных версий сайтов и приложений должна быть наглядной, понятной и вдобавок занимать минимум места на экране. По сути, она должна дополнять собой инструменты поиска, а иногда — и заменять их, и этому есть несколько причин:
- Пользователи порой не знают, что они хотели бы найти на вашем сайте, поэтому ваша цель — помочь им выяснить это, разграничив область поиска, например, указав категории товаров.
- Сформулировать правильный поисковый запрос — не такая простая задача, как может показаться, а люди по природе своей еще и ленивы. Гораздо эффективнее будет предложить им готовые решения в виде навигационных ссылок.
- Наконец, строка поиска на сайте часто работает не настолько эффективно, как того ожидают пользователи.
На мобильных устройствах правильная навигация еще более актуальна: занимая существенную часть экрана, она привлекает намного больше внимания, чем на десктопе. Из-за недостатка места строка поиска и ссылки меню в верхней части страницы могут помешать быстро получить нужную информацию. Не заставляйте пользователей скроллить, обращайте пристальное внимание на эти элементы — они должны быть заметны с первого взгляда, но при этом не нарушать : приоритет контента перед интерфейсом.
На сегодняшний день это одна из главных проблем мобильных интерфейсов: как сделать навигацию заметной и удобной для использования, и при этом не отвлекать от содержимого. Рассмотрим ключевые принципы построения навигации мобильных сайтов и приложений на конкретных примерах.
Верхняя панель навигации
Верхняя панель навигации досталась мобильным сайтам в наследство от десктопных устройств. Эта полоска в верхней части экрана, на которой размещены основные навигационные ссылки — популярный и достаточно эффективный инструмент, однако имеет два существенных недостатка. Во-первых, он хорош, только когда на сайте относительно мало других элементов навигации, и во-вторых — занимает слишком ценное пространство в верхней части экрана.
Вот, например, как выглядят главные страницы мобильной версии сайта BBC и приложения Google Play Apps:
Обратите внимание, что Google Play смог уместить больше элементов в панели навигации, используя «карусель»
Панель вкладок
Панель вкладок — ближайший родственник верхней навигационной панели, который часто используется в приложениях. Она может размещаться как в верхней части
страницы (в основном, Android), так и в нижней (IOS).
Панели вкладок, как правило, присутствуют в большинстве мобильных приложений и имеют те же недостатки, что и панель навигации. Существенное их отличие в том, что панель вкладок закреплена, то есть постоянно видна на экране, даже когда пользователь прокручивает страницу вниз, а панель навигации, как правило, просто прокручивается вместе содержанием страницы. Хотя иногда применяется и так называемая «липкая навигация» (sticky navigation), когда навигационная панель остается в верхней части экрана либо автоматически появляется там, когда пользовать начинает скроллить страницу вверх.
В качестве примеров можно привести ленту новостей Facebook на мобильных платформах. Facebook на iPhone (слева) и Android (справа) использует панель вкладок для основной навигации по приложению. Вкладки расположены в соответствии с официальными принципами данных операционных систем: внизу — на iPhone и в верхней части страницы — на Android. При этом навигационные иконки на IOS еще и подписаны:
Если их более пяти, становится трудно уместить их все на панели, сохранив при этом оптимальный для сенсорного экрана размер. Конечно, можно использовать «карусель», как в примере с Google Play — то есть разбить пункты навигации по категориям, но это не всегда уместно. Пользователь не всегда может догадаться, что за пункты скрываются за следующим элементом карусели, и не всегда станет проверять их.
Пример — старая версия приложения Weather Channel: здесь панель вкладок реализована так, что не сразу понятно, что каждая вкладка внизу скрывает под собой еще несколько. И тем более сложно угадать, какие именно пункты там содержатся:
Если вы решите использовать панель навигации или панель вкладок, они должны быть основным элементом интерфейса, но еще немного места стоит отвести на другие инструменты — например, на окно поиска.
Если на сайте 4-5 основных вариантов навигации, возможно, имеет смысл сделать их видимыми постоянно, особенно если они ведут к часто используемым страницам и опциям. Однако, не забывайте, что навигация должна соответствовать контексту приложения. Так, если есть другие обязательные элементы — например, иконка корзины, вход в учетную запись и т. д, то их тоже нужно учитывать, чтобы в целом интерфейс не занимал слишком много места.
Например, вот как выглядит страница результатов поиска сайта AutoZone:
Хотя в панели навигации содержится всего четыре основных пункта (Магазин, Консультации по ремонту, Заказ и Найти магазин), помимо них на страницу выводится еще несколько элементов интерфейса (логотип, корзина, строка поиска, вкладки с результатами поиска и т. д.), так что суммарно они занимают около трети экрана.
Скрытые меню (сэндвич и другие варианты)
Сэндвич-меню, или меню-гамбургер — это навигационное меню, содержащее в себе несколько пунктов или даже несколько подменю и разворачивающееся, только когда пользователь кликает по нему. В свернутом состоянии оно занимает минимум места, и в этом одновременно его преимущество и недостаток, так как данный элемент навигации менее заметен, чем обычное меню.
Пример использования сэндвич-меню — сайт USA Today. Здесь оно применяется для основных навигационных опций. Открывается нажатием на значок в левом верхнем углу экрана:
Еще один вариант скрытой навигации — меню обнаруживается, только когда пользователь проводит пальцем по экрану. Например, в приложении Sephora на внутренних страницах меню можно вызвать, проведя пальцем слева направо:
Однако самой кнопки меню не видно, поэтому многие пользователи, скорее всего, не обнаруживают эту функцию и ограничивают себя в функционале, используя только видимые кнопки.
В целом, как уже говорилось выше, скрытое меню имеет одно существенное преимущество перед навигационной панелью — оно занимает минимум места. Однако имейте в виду, что большую часть времени навигационные ссылки будут скрыты. Чтобы воспользоваться ими, юзер должен целенаправленно зайти в меню и выбрать один из пунктов, к чему он еще не совсем привык, несмотря на то, что в мобильных версиях сайтов гамбургер-меню встречаются уже довольно часто. В связи с этом, стоит доработать систему навигации с помощью дополнительных инструментов — например, перекрестных ссылок.
Навигационный хаб
Так называют страницу (обычно это главная страница сайта), на которой размещены все ключевые навигационные элементы. Это узловая точка, перекресток всех дорог, куда пользователь возвращается каждый раз, когда ему нужно перейти в другой раздел.
Недостаток данного подхода в том, что домашнюю страницу приходится полностью отдать под нужды навигации, а пользователя вынудить делать лишний шаг (возвращение на главную) при перемещении по сайту.
Это, прежде всего, сайты и приложения, используемые не для просмотра контента, а для достижения очень конкретных задач — например, регистрации на рейс или изменения тарифа мобильной связи. В таких случаях пользователь редко выполняет более одной задачи за посещение, поэтому необходимость возвращаться на главную страницу для выбора другой ветви навигации его не будет раздражать.
Наглядный пример — мобильная версия сайта авиакомпании United. На главной странице расположены ключевые навигационные элементы, а на внутренних в верхней части страницы предусмотрена кнопка «Home» для возврата на главную. Причем пользователи редко совершают два типа действий (например, покупку билета и регистрацию на рейс) за одно посещение. Так что большинству из них эта кнопка не понадобится.
Выводы
Сделать мобильную навигацию простой и удобной не так просто из-за ограничений, связанных с небольшим размером экрана. Можно по-разному пробовать решать эту задачу, но почти всегда вы будете сталкиваться с проблемами юзабилити.
Суть в том, чтобы выбрать такие решения, недостатки которых меньше всего будут проявляться конкретно на вашем сайте:
- Сэндвич-меню вмешают большое количество навигационных ссылок, но при этом они становятся заметны, только когда пользователь вызывает меню. Этот подход актуален для сайтов, ориентированных в основном на просмотр контента.
- Панель навигации и панель вкладок съедают часть места на экране, но хорошо работают, когда вариантов для выбора немного.
- На сайтах, ориентированных на решение конкретных задач, можно использовать стартовую страницу в качестве навигационного хаба.
Компании по юзабилити тестированию выполняют такую верификацию для того, чтобы помочь разработчикам создать быстрые и простые в использовании приложения. Главная цель – обеспечить удобство пользования приложением, создать интерфейс, соответствующий общим стандартам.
Выполняя юзабилити тестирование, тестировщику нужно:
- убедиться, что кнопки соответствующего размера и что они удобны для больших пальцев;
- расположить кнопки в одной области экрана, чтобы не сбивать с толку пользователей;
- проверить, расположены ли изображения и иконки в соответствии со средой приложения;
- убедиться, что цвет кнопок, выполняющих те же функции, совпадает;
- убедиться, что система функционирует корректно при увеличении и уменьшении масштаба;
- обеспечить минимальный ввод с клавиатуры;
- выяснить, можно ли вернуться или отменить действие в случае нажатия неверной клавиши;
- выяснить, не перегружены ли контекстные меню, так как они предполагают быстрое использование;
- проверить, насколько текст прост, понятен и виден ли пользователю;
- убедиться, что короткие предложения и абзацы читабельны;
- найти оптимальный размер шрифта;
- убедиться, что в случае загрузки большого объема информации, приложение предупреждает пользователя о возможных сбоях;
- проверить, возможно ли выйти из приложения в любом режиме работы, и возобновит ли оно работу в том же режиме;
- проверить, все ли строки отображаются на необходимом языке, и содержит ли приложение опцию перевода;
- убедиться, что компоненты приложения синхронизируются с действиями пользователя;
- обеспечить руководство, которое могло бы помочь понять приложение и использовать его эффективно.
Тестирование мобильного приложения выполняется с помощью участия пользователей, так как только реальные люди могут понять субъективные ощущения, вызванные работой с приложением.
Тестирование мобильных приложений — это метод тестирования, нацеленный на определение уровня удобства пользования, обучаемости, понятности и привлекательности для целевой аудитории продукта, разрабатываемого в контексте определенных условий.
Уровень юзабилити оценивается следующими пунктами:
- Производительность и эффективность – сколько времени и этапов потребуется пользователю для выполнения основных заданий приложения; например, разместить новость, зарегистрироваться, совершить покупку (чем меньше нужно времени и шагов – тем лучше).
- Точность – сколько ошибок совершает пользователь во время работы приложения?
- Активация памяти (напоминание) – как долго пользователь помнит, как пользоваться приложением после задержки в работе в течение длительного периода времени? (Повторяющееся выполнение операций после задержки должно быть быстрее, чем у нового пользователя).
- Эмоциональная отдача – как чувствует себя пользователь после выполнения задачи: он испытывает смешанные чувства, стресс, или ему, наоборот, все понравилось? Посоветует ли он систему своим друзьям?
Два принципа улучшения удобства пользования:
- «Защита от дурака» — если в поле предлагается ввести номер телефона, то диапазон должен быть ограничен только номерами, и клавиатура должна быть оформлена соответствующим образом. То же должно быть сделано для электронной почты и других элементов, предполагающих ввод данных.
- Цикл Деминга (Plan-Do-Study-Act) – это означает, что информация о дизайне и удобстве пользования должна быть принята от существующих пользователей и основанная на их мнении, должны быть спланированы изменения приложения.
Никто не любит сырой продукт и, при возникновении любых проблем с мобильным приложением, гневно вспоминает криворуких разработчиков. Заказчику и пользователям не важно, сколько сил было потрачено на реализацию хитрого алгоритма кэширования приложения в фоновом режиме. В большинстве случаев, они по-настоящему оценят только визуальную часть и работу с интерфейсом.
Для своих сотрудников мы создали чек-лист распространенных ошибок в юзабилити мобильного приложения. Этот список стал удобным инструментом для тест-драйва очередного продукта перед сдачей. Мои коллеги-разработчики проверяют по нему самих себя, а тестировщики - принимают работу программистов.
Итак, приступим.
Работа с экранами
Все навигационные элементы на дисплее обязаны иметь достаточный размер и быть расположенными на оптимальном расстоянии друг от друга (таком, чтобы пользователь однозначно попадал по нужным);
Приложение не должно падать при быстром многократном нажатии одной и нескольких кнопок одновременно;
Никаких пустых экранов. Важно, чтобы пользователь, на каждом этапе работы с приложением, понимал, что ему делать дальше, и что происходит прямо сейчас.
Ресурсы памяти
Утечка памяти может возникать во время продолжительной работы внутри приложения, и на окнах со значительным количеством изображений. Часто проявляется, если кэширование картинок работает некорректно;
Ошибки приложения могут появляться в ответ на недостаток памяти для функционирования ОС смартфона - тестируйте как во время работы в фоновом, так и в активном режиме;
Системные ошибки при переносе или установке приложения на SD-карту - очевидная, но распространенная проблема;
Технические особенности дисплеев и ОС мобильных устройств
На ретина-дисплеях текст и другие элементы интерфейса показываются мельче, чем на обычных. Соответственно, если изображения для ретина-экрана попадут в неретина версию - они могут отобразится просто огромными;
Должна быть предусмотрена адаптация приложения к ландшафтному и портретному режиму смартфона;
Проверка версии ОС при установке обязана исключить возможность установки приложения на не поддерживаемое мобильное устройство;
Важно, чтобы визуальные компоненты приложения соответствовали своему назначению по смыслу и концепциям платформы (решения,оптимальные для одной платформы, запросто могут стать неуместными в другой);
Реакция на внешние раздражители
Оповещения других приложений, звонки, SMS, MMS;
Зарядка устройства.
Разрядка, выключение или изъятие аккумулятора устройства;
Время и условия перехода устройства в режим ожидания, включая защиту паролем;
Отключение и включение сотовой сети, режима в самолете, Bluetooth, GPS.
Подключение и отключение USB-кабеля, SD-карты и других внешних устройств;
Утеря связи с прокси или сервером;
Локализация
Проверка правильности и корректности перевода;
Уточнение соответствия всех надписей формам и кнопкам, к которым они относятся;
Проверка специфических особенностей интернационализации, разделителей в числах, форматов дат. Например, мы привыкли к дате в формате ДД.ММ.РР, в то время, как для американцев общепринятая ММ.ДД.РР.
Обратная связь
Скорость отклика элементов интерфейса должна быть достаточно большая, даже на самых слабых устройствах из всех, которые поддерживает ваше приложение;
Индикатор загрузки контента или соответствующее сообщение о требуемом времени должно показываться в каждый момент ожидания;
Оповещения с ошибкой доступа к сотовой сети, Bluetooth, GPS должны отображаться корректно;
Сообщения-предостережения должны быть очевидны для пользователя, если он пытается удалить важную информацию;
Уведомления об окончании игры или процесса должны отображаться всегда и корректно;
Важна синхронность уведомлений (звуков и вибраций приложения) с другими событиями, которые отображаются на экране.
Обновления
Должна поддерживаться та же версия операционной системы, что и у предыдущей версии приложения - если обновленная версия приложения использует новый функционал операционной системы, то нужно сделать урезанную версию приложения для предыдущих поддерживаемых версий ОС.
Все данные пользователя внутри приложения обязаны сохраняться после установки обновленной версии.
Приведем простой пример из практики компании - Lifestyle приложение TRENDMEON . В изначальной версии приложения, при первом запуске приложения скачивалась сразу вся база скидок, и потом отображалась локально.
Но вскоре обнаружилась проблема - если у пользователя был медленный интернет, база скидок подгружалась медленно. Пользователи воспринимали это как глюк. Они считали, что приложение зависло и выходили из него. После первых нескольких негативных отзывов мы изменили алгоритм отображения скидок (теперь подгружается не вся база сразу), чем уменьшили время ожидания при первом заходе до 1 секунды. Дополнительно мы уведомляем пользователя о возможных задержках при первом заходе в приложение.
Примеров мелочей, которые оказывались ключевыми, было немало в нашей практике. Мы будем рады, если наш обобщенный список основных из них поможет и другим компаниям в разработке их собственных мобильных приложений. Приглашаем обменяться опытом в комментариях.