Etkileşim

Cep telefonları gibi küçük ekranlı cihazlarda genellikle dokunmatik ekran bulunur. Dizüstü bilgisayarlar ve masaüstü bilgisayarlar gibi büyük ekranlı cihazlar genellikle fare veya dokunmatik yüzey gibi donanımlarla birlikte gelir. Küçük ekranları dokunmatik ekranlarla, büyük ekranları ise işaretçilerle eşleştirmek cazip gelebilir.

Ancak gerçek durum daha incelikli. Bazı dizüstü bilgisayarlarda dokunmatik ekran bulunur. Kullanıcılar dokunmatik ekran veya dokunmatik yüzey ya da her ikisiyle de etkileşim kurabilir. Benzer şekilde, tablet gibi dokunmatik ekranlı cihazlarda harici klavye veya fare kullanılabilir.

Giriş mekanizmasını ekran boyutundan çıkarmaya çalışmak yerine CSS'deki medya özelliklerini kullanın.

İşaretçi

pointer medya özelliğiyle üç olası değeri test edebilirsiniz: none, coarse ve fine.

Bir tarayıcı pointer değerini none olarak raporluyorsa kullanıcı web sitenizle etkileşime geçmek için klavye kullanıyor olabilir.

Bir tarayıcı pointer değeri olarak coarse değerini bildirirse birincil giriş mekanizması çok doğru değildir. Dokunmatik ekrandaki parmak, kaba bir işaretçidir.

Bir tarayıcı pointer değerini fine olarak raporluyorsa birincil giriş mekanizması ayrıntılı kontrol sağlayabilir. Fare veya ekran kalemi iyi bir işaretçidir.

Arayüz öğelerinizin boyutunu pointer değerine uyacak şekilde ayarlayabilirsiniz. Arayüzün nasıl uyum sağladığını görmek için bu web sitesini farklı cihazlarda ziyaret etmeyi deneyin.

Bu örnekte, düğmeler kaba işaretçiler için daha büyük yapılmıştır:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

İnce işaretçiler için öğeleri daha da küçültebilirsiniz ancak bunu yaparken dikkatli olun:

Yapılmaması gerekenler:
@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

Kullanıcıların ayrıntılı kontrol sağlayabilen birincil bir giriş mekanizması olsa bile etkileşimli öğelerin boyutunu küçültmeden önce iki kez düşünün. Fitts Yasası geçerliliğini korur. İnce bir işaretçi kullansanız bile daha küçük bir hedefe odaklanmak için daha fazla konsantrasyon gerekir. Daha geniş bir hedef alan, işaretleme cihazından bağımsız olarak herkese fayda sağlar.

Herhangi bir işaretçi

pointer medya özelliği, birincil giriş mekanizmasının hassasiyetini bildirir. Ancak birçok cihazda birden fazla giriş mekanizması bulunur. Bir kullanıcının web sitenizle aynı anda hem dokunmatik ekran hem de fare kullanarak etkileşimde bulunması mümkündür.

any-pointer, herhangi bir işaretçi cihazın testi geçip geçmediğini bildirmesi açısından pointer medya özelliğinden farklıdır.

any-pointer değeri none ise işaretçi cihaz kullanılamıyor demektir.

any-pointer değerinin coarse olması, en az bir işaretleme cihazının çok doğru olmadığı anlamına gelir. Ancak bu, birincil giriş mekanizması olmayabilir.

any-pointer değeri fine ise en az bir işaretleme cihazının ayrıntılı kontrol sağlayabileceği anlamına gelir. Ancak bu, birincil giriş mekanizması olmayabilir.

any-pointer medya sorgusu, giriş mekanizmalarının herhangisi testi geçerse pozitif sonuç bildireceğinden, bir tarayıcının any-pointer: fine için bir sonuç ve any-pointer: coarse için de bir sonuç bildirmesi mümkündür. Bu durumda medya sorgularınızın sırası önemlidir. Sonuncusu öncelikli olur.

Bu örnekte, cihazda hem ince hem de kaba giriş mekanizması varsa kaba stiller uygulanır.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

İmleçle üzerine gelin

hover medya özelliği, birincil giriş mekanizmasının öğelerin üzerine gelip gelemeyeceğini bildirir. Bu durum genellikle ekranda fare veya dokunmatik yüzey tarafından kontrol edilen bir tür işaretçi bulunduğu anlamına gelir.

İnce ve kaba işaretçiler arasında ayrım yapan pointer medya özelliğinin aksine hover medya özelliği ikilidir. Birincil giriş cihazı, öğelerin üzerine gelebiliyorsa hover değerini bildirir. Aksi takdirde değer none olur.

Bu örnekte, fareyle üzerine gelindiğinde bazı ek simgeler gösterilir ancak bu yalnızca birincil giriş cihazı bir öğenin üzerine gelebiliyorsa geçerlidir.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

Farenizi kullanarak imleci bu düğmenin üzerine getirirseniz simge görünür. Ancak klavyenizi kullanarak düğmeye gitmek için Sekme tuşunu kullanırsanız simge görünmez kalır. Klavyeyi kullandığınızda fareyle üzerine gelmek yerine odaklanırsınız. Fare bağlı bir masaüstü cihaz, birincil giriş mekanizmasının fareyle üzerine gelme özelliğine sahip olduğunu bildirir. Bu doğrudur. Ancak fare bağlıyken klavye kullananlar :hover stillerinden yararlanamaz. Bu nedenle, her iki etkileşimi de kapsayacak şekilde :hover ve :focus stillerini birleştirmek iyi bir fikirdir.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

Birincil giriş cihazı öğelerin üzerine gelmeyi sağlayabiliyor olsa bile bilgileri fareyle üzerine gelme etkileşiminin arkasına gizleme konusunda dikkatli olun. Bilgiler daha az bulunabilir hale gelir. Önemli bilgileri veya önemli bir arayüz öğesini gizlemek için fareyle üzerine gelme özelliğini kullanmayın.

Fareyle üzerine gelince

hover medya sorgusu yalnızca birincil giriş mekanizmasını raporlar. Bazı cihazlarda birden fazla giriş mekanizması bulunur: dokunmatik ekran, fare, klavye, dokunmatik yüzey.

any-pointer, giriş mekanizmalarından herhangi birini raporladığı gibi, mevcut giriş mekanizmalarından herhangi biri öğelerin üzerine gelebiliyorsa any-hover doğru olur.

Önceki örnekteki mantığı tersine çevirmeye karar verirseniz fareyle üzerine gelme stillerini varsayılan olarak ayarlayabilir ve ardından any-hover değerinin none olması durumunda bunları kaldırabilirsiniz.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

Fareyle üzerine gelme özelliğine sahip giriş mekanizması olmayan cihazlarda ek simge her zaman görünür.

Sanal klavyeler

Kullanıcılar arayüzleri keşfetmek için imleçleri ve parmaklarını kullanır ancak bilgi girme zamanı geldiğinde klavyeye ihtiyaç duyarlar. Cihazına fiziksel bir klavye bağlıysa bu sorun değil. Ancak dokunmatik ekranlı bir cihaz kullanıyorsa işlem biraz daha karmaşıktır. Bu cihazlarda ekranda sanal klavyeler bulunur.

Giriş türleri

Fiziksel klavyelerin aksine sanal klavyeler, beklenen girişle eşleşecek şekilde özelleştirilebilir. Beklenen giriş hakkında bilgi sağlarsanız cihazlar en uygun sanal klavyeyi sunabilir.

HTML5 giriş türleri, input öğelerinizi açıklamanın mükemmel bir yoludur. type özelliği email, number, tel, url gibi değerleri kabul eder.

  <label for="email">Email</label>
  <input type="email" id="email">
  <label for="number">Number</label>
  <input type="number" id="number">
  <label for="tel">Tel</label>
  <input type="tel" id="tel">
  <label for="url">URL</label>
  <input type="url" id="url">

Giriş modları

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 95.
  • Safari: 12.1.

Source

inputmode özelliği, sanal klavyeler üzerinde ayrıntılı kontrol sahibi olmanızı sağlar. Örneğin, number değerine sahip bir input type varsa tam sayılar ile ondalık sayılar arasında ayrım yapmak için inputmode özelliğini kullanabilirsiniz.

Bir kişinin yaşı gibi tam sayı isteğinde bulunuyorsanız inputmode="numeric" değerini kullanın.

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

Ondalık basamaklar içeren bir sayı (ör. fiyat) istiyorsanız inputmode="decimal" kullanın.

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

Otomatik tamamlama

Kimse form doldurmaktan hoşlanmaz. Tasarımcı olarak, kullanıcılarınızın form alanlarını otomatik olarak doldurmasını sağlayarak kullanıcılarınıza daha iyi bir deneyim sunabilirsiniz. autocomplete özelliği, iletişim formlarını, giriş formlarını ve ödeme formlarını iyileştirmek için birçok seçenek sunar.

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">
<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

type, inputmode ve autocomplete olmak üzere bu HTML özellikleri, form alanlarınıza yapılan küçük eklemeler olsa da kullanıcı deneyiminde büyük bir fark yaratabilir. Kullanıcılarınızın cihaz özelliklerini tahmin edip bunlara yanıt vererek kullanıcılarınızı güçlendirirsiniz. Daha ayrıntılı bilgi için formları öğrenmenize yardımcı olacak bir kursumuz mevcuttur.

Bu kursta sırada, bazı yaygın arayüz kalıplarını incelemek var.

Öğrendiklerinizi test etme

Etkileşimler hakkındaki bilginizi test edin

Kullanıcının giriş türünü ekran boyutundan tahmin etmeye çalışmak yerine hangi özelliği kullanmalısınız?

CSS medya türü handheld
JavaScript'in prompt() özelliğini kullanarak kullanıcıdan
CSS medya özellikleri

@media (pointer) ile @media (any-pointer) arasındaki fark nedir?

İşaretçilere fare gibi öğeler dahil değildir.
Kalem gibi birincil olmayan ek girişler testi geçtiğinde tüm işaretçiler doğru değerini bildirir.
İşaretçi olarak parmağınız gibi her şey işaretçi olarak kabul edilir.

Hangi giriş türleri kullanıcılar için daha uygun bir sanal klavye gösterir?

type="tel"
type="number"
type="email"
type="url"