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

2.1. Особенности интерфейсов мобильных устройств / 2.2. Проектирование опыта взаимодействия с мобильным приложением / 2.3. Оценка полезности и организации интерфейса мобильного приложения / 2.4. Анкетирование как метод общей оценки опыта взаимодействия пользователя мобильного приложения

Особенности интерфейсов мобильных устройств

Опыт взаимодействия пользователя описывается с учетом типа пользователя, осуществляющего работу с интерфейсом определенного вида. Способ и варианты взаимодействия зависят от таких факторов, как тип устройства, тип операционной системы, тип и назначение программного продукта. В связи с этим выделяют стили пользовательских интерфейсов, которые наиболее популярны при проектировании информационных систем [28 J :

• — графический пользовательский интерфейс (GUI);
• — пользовательский веб-интерфейс (WUI);
• — пользовательский интерфейс мобильных устройств (HUI).

Для каждого из указных типов интерфейсов существуют стилевые правила (styleguides), которые являются основой создания единообразных и предсказуемых интерфейсов. Стилевые правила могут также формулироваться и по отношению к интерфейсу разрабатываемой системы, регламентируется их соблюдение на всех этапах разработки.

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

Графический интерфейс пользователя (Graphical User Interface, GUI) регламентирует диалог пользователя с ПК посредством экранных графических компонентов.

Такой тип интерфейса, как было описано выше, называется также полный WIMP-интерфейс. Элементами интерфейса (элементами управления) становятся примитивы графического пользовательского интерфейса, имеющие унифицированное визуальное исполнение и выполняющие стандартные действия. Основополагающим в графическом пользовательском интерфейсе становится визуализация информации, т.е. предпочтение в использовании графических элементов вместо текстовой информации (например, выбор пиктограммы программного приложения вместо поиска его в списке имеющихся).

GUI-приложение, как правило, содержит окна, которые включают разные активные элементы, предназначенные для ввода текста, перетаскивания графических примитивов, редактирования изображений и проч. Виды и расположение элементов управления, а также типы реакций достаточно стандартизированы в рамках определенной операционной системы. Так, например, на сайте компании Microsoft содержатся требования и рекомендации по проектированию классических приложений для операционной системы Windows.

Основные элементы управления системы Windows:

• — окна программ, окна документов, режимные диалоговые окна, безрежимные диалоговые окна, палитры, окна браузера;
• — командные кнопки, кнопки доступа к меню, чекбоксы и радиокнопки;
• — раскрывающиеся и пролистываемые списки, комбобоксы;
• — поля ввода;
• — ползунки;
• — статические и динамические меню, разворачивающиеся в пространстве или во времени;
• — строка статуса (состояния);
• — полосы прокрутки;
• — пиктограммы.

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

2. Пользовательский веб-интерфейс (Vebuserinterface)

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

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

Дизайн веб-страниц определяется целями проекта, предоставляемыми функциональными возможностями, типом информационного содержания и навигационной структурой. Компоновка элементов веб-страниц не является столь регламентированной, как в вШ-интерфейсах. Графика, анимация, текст в веб-интер-фейсах могут выполнять как оформительские, так и навигационные, функциональные задачи. В связи с этим возникает опасность возникновения внешнего визуального шума и увеличения времени отклика при загрузке и раскрытии графических файлов.

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

3. Пользовательский интерфейс мобильных устройств (Н1Л)

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

Общий стиль интерфейса мобильного устройства можно охарактеризовать как SIMP-интерфейс: «Экран — Пиктограмма — Меню — Указатель». На мобильных платформах под окнами понимаются элементы интерфейса, занимающие все пространство экрана устройства. Переход между такими окнами осуществляется при помощи графических элементов-навигаторов или перетягиванием их при помощи пальца (в основном большого).

Особенности проектирования мобильных интерфейсов определяются в первую очередь спецификой операционной системы. Среди наиболее распространенных операционных систем для мобильных устройств можно назвать следующие: GoogleAndroid, AppleiOS, WindowsMobile, Palm OS, Symbian OS, BlackBerryOS. Ha рынке России первую позицию занимает операционная система Android (50,65% рынка декабрь 2014 г.), на втором месте находится iOS (43,59%), на третьем — Windows Phone, которая становится все менее популярной (2,42%) [37]. В рамках данной работы будем акцентировать внимание на программных продуктах, работающих на платформе Android.

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

1. Мобильные веб-решения — это веб-сайты и веб-приложения, которые должны быть адаптированы для просмотра в браузере мобильного устройства.

Такие информационные продукты характеризуются относительной простотой в создании. При их проектировании требуется применение принципов адаптивного (гибкого, резинового) дизайна, что позволяет электронным страницам подстраиваться под размеры экранов разных мобильных устройств [24, с. 122] (рис. 2.1).

В вопросе приспособления веб-страницы к разрешению экрана устройства и размерам области просмотра используется часто

Рис. 2.1. Пример использования «отзывчивого веб-дизайна»

термин «отзывчивый веб-дизайн» (ResponsiveWebDesign), который принадлежит Итану Маркотту. Он сформулировал основные принципы адаптации дизайна веб-сайта под экраны разных размеров и типы устройств:

• 1) гибкий макет на основе сетки (flexible, grid-basedlayout);
• 2) гибкие изображения (flexibleimages);
• 3) медиазапросы (CSS3 mediaqueries) [12J.

Идеология отзывчивого дизайна признает приоритет в первоначальной разработке мобильной версии сайта и последующее его совершенствование и приспособление под другие устройства. На практике это предполагает определение оптимальных значений ширины экрана, т.е. своеобразных «контрольных точек», которые будут задавать параметры отображения страницы и ее элементов. «Контрольная точка — это условный оператор, определяющий, соответствует ли устройство выделенному критерию (например, заданной ширине экрана). Если условие выполняется, браузер использует новый набор параметров отображения страницы (например, новую таблицу стилей CSS), а сайт видоизменяется, масштабируясь под доступное пространство» [3, с. 57].

По мнению эксперта Р. Будиу (Raluca Budiu), адаптированный дизайн предполагает, что содержимое может отображаться в формате трех колонок на мониторе компьютера, двух колонок — на планшете, одной колонки — на экране смартфона. При этом автор отмечает, что адаптированный дизайн часто приводит к не

корректному отображению: могут исключаться некоторые важные элементы содержания или функциональные возможности 157].

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

К достоинствам веб-решений для мобильных устройств можно отнести:

• — кроссплатформенность, т.е. просматривать веб-сайт или использовать функции веб-приложения можно при работе с любой операционной системой;
• — простоту в создании и поддержке: используются те же средства, что и для создания веб-приложений, которые просматриваются на ПК. Принципиальным является вопрос поддержки, т.е. все обновления на сайте будут доступны пользователю сразу без необходимости скачивания дополнительных данных;
• — возможность анализа с помощью веб-сайтов предпочтения и активности пользователей с помощью ресурсов веб-аналитики, а также тестирования разных вариантов интерфейсов;
• — возможность использования привычных поисковых систем (Яндекс, Google) для поиска веб-сайта и нужной информации.

Основными недостатками веб-решений является ограниченная функциональность, которая находится в рамках возможностей того, что может обеспечить браузер; зависимость от постоянного подключения устройства к сети Интернет (при наличии сбоев в работе сети затрудняется работа с сайтом); невозможность работы в фоновом режиме.

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

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

Мобильные приложения делят на несколько категорий:

• — развлекательные приложения — средства для скачивания, организации и просмотра текстовых, а также аудио- и видеодокументов, т.е. музыки, фильмов, книг и проч.;
• — навигационные (геолокационные) приложения — это инструменты, предназначенные для ориентирования на местности, т.е. они работают с картами и системой GPS;
• — информационные (справочные) приложения — средства для поиска и извлечения необходимой информации из электронных хранилищ данных: словарей, справочников и проч.;
• — прикладные приложения необходимы для выполнения каких-то вспомогательных функций, например, организации дел при помощи электронного органайзера, расчетов при помощи калькулятора валют или приложения для конвертирования единиц измерения и проч.;
• — игровые приложения — мобильные игры разных категорий;
• — развивающие и обучающие приложения используются для получения знаний или освоения навыков. Например, приложения для обучения чтению детей дошкольного возраста; для прослушивания аудиоуроков на иностранном языке и проч.

Это не исчерпывающий список категорий, но он сформирован на основе статистики наиболее часто загружаемых типов приложений из виртуальных магазинов.

Другая классификация мобильных приложений основана на типе бизнес-модели его владельца:

• — рекламные или промоприложения, используемые в целях брендинга и обеспечения потребителей полезными функциональными возможностями, которые предусмотрены в рамках стратегии развития бренда;
• — интернет-магазины, т.е. это и сами виртуальные магазины нативных приложений, и магазины для онлайн-заказов одежды, еды и др.;
• — приложения для трансляции каких-то событий, например для онлайн-просмотра хоккейных матчей;
• — приложения, дублирующие сайт. Такие приложения необходимы для информирования об организации и ее товарах / услугах, они позволяют также оформить заказ или выполнить другие целевые коммерческие действия;
• — контентные приложения, которые несут множество полезной информации по какому-то вопросу и обеспечивают сопутствующие функциональные возможности. Например, приложения с рекомендациями по питанию содержат информацию о диетах, продуктах и т.п., а также позволяют составлять индивидуальный рацион питания, рассчитывать калорийность блюд и т.п.;
• — другие приложения: мобильные версии социальных сетей, системные приложения, бизнес-приложения и др.

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

К достоинствам нативных приложений можно отнести:

• — расширенную функциональность. Такое приложение получает доступ к оборудованию (адресная книга, камера, встроенные сенсоры и др.) и системным ресурсам мобильного устройства, для которого оно разрабатывалось, что позволяет обеспечить пользователя дополнительными возможностями: ориентирование на местности, перевод фраз с иностранного языка, которые были зафиксированы камерой, и т.п.;
• — качественное взаимодействие пользователя с приложением. Поскольку приложение устанавливается на мобильное устройство (созданное под него) и для своей работы не обязательно может требовать постоянного подключения к сети Интернет, то работа пользователя может характеризоваться как достаточно стабильная, комфортная, эффективная;
• — возможность работы в фоновом режиме, что позволяет пользователю решать несколько задач;
• — возможность использоваться на коммерческой основе, т.е. приносить владельцу доход. Разработчик (или владелец) имеет возможность разрешать пользователю скачивать приложение бесплатно, что характерно для проектов, решающих маркетинговые задачи. В иной ситуации бесплатно установленное приложение может требовать затрат денежных средств со стороны пользователя для обновлений или подключения дополнительных функций. Полное коммерческое использование предполагает платное скачивание и установку самого приложения или информационных материалов (например, текстовых документов с литературными произведениями или музыкальных файлов для чтения или прослушивания в специальных приложениях). Для коммерческого предложения приложений созданы специальные виртуальные магазины. Самыми популярными в России для устройств, использующих операционную систему Android, являются магазины GooglePlay, Яндекс.Store и MTSAppMarket.

К недостаткам нативных приложений можно отнести:

• — повышенную ресурсоемкость. Ввиду ограничения постоянной памяти возникают ограничения по количеству и объему закачиваемых и устанавливаемых приложений;
• — повышенные расходы на создание и поддержку. Поскольку нативные приложения создаются под конкретную операционную систему и мобильное устройство, то будет затратно осуществить разработку множества вариантов таких продуктов. Поддержка приложения также затруднительна, поскольку от пользователя требуется затрата усилий и, возможно, средств, а также желание для загрузки обновлений.
• 3. Мобильные мессенджеры (Messenger) — специальные программы, позволяющие людям мгновенно (в режиме «здесь и сейчас») обмениваться сообщениями, которые могут содержать текст, графику, звук, видеозаписи.

Для функционирования таких программ требуется подключение к серверу (центральному компьютеру сети). Поскольку они разработаны разными компаниями без учета согласованности, имеют свои серверы и протоколы передачи данных, специфику функционирования и дизайн интерфейса, то пользователи в настоящее время, как правило, предпочитают использовать несколько мессенджеров. Среди наиболее популярных можно назвать следующие: GoogleTalk, FacebookMessenger, iMessage, Messenger, WhatsApp, Viber и др. [33].

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

• — характеристики самого устройства (аппаратные ограничения);
• — способы взаимодействия (функциональные ограничения);
• — условия использования (контекстные ограничения).

По характеристикам устройства можно выделить следующие ограничения.

1. Малый размер экрана.

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

Размеры экранов смартфонов в настоящее время варьируются в пределах от 3 до 7 дюймов по диагонали. Размеры экранов планшетов находятся в пределах от 7 до 10,1 дюймов. Разрешение (количество точек) экранов основной части смартфонов и планшетов всех производителей находится в пределах от 1280 х 720 до 1920 х х 1080 пикселей. На рис. 2.2 представлены типичные варианты размеров экранов мобильных устройств.

Рис. 2.2. Типичные варианты размеров экранов мобильных устройств

5" б" Г 8" 9" 10" И" 12" 13"

Малый размер экрана диктует необходимость ограничивать количество и размер элементов интерфейса, следуя требованию «убрать все лишнее». Здесь надо обратить внимание на оформление всего окружающего пространства сайта / приложения (элементы управления и дизайна операционной системы или самого сайта / приложения), которые обрамляют основной контент страницы

или окна пользователя, что названо термином «Chrome». Как отмечает Ралука Будиу (Raluca Budiu), важно соблюдать оптимальное соотношение между пространством, которое приходится на элементы управления и на содержание, чтобы пользователю было максимально удобно при любом размере экрана [44J. Надо учитывать также, что восприятие и взаимодействие с мелкими элементами затрудняется.

2. Качество экранов устройств.

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

3. Ограниченный размер кэш-памяти и cookies.

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

Cookies — набор данных, записанных в текстовом файле, с индивидуальными особенностями посетителя сайта: логины и пароли, индивидуальные настройки, количество и время посещений и др. Cookies необходимы, чтобы упростить работу пользователей с сайтом или приложением за счет сохранения каких-то индивидуальных настроек или ранее введенной информации.

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

4. Нестабильное соединение и пропускная способность.

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

Другой недостаток мобильного Интернета — это прерывание мобильной связи или выход из зоны Wi-Fi, что неожиданно прерывает сеанс работы, когда пользователь не успевает сохранить данные или решить задачу. К тому же длительность работы мобильного устройства ограничена уровнем заряда аккумуляторной батареи, что важно учитывать при использовании таких энергоемких функций, как, например, GPS.

5. Условия использования (время, место).

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

При использовании мобильного устройства человек, как правило, находится в движении, т.е. работа осуществляется в условиях многозадачности. Пользователь имеет ограниченные возможности полноценно сосредоточиться на работе с приложением, прерывание процесса выполнения задачи или чтения происходит при наличии множества внешних раздражителей: внешних шумов, меняющегося освещения, вибрации и тряски и т.д. Перечислим наиболее типичные места использования мобильных устройств: дома, в общественном транспорте, на работе, в различных ситуациях на улице; в магазине; во время просмотра ТВ и др. [3, с. 10]. Не стоит забывать про то, что смартфоны — это не просто портативный компьютер, а в первую очередь телефон, поэтому прерывание работы возможно из-за входящего звонка.

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

6. Способы взаимодействия.

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

Для взаимодействия пользователя с мобильным устройством предусмотрено два метода манипуляции:

• 1) прямая манипуляция характерна для устройств с ^исЬ-ин-терфейсом. ТоисЬ-технология сенсорных экранов обеспечивает контактное взаимодействие пользователя с системой, т.е. непосредственное манипулирование элементами интерфейса при помощи пальцев рук путем нажатий и перемещений;
• 2) непрямая манипуляция предполагает управление при помощи вспомогательных средств (физическая клавиатура, трекболы, трекпады и проч.).

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

В последнее время становится все более популярным голосовой ввод информации за счет приема сигнала с микрофона. Так реализована возможность поиска на основе голосовых команд «0’кейСоо§1е».

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

Развитие технологий и множество исследований в области совершенствования мобильных устройств приводят к постоянному появлению новых способов взаимодействия. Однако разные способы ввода предполагают и соответствующее владение ими пользователей. Так в рамках 1:оис11-интерфейсов манипулирование элементами экрана осуществляется чаще всего пальцем, поэтому размер активных элементов и расстояние между ними должно предоставлять пользователю возможность точно позиционировать касание (нажатие) и предотвращать возможность активизации нескольких элементов сразу. В особенности затруднена работа с виртуальной клавиатурой, кнопки которой критически малы. Все эти трудности наиболее актуальны для экранов с наименьшими габаритными размерами, поэтому планшеты имеют некоторые преимущества перед смартфонами.

Ограничением в отношении способа взаимодействия с мобильным устройством является также единственное окно (экран) в процессе работы. Пользователь не имеет возможности разделить ограниченное рабочее пространство между разными программами и работать в них одновременно. В связи с этим дизайн мобильного сайта или приложения должен быть самодостаточным, т.е. не предполагать параллельное использование каких-то внешних ресурсов или программ.

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