10 полезных фактов по юзабилити
Легкий в обращении сайт - вот ключ к успеху. Результаты исследования различных аспектов веб дизайна и интерфейсостроения будут полезны для увеличения юзабилити и процента конвертируемого трафика на любом ресурсе.
Этот большой пост всего лишь перевод с одного хорошего сайта, но полезность его от этого меньше не становится. Кстати, время от времени я буду стараться делать переводы «стоящих» статей с буржунета для читателей, которые не дружат с англоязычной блогосферой.
1. Табы ставим сверху, а не сбоку.
Исследования показывают, что табы и тайтлы лучше располагать над полями для заполнения, так как пользователи просматривают форму сверху вниз, а расположение таба слева или справа от поля усложняет и замедляет процесс. Ну… это да, я особо и не видел табов сбоку, но бывает. Это утверждение достаточно относительно, надо смотреть на дизайн и уж никак нельзя называть его глобально применимым.
Форма подписки Tumblr - это яркий пример идеальной формы, расположения табов и доп. ссылки.
2. Внимание пользователя сосредотачивается на лицах.
Люди инстинктивно обращают больше внимания на других людей, чем на предметы. Есть конечно и исключения в виде шикарных машин или модных гаджетов от apple. Но все же, когда мы просматриваем веб-сайты, то в значительной мере свое внимание обращаем на лица и глаза людей на картинках или фотографиях. Этот факт дает маркетологам хорошее подспорье для привлечения внимания к отдельным элементам сайта. Кроме того, мы невольно бросаем взгляд туда, куда смотрит человек на картинке.
Это что-то вроде тепловой карты, которая показывает зоны интенсивности внимания пользователей.
Обратите внимание, как изменяется зона внимания, если ребенок смотрит на заголовок и сам текст.
Так что, пользуйтесь этим интересным фактом, и вы легко сосредоточите внимание пользователей на наиболее значимых элементах вашей страницы или рекламы.
3. Качество дизайна формирует траст сайта.
Так же как качество ссылок и кода влияет на траст сайта со стороны поисковиков, также качество дизайна и высокая юзабилити создает доверие и отличное впечатление у посетителей.
Вроде бы ничего нового, но иногда дизайнеры совсем не учитывают прямую аудиторию и соответствующие особенности, которые стоило бы учесть…
4. Посетители не прокручивают - все важное на первый экран!
Статистика показывает, что 77% пользователей просматривают лишь ту информацию, которая подается в начальном окне сайта. Но это не значит, что следует пихать все, что можно в верхнюю часть страницы, нужно лишь серьезно подойти к использованию этого пространства, ведь, если страница перенасыщена контентом, то пользователи не будут знать, от куда начать читать вашу страницу, если, конечно, они вообще решат ее читать.
Basecamp, как хороший пример позиционирования информации на сайте.
На домашней странице следует указывать самую главную информацию:
5. Синий - любимый цвет ссылок.
Наилучшим цветом для обозначения ссылок все же остается синий.
Google не без причины использует этот цвет: синий цвет знаком большинству пользователей именно как цвет ссылок. Это не то, где нужно выдумывать и оригинальничать.
При выделении ссылок также следует обратить внимание на контраст: сделайте ссылки более темными или светлыми, чтобы они выделялись на фоне остального содержания сайта. Большинство интернет браузеров по умолчанию используют синий цвет для обозначения ссылок, поэтому его использование в данном качестве более привычно пользователям. Хотя другой цвет может и улучшит внешний вид вашего сайта, но может и сильно снизить процент кликов по этим ссылкам.
6. Идеальное поле поиска - 27 символов.
Большинство поисковых полей слишком маленькие. Основной недостаток таких окон заключается в том, что хотя вы и сможете вписать весь необходимый для поиска текст, видеть вы будете лишь его часть. Это сильно усложняет возможность редактирования. Средняя ширина поискового окна составляет всего лишь 18 символов, и 27% запросов являются слишком длинными для подобного окна. В то время как расширение поискового окна до 27 символов удовлетворяет размер 90% запросов. Помните, что вы можете задавать ширину окон не только в пикселях, но и в m`ах. (Одна единица «m» по ширине и высоте равна одной букве «m»).
Окошко поисковика Google достаточно широко, чтобы вместить достаточно длинное предложение.
Многие дизайнеры почему-то игнорируют это правило и тем самым усложняют использование сайтов, а ведь следовать ему достаточно легко.
7. Свободное пространство улучшает восприятие.
Дизайнерам давно известна ценность свободного пространства на сайте (расстояние между параграфами, картинками, кнопками и др. элементами сайта): мы можем группировать различные элементы страницы, показать иерархию этих самых элементов, для этого всего лишь нужно увеличить или уменьшить расстояние между ними.
Обратите внимание на то, как The Netsetter использует свободное место для обозначения полей и параграфов, что значительно улучшает восприятие контента.
Исследования показывают, что такой подход позволяет сделать процесс чтения значительно легче и увеличивает качество восприятия содержания сайта приблизительно на 20%.
8. Эффективное тестирование не требует большого количества пользователей.
Исследования Якоба Нельсона показывают, что всего 5 человек способны обнаружить около 85% проблем использования сайта, в то время как 15 человек найдут все или практически все проблемы вашего веб-сайта.
Источник: График Якоба Нельсона
Первые несколько пользователей находят наиболее серьезные проблемы, остальные лишь подтверждают их наличие, а после обнаруживают оставшиеся, менее значительные недостатки. Таким образом, всего лишь два пользователя найдут половину проблем вашего сайта.
Вывод: для достижения хороших результатов не нужно обращаться к дорогим и массовым исследованиям.
9. Информативность помогает выделиться.
Часто пользователи находят страницы многих онлайн магазинов малоинформативными, в то время как именно подробная информация о продукте увеличивает количество покупок.
Сайт компании Apple, к примеру, включает в себя отдельные странички технических характеристик (“Tech Specs”) продукта, что позволяет избежать нагромождения информации на основной странице, и в тоже время делает более подробную информацию легкодоступной.
Детальная информация о продукте способствует увеличению продаж, но не забывайте, что также не следует топить пользователя в текстовом болоте: разбейте текст на сегменты, добавьте подзаголовки и рисунки, не пользуйтесь сленгом - не каждый пользователь сможет его понять.
10. Большинство пользователей игнорируют рекламу.
Большинство пользователей просто не обращают внимание на рекламные баннеры, более того они игнорируют и все, что хоть отдаленно напоминает такие баннеры, поэтому не следует злоупотреблять излишне «стилизироваными» элиментами на сайте.
Квадратный баннер слева на самом деле не реклама, а ссылка на контент, но он так похож на рекламный баннер и поэтому его, скорее всего, просто проигнорируют.
Таким образом, реклама, которая выглядит как контент, будет более эффективной. Хотя подобный ход и принесет больший доход, вы можете потерять доверие пользователей к своему сайту.
Дополнительная информация.
Типографические исследования:
Источник: http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/
Этот большой пост всего лишь перевод с одного хорошего сайта, но полезность его от этого меньше не становится. Кстати, время от времени я буду стараться делать переводы «стоящих» статей с буржунета для читателей, которые не дружат с англоязычной блогосферой.
1. Табы ставим сверху, а не сбоку.
Исследования показывают, что табы и тайтлы лучше располагать над полями для заполнения, так как пользователи просматривают форму сверху вниз, а расположение таба слева или справа от поля усложняет и замедляет процесс. Ну… это да, я особо и не видел табов сбоку, но бывает. Это утверждение достаточно относительно, надо смотреть на дизайн и уж никак нельзя называть его глобально применимым.
Форма подписки Tumblr - это яркий пример идеальной формы, расположения табов и доп. ссылки.
2. Внимание пользователя сосредотачивается на лицах.
Люди инстинктивно обращают больше внимания на других людей, чем на предметы. Есть конечно и исключения в виде шикарных машин или модных гаджетов от apple. Но все же, когда мы просматриваем веб-сайты, то в значительной мере свое внимание обращаем на лица и глаза людей на картинках или фотографиях. Этот факт дает маркетологам хорошее подспорье для привлечения внимания к отдельным элементам сайта. Кроме того, мы невольно бросаем взгляд туда, куда смотрит человек на картинке.
Это что-то вроде тепловой карты, которая показывает зоны интенсивности внимания пользователей.
Обратите внимание, как изменяется зона внимания, если ребенок смотрит на заголовок и сам текст.
Так что, пользуйтесь этим интересным фактом, и вы легко сосредоточите внимание пользователей на наиболее значимых элементах вашей страницы или рекламы.
3. Качество дизайна формирует траст сайта.
Так же как качество ссылок и кода влияет на траст сайта со стороны поисковиков, также качество дизайна и высокая юзабилити создает доверие и отличное впечатление у посетителей.
Вроде бы ничего нового, но иногда дизайнеры совсем не учитывают прямую аудиторию и соответствующие особенности, которые стоило бы учесть…
4. Посетители не прокручивают - все важное на первый экран!
Статистика показывает, что 77% пользователей просматривают лишь ту информацию, которая подается в начальном окне сайта. Но это не значит, что следует пихать все, что можно в верхнюю часть страницы, нужно лишь серьезно подойти к использованию этого пространства, ведь, если страница перенасыщена контентом, то пользователи не будут знать, от куда начать читать вашу страницу, если, конечно, они вообще решат ее читать.
Basecamp, как хороший пример позиционирования информации на сайте.
На домашней странице следует указывать самую главную информацию:
- Имя веб-сайта
- Польза вашего сайта для пользователей
- Навигация на основные важные секции сайта
5. Синий - любимый цвет ссылок.
Наилучшим цветом для обозначения ссылок все же остается синий.
Google не без причины использует этот цвет: синий цвет знаком большинству пользователей именно как цвет ссылок. Это не то, где нужно выдумывать и оригинальничать.
При выделении ссылок также следует обратить внимание на контраст: сделайте ссылки более темными или светлыми, чтобы они выделялись на фоне остального содержания сайта. Большинство интернет браузеров по умолчанию используют синий цвет для обозначения ссылок, поэтому его использование в данном качестве более привычно пользователям. Хотя другой цвет может и улучшит внешний вид вашего сайта, но может и сильно снизить процент кликов по этим ссылкам.
6. Идеальное поле поиска - 27 символов.
Большинство поисковых полей слишком маленькие. Основной недостаток таких окон заключается в том, что хотя вы и сможете вписать весь необходимый для поиска текст, видеть вы будете лишь его часть. Это сильно усложняет возможность редактирования. Средняя ширина поискового окна составляет всего лишь 18 символов, и 27% запросов являются слишком длинными для подобного окна. В то время как расширение поискового окна до 27 символов удовлетворяет размер 90% запросов. Помните, что вы можете задавать ширину окон не только в пикселях, но и в m`ах. (Одна единица «m» по ширине и высоте равна одной букве «m»).
Окошко поисковика Google достаточно широко, чтобы вместить достаточно длинное предложение.
Многие дизайнеры почему-то игнорируют это правило и тем самым усложняют использование сайтов, а ведь следовать ему достаточно легко.
7. Свободное пространство улучшает восприятие.
Дизайнерам давно известна ценность свободного пространства на сайте (расстояние между параграфами, картинками, кнопками и др. элементами сайта): мы можем группировать различные элементы страницы, показать иерархию этих самых элементов, для этого всего лишь нужно увеличить или уменьшить расстояние между ними.
Обратите внимание на то, как The Netsetter использует свободное место для обозначения полей и параграфов, что значительно улучшает восприятие контента.
Исследования показывают, что такой подход позволяет сделать процесс чтения значительно легче и увеличивает качество восприятия содержания сайта приблизительно на 20%.
8. Эффективное тестирование не требует большого количества пользователей.
Исследования Якоба Нельсона показывают, что всего 5 человек способны обнаружить около 85% проблем использования сайта, в то время как 15 человек найдут все или практически все проблемы вашего веб-сайта.
Источник: График Якоба Нельсона
Первые несколько пользователей находят наиболее серьезные проблемы, остальные лишь подтверждают их наличие, а после обнаруживают оставшиеся, менее значительные недостатки. Таким образом, всего лишь два пользователя найдут половину проблем вашего сайта.
Вывод: для достижения хороших результатов не нужно обращаться к дорогим и массовым исследованиям.
9. Информативность помогает выделиться.
Часто пользователи находят страницы многих онлайн магазинов малоинформативными, в то время как именно подробная информация о продукте увеличивает количество покупок.
Сайт компании Apple, к примеру, включает в себя отдельные странички технических характеристик (“Tech Specs”) продукта, что позволяет избежать нагромождения информации на основной странице, и в тоже время делает более подробную информацию легкодоступной.
Детальная информация о продукте способствует увеличению продаж, но не забывайте, что также не следует топить пользователя в текстовом болоте: разбейте текст на сегменты, добавьте подзаголовки и рисунки, не пользуйтесь сленгом - не каждый пользователь сможет его понять.
10. Большинство пользователей игнорируют рекламу.
Большинство пользователей просто не обращают внимание на рекламные баннеры, более того они игнорируют и все, что хоть отдаленно напоминает такие баннеры, поэтому не следует злоупотреблять излишне «стилизироваными» элиментами на сайте.
Квадратный баннер слева на самом деле не реклама, а ссылка на контент, но он так похож на рекламный баннер и поэтому его, скорее всего, просто проигнорируют.
Таким образом, реклама, которая выглядит как контент, будет более эффективной. Хотя подобный ход и принесет больший доход, вы можете потерять доверие пользователей к своему сайту.
Дополнительная информация.
Типографические исследования:
- Высота строки (в пикселях) ÷ шрифт основного текста (в пикселях) = 1.48
- Длина строки (пикселей) ÷ высота строки (пикселей) = 27.8
- Расстояние между параграфами (пикселей) ÷ высота строки (пикселей) = 0.754
- Оптимальное количество знаков в строке 55-75
- Большинство форматов центрированы (94%) и обычно имеют фиксированную ширину (в пикселях) (92%).
- Домашняя страница обычно включает в себя отрывки из 10-20 сообщений (62%).
- 58% веб-сайта используется для размещения основного контента.
- Ссылка на регистрацию обычно обозначается словом “регистрация” (40%) и размещается в правом верхнем углу сайта.
- Чтобы не отвлекать пользователя, большинство форм регистрации имеют простой формат, (61%).
- Названия полей ввода выделены жирным шрифтом (62%), преобладает вертикальный характер размещения полей (86%).
- Обычно используют небольшое количество обязательных и дополнительных полей ввода.
- Большинство сайтов требуют подтверждения эл. адреса (82%), но подтверждение пароля является практически обязательным (72%).
- Кнопка «отправить» находиться или слева (56%) или в центре (26%) формы.
Источник: http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/