Российские школьники готовятся к экзаменам на сайтах системы «Сдам ГИА». Посещаемость системы за день — 228 тысяч человек. Если интересно: подробная статистика.

Я помогал «Сдам ГИА» с дизайном и разработкой. О том, что сделал, рассказываю в своём блоге.


Часть левой колонки сайта:

Я решил её освежить.

Для начала вынес профиль в меню и оформил поисковое поле проще:

Даты мешали и путали. Новость 18 мая о ЕГЭ, но экзамен был 2 июня:

Подчёркивание ссылки перенёс на всю новость:

Как у обычной ссылки, при наведении меняется цвет текста и линии:

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

Предложил ввести эти правила в редакционную политику по составлению новостей. Не «Изменения в ЕГЭ 2018 года. Посмотреть», а «Изменения в ЕГЭ 2018 года».

Кнопка «Подписаться» имела маленькое разрешение и не оправдывала ожидания пользователя: после нажатия на кнопку человек не подписывался на группу Вконтакте.

В новостях приходилось тянуть ссылки на мобильные приложения:

Я так разрешил эти два вопроса:

Убрал ссылку «Все новости». Теперь её роль играет заголовок:

Важное выделяли красненьким или писали: «СРОЧНО!». Мне показалось это непрофессиональным методом привлечения внимания.

Более графически чистый способ — ставить флажок:

Можно выделять маркером:

Для самой важной новости — самое яркое обозначение:

Я переверстал новостной блок. Информацию о ворах пока не добавил, об этом позже.

Новостной блок лежит на плашке. Чтобы он сочетался с поиском, положил поисковое поле тоже на плашку:

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

Набрал дату капителью:

При наведении вся новость красится в оранжевый, потому что так гармоничнее:

Я предположил, что в новости чаще всего будет одна ссылка. В этом случае весь текст — ссылка:

Когда в одной новости две ссылки, текст чёрный, ссылки синие. Без точки в конце.

Обратная связь для каждой ссылки:

Теперь о ворах. Как я понимаю, полезное действие этого блока — опозорить тех, кто крадёт задачи у «Сдам ГИА», и предупредить других, что за воровство их тоже опозорят.

Переверстал:

Было:

Стало:

Российские школьники готовятся к экзаменам на сайтах системы «Сдам ГИА». Посещаемость системы за день — 228 тысяч человек. Если интересно: подробная статистика.

Я помогал «Сдам ГИА» с дизайном и разработкой. О том, что сделал, рассказываю в своём блоге.


Раньше на сайте кнопки выглядели так:

При наведении на них была неправильная обратная связь: как будто кнопка нажималась.

Я добавил состояние при наведении и увеличил отступы для красоты и удобства:

Российские школьники готовятся к экзаменам на сайтах системы «Сдам ГИА». Посещаемость системы за день — 228 тысяч человек. Если интересно: подробная статистика.

Я помогал «Сдам ГИА» с дизайном и разработкой. О том, что сделал, рассказываю в своём блоге.


На сайте есть раздел «Каталог заданий». В нём задание выглядело так:

Я убрал избыточное слово «Показать» в недоссылке «Показать решение»:

Посчитал грубым обозначение числа комментариев с помощью скобок:

Предложил два варианта замены. Выбрали первый.

В каталоге задания были прижаты друг к другу:

«1 комментарий» находился ближе не к своему, а к следующему заданию. Поэтому казалось, что он относится к чужому:

Я добавил отступ между заданиями. Стало лучше, но всё равно остались вещи, которые сеяли беспорядок и неудобства.

Внутри заданий были дыры:

Ссылки обозначались пиктограммами, а они менее понятны, чем обычный текст.

Тому пример — вопрос в службу поддержки сайта:

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

Было:

Стало:

Российские школьники готовятся к экзаменам на сайтах системы «Сдам ГИА». Посещаемость системы за день — 228 тысяч человек. Если интересно: подробная статистика.

Я помогал «Сдам ГИА» с дизайном и разработкой. О том, что сделал, рассказываю в своём блоге.


На сайте было боковое меню:

Я предложил сделать меню чище, убрав квадраты и подчеркнув ссылки более тонко:

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

При наведении пункт меню выделялся плашкой:

Теперь обратная связь чётче и чище:

О том, над чем работал дальше, расскажу в другой раз.

Российские школьники готовятся к экзаменам на сайтах системы «Сдам ГИА». Посещаемость системы за день — 228 тысяч человек. Если интересно: подробная статистика.

Я помогал «Сдам ГИА» с дизайном и разработкой. О том, что сделал, рассказываю в своём блоге.

На сайте ученики решают варианты ЕГЭ. Ссылки на варианты выглядели так:

В их внешнем виде я нашёл четыре недостатка.

1. По ссылке неудобно попадать, потому что доступна для нажатия небольшая зона: только само слово «Вариант N».

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

3. Визуально нарушен порядок: к «Варианту 1» ближе не 2-й вариант, а 6-й.

4. Посещённый вариант не запоминается и отображается, как обычный.

Учитывая недостатки, я переверстал ссылки:

У посещённых вариантов соответствующий цвет текста:

Потом счёл, что оранжевый цвет — кричащий, портит атмосферу сайта, и убрал цвет:

Но на сайте изменили по-другому:

При наведении фон красился в серый:

Я опять нашёл недостаток. У ссылки избыточное оформление: она подчёркнута и выделена рамкой. Достаточно одного, так чище:

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

Немного увеличил отступы, чтобы убрать тесноту, и перекрасил текст и рамки, чтобы было в новом стиле:

У посещённых вариантов покрасил рамку в фиолетовый:

При наведении сделал покраску текста и рамки в оранжевый:

И убрал лишние отступы слева и справа:

Было:

Стало:

О том, над чем работал дальше, расскажу в другой раз.

Российские школьники готовятся к экзаменам на сайтах системы «Сдам ГИА». Посещаемость системы за день — 228 тысяч человек. Если интересно: подробная статистика.

Я помогал «Сдам ГИА» с дизайном и разработкой. О том, что сделал, рассказываю в своём блоге.

В 2014 году я перешёл в 9 класс. В конце него сдают экзамен ОГЭ. Чтобы к нему готовиться, учительница математики посоветовала нашему классу сайт oge.sdamgia.ru.

На этом сайте я решал работы, которые будут примерно на экзамене. Сайт проверял мои ответы и показывал решения заданий. В том числе благодаря этому я сдал экзамены на «четвёрки» и «пятёрки».

Сайт oge.sdamgia.ru полезный, но в некоторых местах я считал его неудобным. Поэтому в 10 классе решил создать свой более удобный веб-сервис для подготовки к ОГЭ и обогнать систему «Сдам ГИА».

Чтобы сделать удобный продукт, мне надо было узнать, что нужно пользователям. Поэтому я начал проект с исследования.

Исследование состояло из шести этапов:

1. Свой опыт.
2. Анализ конкурентов.
3. Интервью с пользователями.
4. Изучение отзывов и вопросов на сайтах «Сдам ГИА».
5. Анкетирование пользователей.
6. Персонажи.

1. Свой опыт

Когда я готовился к экзамену, попробовал разные сайты: oge.sdamgia.ru, alexlarin.net и ege.yandex.ru. Тем самым понял изнутри, как работают продукты такого типа. Этот опыт полезен, когда разрабатываешь своё.

Так выглядел oge.sdamgia.ru в 2016 году

2. Анализ конкурентов

Изучил детально сайты для подготовки к ЕГЭ: fipi.ru, neznaika.info, oge.sdamgia.ru, alexlarin.net и ege.yandex.ru. Конкретно, смотрел, как в каждом продукте сделаны одинаковые вещи: оформление экзаменационной работы, ввод ответов, разбор решённой работы и статистика.

На сайте alexlarin.net были задания без решений, и ещё он пугал внешним видом

3. Интервью с пользователями

Спрашивал одноклассников, как они готовились к ОГЭ, какими сайтами пользовались, что на них понравилось, что было неудобно.

Моя одноклассница считала удобнее «Яндекс-ЕГЭ»: он показывал не всю работу, а по одному примеру

4. Изучение отзывов и вопросов на сайтах «Сдам ГИА»

На сайтах «Сдам ГИА» есть разделы «Сказать „спасибо“» и «Вопросы и ответы». Я прочитал сотни пользовательских проблем и написал их анализ с предложением решений.

Страница раздела «Вопросы и ответы»

5. Анкетирование пользователей

Составил анкету с вопросами об использовании «Сдам ГИА» и попросил учителей информатики раздать на уроках.

Анкета для одноклассников

6. Персонажи

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

Портрет персонажа Серёжи

О том, над чем работал дальше, расскажу в другой раз.