Мешкова М.А. Диссертация Методология разработки системы тестирования (Методология разработки системы тестирования), страница 7

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

Основные принципы, позволяющие снизить нагрузку на память пользователя:

– не загружать кратковременную память пользователя. Данную функцию должен на себя взять компьютер;

– приложение должно распознавать вводимую информацию и предоставлять подсказки, если это необходимо. Например, интерактивная строка поиска;

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

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

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

– отображение инструментов по мере популярности использования. Обеспечить быстрый доступ к часто используемым операциям и инструментам, предоставить возможность скрывать редко используемые;

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

3.3.3 Третий принцип – логичность построения графического интерфейса

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

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

3.4 Организация диалога с пользователем

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

Одним из важнейших принципов проектирования интерфейсов в настоящее время является простота использования, но не простота реализации.

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

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

Требования к языку диалога:

– эффективность. На эффективном языке команды можно давать оперативно и кратко;

– полнота. Позволяет выразить любую идею, относящуюся к области исследования;

– естественная грамматика. Минимальное количество простых для изучения правил.

3.4.1 Языковая модель

При разработке графического интерфейса выделяют два языка:

– входной – пользователь задает команды для компьютера;

– выходной – ответ компьютера пользователю.

Языковая модель включает в себя четыре основные части:

– концепция;

– семантика;

– синтаксис;

– лексика.

3.4.2 Основные виды проектирования графического интерфейса

Основные виды проектирования графического интерфейса представлены в таблице 6.

Таблица 6 – Виды проектирования графического интерфейса

3.5 Обеспечение обратной связи

Обратная связь является существенной составляющей диалога с компьютером.

Обратная связь осуществляется на трех уровнях:

– лексическом;

– синтаксическом;

– семантическом [28].

Таблица 7 – Виды обратной связи

3.6 Расположение элементов интерфейса (ЭИ) на экране

Существует утверждение, что визуальная привлекательность основана на пропорциях. Часто в современных графических интерфейсах используется принцип золотого сечения. Например, если общая ширина окна приложения 900px, необходимо разделить 900 на 1.62, в результате получается примерно 555px – ширина контента (рисунок 1). Оставшуюся часть – 345px обычно используют в качестве дополнительной области, например, навигация или панель инструментов.

Рисунок 1 – Общая структура окна приложения

Элементы интерфейса необходимо сгруппировывать по значимости и в зависимости от этого учитывать расположение элементов в рабочей области. Чаще всего элементы размещаются в следующей градации: слева направо, сверху вниз. Слева вверху самые значимые элементы, справа внизу – менее значимые. Это связано с особенностью чтения текста. Для удобства использования необходимо размещать наиболее важные и часто используемые ЭИ в непосредственной близости друг к другу. При проектировании интерфейса, ориентированного на использование на устройствах с сенсорным экраном важные элементы располагаются в области действия больших пальцев рук. При размещении элементов интерфейса необходимо соблюдать пропорции и одинаковые отступы между элементами [29].

3.7 Проектирование элементов навигации приложения

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

Основные рекомендации по проектированию навигации приложения:

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

– элементы навигации необходимо располагать по содержанию в логическом порядке;

– для группировки пунктов в выпадающих списках рекомендуется использовать разделительные линии;

– при проектировании интерфейса необходимо тщательно продумывать структуру меню и стараться избегать избыточных пунктов меню;

– структура меню должна быть выдержана в едином стиле;

– рекомендуется использовать клавиатурные эквиваленты команд и «горячие клавиши».

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

При проектировании интерфейса необходимо выделить наиболее важный принцип и следовать ему. Так как всех принципов построения интерфейсов придерживаться практически невозможно, а в отдельных случаях это может не оправдать себя и отрицательно сказаться на работе с приложением [30].

3.8 Основные положения проектирования дизайна интерфейса

В настоящее время существует два основных направления дизайна графического интерфейса: UX design и UI design. В основном эти два направления применяются в совокупности и носят название UX/UI design или UX/UI дизайн.

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

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

UX/UI дизайн – это проектирование пользовательских интерфейсов в которых удобство использования так же важно, как и внешний вид.

Разница между UX и UI состоит в том, что UX дизайнер планирует то, как пользователь будет взаимодействовать с интерфейсом и какие действия необходимо предпринять пользователю, чтобы выполнить определенную операцию в приложении. UI дизайнер визуализирует данные действия. Понятия UX и UI тесно связаны между собой и иногда грань между ними размывается, поэтому UX и UI дизайном обычно занимается один дизайнер и его профессия пишется через «/». В последнее время популяризация профессии UX/UI дизайнера связана с развитием цифровых технологий. На самом деле, данная профессия существует еще с древних времен, но современное название данной профессии было дано относительно недавно.

В настоящее время UX/UI дизайнер является одной из самых востребованных профессий в цифровой индустрии [31].

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

– обычно для элементов интерфейса используются теплые цвета, это связано с психологией восприятия;

– наиболее важные и часто используемые элементы интерфейса должны быть выделены;

– при использовании иконок следует учитывать их прозрачность для пользователя. Для удобства восприятия рекомендуется подписывать графические ЭИ;

– нежелательно использовать слишком мелкие элементы.

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

3.8.1 Структура окна

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

Восприятие структуры изображения можно улучшить, используя различные способы визуального кодирования:

– цвет;

– тип линии;

– яркость.

Многие графические системы используют в общении различные пиктограммы, так как для человека образное представление более удобно для восприятия, чем словесное [32].

3.9 Дизайн приложения

3.9.1 Правило 1 «Свет и тени»

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

C 2014 года начинает пользоваться особой популярностью Flat Design (плоский дизайн) [34], в котором используются плоские объекты, линии и сплошной фон. Начиная с 2015 года и по настоящее время активно используется Material Design, впервые представленный на конференции Google I/O 25 июня 2014 года [35]. Можно утверждать, что Material Design это усовершенствованный Flat Design с добавлением легких трехмерных эффектов, но в нем нет таких элементов как текстуры, отблески и градиенты, придающие объем, которые использовались в 2006 году.

На рисунке 2 представлена иллюстрация из руководства по Material Design, показывающая основные принципы передачи глубины с помощью разных теней.