продолжает цикл материалов, посвященных редизайну сайтов и приложений крупнейших компаний. В новом выпуске рубрики UX-эксперты digital-агентства Uprock провели редизайн культового журнала «Вокруг Света» .
Мы решили расширить рубрику и рассказывать также о методике разработки интерфейсов. Материал будет полезен маркетологам, участвующим в разработке интернет-продуктов, а также UX-специалистам, которым интересно увидеть подход коллег по цеху.
Буду рад, если вы поделитесь своим видением, как улучшить наше решение или выскажете альтернативное мнение. Также стоит сразу отметить, что мы были сильно ограничены во времени на создание проекта редизайна, поэтому могли не обратить внимание на некоторые мелочи.
Введение
Многие популярные онлайн-СМИ появились на заре эпохи Интернета. И их сайты в процессе развития обрастали новыми разделами и функциями, пока не достигли некой критической точки невозврата, когда на них становится просто невозможно потреблять контент — каким бы интересным он ни был.
«Вокруг света» — очень полезный журнал с увлекательным контентом, но воспринимать этот контент сложно из-за того, что сайт журнала очень захламленный и громоздкий. В этом смысле редизайн был не только интересной задачей, но и некой данью уважения журналу, знакомому мне с детства.
Сайт «Вокруг света» — отличный пример того, что при увеличении большого количества информационных блоков сайт превращается в «неповоротливого монстра». У него есть ряд недостатков — это и устаревшее визуальное отображение, и сложная неявная навигация, и нелогичная структура подачи контента. Методология разработки информационных проектов, которую мы применяем, достаточно прозрачна. Каким бы большим ни был проект, его можно дробить на мелкие части, после чего последовательно и методично идти от общего к частному.
Структура сайта
В первую очередь важно понять, какой контент должен присутствовать на сайте. Мы берем весь имеющийся контент и разбиваем его на группы, объединенные по смыслу и формату: например, «Статьи о животных» и «Статьи о людях» находятся в одном блоке, также как и «Блоги» «Фотоблоги» — в группе социальной активности пользователей. Если мы говорим о статьях, то они будут представлены по большей части в текстовом формате, в отличие, например, от блока «Фото дня».
Когда весь контент разделен на блоки, начинается процесс отбора — от некоторых мы избавляемся, некоторые объединяем. Чтобы сделать это правильно и оставить только действительно нужный контент, нужен опыт и понимание моделей поведения аудитории на сайте.
Навигация
Меню — самый важный элемент, который остается неизменным на протяжении всего существования сайта. Его можно проектировать отдельно от всего контента, так же, как и контент можно проектировать отдельно от меню. Но при объединении этих элементов важно сделать так, чтобы стилистически они соответствовали друг другу.
В случае с «Вокруг света» мы выбрали горизонтальное меню как более привычное уже существующим пользователям. В частности, на сайте «Вокруг света» навигацию разбили на три части: уровень 1 (основной), уровень 2 (дополнительный) и уровень 3 (системный). Контент первого уровня — самый важный, популярный и нужный. Как правило, это контентная группа «Статьи» – и именно на них мы и делаем акцент. В данном случае берем самый интересный контент и выносим его на первый план, в то время как разделы «Вход», «Личный кабинет» и другие подобные, которые в целом тоже относятся к первому уровню — отодвигаем на второй план. И уже в подвал мы вытаскиваем все самое ненужное.
Главная страница
Главная страница по традиции — это агрегатор всего самого важного. Фактически, это содержание сайта, все динамические обновляемые разделы, которые дают пользователю полную картину.
У каждой контетной единицы есть два формата отображения — preview и fullsize. До редизайна на сайте в отдельных блоках были разные шрифты, разная подача, разные расстояния и стилистика. Единственное, что было общим во всех блоках — использование оранжевого цвета. Если сравнить формат подачи статей на сайте «Вокруг света» до и после редизайна, можно заметить различия. Таким же образом мы прошлись по всем контентным блокам, аккуратно подравнивая, дорабатывая, приводя все элементы к единой стилистике.
Прототипирование
Для того, чтобы спроектировать главную страницу, необходимо для начала понять, какие элементы мы хотим на ней видеть. Затем набросать превью — но не слишком его детализировать, достаточно определиться с тем, какие типы элементов будут присутствовать в каждом блоке. Когда появляется понимание, как блоки будут выглядеть на странице, можно накидывать грубый функциональный прототип, композиционное расположение элементов. Когда функциональный прототип готов, его можно начинать заполнять графическими превью элементов, и оценивая, как они смотрятся вместе, уже формировать гайды — размеры шрифтов, заголовков, расстояний и так далее. На скриншоте показано, как от превью мы перешли к прототипу и к заполнению его графическими объектами.
Главную страницу мы делим на две части: сайд-бар и основная контентная часть. Деление на три колонки уже тяжеловато для восприятия, а одна колонка используется только на сайтах с небольшим количеством контента (как правило, это блоги). Сайд-бар в данном случае расположен слева — и здесь находится самый частообновляемый динамический контент. Справа мы размещаем «Фото дня», поскольку «Вокруг света» всегда публикует качественные и создающие атмосферу издания фотографии.
Новости
Новости – динамичный раздел, и мы поделили его на несколько категорий. Самая яркая — актуальные и горячие новости — выделена графически. Затем следуют менее горячие новости и архив. Стоит отметить, что способов отображения достаточно много, но наиболее понятные пользователю форматы – «списком» и «блоками». Для того, чтобы понять, какой формат отображения будет актуален для конкретного сайта, стоит посмотреть, какие форматы сейчас в тренде, что используют конкуренты, к чему привыкли пользователи.
Список статей
Блок «Статьи» – это коллектор всего контента в формате статей, который представлен бесконечным списком. Выделяем те опции, на которых необходимо сделать акцент — например, всё те же шикарного качества фотографии «Вокруг света», которые нельзя скрывать. Внизу страницы мы можем сделать кросс-блоки, которые ведут на соседние тематические разделы. Кроме того, у каждого раздела статей есть тематические новости — их мы выделяем слева.
Статья внутри
При работе с каждым блоком мы рассматриваем все возможные варианты. В частности, для формата статей есть целый ряд контентных блоков: заголовки первого и второго уровня, выделение, сноска, цитата, фото и видео и так далее. В соответствии с этим мы выставляем все основные блоки и стилистически их подгоняем к тем гайдам, которые выставляли при формировании функционального прототипа. В процессе создания каждого нового блока мы начинаем аккуратно подтюнивать всю линейку гайдов, не только новые информационные блоки, но и предыдущие — таким образом мы сохраняем единообразие и чистоту контента. Это очень важно, поскольку неаккуратный контент никто не читает, и чем аккуратнее подача, тем больше вероятность того, что пользователь дочитает его до конца. Особенно это касается больших текстов, которыми также славится «Вокруг света».
Реклама
Не стоит забывать о том, что практически все информационные ресурсы зарабатывают на рекламе. Типов баннеров — огромное количество.
Закладывать рекламные места необходимо уже на начальной стадии разработки прототипа. Мы не упомянули об этом в самом начале по одной простой причине — наша специфика разработки предполагает создание сайтов-конструкторов, внутри которых можно передвигать и менять блоки. В случае с «Вокруг света» мы разработали предложение для партнеров, которые могут разместить информацию о себе как в header, так в перед динамическими новостями, а также внутри статей в качестве спецпроектов. Рекламу, таким образом, можно интегрировать в проект разными способами, и она при этом не будет мешать восприятию контента.
Выводы
И если подходить к поставленной задаче последовательно и методично, любая, даже самая сложная задача, решаема. Любой редизайн предполагает под собой главную задачу: увеличение количества просмотра страниц и глубины просмотра страниц. На данный момент у «Вокруг света» этот показатель колеблется в районе 1,9, то есть в основном это стандартный сценарий, когда человек открыл главную, зашел на одну из статей и закрыл сайт. После внедрения тех изменений, которые мы реализовали в своем проекте редизайна, по опыту этот показатель может вырасти до 2,6-3,2. Если обобщать, что это будет реализовано за счет:
- структура сайта стала более прозрачной;
- главная страница стала агрегатором актуального контента;
- пользователь может находиться внутри одного раздела и пользоваться им как мини-сайтом, получая подсказки о релевантных материалах и соседних разделах;
- если мы даем человеку понятный контент, он меньше устает от его потребления и теряет внимание, и его внимания — и готов больше времени потратить на восприятие большего количества информации.
About the author
