5 заметок с тегом

дизайн Сдам ГИА

Дизайн сайтов «Сдам ГИА». Кнопки

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

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


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

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

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

12 апреля   дизайн Сдам ГИА   кнопки   образование   перевёрстка

Дизайн сайтов «Сдам ГИА». Каталог заданий

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

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


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

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

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

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

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

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

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

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

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

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

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

Было:

Стало:

22 марта   дизайн Сдам ГИА   образование   перевёрстка

Дизайн сайтов «Сдам ГИА». Меню

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

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


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

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

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

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

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



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

Спонсор поста

Сегодня не купили рекламу, поэтому прорекламирую рекламу в своём блоге и канале. Она публикуется после пятничного поста, когда самый большой трафик. Состоит из текста и ссылки. Стоит пока 499 ₽.

Пишите в телеграме.

15 февраля   дизайн Сдам ГИА   меню   образование

Дизайн сайтов «Сдам ГИА». Ссылки на работы

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

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

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

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

  1. По ссылке неудобно попадать, потому что доступна для нажатия небольшая зона: только само слово «Вариант N».
  1. Целясь в ссылку, можно промахнуться, попасть в расположенную ниже, потому что между ними маленькое расстояние.
  1. Визуально нарушен порядок: к «Варианту 1» ближе не 2-й вариант, а 6-й.
  1. Посещённый вариант не запоминается и отображается, как обычный.

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

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

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

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

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

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

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

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

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

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

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



Было:

Стало:



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

Спонсор поста

Сегодня не купили рекламу, поэтому прорекламирую рекламу в своём блоге и канале. Она публикуется после пятничного поста, когда самый большой трафик. Состоит из текста и ссылки. Стоит пока 499 ₽.

Пишите в телеграме.

2018   дизайн Сдам ГИА   образование   ссылки

Дизайн сайтов «Сдам ГИА». Исследование

Российские школьники готовятся к экзаменам на сайтах системы «Сдам ГИА». Посещаемость системы за день — 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. Персонажи

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

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


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

Спонсор поста

Сегодня не купили рекламу, поэтому прорекламирую рекламу в своём блоге и канале. Она публикуется после пятничного поста, когда самый большой трафик. Состоит из текста и ссылки. Стоит пока 499 ₽.

Пишите в телеграме.

2018   дизайн Сдам ГИА   исследование   образование