M.AIM.AISoloLabsUI Sözlüğü · Geri bildirim

← UI Sözlüğü

İpucu balonu tooltip

bilinen diğer adları tooltip · ipucu · açıklama balonu

Böyle diyorsan: "üzerine gelince çıkan yazı" · "soru işaretine basınca çıkan açıklama" → bunun adı i̇pucu balonu.

Bir öğenin üzerine gelince beliren mini açıklama balonu.

İpucu balonu, bir öğenin üstüne gelince beliren kısa açıklamadır. En yanıltıcı parçalardan biridir çünkü ucuz görünür ama üç ayrı kullanıcıyı birden dışlama riski taşır: dokunmatik kullanıcısında 'üstüne gelme' diye bir şey yoktur, klavye kullanıcısında odakla da açılmalıdır, ekran okuyucu kullanıcısında ise balon tetiğe bağlanmadıysa hiç var olmaz. Bu yüzden altın kural şudur: ipucu balonuna ZORUNLU bilgi konmaz. İçindeki bilgi olmadan öğe anlaşılmıyorsa, o bilgi zaten ekranda görünür olmalıdır — ipucu ancak yardımcı bir ayrıntı için doğru yerdir.

Kapsam: Bu madde küçük, salt açıklama balonunu kapsar. İçinde bağlantı ya da buton olan, tıklanarak açılan zengin katmanlar farklı bir parçadır (popover) ve farklı kurallara tabidir; bir alanın kalıcı açıklaması ise Form Alanı'nın yardım satırıdır.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Komisyon oranıSatış başına kesilen pay?
%10
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Komisyon alanına tooltip ekle: ? ikonuna hover'da, klavye odagında ve dokunmada açılan balon ('Satış başına kesilen pay'); aria-describedby ile bağlı; ekran kenarında taşacaksa yön değiştirsin; kısa gecikmeyle açılsın (300ms), imleç balona giderken kapanmasın; kritik bilgileri tooltip'e saklama.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Tooltip'im huysuz; klasikleri sırayla ele: (1) yalnız hover'da açılıyor — dokunmatikte bu bilgiye ULAŞILAMIYOR; (2) klavye odağında açılmıyor (erişilebilirlik); (3) ekran kenarında balon taşıyor, yön çevirme yok; (4) fiyat gibi KRİTİK bilgi tooltip'e saklanmış — görmeden karar veriliyor; (5) imleç balona giderken balon kapanıyor (köprü boşluğu). Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Tetik? ikonu / öğe

    Balonu çağıran şey; hover VE focus VE dokunma ile açılmalı — yalnız hover mobili dışlar.

  • 2Balonaria-describedby

    Kısa açıklama kutusu; tetiğe bu ID ile bağlanır, okuyucu odaklanınca okur.

  • 3Ok/çıpakonum bağı

    Balonun hangi öğeye ait olduğunu gösteren sivri uç; kenarda taşarsa balon YÖN değiştirir.

  • 4İçerik sınırıyardımcı bilgi

    Tooltip'e yalnız TAMAMLAYICI bilgi konur; kritik bilgi (fiyat, zorunlu kural) açıkta durmalı.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • AGizlivarsayılan

    Balon yok ama tetiğin kendisi anlaşılır olmalı. İkonun anlamı yalnız ipucunda yazıyorsa, ikon anlaşılmıyor demektir.

  • BHover ile açık:hover + gecikme

    Fare üstünde. Küçük bir gecikme koy; her geçişte açılan balonlar imleç gezdikçe ekranı yanıp söndürür.

  • COdakla açık:focus-visible

    Klavyeyle gelindi. Yalnız hover ile açılan ipucu, klavye kullanıcısı için hiç yoktur.

  • DDokunmatikhover YOK

    Parmakla üstüne gelinemez. Dokunmatikte ya uzun basmayla açılır ya da bilgi kalıcı olarak görünür yapılır — çoğu ipucu bu kullanıcıyı sessizce dışlar.

  • EKapanıyorEscape ile de

    Escape balonu kapatabilmeli ve balon üzerine fareyle gidilebilmeli (WCAG 1.4.13); imleç balona ulaşamadan kaybolan ipucu okunamaz.

KODDAKİ ADLARI
ARIAaria-describedbytetik-balon bağı
HTMLpopover / title sınırlarınative seçenekler
UXhover+focus+touch üçlüsükimseyi dışlama
ERİŞİLEBİLİRLİK & SIK HATA
  • Balonu tetiğe aria-describedby ile bağla. Bağlanmayan balon ekran okuyucu için hiç var olmaz; görsel olarak duruyor olması bir şey ifade etmez.
  • Hover'a ek olarak ODAKLA da aç. Yalnız fareyle açılan ipucu, klavye kullanıcısını doğrudan dışlar.
  • WCAG 1.4.13'ün üç şartını karşıla: balon Escape ile kapanabilmeli, imleç balonun üstüne gidebilmeli (kaybolmadan) ve kullanıcı kaldırana kadar açık kalabilmeli.
  • Zorunlu bilgiyi ipucuna koyma. Dokunmatik kullanıcısı çoğu zaman o balonu hiç göremez; kritik bilgi ekranda kalıcı olmalıdır.
  • title özniteliğine güvenme: gecikmesi kontrol edilemez, dokunmatikte çalışmaz ve mobilde çoğu tarayıcıda hiç görünmez.
SIK KARIŞTIRILANLAR

Yardım satırından farkı. İpucu balonu GİZLİDİR ve arayana görünür; yardım satırı KALICIDIR ve herkese görünür. Bir alanın nasıl doldurulacağı bilgisi yardım satırına yazılır, çünkü kullanıcı o bilgiyi aramak zorunda kalmamalıdır. İpucu, ancak 'bilmesen de olur' türü ayrıntılar için doğrudur.

Form alanı sayfasına git →

Açılır menüden farkı. İpucu balonu yalnız AÇIKLAR ve içinde tıklanacak bir şey bulunmaz; açılır menü ise EYLEM sunar ve odak alır. İçine buton ya da link koyduğun anda o şey artık ipucu değildir: klavyeyle ulaşılabilir olmalı, odak yönetimi gerektirir ve hover ile açılıp kapanması kullanıcıyı kovalamacaya sokar.

Açılır menü sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Form alanı form fieldAçılır menü dropdownKip pencere modal / dialogRozet badge

AYNI AİLEDE · GERI BILDIRIM