Статті
UX Photolemur. Уроки і Red Dot
Шлях розвитку інструменту від старту до міжнародної дизайнерської премії
27 серпня, 2018
avatar
Назар Беген
Chief Marketing Officer в Photolemur
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

Нещодавно одразу вісім українських агенцій отримали міжнародну дизайнерську премію Red Dot Award. Інструмент для редагування фотографій Photolemur став переможцем у категорії Communication Design за дизайн інтерфейсу. Chief Marketing Officer проекту Назар Беген написав про шлях розвитку Photolemur та про те, які уроки UX він виніс з роботи над продуктом.

Для мене сутність дизайну інтерфейсу полягає в тому, щоб допомогти користувачу отримати результат від роботи з програмою чи девайсом найпростішим способом. Це перший базовий рівень: вирішення задачі користувача так, щоб у нього навіть не виникали питання «що я маю зробити?», «куди натиснути?».

Другий рівень  –  індивідуальність дизайну. Фішки, по яким користувач відрізняє між собою бренди. Хороший дизайн починається з вирішення задач базового рівня і потім перехід на другий рівень. На жаль, у світі продуктів і інтерфейсів значно більше прикладів дизайну, де в основу всього ставилась ідея бути іншими, і при цьому не вирішувались базові задачі.

Джерело зображення: www.boredpanda.com

Тиждень тому я став батьком. Товариш подарував мені автокрісло для немовля. Коли прийшов день забирати дитину з пологового будинку, я вирішив встановити крісло. Інструкції не було. У мене забрало 40 хвилин, щоб перепробувати різні варіанти. На виписку прийшли друзі, серед них три батька. Жоден з них не зміг розібратись з кріслом. У них був досвід з кріпленням iso-fix. Дане крісло кріпилося ременями безпеки. Ми не впорались. Крісло класне, хорошої фірми. Два дні я страшенно злився на нього і навіть подумав, що не вистачає якихось деталей і сходив в дитячий магазин, щоб щось докупити. Пізніше я витратив ще півтори години часу і в результаті придумав, як його кріпити. Виявилось, що суперпросто, але не очевидно. Це яскравий приклад хорошого товару з непродуманим онбордінгом.

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

Для мене перший урок про UX відбувся в 98 році, коли я ходив у фізико-технічний ліцей. Урок математики ми проходили в приміщенні університету на 5-му поверсі. З вікон було видно доріжки  –  акуратні, вимощені плиткою і красиві газони  –  прямокутні, квадратні, засаджені травою. Тільки от проблема  –  всі прямокутні газони мали витоптану стежку по діагоналі. Коли ми вивчали різні геометричні формули, викладачка показувала за вікно і казала  – ось це гіпотенуза. А потім додавала  –  люди завжди шукають найшвидший шлях. Доріжка по гіпотенузі була найкоротшим шляхом.

Пізніше, коли я довідався про UX  –  поняття, яке ввели Apple, щоб описати весь досвід взаємодії людини з товаром, починаючи від моменту придбання товару і до моменту початку роботи з ним,  –  я одразу згадав цю історію з доріжками і найкоротшим шляхом.

UX, user experience  – досвід користувача абсолютно відносне поняття, яке залежить від того, який досвід вже має ваш користувач. Хороший UX передбачає, що ви знаєте дещо про людей і пропонуєте їм найбільш очевидний спосіб роботи з вашим продуктом.

«Ми придумали новий User Experience»  –  найбезглуздіша фраза, яка може бути в сфері дизайну. Досвід не можна придумати. Його можна отримати, пережити. Розуміння цього приводить нас до проблеми, з якою стикаються всі інноваційні товари на ринку. Якщо ми створюємо щось нове  –  нам доведеться створити спосіб роботи з ним. І тут починає працювати ще один принцип.

Мінімізація стресу

Для всіх живих істот будь-що нове є стресом. Нова робота  –  стрес. Нові люди  –  стрес. Нове дитяче крісло  –  стрес. Апдейт інтерфейсу macOS/Windows  –  великий стрес. Де тепер мої фотки? Навіть сюрприз на роботі з приводу дня народження  –  це стрес. Ми всі вміємо в тій чи іншій мірі справлятися зі стресом і часто можемо навіть не помітити, що у нас був стрес.

Але коли ми працюємо над інтерфейсами продуктів  –  критично важливо пам’ятати про це. І давати відповідь на питання  –  як позбавити користувача від стресу? Як зробити так, щоб той чи інший етап роботи з вашим продуктом, фізичним чи цифровим, приніс мінімум дискомфорту. У цьому місці вже треба переходити до реального кейсу.

Photolemur. Inception

У кінці 2016 року я приєднався до команди крутих спеціалістів з компанії Skylum (раніше Macphun). У них вже був колосальний досвід роботи з ринком про- і напів-профотографів, дуже круті технології для обробки фото і смілива ідея  –  зробити програму, яка автоматично оброблятиме зображення і робитеме їх класними. Та сама міфічна кнопка «зробити офігенно».

На самому початку своєї кар’єри, років 15 тому, я мав досвід роботи в фотостудіях, де займався ручною обробкою фотографій у фотошопі. Десятки фотографій в годину. Сотні, а іноді тисячі  –  в день. В ті часи я мріяв про таку програму.

Тому приєднався до Photolemur як керівник проекту www.photolemur.com

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

Ремарка: багато компаній мають відділи UX/UI, продуктологів, дев-відділи. І все це живе в паралельних реальностях, і що найгірше  –  відділ маркетингу/продаж взагалі не має відношення до розробки. Ось моя особиста віра, коли мова йде про комерційний продукт: у компанії має бути одна зрозуміла ціль, яку всі служби допомагають досягнути, кожен своїми власними інструментами; продукти створюються, щоб бути проданими, а купує їх не «цільова аудиторія», а конкретні люди; люди купують продукти, які їм допомагають; щоб створити продукт, який допомагає краще, ніж інші, потрібно слухати людей, отримувати фідбек і потім правильно його перетравлювати; цю функцію може виконувати навіть відділ розробки; якщо ж з людьми спілкується хтось інший (маркетинг?)  –  ці люди мають брати безпосередню участь у створенні продукту.

У нашому випадку було прийняте рішення запустити продукт у тому інтерфейсі, в якому він існував виключно для внутрішнього тестування технології. Щоб найшвидше отримати прямий фідбек і зрозуміти, що робити далі. Сейлз/маркетинг спочатку, далі  –  новий UX і т. д.

Завдяки першій швидкій кампанії ми отримали кілька тисяч реальних користувачів (які заплатили гроші!) і зібрали фідбек.

Робота в глибину

Проблема номер 1

Стандартний інтерфейс

Інтерфейс мав стандартні контроли, як у фоторедактора. Візуально користувачі хотіли знайти якісь настройки і коли не знаходили їх –  засмучувались, бо думали, що їм не додали чогось/програма недороблена.

Проблема 2

Швидкість обробки

Перший алгоритм був у кілька разів повільніший, ніж зараз. Але навіть при цьому результат обробки досягався в кілька разів швидше, ніж при ручній обробці, наприклад, в лайтрумі. Ми проводили тести. Проблема була в тому, що в лайтрумі під час ручної обробки користувач не засікав час і ці хвилини проходили в активній роботі, тому минали непомітно. У нас 20-40 секунд треба було просто чекати. Це дратувало користувачів.

Проблема 3

Крута технологія, яку не видно

Під час обробки всередині програми відбуваються суперкруті речі: визначення об’єктів, розпізнавання облич, застосування дванадцяти різних алгоритмів для різних зон фото в залежності від того, яка проблема/недолік фото виявлена. Для користувача це був просто прогрес-бар очікування. І як писав вже вище  –  час такого очікування здавався користувачам задовгим.

Photolemur 2.0

Рішення зробити версію 2.0.

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

Дизайнер Діма Новіков (артдиректор компаніі MacPaw) запропонував концепцію «без інтерфейсного» дизайну. Так, як ідея нашої технології була в тому, щоб користувач перестав редагувати фото, а почав просто отримувати хороший результат, то фактичним інтерфейсом програми стала фотографія, яку користувач закидує в програму. Відповідно розмір і вікно-рамка програми  –  це сама фотографія.

А перше вікно програми, яке бачить людина після запуску програми,  –  дуже просте віконце з логотипом і єдиною кнопкою “Import”. Помилитися в тому, що потрібно робити  –  неможливо!

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

Наступний момент  – процес обробки фото, складний всередині і непомітний користувачу. Як показати людині, що відбувається з фотографією? У Діми була ідея імітувати поверхню, в яку занурюється фотографія для обробки. Як ванночка в аналоговому хімічному фотопроцесі. Фотографія потрапляє туди і починаються магічні процеси. У результаті ми зупинилися на ідеї плексусу  –  імітації роботи нейронів у мозку. Крім того, що вони дають дуже чітке розуміння того, що зараз відбувається якийсь складний технологічний процес, з ними можна ще й гратися! Порухайте курсором на екрані  –  і скупчення нейронів переміститься слідом за ним. І суперважливим моментом було не залишити користувача губитися в здогадках, що ж конкретно зараз відбувається. Тому ми поверх нейронів-плексусу виводимо перелік процесів, які в даний момент відбуваються всередині програми: розпізнавання облич, знаходження неба, покращення балансу білого etc.

Простота

Ми прибрали всі додаткові функції, які були в першій версії: кроп, налаштування сили обробки, налаштування експорту. Залишилась просто автоматична обробка і більше нічого. Максимальний фокус на тому, що ми робимо унікально.

Ми запустили нову версію програми в такому вигляді і отримали купу крутих відгуків. Але це був тільки початок. Разом з крутими ми отримали і негатив. Один з моментів, який ми вирішили зробити по-іншому в 2.0, була прайсінг модель. Якщо перша тестова версія продавалась по ліцензії, то 2.0 ми запустили як SaaS  –  по підписці, з обмеженням на кількість фотографій. Формально це частина бізнес-стратегії і про неї треба розказувати в іншому матеріалі. Але якщо ми подивимось на це з точки зору користувача  –  то для нього це User Experience. Досвід роботи з нашим продуктом. Такий самий важливий, як і графічний інтерфейс продукту. Для нас це була помилка.

Якщо коротко  –  то в перший місяць ми отримали тисячі продаж, у другий  – сотні, а в третій  – близько ста нових підписок і треба було щось робити. Ми провели опитування серед існуючих користувачів і серед пятидесяти тисяч тріальних користувачів. Ось що виявилось:

  • люди, які хотіли користуватись продуктом, не бажали платити за десктоп програму по підписці. Те, що вдалось у Adobe , – нам виявилось не під силу. При цьому люди були готові платити ціну вищу, ніж ми ставили на версію 1.0.
  • люди хотіли контроль. Ми дали користувачам крутий результат обробки за допомогою штучного інтелекту, але вони бажали мати інструменти, щоб самим впливати на фінальний результат. Це дуже важливе відкриття, яке може допомогти вам, якщо ви працюєте над автоматичними інтелектуальними продуктами і системами. Коли ви вирішуєте складну задачу по автоматизації якогось звичного процесу  –  залишайте людині право прийняти фінальне рішення. Інакше  –  ви знаєте що: СТРЕС!

Photolemur 2.2

Так ми випустили версію 2.2 Spectre (2.1 був міні-апдейт з багфіксами і додатковими мовами).

Смішна історія: десь приблизно через тиждень після запуску хтось в офісі сказав, що Photolemur featured by Apple Mac App Store. Apple раз у місяць приблизно самостійно обирає програми, які розміщує в розділі Loved by Apple  –  блок в апсторі, який бачать абсолютно всі користувачі при заході на стор. Історія смішна, тому що на той момент на апсторі у нас була тільки перша версія продукту  –  фактично бета. І от ми опиняємось на головній сторінці і продажі починають різко рости. А ми для себе вирішили, що в подальшому не будемо більше підтримувати версію 1.0. Та якщо прибрати програму зі стору  –  то ми втратимо таку круту можливість, яку нам подарував Apple. Менше, ніж за тиждень ми випускаємо версію 2.2 на апстор. Версія 1.0 все ще продається. Всім користувачам версії 1.0, які звертаються в сапорт, ми даємо безкоштовно версію 2.2. Пізніше, через три місяці, Apple знову зафічерить нас якраз у високий сезон  –  Black Friday & Christmas і майже 8 тижнів наша програма буде висіти в числі перших трьох програм, які бачить користувач, коли заходить на Mac AppStore.

Повертаємось до релізу 2.2 і UX. Одним з найправильніших рішень при запуску 2.2 Spectre була відмова від системи підписки і продажа продукту за одноразову оплату. Простіше кажучи, продажа ліцензії. Кількість продажу зразу виросла до тисяч. Більше того, люди в коментарях на наших соціальних сторінках писали, як круто, коли компанія слухає своїх користувачів! Для мене це був дуже крутий результат. І хоча ця частина нашого досвіду не має відношення до теми інтерфейсів, але вона має пряме відношення до UX  –  люди отримали досвід з нашою компанією. Тепер вони знали  –  ми слухаємо їх, думаємо про них і думаємо, як зробити їх досвід з нашим продуктом кращим.

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

Що ще і чому ми змінили в інтерфейсі:

  • Наш СТО і людина, яка придумала ідею Photolemur, Діма Ситнік  –  дуже заточений на грамотний та інтуїтивний дизайн, побудований на гайдлайнах Apple. Ми кілька разів переробляли системні і контекстні меню, щоб вони були максимально по гайдах. Це стосується і розміщення пунктів в їх назвах. Далі Windows версію ми робили на основі Мас версії і в результаті програма вийшла значно стильнішою і інтуїтивнішою, ніж це буває зазвичай у Windows продуктів.
  • У версії 2.0 у нас був онбордінг: чотири послідовних екрани, які навчали користувача працювати з продуктом.
  • Коли ми працювали над версією 2.2, Діма Новіков сказав круту фразу:
    «Люди як діти, вони не хочуть інструкції. Подивіться на дітей  –  коли вони отримують нову іграшку, вони зразу починають з нею гратися».

Ми вирішили прибрати онбордінг з програми взагалі. Але залишилось відкритим питання, як зробити так, щоб людина зразу після запуску могла погратися з програмою. Не у всіх під рукою є фотографія, яку хочеться обробити/покращити. Ми додали в перший стартовий екран програми кнопку Open Sample Image (загрузка тестового фото). У пакет програми ми помістили зразу декілька тестових фоток, які рандомно відкривались. Так людина отримувала можливість зразу після інсталу програми погратись з нею.

Під час опитування ми виявили, що 85% наших користувачів знімає загалом природу. Тому тестові фото в основному з природою і дуже яскравими прикладами обробки неба  – це одна з наших фішок, технологія визначення і автоматичного покращення неба. Працює просто фантастично і ми не упустили можливості це показати.

Ми активно збирали аналітику в версіі 2.0. У тому числі аналізували помилки програми. Photolemur дозволяє обробляти фото розміром від 600х800. Технічно можна і менше, але супермаленькі фотки містять надто мало інформації, щоб якось суттєво їх покращити. А часто можна і погіршити. Тому було зроблене таке обмеження. При завантаженні малих зображень програма дає алерт про неможливість обробки такого малого фото. Після аналізу даних ми виявили, що 95 відсотків всіх помилок це саме загрузка маленьких зображень. У версії 2.2 під кнопкою завантаження ми додали коротку інформацію про мінімальний розмір зображення.

Ще один важливий апдейт, який нам підказала аналітика  –  технології роботи з JPEG зображеннями. Перші алгоритми працювали ідеально з RAW фотографіями, для JPEG (або bmp) використовувалися ті самі алгоритми, і там вони працювали теж добре, але трохи гірше. Аналітика показала нам, що з близько 1,000,000 завантажених у версію 2.0 фотографій 880,000 були JPEG. Для нас це було неочікувано, бо ми думали, що в основному продуктом будуть користуватись власники DSLR і Mirrorless камер (дзеркальні камери і бездзеркалки  –  типу нових Sony, Fuji). Отримавши такі дані, технічна команда розробила нові алгоритми, які тепер працюють окремо і по-різному для різних форматів. Так, наприклад, для JPEG додатково застосовуються алгоритми прибирання артефактів (лишніх пікселів, точок) і ще багато інших.

Після всіх цих змін конверсія користувачів безкоштовної версії в платну виросла з 3,5% до 7%, тобто на 100%.

Другий рівень  –  індивідуальність

Тут буду коротко.

Дизайнер придумав пару фішок, які виділяють нас:

  • нетипово закруглений правий нижній кут програми. Всі інші програми мають або прямі кути, або однакове закруглення всіх кутів.
  • чорно-білі елементи навігації. Колір тільки на фото. Особливо це помітно на слайдері до-після. Він як знак інь і ян. А також логотип програми в першому вікні  –  спеціально придуманий монохромний варіант.
  • плексус, який імітує нейронні зв’язки. На всіх виставках від SF до Гонконгу ми зустрічаємо наших користувачів, які обожнюють спостерігати за нашим процесом обробки!

Які уроки UX я виніс з цього року роботи над продуктом

  1. Ми мало що знаємо про досвід наших користувачів, поки не дамо їм спробувати продукт. Треба створювати пісочниці, пускати туди погратися і далі уважно слідкувати за результатом.
  2. Хороший UX і дизайн вимагає не тільки експериментів, але й великого досвіду. Старайтесь працювати з крутими спеціалістами. Це прозвучить нераціонально, але намагайтесь наймати дуже висококваліфікованих людей на таку роботу як UX, навіть якщо вам це не по кишені.
  3. Люди  –  як діти. Хочуть отримати результат одразу, ніколи не читають ваших інструкцій і завжди хочуть більше. Подумайте, як вирішити цю проблему у вашому продукті. Особливо добре подумайте про онбордінг.
  4. Люди хочуть мати контроль. Навіть автоматичні суперінтелектуальні системи повинні мати певний рівень контролю. Люди бояться Skynet. Дайте їм хоча б ілюзію контролю над Skynet.

Примітка: слайдер контролю по факту використовує не більше 12% користувачів. Всі інші просто щасливі, що він є.

UX сам по собі не вирішує всі питання продукту. Важливо те, що всередині. І навпаки: просто крута технологія без продуманого UX і дизайну інтерфейсу може не знайти свого користувача. Хороший продукт  –  це злагоджена робота команд, кожна з яких направлена на вирішення спільної задачі. Це критично важливий момент: іноді дизайнери можуть пропонувати фантастично прекрасні рішення, які неможливо реалізувати технічно.

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

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

У Photolemur у нас все склалося. У нас була крута ідея, і технічна команда знала, як її реалізувати. Ми працювали з крутим дизайнером, який, крім досвіду, вмів також слухати замовників зі сторони маркетингу і технічну команду. І ми працювали над продуктом ітераційно, в кожній наступній версії вирішуючи конкретну проблему користувача.

Тільки не думайте, що все було одразу просто. Ми не раз сварилися і перевидумували велосипед. Але результат достойний усіх витрачених нервів.

І останнє  –  Red Dot був для мене особисто дуже важливою нагородою, яку давно хотів отримати. Це не моя особиста нагорода. Red Dot Interface Design Award дають за дизайн інтерфейсу. Це нагорода в першу чергу дизайнеру і команді розробки, які разом змогли реалізувати крутий продукт. А я, як людина, яка менеджерила процес і спілкувалась з користувачами від самої першої версії і до award-winning, просто з гордістю потримаюсь за нагороду 🙂

P.S. Через пару тижнів випускаємо Photolemur 3. Там буде ще більше оновлень інтерфейсу і крутих фішок. Stay Tuned.

Раніше Telegraf.Design розповідав про найкращі додатки за версією Apple Design Awards 2017.

avatar
Назар Беген
Chief Marketing Officer в Photolemur
Колонка

У нас є ще дещо для вас

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: