Маленький дизайн-анализ больших блогов-2


Smashing Magazine продолжает обзор топ-блогов (по версии Technorati). В первой части обсуждались дизайн общего вида и выбор шрифтов. Сегодня объектом анализа будут навигация, представление информации, реклама и функциональность (RSS, облако тэгов, разбивка текста на страницы, и пр.).

Реклама: Закажите рекламу в блогосфере у студии SMOpro. Вы получите собственного менеджера и отчеты еженедельно.

3. Структура
3.1 — Меню навигации: сверху, слева или справа?
Несколько лет назад, до того, как блоги наводнили интернет, существовало неписанное правило — размещать меню навигации слева. Сегодня топ-блоги не соблюдают это правило.

  • 58% блогов — вертикальная навигация справа — Scobleizer, TPM, CrunchGear, Neatorama, Google Blog, DailyKos, Engadget.
  • 52% блогов — горизонтальная навигация сверху (часто в сочетании с навигацией справа) — A List Apart, Google Blogoscoped, Dooce, GigaOM, TreeHugger, Smashing Magazine, Mashable, ReadWriteWeb, Ars Technica, TechCrunch, Huffington Post.
  • 12% блогов — вертикальная навигация слева.

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

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

Пользователи предпочитают вертикальную правостороннюю навигацию, потому что это разумно с эргономической точки зрения, т.к. 70-95% людей — правши.

3.2. — Количество постов на главной странице
По мнению пользователей, нет ничего хуже, чем информационная перегрузка на некоторых сайтах. Известно, как сложно найти оптимальное соотношение между перегрузкой и размером статьи.

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

Важно представить оптимальное количество контента для того, чтобы удержать посетителей на вашем сайте. Но что более важно, нужно быть уверенным в том, что они снова вернутся на ваш сайт.
Итак, количество постов на главной странице:

  • 28% блогов — 14-18 постов — Tuaw, Slashfilm, Gizmodo, TMZ, Lifehacker, ArsTechnica.
  • 26% блогов — 10-12 постов — ProBlogger, TechCrunch, Dooce, ReadWriteWeb, CrunchGear.
  • 14% блогов — 20-26 постов — ValleyWag, Seth Godin, Search Engine Land.
  • 10% блогов — 2-6 постов — A List Apart, Smashing Magazine, CopyBlogger.
  • 10% блогов — 27-35 постов — Kottke, Boing Boing, ThinkProgress, Neatorama.
  • 8% блогов — 7-9 постов — GigaOM, Mashable, TreeHugger.
  • 2% блогов — 36+ постов — Andre Sullivan, 50 posts.

3.3 — Ссылки по теме и популярные посты
Авторы обзора затруднились определить тенденцию к размещению ссылок на статьи по теме.

  • 54% блогов — публикуют ссылки на статьи по теме — GigaOM, CopyBlogger, ProBlogger, ReadWriteWeb, Mashable, Engadget, TreeHugger.
  • Остальные — не публикуют — Dooce, TechCrunch, BoingBoing.
  • 48% блогов — публикуют популярные посты — Zen Habits, CopyBlogger, DailyKos, Mashable, ReadWriteWeb, Smashing Magazine and Huffington Post.
  • 16% блогов — публикуют свежие комментарии — ReadWriteWeb, BoingBoing, TreeHugger, TMZ, Tuaw.
  • Но большинство блогов не публикует последние комментарии на главной странице.

3.4. — Нижний колонтитул
Большинство вебсайтов размещает здесь второстепенную информацию, например, … W3C-hints, помощь, права собственности и ссылки на страницу «О нас».

Нижний колонтитул может содержать:

  • 90% блогов — авторское право, правовые вопросы, правила использования.
  • 40% блогов — ссылки на страницу «О нас» — GigaOM, TMZ, ProBlogger, ReadWriteWeb, Ars Technica.
  • 38% блогов — ссылка на рекламную страницу — Slashfilm, Dooce, GigaOM, ReadWriteWeb, Gizmodo.
  • 30% блогов — ссылка на страницу с контактной информацией — Kottke, GigaOM, ReadWriteWeb, ProBlogger.
  • 22% блогов — ссылка на RSS-подписку — Slashfilm, Ars Technica, BoingBoing.
  • 22% блогов — ссылка на FAQ или Помощь — Gizmodo, ArsTechnica, Andrew Sullivan.
  • 14% блогов — окно поиска — Dooce, Tuaw, Engadget.
  • 10% блогов — ссылка на верхнюю часть страницы — TreeHugger, Zen Habits.
  • 10% блогов — ссылка на главную страницу — Kottke, CrunchGear, Joystiq, TPM.
  • 8% блогов — ссылка на карту сайта — Andrew Sullivan, Wired, Tecaucus @ NY Times.
  • 44% блогов — дополнительные ссылки — Zenhabits (+ подобие карты сайта), Neatorama (опции по навигации), Problogger (+ ссылка на страницу «О сайте»).
  • 58% блогов — используют «стандартный» минималистичный подход (например, TechCrunch).
  • Остальные — не используют нижний колонтитул вообще.

4. Реклама
В большинстве случаев, реклама нужна для поддержки сайта, оплаты счетов за трафик, поддержки редакторского штата, и поэтому позволяет издателям публиковать контент. Большинство пользователей готовы к навязчивой и разноцветной рекламе рядом с контентом, если взамен они находят нужную информацию. Но где проходит эта граница и как топ-блоги размещают рекламу на своих сайтах?

4.1 — Количество рекламы на странице
Плохие новости: блогосфера сильно заражена рекламой. Только небольшое количество сайтов не имеет рекламы вообще и в большинстве случаев на одной странице размещается 2-3 рекламных блока. Обычно блоги сочетают спонсорскую рекламу с текстовой ссылкой (подобно Google AdSence). Раздражающую контекстную рекламу (ссылки с всплывающими окнами) можно найти в 12% блогов.

Количество рекламных блоков на странице поста обычно равно количеству блоков на главной странице. Причина: многие издатели стремятся использовать рекламные текстовые ссылки (Google Ad Sense) в посте или после него.

  • 5,48 рекламных блока на главной странице — Mashable (20 рекламных блоков, это максимальное число), TechCrunch (15).
  • 5,96 рекламных блоков на странице поста.
  • 68% блогов используют Google AdSense, исключение — Kottke, Scoble, Joystiq, Tuaw, CopyBlogger, Valleywag, GigaOM.

Главный приз присуждается Kotaku за самый широкий блок, его ширина 1000 px и расположен в середине страницы.

4.2. — Размещение рекламы в посте
Реклама обычно размещается после поста. Реклама в тексте публикации — все еще распространенное явление, однако, наблюдается реже (относительно).

  • 76% блогов не размещает рекламу в тексте статьи (но она может быть помещена перед ней или после нее) — Dooce, A List Apart, ReadWriteWeb, Mashable, TechCrunch, BoingBoing.
  • 44% блогов — реклама после статьи и перед комментариями — ProBlogger, Zen Habits, Engadget, Smashing Magazine, Tuaw, CopyBlogger, GigaOM.
  • 18% блогов — реклама внутри текста — Huffington Post, Yanko, PerezHilton, Slashfilm, Search Engine Land.
  • 6% блогов — реклама перед заголовком и перед текстом — Smashing Magazine, Neatorama, Yanko.

4.3. — Размещение рекламы на странице
Кроме текста рекламу можно увидеть … везде: в верхней и в правой частях страницы, и даже внизу страницы. В 12% блогов рекламу можно увидеть везде — вверху, внизу, слева, справа от основного контента. Это плохо. Но, по-видимому, пользователи привыкли к этому и упрямо игнорируют рекламу, обращая внимание только на контент.

  • 88% блогов — реклама в правой части — GigaOM, CopyBlogger, Engadget, TechCrunch, Smashing Magazine.
  • 42% блогов — реклама вверху — Gizmodo, Talking Points Memo, Autoblog, TreeHugger, TMZ, PerezHilton.
  • 34% блогов — реклама в левой части — Lifehacker, Mashable, Gizmodo.
  • 24% блогов — реклама внизу страницы — Andrew Sulivan, Tuaw, Wired.
  • 8% блогов — реклама отсутствует — Google Blog, Think Progress, Seth Godin.

5. Функциональность
Для достижения своих изначальных целей дизайн должен быть не только «дружественным», но и функциональным. Все важные функции должен быть доступны, четко видны, но и пользователь должен обладать элементарной интуицией, как, что и где искать. Например, новые посетители должны знать, где находятся кнопка RSS-подписки, социальные кнопки, окно поиска и как связаться с автором блога.

5.1. — Социальные кнопки и иконки
Социальным иконкам удалось стать популярными, хотя они еще далеки от того, чтобы стать стандартом. Иконки используются немного чаще, чем простые текстовые ссылки. Веб-службы типа Addthis популярны, т.к. они скрывают популярные социальные кнопки за одной кнопкой. Преимущество такого подхода: текст поста остается незагруженным и позволяет хорошо видеть нужную опцию. Недостаток: некоторые пользователи могут не найти способ проголосовать в социальной сети.

  • 54% блогов — используют социальные кнопки после поста — GigaOM, ProBlogger, Mashable, Ars Technica, BoingBoing, ReadWriteWeb.
  • 38% блогов — не используют социальные кнопки — Dooce, Google Blogoscoped, Scobleizer, Political Ticker.
  • 8% блогов — используют социальные кнопки перед постом — Smashing Magazine, TreeHugger, The Huffington Post.

5.2. — RSS-подписка: расположение кнопки и ее внешний вид
Кнопка RSS-подписки, — это, пожалуй, самый важный элемент дизайна, который отвечает за приток посетителей в блог. Главная причина создания яркой кнопки RSS-подписки в эпоху Web 2.0 — эти кнопки должны быть видны сразу, с первого взгляда.
Поэтому неудивительно, что кнопки RSS-подписки до сих пор можно увидеть в верхней части блога.

  • 38% блогов — кнопка RSS-подписки в верхней части блога.
  • 28% блогов — кнопка RSS-подписки в верхней части сайдбара.
  • 8% блогов — кнопка RSS-подписки в средней части сайдбара.
  • 14% блогов — кнопка RSS-подписки в нижней части сайдбара.
  • 8% блогов — кнопка RSS-подписки в нижней части страницы.
  • 66% блогов — стандартная кнопка RSS-подписки.
  • Остальные блоги используют простые текстовые ссылки.
  • 64% блогов — имеют только один RSS-feed.
  • Часто имеется возможность подписки на комментарии и тэги, но только немногие блоги предлагают несколько каналов подписки (например, подписка на определенные темы).
  • 56% блогов — наряду с RSS можно подписаться через электронную почту.
  • 24% блогов — публикует количество RSS-подписчиков, обычно через Feedburner.
  • Пользователи WordPress могут использовать Feedcount как альтернативу и выбрать собственный дизайн кнопки. Но Feedburner здесь все же необходим.

5.3. — Облако тэгов
Облако тэгов дает общее представление о популярных темах блога и их удельном весе в блоге. Однако, 90% блогов вместо этого применяют стандартную навигацию. Предположительно, для этого просто нет места, поэтому если облачко и применяется, то размеры его маленькие и компактные.

  • Облаков тэгов имеют 3 блога — The Huffington Post, ReadWriteWeb и Joystiq. Больше информации про облако тэгов — Tag Clouds Gallery: Examples And Good Practices.

5.4. — Разбивка текста на страницы
Удивительно, но только

  • 22% блогов — используют пагинацию — Dooce, GigaOM, Mashable, ReadWriteWeb. В большинстве случаев
  • 60% блогов — используют стандартную навигацию, т.е. ссылки «следующая» и «предыдущая».

Разбивка текста на страницы имеет много достоинств, т.к. показывает посетителям объем доступного контента и позволяет им быстро находить предыдущие публикации.

  • 6% блогов — календарная навигация — Dooce, GigaOM, Mashable, ReadWriteWeb.
  • 12% блогов — архивный раздел — A List Apart, TPM, The Huffington Post.

5.5. — Окно поиска

  • 62% блогов — окно поиска расположено в правом верхнем углу. Из них в
  • 58% блогов — окно поиска расположено в «шапке».
  • Остальные блоги — окно поиска в верхней части сайдбара.
  • 16% блогов — окно поиска в средней и нижней части сайдбара.
  • 1 блог — окно поиска в нижнем колонтитуле — Dooce.
  • 1 блог — окно поиска отсутствует — Kottke.

5.6. — Ссылка на страницу контактов
Большинство блогов размещает ссылку на страницу контактов в сайдбаре. Обычно эта ссылка дается среди других опций навигации в правой или левой части бокового меню. Иногда для этих целей применяются иконки (особенно иконка электронной почты).

  • 52% блогов — страница контактов в сайдбаре — Engadget, TMZ, DailyKos, Smashing Magazine.
  • 40% блогов — страница контактов в «шапке» — A List Apart, Dooce, CopyBlogger, ProBlogger, Ars Technica, Tech Crunch.
  • 30% блогов — страница контактов в нижнем колонтитуле — ReadWriteWeb, ProBlogger, Mashable, TMZ.
  • 4% блогов — страница контактов «спрятана» в разделе «О блоге» — TreeHugger.

Необходимо отметить следующее:

  • 64% блогов — контакт только через электронную почту.
  • 28% блогов — необходимо заполнение контактной формы.
  • 8% блогов — контакт через заполнение формы и электронную почту — Yanko, TechCrunch.
  • 1 блог — просит оставить комментарий в блоге для связи с автором — Zen Habits.

5.6. — Соблюдение топ-блогами норм и стандартов
До начала исследования авторы считали, что для большинства топ-блогов контент более важен, чем дизайн. Но они никак не ожидали, что только 4% блогов действительно соответствуют стандартам.

  • 96% блогов — не соответствует стандартам.
  • 8% блогов — имеют более 500 ошибок — Ben Smith’s Blog, Neatorama, Search Engine Land.
  • 28% блогов — имеют 200-499 ошибок — BoingBoing, ProBlogger, Google Blog, Engadget.
  • 24% блогов — имеют 100-199 ошибок — TreeHugger, Mashable, ReadWriteWeb, Gigazine, TUAW.
  • 22% блогов — имеют 50-99 ошибок — TechCrunch, CopyBlogger, Dooce, Ars Technica, Lifehacker.
  • 10% блогов — имеют 1-49 ошибок — Kottke, GigaOM, AutoBlog, Google Blogoscoped.
  • 4% блогов — не имеют ошибок — A List Apart.

«Лидеры» по ошибкам:

  • Ben Smith’s Blog — 2286 ошибок — нет Doctype.
  • Neatorama — 1428 ошибок.
  • Search Engine Land — 1116 ошибок.

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

Итоги
Авторы обзора подчеркивают, что результаты не следует воспринимать в качестве руководства для эффективного блог-дизайна. Это — тема другой статьи.

  • 58% блогов — имеют вертикальную правостороннюю навигацию.
  • 52% блогов — имеют горизонтальную навигацию в верхней части сайта.
  • 62% блогов — публикуют фрагменты 10-20 постов на главной странице.
  • 50% блогов — публикации по теме и популярные посты публикует каждый второй блог.
  • 90% блогов — имеют информацию об авторском праве.
  • 40% блогов — имеют ссылки на страницу «О блоге».
  • 30% блогов — имеют страницу с контактной информацией.
  • 5,84 рекламных блока — размещаются на главной странице топ-блогов.
  • 5,96 рекламных блока — размещается на странице поста.
  • 76% блогов — не содержат рекламы.
  • 88% блогов — реклама в правой части.
  • 66% блогов — RSS-кнопки расположены в верхней части.
  • 66% блогов — используют «стандартные» RSS-иконки, нежели текстовые ссылки.
  • 64% блогов — используют только RSS вместо различных видов подписки.
  • 90% блогов — не используют облако тэгов.
  • 22% блогов используют разбивку текста на страницы.
  • 62% блогов — окно поиска размещено в правом верхнем углу.
  • 96% блогов — не соответствуют стандартам.

Вот такая статистика, а она, как известно, знает все.

Ссылки по теме:

Блоги мира, Теория блогинга

Related Articles

10 комментариев

10 Replies to “Маленький дизайн-анализ больших блогов-2”
  1. АлКрылов:

    Очень интересная статистика,если проанализировать можно выяснить много нового.

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

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

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

    Но все-таки к таким «обзорам» отношусь с прохладцей — без должной степени анализа они — просто список «10 самых идиотских преступлений века». У вас-то какое мнение на эту тему, Майя? 🙂

    У вас, кстати, получилось 10 из 14 пунктов самых популярных решений, не считая касающихся рекламы, которой пока нет.

  3. Сергей, спасибо за комментарий!

    Как всегда, качественный и глубокий анализ.

    Но все-таки к таким “обзорам” отношусь с прохладцей — без должной степени анализа они — просто список “10 самых идиотских преступлений века”. У вас-то какое мнение на эту тему, Майя? 🙂

    Я думаю, что анализ все-таки будет. Авторы уже в двух постах подчеркнули, что это — тема отдельной статьи. Что я думаю по этой теме? С результатами таких обзоров знакомиться все-таки нужно, чтобы иметь общее представление о том, как это делают другие. Честно говоря, начала читать и переводить, чтобы посмотреть, насколько мой блог «вписывается в парадигму». Хоть текст и несложный, но длинный, поэтому руки не дошли до аналитики в Панораме. Спасибо Вам, Сергей, Вы это сделали за меня.

    По рекламе — тут недавно просили разместить рекламу про чугунные радиаторы. Пока вот так… 😆

  4. tata:

    Спасибо за анализ. Меня в рекламе раздражают только всплывающие окна и прочие неожиданности. Совсем не против нескольких баннеров, но строго по теме блога. Даже интересно.

  5. Интересная статья.
    И очень удивило, что 76% блогов — не содержат рекламы.
    Социальные кнопки и иконки считаю излишеством. Просто мусор. Все эти иконки цепляют взгляд, а пользы ноль. Если человек захочет вернуться к статье/блогу, он просто добавит их в избранное.

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

    И еще по поводу оформления статей. Раньше вы оформляли свои вставки курсивом — не забывайте это выделять. И так вместо традиционного «Источник: ….» вы ставите ссылку на оригинал (причем анкор иногда поставлен не совсем верно в смысле понятности — например, здесь «_Smashing_Magazine_ продолжает обзор топ-блогов», а лучше «Smashing Magazine продолжает _обзор_топ-блогов_»).

  7. Сергей,

    большое спасибо за советы и рекомендации!

    по поводу оформления статей. Раньше вы оформляли свои вставки курсивом — не забывайте это выделять. И так вместо традиционного “Источник: ….” вы ставите ссылку на оригинал (причем анкор иногда поставлен не совсем верно в смысле понятности — например, здесь “_Smashing_Magazine_ продолжает обзор топ-блогов”, а лучше “Smashing Magazine продолжает _обзор_топ-блогов_”).

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

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

    Я уже думала по этому поводу, что надо расширять анализ ино-блогосферы путем сравнения с ру-блогосферой. Но пока у меня физически не хватает времени делать это самой (в смысле, заниматься рунетом), а беспокоить кого-то из больших блоггеров стесняюсь (у них, наверно, своих дел хватает). 😐

  8. Да не надо стесняться (тем паче, что без общения нет блоггинга как такового). Блог, конечно, пока развивающийся и собственный стиль пока не заимевший, но качество материалов и их интересность — на высоком уровне. Ровно как и растущие показатели ТИЦ и PR :). Если просить кого-нибудь из блоггеров оставить один абзац в 500 знаков, со ссылкой на него родимого, да еще и забесплатно — кто откажется? При этом, такое мнение — не просто комментарий в блоге, но действительно элемент контента. Вы попробуйте, чтобы не быть похожими на многие другие переводные блоги.

  9. torg:

    У меня сайт не сильно посещаем, но я готов сотрудничать в блогах, если что.

  10. mitus66:

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

Comments are closed.