Главная » Хабрахабр » Всё ли могут деньги? Юзабилити-аудит сайта на три миллиона

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

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

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

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

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

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

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

Проблема

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

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

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

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

Проблема

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

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

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

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

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

Проблема


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

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

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

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

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

Проблема


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

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

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

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

Проблема

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

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

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

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

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

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

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

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

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

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

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

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

Проблема

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

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

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

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

Проблема

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

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

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

Проблема


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

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

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

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

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

Проблема

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

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

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

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

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

Проблема

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

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

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

Проблема

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

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

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

Проблема

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

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

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

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

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

Проблема

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

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

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

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

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

Проблема


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

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

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

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

Проблема

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

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

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

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

Проблема


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

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

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

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

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

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

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

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

2 Этот материал был впервые мною опубликован на vc.ru и теперь, благодаря WD-40, доступен на Хабре. p.s. Спасибо, WD-40!


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Ложные срабатывания в PVS-Studio: как глубока кроличья нора

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

Онлайн контест по решению задачи из теории игр

Привет, Хабр! На факультативе по теории игр мы решаем различные интересные задачи, и я хотел бы поделиться с вами одной из таких. Меня зовут Миша, и я студент. Описание игры «Я люблю вархаммер, поэтому решил адаптировать условие» Играют двое. 1. ...