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

NovaInfo 42, с.6-22, скачать PDF
Опубликовано
Раздел: Технические науки
Язык: Русский
Просмотров за месяц: 10
CC BY-NC

Аннотация

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

Ключевые слова

ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС, АДАПТИВНОСТЬ, МИНИМАЛИЗМ, СОВРЕМЕННЫЕ ТЕНДЕНЦИИ, MATERIAL DESIGN, ЛОГИЧЕСКАЯ СТРУКТУРА, ИЕРАРХИЧНОСТЬ, ИНТУИТИВНОСТЬ

Текст научной работы

Введение

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

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

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

Современные тенденции

Активное развитие графического интерфейса началось в 1970-х годах, благодаря разработкам компании Xerox. В частности, речь идет о продукте SmallTalk. Данный продукт был задуман как язык программирования и среда проектирования программ и обладал собственным пользовательским интерфейсом. Именно эта среда ввела многие современные понятия и каноны графического пользовательского интерфейса.

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

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

  • Минимализм;
  • Интуитивность;
  • Адаптивность.

Минимализм

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

Понятие «минимализм» в разработке дизайна графического интерфейса в рамках данной статьи рассматривается со следующих позиций:

  • Логическая структура;
  • Дизайн элементов;
  • Колористика;
  • Анимация.

Логическая структура

Минимализм затрагивает такие критерии, как эргономика, то есть использование меньшего для создания нужной композиции. Другими словами, это правильное и простое использование только нужного — убирая всё лишнее (или не внося его вовсе) [8]. Таким образом появляется свободное пространство. Правильная постановка свободного пространства в работе и даёт эргономичность, не отвлекает и концентрирует на нужном.

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

Пример разметки графического интерфейса
Рисунок 1. Пример разметки графического интерфейса

Дизайн элементов

Архитектор Людвиг Миса Ван дер Роэ обозначил минималистскую эстетику фразой «Меньше — значит больше» [2]. Цель минимализма — преподнести наиболее важным содержание ресурса на первый план, и свести к минимуму отвлекающие факторы для пользователя. Так, на рисунке представлены примеры использования минимализма в разработке дизайна элементов.

Примеры использования минимализма
Рисунок 2. Примеры использования минимализма

Колористика

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

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

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

Анимация

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

Интуитивность

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

Иерархичность

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

Пример иерархичности графического интерфейса
Рисунок 3. Пример иерархичности графического интерфейса

Привычная структура

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

Использование аналогий

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

Пример использования аналогий
Рисунок 4. Пример использования аналогий

Адаптивность

Адаптивность — системное свойство, которое заключается в способности системы приспосабливаться к изменившимся условиям. Значимость данного свойства растет ввиду обилия устройств, предназначенных для работы с программными продуктами. Зачастую требуется возможность не только доступа, но и комфортной работы с одним и тем же продуктом с различных устройств (смартфон, планшет, ПК) [7].

Адаптивность верстки

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

Пример адаптивного сайта
Рисунок 5. Пример адаптивного сайта

Адаптивность контента

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

Анализ пользовательского графического интерфейса на примере продуктов семейства Windows

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

Оценка выбранных продуктов определялась по шкале от 1 до 5 посредством анализа [14,15] отзывов целевой аудитории, в том числе учитывался личный опыт работы. Результаты проведенного анализа представлены в таблице. Для наглядности в Приложении 2 представлены скриншоты интерфейсов рассматриваемых операционных систем.

Таблица 1. Сравнительная характеристика последних версий ОС Window

Критерий оценки

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
Рисунок 6. Сравнительная характеристика использования ОС Window

Результаты исследования

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

На основании полученных данных был выделен ряд современных тенденций разработки дизайна пользовательского графического интерфейса. Для определения состоятельности выбранных тенденций был проведен анализ линейки продуктов Windows с точки зрения соответствия их дизайна заявленным канонам. Результаты анализа с комментариями представлены в Таблица 1. Сравнительная характеристика последних версий ОС Windows.

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

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

Принцип построения круга Иттена

На рисунке представлено 12 цветов. Эти цвета считаются наиболее привычными и лёгкими для восприятия человеком.

Круг Иттена
Рисунок 7. Круг Иттена

Существует 6 цветовых моделей для построения наиболее удачных палитр. Их описания и демонстрация представлены в таблице.

Название

Описание

Демонстрация

Монохромные цвета

За основу берётся один цвет и разная его насыщенность и прозрачность. Монохромные сочетания весьма просты в использовании и довольно мягкие на восприятие. Но им часто не хватает выразительности.

рис. 8

Близкие цвета

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

рис. 9

Комплементарные цвета

Цвета, расположенные строго друг напротив друга. Они дают самый большой контраст.

рис. 10

Близкие и комплементарный цвета

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

рис. 11

Сдвоенные комплементарные цвета

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

рис. 12

Триадные цвета

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

рис. 13
Монохромные цвета
Рисунок 8. Монохромные цвета
Близкие цвета
Рисунок 9. Близкие цвета
Комплементарные цвета
Рисунок 10. Комплементарные цвета
Близкие и комплементарные цвета
Рисунок 11. Близкие и комплементарные цвета
Сдвоенные комплементарные цвета
Рисунок 12. Сдвоенные комплементарные цвета
Триадные цвета
Рисунок 13. Триадные цвета

Скриншоты пользовательского интерфейса операционных систем Windows 7, Windows 8, Windows 8.1, Windows 10.

Пользовательский интерфейс ОС Windows 7
Рисунок 14. Пользовательский интерфейс ОС Windows 7
Пользовательский интерфейс ОС Windows 8
Рисунок 15. Пользовательский интерфейс ОС Windows 8
Пользовательский интерфейс ОС Windows 8.1
Рисунок 16. Пользовательский интерфейс ОС Windows 8.1
Пользовательский интерфейс ОС Windows 10
Рисунок 17. Пользовательский интерфейс ОС Windows 10

Список библиотек Material Design

Material Design — дизайн-система, которая позволяет создавать консистентный пользовательский опыт на всех экранах: десктоп, смартфон, планшеты, часы, телевизоры, машины. Принципам данной системы соответствуют следующие фреймворки:

  • Angular Material;
  • Materialize;
  • Material UI;
  • MUI CSS Framework;
  • Polymer;
  • The Verdict.

Читайте также

Список литературы

  1. Аналитический портал рынка веб-разработок CMS Magazine: http://www.cmsmagazine.ru/library/items/usability/principles-of-user-interface-design/
  2. Википедия. [Электронный ресурс] URL: https://ru.wikipedia.org/wiki/Мис_ван_дер_Роэ,_Людвиг
  3. Википедия, [Электронный ресурс] URL: https://ru.wikipedia.org/wiki/Интерфейс_пользователя
  4. Горелов Н.А., Кораблева О.Н., Синов В.В., Литун В.В. Методологический аспект исследования экономической системы в контексте формирования новой индустриализации России/Экономическое возрождение России. 2015. № 2 (44). С. 69-73.
  5. Дженифер Тидвелл «Разработка пользовательских интерфейсов», 2008г.
  6. Иоханнес Иттен «Искусство цвета», 2007г.
  7. Кораблева О.Н., Гусева М.И. Сетевой капитал банка как инструмент развития инвестиций в новые рынки и технологии. В сборнике: Технологическая перспектива в рамках евразийского пространства: новые рынки и точки экономического роста 1-я Международная научная конференция: материалы конференции. 2015. С. 149-152.
  8. Кораблева О.Н., Гусева М.И. Инновации как основа развития отношений «Банк-предприятие»: мировой опыт и российская практика. В сборнике: Архитектура финансов: стратегия взаимодействия финансового и реального секторов экономики материалы V Международной научно-практической конференции. Под научной редакцией И.А. Максимцева, А.Е. Карлика, В.Г. Шубаевой. 2014. С. 31-34.
  9. Литун В.В., Кораблева О.Н. Формирование спроса на инновации в транзитивных экономиках. В сборнике: Технологическая перспектива в рамках евразийского пространства: новые рынки и точки экономического роста 1-я Международная научная конференция: материалы конференции. 2015. С. 24-27.
  10. Основы наукоемкой экономики (знание, креативность, инновации). Максимцев И.А., Горелов Н.А., Мельников О.Н., Литун О.Н., Абрамов Е.Г., Лебедев Е.А., Моисеенко С.С., Синов В.В., Курочкина А.Ю. Учебное пособие для студентов вузов / Министерство образования и науки Российской Федерации; Санкт-Петербургский государственный университет экономики и финансов. Санкт-Петербург; Москва, 2011. (2-е издание, исправленное и дополненное)
  11. Рекламное агентство PIX MEDIA: http://pixmedia.ru/dizayn-interfeysov-razrabotka-i-dizayn-polzovatelskogo-interfeysa
  12. Роберт Дж. Торрес «Практическое руководство по проектированию и разработке пользовательского интерфейса», 2002г.
  13. Тео Мандел «Разработка пользовательского интерфейса», 2006г.
  14. Korableva O., Kalimullina O. Improving of the decision-making methodology on the basis of an advanced approach "BSC+SWOT+ANP" in banking. Proceedings of the 4th International Conference on Economics, Political and Law Science (EPLS '15). "Business and Economics Series" Jiri Strouhal, Editor. 2015. С. 28-37.
  15. Korableva O.N., Kalimullina O.V. The Formation of a single legal space as a prerequisite for overcoming systemic risk. Asian Social Science. 2014. Т. 10. № 21. С. 256-260.

Цитировать

Калимуллина, О.В. Правила разработки пользовательского графического интерфейса в сфере информационных технологий / О.В. Калимуллина, Е.С. Курбанова. — Текст : электронный // NovaInfo, 2016. — № 42. — С. 6-22. — URL: https://novainfo.ru/article/4645 (дата обращения: 26.11.2022).

Поделиться