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

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


Теория блогинга

Related Articles

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

6 Replies to “Маленький дизайн-анализ больших блогов”
  1. блоггер из Воронежа:

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

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

    бужу ждать след статью

  2. Любопытный обзор 🙂 Сам думаю завести пару блогов, поэтому с интересом изучил как их оформляет большинство топ-блоггеров…

  3. Я тоже за то чтоб придерживаться левого края, мониторы у всех разные, и двигать не всегда удобно при чтении страницу, а правую колонку можно отдельно пересмотреть..

  4. Интересная и познавательная статья. Мне понравилась.

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

    А стоит или не стоит соблюдать красные строки в начале каждого абзаца?
    Я думаю, что — нет, по крайней мере, в оформлении главной страницы.

    Еще неуместно чередовать один абзац курсив, следующий вообще другой шрифт, другой размер.

    Осторожным нужно быть и с чередованием цвета шрифта.
    Желая привлечь внимание к материалу создатель делает это аналогично навязчивому продавцу на базаре, или преследующей тебя пестрой цыганке…

    Сами знаете, хочется бежать куда подальше!

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

Comments are closed.