Кейс Из России: Как Команда Acronis Создавала Пользовательский Тур По Новому Продукту

Старший дизайнер пользовательского интерфейса Акронис Дмитрий Борисенков написал заметку, в которой описал процесс создания пользовательского тура по одной из функций Acronis Cloud — архивированию файлов в облаке.

Дизайнер рассказал, как команда выбирала стиль оформления тура и локализовала результаты.

Кейс из России: Как команда Acronis создавала пользовательский тур по новому продукту

Но почему

Наш человек – профессионал в мире IT, лет сорока-пятидесяти, который помогает решать различные проблемы с техникой тем, кто называет его «ты компьютерщик!» Технически подкованный человек не теряется в современных технологиях и готов пробовать новое.

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

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

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

Продукт должен развиваться не только технически, но и становиться проще в использовании.

Вы можете прочитать о том, как мы упростили Acronis True Image для Windows. Здесь .

Отправная точка

Помочь человеку освоить продукт сложнее, чем кажется.

Если человек покупает коробочную версию, то ему доступны печатные руководства и поддержка по телефону.

В цифровом виде — письма по определенному графику и помощь непосредственно в самом продукте.

Расскажу лишь о том, как мы искали способ помочь пользователю ориентироваться внутри Acronis True Image для OS X. В прошлом году Acronis True Image представила новую полезную функцию для владельцев подписки Acronis Cloud — архивирование файлов в облако.

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

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

Через пару лет захотелось посмотреть видео со свадьбы — зашёл в Acronis Cloud, скачал и посмотрел.

Ваши впечатления и важные файлы в безопасности.

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

Но на самом деле не все так просто, как казалось.

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

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

Точно так же тур не затронул все сердца.

Здесь началась интенсивная работа по исправлению ошибок.

Копай, Шура, копай

Сущность

Мы ищем, какие проблемы испытывает пользователь и как помочь ему их решить.

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

Так что вам придется поверить мне на слово.

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

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

А кто-то захочет узнать больше и пойдет изучать дальнейшие шаги.

Пошаговые инструкции о том, как работает архивирование.

Вот уже подробная информация о трёх простых шагах.

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

Выбор дата-центра.

Если, например, вы живете в Германии и у вас медленный Интернет, то серверы, расположенные внутри страны, позволят вам быстро сохранять и загружать нужные вам данные.

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

Легкий доступ к файлам.

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

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

Декор

Поскольку политика компании — максимальная нативность приложений для OS X, мы начали поиск стиля в стандартных приложениях OS X. Вот как выглядит одна из страниц тура iTunes: А вот как выглядит стартовая страница Safari при первом запуске: Плюсы такого подхода в том, что пользователь обучается в условиях, максимально приближенных к реальности, с использованием скриншотов самого продукта.

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

Но в нашем случае недостатков больше.

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

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

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

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

Во-вторых, проблемы с учетом всех возможных размеров текстовых блоков при локализации.

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

Реальный интерфейсный подход

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

Задача упростилась тем, что внешний вид Safari и Finder меняется редко, а значит, сохранение таких скриншотов во время экскурсии обойдется не так дорого.

Для проверки пера мы выбрали самый сложный слайд — о доступе к файлам.

Вот почему мы говорим только о Safari и Finder. Суть слайда проста: диск с заархивированными файлами монтируется в OS X как обычный сетевой диск.

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

Схематический подход

Приложение для создания заметок Notes, обновлённое в OS X El Capitan, встречает пользователя довольно абстрактными иллюстрациями: В Notes используются как иконки, взятые из интерфейса, так и абстрактные изображения.

Мы решили сделать вариант, сочетающий в себе схемы и скриншоты реального интерфейса: Установка: Ни рыба, ни мясо.

Мы кладем его в ведро и пробуем другой подход.

Подход с реальными скриншотами интерфейса без схематичности

iTunes и Safari сделали это? Мы могли.

Это означает, что мы можем попытаться найти решение в рамках данного подхода.

Давайте быстро обрисуем суть слайда о доступе:

Давай попробуем: Введите в среду: И далее: На других слайдах: Нет, вы не можете обмануть себя.

Вышла последняя версия OS X La Polkovnique? Пожалуйста, перерисуйте скриншоты.

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

Поэтому ищем дальше.

Подход с качественными, но не очень абстрактными иллюстрациями.

Вкусный, сочный и привлекающий внимание подход, а потому довольно распространенный.

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

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

Получается некрасиво и неудобно.

Мы отказываемся.

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

Локализация

Acronis True Image используется в 145 странах и говорит на 15 языках.

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

Большой ограничивающий фактор, позволяющий считать каждое слово.

Что-то вроде ограничения в 140 символов в Твиттере.

Пример.

Емкая англоязычная команда «Резервное копирование» превращается в широкую, как пресловутая русская душа «Создать резервную копию».

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

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

Надежные, как автомат Калашникова, кнопки ссылок «Далее» и «Предыдущий» прекрасно решают наши проблемы.

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

Результаты работы

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

1. Общие планы Это стандартные «скриншоты», на которых продукт включен в окружение.

В случае архивирования это интерфейс приложения в среде рабочего стола OS X. 2. Технические макеты Те же общие планировки из первого пункта.

Только в них мы дополнительно указываем все параметры элементов, их расположение и зависимость друг от друга.

Бывает, что мы начинаем с печатного варианта макета, где разработчик указывает, какие данные ему нужны.

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

Здесь бразды правления в руках популярного плагина Эскиз измерения .

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

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

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

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

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

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

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

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