Лого vc.ru

Редизайн: Каким мог бы быть сайт журнала о путешествиях «Вокруг света»

Редизайн: Каким мог бы быть сайт журнала о путешествиях «Вокруг света»

ЦП продолжает цикл материалов, посвященных редизайну сайтов и приложений крупнейших компаний. В новом выпуске рубрики UX-эксперты digital-агентства Uprock провели редизайн культового журнала «Вокруг Света».

Поделиться

Мы решили расширить рубрику и рассказывать также о методике разработки интерфейсов. Материал будет полезен маркетологам, участвующим в разработке интернет-продуктов, а также UX-специалистам, которым интересно увидеть подход коллег по цеху.

Буду рад, если вы поделитесь своим видением, как улучшить наше решение или выскажете альтернативное мнение. Также стоит сразу отметить, что мы были сильно ограничены во времени на создание проекта редизайна, поэтому могли не обратить внимание на некоторые мелочи.

Введение

Многие популярные онлайн-СМИ появились на заре эпохи Интернета. И их сайты в процессе развития обрастали новыми разделами и функциями, пока не достигли некой критической точки невозврата, когда на них становится просто невозможно потреблять контент — каким бы интересным он ни был.

«Вокруг света» — очень полезный журнал с увлекательным контентом, но воспринимать этот контент сложно из-за того, что сайт журнала очень захламленный и громоздкий. В этом смысле редизайн был не только интересной задачей, но и некой данью уважения журналу, знакомому мне с детства.

Сайт «Вокруг света» — отличный пример того, что при увеличении большого количества информационных блоков сайт превращается в «неповоротливого монстра». У него есть ряд недостатков — это и устаревшее визуальное отображение, и сложная неявная навигация, и нелогичная структура подачи контента. Методология разработки информационных проектов, которую мы применяем, достаточно прозрачна. Каким бы большим ни был проект, его можно дробить на мелкие части, после чего последовательно и методично идти от общего к частному.

Структура сайта

В первую очередь важно понять, какой контент должен присутствовать на сайте. Мы берем весь имеющийся контент и разбиваем его на группы, объединенные по смыслу и формату: например, «Статьи о животных» и «Статьи о людях» находятся в одном блоке, также как и «Блоги» «Фотоблоги» — в группе социальной активности пользователей. Если мы говорим о статьях, то они будут представлены по большей части в текстовом формате, в отличие, например, от блока «Фото дня».

Когда весь контент разделен на блоки, начинается процесс отбора — от некоторых мы избавляемся, некоторые объединяем. Чтобы сделать это правильно и оставить только действительно нужный контент, нужен опыт и понимание моделей поведения аудитории на сайте.

Навигация

Меню — самый важный элемент, который остается неизменным на протяжении всего существования сайта. Его можно проектировать отдельно от всего контента, так же, как и контент можно проектировать отдельно от меню. Но при объединении этих элементов важно сделать так, чтобы стилистически они соответствовали друг другу.

  

В случае с «Вокруг света» мы выбрали горизонтальное меню как более привычное уже существующим пользователям. В частности, на сайте «Вокруг света» навигацию разбили на три части: уровень 1 (основной), уровень 2 (дополнительный) и уровень 3 (системный). Контент первого уровня — самый важный, популярный и нужный. Как правило, это контентная группа «Статьи» – и именно на них мы и делаем акцент. В данном случае берем самый интересный контент и выносим его на первый план, в то время как разделы «Вход», «Личный кабинет» и другие подобные, которые в целом тоже относятся к первому уровню — отодвигаем на второй план. И уже в подвал мы вытаскиваем все самое ненужное.

Главная страница

Главная страница по традиции — это агрегатор всего самого важного. Фактически, это содержание сайта, все динамические обновляемые разделы, которые дают пользователю полную картину.

У каждой контетной единицы есть два формата отображения — preview и fullsize. До редизайна на сайте в отдельных блоках были разные шрифты, разная подача, разные расстояния и стилистика. Единственное, что было общим во всех блоках — использование оранжевого цвета. Если сравнить формат подачи статей на сайте «Вокруг света» до и после редизайна, можно заметить различия. Таким же образом мы прошлись по всем контентным блокам, аккуратно подравнивая, дорабатывая, приводя все элементы к единой стилистике.

Прототипирование

Для того, чтобы спроектировать главную страницу, необходимо для начала понять, какие элементы мы хотим на ней видеть. Затем набросать превью — но не слишком его детализировать, достаточно определиться с тем, какие типы элементов будут присутствовать в каждом блоке. Когда появляется понимание, как блоки будут выглядеть на странице, можно накидывать грубый функциональный прототип, композиционное расположение элементов. Когда функциональный прототип готов, его можно начинать заполнять графическими превью элементов, и оценивая, как они смотрятся вместе, уже формировать гайды — размеры шрифтов, заголовков, расстояний и так далее. На скриншоте показано, как от превью мы перешли к прототипу и к заполнению его графическими объектами.

Главную страницу мы делим на две части: сайд-бар и основная контентная часть. Деление на три колонки уже тяжеловато для восприятия, а одна колонка используется только на сайтах с небольшим количеством контента (как правило, это блоги). Сайд-бар в данном случае расположен слева — и здесь находится самый частообновляемый динамический контент. Справа мы размещаем «Фото дня», поскольку «Вокруг света» всегда публикует качественные и создающие атмосферу издания фотографии.

Новости

Новости – динамичный раздел, и мы поделили его на несколько категорий. Самая яркая — актуальные и горячие новости — выделена графически. Затем следуют менее горячие новости и архив. Стоит отметить, что способов отображения достаточно много, но наиболее понятные пользователю форматы – «списком» и «блоками». Для того, чтобы понять, какой формат отображения будет актуален для конкретного сайта, стоит посмотреть, какие форматы сейчас в тренде, что используют конкуренты, к чему привыкли пользователи.

Список статей

Блок «Статьи» – это коллектор всего контента в формате статей, который представлен бесконечным списком. Выделяем те опции, на которых необходимо сделать акцент — например, всё те же шикарного качества фотографии «Вокруг света», которые нельзя скрывать. Внизу страницы мы можем сделать кросс-блоки, которые ведут на соседние тематические разделы. Кроме того, у каждого раздела статей есть тематические новости — их мы выделяем слева.

Статья внутри

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

Реклама

Не стоит забывать о том, что практически все информационные ресурсы зарабатывают на рекламе. Типов баннеров — огромное количество.

Закладывать рекламные места необходимо уже на начальной стадии разработки прототипа. Мы не упомянули об этом в самом начале по одной простой причине — наша специфика разработки предполагает создание сайтов-конструкторов, внутри которых можно передвигать и менять блоки. В случае с «Вокруг света» мы разработали предложение для партнеров, которые могут разместить информацию о себе как в header, так в перед динамическими новостями, а также внутри статей в качестве спецпроектов. Рекламу, таким образом, можно интегрировать в проект разными способами, и она при этом не будет мешать восприятию контента.

Выводы

И если подходить к поставленной задаче последовательно и методично, любая, даже самая сложная задача, решаема. Любой редизайн предполагает под собой главную задачу: увеличение количества просмотра страниц и глубины просмотра страниц. На данный момент у «Вокруг света» этот показатель колеблется в районе 1,9, то есть в основном это стандартный сценарий, когда человек открыл главную, зашел на одну из статей и закрыл сайт. После внедрения тех изменений, которые мы реализовали в своем проекте редизайна, по опыту этот показатель может вырасти до 2,6-3,2. Если обобщать, что это будет реализовано за счет: 

  • структура сайта стала более прозрачной; 
  • главная страница стала агрегатором актуального контента; 
  • пользователь может находиться внутри одного раздела и пользоваться им как мини-сайтом, получая подсказки о релевантных материалах и соседних разделах; 
  • если мы даем человеку понятный контент, он меньше устает от его потребления и теряет внимание, и его внимания — и готов больше времени потратить на восприятие большего количества информации.
Статьи по теме
Редизайн: Каким мог бы быть сайт Российских железных дорог09 октября 2014, 09:33
Редизайн: Каким мог бы быть сервис для поиска жилья CIAN15 октября 2014, 14:47
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Если следовать этой методологии можно любой сайт сделать более аккуратным и удобным

Круто. А сколько времени у вас на эти ушло?

0

1 день: анализ всех страниц, выявление структуры
2 день: подготовка структуры и прототипа
3 день: завершение прототипирования и начало отрисовки дизайна
4-5 день: отрисовка дизайна

по хорошему уходит 3-4 недели, мы прошлись только по ключевым

Какая цель редизайна?

в паре первых абзацев написано

Целью редизайна не может быть демонстрация методологии. Методология это всего лишь инструмент.

0

Эмм... уж было хотел как в прошлый раз, разбор написать, но пожалуй просто оставлю картинку.

PS: Я конечно понимаю желание – мол прекрасная модульная сетка, у Ленты же работает и все такое. Но фак, существует еще куча приемов как можно сделать лучше, а не просто так же как у других.

Расскажите, пожалуйста, подробноее о других приемах. Было бы интересно узнать.

0

Евгений, тут все очень просто - каждый делает то, что считает нужным. Вот вы считаете что такой редизайн должен быть, а я считаю что это шило на мыло.

"Вокруг Света" был всегда, а lenta.ru— хуй и 2 недели.

Проверка на ЦП прошла успешно.

Ради этого комментария мы и писали статью.

0

Дизайн и юзабилити стали однозначно лучше, чем были.
Но, по юзабилити, могло бы быть куда круче.
Например, по главной странице:
- Надо ломать глаза, чтоб прочитать текст на фото с Комодским вараном,
- Блок с фейсбук группой куда-то вообще пропал (был справа снизу),
- Блок с емейл-подпиской на новости очевидно не вписывается в тип контента на главной странице + его там никто не увидит (во всяком случае, в текущем виде).

В целом, многие юзабилити-решения хороши, но, могло бы быть и лучше. Дизайн красивый.

0

Спасибо за отзыв, полностью согласен, что можно было лучше. Мы ограничены по времени для подготовки статьи и поэтому делаем акцент на рассказе методологии.

вы бы лучше делали реже, но круче, выхлоп бы для вас больший был.

0

Про рекламные блоки, упомянутые в самом конце - видимо, вы много медийных сайтов "сделали"?
На сайте нет платного контента, а значит, он живет только за счет рекламы.
Если сразу нет рекламы, то это говно-сайт с точки зрения бизнеса. Редакция будет рада, а вот издатель такой проект не примет.
Сетка сразу должна содержать все рекламные блоки, и это не редакция должна решать, где баннерные места будут, а коммерческий отдел вместе с издателем.

Из того, что бросилось в глаза:
А. Хедер (в срочку):
1. путешествия 2. наука 3. еда 4. люди 5. животные 6. история
Новые статьи (в строчку):
1. история 2. еда 3. животные 4. люди 5. путешествия 7. наука

Б. безымянный модуль подписки на новости и кнопка "ок". "ок" что? ребят, ну проектировщики с одной прочитанной книгой круга таких ошибок не допускают!

Юзабилити, говорите? питерский серо-белый дизайн это конечно круто, хоть и надоедает уже, но надо же чтобы удобно было. вот ваш сайт классный, хоть и теряешься на нем, а это, уж извините, на троечку с плюсом, не больше

0

Ребзя, сорри, но «Вокруг света» — это не стартапчик, а большая такая история. Вы сделали чисто, современно, но получился шаблон без яиц — истории не ощущается. Спасибо Барбанелю, он безликому журналу вернул лицо несколько лет назад www.dimabarbanel.com/new/vokrug-sveta/ . И кстати, я может ослеп, но на главной странице нет анонса печатного номера.
В общем и целом, в этой рубрике я не вижу смысла рассматривать такие глобальные редизайны, которые сделать хорошо и быстро нельзя. Лучше бы брали какие-то части (например, формы регистрации, поиска билета и т.п.) и детально разбирали бы их.

Мне методология понравилась. Отправьте в издательство, вдруг закажут редизайн :)

Хотя по опыту работы в ВС могу сказать, что вам там крылышки быстро срежут. Нельзя просто так взять и убрать оранжевый с сайта "Вокруг Света" :)

0

Интересная рубрика вышла. Красиво лепят ребята!)

Если не обращать внимания на сетку, то хуже всего получилась левая колонка. Новости, почему в глаза должна бросаться дата? Это должно меньше всего выделятся...
Разница по шрифтам очень напрягает в статьях! У автора дизайна какая то шрифтомания, слишком разнообразно отвлекающее внимание, не возможно читать! Это касается и size, и line-height, и font-weight. Новостной сайт же, должно быть удобно читать в первую очередь.

0

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

Сейчас обсуждают
FrostBite
ProGamer.ru

Всем. Я за нацию технологий и творчества.

Власти России намерены снизить беспошлинный порог для ввоза интернет-посылок до 500 евро с середины 2018 года
0
Alex Samoylenko

Кандидатам на лучшую мобильную игру в Минске передает привет лучшая мобильная игра в Минске) шучу) Андрей, Ксения, вы молодцы! Игра крутая.

Mushroom Wars 2: рассказ российских разработчиков о том, какой путь прошла игра от концепта до релиза
0
reggaejunkiejew

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

Дом, который построил Питер Тиль
0
Anton Kuchumov
WorkOut

Спасибо, из всего списка как раз хотел начать с неё.

Лучшие книги 2016 года — выбор Билла Гейтса
0
Artem Korsunov

Конечно, их же уже купил Фитбит

Производитель «умных» часов Pebble объявил о своём закрытии после сделки с Fitbit
0
Показать еще