Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Юзабилити сайта: основы, анализ, улучшение

#1 doragon

doragon
  • Пользователь
  • 6 сообщений
  • Репутация: 2
0

Отправлено 22 Октябрь 2012 - 00:53

ПРЕДИСЛОВИЕ
Привет, %Username%.
Это моя первая статья на данную тематику и мое первое участие в конкурсе подобного рода. Я не профессиональный писатель и, если уж быть совсем честным, даже не работаю в Usability lab -_-
. Тем не менее, я надеюсь, что данная статья будет для вас полезна, независимо от того, есть ли у вас серьёзный опыт в разработке сайтов или вы только начинаете пробовать себя на просторах Интернет. Итак, приступим.

ЮЗАБИЛИТИ – ЧТО ЭТО?

Юзабилити, или usability – это понятие, со слов Яндекса показываемое порядка 5847 раз в месяц для русского варианта написания и 1139 раз для англоязычного. К слову скажу, что фразу «поведенческие факторы» просматривают порядка 1147 раз в месяц. «Так что же это за понятие такое и при чем здесь, собственно, поведенческие факторы?» – спросишь ты. Посмотрим, что нам скажет всем известный и авторитетный ресурс.

Юзаби́лити (англ. usability — дословно «возможность использования», «способность быть использованным», «полезность») — понятие в микроэргономике, отображающее степень удобности предмета для применения пользователями при достижении определённых целей в некотором контексте. [http://ru.wikipedia.org]

Не сказать, что сладко. Обратимся к другому источнику… Но и там, к сожалению, не пойми что.

Попробую ответить на вопрос выше сам. Объясняю...
В то время как одни серьёзные дяди, имея N посетителей в сутки, пытались выжать N+X посетителей в следующий день, другие, не менее серьёзные дяди, работали над тем, чтобы из имеющихся N потенциальных клиентов выжать денег как с N+X. Да, именно так! И не обманом каким-нибудь, а с помощью удобства пользования сайтом, то есть при помощи юзабилити. Об этом узнали тёти из поисковых систем. «Круто!» - решили они. И ввели новый алгоритм в поисковую машину, которая начала учитывать, как долго посетители находятся на сайте, как много страниц просматривают и т.п. Тем самым, появилось понятие «поведенческие факторы», которое напрямую зависело от другого понятия - «юзабилити».

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

Юзабилити сайта - это удобство пользования сайтом


«АЗ БУКИ ВЕДИ» ЮЗАБИЛИТИ

Юзабилити – сложная, разносторонняя и очень интересная наука. Познать ее сразу - очень нелегко. Мне, например, понадобилось порядка полугода чтения огромного количества статей, заметок, книг, для того, чтобы более-менее разобраться в вопросах юзабилити. Тем не менее, как гласит принцип Парето, 20% усилий дают 80% результата. Что же, рассмотрим эти 20% подробнее. Что нам нужно знать в первую очередь?

Мы остановимся подробно на следующих моментах:
  • структуре сайта
  • цветах сайта
  • шрифтах сайта

СТРУКТУРА САЙТА, ИЛИ ВОПРОС О НАСУЩНОМ

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

Ладно-ладно, успокойся. Результат здесь следующий: если ты быстро смог придумать ответ, значит тебе действительно есть над чем работать (дочитываешь статью, благодаришь автора и идешь вкалывать), в противном случае…
…тебе все равно есть над чем работать (делаешь то же самое, что и предыдущая группа)!

Итак, несколько интересных фактов:
  • у тебя есть всего лишь 3 секунды, чтобы привлечь внимание посетителя иначе он покинет сайт
  • скорость загрузки сайта критично влияет на показатель отказов на сайте: лишние полсекунды загрузки могут лишить тебя до 20% посетителей
  • посетители просматривают страницы сверху вниз, слева направо
  • и к тому же, просматривают статьи буквой F (маркером рисуешь на мониторе огромную букву F и собственно, видишь как просматривают твой сайт) (эй-эй, стой! насчёт маркера я пошутил, ты чего?)
  • и в добавку – посетители сначала не читают, а просто просматривают твой сайт, зрительно «цепляясь» за отдельные элементы.
На самом деле, таких фактов – очень много. Огромное количество факторов влияет на лояльность твоей аудитории к сайту. Из личного опыта могу сказать, что банальное изменение говнодизайна одного сайта на другой, но значительно удобнее и лучше, привело к росту постоянной аудитории ресурса на 30% за 2 месяца!

Так на что же в первую очередь нужно обратить внимание?
Для каждого проекта этот список будет индивидуален и зависит от тематики сайта, его направленности и целого ряда других факторов. Однако, есть общие моменты, которые желательно учесть на каждой странице твоего сайта:
  • логотип, который является ссылкой на главную страницу сайта
  • контакты сайта, которые желательно размещать в верхней части экрана
  • «хлебные крошки» - многие стали про них забывать, но от этого они не перестали быть удобным инструментом навигации по сайту (и хорошо используемым)
  • основное меню сайта, краткое, максимум в два уровня, без огромного количества пунктов и подпунктов (лучше разделить на несколько, чем запихивать все в одно)
  • минимальный скролл на страницах. А лучше его отсутствие. Не заставляй пользователя много скролить. Это плохо. Прими как факт.
  • пути по сайту до конкретной цели - чёткие, простые и интуитивно понятные. Пользователь не должен делать 100500 кликов, чтобы попасть на нужную страницу. Да и зачем? Ведь есть же и другие сайты…
  • собственно, сами материалы - удобочитаемые и информативные.
В то же время, не нужно ставить на сайт различного рода календари, блоки с погодой, мини чаты, новости компании, курсы валют (конечно, если это не сайт банка). Все это лишь отвлекает посетителей от главного - материалов/товаров на твоём сайте. Все это мешает найти ту информацию, за которой он и пришёл на твой сайт. Ну, и сам подумай: зачем оно ему нужно? Человек зашёл скачать купить программу, а ты ему погоду на завтра показываешь. «Ух, епт, завтра гроза! Не, не буду скачивать покупать. Мне по гороскопу, который между прочим здесь же на сайте слева, сегодня запрещено делать покупки!» Да-да, именно так. Как курице пропеллер, честное слово. А внимание отвлекает.

Общий совет - сайт должен отвечать ожиданиям пользователей. Никаких сисек на детских сайтах. И точка. Никакой рекламы с продажей цветочных букетов на фан-сайте футбольной команды. И точка.

Делай удобную, простую и интуитивно понятную структуру сайта!



А теперь пробежимся по конкретными структурным элементам сайта.

Заголовки
  • Заголовки должны быть хорошо заметными и читаемыми
  • Краткость – сестра таланта. Пиши коротко и по делу. «Воду» никто не любит
  • Заинтересуй пользователя. Зацепившись взглядом за заголовок, у пользователя должен появиться интерес
Тексты
  • дублирую про краткость. Как советовал один известный дядя: «написал текст? Сократи его в 2 раза! Сократил? Сократи ещё раз в 2 раза!» Серьёзно. Хватит писать простыню текста про то, какой ты хороший или какой у тебя замечательный товар/услуга. Это никому не интересно. Это скучно. Это тратит драгоценное время. Это неудобно!
  • отсутствие ошибок. Многие забывают, что в школе был такой предмет как «русский язык». Не надо так делать. Посетители не любят ошибок. Да-да, тебе говорю!
Кнопки
  • как ни странно, но по кнопкам чаще кликают, чем по ссылкам. Поэтому ссылки в стиле «зарегистрироваться» или «скачать» нужно делать именно кнопками, а не ссылками. Проверь сам – это реально работает!
  • ключевые кнопки нужно размещать в верхней части страницы – так они сразу попадают в поле зрения пользователя
  • кроме того, ключевые кнопки в стиле «купить» обязательно нужно дублировать – улучшает видимость
  • и не забываем – кнопка должна быть кнопкой: большой, заметной, яркой. Но без фанатизма. Слишком пёстрые кнопки, наоборот, ухудшают восприятие. Сделай аккуратно и будет тебе хорошо :)
Изображения
  • изображения – любимчики публики. Поэтому, на них очень часто смотрят. И видеть хотят их в хорошем качестве
  • изображения с различных фри-хостингов картинок – очень плохая идея! Легко узнаются и плохо влияют на лояльность посетителей. Лучше купите. Или нарисуйте сами.
  • не забываем – cиcьки правят миром. К чему это? Изображение с «грудями» лучше воспринимаются аудиторией и вообще, отлично концентрируют внимание не только на себе, но и на тексте рядом. Однако – не переусердствуй

Формы
  • не делайт километровые формы: чем меньше полей, тем лучше
  • используй автоматическую валидацию полей. Не нужно заставлять пользователя кликать на «Оправить» для того, чтобы затем снова вбивать какие-то данные. В конце концов – это невероятно скучно!
  • не спрашивай те данные, которые тебе не нужны. Особенно для интернет-магазинов актуально: спрашивают все, вплоть до паспортных данных. Зачем? Посетитель пришёл купить товар, купить – отдать деньги – сделать тебя богаче… Тебе все ещё нужен паспорт?

Представь себя на месте пользователя!


ШРИФТЫ

Пожалуй, один из самых маленьких блоков статьи.
  • во-первых, используй только web safe шрифты, то есть те, которые являются безопасными и есть во всех распространённых операционных системах. Смотрим их, например, вот здесь: http://www.w3schools...bsafe_fonts.asp
  • Делается это с целью нормального отображения шрифтов в браузере пользователя. Использование других шрифтов не преступление, но тебе никто не гарантирует, что в том же Google Chrome не расползётся шрифт, нормально отображающийся в Mozilla Firefox. И шрифты от http://google.com/webfonts здесь не исключение. «Дизайнер так сказал?» - шли его лесом читать бизнес-литературу, раздел «рентабельность» (вообще, некоторые дизайнеры меня вымораживают в этом плане).
  • во-вторых, не мельчи – не у всех посетителей нормальное зрение. И поверь, читать мелкий текст очень тяжело. Это я из своего опыта говорю - сам очкарик.
  • в-третьих, для статей используй тёмный шрифт и светлый фон. Так читать удобнее. Так читать привычнее.
  • в-четвертых, для статей используй межстрочный интервал в полтора раза больший размера шрифта. Например, у нас 14 шрифт на сайте (font-size:14px;). Тогда межстрочный интервал для статей будет 14px * 1.5 = 21px (line-height:21px;). Для тех, кто не в курсе, межстрочный интервал – это промежуток по вертикали между двумя соседними строками.
  • в-пятых, в статьях используй обычное начертание шрифтов, никаких жирных начертаний, никаких курсивов! Забудь font-weight:bold, забудь font-weight:italic. Читать такие тексты крайне сложно, пусть тебе и кажется, что они красивы как никогда J. Это не касается заголовков, но и там – без фанатизма. Однако, выделять отдельные фразы и слова - наоборот, хорошо. Конечно, если это основные моменты материала, а не ради тупого спама ключевиками (думаю, ты понял о чем я).
Вообщем, вот тебе совет …

Используй только стандартные шрифты, не мельчи, не делай «вырви глаз»



ЦВЕТА САЙТА

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

Однако, все поправимо… Дизайнер ты или нет – не ленимся и идём на ресурс, подобный вот этому https://kuler.adobe.com/ и выбираем наиболее понравившуюся цветовую схему для сайта. На базе неё делаем нормальный дизайн для сайта, с учетом уже всего вышесказанного о юзабилити, либо находим из паблика что-то более менее приемлемое (опять же применив новые знания) и переделываем шаблон в выбранную цветовую схему. Конечно, это трудозатратно. И каждый здесь выбирает сам – менять или не менять.

Но качество дизайна сайта – крайне важный момент. И с каждым, кто говорит, что «фигня все это, и так покупают» я могу поспорить. А главное доказать. За 90% новой увеличившейся прибыли, естественно. Чтобы обиднее было.

Выбирай цвета для сайта грамотно!



А И B СИДЕЛИ НА ТРУБЕ, ИЛИ КОРОТКО О СПЛИТ-ТЕСТИРОВАНИИ

А здесь - самое интересное! Скажу честно – это мой любимый раздел. Ибо тут-то и начинается проверка гипотез, анализ статистики и сбор сливок.

Забежим немного в будущее и посмотрим на то время, когда ты уже применил тезисы статьи к своему сайту и у тебя есть первые результаты. Собственно, здесь и появляется тот самый вопрос: а как посмотреть эти самые изменения? Одного счётчика посещаемости однозначно мало. Хочется чего-то явно большего. Хотя и таких показателей, как «отказы», «время пребывания на сайте» да и увеличившейся суммы в кошельке будет достаточно. Но…
Не буду томить. Есть такая клёвая штукенция как сплит-тестирование. Конкретнее, A/B-тестирование. Что это такое? Суть такова: для одной и той же страницы сайта, например, страницы заказа товара, создаются сразу 2 варианта. На одном у тебя новые большие кнопочки. А на другом – обычные ссылки. Оба варианта страницы публикуются на сайте. После этого на сайт устанавливается специальный скрипт, который отдаёт в случайном порядке посетителю либо первую, либо вторую страницу. Заодно скрипт проводит измерения и определяет, где лучше кликали по кнопочкам или дольше просматривали информацию. Собираемых параметров – очень много и они прекрасно настраиваются. Все это очень помогает в дальнейших экспериментах. А главное – по ним прекрасно видно, где и какие изменения лучше сработали. Попробуй – это не так сложно как кажется. Для начала – вот тебе бесплатный инструмент http://www.google.com/analytics/, раздел «Content Experiments». Результаты не заставят себя ждать. Ну, и основная мысль…


Проверяй каждую гипотезу!



Да-да, именно на постоянных экспериментах и строится юзабилити.
Ну, а я на этом заканчиваю. Много о чем ещё, конечно, хотелось написать: и о способах повышения лояльности, и о призывающих к действию блоках, и о … Но все это уже тема следующей статьи. Которая, скорее всего, будет уже на моем блоге (запущусь на днях :))

Спасибо за внимание.

Вопросы? :(

При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение

 

 

  • 0


Оформление форума – IPBSkins.ru