Статті
Як зробити редизайн додатку, аби тебе не зненавиділи користувачі
Робота над інтерфейсом веб-додатку на основі юзабіліті-тестів
16 листопада, 2018
avatar
Іван Браун
Засновник Icons8, UX дизайнер
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

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

Саме про таку історію йдеться у сьогоднішній статті: це історія про редизайн популярного ресурсу для дизайнерів — бібліотеки іконок Icons8. Бета версія оновленого додатку вже у відкритому доступі, а далі розповімо детальніше про процеси, причини, ітерації та юзабіліті-тестування.

Швидкий огляд: Було—Стало

Коротко про продукт: Icons8 — це велика бібліотека іконок, що постійно поповнюється. На сьогодні колекція вже перетнула кількість у 85 000 зображень, що представлені у різноманітних стилях. Усі іконки доступні у PNG форматі безкоштовно, а також представлені у багатьох інших форматах та розмірах для тих, хто має ліцензію. Користувачі можуть навіть замовити іконку, яка їм потрібна. Бібліотека доступна як онлайн, так і офлайн у десктопному додатку.

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

А це — оновлений інтерфейс, за яким приховані місяці тестувань, багато ітерацій дизайну та спринтів розробки.

Проблема: мало кліків

До ідеї редизайну команда прийшла, аналізуючи статистику та результати юзабіліті-тестування. Постало питання: чому люди менше взаємодіють та переходять зі сторінки на сторінку по нашому сайту чи додатку, ніж на ресурсах конкурентів?

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

Закон Фіттса

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

Рішення

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

Проте на практиці, звісно, все було не так просто. Адже Google Images пропонує досить обмежений функціонал взаємодії з зображеннями, у той час як Icons8 передбачає цілу купу функцій, серед яких зокрема:

  • Зміна кольору і розміру іконки.
  • Застосування рамки чи поля навколо елемента, додавання тексту.
  • Можливість завантаження у різних форматах (деякі – лише за наявності платної ліцензії).
  • Швидкий огляд схожих іконок або тієї самої іконки у різних стилях (наприклад, iOS, Material тощо).
  • Генерування HTML та шрифтів та ін.

Відео тюторіал демонструє, як працює функція зміни кольору:

Прибирання зайвого

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

Проблема в тому, що користувачі часто не очікують знайти певні функції, а значить просто не шукають їх. Таким чином, відповідно до теорії інформаційного фуражування, вони, цілком ймовірно, проігнорують усі контроли типу “show more” (показати більше).

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

Погляньмо, що і як ми вирішили показати, а що приховати у новому інтерфейсі.

Редизайн

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

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

Колекції

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

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

Спочатку ми розташували колекції горизонтально. Це спростило порівняння іконок.

Крім того, тепер ми намагаємося показувати іконки в їх оригінальних розмірах. Велике виглядає великим, маленьке — малим.

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

Вікно іконки

Ось як виглядало вікно взаємодії з певною іконкою. Користувач бачить:

  • усі доступні ефекти;
  • усі стилі, в яких наявна ця іконка (переглянути можна горизонтальним скролом);
  • схожі іконки;
  • організовані контроли, що дозволяє зберегти негативний простір.

Єдина проблема: воно величезне. Воно займає увесь екран. Ще один аспект, який ми взялися переглянути.

Шлях до компактності

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

Прорив прийшов від однієї учасниці юзабіліті-тестів. Вона припустила, що ми маємо показувати або інші стилі, або схожі іконки, а не те й інше одночасно.

Скажімо, якщо на сторінці відкриті всі стилі і користувач шукає іконку Home, він побачить її в усіх стилях.

Якщо ж обрано сторінку конкретного стилю, то користувач побачить всі іконки, близькі до пошукового запиту.

Дякуємо тобі, уважна учаснице тестування! Твоє спостереження дозволило нам скоротити вікно іконки більш ніж удвічі. Ось так виглядає нова компактна версія.

Групування стилів іконок

Коли ми створювали наш поточний дизайн, ми мали чотири стилі іконок. Сьогодні їх вже півтора десятка — і це значно змінює досвід взаємодії з інтерфейсом.

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

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

Завантаження

Пошук ідеального контролу для завантаження іконки — це окрема довга історія. Ми хотіли, щоб це була:

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

Ми мали певні варіації, що пройшли тестування, і вирішили додати їм привабливості.

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

Тож ми здалися і створили діалог.

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

Завантаження PNG

Отримання платних функцій

Інші вдосконалення

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

  • прибрали верхнє меню;
  • вдосконалили профіль користувача;
  • створили дефолтні аватарки профілю;
  • на домашній сторінці додали превью різних стилів замість списку нових іконок.

І одне з головних вдосконалень — підвищення швидкості завантаження. Але робота над ним ще не закінчена: попереду реліз оновленого API.

Плани на майбутнє

Зараз ми проводимо новий цикл юзабіліті-тестів, зокрема щодо таких аспектів:

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

Черга за вами

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


Раніше Telegraf.design писав про те, що варто робити, щоб стати поганим UX-дизайнером.

avatar
Іван Браун
Засновник Icons8, UX дизайнер
Колонка

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

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

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