Введение
Информационные технологии с каждым годом занимают все более значимое место в жизни современного человека [4]. Появляются новые устройства, автоматизируется все больше процессов, а жизнь без смартфона постепенно становится невозможной [10]. Не только в работе, но и для личного пользования мы задействуем множество приложений, каждое из которых имеет свои аналоги. Немаловажную роль в выборе оптимального приложения играет пользовательский интерфейс.
Согласно определению из Википедии, интерфейс пользователя — это совокупность средств, при помощи которых пользователь общается с различными устройствами, чаще всего — с компьютером или бытовой техникой, либо иным сложным инструментарием (системой) [3].
В данной статье рассматриваются общие тенденции разработки интерфейса программного обеспечения, приводится анализ их использования на примере нескольких программных продуктов, рассматривается экономическая состоятельность данных продуктов, а также отзывы целевой аудитории.
Современные тенденции
Активное развитие графического интерфейса началось в 1970-х годах, благодаря разработкам компании Xerox. В частности, речь идет о продукте SmallTalk. Данный продукт был задуман как язык программирования и среда проектирования программ и обладал собственным пользовательским интерфейсом. Именно эта среда ввела многие современные понятия и каноны графического пользовательского интерфейса.
Большинство технологий, используемых в графическом пользовательском интерфейсе, не претерпевают значительных изменений в течение десятилетий. К таким оптимальным решениям относятся использование курсора, многооконный режим работы, а также структура самого окна, использование ярлыков и иконок для получения доступа к программе или документу. Также, с течением времени формируются определённые каноны разработки дизайна графического интерфейса, отвечающие не только моде своего времени, но и требованиям к удобству использования.
В данной статье рассматривается следующий перечень современных тенденций разработки графического пользовательского интерфейса:
- Минимализм;
- Интуитивность;
- Адаптивность.
Минимализм
Современный темп жизни требует быстрого и лёгкого выполнения большого количества задач. Впечатляющие графические элементы, градации, сложные визуальные эффекты, детально прорисованные ярлыки и иконки отвлекают внимание, а зачастую и вовсе путают пользователя. Минималистичные интерфейсы предоставляют возможность быстрого и простого взаимодействия с программным продуктом.
Понятие «минимализм» в разработке дизайна графического интерфейса в рамках данной статьи рассматривается со следующих позиций:
- Логическая структура;
- Дизайн элементов;
- Колористика;
- Анимация.
Логическая структура
Минимализм затрагивает такие критерии, как эргономика, то есть использование меньшего для создания нужной композиции. Другими словами, это правильное и простое использование только нужного — убирая всё лишнее (или не внося его вовсе) [8]. Таким образом появляется свободное пространство. Правильная постановка свободного пространства в работе и даёт эргономичность, не отвлекает и концентрирует на нужном.
Зачастую, для упрощения восприятия информации, структура графического пользовательского интерфейса выровнена и размечена, как представлено на рисунке.
Дизайн элементов
Архитектор Людвиг Миса Ван дер Роэ обозначил минималистскую эстетику фразой «Меньше — значит больше» [2]. Цель минимализма — преподнести наиболее важным содержание ресурса на первый план, и свести к минимуму отвлекающие факторы для пользователя. Так, на рисунке представлены примеры использования минимализма в разработке дизайна элементов.
Колористика
В данном разделе речь пойдёт не столько о минимализме, сколько о построении гармоничной цветовой гаммы дизайна графического интерфейса. По общему правилу рекомендуется использовать не более 5 цветов для создания цветовой схемы, но есть и примеры оригинальных и гармоничных решений, построенных вразрез данному правилу. В данной статье рассматривается одна из самых простых методик создания гармоничной палитры, а именно — круг Иттена. Принцип его построения представлен в Приложении 1.
Принцип работы с цветом по кругу Иттена заключается в подборе 2-4 цветов через принципы цветовых гармоний, для которых выбирается оптимальная яркость, контрастность и площадь заполнения.
Отдельно стоит отметить ахроматические цвета. Наличие чистого белого или чистого чёрного в цветовом решении основных шести гармоний усиливает контраст, соответственно, интерфейс будет очень «живым», если не переборщить с площадью покрытия цветов. В противном случае, чрезмерная активность цвета будет вызывать раздражение.
Анимация
При ограничениях минимализма на помощь дизайнерам пришла анимация. Она помогает расставить акценты, объяснить назначение элементов интерфейса, дополнить содержание. Распространенный прием — использование анимации при наведении или клике на объект. Цель — повысить отзывчивость сайта. Анимация создает дополнительную информацию в тот момент, когда она нужна.
Интуитивность
Как уже говорилось выше, одним из требований к современному программному обеспечению является высокая эргономичность. Для обеспечения соответствия данному требованию необходимо создавать интуитивно понятный графический пользовательский интерфейс, который требует от пользователя минимальных временных и умственных затрат для получения им необходимых ресурсов.
Иерархичность
Одним из свойств структуры интерфейса, определяющим его интуитивность, является иерархичность. Данное свойство заключается в ранжировании целей, определении приоритетов и наличие подчинительных связей. Этот принцип предусматривает неравенство составляющих систему частей, но именно его реализация обеспечивает эффективность жизнедеятельности системы в целом [9]. В ней упрощается принятие решений и их целенаправленное выполнение, экономится время и повышается качество.
Привычная структура
В процессе выхода программных продуктов формировались определенные каноны расположения элементов графического пользовательского интерфейса. При сравнении различного программного обеспечения можно заметить аналогичную для всех продуктов (приложений, сайтов) структуру. Такой подход к созданию графического пользовательского интерфейса значительно повышает эргономичность программного обеспечения. Одним из наиболее ярких примеров неудачных экспериментов со структурой интерфейса является отсутствие кнопки «Пуск» в операционной системе Windows 8.
Использование аналогий
При разработке дизайна элементов для повышения эргономичности программного продукта следует опираться на простые аналогии, подсказывающие функциональную возможность данного элемента. Таким образом, пользователю не потребуется лишних умственных и временных затрат для получения доступа к необходимым ресурсам. Примеры удачного использования аналогий представлены на рисунке.
Адаптивность
Адаптивность — системное свойство, которое заключается в способности системы приспосабливаться к изменившимся условиям. Значимость данного свойства растет ввиду обилия устройств, предназначенных для работы с программными продуктами. Зачастую требуется возможность не только доступа, но и комфортной работы с одним и тем же продуктом с различных устройств (смартфон, планшет, ПК) [7].
Адаптивность верстки
Данное свойство подразумевает способность интерфейса программного обеспечения подстраиваться под тип и характеристики различных устройств. В качестве примера на рисунке представлен адаптивный сайт.
Адаптивность контента
В данном разделе речь идёт о гибкости контента программного обеспечения. Это продукты, предоставляющие пользователю возможность выбрать те разделы (функциональные модули), которые необходимо отображать, а остальные оставить скрытыми. Ярким примером таких продуктов являются среды разработки программного обеспечения.
Анализ пользовательского графического интерфейса на примере продуктов семейства Windows
Для выявления целесообразности использования вышеперечисленных тенденций дизайна пользовательского графического интерфейса была сформирована сравнительная характеристика последних версий операционной системы Windows.
Оценка выбранных продуктов определялась по шкале от 1 до 5 посредством анализа [14,15] отзывов целевой аудитории, в том числе учитывался личный опыт работы. Результаты проведенного анализа представлены в таблице. Для наглядности в Приложении 2 представлены скриншоты интерфейсов рассматриваемых операционных систем.
Критерий оценки | Windows 7 | Windows 8 | Windows 8.1 | Windows 10 | Комментарии |
Логическая структура | 5 | 3 | 4 | 5 | Windows 8 и Windows 8.1 на старторой странице поиска предоставляют не наиболее используемые программы. В Windows 8 отсутствует кнопка «Пуск». |
Дизайн элементов | 4 | 5 | 5 | 5 | На первом плане содержание ресурса. Дизайн не перегружен. |
Колористика | 4 | 5 | 5 | 5 | Гармоничная цветовая схема. |
Анимация | 5 | 5 | 5 | 5 | При выполнении действий пользователем интерфейс реагирует при наведении курсора и клике на объект. |
Иерархичность | 5 | 4 | 4 | 5 | В Windows 8 и Windows 8.1 преимущественно плиточная структура интерфейса, не тривиальное меню встроенных приложений. |
Привычная структура | 5 | 3 | 4 | 5 | В Windows 8 и Windows 8.1 изменился вид интерфейса стартовой страницы, исчезло привычное меню встроенных приложений. В Windows 8 пропала кнопка «Пуск». |
Использование аналогий | 5 | 5 | 5 | 5 | Дизайн эелементов разработан на основе функционального назначения ресурса. |
Адаптивность верстки | 2 | 3 | 4 | 5 | Windows 7 стабильно работаем исключительно на ПК, Windows 8 удобна в использовании на планшете, но не удобна при работе без touchscreen, Windows 8.1 также преимущественно удобна для использования на планшете, но появилась кнопка «Пуск», Windows 10 разработан с учетом особенности использования как планшета, так и ПК. |
Адаптивность контента | 5 | 4 | 4 | 5 | В Windows 8 и Windows 8.1 используется панель Charms, которая неудобна при работе без сенсорного дисплея, а также предоставляет минимальный набор функциональных возможностей. |
Экономическая состоятельность продуктов линейки Windows
С целью определения экономической состоятельности выбранных для анализа продуктов была взята статистика использования операционных систем семейства Windows на январь 2015 года. Из представленного ниже графика можно сделать вывод о значительном преимуществе операционной системы Windows 7 по сравнению с Windows 8 и Windows 8.1.
Результаты исследования
В ходе исследования была проанализирована история возникновения понятия «пользовательский интерфейс», проанализирована история его развития и выявлены предпосылки к модернизации ряда сформировавшихся канонов разработки дизайна пользовательского графического интерфейса.
На основании полученных данных был выделен ряд современных тенденций разработки дизайна пользовательского графического интерфейса. Для определения состоятельности выбранных тенденций был проведен анализ линейки продуктов Windows с точки зрения соответствия их дизайна заявленным канонам. Результаты анализа с комментариями представлены в Таблица 1. Сравнительная характеристика последних версий ОС Windows.
В результате проведения соответствия между полученными данными, отзывами целевой аудитории, а также положением на рынке был сделан вывод о состоятельности всех заявленных канонов разработки пользовательского графического интерфейса.
Также, был проанализирован ряд библиотек, предназначенных для разработки пользовательского графического интерфейса в разрезе соответствия выявленным канонам. В ходе исследования было установлено, что перечисленные тенденции в большинстве своём реализованы в концепции дизайн-системы Material Design.
Принцип построения круга Иттена
На рисунке представлено 12 цветов. Эти цвета считаются наиболее привычными и лёгкими для восприятия человеком.
Существует 6 цветовых моделей для построения наиболее удачных палитр. Их описания и демонстрация представлены в таблице.
Название | Описание | Демонстрация |
Монохромные цвета | За основу берётся один цвет и разная его насыщенность и прозрачность. Монохромные сочетания весьма просты в использовании и довольно мягкие на восприятие. Но им часто не хватает выразительности. | рис. 8 |
Близкие цвета | Цвета, которые находятся рядом на цветовом круге. Эти цвета обладают схожими характеристиками световых волн, поэтому сочетаются очень просто. | рис. 9 |
Комплементарные цвета | Цвета, расположенные строго друг напротив друга. Они дают самый большой контраст. | рис. 10 |
Близкие и комплементарный цвета | Выбираются цвета, расположенные строго друг напротив друга. Для одного из этих цветов определяются соседи справа и слева соответственно. Совокупность одного цвета и соседей второго — искомая комбинация. | рис. 11 |
Сдвоенные комплементарные цвета | Выбирается один цвет, для которого определяются соседи справа и слева. Для каждого из соседей выбирается комплементарный цвет. Совокупность полученных 4 цветов — искомая комбинация. | рис. 12 |
Триадные цвета | Расположены через три сектора. Обычно, контрастные цвета сложно сочетаются, но в чистом виде, сморятся весьма эффектно в кардинально разных пропорциях. | рис. 13 |
Скриншоты пользовательского интерфейса операционных систем Windows 7, Windows 8, Windows 8.1, Windows 10.
Список библиотек Material Design
Material Design — дизайн-система, которая позволяет создавать консистентный пользовательский опыт на всех экранах: десктоп, смартфон, планшеты, часы, телевизоры, машины. Принципам данной системы соответствуют следующие фреймворки:
- Angular Material;
- Materialize;
- Material UI;
- MUI CSS Framework;
- Polymer;
- The Verdict.