Разработчики программных комплексов часто склонны рассматривать функционал разработки отдельно от пользовательского интерфейса

ЛАВА 1. ОБЗОР И АНАЛИЗ ПОДХОДОВ К ПОСТРОЕНИЮ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА И ОБУЧЕНИЕ ПРОЕКТИРОВАНИЮ И ПОСТРОЕНИЮ ДРУЖЕСТВЕННОГО ИНТЕРФЕЙСА
1.1. Основные понятия пользовательского интерфейса
Разработчики программных комплексов часто склонны рассматривать функционал разработки отдельно от пользовательского интерфейса. При этом подразумевается, что пользовательский интерфейс является своего рода элементом функциональности системы. Однако пользователи программ зачастую не разделяют функциональность и пользовательский интерфейс. Для них именно пользовательский интерфейс является программой, и наличие удобного интерфейса означает положительное отношение ко всей программе. Пользовательский интерфейс зачастую рассматривают только как красивый дизайн. На самом деле пользователь воспринимает через интерфейс всю структуру в целом, поэтому такое понимание является не совсем правильным. В сущности, пользовательский интерфейс включает в себя все аспекты дизайна, которые влияют на взаимодействие пользователя и системы. Это не только экран, который видит пользователь. Пользовательский интерфейс состоит из множества составляющих, таких как:  набор задач пользователя, которые он решает при помощи системы;  используемая системой метафора (например, рабочий стол в MS Windows и т.п.);  элементы управления системой;  навигация;  дизайн интерфейса.
8
Изучением удобства использования производимых продуктов занимается наука эргономика. Данная наука получила за рубежом название «юзабилити» от англ. («Use») – пользоваться, и дословно означает – «используемость». С точки зрения пользователя пользовательский интерфейс является важным фактором для понимания функциональности структуры сайта – плохо разработанный интерфейс незамедлительно ухудшает функциональность системы в целом. В работе использованы определения ГОСТ Р ИСО 9241-210— 2012 [9]. Пользовательский интерфейс (интерфейс пользователя) (user interface): Все компоненты интерактивной системы (программное обеспечение или аппаратное обеспечение), которые предоставляют пользователю информацию и являются инструментами управления для выполнения определенных задач. Пригодность использования (usability): Свойство системы, продукции или услуги, при наличии которого установленный пользователь может применить продукцию в определенных условиях использования для достижения установленных целей с необходимой результативностью, эффективностью и удовлетворенностью. Эргономика (изучение факторов, влияющих на человека) (ergonomics study of human factors): Научная дисциплина, изучающая взаимодействие человека с другими элементами системы, предполагающая использование теории, принципов, данных и методов для обеспечения благополучия человека и оптимизации общей производительности системы.
1.2. Оценка качества пользовательского интерфейса
Роль поведенческих факторов в успехе программных продуктов растёт. Поведение пользователей на веб-страницах учитывается при ранжировании поисковой выдачи [2], а значит, каждый уход со страницы, оплата покупки в интернет-магазине или неудачная попытка восстановления пароля влияют на
9
поисковую доступность ресурса. Таким образом, успешность одной коммуникации влияет на взаимоотношения веб-сайта со всеми клиентами. В создавшихся условиях UX-дизайн играет ведущую роль в процессе коммуникации пользователей и ресурса. Проектирование интерфейсов позволяет уменьшить стоимость ошибок [8], так как исправление ошибки в интерфейсе, допущенной на стадии прототипа, обойдётся дешевле изменений в готовой части продукта. Одновременно возрастает важность своевременной оценки успешности предлагаемого решения. Существует несколько оценок качества пользовательского интерфейса: рекомендации стандартов ГОСТ Р ИСО 14915–1-2010, ГОСТ Р ИСО 9241–210–2012, ГОСТ 28195–89, модель GOMS и её модификации. В настоящее время разработан стандарт ГОСТ Р ИСО 14915-1-2010 «Эргономика мультимедийных пользовательских интерфейсов», который направлен на обеспечение результативности, эффективности и повышение удовлетворенности от работы с большинством современных приложений [31]. ГОСТ Р ИСО 14915–2010 «Эргономика мультимедийных пользовательских интерфейсов» направлен на обеспечение результативности, эффективности и повышение удовлетворенности от работы с большинством современных приложений. ГОСТ Р ИСО 14915–2010 рассматривает перспективные, когнитивные характеристики, сенсорные ощущения, чувства и желания пользователей, способы познания и обмена информацией между людьми как основные источники для получения оценки качества пользовательского интерфейса. В 2012 г. принят ГОСТ Р ИСО 9241–210, который описывает человекоориентированный подход при проектировании программных продуктов и призван поставить в центр внимания проектировщиков нужды пользователей, а сами пользователи становятся неотъемлемыми участниками процесса разработки. Кроме того, в ГОСТ Р ИСО 9241–210 учтены личные интересы пользователей, эмоциональные аспекты, различия в восприятии
10
пользователей, удовлетворенность пользователей от работы и отсутствие монотонности при решении задач. Недостаток данного стандарта «Эргономика взаимодействия человек-система» – необходимость учёта и измерения эффективности, удовлетворенности и результативности пользовательских интерфейсов без предложений о способе их измерений [6]. В результате изучения методик оценивания качества пользовательских интерфейсов был выделен список недостатков, с которыми сталкивается проектировщик, работающий над улучшением или созданием нового программного продукта. Проведенный анализ позволил выделить области взаимодействия пользователей с системами, не затронутые в данных стандартах, однако влияющие на их опыт использования. В результате были сформированы требования к новой методике количественной оценки пользовательских интерфейсов и предложена модель из 16 факторов:  надёжность – способность продукта противостоять сбоям, совершённым по вине пользователей, разработчиков или в результате действия внешних факторов;  единообразие – использование единой цветовой и шрифтовой схем, однородных компонентов, интерфейсов и принципов для осуществления одинаковых или сходных функций;  очевидность состояния системы – возможность индикации этапа работы программы или приложения посредством предлагаемых механизмов обратной связи;  гибкость – адаптивность приложения под различные платформы, форм-факторы и даже нужды конкретного пользователя;  когнитивная простота – фактор предполагает, что при работе с системой пользователю не потребуется запоминать дополнительную информацию, а каждый шаг при решении определённой задачи предсказуем;
11
 эргономическая простота – фактор показывает, что от конечного пользователя приложения не требуется определённая ловкость, например, для открытия многоуровневого выпадающего меню;  поисковая доступность – фактор показывает, насколько просто пользователю найти необходимую информацию на странице, оценивает структурированность текстового контента и использование понятных аудитории слов, а так же насколько выбранное семантическое ядро позволяет обеспечить доступность ресурса через поисковые системы;  качество контента – фактор характеризует достаточность информации для принятия решения, её корректность, структурированность, зашумлённость;  поддержка – вариативность и качество работы различных способов помощи пользователям, в том числе и контекстной, которую предлагает приложение;  функциональность – оценка соответствия функционала приложения нуждам пользователей и достаточности этого функционала для решения проблем аудитории продукта;  удовлетворённость – оценка степени решения приложением пользовательских задач, а так же эмоционального состояния, которое возникает в ходе работы;  эмоциональность – фактор иллюстрирует наличие антропоморфных качеств в оформлении интерфейса, наличия персонажей, неформальных ответов и реакций на пользовательские действия;  выгода от использования – фактор показывает, насколько пользователи приложения информированы об уникальности и полезности продукта;  вовлечённость – степень реакции пользователей на специальные средства для увеличения частоты возврата в приложение, а так же
12
результативность способов создания эмоциональных привязок пользователей и приложений;  язык приложения – характеризует словарь приложений, стилистику использованных фраз и то, насколько они соответствуют ожиданиям целевой аудитории;  общественное окружение – фактор, базирующийся на наличие у приложения неформальных сообществ в социальных сетях и на иных ресурсах. Каждому фактору присвоена определенная оценочная характеристика. В настоящее время предложен 121 критерий оценивания, однако матрица оценок может расширяться в дальнейшем. Данная модель позволяет оценить качество пользовательского взаимодействия с системами как с привлечением к тестированию целевой аудитории продукта, так и посредством экспертных оценок [31].
1.3. Значимые составляющие «Дружественного интерфейса»
Термин «дружественный», будучи во многих случаях удобным, на самом деле слишком нечеток. ГОСТ Р 55236.2-2012. «Эргономика изделий повседневного использования», дает следующее определение.
Изделие (продукция) с интуитивно понятным управлением (walk-upand-use product): Изделие (продукция) повседневного использования, предназначенное для широких слоев населения. Примечание – Изделие (продукция), предназначенное для использования населением в торговых помещениях, например в магазине или офисе, как правило, является изделием (продукцией) с интуитивно понятным управлением [11]. В применении к интерфейсу можно выделить наиболее значимые составляющие: ментальную модель, метафору, наглядность и стандарт. Упомянутые выше свойства, будучи хорошо реализованными, также существенно снижают количество человеческих ошибок.
1. Ментальная модель
13
Для того чтобы любая система была успешной, человеку необходимо иметь представление, как она работает. При этом необязательно понимать сущность осуществляемых в системе процессов точно, и, более того, он даже не должен задумываться, как это все сделано. Такое понимание сущности системы называют ментальной моделью (рис. 1). В качестве примера можно привести регистрацию пользователя на вебсайте. Страница регистрации представляет собой НТМL-форму для ввода имени пользователя, его контактных данных, пароля и т.п. Внизу страницы, под элементами формы, как правило, располагается кнопка для сохранения введённых пользователем данных. Данная кнопка может быть именована поразному, например, «Сохранить», «Продолжить», «Зарегистрироваться». Однако для пользователя неочевидна как необходимость сохранения введенных данных в БД, так и необходимость нажатия на данную кнопку. После заполнения всех полей формы он может нажать на одну из ссылок навигации веб-сайта, и все введенные данные будут потеряны. В данном случае необходимо явно пояснить пользователю суть данной операции, т.е. сформировать в его сознании ментальную модель, особенно если сайт предполагает неподготовленных пользователей в качестве части своей аудитории [24].
14
Рис. 1. Пример ментальной модели
Следовательно, без правильной ментальной модели люди фактически не могут научиться пользоваться системой. К сожалению, проектирование системы, для которой построить такую модель легко, является нетривиальной задачей, и для этого невозможно разработать универсальный алгоритм.
2. Метафора Зачастую встает задача: избавить пользователя от необходимости построения ментальной модели. Идеальным способом добиться этого можно с помощью метафоры, которая позволяет пользователю не создавать новую модель, а воспользоваться готовой, ранее построенной им по другому поводу (рис. 2). Самым элементарным примером метафоры в интерфейсе являются значки программ для воспроизведения звуков на компьютере. За всё время с момента создания программ сложилось так, что вся аудиотехника имеет почти одинаковый набор кнопок: несколько кнопок со стрелками (назад/вперед), кнопка с треугольником (воспроизведение), кнопка с двумя короткими линиями (пауза), кнопка с квадратиком (полная остановка)
15
и красный кружок (запись). Про них нельзя сказать, что они идеально понятны, но, по крайней мере, через определенное время научиться пользоваться ими можно. Чаще всего человек сначала учился пользоваться этими кнопками на других материальных устройствах, а после этого начинает пользоваться с легкостью компьютером.
Рис.2. Демонстрация метафоры
При проектировании структуры интерфейса аналогичного назначения целесообразно повторить существующую систему кнопок. Вследствие чего пользователям для применения программы не нужно учиться и запоминать данную маркировку. К сожалению, у метафор существуют недостатки:  не для любой задачи возможно найти нужную метафору; важный момент в том, что не всегда можно быть уверенным в нахождении правильной метафоры. Её просто может и не быть. Поэтому этот метод малоэффективен.  даже подходящая метафора может оказаться бесполезной, если она малоизвестна для существенной части аудитории или её тяжело однозначно передать интерфейсом.
16
 почти всегда метафору можно использовать в документации, не перенося её в интерфейс, с тем же успехом. Для достижения результата достаточно указать, что «система во многом напоминает...». Таким образом, метафора, являясь лучшим средством для избавления пользователя от обучения, не является средством идеальным. Анализируя опыт успешных случаев их применения, можно сказать, что применять метафору можно, но с большой осторожностью.
3. Наглядность Другой составляющей понятности является термин, по-английски называемый «affordance», что можно перевести на русский язык, как «наглядность» (рис. 3). Польза наглядности состоит в том, что она дает возможность пользователям обходиться без какого-либо начального обучения, благодаря этому наглядность является очень действенным и надежным средством обеспечения понятности. Но не так-то просто создать наглядные материалы в интерфейсе, наиболее доступными оказываются всего несколько способов передачи наглядности, из которых самыми значительными являются четыре:  повторение структуры объектов и структуры элементов управления (этот метод работает в реальном мире, но плохо в интерфейсе, поскольку предпочтительней непосредственное манипулирование);  видимая принадлежность элементов управления объекту;  визуальное схождение наглядности экранных объектов и объектов реального мира (кнопка в реальном мире предлагает пользователю нажать на неё, псевдо-трёхмерная кнопка предлагает нажать на неё по аналогии);  при наведении курсора мышки происходит изменение свойств объекта (бледный аналог тактильного взаимодействия).
17
Рис.3. Пример наглядности
В целом создание наглядности является наиболее сложной задачей, стоящей перед графическим дизайнером, работающим над интерфейсом. Данная область исследований еще недостаточно разработана, но вполне перспективна.
4. Стандарт Стандарт является самым мощным, но и самым ненадежным способом обучения. Этот метод подразумевает, что если по каким-либо причинам нет возможности сделать интерфейс понятным, то всегда можно использовать стандартный (рис. 4). Плюс в том, что пользователю не нужно будет обучаться. Например, кран с горячей водой всегда маркируют красным цветом, а кран с холодной – синим.
18
Частично это соответствует свойствам человеческого восприятия, но, в основном, здесь работает привычка. Как уже было сказано, стандарт – настолько же мощное средство, сколько и ненадежное. С одной стороны, после появления уже стандартных интерфейсов появилось больше похожих страниц, при помощи которых пользователи обучались новому, с другой стороны, множество новых идей так и не было осуществлено, поскольку в нужный момент не было подходящих стандартов. Таким образом, чтобы стандарт был эффективным, он обязан быть популярным. Распространен же он может быть двумя способами: во-первых, он может быть во всех системах, во-вторых, он может быть популярен внутри отдельной системы. Например, стандарт интерфейса Microsoft Windows популярен почти во всех системах для Windows, именно поэтому его нужно придерживаться. С другой стороны, в этом стандарте могут быть погрешности, что оставляет неопределенным очень многое, и это многое в разных системах трактуется по-разному.
19
Рис. 4. Демонстрация стандарта
Создание собственного стандарта возможно лишь для масштабных, сложных проектов, ориентированных на значительную аудиторию. Однако существует множество уже реализованных стандартов, и главной задачей разработчика является выбор наиболее удачных из них.
1.4. Анализ существующих методов оценки и повышения удобства пользовательских интерфейсов
Для решения проблемы оценки и улучшения существующих интерфейсов существуют следующие распространенные методы [29]:  юзабилити-тестирование;  карточная сортировка;  контекстное исследование;  контрольные списки;  макетирование;
20
 обзоры;  опросники;  плюралистическая обработка;  протоколы самоотчета;  фиксация мыслей вслух;  фокусные группы;  эвристическое исследование;  экспертиза компонентов.
Юзабилити-тестирование (Usability) Юзабилити-тестирование делается на протяжении всего хода работы. Проектировщики делают анализ изначально конкурирующих продуктов, после чего намечают контрольные точки, которые потом нужно достигнуть при разработке. В середине работы идет проверка над продуктом и выявляются недочеты в сделанном дизайне. На заключительных этапах проверяют, насколько продукт соответствует изначальным планам. В целом процесс теста не сложен: происходят наблюдения за пользователями, сколько ушло времени на определенную задачу или сколько сделано ошибок. Но, к сожалению, тест определяет только слабые места.
Карточная сортировка (CardSorting) Карточная сортировка – это классификационный метод, при котором пользователи сортируют различные элементы разрабатываемого веб-сайта по нескольким категориям. Он используется на ранних стадиях разработки.
Контекстное исследование (ContextualInquiry) Контекстное исследование – это метод структурированного интервью, который имеет три принципа:  учет контекста, в котором используется изучаемый сайт;  совместная оценка сайта пользователем и разработчиком;
21
 в фокусе оценки сайта находится именно его удобство для пользователя. Так же, как и карточная сортировка, разрабатывается на ранних стадиях.
Контрольные списки (Checklists) Контрольные листы помогают определить функциональность дизайна. Подготавливается ряд вопросов, которые определяют все возможные функции сайта. Существует уже большое количество готовых контрольных листов. Задача контрольных листов – не оценка интерфейса сайта, а скорее напоминание разработчику о некоторых основных принципах и нюансах, которые ему нельзя забывать при разработке, поэтому эту методику нельзя назвать методикой оценки.
Макетирование (Prototyping) В процессе макетирования строится модель, включающая все тестируемые компоненты (дизайн, элементы управления и т.д.). Можно использовать различные способы ее построения: от изображения элементов интерфейса на бумаге до создания рабочего макета веб-сайта. Различают горизонтальное и вертикальное макетирование. Горизонтальное макетирование изучает пользовательские предпочтения, а именно выясняет, где, по мнению пользователей, должны находиться определенные функции. При вертикальном макетировании исследуют функциональность отдельных компонентов веб-сайта – его следует проводить лишь после завершения разработки тестируемого сектора. Макетирование является одним из самых мощных средств обеспечения удобства использования сайта, однако этот метод не позволяет производить оценку уже готовых продуктов.
Обзоры (Surveys) Обзоры – это специальные интервью с пользователями, при котором им задаются специально подготовленные вопросы, а их ответы записываются
22
для дальнейшей обработки. Вопросы могут меняться в зависимости от целей исследования, но всегда группируются по разным категориям:  демографическая информация о пользователе;  оценка информационного наполнения веб-сайта;  оценка самого дизайна сайта. Обзоры используют на разных стадиях разработки.
Опросники (Questionnaires) Опросники для оценки веб-сайтов составляются по тем же принципам, что и психодиагностические тесты. Отличаются они от обзоров только тем, что там идёт живое интервью, а в опросниках нужно выбрать вариант из предложенных ответов. Их основное отличие от обзоров состоит в форме представления пользователям. От этого метода тяжело получить количественную оценку качества интерфейса.
Плюралистическая проработка (PluralisticWalkthroughs) Плюралистическая проработка проводится группой в 15-20 человек, в которую помимо экспертов в области оценки веб-продукции входят пользователи, разработчики и специалисты по профессиональному здоровью и организации труда. Они рассматривают различное поведение людей и их взаимодействие с веб-сайтом. Метод применяется на ранних стадиях разработки в целях получения обратной связи как от специалистов, так и от конечных пользователей.
Протоколы самоотчета (Self-ReportingLogs) Метод заключается в том, что пользователь фиксирует свои эмоции и действия на бумажных бланках при взаимодействии с сайтом. Метод не очень действенный, так как пользователь сам до конца не может контролировать свои эмоции. Поэтому зачастую составляются определенные задачи, которые решаются или не решаются им. Используется на ранних стадиях.
Фиксация «мыслей вслух» (ThinkingAloudProtocol)
23
Самая популярная техника. Пользователь произносит вслух свои мысли и эмоции, которые происходят в процессе решения задачи.
Фокусные группы (FocusGroups) Метод фокусных групп, который заключается в опросе отобранных людей. Обычно в эти группы собираются не больше 6-9 пользователей. Достоинство этого метода в том, что выявляются спонтанные реакции и идеи. Но полагаться на этот метод полностью не стоит, лучше его проводить параллельно с другими методами. Такие совещания можно проводить на любой стадии разработки.
Эвристическое исследование (HeuristicEvaluation) Эвристическое исследование заключается в том, что собирают 4-6 профессионалов в области экспертных оценок веб-продукции. Сайт сканируют на ошибки и сразу конспектируют все недостатки и достоинства при взаимодействии пользователя и компьютерных систем. Потом собираются и делают выводы о данном сайте. Такие совещания можно проводить на любой стадии разработки.
Экспертиза компонентов (FeatureInspection) Экспертиза компонентов предназначена для анализа конкретного набора признаков веб-сайта, с которыми взаимодействует пользователь для достижения конечной цели. Метод выясняет оценку доступности и функциональную сторону каждого шага. Он анализирует отдельные признаки интерфейса и не позволяет получить общую оценку.
1.5. Адаптивный веб-дизайн
Адаптивный веб-дизайн – новое направление веб-дизайна, которое является важным показателем качества при создании макета. Это вид дизайна, который обеспечивает хорошее восприятие при просмотре страниц. В наше время появилось очень много различных гаджетов, каждый имеет свой размер. Чтобы узнать какую-либо информацию,
24
чаще всего пользуются планшетом или телефоном, так как он всегда оказывается под рукой, будь он дома или на улице. Сейчас многие сайты учитывают данное положение и делают именно адаптивный сайт. Значительная часть пользователей привыкло к тому, что сайт подстраивается именно под его гаджет. Если сайт будет не адаптирован, пользователь будет получать негативное восприятие – необходимо передвигать страничку на телефоне, а это занимает время. Существуют различные виды макетов, рассчитанные именно на адаптацию. И. Маркотт и С. Круг предлагают следующие виды макетов [14, 22]:  Резиновый При уменьшении размера экрана блоки сжимаются до предложенной ширины мобильного или планшетного устройства (рис. 5). Если размер слишком мал, то макет превращается в одну длинную ленту.
Рис. 5. Структура резинового макета

Перенос блоков
Данный метод лучше применять для многоколоночного сайта, при изменении ширины экрана блоки переносятся ниже (рис. 6).
25
Рис. 6. Структура переноса блоков

Переключение макетов
Самый удобный способ для пользователей, потому что под каждый размер продумывается макет сайта (рис. 7). Для дизайнеров ставится задача: полное переосмысление акцентов. Самой главной задачей является правильная подача какого-либо контента именно этому пользователю и в любое время.
Рис.7. Структура переключения макетов

Адаптивность «малой кровью»
26
Данный метод прост в использовании, но подходит для несложных макетов (рис. 8). Происходит масштабирование графических элементов, фотографий и текста.
Рис. 8. Демонстрация адаптивности «малой кровью»

Панели
Данный способ заимствован из мобильных приложений – появляется еще одно меню при различных положениях (рис. 9). Но пока данный метод не привычен для пользователя, так как редко встречается мобильная навигация на веб-сайтах.
Рис. 9. Структура метода панелей
Каждый метод разработан под различные макеты, но они не являются уникальными. Адаптивный дизайн гораздо удобнее мобильных приложений и менее затратный с точки зрения экономики, т.к. мобильное приложение должно быть разработано под различную операционную систему, что тоже не практично.