Улучшение юзабилити целевых страниц с помощью анимации. Улучшение юзабилити: связанные услуги. Используйте правильные формы ввода

17.04.2019

Всем-всем привет!

Наверное, каждый кто уверенно чувствует себя в Интернете слышал такое понятие, как юзабилити сайта. Оно не зря так распространено, так как является основой выстраивания взаимодействия посетителя с сайтом. Поэтому я хочу раскрыть всю суть данного понятия и помочь Вам и себе сделать свой веб-ресурс более удобным для юзания.

Что такое юзабилити сайта?

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

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

Если же забить на все эти заморочки по поводу юзабилити, то Вы так и не реализуете всего потенциала своего сайта. Вспомните себя: когда заходите на недружелюбный сайт, Вам, наверняка, сразу же хочется свалить оттуда, ведь так? Точно также происходит и с посетителями Вашего сайта. Поверьте мне.

Люди, уделившие изучению юзабилити большое количество времени, составили определенный ряд правил, которые важно учитывать при создании сайта:

Правило 2-х секунд. В среднем пользователь готов потратить только 2-3 секунды на ожидание загрузки сайта, отсюда и возникло это правило. Увеличив скорость загрузки сайта, Вы получите гораздо более лучший отклик от посетителей;
Правило 3-х кликов. Опять же усредненное значение. Дело в том, что большинство пользователей не хочет заморачиваться по поводу достижения какого-либо результата и готово совершить только 3 клика. То есть, нужно сделать так, чтобы пользователь мог совершить, например, покупку на сайте в 3-и клика;
Принцип структуры. Очень важно, чтобы сайт был четко структурирован — не должно быть какой-либо перемешки. Один информационный блок должен вытекать из другого и так далее. Благодаря четкой структуре, пользователь сможет легко ориентироваться по сайту и находить то, что ему нужно;
Правило формата. Не должно быть каких-то отличий между стилизацией элементов сайта, то есть весь веб-ресурс должен быть выполнен в едином ключе;
Перевернутая пирамида. Под этим подразумевается подача материала таким образом, чтобы пользователь в первые секунды мог получить ответ на свой вопрос.

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

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

Как сделать сайт лучше?

Существует большое количество способов улучшения взаимодействия пользователей с сайтом. Подойдут для разных типов сайтов. Используя все перечисленные рекомендации/способы, Вы получите большую благодарность от пользователей своего сайта.

Навигация сайта

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

Обязательно разместите в меню навигации все важные элементы:

Контакты;
О компании;
Услуги;
Доставка и оплата.

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

В улучшении юзабилити сайта могут помочь так называемые хлебные крошки. Хлебные крошки — это цепочка ссылок, показывающая пользователю в какой рубрике, на какой странице он находится. С их помощью он сможет перейти к любому уровню.

Для интернет-магазинов данный блок ссылок очень полезен, так как помогает пользователям находить похожие товары, быстро переходить к интересующей его рубрике/категории с карточки товара, ориентироваться по сайту.

Логотип веб-ресурса, наверное, тоже можно отнести к навигации. Все мы привыкли, что логотип любого сайта кликабелен и является ссылкой на главную страницу. Собственно только по этой причине стоит сделать логотип ссылкой на главную.

Скорость загрузки сайта

В современном мире человек не готов тратить свое драгоценное время на ожидание загрузки страницы сайта для поиска ответа на свой вопрос. Если страница долго грузится, пользователь уйдет на другой сайт, ведь с большой долей вероятности там он все-таки найдет то, что искал. Поэтому в конкурентной борьбе за посетителя скорость загрузки сайта является важнейшим аспектом юзабилити.

По моим наблюдениям, большое влияние на скорость загрузки оказывают изображения. Чтобы проверить это, нужно воспользоваться специальным инструментом от Google PageSpeed Insights. Наиболее подробным образом об оптимизации загрузки я рассказывал в . Обязательно прочитайте!

Обратная связь

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

Поиск по сайту

Улучшению юзабилити сайта также способствует наличие поиска на сайте — гораздо проще человеку ввести в поисковую строку то, что он ищет и найти ответ (или не найти), чем ползать полчаса по сайту. Поэтому рекомендуется ставить поиск на своем сайте.

Реализовать это можно с помощью специальных плагинов от Яндекса или Google, также можно воспользоваться плагинами для CMS.

Оформление заявки. Регистрация

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

А оформление заказа в интернет-магазине упростить до 2 — 4 полей, так как людям лень заполнять объемные формы и передавать лишнюю информацию (как им кажется) незнакомым людям.

Контент

Единственное за чем приходят пользователи на любой сайт — контент. Следовательно, подавать его нужно структурировано и понятно. Никто не любит сплошные портянки, люди любят порядок. Для того, чтобы текст был легок для восприятия нужно использовать:

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

Все это вместе взятое поможет сделать контент на сайте лучше в разы. К тому же поисковые роботы тоже любят четкую структуру текста, поэтому старайтесь!

Ну а на этом я буду заканчивать, дорогие друзья! На следующей неделе я расскажу Вам, как провести анализ юзабилити сайта.

До скорых встреч!

Предыдущая статья
Следующая статья

Перевод
Tutorial

Встречают по одёжке, провожают по уму. Эта старинная поговорка говорит, помимо прочего, о важности первого впечатления. Это верно не только для людей, но и для программных продуктов - веб-сайтов и мобильных приложений. Одним из важнейших моментов формирования привлекательности сетевого проекта является удобство его использования - юзабилити. И когда человек впервые знакомится с каким-то сайтом или приложением, то первые впечатления зачастую определяют, будет ли он возвращаться к этому продукту снова и снова. Иными словами, юзабилити - одно из ключевых свойств сайта, формирующих (или разрушающих) аудиторию. Давайте рассмотрим некоторые распространённые и часто упускаемые из виду сценарии поведения пользователей, а также способы улучшения юзабилити на наиболее важных стадиях взаимодействия с вашим веб-сайтом или мобильным приложением.

Ясное и осознанное взаимодействие

1. Выбирайте размеры шрифтов

Люди всё больше сёрфят по сети с помощью мобильных устройств, и для некоторых сайтов мобильная версия стала основной. А это диктует свои требования к размеру шрифтов, ведь экраны смартфонов и планшетов гораздо меньше, чем обычные мониторы и ноутбуки. Распространение адаптивного дизайна сыграло большую роль в привлечении внимания к проблеме шрифтов.

Зачастую создатели сайтов концентрируются на удобстве использования кнопок, иконок, вкладок и прочих объектов, на которые нужно кликать. А про удобство нажатия на текстовые гиперссылки вспоминают немногие. Поэтому всегда проводите «живые» тесты комфортности нажимания пальцами на гиперссылки.

2. Пишите информативные сообщения об ошибках

Многие пренебрегают подбором формулировок для сообщений об ошибках, считая их чем-то вторичным. Разработчики обычно знают, как избегать неправильных действий в своих продуктах, и потому редко сталкиваются с подобными сообщениями.

Но настоящие пользователи не могут этим похвастаться.

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

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

Удобство форм ввода

3. Упростите требования к паролям

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

К примеру, исторически сложилось так, что поля выбора (select box) трудно поддаются стилизации. В большинстве случаев разработчики стараются скрыть стандартные объекты и клонировать их в виде более подходящих DOM-элементов. При этом данные из «клонов» передаются на вход оригинальных элементов.

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

Например, пользователи Windows Mobile ожидают, что при выборе выпадающего меню список вариантов открывается на весь экран, отдельно от самого поля. В то время как пользователи Android ожидают увидеть модальное окно. И если в угоду своим дизайнерским идеям вы не оправдаете подобных ожиданий, то пользователи могут совсем не оценить ваших решений. Вероятнее всего, им будет труднее работать с вашим продуктом, что негативно скажется на их впечатлении. Иными словами, изменяя дизайн стандартных элементов вы создадите больше проблем, чем решите.

4. Используйте правильные формы ввода

Многие советуют использовать форматирование данных в полях ввода. Например, если добавить input, input , то при вводе автоматически переключается раскладка. Однако выглядит это странно и вовсе не помогает, а мешает в заполнении формы.

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

Использовать разные типы ввода в HTML 5 целесообразно лишь тогда, когда полей на экране как можно меньше. Хороший пример - двухфакторная аутентификация Google: здесь лишь одно поле, в которое можно ввести только цифры. Тут будет очень уместным автоматическое переключение на цифровую раскладку.

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

5. Срежиссируйте яркий и запоминающийся опыт первого использования

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

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

6. Дьявол в деталях

Всевозможные мелочи могут сыграть большую роль в облегчении освоения вашего продукта. Например, привычный стандартный курсор в первом же поле ввода позволит быстрее и безболезненнее погрузиться в интерфейс. В идеале, пользователь должен на «автопилоте» перемещаться по сайту или приложению.

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

Режиссирование успешного первого опыта использования сродни ходьбе по канату - очень трудно всё сделать правильно, но если у вас получается, то с лихвой вознаграждается пользовательским признанием. Например, проект Stumbleupon очень удачно обучает новичков своим основным возможностям.

Хорошим решением может быть встраивание процесса обучения в обычную процедуру использования продукта. Допустим, при выполнении архивирования писем в почтовом приложении можно выдавать сообщение «А вы знаете, что можно запускать архивирование с помощью Ctrl + K?». Такой подход позволяет обучать пользователей гораздо мягче по сравнению с традиционными уроками в стиле «обзор всего приложения».

7. Микрокопирование не должно использоваться задним числом

«Микрокопирование» имеет отношение ко всем маленьким инструкциям и подтверждениям, используемым в приложениях.

«Не волнуйтесь, мы не допустим утечки вашего почтового адреса»
«Для оплаты не требуется банковская карта»

Микрокопии - идеальный инструмент для выстраивания доверительных отношений и улучшения опыта использования. Также с их помощью можно очень эффективно обучать пользователей, которые не слишком уверенно работают с вашим продуктом.

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

8. Всегда обеспечивайте наличие контекста

Пользователи ненавидят отсутствие контекста. Учитывая, с каким информационным потоком им постоянно приходится справляться, люди стараются абстрагироваться от всего лишнего на экране и сосредоточится на конкретных вещах. Когда в моду вошёл бесконечный скроллинг, многие сайты столкнулись с одной проблемой: стоило пользователю по ошибке кликнуть куда-нибудь, и текущая позиция сбрасывалась. Особенно неприятно это бывает в тех случаях, когда человек пролистал содержимое сайта очень далеко вниз. Уже после пяти прокрученных экранов случайный клик может стать причиной раздражения.

Большинство сайтов сегодня решают это проблему с помощью модалов (modal) и прочих схем, характерных для одностраничных приложений. Например, в Pinterest при клике на плитку открывается не новая страница, а модал. Это позволяет изучить подробности той или иной записи, не теряя текущую позицию и не ожидая загрузки новой страницы.

В мобильном приложении Facebook используется такой же подход: если нажать на фотографию в альбоме, то она загрузится в полноэкранном модале. Это выглядит почти так, как если бы открылась новая страница, но при нажатии кнопки «Назад» вас аккуратно возвращают к контексту.

Пользователи, особенно мобильные, не любят, когда неожиданно меняется содержимое экрана. К этому нужно прибегать только в ответ на явные действия пользователей. Например, новостные ленты в Twitter и Facebook обновляются принудительно. Иначе получалась бы неприятная ситуация, когда вы читаете сообщение, а в это время фоновый процесс обновляет ленту и вываливает вам кучу новых сообщений, которые погребают под собой то, что вы читали до этого. Всё равно что порыв ветра, вырывающий у вас из рук газету.

К счастью, Twitter деликатно информирует пользователя о появлении новых сообщений и ждёт, чтобы пользователь дал команду на загрузку. То есть человек полностью управляет изменением содержимого экрана и не оказывается в замешательстве.

15. Разбивайте большие сложные задачи на более мелкие операции

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

Разбиение на логические блоки субъективно упрощает задачу настройки и заполнения многочисленных полей, предотвращает возникновение ощущения неприятной работы. Особенно это важно для мобильных приложений и версий сайтов.

К примеру, Facebook несколько лет оттачивал группировку настроек приватности, чтобы облегчить их конфигурирование. А ведь когда-то это была настолько нетривиальная задача, что многие просто не трогали эти настройки. После их разделения на секции увеличилась доля пользователей, которые работают с этими страницами, а не избегают их.

Ещё один хороший пример разбиения большой задачи на логические блоки - процесс оформления заказа. Для многих веб-приложений эта процедура становится критической точкой, индикатором успешности проекта. Когда оформление заказа разделено на этапы, то при их прохождении у пользователей возникает ощущение продвижения, прогресса, даже если не всё проходит как по маслу.

Также разделение на логические блоки облегчает обнаружение и решение возникающих проблем. Ведь никому не захочется разбираться с сообщением наподобие «Вы не могли бы исправить следующие четыре пункта?»

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

То же самое можно сказать и о формах пожертвования, в особенности в мобильных проектах. Вы же наверняка хотите, чтобы пользователь подумал: «Надо же, как всё просто» вместо «Да уж, на это нужно время». Улучшение удобства пользования формами напрямую отражается на прибыльности проекта.

Большинство вышеупомянутых моментов достаточно просты, когда их рассматриваешь по отдельности. Но если работаешь с этим каждый день, то глаз часто замыливается. Поэтому важно уметь отступить назад, абстрагироваться и посмотреть на своё детище глазами «нового пользователя».

Теги:

юзабилити интерфейсов
юзабилити сайтов

Добавить метки

Как же улучшить юзабилити сайта и сделать его наиболее удобным и приятным для всех своих посетителей и читателей? Наверное, каждый вебмастер и блоггер задает себе такой вопрос, когда смотрит на свой СДЛ. Признаюсь, я тоже не один раз ломал над этим голову. Вот решил еще раз поразмыслить над этим и выписать если не все, то наиболее важные советы и моменты по улучшению качества сайтов для людей. Здесь я затрону способы улучшения качества контента, скорости сайта, навигации, веб дизайна, а также другие многие моменты.

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

Это никогда не будет лишним, так как позволяет заранее определить, как посетители будут взаимодействовать с вашим сайтом и как долго они будут на нем оставаться. В этом материале я хочу дать вам несколько полезных советов, которые в значительной степени помогут вам увеличить время пребывания и удобство для пользователей на вашем сайте. Также я вам рекомендую почитать . Они вам очень пригодятся!

Качество контента

Куда не посмотри, а контент всегда будет главной ключевой особенностью. Не важно, будь то seo продвижение, юзабилити или какие-то рекламные кампании. Качество публикуемого материала всегда было, есть и будет главным инструментом вашего сайта. Поэтому старайтесь публиковать материал, который не вызывал бы каких-то отрицательных эмоций у посетителя. В действительности, чтобы улучшить качество контента, нужно соблюдать ряд основных моментов:

интересный, полезный и уникальный материал — это один из важных моментов по увеличению качества ваших материалов. Если вы публикуете никому не нужный и бесполезный контент, то можно сразу забыть про дальнейшее развитие своего ресурса. Никто на него не будет заходить, так как ничего полезного в нем не будет. Поэтому старайтесь давать полезные и интересные советы для своих читателей!
без воды и длинных полотен — длинные текстовые полотна сейчас не в моде! Пишите только по теме и не слишком много. Пользователю с первого раза будет трудно осилить огромное количество текста. Однако это не значит, что не стоит задумываться над раскрытием темы. Если вы видите, что тема довольно обширная для одного поста, то разбейте ее на несколько постов. Это будет не только в пользу удобства для читателя, но и для продвижения сайта. Также не старайтесь писать слишком маленькие посты. Это очень плохо сказывается на уникальности. По возможности добавляйте свои рассуждения, наблюдения или еще что-то полезное. Оптимальный текст в 500 — 1000 слов. Максимальный потолок в 1500 — 2000 слов. Так что ориентируйтесь на эти числа!
красивое оформление постов — это тоже немаловажный момент по повышению качества своих материалов. Всегда разбавляйте текст картинками. Они очень хорошо улучшают восприятие материала и дают передышку при чтении. Также в тесте по возможности следует использовать подзаголовки. Они очень хорошо помогают ориентироваться в больших объемах информации. Еще нельзя исключать возможность внедрения маркированных списков, таблиц и различных аудио и видеоматериалов. Это намного может улучшить качество контента.

выделяйте текст — это поможет заострить внимание пользователя на каких-то очень важных моментах. Более важные слова выделяйте жирным. Нужные предложения оформляйте в красивые блоки. Например, создать текстовый блок «Внимание » или «Цитата «. Однако ни в коем случае не переусердствуйте с этим. Выделяйте только самое необходимое.
перелинковка — очень важный момент не только в продвижении сайта, но и в его юзабилити. Предлагая своим пользователям дополнительные статьи по теме, вы не только увеличиваете время пребывания человека на сайте, но и предлагаете ему дополнительные советы по схожей тематике. Также позаботьтесь о том, чтобы все ссылки были легко заметными и не сливались с общим фоном. Обязательно проверяйте наличие битых ссылок. Ведь неприятно, когда пользователю выдается ошибка при переходе. Еще неплохим вариантом будет вывести похожие записи в виде миниатюр. Это будет очень привлекательно!
пишите без ошибок — это улучшит качество контента. Мало кто любит читать текст с большим количеством грубых ошибок. Поэтому всегда проверяйте наличие ошибок не только в новых, но и в старых записях. Например, текст на ошибки можно проверить в том же . Я сейчас сам потихоньку исправляю свои старые записи.

Скорость загрузки сайта

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

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

установка и настройка плагина кэширования — это существенно поможет вам ускорить работу сайта, а также снизить нагрузку на свой сервер. Старайтесь использовать все виды кэширования.
оптимизация картинок — уменьшайте размер фотографий без потери качества и обрезайте лишние области картинки. Так вы уменьшите размер страницы, а, следовательно, и время ее загрузки.
включать только необходимые функции — откажитесь от использования лишних плагинов, модулей и скриптов. По возможности отключите лишний функционал в самой и не гонитесь за слишком уж навороченными шаблонами для сайта. Как правило, в таких темах очень много лишнего кода, что сказывается на скорости загрузки сайта.
оптимизация базы данных — не забывайте очищать много лишнего мусора в своей базе. Если у вас есть мультисайт, то позаботьтесь о создании продвинутой базы данных. Таким образом, вы существенно сможете снизить нагрузку на свой сервер. Если ваш сайт работает под управлением , то рекомендую вам посмотреть .
переход на более дорогой тариф от хостинга — выбирайте не только хороший хостинг, но и наиболее подходящие тарифы в нем. Если после вышесказанной оптимизации, вас пока полностью не устраивает скорость загрузки своего сайта, то попробуйте раскошелиться на более мощный и дорогой тариф. Возможно, вам понадобиться выделенный сервер для своих возможностей.

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

Удобная навигация:

Удобный сайт просто обязан обладать удобной для посетителя навигацией. Однако в погоне за удобством главное не переусердствовать. Особенно это касается выпадающего меню. На некоторых сайтах настолько разнообразно оно сделано, что навигация по нему может вызвать какой-то негатив. Очень много рубрик 2-4 уровней (рисунок ниже) . Наводишь на определенную рубрику, а за ней раскрывается еще, еще и еще. Стоит только нечаянно дернуть мышкой и все меню сворачивается. Таким образом, получается своего рода баян какой-то.

По такому баяну ориентироваться довольно трудно, поэтому будьте внимательны при создании всплывающего меню. Не делайте рубрики больше второго уровня. Среди большого количества таких рубрик, пользователю будет труднее ориентироваться на сайте. Идеальным вариантом будет создание рубрик первого уровня. Однако это не всегда получается. Если у вас очень обширная тематика, то иногда может потребоваться использование рубрик второго уровня (подрубрик) . Они очень хорошо разделяют тематику сайта. Таким образом, вам не придется все лепить в одну рубрику.

Вы скажите, а почему нельзя создать новые рубрики? Да, создать можно, но такие рубрики будут занимать дополнительное место. А подрубрики конкретно могут разделить тематику и к тому же такие разделы можно спрятать в основную рубрику. Это очень экономит место. Поэтому, если вы предусматриваете использовать немалое количество рубрик, то возможно стоит некоторые рубрики разделять на подрубрики. Только не используйте рубрики выше второго уровня, иначе получится баян.

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

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

Также в самих постах вам нужно выводить ссылку на категории, в которой эти посты опубликованы. Так пользователь будет знать, к какой рубрике принадлежит материал и потом с легкостью перейти в эту рубрику. Если вы используете метки, то их тоже нужно выводить в своих постах. Так у вас появится еще одна дополнительная навигация. Для рубрик я бы вам порекомендовал использовать хлебные крошки.

Карта сайта

Главным инструментом в удобной навигации является карта сайта для посетителей. Это своего рода содержание сайта в виде отдельной страницы. В ней расположены ссылки на все записи проекта. Все в одном месте так сказать! Это очень удобно для посетителей. Они быстро и наглядно смогут просмотреть все записи на вашем сайте. Даже нет такой книги, которая не включала бы у себя содержание для удобного поиска. Так почему же обременять этим делом и свой проект. Поэтому обязательно сделайте у себя такую карту сайта.

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

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

Постраничная навигация

Также стоит позаботиться и о постраничной навигации. На сайте такая навигация просто необходима. Ее следует установить на главной странице сайта. Попадаются и такие люди, которые специально отказываются от такой навигации. Я считаю это неправильным! Даже если доступно меню и карта сайта, то постраничная навигация все равно необходима. Так пользователи легко смогут зайти на страницы второго уровня и там просматривать анонсы различных постов. Такая навигация может быть использована в виде цифр или в виде текста.

Если на вашем сайте очень большое количество комментариев, то обязательно сделайте постраничную навигацию и для комментариев. Так пользователю будет наиболее удобно ориентироваться в большом потоке сообщений. Выводите где-то не больше 50 — 60 сообщений на страницу.

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

Веб-дизайн

— это лицо вашего сайта. Если такое лицо будет пугать посетителя или придавать какой-то негативный характер, то человек просто на просто сбежит с такого сайта и вряд ли уже на него вернется. Поэтому вам также стоит позаботиться об одежке для своего проекта. Хочу вам сказать, что многое зависит от тематики сайта. Тут главным играет и к данному сайту в определенной тематике. Конечно, от вас не требуется создание каких-то шедевров. Однако старайтесь подбирать такие шаблоны, которые наиболее оптимально могли бы подойти для вашей тематики и для ваших читателей.

Если сомневаетесь, то в интернете полным полно таки шаблонов. Они разбиты на отдельные категории тематик. Выбирайте свое направление и просматривайте подходящие шаблоны. В общем, тут зависит от тематики проекта. Если для простого блога достаточно простой и легкий бесплатный шаблон, то для крупного портала нужен шаблон наиболее навороченный. Может даже в . Для коммерческих сайтов тоже не стоит использовать простенькие шаблоны. Нужно искать что-то красивое и привлекательное, чтобы завлечь больше посетителей.

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

Также немаловажным моментом является доступность мобильной версии и приложений для вашего сайта. Сейчас с бурным развитием сети и технологий, все больше и больше людей предпочитают использовать мобильный интернет. Это быстро и удобно! Поэтому вам обязательно нужно позаботиться об отзывчивом дизайне сайта и возможно об установке мобильных приложений. Так у вас есть гарантия, что зайдя с мобильного устройства на ваш сайт, пользователь будет чувствовать в нем комфортно.

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

Большое значение имеет сам шрифт на сайте. Неудобный и плохой шрифт будет только насиловать пользователя. Поэтому не старайтесь бегать за красотой. В постах используйте только стандартные простые шрифты. К тому же они поддерживаются всеми браузерами. Я бы порекомендовал в постах использовать шрифт Verdana. Также немаловажным играет и размер шрифта. Слишком мелкий текст очень трудно читать. Поэтому рекомендую использовать шрифт размером 13 — 14 кеглей.

Будьте внимательны с количеством и качеством рекламы на сайте. Как правило, эта на движке WordPress. Большое количество различных объявлений, а также ужасные картинки в блоках быстро отпугнут посетителя и оставят только негативный отклик о вашем сайте. Поэтому думайте, что вы ставите на свой сайт.

Уделяйте возможности удобной функции комментирования на сайте. Нужно отключить капчу и найти другие способы борьбы со спамом. Если на проекте наблюдаются огромные дискуссии, то лучше сделать древовидные комментарии и постраничную навигацию к ним. В каждом сообщении должна выводиться граватарка комментатора. Некоторые специально ее прячут. Так нельзя делать! Получается, что непонятно, кто кому отвечает. Да и для общения так очень удобно. Поэтому всегда нужны такие граватарки и желательно наиболее оптимального размера. Слишком большие и слишком маленькие изображения ненужны.

Ну и обязательно предусмотрите наиболее красивую и качественную подписку. Сюда должна входить подписка на свежие записи сайта, на новые комментарии к определенной теме, а также подписка в социальных сетях. Весь этот процесс должен быть понятен для пользователя и прост в применении. А для блоггеров я бы порекомендовал придерживаться . Это тоже очень важно!

Заключение

Вот собственно и все! Или нет? Если вы знаете еще какие-то способы по улучшению юзабилити сайта и уменьшению показателей отказа, то обязательно напишите ниже в комментариях. А так, как видите способов по улучшению качества сайта довольно много. По идее этот пост нужно было разбить на несколько статей. Уж больно он объемистый получился. Однако тема очень важная. Во второй части темы про я говорю о важности содержания, ссылок и направления пользователя.

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

1. Создайте концепцию

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

Анимация вдыхает жизнь в контент, делает его более привлекательным и запоминающимся. Хороший пример такой анимации можно найти на сайте Ikonet . Анимация захватывает пользователя с первой секунды пребывания на странице.

Анимация также может выступать в роли путеводителя, объясняя пользователю, как взаимодействовать с интерфейсом или сайтом. Тем самым обращая внимание пользователя на важные вещи. Например, если вам нужно сделать акцент на какой-либо информации или действии, сделайте так, чтобы она выскользнула откуда-то со стороны и была достаточно заметной. Взгляните на пример Preston Zeller ниже. Элементы появляются на страницах поочередно, тем самым привлекая внимание пользователей к определенным областям на странице.

2. Обеспечьте обратную связь

Взаимодействие человека и компьютера основано на двух главных принципах: пользовательский ввод и системная обратная связь. Все интерактивные объекты должны реагировать на ввод пользователя соответствующим визуальным или звуковым сигналом. Тем самым обеспечивая обратную связь.

Ниже представлен эффект кастомного чекбокса (Custom Checkbox), созданный с использованием Slides framework . Тонкая подпрыгивающая анимация, которую пользователь видит при использовании переключателя, усиливает ощущение интерактивности.

С помощью слайдов вы можете создавать приятные анимации, которые активируются при наведении, тем самым призывая пользователей к взаимодействию с объектами. Взгляните на Berry Visual . Когда вы наводите курсор на «Отправить сообщение» или на меню в правом верхнем углу, появляется приятный анимированный эффект. Это создает ощущение интерактивности элементов.

Buf Antwerp – еще один отличный пример того, как анимированная обратная связь может улучшить пользовательский опыт. Когда посетители наводят курсор на плитку, появляется полупрозрачный оверлей с текстом, который предоставляет дополнительную информацию об объекте.

3. Установите связь

Отличное место для добавления анимации на целевую страницу – это моменты перехода. Зачастую моменты перехода кажутся резкими, например, когда пользователи нажимают на ссылку, и появляется новое окно. Такие изменения обычно приводят к потере контекста, мозгу нужно просканировать новую страницу, чтобы понять, как она связана с предыдущей, поэтому пользователям бывает трудно воспринимать такие переходы.

Рассмотрим пример резкого перехода:

Сравните это со следующим примером, в котором плавный анимированный переход направляет пользователя к различным частям экрана:

Второй переход мягче. Он наглядно демонстрирует процесс перехода между разделами, помогая пользователям понимать происходящее и видеть между ними связь.

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

4. Сделайте скучные задачи интересными

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

Если вы откроете сайт Tympanus’ 3D Room Exhibition , на первый взгляд вам покажется, что он ничем не отличается от других веб-галерей. Но ваше впечатление изменится сразу же после взаимодействия со страницей. Если вы подвигаете курсором, то увидите, как двигается страница, и этот эффект создаст ощущение 3D пространства. Это чувство усиливается, когда вы переходите с одной страницы на другую. Похоже на то, что вы путешествуете из одной комнаты в другую в трехмерном пространстве.

Теперь поговорим о чем-то более привычном, чем 3D-эффекты – о формах. Кто любит заполнять формы? Наверное, никто. Тем не менее, заполнение форм является одной из наиболее распространенных задач в Интернете. Как же сделать это занятие веселым?

Посмотрите на картинку внизу, йети закрывает глаза, когда пользователь начинает вводить свой пароль. Такой анимированный эффект удивляет и поднимает настроение, особенно если вы его видите впервые.

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

Определить место на странице, где анимация будет максимально полезной – это лишь половина истории. Большое значение также имеет реализация анимации. В этом разделе вы узнаете, как правильно анимировать объекты на профессиональном уровне.

1. Не анимируйте несколько объектов одновременно

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

Крайне важно понять концепцию переходной хореографии, которая заключается в последовательности движений, сохраняющих фокусировку внимания при изменении интерфейса. Минимизируйте количество одновременно движущихся элементов. Используйте не больше двух или трех движущихся элементов одновременно. Если же вы хотите привести в движение более трех объектов, группируйте их и анимируйте как одно целое, а не отдельные элементы.

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

2. Анимация не должна конфликтовать с индивидуальными особенностями целевой страницы

Каждый раз, когда вы добавляете анимацию в дизайн, вы делаете его более выразительным. Его внешний вид во многом будет зависеть от выбранного анимированного эффекта.

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

Slides framework предоставляет 10 анимированных стилей, таких как Stack, Zen, Film, Cards и Zoom. Поэкспериментируйте с различными эффектами и выберите тот, который лучше всего подойдет по всем критериям.

3. Установите тайминг

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

Оптимальная скорость анимации пользовательского интерфейса составляет от 200 до 500 миллисекунд. Анимация, которая длится менее 1 секунды, считается мгновенной, тогда как анимация длительностью более 5 секунд может создать ощущение затянутости.

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

4. Не забывайте о доступности

Анимация – это палка о двух концах. Она может улучшить юзабилити для одной группы пользователей, одновременно создавая проблемы для другой группы. Релиз Apple iOS 7 стал примером того как не нужно делать. Вскоре после релиза операционной системы, пользователи iPhone сообщили, что анимированные переходы вызывают головокружение и напряжение глаз.

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

Специальная функция мультимедиа CSS, «prefers-reduced-motion» (предпочитает минимум движений) помогает отслеживать те ситуации, когда пользователь обращается с запросом минимизировать количество анимаций.

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

5. Тестируйте свои дизайнерские решения

Вот несколько советов, которые стоит учитывать при тестировании:

Тестируйте на разном оборудовании.

Многие характеристики оборудования, например размер экрана, плотность экрана, производительность графического процессора и так далее, могут существенно повлиять на производительность анимации. В результате владелец более качественного экрана будет видеть другую картину, чем владелец более старого устройства. Учитывайте такие факторы и оптимизируйте свою анимацию, чтобы она отлично выглядела на всех устройствах.

Тестируйте на мобильном телефоне.

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

Просмотрите анимацию на медленной скорости

Трудно заметить недостатки, когда анимация (особенно сложная) работает на полной скорости. Но когда вы замедляете анимацию (скажем, на одну десятую скорости), такие несовершенства становятся очевидными. Вы также можете сделать видео в слоу-мо и показать вашим знакомым, чтобы узнать их мнение.

6. Анимация должна разрабатываться в начале

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

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

Заключение

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

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

Вероятно, результаты некоторых исследований вам уже знакомы, однако мы постараемся посмотреть на них под несколько иным углом.

1. Забудьте «правило трех кликов»

В своей книге Taking Your Talent to the Web (2001) Джеффри Зельдман (Jeffrey Zeldman), известная личность в мире веб-дизайна, выдвинул идею о том, что «правило трех кликов помогает создавать веб-сайты, обладающие интуитивной и логичной иерархической структурой». То есть, если для того, чтобы получить доступ к искомому куску контента, пользователю необходимо совершить больше трех кликов, он начинает испытывать фрустрацию, потому что это требует много усилий и воспринимается как трата времени.

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

И тогда возникает вопрос: а имеет ли правило трех кликов под собой вообще какую-то научно-эмпирическую основу? Другими словами, существуют ли исследования, результаты которых указывали бы на то, что после трех кликов пользователи начинают испытывать фрустрацию?

Согласно исследованию, проведенному британским веб-дизайнером Джошуа Портером (Joshua Porter), пользователи, не обнаружившие искомый контент после трех кликов, не склонны прекращать поиски. Более того, в ходе исследования некоторые испытуемые совершили до 25 кликов.

Взаимосвязь числа кликов и процент выполненных заданий в случаях успеха (синее) и провала (рыжее)

В конечном счете главную роль играет не количество кликов, а удобство интерфейса. Если тот прост и понятен, человеку будет приятно им пользоваться, пусть даже для достижения цели потребуется 15 кликов. А если веб-сайт выполнен с соблюдением правила трех кликов, но спроектирован и реализован плохо, то человек, возможно, вообще не захочет им пользоваться.

2. Помните про F-паттерн

Якоб Нильсен провел исследование, в ходе которого осуществлялся айтрекинг (eye-tracking, окулография) более чем 230 пользователей интернета в ходе просмотра ими различных веб-страниц. В результате выяснилось, что при беглом просмотре взгляд пользователей движется по F-образной траектории.

Теплокарта просмотра страниц сайта Якоба Нильсена

Eyetools, совместно с двумя маркетинговыми компаниями, Did-It и Enquiro, провела похожее исследование. В нем приняли участие 50 испытуемых, каждого из которых просили ознакомиться с результатами поиска Google. В итоге взгляд всех 50 испытуемых чаще концентрировался на верхнем левом углу, и тепловая карта имела F-образную форму.

Теплокарта просмотра страницы результатов Google

Дизайнеры и копирайтеры должны учитывать эти данные при создании и расположении контента. Так, ключевой контент веб-страницы должен быть помещен ближе к левой части макета. Если обратите внимание, то увидите, что на наиболее популярных ресурсах вслед за заголовком идет список пунктов или набор коротких абзацев, имеющих все ту же F-образную форму. Это определенно делает текст более читабельным при быстром просмотре.

3. Скорость загрузки имеет значение

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

Так, несколько лет назад специалисты компании Microsoft провели исследование с использованием своего поисковика Bing. Цель исследования заключалась в выявлении взаимосвязи (если таковая вообще существует) между скоростью загрузки страницы и рядом таких показателей, как удовлетворенность пользователей, средний доход с одного посетителя и данные по кликам.

По результатам исследования была обнаружена следующая корреляция: увеличение задержки в загрузке страницы на 2 секунды привело к падению удовлетворенности пользователей на 3,8% и к снижению дохода примерно на 4,3%. При этом общее число кликов, совершаемых пользователями, уменьшилось на 4,4%. Снижение прибыли на 4,3% может показаться небольшой потерей, но когда речь идет о многомилионных и многомиллиардных корпорациях, каждый процент выливается в громадные суммы, которые никто не хочет терять.

Взаимосвязь между задержкой в загрузке страницы в мс и изменением следующих показателей (слева направо): 1) число уникальных запросов на 1 пользователя (%); 2) число модификаций запросов (%); 3) прибыль на 1 пользователя (%); 4) общее число кликов (%); 5) удовлетворенность пользователей (%); 6) время на совершение клика (мс).

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

К счастью, существует множество инструментов, помогающих повысить скорость загрузки и работы страниц, например, такие как Page Speed от Google или YSlow от Yahoo.

4. Сделайте текст более читабельным

Известный юзабилити-специалист Якоб Нильсен провел исследование, в котором он изучал особенности восприятия текста посетителями своего сайта, и оказалось, что люди редко читают онлайн-контент, находящийся у них перед глазами. Посетители среднестатистической веб-страницы (ок. 593 слов) читают 20—28% текста. При дальнейшем увеличении объема текста этот показатель постепенно уменьшается вплоть до 10%.

Взаимосвязь между числом слов на странице и максимальной долей этого числа (в %), которую способен прочитать пользователь (при скорости чтения 250 слов в минуту)

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

5. Не зацикливайтесь на «линии сгиба»