Ghost of Tsushima’dan UX Dersleri: Ürünü Çorba Etmeden Kullanıcıya Sunmak

Oyun 2020’de çıkmış ama ben en son disketten 💾 oyun oynadığım için uzunca bir süredir uzaktım konuya. 2025 başlarında da oyun oynamaya yeniden başladım.

Ghost of Tsushima’yı ilk oynadığımda, ekranda neredeyse hiçbir şey olmamasından aşırı etkilenmiştim.

• Can barı yok. Sadece kılıç çektiğimde görünüyordu.
• Mini harita yok. Yalnızca 1–2 saniyelik mesafeyi gösteren küçük bir bildirim vardı.
• Waypoint yok. Bunun yerine çevresel rüzgârı takip ediyorsun.

Kısacası oyun, bana yalnızca ihtiyacım olan bilgiyi, tam ihtiyacım olduğu anda veriyor.

Şunu fark ettim: Bu sadece iyi bir oyun tasarımı değildi. Bu, her gün onlarca AI-generated, "vibe coder" yaklaşımıyla aceleyle üretilmiş SaaS ürünlerinde karşılaştığımız felsefenin tam tersiydi.

SaaS'ın Bilgi Yığma Alışkanlığı

Çalıştığım ya da incelediğim çoğu SaaS dashboard’una baktığımda şunu görüyorum: içerik, düşünce yoğunluğuna göre değil; ekranda ne kadar yer kapladığına göre değerli varsayılıyor.

• Her şey aynı anda görünür.
• 8 scorecard yan yana dizilir.
• 5 farklı grafik aynı sayfaya sıkıştırılır.
• Sidebar'da 25 farklı navigasyon öğesi bulunur.

Bugün neredeyse tüm AI-generated SaaS dashboard’lar birbirine benziyor. Ürün ve marketing'deki "iştah", olduğu gibi arayüze aktarıldığı için ortaya çıkan tasarımlar yüzeyde basit ama aslında özensiz görünüyor.

Bu da herkesin dashboard’unun "aynı gibi" hissi vermesine neden oluyor.

Bu yüzden, geçen yıldan bu yana ürün ekipleri tasarıma daha fazla yatırım yapmaya başladı.

Bu durumu daha iyi anlamak için, UX dünyasında bu yaklaşımın nasıl tanımlandığına kısa bir bakmak faydalı olacaktır.

Kademeli İfşa

Bu yaklaşımın UX literatüründeki adı progressive disclosure. Jakob Nielsen (Nielsen Norman Group kurucu ortağı) bu prensibi 1995'te formüle etti: ileri düzey ya da nadiren kullanılan özellikleri ikincil bir ekrana ertele, böylece uygulamayı öğrenmesi daha kolay ve hata yapmaya daha az elverişli hale getir.

Ghost of Tsushima bunu uygulamada nasıl çözüyor, her birine bir SaaS karşılığı düşünelim.

1. Can Barı

Ghost of Tsushima'da can barı yalnızca kılıç çekildiğinde, yani gerçek bir tehlike anında görünüyor. Keşfederken, konuşurken, atla gezerken ekran tertemiz ve aşırı sade.

SaaS karşılığı: Bir kullanıcı bir görevi/taskı aktif olarak yaparken ilgili metrikler ve uyarılar öne çıkmalı, ama kullanıcı sadece genel bir bakış yapmak için dashboarda girdiğinde sonsuz detay ve uyarı listesiyle karşılaşmamalı.

Bağlam değiştikçe arayüz de değişmeli; kullanıcının rolüne, o anki görevine ve hatta kullanıcı tipine göre adapte olmalıdır.

Biliyorum saçma duyuluyor ama gerçekten ürününüzde 100+ kullanıcıyı geçtiğinizde, bu trickler hayat kurtarabiliyor.

2. Rüzgar

Ghost of Tsushima'da mini harita ve ok yok. Bunun yerine kullanıcı istediğinde, yalnızca gerektiğinde, bir rüzgar çağırıyor. Rüzgar hedefin yönüne esiyor, sonra kayboluyor. Guiding Wind.

Guiding Wind

SaaS karşılığı: Daima ekranda duran, göz alıcı bir onboarding tooltip sistemi yerine, kullanıcının talep ettiği anda ilgili rehberliği sunan bir sistem. "Yardım" düğmesine basınca dokümantasyon sayfasına yönlendirmek değil, o an o ekranla alakalı, bağlamsal bir ipucu ve sonra kayboluyor.

Liseliler bilmez:

Microsoft'un meşhur Clippy'si o zamanların Chatbotu idi

3. Çevresel İpuçlar

Ghost of Tsushima'da uzakta tüten siyah bir duman, düşman kampının işareti. Beyaz duman ise yardıma muhtaç bir yerleşim. Altın ağaç, keşfedilmeyi bekleyen bir tapınak. Hiçbirinin üzerinde tooltip yok, ikon yok, etiket yok, ama anlam net.

SaaS karşılığı: Renk, hiyerarşi ve tipografi yoluyla kullanıcının ekranı "okuyabilmesi" için yeterli görsel dil inşa etmek. Eğer kullanıcı bir anomaliyi görmek için sayıya bakmak zorunda kalıyorsa, tasarım henüz bunu "diegetic" kılmamış demektir. Trend yukarıysa eğri bunu söylemeli, kullanıcı rakamı hesaplamak zorunda kalmamalı.

Özellikle bu kadar kompleks hikâye katmanlarına sahip bir oyunda, dikkat dağınıklığını minimize ederken aynı zamanda oyuncuyu bağlayacak düzeyde oyunlaştırmayı da dengeli şekilde sunabilmesi, onu oldukça başarılı bir örnek haline getiriyor.

Ikon Sanati

Ghost of Tsushima'nın ikonografi sistemi, UI sanatçısı Mike Ackerman tarafından Japon aile armalarından (Kamon) ilham alınarak tasarlandı. Kamon'un doğasındaki özellikler şunlar: perspektifsiz, simetrik, kalın çizgili, grafik olarak sade. Küçük boyutlarda bile kolayca okunuyor.

Bu, modern SaaS ikonografisiyle kıyaslandığında ilginç bir kontrast oluşturuyor. Çoğu ürün, farklı kaynaklardan gelen tutarsız ikon setlerini kullanıyor: bazı ikonlar ince çizgili, bazıları dolu; bazıları metaforik, bazıları literal. Kullanıcı her seferinde hangi ikonun ne anlama geldiğini öğrenmek zorunda kalıyor.

Kamon yaklaşımının SaaS’a çevirisi şu: ikonlar tutarlı bir sembolik dil oluşturmalı, öğrenilebilir olmalı ve anlamı simgeden çıkarılabilir olmalı; yani kullanıcı tooltip okumadan anlayabilmeli. Perspektifsiz ve simetrik tasarım, ikonların her boyutta ve tema (açık/koyu) altında eşit iyi görünmesini sağlıyor.

Hardal 'da Figma üzerinde tüm renkler, fontlarımız, icon ve ilüstrasyonlarımızın üzerine biraz da bu yüzden düşüyoruz.

Handbook'umuzdaki Design kısmını incelemenizi öneririm: https://usehardal.com/handbook/design/design-philosophy

Çoğu SaaS ürünü AI-generated olduğu için ikonlar ve renkler birbirine benziyor.

Özellikle startup’ların ürünlerinde, hele enterprise seviyesinde bir ürün sunuyorsanız, bu tip ufak detaylar kritik önemde. İnsanların artık yeni bir tool veya yeni bir UI öğrenmeye vaktinin ve motivasyonunun olmadığını unutmayın. Some burnout problems.

İyi bir product arayüzü tam olarak bunu hissettirmeli:

• Kullanıcı ne aradığını bildiğinde yolunu buluyor.
• Ne aradığını bilmediğinde, doğru soruları sormasına yardımcı olan bir çevre var.
• Ama her an, her yerde, her bilgiyle donanmış değil.

Ürününüzün kullanıcılar tarafından nasıl kullanıldığını, nerelere tıkladıklarını ve ürün kullanırkenki deneyim ve ruh hallerini ölçmelisiniz.

Çünkü bilgiyi göstermek kolaydır; bilgiyi ne zaman göstermeyeceğini bilmek ise sanattır.

Kaynaklar:

• https://mikeackerman.art/project/ghost-of-tsushima-ui
• https://www.lightningux.design/blog/design-is-a-huge-differentiator-in-the-age-of-ai
• https://www.and.digital/spotlight/designing-complex-desktop-interfaces
• https://www.seattlemet.com/news-and-city-life/2022/08/origin-story-of-clippy-the-microsoft-office-assistant