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:
@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ı
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?
handheld
prompt()
özelliğini kullanarak kullanıcıdan@media (pointer)
ile @media (any-pointer)
arasındaki fark nedir?
Hangi giriş türleri kullanıcılar için daha uygun bir sanal klavye gösterir?
type="tel"
type="number"
type="email"
type="url"