Особенности проектирования визуального интерфейса для web-сайта "БГТУ-Абитуриент" Текст научной статьи по специальности «СМИ (медиа) и массовые коммуникации»

УДК004.55 DOI:

В.А. Шкаберин,А.Г. Подвесовский, А.А. Азарченков, Д.А. Коростелев, А.О. Трубаков

ОСОБЕННОСТИ ПРОЕКТИРОВАНИЯ ВИЗУАЛЬНОГО ИНТЕРФЕЙСА ДЛЯ ВЕБ-САЙТА «БГТУ - АБИТУРИЕНТ»

Сформированы и обоснованы требования к визуальному интерфейсу информационного проблемно-ориентированного веб-сайта «БГТУ -Абитуриент». Рассмотрены решения, которые бы-

ли положены в основу разработки сайта с целью обеспечения указанных требований.

Ключевые слова: приемная комиссия, абитуриент, веб-сайт, визуальный интерфейс, цветовая гамма, макетирование.

V. A. Shkaberin, A. G. Podvesovsky, A. A. Azarchenkov, D. A. Korostelev, A. O. Trubakov

FEATURES OF DESIGN OF THE VISUAL INTERFACE FOR THE WEBSITE "BGTU-ENTRANT"

Support of efficiency and high quality of a set of entrants is among the priority tasks facing the Bryansk state technical university. In the modern conditions one of the main sources of information on higher education institution for entrants is the official web site of higher education institution. The qualitative website having the modern interface providing a possibility of comfortable viewing from any, including mobile devices, containing exhaustive information and realizing the thought-over system of navigation according to documents will promote increase in interest in higher education institution from potential entrants and, as a result, to increase in efficiency and quality of a set. In article requirements to the visual interface of the web site

Введение

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

Таким образом, одна из важных задач в процессе разработки сайта «БГТУ -Абитуриент» была связана с проектирова-

"BGTU — the Entrant" are created and decisions which were the basis for development of the website for the purpose of support of the specified requirements are described. Features of color design of the interface which main objective is creation of such color gamma which, on the one hand, shall attract users are considered, and on the other hand - to be memorable. Detailed reasons for approaches to bread boarding of the pages of the website considering features of submission of information connected to operation of selection committee are also given.

Key words: selection committee, entrant, web site, visual interface, color gamma, bread boarding.

нием и реализацией его визуального интерфейса.

Для проектирования интерфейса сайта были сформулированы основные требования к сайту с точки зрения абитуриента. К этим требованиям были отнесены:

• наличие хорошо запоминающейся цветовой гаммы, позволяющей выделить сайт среди сайтов аналогичного назначения других вузов;

• поддержка удобной и эффективной навигации по элементам меню;

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

• наличие новостной ленты, а также представление информации о прошедших событиях;

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

Определение цветового оформления инт

Задача создания уникального цветового оформления сайта решалась путем подбора такой цветовой гаммы, которая, с одной стороны, должна привлекать пользователей, а с другой стороны - быть запоминающейся [3; 4]. Анализ большого количества сайтов схожего назначения показал, что большинство из них построены в мягких сине-голубых тонах. Это связано с тем, что синий цвет является олицетворением спокойствия, мира, свежести, верности [5; 6]. Кроме того, данное оформление хорошо подходит для сайтов, которые предоставляют большой объем часто обновляемой информации.

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

В связи с этим было принято решение использовать в качестве основного цвета сайта сложное смешение цветов на основе зеленого цвета, ориентируясь на следующие закономерности, определенные эмпирическим путем [5; 7]:

Зеленый цвет олицетворяет жизненную силу, стойкость, уверенность, настойчивость.

• Зелено-синий цвет в зависимости от оттенка зеленого дает разное восприятие. Так, светлый зелено-синий цвет приглушает жизненную силу, которую несет в себе как сам зеленый цвет, так и зеленый в сочетании с синим. В то же время темный зелено-синий цвет несет в себе гордость, самоутверждение и напряженность.

• Сине-зеленый цвет, являясь самым холодным в цветовой палитре, придает восприятию свежесть.

• Желто-зеленый цвет придает сайту деловую направленность, поскольку желтый цвет вносит жизненность и побуждение к действию в «гордый» зеленый. Именно поэтому такое сочетание побуждает к общению и делает человека более открытым.

При разработке палитры использовались рекомендации брендбука Windows [8].

С точки зрения разработчиков, данное цветовое решение является уникальным, легко запоминается и не создает впечатление, что потенциальный абитуриент уже проанализировал нужную информацию, имеющуюся на сайте. Исходя из этого, можно сделать вывод, что при необходимости потенциальный абитуриент среди всего многообразия сайтов сможет достаточно легко и быстро выделить именно сайт «БГТУ - Абитуриент».

Макетирование визуального интерфейса

Рассмотрим решения, положенные в основу разработки макетов страниц сайта.

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

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

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

Для обеспечения удобной навигации было принято решение использовать верх-

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

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

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

Макет главной страницы, соответствующий описанию, приведенному выше, показан на рис. 1.

Шапка сайта

Главное меню

Баннер

Важные ссылки

Новостной блок

Конта ктные данные

Yandex - карта

Блок освещения прошедших событий

Подвал сайта

логотип

Рис. 1. Макет сайта «БГТУ - Абитуриент»

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

жет представлять интерес для абитуриентов.

На рис. 2 показана верхняя часть главной (стартовой) страницы сайта, соответствующая макету, приведенному на рис. 1. Здесь показаны шапка сайта, главное горизонтальное меню, а также баннер и блок дополнительного меню.

Абитуриенту

ФГБОУ ВО «Брянский государственный технический университет»

241035. Брянск, ул. Харьковская Д.10Б. уиебнь

ООО

Версия для слабовидящих

Приемная комиссия Набор 2017 Специальности и направления подготовки Документы и справки Студенческая жизнь Для иностранных граждан Для людей с ограниченными возможностями

Подготовительные курсы

Списки поступающих Календарь событий Приказы о зачислении

Правила приема

Рис. 2. Верхняя часть главной страницы сайта «БГТУ - Абитуриент»

Новостной блок и часть карты представлены на рис. 3. Новости

Всероссийская физико-техническая контрольная

Приглашаем Вас принять участие во

■Всероссийской технической «Выходи решать!», пройдет на Яндекс.Контест.

физико-контрольной Контрольная платформе при этом

написать ее можно будет как

XXXIII Международная научно-практическая

рж^ЯВД] Приглашаем Вас 1—1 ЛЫ принять участие в международной научно-

практической конференции

ученых, аспирантов, студентов и практиков: «Перспективы

развития информационных технологий».

Приемная комиссия БГТУ

Режим работы приемной комиссии во время приема заявлений

Понедельник - пятница 10:00-18:00 обед 13:00-14:00 Суббота 9:00-14:00

Адрес

241035, Брянск, ул. Харьковская, д.1 ОБ. учебный корпус № 4, 2-й этаж, ауд. Б201

¥ ¥

ПОДГОТОВИТЕЛЬНЫЕ КУРСЫ

Организуются платные 6-ти месячные курсы (начало занятий с 1 декабря) для подготовки к ЕГЭ, к вступительным испытаниям. Занятия будут проводиться по каждому предмету 1 раз в неделю с 16:50.

/ ' ♦ . Учебный корпус № 1

Всероссийский конкурс 2016-2017 года на лучшую

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

В

$

Сбербанк

Административный корпус № 3

Технический университет

Сл)

Рис. 3. Отображение на главной странице сайта новостного блока и карты

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

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

События

Студенты БГТУ приняли участие в открытом

Делегация БГТУ в очередной раз

«приняла участие в открытом студенческом международном фестивале «Палитра творчества», который ежегодно проводит Белорусско-Российский университет в г. Могилёв (Республика Беларусь). Вот уже

5 декабря 2016 г. делегация БГТУ приняла участие в

Делегация БГТУ приняла участие в научно-практической

конференции «Семья как национальное достояние

Российской Федерации», которая состоялась 5 декабря 2016 г. в Брянском филиале РАНХиГС.

Экскурсионная поездка в Москву для победителей

3 декабря 2016 года состоялась экскурсионная поездка в Москву для победителей "Первокурсник шоу БГТУ 2016" и "Веревочный курс 2016". В ходе поездки была обзорная экскурсия по Москве, посещение Оружейной палаты. Красной площади, храма Христа

5 декабря 2016 г.-Международный день

Приемная комиссия:

обед 13:00-14:00 СБ 9:00-14:00

+7(4832) 51-03-57 +7(4832) 58-82-64

241035, Брянск, ул. Харьковская, д.1 ОБ, учебный корпус N° 4,2-й этаж, ауд. Б201

Специальности и

направления

подготовки

Для иностранных граждан

Документы и справки

Для людей с

ограниченными

возможностями

й университет - абитуриенту. Все права защищены. 241035, г.Брянск, бул. 50-л

Абитуриенту

ФГБОУ ВО

«Брянский государственный технический университет»

ООО

Рис. 4. Нижняя часть (подвал) сайта «БГТУ - Абитуриент»

В отличие от главной страницы все остальные страницы веб-сайта «БГТУ -Абитуриент» имеют четкое информаци-

онное назначение, поэтому для них разработан типовой макет (рис. 5).

логотип Шапка сайта

Главное меню

Боковое меню

Отзывы выпускников

Блок освещения прошедших событий

Подвал сайта

Рис. 5. Макет типовой информационной страницы сайта «БГТУ - Абитуриент»

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

должна положительно повлиять на выбор абитуриентов.

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

Jpi^ Абитуриенту <§ ФГБОУ ВО «Брянский государственный | ■ технический университет» , +7 (4232) rfS^ ) 51-03-57 [Нj 241035, Бря иск, ул. I корпус N« 4,2-й эта Харьковская, д.ЮБ, ж, зуд. Б201 учебный /^T^l ПН-ПТ 114) 10:00-18:00

+7 (4832) 58-82-64 О О О обед 13:00-14:00 ^^^^^^^^^^ СБ 9:00-14:00 Версия для слабовидящих

Специальности и Приемная , „___„ Набор 2017 направления комиссия подготовки Документы и справки Студенческая жизнь Для людей с Для иностранных ограниченными граждан возможностями

Внутренние документы

Федеральные документы

Рытикова Юлия Владимировна, 15-У К(мг)

Говорят, что именно студенческие годы

увлекательным периодом жизни, Так и есть! Пять лет назад я и представить не могла, насколько изменится моя жизнь, Мне запомнятся безумные пеоиоды сессий. Я

Карманова Л ера, 4-ый курс

БГТУ - тот Университет, который

Правила приема на обучение по образовательным программам высшего образования - программам бакалавриата, программам специалитета, программам магистратуры вФГБОУ ВО "БГТУ" на 2017-2018 учебный год (864.3Kb)

Контрольные цифры приема на 2017-2018учебный год (94.22Kb)

Внутренние документы (2017 год)

Документы приемной комиссии

а а а

а а

¿017 ГОД PI

Информация о сроках проведения приема, в том чище о сроках начала и завершения приема документов, необходимых для поступления, проведения вступительных испытаний, завершения приема заявлений о согласии на зачисление на каждом этапе зачисления {312.36КЬ)

Информация о количестве мест для приема на первый курс на обучение по образовательным программам высшего образования по каждой совокупности условий поступления на 2017-2013 учебный год (560.37КЬ)

Перечень вступительных испытаний с указанием приоритетности вступительных испытаний при ранжировании списков поступающих по различным условиям поступления (502.17КЬ)

^ Минимальное количество баллов по различным условиям поступления (141.77КЬ)

Рис. 6. Пример страницы сайта с фильтрацией данных

Отдельного внимания заслуживает также типовая страница, содержащая список абитуриентов (рис. 7). На данной странице имеется фильтр, позволяющий выводить списки абитуриентов в соответствии с

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

пающих и оценить свои шансы на поступление в рамках соответствующей конкурс-

Абитуриенту © ЕН

ной группы.

2d1035, Брянск, ул. Харьковская, д.ЮБ. уиебнь корпус Ыв 4,2-й этзлс ауд. Б201

ФГБОУБО «Брянский государственный технический университет»

ООО

Версия для слабовидящих

Приемная Набор 2017 Специальности и направления Документы и Студенческая жизнь Для иностранных Для людей с ограниченными

комиссия справки граждан

подготовки возможностями

Политехнический колледж БГТУ

Правила приема

Календарный план

Перечень вступительных испытаний

Вступительные испытания, проводимые вузом

Списки абитуриентов

Списки поступающих

Все формы | Все квалификации -] | Бюджет/платно -| П Показывать только 1-ю специальность

□ Только оригиналы

Е:се направления/специальности

Списки обновлены: ¿016-08-25 18:51:11. Количество заявлений: 2544 (из них когий -1070}

Рис. 7. Страница «Списки

Заключение

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

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

абитуриентов» сайта

малым размером экрана. Также были отмечены проблемы с производительностью работы сайта на некоторых страницах. Указанные недостатки были оперативно исправлены.

Перспективой развития реализованного проекта по созданию сайта «БГТУ -Абитуриент» является использование наработок в области проектирования визуального интерфейса и макетов веб-страниц для подготовки новой версии головного веб-сайта (веб-портала) вуза.

СПИСОК ЛИТЕРАТУРЫ

1. Дмитриева, Н.В. Сайт вуза: инструменты привлечения абитуриентов / Н.В.Дмитриева // Вестник КемГУ. Серия «Политические, социологические и экономические науки». - 2016. -№ 1(1). - С. 46-50.

2. Барахнина, В.Б. Роль сайта вуза в привлечении профессионально ориентированных абитуриентов / В.Б.Барахнина, Р.В.Габдулхакова, Т.И.Габбасов // Учебный процесс в вузе в современных условиях: материалы II науч.-метод. конф. - Уфа: УГНТУ, 2013. - С. 53-55.

3. Сабанова, А.А. Веб-дизайн: психологическая экспертиза / А.А.Сабанова, Г.М.Шигабетдинова // Современные научные исследования и инновации. - 2016. - № 2. - С. 888-88. - URL: http ://web. snauka.ru/issues/2016/02/63345 (дата обращения: 27.11.2016).

4. Usability Guidelines for Accessible Web Design. -URL:

https ://media. nngroup.com/media/reports/free/Usab ility_Guidelines_for_Accessible_Web_Design.pdf (дата обращения: 24.09.2016).

5. Голомбински, К. Добавь воздуха! Основы визуального дизайна для графики, веба и мультимедиа / К.Голомбински, Р.Хаген. - СПб.: Питер, 2013. - 272 с.

6. Lynch, P.J. Web Style Guide. 4th Edition. Foundations of User Experience Design / Patrick J. Lynch, Sarah Horton. - Yale University Press, 2016. - 408 p.

7. Макнейл, П. Веб-дизайн. Книга идей веб-разработчика / П.Макнейл. - СПб.: Питер, 2014. - 288 с.

8. MicrosoftWindowsDevCenter. Design & UI. -URL: https://developer.microsoft.com/en-us/windows/apps/design.

1. Dmitriyev, N. V. Sayt of higher education institution: instruments of involvement of entrants/N. V. Dmitriyeva//Messenger of KEMGU. "Political, Sociological and Economic Sciences" series. - 2016. -No. 1(1). - Page 46-50.

2. Barakhnina, V. B. Rol of the website of higher education institution in involvement of professionally focused entrants / V. B. Barakhnina, R.V.Gabdulkhakov, T. I. Gabbasov//Educational process in higher education institution in modern conditions: materials II науч. - a method. конф. -Ufa: UGNTU, 2013. - Page 53-55.

3. Sabanova, A.A. Web-design: psychological examination / A. A. Sabanova, G. M. Shigabetdi-nov//Modern scientific research and innovations. -2016. - No. 2. - Page 888-88. - URL: http://web.snauka.ru/issues/2016/02/63345 (date of the address: 27.11.2016).

4. Usability Guidelines for Accessible Web Design. -URL:

https ://media. nngroup.com/media/reports/free/Usab ility_Guidelines_for_Accessible_Web_Design.pdf (date of the address: 24.09.2016).

5. Golombinski, K. Dobav of air! Bases of visual design for graphics, web and multimedia / K. Golombinski, R. Hagen. - SPb.: St. Petersburg,

2013. - 272 pages.

6. Lynch, P.J. Web Style Guide. 4th Edition. Foundations of User Experience Design/Patrick J. Lynch, Sarah Horton. - Yale University Press, 2016. - 408 p.

7. McNail, Item. Web-design. Book of the ideas of the web developer / P. McNail. - SPb.: St. Petersburg,

2014. - 288 pages.

8. MicrosoftWindowsDevCenter. Design & UI. -URL: https ://developer. microsoft.com/en-us/windows/apps/design.

Статья поступила в редколлегию 7.12.2016. Рецензент: д.псих.н., профессор Брянского государственного технического университета

Спасенников В.В.

Сведения об авторах:

Шкаберин Виталий Александрович, к.т.н., доцент, проректор по информатизации и общим вопросам Брянского государственного технического университета, тел.: +7 (4832) 51-51-23, e-mail: [email protected].

Подвесовский Александр Георгиевич, к.т.н., доцент, зав. кафедрой «Информатика и программное обеспечение» Брянского государственного технического университета, тел.: +7 (4832) 56-09-84, email: apodv@tu-brvansk. ru.

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

Shkaberin Vitaly Aleksandrovich, PhD in Technological Sciences, associate professor, vice rector for informatization and general questions of the Bryansk state technical university, ph.: +7 (4832) 51-51-23, email: [email protected].

Podvesovsky Alexander Georgiyevich, PhD in Technological Sciences, associate professor, department chair "Informatics and software" Bryansk state technical university, ph.: +7 (4832) 56-09-84, e-mail: [email protected].

Azarchenkov Andrey Anatolyevich, PhD in Technological Sciences, associate professor "Informatics and

университета, тел.: +7 (4832) 56-09-84, e-mail: [email protected].

Коростелев Дмитрий Александрович, к.т.н., доцент кафедры «Информатика и программное обеспечение» Брянского государственного технического университета, Тел.: +7 (4832) 56-09-84, Email: [email protected].

Трубаков Андрей Олегович, к.т.н., доцент кафедры «Информатика и программное обеспечение» Брянского государственного технического университета, тел.: +7 (4832) 56-09-84, e-mail: [email protected].

software" Bryansk state technical university, ph.: +7 (4832) 56-09-84, e-mail: [email protected]. Korostelev Dmitry Aleksandrovich, PhD in Technological Sciences, associate professor "Informatics and software" Bryansk state technical university, Ph.: +7 (4832) 56-09-84, E-mail: [email protected]. Trubakov Andrey Olegovich, PhD in Technological Sciences, associate professor "Informatics and software" Bryansk state technical university, ph.: +7 (4832) 56-09-84, e-mail: [email protected].