Aşamalı Açıklama Denetimleri

Not

Bu tasarım kılavuzu Windows 7 için oluşturulmuştur ve Windows'un daha yeni sürümleri için güncelleştirilmemiştir. Kılavuzun çoğu ilke olarak hala geçerlidir, ancak sunu ve örnekler geçerli tasarım kılavuzumuzu yansıtmaz.

Aşamalı bir açıklama denetimiyle, kullanıcılar veriler, seçenekler veya komutlar dahil olmak üzere ek bilgileri gösterebilir veya gizleyebilir. Aşamalı açıklama, temel bilgilere odaklanarak basitliği teşvik eder, ancak gerektiğinde ek ayrıntıları ortaya çıkartır.

aşamalı açıklama denetimlerinin

Aşamalı açıklama denetimleri örnekleri.

Not

düzen, menüleri ve araç çubukları ile ilgili yönergeler ayrı makalelerde sunulmuştur.

Doğru kontrol bu mu?

Karar vermek için şu soruları göz önünde bulundurun:

• Kullanıcıların tüm senaryolarda değil de bazı senaryolarda bilgileri görmesi gerekiyor mu? Bu durumda, aşamalı açıklama kullanarak bilgilerin görüntülenmesi temel deneyimi basitleştirir, ancak kullanıcıların bilgilere kolayca erişmesine olanak tanır.

  Windows Güvenliği uygulama durumu görüntülemeekran görüntüsü

  Bu örnekte, Windows Güvenliği uygulaması önemli güvenlik durumunu her zaman görüntüler, ancak ayrıntıları isteğe bağlı olarak görüntülemek için aşamalı açıklamayı kullanır.

• Bilgiler varsayılan olarak görüntüleniyorsa, kullanıcıların bunları gizlemeyi seçme olasılığı var mı? Kullanıcıların daha fazla alana ihtiyaç duyacağı senaryolar var mı? Kullanıcılar kullanıcı arabirimini (UI) özelleştirmek için yeterli motivasyona sahip mi? Aksi takdirde, aşamalı açıklama kullanmadan bilgileri görüntüleyin.

  yanlış :

  Varsayılan olarak görüntülenen veri seçeneklerinin ekran görüntüsünü

  Bu örnekte kullanıcılar bilgileri gizlemeye motive olmayacaktır.

• Ek bilgiler gelişmiş, önemli, karmaşık mı yoksa bağımsız bir alt görevle mi ilgili? Bu durumda, aşamalı bir açıklama denetimi kullanmak yerine komut düğmeleri veya bağlantıları kullanarak bilgileri ayrı bir pencerede görüntülemeyi göz önünde bulundurun. (Ek bilgiler ileri düzey kullanıcılara yönelikse gelişmiştir. Diğer bilgilerin okunmasını veya düzenlenmesini zorlaştırıyorsa karmaşıktır.)

  Bu dosyayı çalıştırmak istediğiniz

  Bu örnekte, yazılımın adı ve yayımcısı hakkındaki bilgiler öncelikli olarak ileri düzey kullanıcılar için anlamlıdır, bu nedenle ayrı pencerelere bağlantılar kullanılır.

• Ek bilgiler, bir öğenin ne yaptığını veya nasıl kullanılabileceğini açıklayan bir tümce veya tümce parçası mı? Öyleyse, araç ipucu veya bilgi ipucu kullanmayı göz önünde bulundurun.

• Ek bilgiler geçerli görevle ilgili ancak şu anda görüntülenen bilgilerden bağımsız mı? Öyleyse, bunun yerine sekmeleri kullanmayı göz önünde bulundurun. Ancak daraltılabilir listeler genellikle sekmelere tercih edilir çünkü bunlar daha esnek ve ölçeklenebilirdir.

• Ek bilgileri göstermek veya gizlemek temelde bir veri filtresi mi? Bu durumda, filtreyi listenin tamamına uygulamak için açılan liste veya onay kutuları kullanmayı göz önünde bulundurun.

Tasarım kavramları

Aşamalı açıklamanın hedefleri şunlardır:

• Temel bilgilere odaklanarak ancak gerektiğinde ek ayrıntıları ortaya çıkararak kullanıcı arabirimi basitleştirin.
• Dağınıklık algısını azaltarak kullanıcı arabiriminin görünümünü basitleştirin.

Her iki hedefe de, kullanıcıların daha fazla ayrıntı görmek için tıkladığı aşamalı açıklama denetimleri kullanılarak ulaşılabilir. Ancak, aşağıdakiler ile açık aşamalı açıklama denetimlerini kullanmadan görünümü basitleştirmenin ikinci hedefine ulaşabilirsiniz:

• Bağlamsal ayrıntıları yalnızca bağlamda gösterme. Örneğin, seçili nesne veya modla ilgili olduğunda bağlamsal komutları veya araç çubuklarını otomatik olarak gösterebilirsiniz.

• İkincil kullanıcı arabirimi için affordance'ların ağırlığını azaltma.Affordances, nesnelerin nasıl kullanıldığını öneren görsel özelliklerdir. Eğilim, kullanıcıların etkileşim kurabileceği bir kullanıcı arabirimine sahip olmaktır, ancak bu tür tüm kullanıcı arabiriminin "tıkla bana!" diye bağırmak için çizilmiş olması çok fazla görsel karışıklığa yol açar. İkincil kullanıcı arabirimi için genellikle ince bütçeleri kullanmak ve fare üzerinde tam efektler vermek daha iyidir.

  Fotoğrafları derecelendirmek için kullanılan yıldız simgelerinin

  Bu örnekte Derecelendirme alanı etkileşimlidir ancak farenin üzerine gelene kadar görüntülenmez.

• İzleme adımlarını yalnızca önkoşullar tamamlandıktan sonra gösterme. Bu yaklaşım, kullanıcıların ilk adımları güvenle atabileceği tanıdık görevlerde en iyi şekilde kullanılır.

  Kullanıcı adı ve parola metin kutularının

  Bu örnekte, kullanıcı adı ve parola sayfası başlangıçta yalnızca kullanıcı adını ve isteğe bağlı parola kutularını gösterir. Onay ve ipucu kutuları, kullanıcı parola girdikten sonra görüntülenir.

Aşamalı açıklama, URI'leri basitleştirmenin harika bir yolu olsa da şu risklere sahiptir:

• Bulunabilirlik eksikliği. Kullanıcılar, bir şeyi göremiyorlarsa, bunun olmadığını varsayabilir. Kullanıcılar, aradıklarını göremiyorlarsa üzerine gelmeyebilir veya tıklayamaz. Kullanıcıların Diğer seçenekler gibi şeylere tıklamama olasılığı her zaman vardır.
• İstikrarsızlık. Aşamalı açıklamanın beklenmesi veya en azından doğal hissetmesi gerekir. Denetimler beklenmedik bir şekilde görünür ve kaybolursa, sonuçta elde edilen kullanıcı arabirimi kararsız hissedebilir.

Aşamalı açıklama denetimleri

Aşamalı açıklama denetimleri genellikle davranışlarını açıklayan doğrudan etiketler olmadan görüntülenir, bu nedenle kullanıcıların denetimin yalnızca görsel görünümüne göre aşağıdakileri yapabilmesi gerekir:

• Denetimin aşamalı açıklama sağladığını kabul edin.
• Geçerli durumun genişletilmiş mi yoksa daraltılmış mı olduğunu belirleyin.
• Görevi gerçekleştirmek için ek bilgi, seçenek veya komut gerekip gerekmediğini belirleyin.
• İsterseniz özgün durumun nasıl geri yükleneceğini belirleyin.

Kullanıcılar yukarıdakileri deneme ve hataya göre saptasa da, bu tür denemeleri gereksiz hale getirmeye çalışmanız gerekir.

Aşamalı açıklama denetimleri, oldukça zayıf biraffordance'a sahiptir. Bu, görsel özelliklerinin nasıl kullanıldıklarını (zayıf da olsa) önerdiği anlamına gelir. Aşağıdaki tabloda, yaygın aşamalı açıklama denetimlerinin görünümü karşılaştırmaktadır:

Kontrol	Amaç	Görünüş	Karakter işareti
Köşeli Çift Ayraç Sol/sağ ve yukarı/aşağı köşeli çift ayraç	Tümünü göster: Kalan öğeleri tamamen veya kısmen gizli içerikte gösterin veya gizleyin. Öğeler yerinde (tek bir köşeli çift ayraç kullanılarak) veya açılır menüde (çift köşeli çift ayraç kullanılarak) gösterilir.	Köşeli çift ayraçlar eylemin gerçekleşeceği yöne işaret eder.	Gelecekteki durum
Oklar sol/sağ ve yukarı/aşağı okların ekran görüntüsünü	Seçenekleri göster: Açılır komut menüsünü göster'i seçin.	Oklar eylemin gerçekleşeceği yönü gösterir.	Gelecekteki durum
artı ve eksi denetimlerini	kapsayıcıları genişletme : Hiyerarşide gezinirken kapsayıcı içeriğini genişletme veya daraltma.	Artı ve eksi simgeleri işaret etmese de eylem her zaman sağlarında gerçekleşir.	Gelecekteki durum
Dönen üçgenler ekran görüntüsü	Ayrıntıları göster: Tek bir öğe için ek bilgileri gösterme veya gizleme. Kapsayıcıları genişletmek için de kullanılırlar.	Dönen üçgenler dönen kollara benzer, bu nedenle eylemin gerçekleştiği yönü gösterirler.	Mevcut durum

Tek bir şey yaparsanız...

Kullanıcılar, aşamalı bir açıklama denetiminin davranışını yalnızca inceleme yoluyla doğru tahmin edebilmelidir. Bunu başarmak için uygun kullanım desenlerini seçin ve görünümlerini, konumlarını ve davranışlarını tutarlı bir şekilde uygulayın.

Kullanım desenleri

Aşamalı açıklama denetimlerinin çeşitli kullanım desenleri vardır. Bunlardan bazıları ortak denetimler halinde yerleşiktir.

Köşeli çift ayraçlar

Köşeli çift ayraçlar, kalan öğeleri tamamen veya kısmen gizli içerikte gösterir veya gizler. Öğeler genellikle yerinde gösterilir, ancak bir açılır menüde de gösterilebilir. Öğe yerleştirildiğinde, kullanıcı daraltana kadar genişletilmiş olarak kalır.

Köşeli çift ayraçlar aşağıdaki şekillerde kullanılır:

Kullanım	Örnek
Yerinde kullanıcı arabirimi ilişkili nesne giriş odağını alır ve tek köşeli çift ayraç boşluk çubuğuyla etkinleştirilir.	Windows Güvenliği uygulama durumu görüntülemeekran görüntüsü Bu örneklerde, yerinde tek köşeli çift ayraçlar ilişkili denetimlerinin sağında konumlandırılır.
Dış etiketler komut düğmelerini komut düğmesi giriş odağını alır ve tek köşeli çift ayraç boşluk çubuğuyla etkinleştirilir.	'Diğer seçenekler' etiketli köşeli çift ayraç Bu örnekte, tek köşeli çift ayraç düğmesi etiketlenmiştir ve etiketin soluna konumlandırılır. Bu desenle, etiketi olmadan düğmeyi anlamak zor olacaktır.
İç etiketler komut düğmeleri komut düğmesi giriş odağını alır ve boşluk çubuğuyla etkinleştirilir.	'daha fazla' ve 'daha az' komut düğmelerinin ekran görüntüsünü Bu örneklerde, normal komut düğmelerinde anlamlarını ifade etmek için çift köşeli çift ayraç bulunur.

Ok

Oklarda bir açılır komut menüsü gösterilir. Kullanıcı bir seçim yapana veya herhangi bir yere tıklayana kadar öğe genişletilmiş olarak kalır.

Ok düğmesi bağımsız bir denetimse, giriş odağını alır ve boşluk çubuğuyla etkinleştirilir. Ok düğmesinin üst denetimi varsa, üst öğe giriş odağını alır ve açılan liste denetiminde olduğu gibi Alt+aşağı ok ve Alt+yukarı ok tuşlarıyla ok etkinleştirilir.

Oklar aşağıdaki yollarla kullanılır:

Kullanım	Örnek
ayrı düğmeler ok ayrı bir düğme denetimindedir.	Denetimlerin sağındaki okların ekran görüntüsünü Bu örneklerde, sağa yerleştirilmiş ayrı ok düğmeleri bir komut menüsünü gösterir.
Komut düğmeleri ok, komut düğmesinin bir parçasıdır.	Bu örneklerde, menü düğmeleri ve bölünmüş düğmeler metnin sağında bulunan oklara sahiptir.

Artı ve eksi denetimleri

Artı ve eksi denetimleri, hiyerarşide gezinirken kapsayıcı içeriğini yerinde göstermek için genişletilir veya daraltılır. Kullanıcı daraltana kadar öğe genişletilmiş olarak kalır. Bunlar düğmeler gibi görünse de, davranışları yerindedir.

İlişkili nesne giriş odağını alır. Artı, sağ ok tuşuyla, eksi ise sol ok tuşuyla etkinleştirilir.

Artı ve eksi denetimleri aşağıdaki yollarla kullanılır:

Kullanım	Örnek
Daraltılabilir ağaçlar kapsayıcı içeriğini göstermek için çok düzeyli bir hiyerarşi.	Bu örnekte, artı ve eksi denetimleri ilişkili kapsayıcının solunda konumlandırılır.
daraltılabilir listeleri kapsayıcı içeriğini göstermek için iki düzeyli bir hiyerarşi.	Bu örnekte, artı ve eksi denetimleri ilişkili liste üst bilgisinin soluna konumlandırılır.

Dönen üçgenler

Dönen üçgenler, tek bir öğe için ek bilgileri gösterir veya gizler. Kapsayıcıları genişletmek için de kullanılırlar. Kullanıcı daraltana kadar öğe genişletilmiş olarak kalır.

İlişkili nesne giriş odağını alır. Daraltılmış (sağ işaret eden) üçgen sağ ok tuşuyla, genişletilmiş (aşağı dönük) üçgen ise sol ok tuşuyla etkinleştirilir.

Dönen üçgenler aşağıdaki yollarla kullanılır:

Kullanım	Örnek
Daraltılabilir ağaçlar kapsayıcı içeriğini göstermek için çok düzeyli bir hiyerarşi.	Windows Gezgini klasör ağacıekran görüntüsü Bu örnekte, dönen üçgenler ilişkili kapsayıcının soluna konumlandırılır.
daraltılabilir listeleri ek bilgileri yerinde göstermek için iki düzeyli hiyerarşi.	Ek veriekran görüntüsü Bu örnekte, dönen üçgenler ilişkili liste öğelerinin soluna konumlandırılır.

Önizleme okları

Köşeli çift ayraçlar gibi ek bilgiler de gösterilir veya gizlenir. Kullanıcı daraltana kadar öğe genişletilmiş olarak kalır. Köşeli çift ayraçlardan farklı olarak, karakterlerin eylemin grafiksel bir gösterimi vardır ve genellikle ne olacağını gösteren bir ok vardır.

Çaprazekran görüntüsü

Microsoft Windows Media Player'daki bu örneklerde, gliflerde gerçekleşecek eylemi öneren oklar bulunur.

Önizleme okları, standart köşeli çift ayraçların, açıklamanın karmaşık olması veya birden fazla açıklama türü olması gibi denetimin davranışını yeterince iletmediği durumlar için en iyi şekilde ayrılmıştır.

Yönerge -leri

Genel

• Kullanımına göre aşamalı açıklama desenini seçin. Her kullanım deseninin açıklaması için önceki tabloya bakın.

• Aşamalı açıklama denetimleri için bağlantıları kullanmayın. Yalnızca Kullanım desenleri bölümünde sunulan aşamalı açıklama denetimlerini kullanın. Ancak, Yardım konularına gitmek için bağlantıları kullanın.

  Doğru:

  'Show mixer' etiketli köşeli çift ayraç

  yanlış :

  'Show mixer' bağlantı metninin

  Yanlış örnekte, daha fazla seçeneğin yerinde gösterilmesi için bir bağlantı kullanılır. Bağlantı başka bir sayfaya veya iletişim kutusuna giderse veya bir Yardım konusu görüntülediyse bu kullanım doğru olacaktır.

Etkileşim

• Doğrudan etiketlenmemiş köşeli çift ayraçlar ve oklar için, ne yaptıklarını açıklamak için araç ipuçlarını kullanın.

  'Sorgu oluşturucusunu genişlet' araç ipucunun ekran görüntüsü

  Bu örnekte araç ipucu etiketsiz köşeli çift ayraç denetiminin etkisini gösterir.

• Kullanıcı bir öğeyi genişletirse veya daraltırsa, kullanıcıların varsayılan durumdan başlamayı tercih etme olasılığı olmadığı sürece, pencereninbir sonraki görüntülendiğinde geçerli olması için durumun kalıcı olmasını sağlayın. Durumu pencere başına, kullanıcı başına kalıcı hale getirin.

• Tüm genişletilmiş içeriğin daraltılabildiğinden ve ters işlemin açıkça göründüğünden emin olun. Bunu yapmak araştırmayı teşvik eder ve hayal kırıklığını azaltır. Ters işlemi belirgin hale getirmenin en iyi yolu, denetimi aynı sabit konumda tutmaktır. Denetimi taşımanız gerekiyorsa, görsel olarak ayrı bir alan içinde aynı göreli konumda tutun.

  yanlış :

  Köşeli çift ayraç

  Köşeli çift ayraç

  Bu örnekte, Köşeli çift ayraçla Değiştir düğmesine tıklanması, Değiştir metin kutusunu gösterir. Bu işlem tamamlandıktan sonra Değiştir genişleticisi Değiştir komutuna dönüşür, bu nedenle özgün durumu geri yüklemenin hiçbir yolu yoktur.

• Kullanım desenleri bölümünde listelendiği gibiyalnızca aşamalı açıklama deseni için uygun erişim anahtarlarını kullanın. Aşamalı açıklamayı etkinleştirmek için Enter kullanmayın.

Sunum

• Üçgen şekilli ok uçlarını aşamalı açıklama dışında bir amaç için kullanmayın.

  yanlış :

  Sağ üçgenekran görüntüsü

  Bu örnek aşamalı bir açıklama deseni olmasa da, buradaki bir oku kullanmak komutların bir açılır pencerede gösterileceğini gösterir.

  Doğru:

  kalan madde işaretli etiketin ekran görüntüsü

  Bu örnekte, bunun yerine bir madde işareti doğru şekilde kullanılmıştır.

• Geçerli bağlamda geçerli olmayan aşamalı açıklama denetimlerini kaldırın (devre dışı bırakma). Aşamalı açıklama denetimleri her zaman sözlerini yerine getirmelidir, bu nedenle daha fazla bilgi olmadığında bunları kaldırın.

  yanlış :

  Soluk bir 'diğer seçenekler' denetiminin ekran görüntüsünü

  Bu örnekte, uygulanmayan aşamalı bir açıklama denetimi yanlış devre dışı bırakılmıştır.

Köşeli çift ayraçlar

• Yerinde göstermek veya gizlemek için tek köşeli çift ayraç kullanın. Açılır menü kullanarak göstermek veya gizlemek için çift köşeli çift ayraç kullanın. Bununla birlikte, komut düğmeleri için her zaman iç etiketlerle çift köşeli çift köşeli çift ayraç kullanmalısınız.

  Doğru:

  Tek köşeli çift ayraç daha fazla seçenek denetimi

  yanlış :

  çift köşeli çift ayraç diğer seçeneklerin denetim

  Yanlış örnekte, yerinde aşamalı açıklama için çift köşeli çift köşeli çift ayraç kullanılır.

  Doğru:

  çift köşeli çift köşeli çift ayraç daha fazla komut düğmesinin ekran görüntüsünü

  Bu örnekte, dahili etiketli bir komut düğmesi olduğundan yerinde aşamalı açıklama için çift köşeli çift ayraç kullanılır.

• Köşeli çift ayraç ile ilişkili denetimi arasında görsel bir ilişki sağlayın. Yerinde köşeli çift ayraçlar ilişkili kullanıcı arabiriminin sağında yerleştirildiğinden ve sağa hizalandığından, köşeli çift ayraç ile ilişkili denetimi arasında oldukça uzaklık olabilir.

  Doğru:

  arkasında dereceli gölgelendirmenin ekran görüntüsü

  Bu örnekte, yerinde köşeli çift ayraç ile ilişkili kullanıcı arabirimi arasında net bir ilişki vardır.

  yanlış :

  Denetimlerekran görüntüsü

  Bu örnekte, yerinde köşeli çift ayraç ile ilişkili kullanıcı arabirimi arasında net bir görsel ilişki yoktur, bu nedenle boşlukta kayan gibi görünür.

Ok

• Geri, İleri, Git veya Oynat ile karıştırılabilir ok grafiklerini kullanmayın. Nötr arka planlarda basit üçgen şeklindeki ok başlarını (sapsız oklar) kullanın.

  Doğru:

  

  Bu oklar açıkça aşamalı açıklama denetimleridir.

  Yanlış (aşamalı açıklama için):

  ekran görüntüsü

  Bu oklar aşamalı açıklama denetimleri gibi görünmüyor.

  Yanlış (Geri, İleri için):

  Siyah üçgenekran görüntüsü

  Bu oklar aşamalı açıklama denetimleri gibi görünür, ancak değildir.

Önerilen boyutlandırma ve aralık

Önerilen boyutlandırma ve aralıkekran görüntüsü

Aşamalı açıklama denetimleri için önerilen boyutlandırma ve aralık.

Etiket

• Dış etiketli bir komut düğmesindeki köşeli çift ayraçlar için:
  • benzersiz birerişim anahtarı atayın. Yönergeler için bkz. klavye .
  • cümle stili büyük harf kullanımını kullanın.
  • Etiketi tümcecik olarak yazın ve bitiş noktalama işaretleri kullanmayın.
  • Düğmeye tıklamanın etkisini açıklamak için etiketi yazın ve durum değiştiğinde etiketi değiştirin.
  • Yüzey her zaman bazı seçenekler, komutlar veya ayrıntılar görüntülerse aşağıdaki etiket çiftlerini kullanın:
    • Daha fazla/daha az seçenek. Seçenekler veya seçenekler, komutlar ve ayrıntılar karışımı için kullanın.
    • Daha fazla/daha az komut. Yalnızca komutlar için kullanın.
    • Daha fazla/daha az ayrıntı. Yalnızca bilgi için kullanın.
    • daha fazla/daha az <nesne adı>. Klasörler gibi diğer nesne türleri için kullanın.
  • Yoksa:
    • Seçenekleri göster/gizle. Seçenekler veya seçenekler, komutlar ve ayrıntılar karışımı için kullanın.
    • Komutları göster/gizle. Yalnızca komutlar için kullanın.
    • Ayrıntıları göster/gizle. Yalnızca bilgi için kullanın.
    • > <nesne adını göster/gizle. Klasörler gibi diğer nesne türleri için kullanın.
• İç etiketli bir komut düğmesindeki köşeli çift ayraçlar için standart komut düğmesini yönergeleri izleyin.

Belge

Aşamalı açıklama denetimlerine başvururken:

• Denetimin sabit bir etiketi varsa, denetime yalnızca etiketiyle başvurun; denetimi açıklamaya çalışmayın. Büyük harf kullanımı dahil olmak üzere tam etiket metnini kullanın, ancak erişim anahtarı alt çizgisini eklemeyin.

• Denetimin etiketi yoksa veya sabit değilse, denetime türüne göre bakın: köşeli çift ayraç, ok, üçgen veya artı/eksi düğmesi. Gerekirse, denetimin konumunu da açıklayın. Denetim, sayfa alanı denetimi gibi dinamik olarak görünüyorsa, denetimin nasıl görüneceğini açıklayarak başvuruyu başlatın.

  Örnek: Bir klasör içindeki dosyaları görüntülemek için, işaretçiyi klasör adının başlangıcına taşıyın ve klasörün yanındaki üçgene tıklayın.

• Düğme olmayan diğer aşamalı açıklama denetimleriyle karşıtlık oluşturmadığınız sürece denetime düğme olarak başvurmayın.

• Kullanıcı etkileşimlerini açıklamak için tıklamayı kullanın. Netlik için gerekirse tıklamayı kullanın... öğesini seçin.

• Mümkün olduğunda, kalın metin kullanarak etiketi biçimlendirin. Aksi takdirde, etiketi yalnızca karışıklığı önlemek için gerekiyorsa tırnak içine koyun.

Örnekler:

• (Köşeli çift ayraç için) Dosya boyutunu belirlemek için Ayrıntılaröğesine tıklayın.
• (Ok için) Tüm seçenekleri görmek için Ara kutusunun yanındaki oka tıklayın.
• (Artı/eksi için) Resminizi görüntülemek için resimler tıklayın.