«Не рухайте. Нічого. На. Сторінці», — здається, саме це хочеться кричати користувачам під час юзабіліті-тестів геть оновленого інтерфейсу. Люди не люблять, коли змінюється розташування контролів, до яких вони вже звикли. Для змін у дизайні продукту, що вже активно використовується і містить велику кількість контенту, потрібні вагомі причини.
Саме про таку історію йдеться у сьогоднішній статті: це історія про редизайн популярного ресурсу для дизайнерів — бібліотеки іконок Icons8. Бета версія оновленого додатку вже у відкритому доступі, а далі розповімо детальніше про процеси, причини, ітерації та юзабіліті-тестування.
Коротко про продукт: Icons8 — це велика бібліотека іконок, що постійно поповнюється. На сьогодні колекція вже перетнула кількість у 85 000 зображень, що представлені у різноманітних стилях. Усі іконки доступні у PNG форматі безкоштовно, а також представлені у багатьох інших форматах та розмірах для тих, хто має ліцензію. Користувачі можуть навіть замовити іконку, яка їм потрібна. Бібліотека доступна як онлайн, так і офлайн у десктопному додатку.
Ось як виглядає поточний інтерфейс, що знаходиться в активному використанні вже досить багато років.
А це — оновлений інтерфейс, за яким приховані місяці тестувань, багато ітерацій дизайну та спринтів розробки.
До ідеї редизайну команда прийшла, аналізуючи статистику та результати юзабіліті-тестування. Постало питання: чому люди менше взаємодіють та переходять зі сторінки на сторінку по нашому сайту чи додатку, ніж на ресурсах конкурентів?
Звісно, можна було потішити себе надією, що юзери знаходять іконки тут швидше. Або тим, що додаток динамічний і користувачам немає потреби покидати сторінку. Але інтуїція та аналітика підштовхнули пошукати менш приємних причин. Логічним поясненням, що лягло в основу редизайну, став один з важливих законів UX дизайну — закон Фіттса.
Опускаючи подробиці, суть така: чим ближче розташовані споріднені об’єкти взаємодії в інтерфейсі, тим краще для користувача. У поточній версії під час маніпуляцій з конкретною іконкою додаток примушує користувача переключати увагу з однієї інтерактивної зони на іншу через весь екран. Це досить важке когнітивне навантаження, яке може викликати роздратування користувача і навіть стати причиною, через яку користувач взагалі припинить користуватися додатком.
Глобальне рішення виглядало досить просто. Треба відкривати іконки ближче, скоротити візуальний шлях між елементами, як це роками успішно робить Google Images.
Проте на практиці, звісно, все було не так просто. Адже Google Images пропонує досить обмежений функціонал взаємодії з зображеннями, у той час як Icons8 передбачає цілу купу функцій, серед яких зокрема:
Відео тюторіал демонструє, як працює функція зміни кольору:
В інтерфейсі завжди можна приховати якийсь функціонал, щоб «розвантажити» робочу зону. Існує маса технік на зразок гамбургер-меню, окремих діалогових вікон, меню-акордеон тощо.
Проблема в тому, що користувачі часто не очікують знайти певні функції, а значить просто не шукають їх. Таким чином, відповідно до теорії інформаційного фуражування, вони, цілком ймовірно, проігнорують усі контроли типу “show more” (показати більше).
Ми вже робили спроби приховати частину функціоналу раніше. Але було фізично боляче дивитися, з якими труднощами стикаються люди під час юзабіліті-тестувань: скажімо, вони билися над тим, як згенерувати шрифт, хоча функціонал для цього був буквально у двох кліках.
Погляньмо, що і як ми вирішили показати, а що приховати у новому інтерфейсі.
Ось так виглядала перша версія UI, до якої ми прийшли після кількох ітерацій творчого пошуку та аналізу отриманих результатів тестування.
Крім оновлення детальної презентації іконок, змінилася і загальна стилістика та візуальна подача: новий лого, схема кольорів, типографіка, — коротше кажучи, майже все.
Під час юзабіліті-тестів була виявлена ще одна проблема: коли користувачів просили обрати кілька іконок і створити колекцію, деякі з них, не довго думаючи, обирали іконки різних стилів. Результат їм подобався. А нас жахав: це ж як написати одне слово різними шрифтами одночасно. Час було переглянути підхід до колекцій.
У старій версії дизайну іконки різних стилів показані в однаковому розмірі і через це виглядають схожими. Також одна колекція розбита на багато рядків, тож порівнювати іконки складніше.
Спочатку ми розташували колекції горизонтально. Це спростило порівняння іконок.
Крім того, тепер ми намагаємося показувати іконки в їх оригінальних розмірах. Велике виглядає великим, маленьке — малим.
Легко й швидко прийняте рішення зробити колекції горизонтальними спричинило вагомі зміни у дизайні та розробці. Зокрема, нам довелося змінити вигляд списку: зараз користувачі можуть просто перетягувати іконки з основного робочого поля у потрібні колекції.
Ось як виглядало вікно взаємодії з певною іконкою. Користувач бачить:
Єдина проблема: воно величезне. Воно займає увесь екран. Ще один аспект, який ми взялися переглянути.
Почалася робота над ущільненням. Ми урізали розмір вікна, прибравши весь чудовий негативний простір. Зменшили розмір шрифта. Зменшили розмір функціоналу ефектів. А вікно все ще було велике.
Прорив прийшов від однієї учасниці юзабіліті-тестів. Вона припустила, що ми маємо показувати або інші стилі, або схожі іконки, а не те й інше одночасно.
Скажімо, якщо на сторінці відкриті всі стилі і користувач шукає іконку Home, він побачить її в усіх стилях.
Якщо ж обрано сторінку конкретного стилю, то користувач побачить всі іконки, близькі до пошукового запиту.
Дякуємо тобі, уважна учаснице тестування! Твоє спостереження дозволило нам скоротити вікно іконки більш ніж удвічі. Ось так виглядає нова компактна версія.
Коли ми створювали наш поточний дизайн, ми мали чотири стилі іконок. Сьогодні їх вже півтора десятка — і це значно змінює досвід взаємодії з інтерфейсом.
Найважче тут те, що назви стилів не завжди чітко вказують на їх візуальні особливості. Використовуючи додаток вперше, хто одразу здогадається, як виглядає стиль під назвою Dusk?
Отже, ми мали їх згрупувати. Так виглядає список стилів після редизайну, з найбільш новими стилями справа.
Пошук ідеального контролу для завантаження іконки — це окрема довга історія. Ми хотіли, щоб це була:
Ми мали певні варіації, що пройшли тестування, і вирішили додати їм привабливості.
Проте, очевидно, що багато функцій сюди не додаси. Генерування шрифту, наприклад, залишається за бортом.
Тож ми здалися і створили діалог.
Після кількох ітерацій фінальний вигляд був такий:
Завантаження PNG
Отримання платних функцій
Не надто вдаючись у деталі, коротко згадаємо інші зміни, які ми обговорили і частково чи повністю застосували в новому дизайні:
І одне з головних вдосконалень — підвищення швидкості завантаження. Але робота над ним ще не закінчена: попереду реліз оновленого API.
Зараз ми проводимо новий цикл юзабіліті-тестів, зокрема щодо таких аспектів:
Робота над Icons8 особлива тим, що користувачі продукту — це здебільшого дизайнери. Багато вдосконалень додатка прийшли саме від творчого ком’юніті і нові зміни вже теж не за горами. Запрошуємо і вас доєднатися до діалогу на нашому форумі. Ваші відгуки надзвичайно цінні, бо саме вони і роблять наш продукт зручним та корисним.
Раніше Telegraf.design писав про те, що варто робити, щоб стати поганим UX-дизайнером.
Користувацький досвід для всіх і кожного особисто
Ліки від нудних дзвінків
Неоморфізм: український внесок у світовий UI-дизайн
Як ставити цілі та досягати їх
Шпаргалка: перевірте, чи не використовуєте ви російські шрифти у своїй роботі
Киньте 10 гривень: як закривати збори з невеликою аудиторією в соцмережах