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

Размещено на http://www.allbest.ru/

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

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

Калимуллина Ольга Валерьевна,

кандидат наук, ассистент

Курбанова Екатерина Сергеевна,

системный инженер

Аннотация

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

Введение

Информационные технологии с каждым годом занимают все более значимое место в жизни современного человека [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

Сравнительная характеристика последних версий ОС Windows

Экономическая состоятельность продуктов линейки Windows

С целью определения экономической состоятельности выбранных для анализа продуктов была взята статистика использования операционных систем семейства Windows на январь 2015 года. Из представленного ниже графика можно сделать вывод о значительном преимуществе операционной системы Windows 7 по сравнению с Windows 8 и Windows 8.1.

Рисунок 6 Сравнительная характеристика использования ОС Windows

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

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

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

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

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

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

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

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

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

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

Рисунок 14 Пользовательский интерфейс ОС Windows 7

Рисунок 15 Пользовательский интерфейс ОС Windows 8

Рисунок 16 Пользовательский интерфейс ОС Windows 8.1

Рисунок 17 Пользовательский интерфейс ОС Windows 10

Приложение 3. Список библиотек 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.

Размещено на Allbest.ru