Количество кликов в сценарии с одним фильтром на компьютере
42
Сайт Ижевского Государственного Технического университета
Сокращение времени поиска подходящих направлений для абитуриента
Это можно сделать
на 80 % быстрее…
Всё о кейсе
Цель
Сократить время, которое абитуриент тратит на поиск подходящего направления: вместо 9 кликов и нескольких минут блужданий по разделам — пара действий и все важные цифры на одном экране.
Задача
Исследовать аудиторию и протестировать действующий сайт, перепроектировать навигацию и каталог образовательных программ: фильтры по баллам и предметам ЕГЭ, форме обучения и стоимости, карточки с проходным баллом и бюджетными местами. Собрать UI-kit и проверить решение повторным тестом.
Контекст
istu.ru — официальный сайт ИжГТУ им. М. Т. Калашникова. Им пользуются школьники, их родители и студенты, чаще всего с телефона. Проходные баллы, бюджетные места и цены спрятаны глубоко в разделах, а в мобильной версии фильтры оказываются под длинным списком программ. Проект — неофициальный концепт редизайна.
Критерии успеха
- Главная задача (проходной балл и бюджет) решается быстрее, чем на действующем сайте
- Все респонденты справляются со сценариями на телефоне
- Оценка SUS выше среднего по отрасли — 68 баллов
Процесс As is
Сейчас чтобы найти нужную образовательную программу, пользователю понадобится 9 кликов!
Зайти в бургер-меню
Кликнуть на раздел Абитуриенту
Выбрать раздел Прием и проскроллить до подраздела Бакалавриат
Кликнуть на раздел Выбрать направление
Пролистать весь перечень программ
Открыть Фильтры
Проскроллить до нужного раздела, кликнуть на него и выбрать фильтры
Проскроллить до конца вверх или низ и нажать кнопку Применить
Проскроллить до конца вверх или низ и нажать кнопку Применить
Портреты ЦА
Юзабилити тест Istu.ru (Действующий сайт)
В тестировании участвовали 4 человека из разных сегментов целевой аудитории, всем им необходимо было пройти несколько сценариев на двух устройствах и поделиться впечатлениями, а также пройти анкету SUS для этого сайта
Сценарии по поиску информации:
- Программы с помощью фильтров по уровню подготовки и предметам ЕГЭ«Ты сдаёшь математику, русский и информатику. Найди 2–3 направления бакалавриата, куда можно поступить с этими предметами»
- Количество бюджетных мест«Представь, что у тебя 165 баллов. Найди среди подходящих тебе направлений то, куда ты прошёл бы на бюджет в прошлом году. Сколько там бюджетных мест?»
- Стоимость года обучения«Из подходящих тебе направлений найди то, где больше всего бюджетных мест. Сколько стоит год обучения на нём, если на бюджет не пройдёшь?»
Инсайты
- В списке нет проходного балла, бюджетных мест и цены. Каждую программу приходится открывать отдельно
- Неудобный ползунок проходного балла. Его не замечают, настраивают наоборот («от 165» вместо «до 165»), хочется ввести число.
- На телефоне фильтры спрятаны под списком. Пользователю приходится перелистывать все программы.
- Первый клик уводит не туда. Разделы «Выбрать факультет», «Рейтинг абитуриентов», «Подать документы» путают.
- Кнопка «Применить» внизу фильтров или их две. Результат обновляется не сразу, приходится искать и нажимать кнопку.
- Устаревший разношёрстный визуал. Узкий мелкий шрифт, прописное письмо (капс), старые фото раздражают пользователей.
Опрос
Провела онлайн‑опрос среди пользователей, чтобы понять, как реализовать фильтры и сортировку, а также список программ и их карточки
С помощью кода визуализировала информацию в формате графиков
Инсайты
Параметры в фильтрах
Мой балл ЕГЭПроходной балл ЕГЭНаличие бюджетных мест
Предметы ЕГЭСфера или профессияНаличие общежития
Уровень образованияФорма обученияСтоимость обучения
Информация в списке программ
Срок и форма обученияНаличие ВУЦ и общежития
Проходной баллНужные предметыКод направления
Стоимость обученияКоличество бюджетных мест
Дизайн ‑ решение
Цветовая палитра
Голубой цвет ассоциируется с надежностью, спокойствием, доверием и интеллектом, это подходит под тему университета и соответствует тем эмоциям, которые мы хотим вызвать у пользователей
Палитра с акцентом на голубой
Шрифт
Современный гротеск с хорошей читаемостью. Чистый, лаконичный, подходит для цифрового продукта и большого объёма текста
InterAa
- Regular
- Medium
- Semibold
- Bold
Удобная типографика
Библиотека компонентов
Единая система компонентов помогает сохранить целостность интерфейса, ускоряет разработку и делает взаимодействие удобным и предсказуемым.
Многие компоненты я взяла из существующей системы, но часть реализовала самостоятельно, чтобы они вписывались в тему
Библиотека компонентов
с единым стилем
Вайрфреймы
Следующим шагом после определения дизайн‑концепции стала разработка вайрфреймов (схематичное представление структуры будущего цифрового продукта)
В данном проекте создание чернового варианта стало важнейшим процессом, так как цель — упростить пользовательский путь, а он продумывается именно на этом этапе
Навигация сайта
Первый экран
Открытый университет
Поступающим
Студентам
- Header
- Главное фото
- Новости
- Университет в цифрах
- Образовательные программы
- Footer
- Сведения об образовательной организации
- Политика открытости
- Документы
- Виртуальная приемная
- Материалы приема граждан
- Работа в ИжГТУ
- Приемная комиссия
- Образовательные программы
- Дополнительное образование
- Календарь приема
- Подготовка к ЕГЭ
- Онлайн‑курсы ИжГТУ
- Противодействие коррупции
- Студенческий совет
- Студенческие инициативы
- Иностранным студентам
- Медицинская помощь
- Социальная защита
Выпускникам
Партнёрам
Посетителям
итог работы
Юзабилити тест Редизайна
Пользователи проходили те же сценарии, но на новом сайте. Оценивалось время выполнения и учитывались замечания респондентов, а также метрика SUS для редизайна.
Время на главную задачу: проходной балл и бюджет
3:310:24
Нашли, где больше мест и какая цена, на телефоне
0/44/4
Оценка удобства SUS
6696
Что изменилось в восприятии
Что можно доработать
БылоПервое впечатление от istu.ru
«Много информации, сверху маленькие шрифты»Респондент 2
«Ляпистый»: современные картинки вперемешку со старыми фото, нет единого стиляРеспондент 3
«Огромная реклама, которая неправильно отображается с телефона»Респондент 4
СталоПервое впечатление от редизайна
«Запомнилась чистота интерфейса»Респондент 4
«Интерфейс стал современнее и удобнее»Респондент 2
«Теперь в интерфейсе нет раздражающих факторов, всё чётко и понятно»Респондент 4
Чекбокс «Русский язык» в предметах ЕГЭ
3 из 4 респондентов не сразу заметили подсказку, что русский учитывается всегда.
Подсказка «Подбери по баллам ЕГЭ» со ссылкой на фильтры
Один респондент не нашёл баллы в фильтрах — гипотезу стоит проверить.
СПО в меню
Двое искали программы СПО в бургер-меню.
