Записки лондонского фрилансера

35 ресурсов, помогающих дизайнеру улучшить юзабилити сайта

Рубрики: Дизайн, Переводная статья, Полезные ссылки

Юзабилити, юзабилити. На эту тему пишут много, потому что самое главное в работе дизайнера/копирайтера/баннермейкера – это быть замеченной пользователями.

DesignM.AG представил небольшую подборку веб-сайтов, которые могут помочь дизайнеру улучшить юзабилити веб-сайта. Не помешает эта подборка и блогеру – о юзабилити блога тоже нельзя забывать.

Все полезные сайты разбиты на 2 категории – платные и бесплатные ресурсы. Я остановлюсь, в первую очередь, на бесплатных ресурсах.

Все сайты – англоязычные, но и без знания английского пользоваться многими из них не составит большой проблемы.

Урл статьи http://designm.ag/resources/usability/

WebsiteOptimization.com

Бесплатный ресурс, позволяющий проверить размер страницы, ее структуру и время загрузки вашего сайта.
Вводите урл либо html код и кликаете на “Submit”.

Вам выдается общее время загрузки страницы, размеры всех имиджей, время их загрузки и общие замечания и рекомендации по всем разделам в такой форме (анализ сделан для моего сайта temza.com, привожу только фрагменты финального отчета):

TOTAL_HTML ….
TOTAL_OBJECTS – Warning! The total number of objects on this page is 55 which by their number will dominate web page delay. Consider reducing this to a more reasonable number….
TOTAL_IMAGES – Warning! The total number of images on this page is 53 , consider reducing this to a more reasonable number. Recommend combining, replacing, and optimizing your graphics. Replace graphic rollover menus with CSS rollover menus to speed display and minimize HTTP requests.
TOTAL_CSS – Congratulations, the total number of external CSS files on this page is 1 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page. Remember to place CSS files in the HEAD and JavaScript files at the end of the BODY to enable progressive display.
TOTAL_SIZE – Warning! The total size of this page is 1483606 bytes, which will load in 306.68 seconds on a 56Kbps modem. Consider reducing total page size to less than 100K to achieve sub 20 second response times on 56K connections….
HTML_SIZE – Congratulations, the total size of this HTML file is 25223 bytes, which less than 50K….
IMAGES_SIZE – Warning! The total size of your images is 1448616 bytes, which is over 100K. Consider switch graphic formats to achive smaller file sizes (from JPEG to PNG for example)….
CSS_SIZE - Caution. The total size of your external CSS is 9767 bytes, which is above 8K and less than 20K. For external files, ideally keep them less than 1160 bytes to fit within one higher-speed TCP-IP packet (or an approximate multiple thereof)….

Dead-Links.com

Проверяет все исходящие ссылки вашего сайта и находит “битые” ссылки. Полезно проверять свой сайт время от времени, особенно комментарии в блоге.

ClickHeat

Программа ClickHeat показывает наиболее “горячие” и “холодные” зоны на вашем сайте, т.е. те зоны, на которые кликают больше всего (или меньше всего).

Программа бесплатная, но требует установки на сервер в ту же директорию, в которой находится ваш сайт. Скачать программу можно с сайта http://www.labsmedia.com/clickheat/index.html (или прямо отсюда), там же даны инструкции по установке программы и минимальные требования системы).

5-тисекундный анализ сайта

Загружаете свой дизайн (в виде картинки) на сайт и тестируете, что реальные пользователи увидят и запомнят на сайте в первые 5 секунд просмотра. Сервис англоязычный, поэтому, скорее всего, русскоязычные сайты никто не поймет.

Colour contrast check (проверка контрастности цветов сайта)

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

Передвигая слайдеры, можно выбирать различные сочетания цвета текста и фона. При этом автоматически расчитываются Brightness Difference, Colour Difference и дается рекомендация, насколько выбранные 2 цвета сочетаются между собой.

Luminosity Colour Contrast Ratio Analyzer (анализатор контрастности 2х цветов)

Вводите 2 цвета (в #fff формате) и проверяете, достаточно ли соотношение между их контрастностями. Если нет – лучше не использовать сочетание этих цветов для текста и фона на одном сайте. Отношение контрастностей для черного и белого – 21, для белого и белого – 1. Все остальное, наверное, будет между этими цифрами, и чем ближе ваше соотношение к 1, тем хуже.

Graybit – ваш сайт в черно-белом формате

Чтобы понять, насколько контрастное изображение получилось у вас, всегда полезно увидеть его в черно-белом формате. Этот прием является практически обязательным не только в случае дизайна сайтов, но и в случае создания логотипов.

Чтобы проверить свой сайт, вводите урл и кликаете на “Make It Gray”. Например, анализ моего сайта показал, что заголовки статей у меня в блоге можно бы сделать побольше размером.

И один небесплатный сайт (в обзоре небесплатных намного больше), показавшийся мне наиболее интересным:

Userfly

Userfly позволяет записывать движения мышки пользователя и клики по ссылкам.

Бесплатный пакет позволяет получить анализ движения 10 пользователей по сайту в месяц, цена на платные пакеты варьируется от $10 (за 100 пользователей) до $200 (10,000 пользователей) в месяц.

Статьи по теме “юзабилити” в блоге:

• Как пользователь воспринимает насыщенный текстом веб-сайт – результат эксперимента
• Красота сайта versus юзабилити – результат эксперимента
• Интересная тенденция в дизайне меню веб-сайтов
• 10 наиболее частых ошибок, которые делают дизайнеры
• Фрилансерская мудрость – и опять о юзабилити с точки зрения пользователя
• Формы – дизайн с точки зрения юзабилити
• TOP-10 юзабилити-ошибок рунета – Роман Настенко против Якоба Нильсена

Не все параметры юзабилити сайта дизайнер в состоянии улучшить самостоятельно. Каким бы продуманным ни был дизайн, большое время загрузки сайта может отпугнуть самого терпеливого пользователя. Поэтому правильный выбор сервера для размещения сайта – необходимое условие высокой юзабилити сайта. Если у вас есть собственное серверное и коммутационное оборудование, компания msm.ru может предложить аренду места в своих дата центрах (colocation) от 1850 руб. за один юнит. Если своего оборудования у вас нет, можно взять в аренду готовый к работе сервер – один час и ваш сервер готов к работе.