Архівування як твір мистецтва

Як ми шукали спосіб цікаво і зрозуміло розповісти, чому нова можливість архівування файлів у хмару зручна і практична.



Але навіщо?
Наш людина — професіонал світу айті років сорока-п'ятдесяти від роду, допомагає вирішити різні проблеми з технікою тим, хто його називає «ти ж комп'ютерник!».

Технічно підкована людина не губиться в сучасних технологіях і готовий пробувати нове. Але це взагалі не дає гарантії, що такі люди зрозуміють в повній мірі, наскільки хороший ваш продукт. Людина купує не продукт, а «більш кращу версію себе», яку він сподівається отримати в результаті. Вам потрібно допомагати їм пізнати ваш продукт повною мірою, навіть якщо він здається вам, творцям — простим і інтуїтивно зрозумілим.

Якщо у вас вже є успішний продукт, який продається і має відданих прихильників, то це зовсім не означає, що так буде завжди. Продукт повинен розвиватися не тільки технічно, але і ставати простіше у використанні. Про те, як ми робили простіше True Image для Windows можна почитати тут.

Точка відліку
Допомогти людині опанувати продукт складніше, ніж здається. В цифровому вигляді — електронні листи за визначеним розкладом і допомогу безпосередньо в самому продукті. Якщо людина купує коробочну версію, то до його послуг друковані керівництва і підтримка по телефону.

Я розповім лише про те, як ми шукали спосіб допомогти користувачеві зорієнтуватися всередині Acronis True Image для OS X.

У минулому році в Acronis True Image з'явилася нова корисна можливість для власників підписки на Acronis Cloud — архівування файлів в хмару. Працює зі сторони користувача просто: перетягнув мишкою на вікно програми файли, або натиснув кнопку і вибрав у звичному вікні Finder все те, що займає місце на диску, а використовується досить рідко. Ось так виглядає вкладка архівування зараз:

Якщо ж у користувача немає підписки на Acronis Cloud, то він бачить дуже схожу заглушку:

Начебто елементарно: накидав файлів і відправив всю пачку в безлімітне хмара. Через пару років захотів переглянути відео з весілля — зайшов в Acronis Cloud, скачав і подивився. Враження та важливі файли в безпеці. І доступні практично в будь-який момент, а вільного місця на диску повно.

Але насправді не все так просто, як здавалося. Спочатку ми обкатали короткий тур по архівуванню на версії для Windows, тому урожай з посіяних нами помилок вже зібрали.



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

Копайте, Шура, копайте!
Суть

Шукаємо, які проблеми відчуває користувач і як йому допомогти з їх вирішенням. Самий перший начерк рішення помістився на пошарпаний реальністю листок:



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

1. Привітання користувача та короткий опис, що ж таке архівування. Кому-то вже тут буде достатньо інформації, він може прийняти рішення користуватися додатком далі, закривши тур. А хто захоче знати більше, і піде вивчати наступні кроки.

2. Покрокова інструкція про роботу архівування. Тут вже розгорнута інформація про трьох простих кроків. Обирай файли зручним способом; дозволь додатком перемістити твої файли у хмару, звільнивши місце на жорсткому диску; використовуй звільнене місце на диску для нових вражень.

3. Вибір дата-центру. Якщо ви, припустимо, живете в Німеччині, і у вас повільний інтернет, то розташовані всередині країни сервера дозволять швидше зберігати і вивантажувати назад потрібні вам дані. Якщо за законом ваші дані повинні розташовуватися всередині країни проживання, вибирайте сервер, що знаходиться на території країни.

4. Простий доступ до файлів. Хочеш — використовуй диск, змонтований в системі, хочеш — відкрий браузер з будь-якого пристрою. Завантажити потрібний файл можна незалежно від того, на якому пристрої ви використовуєте браузер, головне, щоб він був сучасним.

Оформлення

Оскільки політика компанії — максимальна нативность в додатку для Mac, то й пошуки стилістики ми почали в стандартних для OS X додатках. Ось так виглядає одна з сторінок туру з iTunes:

А так виглядає стартова сторінка Safari при першому запуску:

Плюси такого підходу в тому, що користувач навчається в умовах, максимально близьких до реальності, на скріншотах самого продукту. І розуміти сам продукт йому після такого туру буде набагато простіше. Але мінусів у нашому випадку більше.

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

По-друге, проблеми обліку всіх можливих розмірів текстових блоків при локалізації. Це настільки велика тема, що про неї мова піде трохи пізніше.

Підхід з використанням реального інтерфейсу

Хоч ми і знали про проблеми, з якими доведеться зіткнутися, але все ж вирішили нагло спробувати їх обійти, скоротивши кількість елементів в скріншотах, які доведеться локалізувати. Завдання спрощувало те, що зовнішній вигляд Safari і Finder змінюється рідко, а значить підтримувати такі скріншоти в турі начебто буде не так дорого. Для проби пера обрали найскладніший слайд — про доступ до файлів. Саме тому мова іде лише про Safari і Finder.

Суть слайда проста: диск з архівованими файлами монтується в OS X як звичайний мережевий диск. А через браузер ви можете дістати ваші файли практично в будь-якій точці планети.

Схематичний підхід

Оновлений OS X El Capitan додаток для зберігання заміток Notes вітає користувача досить абстрактними ілюстраціями:

Notes використовують як іконки взяті з інтерфейсу, так і абстрактні зображення.

Ми ж вирішили зробити варіант, що поєднує в собі схематичність і скріншоти реального інтерфейсу:



Примірка:



Ні риба ні м'ясо. Кладемо у відро і пробуємо інший підхід.

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

iTunes з Safari ж змогли? Змогли. Значить і нам можна спробувати пошукати рішення в рамках цього підходу.

Швидко накидаємо суть слайда про доступ:


Пробуємо:


Вписуємо в середу:



І ще:



На інших слайдах:





Ні, не виходить обдурити самих себе. Вийшла новітня OS X La Polkovnique? Будь ласка, перерисуй-ка свої скріншоти! Оновив іконки в бічній панелі програми? Ну ти знаєш, що робити. Тому шукаємо далі.

Підхід з якісними, але не сильно абстрактними ілюстраціями

Смачний, соковитий і притягує увагу підхід, і тому досить поширений. Починаємо шукати потрібний рівень абстракції, відразу виписуючи в майбутній інтерфейс і заграючи з текстом:







Деталізуємо:



Вже близько, мчимо далі:



Ось воно!



Беремо в роботу і приміряємо стилістику до інших слайдів:







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



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



Виходить негарно і незручно. Відмовляємося.

З ілюстраціями визначилися, тепер починаємо відточувати не менш важливий елемент — текст. А ось тут вже на сцену якраз виходить необхідність думати про локалізації продукту.

Локалізація

Acronis True Image використовують у 145 країнах світу, він «говорить» на 15 мовах. Забув про це? Готуйся до того, що технічні письменники будуть різати по живому, кроша вже полюбився тобі інтерфейс. Відмінний обмежуючий фактор, щоб цінувати кожне слово. Приблизно, як обмеження в 140 символів в Twitter.

Приклад. Ємна англомовна команда «Back up» перетворюється в широку, як горезвісна російська душа, «Створити резервну копію».Таке ще часто трапляється в португальському або німецькою мовами.

Тому, в черговий раз пройшовши ритуальний коло «make — check — think», прийшли до простого вирішення. Надійні, як автомат Калашникова, кнопки-посилання «Next» і «Previous» відмінно вирішують наші проблеми. Наводимо в свідомість всі посилання на кожному кроці туру, починаючи зі слайда про доступ до файлів.



Підсумки роботи
Результати дизайну передаємо комплектом артефактів:

1. Загальні макети

Це стандартні «скріншоти», де продукт вписаний в середу. У випадку з архівуванням це інтерфейс програми в оточенні робочого столу OS X.



2. Технічні макети

Ті ж загальні макети з першого пункту. Тільки в них ми додатково вказуємо всі параметри елементів, їх розташування та залежність одне від одного. Буває, що починаємо з роздрукованої версії макета, де розробник вказує, які дані йому потрібні.



Наступний етап — генерування в Sketch макета, де є опис усіх елементів і того, як вони будуть дружити. Тут віжки в руки популярному плагіну Sketch Measure. Завдяки йому майже не треба малювати руками» при створенні технічних макетів і залишається тільки придумати, куди подіти стільки зекономленого часу.

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

Дружити і постійно спілкуватися з розробниками вкрай важливо. Ви не тільки зможете оперативно полірувати результат втілення макетів в життя, але і вчитися розуміти, які технічні обмеження стоять перед розробниками (і вами). А якщо знаєш правила, можна вже думати, якими хитрими способами їх можна обійти без втрати якості і працездатності.

3. Шлях користувача

Збираємо всі накопичені макети візуальні діаграми user flow, аналізуючи, основний шлях користувача. Намагаємося виявити всі «повороти», які можуть відволікати увагу від основного потоку: раптово звалився інтернет, відсутність підписки та інші подібні перешкоди.

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

Трохи про мораль
Починайте з нуля. Накресліть олівцем, складайте майндмэпы і вайрфреймы.

Не бійтеся експериментувати і шукати нові шляхи вирішення. Не набивши гулі на помилках, досвіду не отримаєш.

Ніколи не думайте, що ви знаєте свого користувача, як самого себе. Тестуйте гіпотези, пробуйте підходи, шукайте те, що спрацює саме у вашому випадку.

Забезпечуйте всі дизайнерські розробки технічними макетами і описом негативних сценаріїв. Соковито приправляйте продуманим user flow з реальними макетами в якості кроків. Вас будуть подумки обіймати всі, якщо ви привчіть себе робити весь ритуал постійно ще до того, коли отримаєте схожий коментар:


Спасибі!



Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.