Юзабилити-анализ сайта «Ф-Центр»

Новости розницы

Насколько эффективен этот сайт, удобно ли им пользоваться?


Некоторое время назад нам написали представители компании, занимающиеся анализом и консалтингом интернет ресурсов. Они предложили предоставить аудитории iXBT.com свой анализ сайтов тех компаний, магазины которых мы тестируем. Мы, со своей стороны, дали им список лидеров нашего Рейтинга. Сегодня мы предлагаем вашему вниманию пробный тест, предоставленный нам компанией UIDesign Group. Материал дается без каких-либо правок со стороны iTRate.ru.

Введение

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

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

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

  • Выясняем (предполагаем) цели создания сайта;
  • Определяем аудиторию сайта (типы пользователей);
  • Выявляем сценарии взаимодействия пользователей с сайтом;
  • Фиксируем пользовательские требования к сайту;
  • Проводим краткое юзабилити-тестирование и экспертную оценку интерфейса.

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

Ограничения

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

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

Цели сайта

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

Бизнес-цели

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

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

Со стороны «виртуального» маркетингового отдела поступили следующие требования:

  • Доносить до покупателей преимущества работы с компанией «Ф-Центр»;
  • Поддержать бренды, принадлежащие компании «Ф-Центр»;
  • Сайт должен соответствовать единому визуальному стилю компании.
Технические ограничения
  • Поддержка всех современных браузеров;
  • Оптимизация нагрузки на сервер.

Пользовательские цели и требования

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

Персонаж

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

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

Вот описание нашего персонажа:


Егор, 27 лет

Образование: высшее техническое.

Семейное положение: холост.

Занятость: работает контент-менеджером в редакции.

Егор, в принципе, разбирается в технике, но он не знает текущего состояния рынка компьютеров.

Раньше (7-10 лет назад) он сам собирал себе компьютеры, но в последние годы ему это уже не так интересно, да и времени на это не хватает.

Домашнему компьютеру Егора уже 5 лет и он хочет заменить его на более современный. Егор хочет подобрать хороший компьютер за адекватные деньги. С этой целью Егор зашел на сайт компании «Ф-Центр», чтобы, если ему все понравится, подобрать и заказать компьютер.


Цели Егора

У любого персонажа (а значит и стоящей за ним категории пользователей) есть вполне определенные мотивы, которые выражаются в виде целей. Вот цели Егора:

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

Теперь можно определить основные сценарии взаимодействия Егора с сайтом:

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

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

Выделим лишь самые главные требования к нашему сайту. Он должен:

  • Явно демонстрировать наличие интернет-магазина;
  • Предоставлять информацию о преимуществах магазина перед конкурентами;
  • Позволять быстрым и понятным образом находить товары с известными, а также частично известными характеристиками;
  • Давать очевидную возможность выбора товара по разным параметрам (описания, рейтинги, сравнения);
  • Поддерживать высокоуровневые сценарии посетителей: «подобрать готовый компьютер», «собрать новый самостоятельно», «проапгрейдить существующий»;
  • Предлагать релевантную информацию о товаре или группе товаров: цена, порядок оплаты и доставки, сроки, стоимость и время доставки, гарантия;
  • Предоставлять информацию об особенностях (график, варианты оплаты, политика доставки) работы магазина в целом;
  • Информировать о технических тенденциях и новинках, что поможет при выборе товара;
  • Быть снисходительным к ошибкам пользователя и, по возможности, исправлять их автоматически, когда это возможно (например, когда пользователь неправильно написал название), а также предоставлять пользователю очевидную возможность исправить свои ошибки самому;
  • Давать возможность быстрой связи с человеком «по ту сторону экрана».

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

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

Юзабилити-тестирование

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

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

Знакомство с сайтом. Где находится текущий раздел?

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

В данном случае текущим является раздел «Товары и услуги».

Если мы посмотрим, на какие зоны сайта обращали внимание респонденты, когда мы их просили найти текущий пункт меню, то картина выглядела так:

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

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

Посетитель должен иметь возможность быстро обнаруживать, в каком разделе он находится.

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

Куда пойти за покупками?

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

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

Вот процессоры внутри раздела «Товары и услуги»:

А вот те же процессоры внутри раздела «Интернет-магазин»:

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

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

Способы оплаты и доставки

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

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

Однако, сам текст не приспособлен для чтения в онлайне, он явно многословен и плохо структурирован:


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

Однако у Егора так и остался неразрешенным вопрос, ответ на который он не нашел на сайте: «Всегда ли при безналичной оплате доставка будет бесплатной? А что, если я закажу коробку DVD-R дисков в районе МКАДа?»

Структура каталога

«Ёлки… мониторов нет вообще, что ли?! А, вот они, с принтерами...»
Некоторые подразделы каталога товаров находятся в неожиданных местах. Например, Егор не смог быстро обнаружить место, где находятся мониторы. Подраздел «Периферия» находится так далеко от подраздела с компьютерами, что Егор искал монитор здесь в самую последнюю очередь. «А почему телевизоры находятся тут же?» — спросил Егор. Он обратил внимание, что в первую очередь в глаза бросается слово «LCD», и слова «Проекторы» и «Телевизоры» под ним, а уже потом, если внимательно вчитываться, можно заметить слово «мониторы»:


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

Что такое «Все параметры»?

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


Лучше менять такое общее название в зависимости от типа товара. В данном случае подошло бы «Все типы разъемов».

Кроме того, Егору явно не хватало дополнительной, «человеческой» группировки или фильтрации в тех же процессорах — «Для игр» или «Для офисной работы», например.

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

Страница-тупик
«А где сами компьютеры-то? На сайте нет, звонить, что ли?»

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


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

И сколько это стоит?
«Цена, цена… не прогрузилась, наверное...»

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


Давайте проследим, куда смотрел Егор в поисках цены на разных страницах с детальным описанием товара:


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

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

Нечитаемые характеристики компьютера
«Чувствую себя шифровальщиком»

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


Если на экране представлено два-три десятка таких срок, то найти необходимое очень сложно.

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

Вообще, любая модель компьютера компании «Ф-Центр» относится к определенной серии, но отсутствует описание особенностей каждой из них, и Егору приходится действовать впотьмах. Имеется специальный сайт, посвященный готовым компьютерам компании (www.flextron.ru), однако найти ссылку на него сложно.

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

Конфигуратор
«О, клёво, что показывает несовместимость цветом…»

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

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

«Ха, а его надурить можно… или глючит он…»

Сам конфигуратор позволяет контролировать совместимость комплектующих между собой, однако имеются возможности обойти эту защиту. Например, можно заказать 6 жестких дисков для корпуса, в который их не вставить. Мало того Егору удалось еще и DVD-R привод заказать к этому компьютеру. Или можно выбрать видеокарту, которая по своим мощностным характеристикам не подходит к уже выбранному корпусу.

Контроль совместимости внутри конфигуратора необходимо улучшить.

Жесткая система поиска
«Да блин, неужто нет такого монитора?»

Поисковая система не понимает поисковых запросов, в которых присутствуют лишние пробелы. Например, по запросу Егора «Samsung T220GN» нужный монитор находится, а по запросу «Samsung T220 GN» — уже нет. Это серьезная проблема, так как в интернете и в печатных материалах можно встретить различные варианты написания, и жесткий поиск с высокой вероятностью не сработает.

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

Имеется серьезная проблема с тем, что результат выполнения поиска выглядит так, что заметить его очень нелегко:


«О, нашёл… Хотя тут только статьи, самих мониторов в продаже нет, наверное»

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

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

Принудительная регистрация

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

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

Сложная модель покупки
Ни одно из высказываний мы не рискнули опубликовать

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

Как уже предлагалось выше, можно безболезненно убрать один из разделов. Необходимо вообще ЗНАЧИТЕЛЬНО упростить для пользователя структуру всего сайта.

Статичная корзина покупки

Корзина покупки, к сожалению, статична и не несет никакой информации о своем содержимом:


«Я купил или не купил?»

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

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

Выводы

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

Основные проблемы сайта:

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

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

  • Оптимизировать структуру сайта. Для этого определить ожидания пользователей, используя ряд методик для структуризации и уточнения терминологии (например, с помощью карточной сортировки);
  • Оптимизировать компоновку экранов, например, выявить наиболее значимые элементы сайта, и увеличить их заметность (цена, «Корзина»);
  • Более полно поддержать основные сценарии работы (прежде всего, процесс выбора и покупки товара). Необходимо давать больше полезной информации на тех страницах, где пользователи принимают решения и уменьшить количество ненужного функционала, когда выбор сделан, и остается лишь оформить заказ;
  • Необходимо реализовать как можно больше способов для «подталкивания» покупателей к осуществлению выбора. Это могут быть рейтинги продаж, рекомендации покупателей и самого магазина, отзывы специальных изданий и так далее. Все это упростит процесс принятия решения покупателем и увеличит шанс повторных покупок через сайт компании «Ф-Центр».

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

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

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



Статья подготовлена сотрудниками компании UIDesign Group.



UIDesign Group (pr@uidesign.ru)
Опубликовано — 08 мая 2009 г.


   


Samsung Galaxy S8 на Байон.ру еще дешевле!
Дополнительная скидка 5% на Samsung Galaxy S8 ECT по промокоду W22SAMSUNG


Бесплатная доставка товаров Logitech!
Мыши, клавиатуры, колонки и наушники - заказывай в интерне-магазине www.fcenter.ru


Купон от Мебелион!
Купон: IXBT500JULY

Скидка 500 рублей на мебель, декор, текстиль и посуду с 20.06 по 31.07 от 6000 рублей!

Нашли ошибку на сайте? Выделите текст и нажмите Ctrl+Enter
Система Orphus