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

Анализ юзабилити программных продуктов

27 Августа 2019
Алексей Ковбасюк
COO
Алексей  Ковбасюк
следующая статья

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

Для начала быстро вспомним это понятие. “Юзабилити” (от англ “usability”) — удобство использования продуктом, его эргономичность, понятность юзеру. Как видите, уже в самом понятии отчетливо виден фокус — на юзере (пользователе) продукта. Почему? Именно он является движущей силой вашего продукта и онлайн-бизнеса ибо тем или иным образом приносит вашему сайту или приложению пользу. В виде посещений, привлечения других пользователей и, конечно же, в виде покупок.

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

Целевые действия 

Начнем пожалуй с основного - целевых действий (ЦД). Какой бы ни был программный продукт — интернет магазин по продаже ювелирки или соцсеть для обмена фоточками и френдинга — у него есть целевые действия.
Это может быть:

  • Покупка;

  • Заявка; 

  • Предоставление личных данных;

  • Шейринг (привлечение новых посетителей через соцсети);

  • Длительное пребывание на сайте;

  • Скачивание прайс-листа или презентации;

  • Другие способы связи с сайтом (онлайн консультант, быстрый чат и прочее).

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

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

Конверсия простыми словами — это количество пользователей от общей посещаемости сайта, которые совершили ЦД. Измеряется в процентах.

Для различных видов программных продуктов успешной конверсия считается по разному: от 2-3% для лендинга по продаже “стремных” товаров и до 25-30% в случае с понятным массовым продуктом и хорошим маркетингом.

К сожалению, понятие конверсии так сильно поселилось в мозгах многих собственников программных продуктов, что на другие вещи внимание либо не обращают вовсе, либо делают это по остаточному принципу. Простая математика:  5% конверсии с 1000 посетителей и 20% с 70 — это совсем разные вещи.

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

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

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

Едем дальше.

Проектирование интерфейса

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

  • Создание общей структуры продукта, карты переходов, навигации;

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

  • Поблочное проектирование ключевых страниц;

  • Микропроектирование ключевых разделов и функциональных; особенностей (меню, фильтра, зоны реализации ЦД).

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

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

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

гугль и новапошта.png

Мы также уважаем подобные штуки. И стараемся не переучивать посетителей Розетки, Алло и прочих известных магазинов на новый лад. “Добрый день, вы знаете, что вам делать)))”

Дизайн

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

Здесь сразу важно разобраться, какой у вас продукт: “пришел-увидел-победил” или “сидим тут долго-работаем”.

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

Если же вы создаете продукт, который подразумевает частое использование (например соцсеть, оптовый интернет-магазин или личный кабинет службы доставки), то расклады здесь совсем другие. Дизайн должен быть максимально чистым и минималистичным, цвета спокойными, интерфейс ненавязчивым. Логика здесь проста как двери:  вы же дома не клеите себе обои темно-красного цвета с яркими агрессивными картинками? В данном случае акцент на комфортность длительного пребывания. 

Важными моментами являются выбор правильных шрифтов и цветовой гаммы.

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

Контент

Контент — одна из главных болей UI/UX дизайнеров и это не спроста.

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

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

Как пример “убийства” продукта контентом — часто на этапе завершения проекта (с уже давно готовым дизайн интерфейсом) оказывается, что фото у заказчика совсем разного размера, пропорции и все на разном фоне. А у вас давно сложился крутой минималистичный дизайн с фотками на белом фоне без рамок. И “ничего не знаю, хочу чтоб мои говно-фотки выглядели круто на моем сайте, как у Тиффани, например”.

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

Волшебство невпихуемости конечно существует, но оно также не всесильно.

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

Есть еще момент, который не стоит забывать — помните я выше писал про лень?)) Так вот она никуда не делась. Зачастую люди не любят много читать. Картинки, 3Д модели, виртуальные туры и видосы сейчас решают гораздо больше. Это надо помнить.

Тексты нужны, но в меру и в правильном месте. Грубо говоря, есть те, кто “прийти-увидеть-победить” — им не надо давать много читать. Но и уважаем тех, кто “прийти-увидеть-засомневаться-почитать/посмотреть-убедиться-победить” — им можно дать качественный информативный контент.

Важное — в левый угол

Ну или в правый, если вы живете в мире “справа-налево”.

Есть такая штука, как F-образный шаблон. Это о том, что мы всегда начинаем смотреть сайты с левого верхнего угла (поэтому там обычно лого), читаем слева направо и двигаемся сверху вниз. Приблизительно так это выглядит на тепловой диаграмме:

353382d4-a7df-49eb-acc0-8b6acb85386f.png

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

Еще один важный момент, если говорить о паттернах пользователя — размещать все основные элементы и call-to-action (призывы и кнопки по тем самым пресловутым ЦД) на первом экране. Многие лентяи не любят скроллить и не переваривают длинные страницы — их мы “посадим” к нам уже на первом экране.

Общение с пользователем

Общение и первое впечатление складывается уже в первой минуты.

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

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

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

Есть еще много подобных, возможно менее глобальных моментов. Все писать сразу не буду, авось вы тоже ленитесь читать много)). Одно еще добавлю — там правда очень важно.

Простая форма заявки/регистрации/оформления заказа

Лень, опять она. Постарайтесь минимизировать количество обязательных полей для ввода пользователем для совершения ЦД. Именно тут вы теряете часть конверсии.

Нужную информацию вы получите от юзера потом — в личном кабинете или при общении менеджера сайта с пользователем. А пока дайте ему спокойно нажать на красную кнопку.

6b736b24-bc33-417c-9b3c-f63b64892240.png

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

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

С одной стороны мы можем основываться на технических параметрах и цифрах.

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

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

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

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

О наболевшем

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

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

7aba6444-60b1-422a-a6b2-d9c52a546580.jpg

Верхняя часть не оптимизирована и залазит под сервисную строку операционки.

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

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

f2f72703-8f76-4a15-8338-ba04e3f78646.jpg

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

cd795ad8-7814-4d09-a26f-d9b39838e706.jpg         39334feb-1c37-41ea-ab36-ad4997192d1a.jpg

В двух одинаковых по своей сути окнах (оплатить) кнопка назад находится в разных местах. “Нашяльнике, угадай где выклюцятеля?”

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

Что делать?

Можем ли мы сделать ваш продукт более юзабельным и успешным? Мой ответ очень простой и состоит из двух буков:
ДА.

P.S. Как вы уже наверное заметили: вверху на нашем сайте всегда висит красная кнопка — жмите ее. Ну или чуть ниже форма заявки на консультацию. Ну или виджет в уголке. “Вы знаете, что теперь нужно сделать, верно же?))”

Need help?

Ask a question.

Chat Now
Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут