Daha sakin bir Reverie tasarlamak: sohbetten ürünün tamamına

Son birkaç gün içinde bir konuşma açtıysanız, bir şeylerin farklı olduğunu hissetmiş olabilirsiniz.

Sohbet arayüzü biraz daha sakinleşti. Mesajları okumak kolaylaştı, kontroller hafifledi, paneller ve iletişim kutuları konuşmanın kendisiyle daha az yarışmaya başladı. Tanıdık özellikler yerinde duruyor, ancak karakterlerinizin çevresindeki alan daha dingin hissettiriyor.

Sohbetle başladık, çünkü pek çok kişi Reverie’de en çok zamanı burada geçiriyor. Ayrıca bu yeniden tasarımın arkasındaki soruyu sınamak için en doğru yerdi: Bir arayüz yalnızca güçlü bir ilk izlenim yaratmak değil, bütün bir konuşma boyunca rahat kalmak zorundaysa nasıl hissettirmeli?

Gördüğünüz değişiklik tek bir sayfanın yenilenmesi değildi. Yeni tasarım sisteminin ilk görünen parçasıydı. Şimdi bu sistem keşif ve karakter sayfalarından üretim araçlarına, hikâyelere, ödemelere, ödüllere, ayarlara ve aradaki küçük yardımcı ekranlara kadar tüm ürüne yayıldı.

Reverie her zaman ifade gücü yüksek bir üründü. Belirgin kenarlıklar, görünür gölgeler, katmanlı kartlar, renkli kontroller ve ekrandaki dikdörtgenlerden çok nesne gibi hissedilen yüzeyler ürüne sıcaklık ve tanınan bir kimlik veriyordu.

Ancak bir ürünün bir aşamasına uygun görsel dil, sonraki aşaması için ağırlaşabilir.

Reverie büyüdükçe insanlar konuşmalarda daha uzun kaldı, karakterleri yönetti, hikâyeler yazdı, planları karşılaştırdı ve gelişmiş araçları ayarladı. Bir tanıtım sayfasına karakter veren süslemeler her iletişim kutusunda, kartta, menüde ve düğmede tekrarlandığında görsel gürültüye dönüşebilir.

Reverie’yi daha az özgün yapmak için değil, özgünlüğün deneyimin kendisinden gelmesi için yeniden tasarladık.

Daha hafif, ama daha soğuk değil

“Hafif” tasarım kolayca bembeyaz arka planlar, ince gri metinler ve bitmemiş görünen silik bileşenler anlamına gelebilir. Hedefimiz bu değildi.

Yeni sistem daha sakin ama hâlâ sıcak. Keskin beyaz yerine hafif tonlu nötr yüzeyler kullandık. Uzun okumalarda metin daha koyu ve güçlü. Kenarlıklar daha ölçülü, gölgeler daha sığ ve renk daha amaçlı. Görsel ağırlık azalırken Reverie’nin hikâyeler ve ilişkiler için bir yer olduğu hissi korunuyor.

Bu denge rol yapmada özellikle önemli. Bir konuşma ayar paneli değildir. İnsanlar uzun mesajlar okur, tondaki küçük değişiklikleri fark eder ve aynı ekranda uzun süre kalır. Tipografi ve arka plan yalnızca ekran görüntüsünde değil, yirmi dakika sonra da rahat olmalıdır.

Uzun okumaya dayanıklı tipografi

En önemli ama en gösterişsiz değişikliklerden biri tipografik hiyerarşiyi güçlendirmemizdi.

Büyük başlıklar ifade gücünü korurken gövde metni daha sağlam hale geldi. Önemli etiketler, gezinme ve eylemler daha kolay taranan ağırlıklar kullanıyor. İkincil metin geri planda kalıyor ama okunması zorlaşacak kadar solmuyor.

İlke basit:

Uzun metin sakin ve sağlam görünmeli.
Eylemler her etiket okunmadan tanınabilmeli.
Destekleyici bilgi geri çekilmeli, kaybolmamalı.
Sayfa farklı ekran, tema ve ışıkta okunabilir kalmalı.

İyi tipografi dikkat istemez; dikkati sürdürmeyi kolaylaştırır.

Ürün genelinde tek bileşen dili

Bu, sayfaları tek tek giydirmek değildi. Ürünün altındaki ortak bileşen dilini yeniden kurduk.

Düğmeler, kartlar, pencereler, menüler, sekmeler, formlar, tablolar, ipuçları, bildirimler, çekmeceler ve gezinme artık şu konularda aynı kuralları izliyor:

köşe yarıçapı ve kenarlık kontrastı
yüzey rengi ve yükselti
odak, üzerine gelme ve basılma durumları
metin ağırlığı ve boşluk
anlamsal renkler

Bu tutarlılık tek bir görsel seçimden daha önemlidir. Aynı eylem her yerde aynı görünüp davrandığında arayüzü yorumlamak daha az çaba ister. Tehlikeli eylem tehlikeli, seçilen seçenek seçili görünür; ana eylem de her düğme onunla yarışmadan bulunur.

Vurgu ve başarı durumları için ortak anlamsal varyantlar da ekledik. Böylece her özellik kendi rengini veya geçişini yeniden üretmiyor.

Zor kısım: istisnaları bulmak

Düğme bileşenini güncellemek bütün düğmeleri otomatik değiştirmez.

Ürünler zamanla yerel kararlar biriktirir: kendi kenarlığı olan fiyat kartı, özel parıltılı ödül penceresi, farklı arka planlı paylaşım ekranı ya da hover davranışını baştan kuran bir kart. Yeniden tasarımı tutarsız hissettirenler bu istisnalardır.

Bu nedenle incelememiz bileşen kitaplığının ötesine geçti. Pazarlama sayfalarını, ödeme akışlarını, ödülleri, başarıları, karakter ve hikâye kartlarını, paylaşım pencerelerini, gezinmeyi, boş durumları, banner’ları ve az ziyaret edilen yardımcı ekranları ortak dile geri taşıdık.

Her istisnayı kaldırmadık. Kutlama, aciliyet, nadirlik veya durum anlatan bazı anlar daha güçlü kimlik ister. Artık bu anlar sistemi görmezden gelmek yerine genişletiyor.

Daha az süs, daha net etkileşim

Etkileşimli görünüp yararlı bilgi vermeyen birçok efekti kaldırdık.

Ağır gölgeler her kartta değil. Hover hareketi daha ölçülü. Geçişler vurgu gereken anlara ayrıldı. Kenarlıklar her içeriği yeni bir kutuya kapatmadan yapıyı gösteriyor.

Gerçek etkileşim durumları ise daha açık:

Seçili seçenekler durumunu görsel ve anlamsal olarak gösteriyor.
Klavye odağını takip etmek kolaylaştı.
Etkileşimli kartlarda tutarlı hover ve odak var.
Düğmeler ortak varyantlarla hiyerarşi anlatıyor.
Pencereler ve menüler üründen kopuk görünmeden arka plandan ayrılıyor.

Süsü azaltınca geri bildirimi iyileştirmek için alan açıldı. Arayüz daha az hareket ediyor, daha çok şey söylüyor.

Erişilebilirlik görsel sistemin parçasıdır

Yalnızca fareyle görünümü anlatan bir tasarım sistemi eksiktir.

Odak halkalarını, klavye davranışını, seçim anlamlarını, kontrastı ve etkileşimli kartları yeniden gözden geçirdik. Bazı kontroller basılı veya seçili durumunu yardımcı teknolojilere daha açık iletiyor. Bağlantı gibi çalışan hikâye öğeleri klavyeyle odaklanıp açılabiliyor. Ortak kontroller aynı odak dilini kullanıyor.

Bu değişiklikler bilinçli olarak ince. Erişilebilirlik ayrı bir mod değil, varsayılan davranış olmalı.

Sonrası için daha iyi bir temel

En değerli sonuç belirli bir renk, yarıçap veya gölge değil; aynı tasarım sorusuna verilen çelişkili yanıtların azalmasıdır.

Yeni bir özellikte iletişim kutusunun, girdinin veya seçili kartın davranışını sıfırdan belirlemiyoruz. Sistem yanıtları zaten sunuyor. İş hızlanıyor, deneyim daha öngörülebilir oluyor.

Tutarlılık tüm ekranları aynı yapmak değildir. İçerik değişirken arayüzün tanıdık kalmasını sağlayan istikrarlı beklentiler vermektir.

Ne fark etmenizi umuyoruz

İdeal olarak ilk anda çok şey değil.

Reverie daha kolay okunmalı, daha sakin gezilmeli ve keşiften konuşmaya, üretime ve hesap araçlarına geçerken daha bütünlüklü hissettirmeli. Önemli eylemler daha erken görünmeli, ikincil kontroller dikkate daha az talip olmalı ve uzun oturumlar gözü daha az yormalı.

Karakterler hâlâ ifade gücüne, hikâyeler hâlâ atmosfere sahip. Kutlanmaya değer anlar yine canlı olabilir.

Arayüz yalnızca ne zaman konuşacağını ve diğer şeylerin anlam kazanması için ne zaman sessizleşeceğini daha iyi biliyor.

Yeni tasarım sistemi artık Reverie deneyiminin tamamında. Özellikle iyileşen ya da hâlâ yerine oturmayan bir şey varsa Discord topluluğunda bize anlatın.