Kart, gölgesi ve kapak görseliyle tanımlanan bir kutu değil; kullanıcının tek bir seçim yaptığı birimdir. Tıklanacak alanı iç içe bağlantıyla böldüğünüzde odak dağılır, parmak yanlış eyleme iner. Bu rehber kartı tek hedef, net başlık ve sınırlı bir iç düğme istisnası olarak kurmayı anlatır.
Kart tasarımı web arayüzlerinde çoğu zaman gölge, köşe yarıçapı ve kapak görseliyle başlar. Asıl karar daha erkendir: kart bir görsel şablon değil, kullanıcının tek bir seçim yaptığı birimdir. Başlık o seçimin adıdır; tıklanacak alan da aynı seçimi taşır. İçine ikinci bir bağlantı gömülünce alan bölünür, odak dağılır ve parmak yanlış eyleme iner.
Bu rehber kartı süs kutusu gibi çizmek yerine tek hedef, net başlık ve sınırlı bir iç düğme istisnası olarak kurmayı anlatır. Amaç cümle yığmak değil; tıklanınca ne olacağını kullanıcının ilk bakışta tahmin etmesini sağlamaktır.
Kart tasarımı web’de kart neden seçim birimidir
Kart, ızgarada tekrarlanan bir yüzeydir. Blog özeti, hizmet girişi, ürün vitrini, ekip üyesi veya referans kutusu aynı işi görür: listeden bir öğeyi seçtirmek. Seçim birimi olduğu için kartın bir adı, bir vaadi ve bir varış yeri vardır. Ad başlıktır. Vaad kısa özettir. Varış yeri de tıklanınca açılan sayfadır.
Görsel şablon bu sırayı tersine çevirir. Önce gölge ve oran seçilir, sonra metin sığdırılır, en sonda her parçaya ayrı bağlantı eklenir. Sonuç bakınca kart gibi duran, tıklayınca menü gibi dağılan bir kutu olur. Kullanıcı görsele mi, başlığa mı, “devamını oku”ya mı, yoksa alttaki kategori etiketine mi basacağını çözemez.
Seçim birimi olarak kurmak üç kilidi aynı anda atar. Kartın tek bir işi vardır. İşin adı başlıkta okunur. Tıklanacak alan o işi taşır; ikinci bir adres kartın içine girmez. Bu kilitler görsel hiyerarşiyi ölçü ve konumla kurduğunuzda daha da netleşir: en büyük ve en üstteki metin, seçimin adıdır; süs değil.
İç içe bağlantı tıklanacak alanı nasıl böler
İç içe bağlantı, bir kartın zaten tıklanabilir yüzeyinin içine ikinci bir adres koymaktır. Tipik örnekler tanıdıktır. Kartın tamamı bir sayfaya giderken kategori etiketi başka bir listeye gider. Kapak görseli ürüne, başlık aynı ürüne, yazar adı profil sayfasına bağlıdır. “İncele” bir yere, fiyat başka bir yere çıkar.
Bu düzen üç ayrı zararı aynı anda üretir. Birincisi hedef çatışmasıdır: parmak kartın ortasına inince tarayıcı hangi adresi işleyeceğini kestiremez; özellikle etiket veya yazar adı ince bir şerit halinde duruyorsa yanlış tıklama artar. İkincisi klavye ve okuyucu yüküdür: aynı kart üç kez duyurulur, Tab tuşu aynı varışa üç durak yapar, odak halkası kartın içinde zıplar. Üçüncüsü geçersiz işaretlemedir: bir bağlantının içine başka bağlantı veya düğme koymak tarayıcıya ve yardımcı teknolojiye bozuk bir ağaç verir.
Bölünme yalnızca “hata” olarak görünmez. Sessizce güveni de aşındırır. Kullanıcı kartı bir seçenek sanır; basınca başka bir listenin açıldığını görünce bir sonraki kartta daha temkinli, daha yavaş ve daha az tıklar. KepezWeb işlerinde kart ızgarasını çizerken önce bu dağılmayı kapatırız; gölge ve oran ancak hedef tekildikten sonra gelir.
Aynı adrese üç bağlantı da bölünmedir
Görsel, başlık ve “devamını oku” aynı sayfaya gidiyorsa iç içe adres yok sanılır. Yine de alan bölünmüştür. Odak üç kez durur. Ekran okuyucu aynı adı üç kez söyler. Mobilde görsel ile başlık arasındaki boşluk “ölü” kalır, kullanıcı kartı bütün sanıp boşluğa basınca hiçbir şey olmaz. Tek hedef, tek tıklanabilir yüzey demektir; aynı adresin kopyalanması değil.
Tek hedef kuralını kartta nasıl kilitlersiniz
Hedefi kartı çizmeden yazın. “Bu kart nereye gider?” sorusunun tek cümlelik cevabı yoksa kart henüz hazır değildir. Cevap netleşince varış tek adrestir: bir yazı, bir hizmet sayfası, bir ürün detayı, bir kategori değil bir öğe.
Hedefi yazdıktan sonra kartın hangi parçasının o adresi taşıyacağına karar verin. Üç sağlam yol vardır; dördüncüsü tuzak gibi durur.
- Kartın tamamı tek bağlantı. İçinde ikinci eylem yoksa en sade yoldur. Başlık, görsel ve özet aynı adresin etiketidir; ayrı ayrı bağlanmaz.
- Yalnız başlık bağlantıdır. Kart tıklanabilir görünür ama gerçek hedef başlıktadır. İçine düğme koyacaksanız bu kalıp bozulmaz. Eksisi, başlık dışındaki boşluğun tıklanmamasıdır.
- Başlık gerçek bağlantıdır, tıklama yüzeyi kartı kaplar. Başlığa bağlı bir yüzey kartın üzerine gerilir. İç düğme bu yüzeyin üstünde, kendi katmanında durur. Tek hedef korunur; istisna düğme gerçekten ayrı bir iş yapıyorsa çalışır.
- İki eşit bağlantı. Görsel bir yere, etiket başka yere, düğme üçüncü yere gider. Bu kart değil, sıkışmış bir menüdür. Izgaradan çıkarın veya iki işi iki ayrı kontrole ayırın.
Tek hedef, her kartın aynı sayfaya gitmesi demek değildir. Izgaradaki her kart kendi öğesine gidebilir. Yasak olan, tek kartın içinde birden fazla varışın yarışmasıdır. Ana sayfada bölüm sırasını hedefe göre dizerken de aynı kural geçerlidir: bir kart bir sonraki adıma götürür; kartın içi ikinci bir yol haritası açmaz.
Net başlık, görsel ve özetin görevi
Başlık kartın erişilebilir adıdır. Bağlantı metni “buraya tıklayın” veya yalnızca “incele” olmamalıdır; seçilen öğenin adı okunmalıdır. Aynı ızgarada üç kart “Detaylı bilgi” diyorsa kullanıcı hangi seçeneği ayırt edeceğini başlıktan değil konumdan tahmin eder. Konumla seçim, yanlış parmak ve yanlış odak demektir.
Görsel başlığı destekler; ikinci bir kapı açmaz. Kapak fotoğrafı, ürün karesi veya ikon ayrı adrese bağlanmaz. Görseli bağlamak istiyorsanız aslında kartın tamamını tek bağlantı yapıyorsunuzdur; o zaman başlığı tekrar bağlamayın. Görselin alternatif metni de başlığı kopyalamasın. Anlamlı bir sahne varsa kısa tarif yeter; yoksa boş bırakılıp ad başlığa bırakılır.
Özet karar vermeye yardım eder, tıklama alanı üretmez. İki satırlık açıklama, fiyat veya tarih ayrı bağlantı taşımaz. “Devamını oku” da başlığın yankısıdır; yeni bir hedef değil, aynı seçimin tekrarlanan etiketidir. Yankı gerekiyorsa görsel olarak durabilir ama ikinci bir bağlantı olmamalıdır.
Kategori, etiket, yazar, konum gibi parçalar kartın içinde durabilir; durdukları yer onları bağlantı yapmaz. Bu parçalar seçimin bağlamıdır. Bağlamı tıklanabilir yapmak istiyorsanız kartı bırakıp filtre, etiket bulutu veya yazar satırını kartın dışına alın. Kartın işi öğeyi seçtirmektir; sınıflandırmayı öğenin içinden yürütmek değildir.
İç düğme istisnası ne zaman meşrudur
İstisna, kartın birincil seçimini bozmayan ikinci bir eylemdir. Birincil eylem “bu öğeyi aç”tır. İkinci eylem öğeyi açmadan, kısa ve geri alınabilir bir iş yapar: listeye ekle, karşılaştır, kaydet, paylaşımı kopyala. İkinci eylem bir sayfaya gidiyorsa istisna değil, ikinci hedeftir; kuralı deler.
İstisnanın dört şartı birlikte aranır.
- Birincil varış hâlâ tek ve başlıkta okunur.
- İç kontrol bir bağlantı değil, düğmedir. Düğme yeni sayfa açmaz; kartın bulunduğu bağlamda iş görür.
- Düğmenin adı kendi işini söyler. “Ekle”, “Kaydet”, “Karşılaştır” gibi. Başlığın kopyası değildir.
- Düğme tıklama yüzeyinin üstündedir. Parmak düğmeye inince kartın birincil adresi çalışmaz; düğmenin işi çalışır.
Şartlardan biri eksikse istisna kapanır. Ürün kartında “Sepete ekle” düğmesi, ürün detayına giden kartla yan yana durabilir; çünkü sepete eklemek sayfa değiştirmeden stok ve beden bağlamında işlenebilir. Aynı kartta “Kargo bilgisi” bağlantısı ise istisna değildir: yeni bir sayfadır ve tıklanacak alanı böler. O bilgi ürün detayına veya kartın dışındaki kısa nota aittir.
İki eylem de sayfa değiştiriyorsa kart metaforunu bırakın. “Hizmeti incele” ile “Teklif al” aynı kutuda iki kapıysa kutuyu kart olmaktan çıkarıp bir başlık, bir kısa metin ve iki ayrı kontrol olarak kurun. Kullanıcı o zaman iki kapıyı kapı olarak görür; kart sanıp yanlışına basmaz.
Geçerli kalıplar, odak ve iç düğmenin katmanı
İşaretleme, gördüğünüz gölgeden önce gelir. Kart bir kutu, başlık bir başlık, birincil seçim bir bağlantı, istisna bir düğmedir. Bağlantının içine düğme, düğmenin içine bağlantı konmaz. Başlık bağlantısının erişilebilir adı, görünen başlık metnidir; gizlenmiş “link” veya “kart” ekleri adı şişirmez.
Tıklama yüzeyini kartın tamamına yaymak istiyorsanız yüzeyi başlık bağlantısından üretin. Yüzey kartı kaplar; başlık metni okunur kalır. İç düğme varsa düğme bu yüzeyin üst katmanında durur. Katman sırası bozulursa düğme görünür ama tıklanmaz; kullanıcı kaydetmek isterken ürüne gider. Bu, iç içe bağlantı kadar sessiz bir hatadır.
Odak sırası görünür sırayı izler. Önce kartın birincil seçimi, sonra varsa iç düğme. Izgarada satır satır ilerlenir; bir kartın içindeki gizli bağlantılar araya girmez. Odak halkası kartın köşesinde kaybolmaz, kırpılmaz ve yalnızca renk değişimine bırakılmaz. Klavye ile dolaşan biri kartı bir bütün olarak algılar. Bu davranış erişilebilir web tasarımında klavye ve odak kararlarıyla aynı yerde durur: yayın sonrası yama değil, kartın kuruluş kararı.
| Kalıp | Tek hedef | İç düğme | Ne zaman kullanın |
|---|---|---|---|
| Kartın tamamı tek bağlantı | Korunur | Yok | Kart yalnızca öğeyi açıyorsa |
| Yalnız başlık bağlantısı | Korunur | Olabilir | İkinci eylem varsa ve boşluğun tıklanmaması kabulse |
| Başlık bağlantısı, gerilmiş yüzey | Korunur | Üst katmanda olabilir | Kart bütün tıklansın, istisna düğme ayrı kalsın istiyorsanız |
| Görsel, başlık ve etiket ayrı bağlantı | Bölünür | Anlamsızlaşır | Kullanmayın; kartı menüye çevirir |
Kartı önce seçim, sonra yüzey olarak kurun. Hedef tek değilse gölge, kartı kurtarmaz.
Mobil dokunma, hover ve yanlış parmak
Masaüstünde hover ile beliren ikinci bağlantı, mobilde ya hiç görünmez ya da kartın üzerine yapışır. “Yazar adı” veya “kategori” hover’da açılıyorsa dokunma cihazında gizli bir ikinci hedeftir. Gizli hedef, tıklanacak alanı böler. İkinci iş gerçekten gerekiyorsa her genişlikte görünür ve düğme olarak durur; gerekmiyorsa karttan çıkar.
Parmak, imleçten geniştir. Etiket şeridi başlığın altına ince bir satır olarak konmuşsa, başlığa basmak isteyen parmak etiketi yakalar. İç düğme de kartın köşesine sıkışmış küçük bir ikonsa, kaydetmek isteyen parmak kartı açar. İstisna düğmesinin dokunma alanı metnin görünen karesinden büyük tutulur; kartın birincil yüzeyi düğmenin etrafında durur, düğmenin altından taşmaz.
Kartlar arasındaki boşluk da tıklanacak alana dahildir. Izgara sıkışınca iki kartın yüzeyleri birbirine değer; kullanıcı bir öğeyi seçerken komşusunu açar. Kırılma noktasını kartın sıkıştığı genişliğe göre seçin. Sıkışma başlık iki satıra kırılınca, görsel oran bozulunca veya iç düğme başlığın üstüne binince başlar. Hazır bir ekran genişliği bu anı göstermez.
Yayın öncesi kart kontrol listesi
Kart ızgarasını yayına almadan önce her kartı tek tek değil, bir seçim birimi olarak yoklayın. Aşağıdaki madde “hayır” diyorsa kart henüz şablon olmaktan çıkmamıştır.
- Kartın tek cümlelik varış yeri yazılı mı?
- Başlık, seçilen öğenin adı mı; yoksa “incele”, “detay”, “daha fazla” mı?
- Görsel, başlık ve özet aynı adrese mi gidiyor, yoksa üç kopya bağlantı mı?
- Kategori, yazar, etiket veya konum kartın içinde ikinci bir sayfa açıyor mu?
- İç kontrol varsa düğme mi, yoksa gizlenmiş ikinci bağlantı mı?
- Düğmeye basınca kartın birincil adresi çalışıyor mu?
- Klavye ile ızgarada her kart bir durak mı, yoksa kartın içi üç durak mı?
- Ekran okuyucu kartı bir kez, başlıktaki adla mı duyuruyor?
- Mobilde parmak başlığa inince etiket veya ikon yakalanıyor mu?
- Hover’da belirip dokunmada kaybolan ikinci bir hedef var mı?
Listeyi geçemeyen kartı boyamakla onaramazsınız. Hedefi sadeleştirin, ikinci adresi kartın dışına alın, istisnayı düğmeye çevirin veya kart metaforunu bırakın. Web tasarım işi burada görsel tercih değil, seçimin okunmasıdır.
Sıkça Sorulan Sorular
Kartın tamamını bağlantı yapmak yanlış mı?
Değil. Kartın tek işi bir öğeyi açmaksa tamamını tek bağlantı yapmak en sade kalıptır. Yanlış olan, bu bağlantının içine ikinci bir adres veya düğme gömmektir. İç eylem yoksa kartı bütün bırakın.
“Devamını oku”yu ayrı bağlantı yapmalı mıyım?
Hayır. Bu metin başlığın yankısıdır; yeni bir varış değildir. Ayrı bağlantı aynı sayfayı ikinci kez odak durağın haline getirir. Görsel olarak durması gerekiyorsa dursun; tıklanabilir ikinci bir kapı olmasın.
Kategori etiketini kartın içinde nasıl gösterebilirim?
Etiket bağlam olarak durabilir; bağlantı olarak durmamalıdır. Kullanıcı sınıfa göre süzmek istiyorsa filtreyi veya etiket satırını kart ızgarasının dışına alın. Kartın içindeki etiket tıklanırsa birincil seçim bölünür.
Ürün kartında “sepete ekle” durabilir mi?
Durabilir; çünkü bu bir sayfa değil, kartın bağlamında kalan kısa bir eylemdir. Şartı net tutun: birincil hedef ürünü açmaktır, düğme bağlantı değildir ve düğmeye inen parmak ürün sayfasını açmaz. Sepete eklemek beden veya stok sorusu açıyorsa o soruyu kartın içine sıkıştırmayın; detaya bırakın.
Görsel ile başlık ayrı ayrı tıklanırsa ne olur?
Aynı adres olsa bile alan bölünür. Odak iki kez durur, boşluklar ölü kalır, okuyucu aynı adı tekrarlar. Görseli tıklanır kılmak istiyorsanız kartı tek bağlantı yapın; başlığı ikinci kez bağlamayın.
Sonuç ve Sonraki Adım
Kart ızgaranız şablon gibi duruyor ama tıklanınca dağılıyorsa hedefi, başlığı ve tıklanacak alanı birlikte kilitlemek gerekir. KepezWeb ile kartı seçim birimi olarak kurmak, iç içe bağlantıyı ayıklamak ve iç düğme istisnasını doğru katmana yerleştirmek için teklif al sayfasından kısa bir özet gönderin. Aynı kararı ızgaranın tamamına yayacak net bir sonraki adımı birlikte çıkarırız.
