Projektowanie spokojniejszego Reverie: od czatu po cały produkt

Jeśli w ostatnich dniach otwieraliście rozmowę, mogliście poczuć, że coś się zmieniło.

Interfejs czatu stał się nieco spokojniejszy. Wiadomości łatwiej się czyta, elementy sterujące są lżejsze, a panele i okna dialogowe mniej rywalizują z samą rozmową. Nic nie przeniosło się w nieznane miejsce, ale przestrzeń wokół postaci zaczęła sprawiać wrażenie bardziej uporządkowanej.

Zaczęliśmy od czatu, ponieważ właśnie tam wiele osób spędza w Reverie najwięcej czasu. Było to także najlepsze miejsce, aby sprawdzić pytanie stojące za tą przebudową: jak powinien działać interfejs, który ma pozostać wygodny przez całą rozmowę, a nie tylko zrobić dobre pierwsze wrażenie?

Zmiana czatu nie była osobnym odświeżeniem. To pierwsza widoczna część nowego systemu projektowego, który objął już cały produkt — odkrywanie treści, strony postaci, narzędzia twórcze, historie, płatności, nagrody, ustawienia i drobne ekrany pomocnicze pomiędzy nimi.

Reverie zawsze było wyrazistym produktem.

Ta osobowość pojawiała się wszędzie: mocne obramowania, widoczne cienie, warstwowe karty, kolorowe kontrolki i powierzchnie przypominające przedmioty, a nie prostokąty na ekranie. Nadawały produktowi ciepło i czyniły go rozpoznawalnym.

Jednak język wizualny odpowiedni dla jednego etapu produktu może okazać się zbyt ciężki dla następnego.

Wraz z rozwojem Reverie interfejs musiał obsługiwać znacznie więcej niż odkrywanie. Użytkownicy dłużej przebywają w rozmowach, zarządzają postaciami, piszą historie, porównują plany, konfigurują zaawansowane narzędzia i poruszają się po coraz bardziej złożonych procesach. Te same ozdobniki, które nadają charakter stronie promocyjnej, mogą stać się szumem, gdy powtarzają się w każdym oknie, karcie, menu i przycisku.

Nie przeprojektowaliśmy Reverie po to, by odebrać mu charakter. Chcieliśmy, aby ten charakter wynikał z samego doświadczenia.

Lżej, ale nie chłodniej

„Lekki” interfejs łatwo sprowadzić do białego tła, cienkiego szarego tekstu i komponentów tak mało wyrazistych, że całość wygląda na niedokończoną. To nigdy nie było naszym celem.

Nowy system jest spokojniejszy, ale wciąż ciepły.

Odeszliśmy od ostrej bieli na rzecz delikatnie zabarwionych, neutralnych powierzchni. Tekst jest ciemniejszy i nieco mocniejszy tam, gdzie liczy się dłuższe czytanie. Obramowania są subtelniejsze, cienie płytsze, a kolor używany bardziej celowo. Efekt jest wizualnie lżejszy, ale Reverie nadal pozostaje miejscem dla historii i relacji.

Ta równowaga jest szczególnie ważna w roleplayu. Rozmowa nie jest panelem ustawień. Ludzie czytają długie wiadomości, wyłapują subtelne zmiany tonu i długo pozostają w jednym widoku. Typografia i tło muszą być wygodne po dwudziestu minutach, nie tylko dobrze wyglądać na zrzucie ekranu.

Typografia na dłuższe czytanie

Jedna z najważniejszych zmian jest jednocześnie najmniej efektowna: wzmocniliśmy hierarchię typograficzną.

Duże nagłówki pozostają wyraziste, ale tekst główny ma teraz pewniejszą wagę wizualną. Ważne etykiety, nawigacja i działania używają grubości łatwiejszych do szybkiego rozpoznania. Tekst pomocniczy nadal schodzi na dalszy plan, ale nie jest tak blady, by jego czytanie wymagało wysiłku.

Zasada jest prosta:

Długi tekst powinien być spokojny i solidny.
Działania powinny być rozpoznawalne przed przeczytaniem każdej etykiety.
Informacje pomocnicze mogą się wycofać, ale nie zniknąć.
Strona musi pozostać czytelna na różnych ekranach, w różnych motywach i oświetleniu.

Dobra typografia nie domaga się uwagi. Pomaga ją utrzymać.

Jeden język komponentów w całym produkcie

Nie była to zmiana skórki strona po stronie. Przebudowaliśmy wspólny język komponentów znajdujący się pod całym produktem.

Przyciski, karty, okna dialogowe, menu, karty zakładek, formularze, tabele, podpowiedzi, powiadomienia, wysuwane panele, popovery i nawigacja korzystają teraz z tych samych reguł dotyczących:

promienia narożników
kontrastu obramowań
koloru powierzchni
poziomu i cieni
oznaczenia fokusu
stanów najechania i naciśnięcia
grubości tekstu
odstępów
kolorów semantycznych

Ta spójność jest ważniejsza niż pojedynczy wybór wizualny. Kiedy ten sam rodzaj działania wszędzie wygląda i zachowuje się tak samo, interfejs wymaga mniej interpretacji. Działanie destrukcyjne wygląda groźnie. Wybrana opcja wygląda na wybraną. Pływająca powierzchnia oddziela się od strony pod nią. Główne działanie łatwo znaleźć bez rywalizacji każdego przycisku o pierwszeństwo.

Dodaliśmy też czytelniejsze warianty semantyczne dla wyróżnień i sukcesu. Są teraz częścią wspólnego systemu, a nie oddzielnymi gradientami i kolorami tworzonymi w każdej funkcji.

Trudna część: odnalezienie wyjątków

Aktualizacja komponentu przycisku nie aktualizuje automatycznie wszystkich przycisków.

Produkty z czasem gromadzą lokalne decyzje: kartę cenową z własnym obramowaniem, okno nagrody ze specjalną poświatą, modal udostępniania z innym tłem, ukryte działanie z własnym gradientem czy kartę funkcji odtwarzającą zachowanie hover od zera.

Takie wyjątki często sprawiają, że przebudowa wydaje się niespójna.

Nasz audyt wyszedł poza bibliotekę komponentów. Wartościowe niestandardowe interfejsy przywróciliśmy do wspólnego języka: strony marketingowe, płatności, nagrody, osiągnięcia, karty postaci i historii, okna udostępniania, nawigację, puste stany, banery i rzadziej odwiedzane ekrany narzędziowe.

Nie usunęliśmy wszystkich wyjątków. Niektóre widoki potrzebują silniejszej tożsamości, by przekazać świętowanie, pilność, rzadkość lub status. Teraz jednak rozszerzają system, zamiast go ignorować.

Mniej dekoracji, wyraźniejsza interakcja

Usunęliśmy wiele efektów, które wyglądały interaktywnie, lecz nie dostarczały użytecznej informacji.

Ciężkie cienie nie pojawiają się już na każdej karcie. Ruch po najechaniu jest bardziej powściągliwy. Gradienty zostają dla chwil wymagających akcentu. Obramowania pokazują strukturę, nie zamykając każdej treści w kolejnym pudełku.

Prawdziwe stany interakcji są za to czytelniejsze:

Wybrane opcje pokazują stan wizualnie i semantycznie.
Fokus klawiatury łatwiej śledzić.
Interaktywne karty mają spójne stany hover i fokus.
Przyciski przekazują hierarchię wspólnymi wariantami.
Okna i menu oddzielają się od tła, nie wyglądając obco.

Ograniczenie dekoracji dało więcej miejsca na lepszą informację zwrotną. Interfejs porusza się mniej, ale mówi więcej.

Dostępność jest częścią systemu wizualnego

System projektowy jest niepełny, jeśli opisuje komponenty wyłącznie podczas korzystania z myszy.

Podczas refaktoryzacji ponownie sprawdziliśmy obramowania fokusu, obsługę klawiatury, semantykę wyboru, kontrast i działanie interaktywnych kart. Niektóre kontrolki wyraźniej przekazują technologiom asystującym stan naciśnięcia lub wyboru. Elementy historii działające jak linki można zaznaczyć i otworzyć klawiaturą. Fokus stosuje tę samą logikę wizualną we wspólnych kontrolkach.

Zmiany są celowo subtelne. Dostępność nie powinna przypominać osobnego trybu nałożonego na produkt. Powinna być obecna domyślnie.

Lepszy fundament na przyszłość

Najcenniejszym wynikiem nie jest konkretny kolor, promień czy cień. Produkt ma teraz mniej konkurencyjnych odpowiedzi na to samo pytanie projektowe.

Tworząc nową funkcję, nie musimy od początku ustalać wyglądu okna, reakcji pola czy sposobu oznaczenia wybranej karty. System już daje te odpowiedzi. Praca jest szybsza, a doświadczenie przede wszystkim bardziej przewidywalne.

Spójność nie oznacza identycznych ekranów. Oznacza stabilne oczekiwania, dzięki którym treść może się zmieniać, a interfejs pozostaje znajomy.

Co mamy nadzieję, że zauważycie

Najlepiej — niewiele od razu.

Reverie powinno być po prostu łatwiejsze do czytania, spokojniejsze w nawigacji i bardziej spójne podczas przechodzenia od odkrywania do rozmów, tworzenia i narzędzi konta. Ważne działania powinny pojawiać się szybciej, kontrolki pomocnicze mniej walczyć o uwagę, a długie sesje mniej męczyć wzrok.

Postacie pozostają wyraziste. Historie zachowują atmosferę. Chwile warte świętowania nadal mogą być intensywne.

Interfejs po prostu lepiej wie, kiedy mówić — i kiedy ucichnąć, aby wszystko inne mogło mieć znaczenie.

Nowy system projektowy obejmuje już całe Reverie. Jeśli coś działa wyraźnie lepiej — albo nadal wydaje się nie na miejscu — podzielcie się opinią w naszej społeczności Discord.