Редизайн сайта газеты "Солидарность"
ЗаказчикГазета «Солидарность» является ведущим профсоюзным изданием, освещающим вопросы трудовых отношений и социальной жизни России.ЗадачаВ ходе редизайна было разработано 52 страницы прототипов и 30 дизайн-макетов страниц. В качестве системы управления была выбрана система NetCat.
На первый взгляд кажется, что создать удобный и современный сайт для газеты — это не самая сложная задача. Но на самом деле этот проект поставил перед нами довольно много необычных задач, и мы поделимся с вами тем, как же создать отличный и удобный сайт для газеты, которым действительно хочется пользоваться.
Сайт газеты Солидарность существует с 2001 года и за это время потерпел несколько изменений структуры и дизайна. Но все мы понимаем, что сайты начала 2000х и современные сайты — это совершенно разные вещи. Если раньше все создавалось по принципу сделать все, что позволяют новые возможности, то сейчас все сайты создаются с четкой ориентацией на психологию посетителей.
Поэтому для того, чтобы создать современный и удобный сайт было необходимо не только сделать редизайн, но и провести более глубинные исследования и полностью перестроить механизмы взаимодействия с посетителями.
О клиенте
Газета «Солидарность» является ведущим профсоюзным изданием, освещающим вопросы трудовых отношений и социальной жизни России. Помимо трудовых конфликтов затрагиваются и темы трудового законодательства и помощи рабочим в решении трудовых вопросов.
Из этого следует, что сайт должен быть простым и лаконичным, но при этом современным. Также посетителю должно быть сразу ясно, что он попал на сайт газеты, что достигается за счет правильного расположения блоков.
На портале представлены как новостные материалы, так и видеоматериалы, голосования и различные обсуждения. Существуя с 2001 года сайт прошел через множество изменений в соответствии с тем, какие были требования у посетителей в тот или иной период. И изучая целевую аудиторию становится ясно, что сайт должен быть удобным, простым в использовании и при этом иметь адаптивные версии, чтобы быть доступным с любого устройства.
Старый дизайн сайта
Задачи
- создание удобного и привлекательного дизайна, который отвечает потребностям современных читателей;
- проработка адаптивной версии, которая требует большого внимания. Пользователь должен чувствовать себя комфортно даже заходя на сайт с мобильного телефона;
- переосмыслить логику сайта, организовать удобную навигацию по материалам;
- так как у газеты существует сувенирная продукция, а также осуществляется обучение, то необходимо организовать удобное и современное пространство для всех сфер деятельности газеты;
Редизайн сайта
В ходе редизайна было разработано 52 страницы прототипов и 30 дизайн-макетов страниц. Мы не только занимались созданием современного дизайна, но и полностью переосмыслили то, как пользователь взаимодействует с каждой отдельной страницей сайта.
Ранее на сайте находились не только новости. Мы же решили, что лучше всего разделить сайт газеты, интернет-магазин и образовательную платформу, чтобы посетителям было удобнее пользоваться сайтом, и чтобы расширить функционал. Об этом мы расскажем дальше.
Сам редизайн отразился и на верстке сайта. Так был использован Bootstrap последней версии, что позволило в итоге получить быстрый и адаптивный сайт. Верстка сайта также соответствует всем HTML стандартам и требованиям поисковых систем. Вне зависимости от браузера или устройства сайт всегда будет корректно отображаться, а быстрая скорость загрузки страниц позитивно отразилась на поведенческих факторах.
Основной сайт газеты и разделы
В качестве системы управления была выбрана система NetCat. Это удобная и практичная CMS, с системой безопасности, а также с широким набором инструментов. Помимо этого ее можно порекомендовать для создания интернет магазинов и сайтов средней ценовой категории.
У сайта газеты было сложное меню с большим количеством выпадающих элементов. Мы упростили структуру, ввели теги и добавили сортировку по авторам.
На сайте остались Конкурсы, Мотиватор и Спецхран в Спецпроекты. Это удобно тем, что мы разгружаем основное меню и пользователь, перейдя в нужную вкладку, может выбрать необходимый ему раздел, а не искать все в бесконечном списке. Также с сайта никуда не исчезли Блоги. Они были переименованы в Мнения.
На первом экране расположены Новости. Мы решили группировать их по дням. Так посетитель может быстро просмотреть ключевые новости каждого дня просто пролистав сайт вниз.
Когда пользователь выбирает новость, которую хочет прочесть, то он попадает в Карточку новости. Здесь он может ознакомиться не только с самой публикацией, но и увидеть фото и имя автора, а также его контакты. Кликнув на имя автора или на кнопку Все публикации автора читатель может увидеть все опубликованные этим автором новости. Для статей действует такая же схема, что позволяет даже новому посетителю быстро сориентироваться на сайте.
Дальше мы приступили к работе с разделом Мнения. Это своего рода блог, где можно прочитать авторские мнения на те или иные события или вещи. Сначала читатель видит блок с публикациями главного редактора газеты, а ниже уже в хронологическом порядке расположены публикации других авторов. Справа можно выбрать интересующего автора и ознакомиться с его публикациями.
В Спецпроектах также находится Юридический клуб, Профсловарь, Трансляции и Проекты. Для того, чтобы получить доступ в юридический клуб необходимо подать заявку и в случае ее одобрения читатель получит доступ к информации, касающейся профсоюзной юридической практики. Для того, чтобы обеспечить безопасность и конфиденциальность было решено сделать не просто форму для заполнения данных. Сначала пользователь должен пройти регистрацию на сайте и уже после авторизации заполнить форму с необходимыми данными. Каждую заявку рассматривают вручную, так как необходимо получить подтверждение, что пользователь действительно принадлежит к профсоюзному сообществу и занимает необходимую должность.
Размещение блоков на страницах
Можно заметить, что как в новостях, так и статьях с мнениями мы использовали линейную структуру. То есть все блоки расположены ровно один под другим. Это похоже на то, как размещаются новости в газете. Чаще всего читатель просто проходится взглядом сверху-вниз и для сайта мы решили применить тот же прием.
Раньше посетителям было сложно быстро найти взглядом интересующие их блоки и большая часть информации терялась. Также проблема возникала с новостями, расположенными сбоку, потому что пользователь их просто не замечал.
Поэтому мы решили не утяжелять сайт большим количеством блоков в разных местах. Так была придумана простая структура, где хоть основных блоков и не так много, но на них акцентировано внимание так, что посетитель может или выбрать интересующую его информацию, или легко ознакомиться со всеми новостями. Ведь всем знакома эта ситуация, когда на сайте много блоков и все они привлекают внимание, а в итоге невозможно нормально сконцентрироваться и взгляд просто «блуждает» по странице.
Так на первом экране вынесены 3 блока: последние новости, блок со слайдером и блок публикации главного редактора, с его фото на превью. Попадая на страницу посетитель первым делом видит важную и актуальную информацию, а спускаясь ниже попадает в новостную ленту.
Мы все же сделали боковую колонку, где разместили выборку различных новостей и статей, но при этом не перегружали, но минималистичный стиль позволил не перегрузить страницу.
Очень часто посетитель находят интересующий их материал и уходят с сайта. Чтобы «зацепить» читателя, а также повысить глубину посещения была продумана карточка публикации. Из нее посетитель мог перейти в ленту других публикаций данного автора. Таким образом если человеку понравился материал или его заинтересовала тема, то будет больше вероятность, что он захочет ознакомиться с другими публикациями автора и останется на сайте.
Онлайн подписка
На данный момент только печатной версии недостаточно и все больше изданий одновременно предлагает как печатные, так и электронные версии. Оформляя электронную подписку читатель будет иметь доступ к газете через компьютер, телефон или планшет.
Мы сделали возможность оформить онлайн подписку. Для этого необходимо выбрать период подписки и оплатить ее прямо на сайте. Все новые выпуски затем пользователь может увидеть в своем личном кабинете в pdf формате.
Интернет-магазин и образовательная платформ
У газеты также есть своя книжная и сувенирная продукция. Мы решили, что осуществлять создание интернет-магазина в рамках одного сайта не самое удобное решение, ведь тогда увеличивается вероятность того, что портал становится для пользователя слишком громоздким и сложным. Поэтому интернет-магазин был создан отдельно, что позволило сделать полноценный каталог с корзиной и настройками оплаты и доставки. На предыдущей версии сайта заказ можно было осуществить только через форму обратной связи, что на данный момент является не самым комфортным для посетителей способом и они предпочитают скорее отказаться от заказа.
Также мы поступили и с образовательной платформой. Заявки на дистанционное обучение могут оставлять и члены профсоюза и профорганизации.
Тем самым мы вынесли за пределы основного портала все, что не касалось новостной и информационной деятельности газеты и сделали сайт более лаконичным и понятным целевой аудитории.
Результаты
Мы не только создали современный и красивый дизайн сайта, но и решили поставленные перед нами задачи по работе с читателями. Старую версию сайта в сутки посещало в среднем 400–500 человек. После редизайна посещаемость поднялась до 20 000 — 50 000 человек.
Сайт стал более доступным и читаемым для пользователей старшего возраста. Благодаря новой системе группировки новостей и статей по авторам посетители стали проводить больше времени на сайте и изучать больше материалов, нежели раньше. Так мы увеличили не только время посещения, но и глубину просмотра.
Перенос интернет-магазина и образовательной платформы на отдельные сайты позволил как облегчить сайт газеты, так и сделать два других ресурса более полноценными и самостоятельными.
Ну, а новый дизайн как нельзя кстати отражает суть газеты. Он простой, лаконичный и открытый, как и настоящее печатное издание.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
