Рубрика развивается при поддержке

Всё ли могут деньги? Юзабилити-аудит сайта на три миллиона

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

В закладки

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

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

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

Глобальные проблемы

Рассмотрим сначала проблемы, имеющие отношение ко всему сайту в целом.

Проблема

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

Еще одна проблема - выделение ссылок фирменным цветом фуксии без какой-либо видимой зависимости.

Рекомендация

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

Проблема

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

Рекомендация

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

Калькулятор расчета стоимости ремонта (шаг 2: выбор дизайна)

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

Проблема

Некорректное применение стилей оформления навигационных элементов интерфейса.

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

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

Рекомендация

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

Проблема

Переключатель над картинкой и точки на картинке – одно и тоже или выполняют разные действия?

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

Рекомендация

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

Проблема

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

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

Возникает целый ряд вопросов:

  • примеры интерьеров являются фактическим предложением (я получу именно такой ремонт и должен выбрать из представленных на сайте) или это просто примеры (посмотри как это может быть)?
  • мебель, представленная в интерьере включена в стоимость ремонта или отображена для примера?
  • ремонт за 15 тысяч хуже ремонта за 20? Можно ли получить ремонт, похожий на примеры за 25 тысяч, но за 15?

Частично ответы на эти вопросы даны в интерфейсе с помощью ссылки «Материалы и этапы работ», но взаимодействие с этой ссылкой прерывает процесс расчета стоимости и порождает новые вопросы.

Рекомендация

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

Исключить варианты прерывания в процессе расчета стоимости ремонта (переход на другие страницы, например «Материалы и этапы работ»), например, путем открытия содержимого в попапе.

Калькулятор расчета стоимости ремонта (шаг 3: дополнительные опции)

«Зачем мне скульптура в санузле?» - далеко не все пользователи понимают значение специализированных терминов

Шаг «дополнительные опции» требует высокого уровня экспертности от пользователя, при этом существенно не влияет на стоимость ремонта. Отсутствие визуализаций и понятных объяснений порождает еще больше вопросов. В каком случае требуется демонтаж отделки? Что произойдет, если не выбрать пункт «Входная дверь», ее вовсе не будет или установят что-то «стандартное»? Что такое инсталляция? («Зачем мне скульптура в санузле?» - далеко не все пользователи понимают значение специализированных терминов).

Рекомендация

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

Проблема

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

Рекомендация

Добавить понятное обоснование рассчитанной стоимости ремонта. Еще раз напомнить о ключевой идее проекта: «все включено». Обеспечить достаточную мотивацию для взаимодействия с формой заявки.

Страницы Технология и материалы

Проблема

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

Рекомендация

Совместить калькулятор ремонта и материалы в рамках единого интерфейса.

Проблема

«О чем говорят все эти банки? Чем они отличаются от банок в вариантах ремонта дешевле/дороже? Мне нужно что-то с ними сделать? Выбрать?»

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

«Хм, тут можно что-то выбрать? Это все что есть или есть еще варианты? Только три серые плитки? А я хочу желтую!»

Рекомендация

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

Проблема

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

Рекомендация

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

Страница Телеканал и блок на главной «Телеканал»

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

Проблема

При взаимодействии с сайтом непонятно, что подразумевается именно канал на телевидении. Если пользователь ранее не взаимодействовал с этим ТВ-каналом, он не поймет, что компания имеет ТВ-канал, а не более классический для интернета Ютуб-канал.

Рекомендация

Более явно позиционировать, что компания имеет собственный телеканал и объяснить способ взаимодействия с ним.

Проблема


Текущее представление эфира не читается должным образом. Создается ощущение, что это якорные ссылки на части представленного видео слева. Но клик по списку не дает никакого эффекта. Что-то не работает?

Рекомендация

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

Проблема

Несвоевременное предложение стать участником программы. Пользователь еще не понял о каком телеканале идет речь.

Рекомендация

Изменить представление первого экрана в сторону презентации самого телеканала и только потом предлагать участие в съемках.

Страница «Наши работы»

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

Проблема

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

Рекомендация

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

Страница «Все услуги»

Содержание страницы «Все услуги» показывает услуги компании в новом амплуа: это уже не «ремонт - все включено», а услуги какого-то а ДЕЗа.

Проблема

Услуги комплексного ремонта «Ремонт под ключ», «черновой ремонт» и другие размещены вместе с услугами бытового ремонта: «Подоконники», «Кондиционеры», «Видеодомофоны» и прочее.

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

Рекомендация

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

Проблема

Неоднозначные названия услуг (например, «Подоконники», «Видеодомофон», «Инсталляция») не формируют точного представления о сути предложения и требуют высокого уровня вовлеченности.

Рекомендация

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

Страницы конкретной услуги (на примере установки кондиционера)

Проблема

Именно так большинство пользователей видят первый экран. «Мы изучили рынок – дышите свободно» не формирует значимое ценностное предложение.

Страница не передает суть услуги. Что именно предлагается, купить кондиционер, установить кондиционер или что-то другое? Требуется высокий уровень вовлеченности, чтобы понять суть услуги. А идея спрятать стоимость в самый конец не выглядит удачной на фоне всего остального.

Рекомендация

Сразу на первом экране просто и понятно объяснять главную суть услуги, как это работает, какова ее стоимость. И только после этого раскрывать конкретные детали и нюансы.

Что все это значит?

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

Почему так происходит? Это попытки сэкономить и сделать все инхауз? Ошибка в выборе подрядчика? Другие приоритеты? Или концепция «ремонт наоборот» имела в виду и «сайт наоборот»? Как думаете?

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Ruslan Kokin", "author_type": "self", "tags": [], "comments": 14, "likes": 24, "favorites": 80, "is_advertisement": false, "subsite_label": "marketing", "id": 54404, "is_wide": false, "is_ugc": true, "date": "Wed, 26 Dec 2018 16:43:32 +0300", "is_special": false }
Какая реклама
приносит деньги?
0
{ "id": 54404, "author_id": 235791, "diff_limit": 1000, "urls": {"diff":"\/comments\/54404\/get","add":"\/comments\/54404\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/54404"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199113, "last_count_and_date": null }
14 комментариев
Популярные
По порядку
Написать комментарий...
2

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

Ответить
0

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

Ответить
0

Меня трудно удивить, но такое говно по цене бриллианта впечатлило.

Ответить
1

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

Так держать автор!

Ответить
3

Спасибо, значит продолжим :)

Ответить

Комментарий удален

1

Мне кажется кто-то просто закешировал эти 3КК евро...

Ответить
1

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

Ответить
1

Спасибо за полезную статью!
На рынке услуг по юзабилити много "шаманов" и "шарлотанов". Скажите пожалуйста, кого можете рекомендовать для выполнения такой работы "под ключ" (анализ + внедрение)? Оказываете ли сами такие услуги?

Ответить
1

основные деньги на видео были потрачены

Ответить
0

Вроде в их статье писали, что на канал всего 1 млн потратили. Остальное на развитие "сервиса".

Ответить
0

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

Ответить
0

Да, что-то не поняли :) Вы когда сайты изучали, с какой целью это делали?

Ответить
0

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }