Бесплатные советы по юзабилити

Всемирный день usability был учрежден в 2005 году и с тех пор отмечается каждый год во второй четверг ноября. Главный лозунг этого дня: «Сделай проще!»

Термин «юзабилити» (usability) переводится с английского как «возможность использования» и применим для многих сфер. В сфере техники он становится синонимом «эргономичности», а в сфере разработки ПО и сайтов приобретает роль важнейшего критерия оценки продукта, ведь кому нужен функционал, если им невозможно пользоваться?

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

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

Не каждый может нанять специалиста, который бы отвечал только за простоту его ПО или сайтов, зато каждый может выделить время и поработать над своими продуктами, чтобы сделать их более user-friendly («дружественными для пользователя») и, как следствие, увеличить конверсию. Но в любом случае нужно помнить, что каждое ПО и веб-сайт (вне зависимости от конверсии) всегда делается для пользователей и должно быть удобно для них. Для этого и существуют такие правила.

Правила юзабилити

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

Правило трех кликов

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

Распределение Парето

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

Закон Парето (распределение Парето) гласит: 20% труда реализуют 80% результата. Если перенести его в веб, это значит, что 20% пользователей (заказчиков) приносит 80% прибыли. То есть для достижения лучшего результата необходимо определить эти двадцать процентов. Например, если ты продаешь в интернет-магазине разные виды техники, необходимо разместить на видном месте именно те товары, которые пользуются наибольшим спросом. Вместо этого многие размещают там неизвестные товары, считая, что популярные и так найдут. ИЛИ

Правило семи сущностей

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

Перевернутая пирамида

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

Структуризация и перегрузка

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

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

Формат

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

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

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

Правило нескольких секунд

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

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

Эффект Зейгарник

Эффект назван в честь советского психолога Блюмы Зейгарник (его еще называют эффектом неопределенности). Ее исследование основано на том, что человек не любит неопределенности и недосказанности. Люди стараются как можно быстрее находить ответы на возникающие вопросы, и именно это и показывает эффект неопределенности. В 1927 году Блюма Зейгарник проводила эксперимент: она собрала в одной комнате людей и дала им разные задачи для решения, а потом, сославшись на недостаток времени, забрала незаконченные работы. После опроса выяснилось, что люди запомнили именно недоделанные задачи.

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

Синдром утенка

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

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

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

Баннерная слепота

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

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

Гештальт

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

• Закон близости говорит о том, что, когда мы видим набор элементов, расположенных в непосредственной близости друг от друга, мы распознаем их как группу. Поэтому, если эта группа отличается по стилю, создается впечатление, что что-то не так.
• Закон сходства показывает, что похожие объекты человек группирует подсознательно, поэтому, если у тебя есть разделы, пункты меню или блоки информации, они должны выглядеть одинаково: в восприятии пользователя они группируются автоматически.
• Закон симметрии утверждает, что люди склонны оценивать симметричные объекты как один цельный элемент.
• Закон смыкания говорит, что люди склонны объединять объекты, которые на самом деле не являются едиными, если они создают целостное впечатление. Это дает возможность создавать у пользователей впечатление цельного объекта из разных, для чего достаточно объединить их в знакомую форму (рисунок с логотипом IBM).

Зеркальный эффект

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

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

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

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

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

xakep.ru

Типичные ошибки и способы их избежать

Ошибка №1. Нет контактов!

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

 В «Контактах», кроме e-mail, необходимо указать:

1. Физические адреса офиса и пунктов выдачи (если имеются) с картой проезда.
2. График работы офиса/пунктов выдачи.
3. Региональные контакты (если есть).
4. Срок хранения покупки.
5. Название юридического лица плюс реквизиты.
6. Телефоны и факсы.

Желательно иметь отдельную линию для бесплатных звонков. Если же онлайн-магазин не может себе ее позволить, придется довольствоваться чатом, где, допустим, с 9 до 20 менеджер сможет ответить на возникающие у покупателей вопросы. На идеальной странице контактов должно присутствовать (и работать!) все вышеперечисленное: полная информация, бесплатные звонки, чат. Пусть видят, что вы не намерены скрываться, всегда находитесь на связи и готовы к сотрудничеству. 

Ошибка №2. Без регистрации — никуда!

Посетитель заходит через поисковую систему в незнакомый Интернет-магазин, обнаруживает там нечто привлекательное, загорается жаждой покупки, нажимает на кнопку «Заказать»… и получает холодный душ в виде требования зарегистрироваться. Хорошо еще, если ссылка регистрации бросается в глаза: тогда есть шанс, что он перейдет по ней. Но если ссылку нужно искать или страница регистрации содержит длинный перечень полей, посетитель, скорее всего, утратит желание продолжать действия.

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

Не стоит путать Интернет-магазин с режимным объектом, куда нельзя попасть без разрешения и документов. Если человек хочет купить — пусть покупает немедленно, без малейших проволочек, ведь мгновенно принятое решение может быстро измениться. Незарегистрированные покупатели должны иметь возможность полноценного онлайн-заказа. Этой возможности не препятствует наличие «Моего кабинета»/«Личного профиля»: они пригодятся позднее для управления покупками.

Ошибка № 3. Слишком много полей! 

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

Процедуру оформления покупки стоит сделать настолько простой, насколько это возможно. Обязательны лишь три поля: имя, адрес электронной почты, и в самом конце — телефон. Обратный порядок может вызвать неприятие: ведь и в реальной жизни мы не начинаем знакомство с номера телефона, не так ли?

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

Ошибка №4. Неработоспособные формы. 

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

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

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

Ошибка № 5. Нет описания! 

Карточка изделия с фото, но без характеристик — оплошность, характерная для недавно открывшихся Интернет-магазинов, спешащих продемонстрировать ассортимент. Качественное фото — это хорошо. Несколько снимков — еще лучше. Но никакое фото не отменяет необходимости толкового описания.

Размещать описание/характеристики необходимо по четырем причинам:

1. это фактор доверия;
2. ключевые слова из описаний используются поисковиками;
3. не зная технических характеристик, гость не решится сделать покупку;
4. описания влияют на решение купить вещь.

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

Ошибка № 6. Нельзя купить за 1 клик. 

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

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

Ошибка № 7. Утративший актуальность дизайн. 

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

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

10 способов увеличить конверсию

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

1.  Отсутствие прокрутки на главной странице. 

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

2. Демонстрация конкурентных преимуществ. 

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

3. Однозначные указания алгоритма действий. 

После отправления товара в «Корзину» нельзя оставлять покупателя наедине с вопросами «Куда идти?» и «Что делать дальше?»: ему надо четко задать ориентиры. Никаких расплывчатых указаний типа «Продолжить»! Кнопки должны однозначно указывать на следующее за нажатием на них действие, выстраивая четкий алгоритм: за отправкой в корзину — оформление заказа, за оформлением — выбор способа доставки.

4. Полная информация об оплате/доставке.

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

5. Дублирование товара. 

Положив вещь в «Корзину», клиент должен по-прежнему его видеть на стадии оформления заказа. Дублирование информации устраняет сомнения: ту ли вещь он покупает.

6. Упрощение выбора. 

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

7. Отсутствие запретов. 

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

8. Контакты там, где они уместны. 

Для указания способов связи есть «Контакты» — там их следует размещать, а не в карточке товара. Глядя на несколько телефонных номеров под описанием, посетитель теряется.

9. Ничего лишнего в карточке товара.

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

10. Интересные сервисы. Среди них: 

1. Кнопки «Сообщить о проблеме», «Онлайн-консультация», «Недавно просмотренные» на каждой странице;
2. Опция просматривания увеличенного фото изделия («лупа»);
3. Разнообразная система скидок: по партнерской программе, накопительная (при следующих окупках), при рекомендации друзьям в соцсетях и проч., стимулирующие лояльность;
4. Отдельный раздел товаров со скидками/акциями
5. Продажа в кредит;
6. Разделы гарантий и новинок;
7. Информирование через SМS (о статусе заказа, о его прибытии и т. д.);
8. Всплывающие напоминания-подсказки со стороны системы.

Они учитывают специфические черты разных категорий пользователей.

1. Поле поиска следует максимально укрупнить, привлекая к нему внимание (при этом сам поиск обязан работать безукоризненно).
2. Отличные фотографии.  Качественные, с натуральными сочными цветами, они должны создавать у покупателя ощущение прикосновения к изделию. Все детали должны быть отчетливо видны. К фото неплохо добавить видеоролик и/или «виртуальный тур».
3. Если каталог объемный и сложный, а навигация нужна простая и доступная, то стоит попробовать мегаменю. Это накладка с перечнем разделов/категорий, выскакивающая при открытии страницы. Будучи развернутой, она занимает много места на странице, помогая сориентироваться, но после сворачивания практически незаметна.
4. Очень практична функция быстрого просмотра: она дает возможность взглянуть на вещь, не уходя со страницы категории. Пользователь быстро продвигается по каталогу, задерживая внимание на понравившихся объектах.
5. Отзывы — как об ассортименте, так и о магазине. Их присутствие обязательно, причем если отзывам о товаре место на его странице, то отзывы о магазине лучше подавать посредством слайдера. Создание отдельного раздела отзывов вполне допустимо, но нужно понимать, что аудитория его будет невелика.
6. Кнопки соцсетей — заметные, но не перетягивающие внимание на себя. Их не стоит недооценивать: пусть посетитель ничего не купит, а лишь разместит в своей ленте фото понравившихся часов или шубы — это уже реклама и какое-то количество новых посещений.
7. Информацию о наличии/отсутствии товарной единицы стоит подавать так, чтобы она была видна с первого взгляда, добавляя поле «Уведомить при появлении». Иначе выйдет так: клиент добавил вожделенную вещь в «Корзину» — и узнал, что ее нет в наличии. Покупка не состоялась, и извинения мало что меняют.
8. Крупная кнопка «Корзина» на видном месте. Независимо от того, демонстрируется ли все ее содержимое при каждом добавлении позиции, или пользователь видит только уведомления, кнопке все время надлежит пребывать в зоне визуальной досягаемости. Хорошая идея — «украшать» корзину мини-фотографиями добавленных вещей.
9. Подписка на уведомления — в виде всплывающего окна или подсказки — помогает собрать базу адресов и успешно с ней работать. Место ее размещения опционально: от страницы товара до блога, а тематика новостных писем может не ограничиваться скидками и содержать сведения о новинках, полезные материалы и проч.
10. Задача любого Интернет-магазина — привести клиента к оформлению заказа. Но, если он его уже делает, не нужно мешать! Никаких дополнительных ссылок, ничего интересного, способного отвлечь от процесса покупки.
11. Даже если клиент в школе любил решать задачки, он пришел в Интернет-магазин не для упражнений в арифметике. Потому следует указывать в «Корзине» окончательную стоимость вещи — со всеми дополнительными расходами, включая поставку.
12.  Не стоит пренебрегать «хлебными крошками» — цепочкой ссылок, показывающих посетителю, откуда он пришел и где находится сейчас. Они помогают сориентироваться и уяснить структуру категории — особенно тем, кто пришел по ссылкам поисковых систем.

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

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

www.insales.ru

Как улучшить юзабилити сайта

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

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

1. Оптимизация скорости загрузки 

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

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

   
    

2. Оформление согласно тематике 

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

3. Удобство чтения 

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

   Также повышение юзабилити наблюдается при упрощенном структурировании текстового контента. То есть нужно использовать:
   – короткие предложения и абзацы (4-6 строк);
   – широкие интервалы между строчками;
   – поля по краям текста. 

   
    

4. Сложности никто не любит 

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

5. Удобная навигация и структура 

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

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

   
    

6. Заполнение сайта качественным контентом 

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

   В первую очередь текстового. О том, как писать правильные тексты, читайте в статье «Советы SEO-копирайтера».
    

7. Полнота и пошаговость предоставленной информации 

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

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

8. Призывы к действию 

   Можно значительно улучшить юзабилити сайта, если на его страницах разместить бросающиеся в глаза призывы к действию (Задайте вопрос! Оформить заказ! Подписаться на рассылку!). Это будет создавать иллюзию общения с посетителем, беспокойства о нем, желания помочь ему добраться до важной информации/нужного товара/услуги.

   
    

9. Общение с посетителем 

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

10. Адаптация под мобильные устройства 

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

11. Быстрое оформление 

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

Чего делать не стоит

Принципы юзабилити сайта нарушают:

• «Развешивание» на страницах рекламы в количестве большем, чем контента.
   
• Использование всплывающих навязчивых призывов к действию.

  
   

• Автоматическое воспроизведение видеоконтента.
   
• «Кислотные» цвета текста или фона страничек.
   
• Огромные сплошные тексты.

Вывод

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

Надеемся юзабилити нашего сайта Вас удовлетворило? Если есть замечания, укажите их в комментариях!

seo-akademiya.com

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

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

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-образную форму. Это определенно делает текст более читабельным при быстром просмотре.

• 7 уроков из практики айтрекинга

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. Не зацикливайтесь на «линии сгиба»

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

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

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

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

Даже наоборот: движимые любопытством, пользователи, которым выше «линии сгиба» было представлено недостаточно информации, еще больше склонны скролить вниз. Специалист компании CX Partners Джо Лич (Joe Leech) также провел исследование на эту тему.

Тепловые карты двух страниц. То, что часть информации представлена ниже «линии сгиба» (слева), побуждает пользователей скролить вниз и более подробно изучать материалы

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

• Как заставить пользователей прокрутить лендинг пейдж до конца?

6. Важный контент — в левую часть страницы

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

Доля времени, уделяемая просмотру каждой зоны страницы в зависимости от удаленности этой зоны (в пикселях) от левого края экрана

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

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

• 4 совета по оптимизации конверсии целевых страниц с помощью тепловых карт

7. Не забывайте про пустое пространство

Итак, вам удалось привлечь пользователя на сайт. Теперь вы хотите, чтобы он остался на нем подольше. Что нужно для этого сделать? Мы уже говорили про повышение читабельности. Один из способов заставить пользователя более подробно изучать содержимое — правильный выбор стиля и размера шрифта. Использовать шрифт serif или sans-serif? Средний кегль или крупный? А что насчет расстояния между строками и буквами? И насколько шрифт должен контрастировать с фоном?

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

Влияние наличия полей: 1) на скорость чтения; 2) на степень усвоения текста. (Слева — с полями; справа — без полей).

• О важности пробелов

8. Дело в мелочах

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

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

И это ошибочный подход.

Одна незначительная на вид мелочь может определить разницу между успешным и совершенно провальным ресурсом. Дизайнер пользовательских интерфейсов Джаре Спул (Jared Spool) приводит в качестве примера этому один из случаев из своей практики, когда удаление одной-единственной кнопки, которая озадачивала многих пользователей в процессе оформления заказа, в первый же месяц привело к повышению продаж на 45%. В результате только за первый год прирост выручки составил $300 000 000.

Похожие соображения, видимо, двигали специалистами дизайнерской компании Flow. На этапе оплаты заказа кредитной картой на их сайте периодически возникала ошибка, и пользователь попадал на стандартную страницу «ошибка 404». Маркетологи компании переработали страницу, и вместо бесполезного сообщения пользователи стали видеть следующий текст: «Просим прощения, возникла ошибка при обработке заказа. Списания средств с вашей карты не произошло. Пожалуйста, перейдите в корзину и попытайтесь снова». (We’re sorry, we’ve had a problem processing your order. Your card hasn’t been charged yet. Please click checkout to try again.) Вежливо, лаконично и в то же время информативно.

В результате ежемесячное число оформленных заказов возросло на 0,5%, что выразилось в дополнительных 25 000 000 фунтов стерлингов выручки в год.

Информативное сообщение вместо стандартного «ошибки 404»

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

• 7 уроков оптимизации юзабилити сайтов на основе 200 000 тестов

9. Поиск не должен служить компенсацией неудобного меню

Заходя на ресурс, каждый ожидает увидеть удобное меню навигации, даже в тех случаях, когда сайт обладает хорошим функционалом поиска. Таким образом, навигация просто обязана быть хорошо структурированной и удобной в использовании. Американский дизайнер Джерри Мак-Гаверн (Gerry McGovern) провел исследование, по результатам которого 70% испытуемых для нахождения нужного контента предпочли кликать на ссылки, вместо того чтобы использовать поиск.

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

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

• Как оптимизировать навигацию интернет-магазинов, или 7 раз отмерь

10. Домашняя страница теряет значимость

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

Еще одно исследование, проведенное Джерри Мак-Гаверном, показало тенденцию снижения числа просмотров домашних страниц: в 2003 г. число просмотров главной страницы одного крупного интернет-ресурса составляло 39% от общего числа просмотров, а в 2010 г. этот показатель снизился до 2%. По результатам аналогичного исследования процент просмотров главной страницы другого веб-сайта в период с 2008 по 2010 гг. уменьшился с 10% до 5% соответственно.

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

Высоких вам конверсий!

По материалам: infiniteconversions.com, image source Peter Alfred Hess 

lpgenerator.ru