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% блогов - не соответствуют стандартам.
Вот такая статистика, а она, как известно, знает все.
Ссылки по теме:
- Маленький дизайн-анализ больших блогов
- Топ-25 самых “ценных” блогов.
- Как провести анализ блога
- 20 самых важных разделов успешного блога
Похожие посты:
- Маленький дизайн-анализ больших блогов
- 5 перспективных направлений в мировом блоггинге
- Топ-25 самых “ценных” блогов
- Персональный блог? 6 аргументов “против”
- Какие блоги и Social Media читают журналисты США
Теги: дизайн блогов, реклама в блогосфере, теория блоггинга, топ-50 Technorati
августа 3, 2008 at 15:40
Очень интересная статистика,если проанализировать можно выяснить много нового.
августа 3, 2008 at 18:34
Хм, если по первым пунктам, то там все ясно. Меню справа навязаны нам юзабилити-мастерами, мнение которых - при чтении слева-направо взгляд должен натыкать в первую очередь на контент, да и большинство правшей в нашем мире привыкли иметь функциональность именно по правую руку. Поэтому большинство шаблонов блогов так и делалось - все-таки дизайнеры обычно падки на слово “юзабилити”, хотя в некоторых областях типа “вконтактов” разных тенденция левостороннего меню сохранилась. Ну там замороченность на содержание ниже.
Количество постов на страницу также должно зависеть от размера самих постов - может быть три длинных статьи без ката, те же длинные статьи, но 15 с катом, или короткие заметки хоть до сотни. Здесь, конечно влияет, не только загруженность для взгляда, но и скорость загрузки самой страницы и неудобность скроллинга вообще. Да и под поисковики тоже надо ориентироваться, а они не любят сильно весящих страниц.
Все остальное - по большей части украшательство, хотя имеет прямое отношение к удобству использования (ух, вот как оказывается можно “юзабилити” на русский перевести :). Ориентирование на свою направленность контента и пользователя из целевой аудитории и позволяет сделать решение в пользу того или иного метода. Ну мы на своих проектах тоже стараемся за конкурентами поглядывать, чтобы понять эффективность отдачи.
Но все-таки к таким “обзорам” отношусь с прохладцей - без должной степени анализа они - просто список “10 самых идиотских преступлений века”. У вас-то какое мнение на эту тему, Майя?
У вас, кстати, получилось 10 из 14 пунктов самых популярных решений, не считая касающихся рекламы, которой пока нет.
августа 4, 2008 at 15:30
Сергей, спасибо за комментарий!
Как всегда, качественный и глубокий анализ.
Я думаю, что анализ все-таки будет. Авторы уже в двух постах подчеркнули, что это - тема отдельной статьи. Что я думаю по этой теме? С результатами таких обзоров знакомиться все-таки нужно, чтобы иметь общее представление о том, как это делают другие. Честно говоря, начала читать и переводить, чтобы посмотреть, насколько мой блог “вписывается в парадигму”. Хоть текст и несложный, но длинный, поэтому руки не дошли до аналитики в Панораме. Спасибо Вам, Сергей, Вы это сделали за меня.
По рекламе - тут недавно просили разместить рекламу про чугунные радиаторы. Пока вот так…
августа 5, 2008 at 7:47
Спасибо за анализ. Меня в рекламе раздражают только всплывающие окна и прочие неожиданности. Совсем не против нескольких баннеров, но строго по теме блога. Даже интересно.
августа 5, 2008 at 11:58
Интересная статья.
И очень удивило, что 76% блогов - не содержат рекламы.
Социальные кнопки и иконки считаю излишеством. Просто мусор. Все эти иконки цепляют взгляд, а пользы ноль. Если человек захочет вернуться к статье/блогу, он просто добавит их в избранное.
августа 5, 2008 at 13:54
Майя, а вы попробуйте начать создавать себе образ в российской блогосфере. Скажем, к переводу буржуинской статьи можно прицеплять анализ состояния российских блогов, а еще лучше - просить оставить комментарий в виде отзыва в конце статьи кого-нибудь из известных блоггеров.
И еще по поводу оформления статей. Раньше вы оформляли свои вставки курсивом - не забывайте это выделять. И так вместо традиционного “Источник: ….” вы ставите ссылку на оригинал (причем анкор иногда поставлен не совсем верно в смысле понятности - например, здесь “_Smashing_Magazine_ продолжает обзор топ-блогов”, а лучше “Smashing Magazine продолжает _обзор_топ-блогов_”).
августа 5, 2008 at 15:13
Сергей,
большое спасибо за советы и рекомендации!
Ага, иногда в спешке забываю выделить курсивом и правильно поставить анкор. А то, что идет курсивом, порой так трудно и долго пишется. Каких-то всего несколько строчек, а так тяжело даются…
Я уже думала по этому поводу, что надо расширять анализ ино-блогосферы путем сравнения с ру-блогосферой. Но пока у меня физически не хватает времени делать это самой (в смысле, заниматься рунетом), а беспокоить кого-то из больших блоггеров стесняюсь (у них, наверно, своих дел хватает).
августа 5, 2008 at 15:26
Да не надо стесняться (тем паче, что без общения нет блоггинга как такового). Блог, конечно, пока развивающийся и собственный стиль пока не заимевший, но качество материалов и их интересность - на высоком уровне. Ровно как и растущие показатели ТИЦ и PR :). Если просить кого-нибудь из блоггеров оставить один абзац в 500 знаков, со ссылкой на него родимого, да еще и забесплатно - кто откажется? При этом, такое мнение - не просто комментарий в блоге, но действительно элемент контента. Вы попробуйте, чтобы не быть похожими на многие другие переводные блоги.
октября 7, 2008 at 3:36
У меня сайт не сильно посещаем, но я готов сотрудничать в блогах, если что.