Power User'lar İçin Tasarım

Her düğmeye tıklayan kullanıcı çoktan gitti. Ürününün içinde yaşayan ise onu günde yirmi kez açıyor ve senin belki de hiç tasarlamadığın gizli bir arayüzü ezberlemiş durumda. Başka bir ürünün gizli arayüzü daha iyiyse uzman gider, ve parayı ödeyen kitle de uzmandır.

Mainstream UX ilk açılıştan ve aktivasyondan söz eder. Uzman bunların hiçbirini görmez. Ürünü sekiz yüzüncü kez açtı, Cmd-K'ye bastı ve ya işi uçarak bitirdi ya da paletin beş alakasız sonuç döndürmesine sinirlenip bıraktı. Power user UX ikinci üründür ve çoğu ekip henüz birini yayına almadı.

Görünen ürünün arkasındaki gizli ürün

Her harika ürünün içinde iki ürün vardır. Yeni kullanıcı için görünen ürün, zaten bilen kullanıcı için gizli ürün.

Görünen ürün düğmeler, menüler, tooltip'ler ve turlardır. Gizli ürün ise tuş vuruşları, komut paletleri, kayıtlı görünümler, çoklu seçim ve rotayla adreslenebilir durumdur. Birincisi ilk oturumu anlaşılır kılar. İkincisi sonraki bin oturumu hızlı kılar.

Linear ikisini de bilerek yayınlıyor. Yeni kullanıcı net bir ana eylemi olan temiz bir gelen kutusu görür. Uzman g ardından i ile gelen kutusuna atlar, c ile issue oluşturur, shift-click ile çoklu seçim yapar ve her kayıtlı görünüm paylaşılabilir bir URL'dir. Aynı ürün. İki ürün. İkisi de tasarlanmış.

Power user'lar kaybetmeyi göze alamayacağın kitle

İlk kez gelen kullanıcı gürültülü, uzman sessiz; bu yüzden çoğu ekip gürültülü olana göre optimize eder. Power user'lar ürünü ayda daha fazla gün açar, koltuk başına daha fazla gelir üretir ve diğer tüm kitlelerin toplamından daha fazla yeni kullanıcı getirir. Aynı zamanda en gürültülü şekilde giderler, çünkü rakip üç üründe hızın nasıl hissettirdiğini bilirler.

Çözüm "kısayol ekle" değil. Çözüm, power user yüzeyini kendi tasarım bütçesi ve yol haritası olan birinci sınıf bir ürün olarak ele almak.

Power user UX'in beş katmanı

Power user UX tek bir özellik değil. Birbirini katlayan beş katman. Çoğu ürün bir ya da ikisini yayınlar. En iyiler beşini birden yayınlar ve katmanlar birbirini güçlendirir.

1. Komut paleti

Cmd-K paleti birleşik ara-ve-yap yüzeyidir. Tek bir tuş vuruşu üründeki her eylemi, rotayı ve nesneyi yakınlık ve sıklığa göre sıralayarak çağırır. Linear'ın paleti çıta. Raycast aynı yapı taşının etrafına koca bir işletim sistemi katmanı kurdu. Notion, Vercel, GitHub ve Slack'in hepsi kendi paletini yayınlıyor.

Gerçek bir palet içerik ve eylemleri aynı girdide arar, her sonucun yanında tuş ipuçlarını gösterir ve argümanları satır içinde kabul eder. "Move issue to in progress" dört tıklık bir zincir yerine tek bir komut olarak çalışır. Başarısızlık modu sadece arama yapan palettir: doküman bulup eylem tetikleyemeyen kutu, hayalleri olan bir arama çubuğudur. Cmd-K'nin amacı bul-ve-yap. Boş durumlar üründür yazısı paletin varsayılan durumunun neden önemli olduğunu anlatıyor.

2. Birinci sınıf bir sistem olarak klavye kısayolları

Kısayollar bir yardım modalının içine gizlenmiş bağlama listesi değildir. Keşfedilebilirliği, tutarlılığı ve kademeli derinliği olan bir sistemdir. Superhuman altın standart. Her eylemin bir tuşu var, kopya kâğıdı ürünün içinde geliyor ve onboarding fareden önce klavyeyi öğretiyor.

Linear ölçeklenen bir harf çifti sistemi işletiyor. İlk harf yüzeyi (g, go için), ikinci harf hedefi (i inbox, p project, m my issues) adlandırır. Kullanıcı tek bir kural öğrenir ve elli kısayolun kilidini açar. Notion komut için slash, palet için Cmd-K sunar. Figma tek harfli araçlar sunar (V move, R rectangle, F frame, T text). Gmail'in klavye kısayolları yirmi yıl sonra hâlâ e-posta için altın standart.

Ürün sistemin kendisi. Tek seferlik kısayollar yığını sistem değil, ekibin silmeyi unuttuğu bir backlog.

3. Kayıtlı görünümler, filtreler, yer imleri

Uzman ürünü kendi iş akışının etrafında kurar. Linear'ın kayıtlı görünümleri kenar çubuğunda durur, çıkış yapınca kaybolmaz, URL ile paylaşılır ve canlı güncellenir. Notion'ın filtrelenmiş veritabanı görünümleri içerik için aynısını yapar. Stripe'ın kayıtlı aramaları anomalileri yakalayan tam filtreyi saklar. Vercel ekip ve projeyi yer imi başına sabitler, böylece doğru dashboard bir tuş vuruşu uzaklıkta.

Pazarlık konusu olmayan şey: kayıtlı durum adreslenebilir olmalı. Her kayıtlı görünümün çıkışı, cihaz değişimini ve bir takım arkadaşına paylaşımı atlatan bir URL'si olmalı. Sadece localStorage'da yaşayan durum, kullanıcı ürünü başka bir laptopta açtığı an kaybolur.

4. Toplu işlemler

Uzman günde yüz nesneye dokunur. Ürün ya bunu destekler ya da onu cezalandırır. Linear'ın shift-click ile çoklu seçimi ve ardından B ile toplu güncelleme kanonik. Notion'ın veritabanlarındaki çoklu seçimi, otuz satırda durumu, atananı ve etiketleri tek hamlede değiştirmene izin verir. Gmail'in kısayolları artı shift-J, gelen kutusunun ölçekte katlanılabilir olmasının sebebi.

Toplu işlemlerin üç özelliği olmalı. Seçim belirgin olmalı. Eyleme klavyeden ulaşılabilmeli. Geri alma gerçek olmalı. Sağ tık menüsünün arkasındaki toplu işlemi kullanmazsın, tek tuşluk geri alması olmayan toplu işlem de ilk ters gittiğinde güveni yıkar.

5. Sadece power kullanıcıya özel yüzeyler

Bazı yüzeyler yalnızca uzman için vardır. Figma API konsolu, Raycast uzantı kütüphanesi, Notion veritabanı yönetici görünümü, Vercel CLI, Cron ve Notion Calendar'ın sadece klavyeyle çalışan zaman bloğu katmanı. Bunlar uzmanın içinde yaşadığı derinlik katmanı.

Raycast en temiz örnek. Temel ürün bir komut paleti. Uzman, paleti kişisel bir işletim sistemi katmanına çeviren uzantılar ve özel script'ler kurar. Notion'ın veritabanları da aynı biçimde: yeni başlayan bir liste görür, uzman rollup'lar ve formüllerle ilişkisel bir veri modeli görür.

Örüntü kademeli derinlik. Kademeli ifşa ilkesi taşıyıcı fikir: derinlik bir tuş vuruşu uzaklıkta yaşar, ana ekranda değil.

Komut paletinin içi

Cmd-K paleti en önemli power user yüzeyi ve çoğu ekip zayıf bir tane yayınlıyor. Beş öğe, güçlü paletleri kostüm giymiş arama çubuklarından ayırır.

Harika bir palet sonuçları yakınlık ve sıklığa göre sıralar, her sonucun yanında tuş ipucu gösterir, argümanları satır içinde kabul eder, bağlama göre kapsam daraltır ve tek bir Esc ile kapanır. Linear beşini de yapıyor. Raycast beşini yapıyor ve paleti ürünün tamamına çeviriyor. Çoğu palet ikisini yapar ve kullanıcı onları görmezden gelmeyi öğrenir.

Power user UX tasarlamak için beş kural

Beş kural, gerçek bir power user yüzeyini yardım alt bilgisine atılmış kısayol listesinden ayırır. Dördünü tutturursan yüzey genelde çalışır. İkisini tutturursan uzman gider.

1. Her eylemin bir tuşu var. Kullanıcı fareyle yapabiliyorsa klavyeden de yapabilmeli.
2. Tuşları göstermeden göster. Paletteki, tooltip'lerdeki, menü satırlarındaki tuş ipuçları. Kısayol, kullanıcı fareye uzandığı anda görünür olmalı, bir ayar sayfasına gömülü olmamalı.
3. Çoklu seçim belirgin olmalı. Görünür onay kutuları ya da net bir shift-click örüntüsü. Kullanıcının var olduğunu bilmediği toplu işlem, var olmayan toplu işlemdir.
4. Kayıtlı durum adreslenebilir olmalı. URL tabanlı, kalıcı, paylaşılabilir. Sadece tarayıcıda yaşayan durum, buharlaşan durumdur.
5. Power yüzey bir tuş vuruşu uzaklıkta yaşar. Cmd-K, slash ya da tek bir harf. Uzmanın oraya gezinmesi gerekiyorsa o bir özellik sayfasıdır, power yüzey değil.

Beşten dördünü tutturan ürün uzmanın elinde canlı hisseder. İkisini tutturan ürün, üzerine birkaç klavye numarası vidalanmış bir web sitesi gibi hisseder.

Ekibin uzmanı unuttuğunu gösteren anti-örüntüler

Beş örüntü, power user yüzeylerini her şeyden fazla öldürür.

Tarayıcıyla çakışan kısayollar. Bir web uygulamasında yeniden bağlanan Ctrl-W ya da Ctrl-T sekmeyi kapatır ve kullanıcı kaydedilmemiş işini kaybeder. Bunun yerine Cmd-K içinde ad alanı kullan.

Üç tık derindeki yardım modalında belgelenen kısayollar. Settings, Help, Keyboard Shortcuts arkasındaki kopya kâğıdını kullanıcı asla görmez. Tuşları eylem anında göster. Superhuman kopya kâğıdını birinci sınıf bir ekran olarak yayınlıyor. Çoğu ürün, kimsenin tıklamamasını umduğu bir alt bilgi linki olarak yayınlıyor.

Sağ tık gerektiren çoklu seçim. Bağlam menüsünün içindeki toplu işlem changelog için vardır, kullanıcı için değil.

Temel kısayollarda Pro katman duvarı. Bazı ürünler klavye kısayollarını, paletleri ya da kayıtlı görünümleri "Pro" planın arkasına kilitler. Kısayol özellik değil, özelliğin kullanılma biçimidir. Onu kilitlemek ürünün kendisini kilitlemektir.

Çıkışı atlatamayan kayıtlı görünümler. Sadece localStorage'da yaşayan filtre, kullanıcı ürünü başka cihazda açtığında kendini siler. Sunucuda kalıcı kıl, kullanıcıya bağla, URL taşısın.

Power user denetimi

Herhangi bir ürünü bu yedi sorudan geçir. İkisi ya da fazlasında kalırsa, çeyrek bitmeden uzman başka birinin ürününde olur.

1. Her ana eylemin klavye kısayolu var mı? En çok kullanılan yirmi eylemi listele ve kontrol et. Üçten fazlası fare gerektiriyorsa klavye katmanı eksik.
2. Arayan ve eylem yapan bir Cmd-K paleti var mı? Arama çubuğu değil. Komut çalıştıran, argüman kabul eden ve kısayol ipuçlarını gösteren bir palet.
3. Kısayollar bağlam içinde keşfedilebilir mi? Tooltip'ler, palet ipuçları, menü etiketleri. Kullanıcı kısayolu doküman okuyarak değil, eylemi yaparken öğrenmeli.
4. Çoklu seçim klavyeden, net bir geri almayla çalışıyor mu? Shift-click, ardından tuşla eylem, ardından tek tuşla geri alma. Eksik herhangi bir halka zinciri kırar.
5. Kayıtlı görünümler URL ile adreslenebilir ve kalıcı mı? URL'yi kopyala, başka bir tarayıcıya yapıştır, giriş yap. Görünüm yüklenmiyorsa kayıtlı durum tiyatrodur.
6. Power yüzeyler her yerden bir tuş vuruşu uzaklıkta mı? Konsol, API yüzeyi, uzantı kütüphanesi. Uzmanın ulaşmak için gezinmesi gerekiyorsa bunlar özellik sayfasıdır, power yüzey değil.
7. Ürün klavyeyi birinci sınıf vatandaş olarak görüyor mu? Tarayıcıyla çakışan kısayol yok. Katman duvarına alınmış kısayol yok. Sadece fareyle yapılan toplu işlem yok.

Yedisini de geçen ürün uzmanı varsayılan olarak elde tutar. Üç ya da fazlasında kalan, onu Linear'a, Raycast'e ya da ikinci ürünü bilerek yayınlayan her rakibe kaybeder. Anti-dashboard aynı disiplinin yerleşim tarafını, görsel hiyerarşi yazısı ise uzmanın yoğunluğu nasıl okuduğunu anlatıyor.

Bunun ürün içindeki yeri

Power user UX, ilk açılış UX'inin karşılığıdır. Onboarding'siz onboarding yazısı ürünü hiç görmemiş kullanıcıyı ele alır. Bu yazı ürünü dokuz yüz kez görmüş kullanıcıyı ele alır. Bilerek sürtünme tasarlamak fikri burada tersine işler: yeni kullanıcı için doğru anda sürtünme ürünü öğretir. Uzman için gereksiz her sürtünme bir vergidir. Landing page tasarım ilkeleri ve web tasarım ilkeleri yazıları aynı disiplinin pazarlama sayfası ve ürün geneli versiyonlarını kapsıyor.

Gizli ürünü bilerek inşa et

Görünen ürün lansman yazısını ve demo videosunu alır. Gizli ürün yenilemeyi ve ağızdan ağıza yayılmayı alır. Linear, Raycast, Superhuman, Notion, Cron, Figma, Gmail, Vercel, Slack, GitHub, Stripe ve Cursor hep aynı özelliği paylaşıyor. Zaten bilen kullanıcı için gerçek bir ikinci ürün yayınladılar.

Çoğu ekip birinci ürünü yayınlar ve ikincisinin kazara olmasına izin verir. Uzmana pahalıya mal olan seçim bu. Klavye katmanını seç. Paleti seç. Kayıtlı görünüm sistemini seç. Toplu işlemi seç. Power yüzeyi seç. Birikimli etki, uzmanın katlandığı ürünle uzmanın müjdelediği ürün arasındaki farktır.

SSS

Power user UX nedir?

Power user UX, ürünü zaten bilen kullanıcıyı hedefleyen tasarım katmanıdır. Komut paletini, klavye katmanını, kayıtlı görünümleri ve filtreleri, toplu işlemleri ve sadece power kullanıcıya özel yüzeyleri içerir. Yeni kullanıcının buna ihtiyacı yok. Uzman onun içinde yaşar.

Her ürünün bir Cmd-K komut paleti olmalı mı?

Neredeyse her üretkenlik ürünü olmalı. Palet birleşik ara-ve-yap yüzeyi olur ve uzmana her eylemi açan tek bir tuş vuruşu verir. Linear, Raycast, Notion, Vercel, GitHub ve Slack'in hepsi bir tane yayınlıyor. Tek ana eylemi olan tüketici ürünleri atlayabilir. Çoğu B2B ve prosumer araç atlayamaz.

Tur olmadan klavye kısayolları nasıl öğretilir?

Kısayolu her seferinde eylemin yanında göster. Tooltip ipuçları, palet ipuçları, menü etiketleri. Superhuman kopya kâğıdını kullanıcının çağırabileceği birinci sınıf bir ekran olarak yayınlıyor. Linear her kısayolu palette ve menülerde gösteriyor. Kullanıcı klavyeyi işi yaparak öğrenir.

İkinci ürünü yayınla

Klavye katmanını, komut paletini ve kayıtlı durum sistemini sonda yapılan bir temizlik olarak değil, ürünün parçası olarak tasarlayan bir ekip istiyorsan Brainy'yi tut. Gizli ürünü bilerek inşa ediyoruz, böylece uzman yarın aracını açtığında dünkünden daha hızlı hisseder.