Якщо ти відкривав розмову протягом останніх кількох днів, то, можливо, помітив, що щось змінилося.
Інтерфейс чату став трохи тихішим. Повідомлення стало легше читати. Елементи керування здавалися легшими. Панелі й діалоги вже не так змагалися із самою розмовою. Нічого не переїхало в незнайоме місце, але простір навколо твоїх персонажів став відчуватися спокійнішим.
Ми почали з чату, бо саме там багато людей проводять у Reverie найбільше часу. Це також було найкраще місце, щоб перевірити питання, яке стоїть за цим редизайном: яким має відчуватися інтерфейс, коли він повинен залишатися зручним упродовж усієї розмови, а не лише справляти сильне перше враження?
Те, що ти там побачив, не було окремим оновленням. Це була перша видима частина нової дизайн-системи, і тепер ми поширили цю систему на весь продукт — від огляду й сторінок персонажів до інструментів створення, історій, платежів, нагород, налаштувань і дрібних службових екранів між ними.
Reverie завжди був виразним.
Цей характер проявлявся всюди: товсті рамки, помітні тіні, багатошарові картки, барвисті елементи керування й поверхні, які хотіли відчуватися як предмети, а не як прямокутники на екрані. Це давало продукту тепло й робило його впізнавано нашим.
Але візуальна мова, яка пасує одному етапу продукту, може стати заважкою для наступного.
Що більше зростав Reverie, то більше інтерфейс мав підтримувати не лише огляд. Люди довше залишалися в розмовах, керували персонажами, писали історії, порівнювали тарифи, налаштовували розширені інструменти й переходили між дедалі складнішими сценаріями роботи. Ті самі декоративні деталі, які додавали характеру лендингу, перетворювалися на візуальний шум, коли повторювалися в кожному діалозі, картці, меню й кнопці.
Тож ми переробили Reverie не для того, щоб зробити його менш самобутнім. Ми переробили його, щоб самобутність виростала із самого досвіду.
Легший інтерфейс, а не холодніший
«Легкий» легко може стати синонімом простого білого тла, тонкого сірого тексту й компонентів, які настільки непомітні, що все починає здаватися незавершеним. Такої мети ми ніколи не мали.
Нова система тихіша, але й досі тепла.
Ми відійшли від різкого білого полотна до м'яко тонованих нейтральних поверхонь. Текст темніший і трохи насиченіший там, де важливе тривале читання. Рамки стриманіші, тіні неглибокі, а колір використовується свідоміше. У результаті візуальної ваги менше, але не втрачається відчуття, що Reverie — це місце, створене для історій і стосунків.
Цей баланс був особливо важливим для рольової гри. Розмова — це не панель налаштувань. Люди читають довгі повідомлення, помічають тонкі зміни тону й часто довго залишаються на тому самому екрані. Типографіка й колір тла мають бути комфортними і через двадцять хвилин, а не лише чисто виглядати на скриншоті.
Типографіка, що витримує довге читання
Одна з найважливіших змін водночас одна з найменш помітних: ми посилили ієрархію шрифтів.
Великі заголовки лишаються виразними, але основний текст тепер має більше візуальної впевненості. Важливі підписи, пункти навігації та дії використовують накреслення, які легше охопити поглядом. Другорядний текст і досі другорядний, але вже не настільки блідий, щоб його читання перетворювалося на роботу.
Принцип простий:
- Довгий текст має відчуватися спокійним і вагомим.
- Дії мають бути впізнаваними ще до того, як ти прочитаєш кожен підпис.
- Допоміжна інформація має відступати на другий план, не зникаючи.
- Сторінка має лишатися розбірливою на різних екранах, у різних темах і за різного освітлення.
Хороша типографіка не вимагає уваги. Вона допомагає довше її втримувати.
Єдина мова компонентів у всьому продукті
Це не було перефарбовування сторінка за сторінкою. Ми перебудували спільну мову компонентів, що лежить в основі продукту.
Кнопки, картки, діалоги, меню, вкладки, елементи форм, таблиці, підказки, сповіщення, висувні панелі, спливаючі вікна й елементи навігації тепер мають спільні правила щодо:
- радіуса заокруглення
- контрасту рамок
- кольору поверхні
- підняття над площиною
- індикації фокуса
- станів наведення й натискання
- насиченості тексту
- відступів
- семантичного кольору
Ця послідовність важить більше, ніж будь-яке окреме візуальне рішення. Коли однаковий тип дії всюди виглядає й поводиться однаково, користувачам доводиться менше розшифровувати інтерфейс. Руйнівна дія відчувається руйнівною. Вибраний варіант відчувається вибраним. Плаваюча поверхня відчувається відокремленою від сторінки під нею. Основну дію легко знайти, і не кожна кнопка змагається за те, щоб бути основною.
Ми також запровадили чіткіші семантичні варіанти для дій, як-от виділені й успішні стани. Тепер вони є частиною спільної системи, а не одноразовими градієнтами чи власними кольорами, які заново створювали всередині окремих функцій.
Найскладніше: знайти винятки
Оновлення компонента кнопки не оновлює автоматично кожну кнопку.
З часом у продуктах накопичуються локальні рішення: картка тарифу з власною рамкою, діалог нагороди з особливим світінням, вікно поширення зі спеціальним тлом, прихована дія з приватним градієнтом або картка функції, яка відтворює поведінку при наведенні з нуля.
Саме через такі винятки редизайн зазвичай і починає здаватися непослідовним.
Ми перевірили продукт поза бібліотекою компонентів і повернули вартісні власні інтерфейси до спільної мови. Це стосувалося маркетингових сторінок, сценаріїв оплати, нагород, досягнень, карток персонажів та історій, діалогів поширення, елементів навігації, порожніх станів, банерів і рідше відвідуваних службових екранів.
Не кожен виняток прибрали. Деяким інтерфейсам потрібна сильніша ідентичність, бо вони передають святкування, терміновість, рідкісність чи статус. Різниця в тому, що тепер такі моменти розширюють систему, а не ігнорують її.
Менше декору, зрозуміліша взаємодія
Редизайн прибирає багато ефектів, які виглядали інтерактивними, але не додавали корисної інформації.
Важкі тіні більше не з'являються на кожній картці. Рух при наведенні стриманіший. Градієнти залишено для моментів, яким потрібен акцент. Рамки задають структуру, не загортаючи кожен фрагмент вмісту в ще одну коробку.
Водночас справжні стани взаємодії стали зрозумілішими:
- Вибрані варіанти показують свій стан і візуально, і семантично.
- За фокусом клавіатури легше стежити.
- Інтерактивні картки отримують послідовне оформлення при наведенні й фокусі.
- Кнопки передають ієрархію через спільні варіанти.
- Діалоги й меню відокремлюються від тла, не здаючись відірваними від продукту.
Менше декору дало нам більше простору, щоб покращити зворотний зв'язок. Інтерфейс рухається менше, але каже більше.
Доступність — частина візуальної системи
Дизайн-система неповна, якщо вона описує лише те, як компоненти виглядають під мишею.
Під час рефакторингу ми переглянули кільця фокуса, поведінку з клавіатури, семантику вибраних станів, контраст і поведінку інтерактивних карток. Деякі елементи керування тепер чіткіше повідомляють допоміжним технологіям про стан натискання чи вибору. До елементів історій, які поводяться як посилання, тепер можна дістатися й активувати їх із клавіатури. Оформлення фокуса підпорядковується тій самій візуальній логіці в усіх спільних елементах керування.
Ці зміни навмисно непомітні. Доступність не повинна відчуватися окремим режимом, накладеним поверх продукту. Вона має бути присутня в поведінці за замовчуванням.
Краща основа для того, що буде далі
Найцінніший результат цієї роботи — не конкретний відтінок, радіус чи тінь. А те, що тепер у продукті менше конкурентних відповідей на те саме дизайнерське питання.
Коли ми створюємо нову функцію, нам більше не треба з нуля вирішувати, яким має відчуватися діалог, як має реагувати поле введення чи як має виглядати вибрана картка. Система вже дає ці відповіді. Це пришвидшує нову роботу, але, що важливіше, робить кінцевий досвід передбачуванішим.
Послідовність не означає, що кожен екран має виглядати однаково. Вона означає, що люди отримують стабільний набір очікувань, тож вміст може змінюватися, а інтерфейс не стає незнайомим.
Що ми сподіваємося, ти помітиш
В ідеалі — спершу не так уже й багато.
Reverie має просто легше читатися, спокійніше відчуватися в навігації й бути цілісним, коли ти переходиш від огляду до розмови, творчості й інструментів акаунта. Важливі дії мають помічатися швидше. Другорядні елементи керування мають перестати змагатися за увагу. Довші сесії мають менше втомлювати очі.
Персонажі й досі виразні. Історії й досі атмосферні. Моменти, які варті святкування, й досі можуть бути яскравими.
Інтерфейс просто знає, коли говорити, — і коли затихнути настільки, щоб усе інше мало значення.
Нова дизайн-система тепер охоплює весь Reverie. Якщо щось стало помітно краще — або досі здається не на своєму місці, — ми будемо раді почути про це в нашій спільноті Discord.