РЕДИЗАЙН САЙТА ИНСТИТУТА ДИСТАНЦИОННОГО ОБРАЗОВАНИЯ ТОМСКОГО ГОСУДАРСТВЕННОГО УНИВЕРСИТЕТА
|
Аннотация
Введение 6
1 Сайты образовательных организаций в информационном пространстве 10
1.1 Сайты образовательных организаций как «цифровое лицо» и объект оценки в
рейтингах 10
1.2 Требования к дизайну сайта образовательных организаций: обзор исследовательских
работ 12
1.3 Бэнчмаркинг: анализ UX/UI дизайна сайтов образовательных организаций 15
1.4 Требование заказчика на редизайн сайта ИДО ТГУ 25
1.5 Анализ дизайна текущего сайта ИДО ТГУ 28
1.5.1 Экспертная оценка 28
1.5.2 Анализ по Эвристикам юзабилити Я. Нильсена 32
2 Этапы реализации проекта сайта ИДО ТГУ 37
2.1 Команда, модель и инструменты реализации проекта 37
2.1.1 Команда проекта 37
2.1.2 Модель разработки проекта 38
2.1.3 Инструменты реализации проекта 39
2.2 Разработка информационной архитектуры и навигации 40
2.3 Создание пользовательских сценариев 47
2.4 Разработка UI кита сайта 50
2.5 Разработка высокодетализированных прототипов 60
2.6 Подготовка контента для сайта 68
2.7 Юзабилити-тестирование 70
2.8 Опыт руководства проектом 75
Заключение 77
Список использованных источников и литературы 79
Приложение А Результаты анализа 10 сайтов высших учебных заведений 87
Приложение Б Результаты эвристического анализа сайта ИДО ТГУ 89
Приложение В Вступительный текст перед юзабилити тестированием 93
Приложение Г Результаты юзабилити-тестирования 94
Введение 6
1 Сайты образовательных организаций в информационном пространстве 10
1.1 Сайты образовательных организаций как «цифровое лицо» и объект оценки в
рейтингах 10
1.2 Требования к дизайну сайта образовательных организаций: обзор исследовательских
работ 12
1.3 Бэнчмаркинг: анализ UX/UI дизайна сайтов образовательных организаций 15
1.4 Требование заказчика на редизайн сайта ИДО ТГУ 25
1.5 Анализ дизайна текущего сайта ИДО ТГУ 28
1.5.1 Экспертная оценка 28
1.5.2 Анализ по Эвристикам юзабилити Я. Нильсена 32
2 Этапы реализации проекта сайта ИДО ТГУ 37
2.1 Команда, модель и инструменты реализации проекта 37
2.1.1 Команда проекта 37
2.1.2 Модель разработки проекта 38
2.1.3 Инструменты реализации проекта 39
2.2 Разработка информационной архитектуры и навигации 40
2.3 Создание пользовательских сценариев 47
2.4 Разработка UI кита сайта 50
2.5 Разработка высокодетализированных прототипов 60
2.6 Подготовка контента для сайта 68
2.7 Юзабилити-тестирование 70
2.8 Опыт руководства проектом 75
Заключение 77
Список использованных источников и литературы 79
Приложение А Результаты анализа 10 сайтов высших учебных заведений 87
Приложение Б Результаты эвристического анализа сайта ИДО ТГУ 89
Приложение В Вступительный текст перед юзабилити тестированием 93
Приложение Г Результаты юзабилити-тестирования 94
Интернет и цифровое пространство стали равноценны и равноправны с физической реальностью. Представленность в Интернете является неотъемлемой частью работы любой организации или бизнеса, еще одним пространством для активных действий. Онлайн-среда используется для информирования о деятельности, выстраивания коммуникации с потенциальными клиентами, организации работы.
Качественный сайт является одним из конкурентных преимуществ любой организации, включая сферу образования. Формирование открытых и общедоступных информационных ресурсов образовательной организации началось с 2012 года [45]. Процесс активного, но неструктурированного развития системы сайтов образовательных организаций взяли под контроль с 2021 года: образовательные организации обязали иметь цифровое представительство [47]. В приказе Рособрнадзора приведен перечень требований, которым должен соответствовать официальный сайт по структуре и формату представления информации.
Эффективность представленности в Интернете становится предметом конкуренции в вузовской среде. Борьба за внимание аудитории заставляет университеты больше внимания уделять своему «цифровому лицу». Оценка их сайта в различных рейтинговых системах также добавляет необходимости фокусироваться на форме и содержании сайтов, приведении их в удобный для пользователя вид.
Однако сайт вуза - это не только главная страница, но и вся экосистема подсайтов. Пандемия SARS Covid-19 показала, что особое внимание следует уделить разделам, помогающим обеспечить работу вуза в дистанционном режиме: подсайты институтов дистанционного и дополнительного образования. По данным немецкой статистической компании Statista, объем рынка онлайн-образования в России имеет самый высокий показатель в области высшего образования. По оценкам, онлайн-курсы университетов приносят самый высокий доход среди других уровней цифрового образования в России - 15 миллиардов рублей в 2021 году (Рисунок 1). Кроме того, рыночная стоимость онлайн- сервисов среднего образования в том же году составила 10 миллиардов рублей. [86].Сегодня информационное пространство вуза должно соответствовать простым требованиям: понятный и полезный контент, навигация и интерактивность, современный UX/UI дизайн [55]. С течением времени разработанные решения для сайтов устаревают, что обусловливает необходимость периодического обновления сайта для комфортного его использования и привлечения новой целевой аудитории. В таком случае редизайн позволит не только создать или обновить индивидуальный образ образовательного учреждения и его подразделений, но и улучшить качество образовательного процесса, повысить место в рейтинге, увеличить конверсию и престиж вуза.
Все вышесказанное обуславливает актуальность настоящей работы.
Целью данной работы является редизайн сайта Института дистанционного образования Томского государственного университета.
Для достижения цели выпускной квалификационной работы необходимо последовательно решить следующие задачи.
1. Собрать и формализовать требования заказчика к разрабатываемому сайту.
2. Выявить особенности дизайна сайтов высших учебных заведений на основе сравнения аналогов.
3. Разработать типовые страницы и информационную архитектуру сайта.
4. Разработать UI кит проекта и высокодетализированные прототипы.
5. Составить тексты для UX элементов (кнопки, формы обратной связи, заголовки, подсказки и др.).
6. Провести юзабилити тестирование.
Объектом выпускной квалификационной работы является сайт образовательной организации высшего образования.
Предметом выпускной квалификационной работы является UX/UI-дизайн сайта Института дистанционного образования Томского государственного университета.
Теоретическую базу и методологическую основу исследования составляют работы отечественных и зарубежных исследователей в области образования, дизайна и дизайна интерфейсов: Гуреева А. В., Новоселова О. В, Аугамбаева Д. Д, Патрушева И. В., В. Н. Пугач, Волина В. Ю., Шевченко Д. А., Жаркова О. Р., Белая Т. И. и другие, в том числе и зарубежных исследователей: Р. Унгер, К. Чендлер, Я. Нильсен, Д. Норман, А. Купер и другие.
Теоретическая значимость. Результат проделанной работы может дополнить базу рекомендаций по разработке сайтов образовательных организаций.
Практическая значимость работы состоит в разработке UX/UI дизайна сайта образовательной организации на примере сайта Института дистанционного образования ТГУ и его.
В выпускной квалификационной работе применялись следующие методы: теоретическое исследование, интервью с заинтересованными лицами, бенчмаркинг, метод эвристической оценки Якоба Нильсена, методы проектирования в рамках подхода дизайн- мышления, наблюдение в рамках юзабилити-тестирования.
Структура работы: данная магистерская диссертация состоит из введения, двух глав, заключения, списка литературы и приложений.
В первой главе рассмотрены сайты образовательных организаций как «цифровое лицо» и объект оценки в рейтингах, требования к дизайну вузов в научном сообществе. Проведен анализ UX/UI дизайна 10 сайтов высших учебных заведений по разработанной автором критериальной матрице для оценки соответствия сайтов современным тенденциям, запросам аудитории и перспектив устойчивости их дизайна на несколько лет.
Также в главе описан заказчик сайта ИДО ТГУ и его требования на редизайн сайта, проведена экспертная оценка и анализ по эвристикам юзабилити Якоба Нильсена текущего сайта, по итогам которых были выделены основные проблемы и даны рекомендации по их устранению.
Во второй главе описана команда, модель и инструменты реализации проекта. Проанализирована текущая информационная архитектура сайта и представлена новая, определены и спроектированы основные пользовательские сценарии системы.
Также в рамках второй главы показаны результаты разработки UI кита проекта и высокодетализированных макетов сайта, описан ход работы с контентом и опыт руководства, продемонстрированы результаты юзабилити-тестирования.
В заключении изложены краткие результаты, ретроспектива и выводы о проведенной научно-исследовательской работе.
В качестве источников информации использовались учебная литература, научные статьи, статьи профессиональных сообществ. Список литературы представлен 89 источниками, в том числе исследованиями за последние 5-10 лет.
Приложение А содержит результаты бэнчмаркинга 10 сайтов высших вузов учебных заведений по разработанной автором критериальной матрице.
Приложение Б содержит результаты эвристического анализа старого сайта ИДО ТГУ.
В Приложении В представлен вступительный текст перед юзабилити- тестированием.
Приложение Г содержит результаты юзабилити-тестирования.
В ходе работы над данной диссертацией был подготовлен доклад и опубликованы тезисы на тему «Редизайн сайта Института дистанционного образования Томского государственного университета» для XXI международной конференции молодых ученых «Актуальные проблемы социальных наук» (22-23 апреля 2022 года в Томске, секция «Гуманитарная информатика: исследование информационного общества и социальных исследований информатизации»). Результаты исследовательской работы были также представлены на «Дне Digital Humanities», который состоялся 6 июня 2022 года в г. Томск.
Результатом работы стали последовавшая реализация сайта разработчиками диджитал-агентства «Паравеб» и внедрение в бизнес-процессы Института дистанционного образования ТГУ.
Качественный сайт является одним из конкурентных преимуществ любой организации, включая сферу образования. Формирование открытых и общедоступных информационных ресурсов образовательной организации началось с 2012 года [45]. Процесс активного, но неструктурированного развития системы сайтов образовательных организаций взяли под контроль с 2021 года: образовательные организации обязали иметь цифровое представительство [47]. В приказе Рособрнадзора приведен перечень требований, которым должен соответствовать официальный сайт по структуре и формату представления информации.
Эффективность представленности в Интернете становится предметом конкуренции в вузовской среде. Борьба за внимание аудитории заставляет университеты больше внимания уделять своему «цифровому лицу». Оценка их сайта в различных рейтинговых системах также добавляет необходимости фокусироваться на форме и содержании сайтов, приведении их в удобный для пользователя вид.
Однако сайт вуза - это не только главная страница, но и вся экосистема подсайтов. Пандемия SARS Covid-19 показала, что особое внимание следует уделить разделам, помогающим обеспечить работу вуза в дистанционном режиме: подсайты институтов дистанционного и дополнительного образования. По данным немецкой статистической компании Statista, объем рынка онлайн-образования в России имеет самый высокий показатель в области высшего образования. По оценкам, онлайн-курсы университетов приносят самый высокий доход среди других уровней цифрового образования в России - 15 миллиардов рублей в 2021 году (Рисунок 1). Кроме того, рыночная стоимость онлайн- сервисов среднего образования в том же году составила 10 миллиардов рублей. [86].Сегодня информационное пространство вуза должно соответствовать простым требованиям: понятный и полезный контент, навигация и интерактивность, современный UX/UI дизайн [55]. С течением времени разработанные решения для сайтов устаревают, что обусловливает необходимость периодического обновления сайта для комфортного его использования и привлечения новой целевой аудитории. В таком случае редизайн позволит не только создать или обновить индивидуальный образ образовательного учреждения и его подразделений, но и улучшить качество образовательного процесса, повысить место в рейтинге, увеличить конверсию и престиж вуза.
Все вышесказанное обуславливает актуальность настоящей работы.
Целью данной работы является редизайн сайта Института дистанционного образования Томского государственного университета.
Для достижения цели выпускной квалификационной работы необходимо последовательно решить следующие задачи.
1. Собрать и формализовать требования заказчика к разрабатываемому сайту.
2. Выявить особенности дизайна сайтов высших учебных заведений на основе сравнения аналогов.
3. Разработать типовые страницы и информационную архитектуру сайта.
4. Разработать UI кит проекта и высокодетализированные прототипы.
5. Составить тексты для UX элементов (кнопки, формы обратной связи, заголовки, подсказки и др.).
6. Провести юзабилити тестирование.
Объектом выпускной квалификационной работы является сайт образовательной организации высшего образования.
Предметом выпускной квалификационной работы является UX/UI-дизайн сайта Института дистанционного образования Томского государственного университета.
Теоретическую базу и методологическую основу исследования составляют работы отечественных и зарубежных исследователей в области образования, дизайна и дизайна интерфейсов: Гуреева А. В., Новоселова О. В, Аугамбаева Д. Д, Патрушева И. В., В. Н. Пугач, Волина В. Ю., Шевченко Д. А., Жаркова О. Р., Белая Т. И. и другие, в том числе и зарубежных исследователей: Р. Унгер, К. Чендлер, Я. Нильсен, Д. Норман, А. Купер и другие.
Теоретическая значимость. Результат проделанной работы может дополнить базу рекомендаций по разработке сайтов образовательных организаций.
Практическая значимость работы состоит в разработке UX/UI дизайна сайта образовательной организации на примере сайта Института дистанционного образования ТГУ и его.
В выпускной квалификационной работе применялись следующие методы: теоретическое исследование, интервью с заинтересованными лицами, бенчмаркинг, метод эвристической оценки Якоба Нильсена, методы проектирования в рамках подхода дизайн- мышления, наблюдение в рамках юзабилити-тестирования.
Структура работы: данная магистерская диссертация состоит из введения, двух глав, заключения, списка литературы и приложений.
В первой главе рассмотрены сайты образовательных организаций как «цифровое лицо» и объект оценки в рейтингах, требования к дизайну вузов в научном сообществе. Проведен анализ UX/UI дизайна 10 сайтов высших учебных заведений по разработанной автором критериальной матрице для оценки соответствия сайтов современным тенденциям, запросам аудитории и перспектив устойчивости их дизайна на несколько лет.
Также в главе описан заказчик сайта ИДО ТГУ и его требования на редизайн сайта, проведена экспертная оценка и анализ по эвристикам юзабилити Якоба Нильсена текущего сайта, по итогам которых были выделены основные проблемы и даны рекомендации по их устранению.
Во второй главе описана команда, модель и инструменты реализации проекта. Проанализирована текущая информационная архитектура сайта и представлена новая, определены и спроектированы основные пользовательские сценарии системы.
Также в рамках второй главы показаны результаты разработки UI кита проекта и высокодетализированных макетов сайта, описан ход работы с контентом и опыт руководства, продемонстрированы результаты юзабилити-тестирования.
В заключении изложены краткие результаты, ретроспектива и выводы о проведенной научно-исследовательской работе.
В качестве источников информации использовались учебная литература, научные статьи, статьи профессиональных сообществ. Список литературы представлен 89 источниками, в том числе исследованиями за последние 5-10 лет.
Приложение А содержит результаты бэнчмаркинга 10 сайтов высших вузов учебных заведений по разработанной автором критериальной матрице.
Приложение Б содержит результаты эвристического анализа старого сайта ИДО ТГУ.
В Приложении В представлен вступительный текст перед юзабилити- тестированием.
Приложение Г содержит результаты юзабилити-тестирования.
В ходе работы над данной диссертацией был подготовлен доклад и опубликованы тезисы на тему «Редизайн сайта Института дистанционного образования Томского государственного университета» для XXI международной конференции молодых ученых «Актуальные проблемы социальных наук» (22-23 апреля 2022 года в Томске, секция «Гуманитарная информатика: исследование информационного общества и социальных исследований информатизации»). Результаты исследовательской работы были также представлены на «Дне Digital Humanities», который состоялся 6 июня 2022 года в г. Томск.
Результатом работы стали последовавшая реализация сайта разработчиками диджитал-агентства «Паравеб» и внедрение в бизнес-процессы Института дистанционного образования ТГУ.
В результате проделанной работы был разработан новый UX/UI дизайн сайта Института дистанционного образования ТГУ. Работа была выполнена по заказу Института дистанционного образования Томского государственного университета. Вся разработка велась под контролем автора работы в качестве менеджера.
В ходе работы были выполнены следующие задачи:
1. По дизайну и анализу:
• составлена критериальная матрица по 6 критериям для оценки соответствия сайтов современным тенденциям, запросам аудитории и перспектив устойчивости их дизайна на несколько лет;
• проведен бэнчмаркинг UX/UI 10 сайтов высших учебных заведений, входящих в один из крупнейших рейтингов России «RAEX ТОП-100»;
• было выделено 2 пользовательских сценария и улучшена имеющаяся структура сайта совместно с заказчиком - добавлены новые, объединены и убраны неактуальные разделы, проведено разделение на категории, ориентированные на целевую аудиторию сайта;
• разработан UI kit проекта;
• выделено 14 уникальных страниц и разработан для них UX/UI дизайн (6 страниц автором работы), на основе которых собран весь сайт в размере более 100 страниц.
• проведено юзабилити тестирование на 6 респондентах.
2. По менеджменту:
• переработан предоставляемый заказчиком контент для наполнения сайта. Было собрано более 100 страниц;
• ввелся документооборот по проекту: написано техническое задание и инструкция по наполнению сайта, составлен договор на оказание услуг и дополнительное соглашение, рассчитана смета проекта, спланирован срок работы, подготовлены 2 счета и 2 акт об оказании услуг и 1 акт сдачи-приемки работ;
• организована и проведена фотосессия для контента на сайт;
• проведена защита проекта перед заказчиком и выпущен сайт в продакшн в двух языковых версиях на домене ido.tsu.ru. Разработка велась 2.5 месяца.
Результатом работы стал обновленный дизайн сайта Института дистанционного образования ТГУ с последующей реализацией разработчиками диджитал-студии «Паравеб». В настоящее время проект запущен для общего пользования на домене ido.tsu.ru.
Чтобы дизайн вуза оставался актуальным на протяжении 5-10 лет, недостаточно сделать его «модным» или трендовым. В первую очередь, дизайн должен быть продуман как система и опираться на запросы пользователей. Для успешного представительства вуза в сети должны быть учтены потребности разных аудиторных групп, включая инклюзивные, информация должна регулярно актуализироваться, а контент, отображаемый на страницах сайта, создаваться в рамках стилевого дизайн-шаблона. Веб-ресурс, как и прежде — не только онлайн-визитка вуза и его имидж в международном интернет-пространстве, но и отражение того, насколько хорошо университет понимает сам себя, свою функцию для пользователей в цифровом пространстве, и, как следствие, свое место в образовательной системе России и мира.
Результаты проведенного юзабилити-тестирования показали, что сайт полностью выполняет свои функции и удобен для использования. В будущем, чтобы сделать сайт более комфортным и соответствующим потребностям пользователя, необходимо провести юзабилити-тестирования с представителями целевой аудитории Института дистанционного образования, не вошедших в подборку проведенного тестирования. Исходя из сформулированных по результатам тестирования выводов, составить план по улучшению продукта.
В заключении хотелось бы отметить, что данный проект помог закрепить полученные теоретические знания по дисциплинам направления и специальным дисциплинам магистерской программы и усовершенствовать практические навыки в сфере UX/UI дизайна, а также дал хороший опыт в ведении проектов и понимание процесса всей командной коммерческой разработки.
В ходе работы были выполнены следующие задачи:
1. По дизайну и анализу:
• составлена критериальная матрица по 6 критериям для оценки соответствия сайтов современным тенденциям, запросам аудитории и перспектив устойчивости их дизайна на несколько лет;
• проведен бэнчмаркинг UX/UI 10 сайтов высших учебных заведений, входящих в один из крупнейших рейтингов России «RAEX ТОП-100»;
• было выделено 2 пользовательских сценария и улучшена имеющаяся структура сайта совместно с заказчиком - добавлены новые, объединены и убраны неактуальные разделы, проведено разделение на категории, ориентированные на целевую аудиторию сайта;
• разработан UI kit проекта;
• выделено 14 уникальных страниц и разработан для них UX/UI дизайн (6 страниц автором работы), на основе которых собран весь сайт в размере более 100 страниц.
• проведено юзабилити тестирование на 6 респондентах.
2. По менеджменту:
• переработан предоставляемый заказчиком контент для наполнения сайта. Было собрано более 100 страниц;
• ввелся документооборот по проекту: написано техническое задание и инструкция по наполнению сайта, составлен договор на оказание услуг и дополнительное соглашение, рассчитана смета проекта, спланирован срок работы, подготовлены 2 счета и 2 акт об оказании услуг и 1 акт сдачи-приемки работ;
• организована и проведена фотосессия для контента на сайт;
• проведена защита проекта перед заказчиком и выпущен сайт в продакшн в двух языковых версиях на домене ido.tsu.ru. Разработка велась 2.5 месяца.
Результатом работы стал обновленный дизайн сайта Института дистанционного образования ТГУ с последующей реализацией разработчиками диджитал-студии «Паравеб». В настоящее время проект запущен для общего пользования на домене ido.tsu.ru.
Чтобы дизайн вуза оставался актуальным на протяжении 5-10 лет, недостаточно сделать его «модным» или трендовым. В первую очередь, дизайн должен быть продуман как система и опираться на запросы пользователей. Для успешного представительства вуза в сети должны быть учтены потребности разных аудиторных групп, включая инклюзивные, информация должна регулярно актуализироваться, а контент, отображаемый на страницах сайта, создаваться в рамках стилевого дизайн-шаблона. Веб-ресурс, как и прежде — не только онлайн-визитка вуза и его имидж в международном интернет-пространстве, но и отражение того, насколько хорошо университет понимает сам себя, свою функцию для пользователей в цифровом пространстве, и, как следствие, свое место в образовательной системе России и мира.
Результаты проведенного юзабилити-тестирования показали, что сайт полностью выполняет свои функции и удобен для использования. В будущем, чтобы сделать сайт более комфортным и соответствующим потребностям пользователя, необходимо провести юзабилити-тестирования с представителями целевой аудитории Института дистанционного образования, не вошедших в подборку проведенного тестирования. Исходя из сформулированных по результатам тестирования выводов, составить план по улучшению продукта.
В заключении хотелось бы отметить, что данный проект помог закрепить полученные теоретические знания по дисциплинам направления и специальным дисциплинам магистерской программы и усовершенствовать практические навыки в сфере UX/UI дизайна, а также дал хороший опыт в ведении проектов и понимание процесса всей командной коммерческой разработки.
