Прокачайте ваш онбординг
с навигатором интерфейсов Experrto
Выберите категорию

13 ошибок UX-дизайна, которые могут разрушить ваш Saas-бизнес

13 ошибок UX-дизайна, которые могут разрушить ваш Saas-бизнес

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

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

Будьте внимательны: быть может, и вы идете той же тропой.

Содержание статьи

Ошибка №1: новая функция открывается в новой вкладке
Ошибка №2: длинные выпадающие списки
Ошибка №3: огромные чек-листы
Ошибка №4: отсутствие «X» на модальном окне
Ошибка №5: всплывающие подсказки, которые перекрывают интерфейс
Ошибка №6: проблемы с перегруженностью интерфейса
Ошибка №7: сложные требования к паролям
Ошибка №8: линейные туры по продукту
Ошибка №9: проблемы с демо
Ошибка №10: обилие жаргонизмов
Ошибка №11: чрезмерное использование системных модальных окон
Ошибка №12: автоматически запускающиеся видеоролики
Ошибка №13: пустые состояния
Заключение

Ошибка №1: новая функция открывается в новой вкладке

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

Ошибка №1: новая функция открывается в новой вкладке

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

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

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

Как правильно делать анонсы новых функций SaaS-продукта

Ошибка №2: длинные выпадающие списки

Приходилось ли вам встречаться с чем-то подобным?

Ошибка №2: длинные выпадающие списки

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

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

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

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

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

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

Лучшие практики в дизайне многоуровневых меню

Ошибка №3: огромные чек-листы

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

Но порой встречаются вот такие экземпляры:

Ошибка №3: огромные чек-листы

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

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

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

Лаконичный и простой контрольный список сервиса Backlinkmanager предлагает пользователям для начала посмотреть в деле только одну функцию продукта:

Что теперь? Добавьте партнера, и повысьте эффективность своей работы

Что теперь? Добавьте партнера, и повысьте эффективность своей работы

Как создать чек-лист для онбординга: 6 приемов

Ошибка №4: отсутствие «X» на модальном окне

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

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

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

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

Представьте, что вы делаете что-то важное, например финансовый аудит, и тут появляется модальное окно:

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

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

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

А теперь попробуйте найти кнопку «X», чтобы закрыть окно и вернуться, наконец, к своим делам. Не получается? Так ее там и нет — вы можете только принять «предложение».

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

Держитесь подальше от этих темных UX-паттернов: они весьма далеки от здравого смысла.

Модальные окна: примеры, рекомендации по дизайну и open-source плагины

Ошибка №5: всплывающие подсказки, которые перекрывают интерфейс

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

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

Ошибка №5: всплывающие подсказки, которые перекрывают интерфейс

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

подсказка закрывает собой тот элемент, о работе с которым она делится с вами ценной информацией

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

«Правильная» всплывающая подсказка о новой функции от Canva

«Правильная» всплывающая подсказка о новой функции от Canva

Почему всплывающие подсказки могут стать катастрофой и как этого избежать?

Ошибка №6: проблемы с перегруженностью интерфейса

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

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

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

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

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

Это противоречит всем представления о хорошем UX.

Как правило, лучше добавить в продукт меньше функций и существенно облегчить их поиск, чем превратить его в новогоднюю елку.

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

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

10 ошибок в дизайне дашборда [и как их избежать]

Ошибка №7: сложные требования к паролям

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

Хотите поменять пароль? На этом сайте это не такая тривиальная задача

Хотите поменять пароль? На этом сайте это не такая тривиальная задача

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

Пример простых требований к паролю от Coursera

Пример простых требований к паролю от Coursera

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

Подробное руководство по процедуре регистрации в SaaS

Ошибка №8: линейные туры по продукту

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

Нескольких приверженцев Saas-сервисов как-то спросили, что они думают о линейных турах, и вот какой ответ был получен:

Мнение нескольких Saas-пользователей о турах по продукту

Мнение нескольких Saas-пользователей о турах по продукту: 

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

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

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

Тур по продукту аналогичен тому самому престарелому лектору из университета, который без устали все полтора часа монотонным голосом надиктовывает материал 30-летним студентам.

Это пример ужасного пользовательского опыта. И повторять его не стоит категорически.

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

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

Как не утомить пользователя чрезмерным онбордингом?

Ошибка №9: проблемы с демо

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

Ошибка №9: проблемы с демо

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

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

5 шагов на пути создания обучающего контента

Ошибка №10: обилие жаргонизмов

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

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

И если пользователь встретит подобное сообщение, он будет сильно удивлен:

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

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

Не проще ли было сказать: «Синхронизировать со сторонним ПО»?

Как оптимизировать онбординг с помощью UX-текстов

Ошибка №11: чрезмерное использование системных модальных окон

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

Во всем этом нет ничего плохого, но только когда пользователь сам инициирует появление такого окна. Другими словами, человека вряд ли сильно удивит появление модального окна, когда он только что кликнул по кнопке «Начать обзор продукта».

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

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

сервис Surfer

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

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

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

Не бесите пользователей: 10 типовых ошибок юзабилити в интерфейсе

Ошибка №12: автоматически запускающиеся видеоролики

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

Ошибка №12: автоматически запускающиеся видеоролики

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

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

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

Такие видео категорически противопоказаны.

Как использовать обучающие in-app видео во благо себе и пользователям?

Ошибка №13: пустые состояния

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

Чего вы точно не захотите увидеть, так это нечто подобное:

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

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

В UX-дизайне это называется «пустым состоянием».

Пустые состояния действуют угнетающе, поскольку для их заполнения требуется больше энергии и внимания, чем если бы уже существовал контент от других людей. Это сродни экзамену по изобразительному искусству в школе, когда вас просят нарисовать что-либо на чистом листе бумаги. Начинать с нуля тяжело психологически.
Вот почему Шив Патель (Shiv Patel), соучредитель Autopilot, в своем недавнем выступлении на Product Drive, обратил внимание, что пустые состояния всегда следует заменять демо-контентом.

Как вовлекать пользователей при помощи «пустых состояний»?

Заключение

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

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

1. Не запускайте новую функцию в новой вкладке — это собъет весь ваш процесс онбординга по ней.
2. Откажитесь от длинных выпадающих списков, заменив их ручным вводом с автозаполнением.
3. Ваш чек-лист при знакомстве с продуктом должен содержать не более 3-4 шагов.
4. Тщательно выбирайте время для показа модального окна и обязательно добавьте в него кнопку «X».
5. Следите за тем, чтобы ваши всплывающие подсказки не перекрывали интерфейс.
6. Избавьте ваш интерфейс от ненужных или редких функций, а также позаботьтесь о создании Справки.
7. Не усердствуйте с требованиями к паролям.
8. Откажитесь от линейных туров, заменив их интерактивными пошаговыми руководствами или всплывающими подсказками. Помочь в этом вам сможет наша зеро-код платформа Experrto.
9. Убирайте демо-контент сразу, как пользователь введет свои данные.
10. Выбирайте простые слова.
11. Используйте модальные окна, только если они действительно необходимы.
12. Никогда не запускайте обучающие видео автоматически.
13. Сделайте экран «пустого состояния» своим другом.

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

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

Прокачайте свой онбординг!

По материалам: userpilot.com Изображение: freepik.com

Прокачайте ваш онбординг
с навигатором интерфейсов Experrto