Международная блогопанорама

Smashmagazine провел маленькое исследование на тему общих подходов к дизайну блогов. Для объективности были проанализированы Top-50 блогов Technorati. Популярные блоги – это по определению примеры эффективного и функционального дизайна.

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

Внешний вид
Какой внешний вид у блогов? 2 или 3 колонки? Как они расположены – по центру? Или их расположение может варьироваться? Используются ли таблицы?

1.1. Количество колонок
Вопрос о количестве колонок, 2 или 3, почти философский. К сожалению, единого совета нет. Это зависит от контекста и целевой группы, на которую ориентирован блог. В некоторых случаях практически невозможно провести границу между главным и второстепенным контентом, разделив их на две колонки. В этом случае нужно разделить вторую колонку (сайд-бар) на две части. Нужно сказать, что именно этот прием чаще и используют. В обоих случаях нужно сделать структуру по возможности прозрачной и ясной. Деление на 4 колонки – не всегда хорошая идея.

Результаты исследования:

• 58% блогов используют 3 и более колонки – TalkingPointsMemo, CopyBlogger, Mashable, Lifehacker
• 42% блогов используют 2 колонки – ZenHabits, GigaOM, Google Blog, SethGodin, BoingBoing.

Из 50 блогов можно выбрать те, для которых характерны необычные решения. Dridgereport использует то, что называют “anti-layout”. TalkingPointsMemo используют иногда 2, иногда 3 или 4 колонки. В последнем случае мы просто не можем понять, почему заголовки некоторых статей остаются без внимания.

1.2. Выравнивание по центру или по середине
В последнее время наблюдалась тенденция к размещению текста по центру – причиной этого было разное разрешение экрана. Все большее количество пользователей стало переходить на более высокое разрешение, поэтому более распространенным стало одинаковое соотношение белого пространства и слева, и справа. Таким образом, происходит акцентирование внимания на контенте, размещенном в центре. Результаты исследования показывают, что размещение по центру используют в 94%. Например, ReadWriteWeb, CopyBlogger, Problogger, Mashahble, ArsTechnica, TechCrunch, HuffingtonPost.

1.3. Фиксация
Авторы обзора не ожидали, что существует прочная тенденция к фиксированному внешнему виду блога (основанному на пикселях). Из 50 топ-блогов ни один не использует гибкий формат (ширина зависит от увеличения размера шрифта) и только небольшая часть блогов применяет элементы (внешний вид зависит от размера окна браузера). 92% используют фиксированный формат, 8% используют элементы гибкого формата (Engadget, Smashing Magazine, Gigazine, Coorks and Liars).

1.4. Ширина
Были проанализированы общие черты фиксированного формата, а именно его ширина. 

• 9% – меньше 800 px – PostSecret, SethGodin, GoogleBlog, BeppeGrillo.it.
• 15% – 801-900 px – Neаtorama, Kottke, DailyKos, Perezhilton, TUAW, YankoDesign, Scobleizer.
• 20% – 901-950 px – HuffingtonPost, BoingBoing, TreeHugger, Dooce, Blogoscoped, SearchEngineLand.
• 56% – 951-1000 px – ArsTechnica, Lifehacker, TechCrunch, Problogger, A List Apart, TMZ, Wired, GigaOM, Joystig, Zenhabits, Copyblogger, Consumerist, Slashfilm.

Вывод: тенденция к размеру 951-1000 px.

1.5. Соотношение между предметным содержанием и внешним видом.
Необходим, по крайней мере, один сайдбар, который содержит вторичный контент, и он здесь должна быть навигация для пользователей. Но как сделать так, чтобы читателю было удобно читать и возможность оптимальной навигации? Иными словами, каким должно быть соотношение между главным контентом и общим видом сайта? Чем меньшую площадь занимает главный контент, тем больше становится сайдбар, и наоборот. Так где же проходит линия между главным и второстепенным?
Например, ширина внешнего вида BoingBoing - 870 px, ширина основного контента – 550 px. Коэффициент – 0,63.
96% блогов использует, минимум, половину всего внешнего вида для основного контента. Исключение – CopyBlogger (0,48), SlashFilm (0,48).

• 54% блогов использует 50-60% площади для основного контента – Mashable, Lifehacker, Kottke, Blogoscoped, A List Apart, BoingBoing, DailyKos, TreeHugger, Scobleizer, Problogger, TUAW, bits.blogs.nytimes.com.
• 46% блогов использует 60-70% площади для основного контента – Ars Technica, TechCrunch, GigaOM, Dooce, Zenhabits, CNN Political Ticker, CrunchGear.

В среднем, 58% площади используется для основного контента.

1.6. CSS или табличный вариант?
Очевидно, что популярные блоги, которые обновляются много раз в день, должны использовать CSS, т.к. это дает возможность лучшего управления и сокращает число загрузок. Поэтому, неудивительно, что

• 90% 50-топ блогов используют CSS.
• 10% использовали таблицы или комбинацию таблиц с CSS – PerezHilton, Neatorama, CNN Political Thicker, BeppeGrillo, TreeHugger. 

2. Оформление
Контент рулит. Это верно для обычных веб-сайтов и для блогов. Дизайнер отвечает за то, чтобы читателю было удобно читать или, по крайней мере, просматривать посты. И вот здесь вступает в действие оформление. Как достичь читабельности контента? Какой шрифт использовать? Какой размер шрифта?
2.1. Темное на светлом или светлое на темном?
Как и ожидалось, 98% топ-блогов используют темный текст на белом фоне. Только PostSecret используют темный фон со светлым текстом. Но это решение хорошо соответствует теме сайта.

2.2. Количество знаков в строке
Считается, что оптимальное количество знаков в строке 52-68, включая знаки пунктуации и пробелы. Есть и другое мнение – длина строки не влияет на юзабилити. Поскольку нет единого мнения, то дизайнеры экспериментируют с длиной строки.

• 10% блогов – 65-74 знаков в строке – PostSecret, BeppeGrillo, PerezHilton, Scobleizer, Blogoscoped.
• 18% блогов – 75-84 знаков в строке – Dooce, Blogs.nytimes.com, Joystig, CopyBlogger, TUAW, Slashfilm.
• 34% блогов – 85-94 знаков в строке – Lifehacker, HuffingtonPost, Kottke, ArsTechnica, BoingBoing, Seth Godin, Treehugger, Problogger.
• 18% блогов – 95-104 знаков в строке – Mashable, ReadWriteWeb, Smashing Magazine, Google Blog, A List Apart, SearchEngineLand.
• 16% блогов – более 105 знаков в строке – Engadget, TechCrunch, GigaOM, Wired, TMZ.

На основании этих результатов можно с уверенностью предположить, что самая часто встречающаяся длина строки (не обязательно оптимальная) – 80-100 знаков в строке. Следует отметить, что 100% блогов использует выравнивание влево.

2.3. Тип шрифта
Sans Serif стал de facto стандартом для изображения текста на экране в онлайн-формате. Считается, что этот тип шрифта наиболее компактно смотрится на экране. Итак, как это отражается в текстах популярных блогов?

• 34% блогов используют шрифт Verdana (sans serif) – A List Apart, Kottke, TUAW, CopyBlogger, Dooce, ArsTechnica, TechCrunch, Smashing Magazine.
• 24% блогов – Lucida Grande (sans serif + Mac OS X) – Zenhabits, Mashable, Lifehacker, CrunchGear, Thinkprogress.
• 18% блогов – Arial (sans serif) – RearWriteWeb, Engadget, Google Blog, CNN Political Thicker.
• 14 блогов – Georgia (serif) – Scobleizer, GigaOM, Wired, BoingBoing, HuffingtonPost.
• 6% блогов – Trebuchet MS (sans serif) – Andrew Sullivan, SethGodin, PostSecret.
• По одному разу встретились Helvetica Neue (Problogger) и Times New Roman (Talking Points Memo).

2.4. Размер шрифта
Чем больше размер шрифта, тем легче читать текст на веб-странице. Но при крупном размере шрифта сложнее читать длинные тексты, т.к. нужно часто прокручивать скролл, а это утомляет глаза. Так какой же размер шрифта является оптимальным?

• 34% блогов использует размер 12 px – SearchEngineLand, CopyBlogger, Zenhabits, Valleywag, Lifehacker, HuffingtonPost, BoingBoing, SethGodin, Google Blog.
• 30% - 13 px - Consumerist, CopyBlogger, Zenhabits, Valleywag, Lifehacker, Huffington Post, BoingBoing, SethGodin, Google Blog.
• 14% – 14px – TPM, GigaOM, Wired, ReadWriteWeb, Gigazine, Problogger.
• 12% – 11 px – A List Apart, Kottke, Neatorama, Dooce, TecCrunch, DailyKos.
• 4% – 15 px – Scobleizer.
• 10, 16, 17 px – такие блоги встретились только по одному разу.

2.5. Тип шрифта для заголовка
Шрифты группы sans serif используются для текста поста, а для заголовков – serif.

• 30% блогов – Arial (sans-serif) – CNN Political Thicker, Scobleizer, TPM, Crooks and Liars, Joystig, Dooce, PerezHilton, ReadWriteWeb, Engadget, Google Blog, TreeHugger.
• 22% – Georgia (serif) – A List Apart, Andrew Sullivan, Blogs.nytimes.com, GigaOM, Wired, Huffington Post, BoingBoing.
• 8% – Lucida Grande (sans-serif) – Tuaw, ThinkProgress, Lifehacker, Crunchgear.
• 6% – Verdana (sans-serif) – Blogoscoped, Neatorama, DailyKos.
• 6% – Trebuchet MS (sans-serif) – Slashfilm, Postsecret, SethGodin.
• 4% – Helvetica Neue (sans-serif) – CopyBlogger, ProBlogger.
• По одному разу встретились Calibri – SearchEngineLand, American Typewriter – Valleywag, Lucida Sans Unicode, Franklin Gothic Medium, Tahoma – TechCrunch.
  
• В Kottke заголовков нет.

2.6. Размер заголовков
Чем больше заголовок, тем больше значения ему придается. Но, слишком много заголовков перегружают внимание читателя и ему становится сложнее воспринимать информацию. Практическое правило – если на главной странице много постов, то нужно уменьшить размер заголовков и выделить их визуально, например, привлекающим внимание цветом.

• 24% блогов – 20-22 px – BoingBoing, PerezHilton, Blogoscoped, Google Blog, TechCrunch, ReadWriteWeb.
• 22% блогов – 23-25 px - CopyBlogger, ProBlogger, Lifehacker, Mashable.
• 22% - 17-19 px – Tuaw, Scobleizer, TreeHugger, A List Apart, Gizmodo.
• 16% – 14-16 px – YankoDesign, DailyKos, ArsTechnica, SethGodin.
• 6% – 26-29 px – Engadget, GigaOM, Wired, Dooce.
• 0% – 10-13 px.
• 0% – 30-31 px.
• 32 px – HuffingtonPost.
• 34 px – Zenhabits.
• Нет заголовков – Kottke.
• 44 px – Smashing Magazine – победитель в категории “Самый крупный заголовок”.

Вывод – лучше всего воспринимаются заголовки размером 17-25 px.

Итоги

• Крупные блоги используют 3 колонки – 58%.
• Внешний вид – по центру – 94%.
• Фиксированная ширина – 92%.
• Ширина экрана – 951-1000 px.
• 58% сайта используется для размещения основного контента.
• Использование CSS – 90%.
• Наиболее частая длина строки – 80-100 знаков.
• Verdana, Lucida Grande, Arial и Georgia используются для текста публикации – 90%.
• Размер шрифта для текста – 12-14 px – 78%.
• Arial и Georgia – используются для заголовков – 52%.
• Размер заголовков – 17-25 px.

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

В глазах от цифр зарябило… Лично я предпочитаю 2-колоночный формат, шрифт Times New Roman, размер шрифта – 14, выравнивание влево. Мне так читать удобнее.

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

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

Похожие посты:

• Маленький дизайн-анализ больших блогов-2
• 5 перспективных направлений в мировом блоггинге
• Интервью ProBlogger Darren Rowse для блога Guy Kawasaki
• 20 блогов в закладки фрилансера
• Top-50 самых влиятельных леди-блоггеров мира

Теги: дизайн блогов, оптимальное количество знаков в строке, оптимальный шрифт в блоге, топ-50 Technorati