Обзоры, статьи, исследования



Эксперимент по улучшению читаемости и визуальной привлекательности боковой панели статьи


Оригинал статьи: Experiment in Making an Article Sidebar More Readable and Visually Appealing

Автор статьи: Christian Watson

Автор перевода: Елена

Translated with the permission of Christian Watson.

Комментарий к переводу:
20 минут - много или мало? Но насколько лучше стала описываемая в статье часть страницы после использования казалось бы простого решения по визуальному представлению информации.

Недавно на сайте Boxes and Arrows я читал замечательную статью о мифе Above-the-Fold. Чтобы узнать больше об авторе, я обратился к этой информации слева от статьи, и был в ужасе от некоторых дизайнерских решений, реализованных в этой части страницы, особенно тем, что весь текст в колонке был выровнен вправо.

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

Я не мог сопротивляться запуску опции 'Edit HTML' панели Web Developer, чтоб узнать всё это.

Вот, что получилось за 20 минут или около того:
Experiment in Making an Article Sidebar More Readable and Visually Appealing
Слева - оригинальный дизайн, справа - дизайн Кристиана

Примечание: в целях эксперимента я сократил длинный текст биографии в обоих примерах.

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

Мне нравится, что модифицированная боковая панель больше визуально отделена от основного текста статьи и теперь оформлена как дополнение к статье.

Потратив чуть больше времени, ещё можно было бы поэкспериментировать с различными стилями шрифта (сделать его курсивным или заглавными буквами) и с цветами (другие оттенки серого).

В частности, я нахожу, что секция 'most commented stories' намного легче просмотреть в моей версии. В существующем дизайне Boxes and Arrows это не так.

Я также "пофиксил" некоторые странные дизайнерские решения. В оригинальном примере ссылка 'Blasting the Myth of the Fold' не окрашен в оранжевый цвет, как остальные ссылки. При этом, фраза '136 Reputation points' выделена оранжевым, хотя это не ссылка.

Итак, что вы думаете об исправленной версии: получилось лучше или хуже?