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

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