Cep telefonları gibi küçük ekranlı cihazlar genellikle dokunmatik ekranlara sahiptir. Dizüstü ve masaüstü bilgisayarlar gibi büyük ekranlı cihazlar genellikle fare veya dokunmatik yüzey gibi donanımlarla birlikte gelir. Dokunmatik ekranlarla küçük ekranları işaretçilerle, büyük ekranları da işaretçilerle eşitlemek cazip bir yaklaşımdır.
Ancak gerçek daha incelikli. Bazı dizüstü bilgisayarlar dokunmatik ekran özelliklerine sahiptir. Kullanıcılar dokunmatik ekran, dokunmatik ekran veya her ikisi ile de etkileşimde bulunabilir. Benzer şekilde, tablet gibi dokunmatik ekranlı bir cihazla harici bir klavye veya fare kullanmak da mümkündür.
Giriş mekanizmasını ekran boyutundan tahmin etmeye ç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 bildiriyorsa kullanıcı, web sitenizle etkileşimde bulunmak için bir klavye kullanıyor olabilir.
Bir tarayıcının pointer
değerini coarse
olarak bildirmesi birincil giriş mekanizmasının çok doğru olmadığı anlamına gelir. Dokunmatik ekrandaki bir parmak, kaba bir işarettir.
Bir tarayıcının pointer
değerini fine
olarak bildirmesi, birincil giriş mekanizmasının ayrıntılı denetim yapabildiğini gösterir. Fare ya da ekran kalemi hassas bir işaretçidir.
Arayüz öğelerinizin boyutunu pointer
değerine uyacak şekilde ayarlayabilirsiniz. Arayüzün nasıl alıştığını görmek için bu web sitesini farklı tür cihazlarda ziyaret etmeyi deneyin.
Bu örnekte, düğmeler genel işaretçiler için büyütülmüştür:
button {
padding: 0.5em 1em;
}
@media (pointer: coarse) {
button {
padding: 1em 2em;
}
}
Hassas noktalar için öğelerin boyutunu küçültmek de mümkündür, ancak bunu yaparken dikkatli olun:
@media (pointer: fine) { button { padding: 0.25em 0.5em; } }
Bir kişinin ayrıntılı denetim sağlayabilen bir birincil giriş mekanizması olsa bile, etkileşimli öğelerin boyutunu küçültmeden önce iki kez düşünün. Fitts Yasası geçerli olmaya devam eder. Küçük hedeflerde ince işaretçiyle bile daha fazla konsantrasyon gerekir. Daha büyük 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 cihazın birden fazla giriş mekanizması vardır. Bir kullanıcının, aynı anda hem dokunmatik ekran hem de fare kullanarak web sitenizle etkileşimde bulunması mümkündür.
any-pointer
, herhangi bir işaretleme cihazının testi geçip geçmediğini bildirme özelliğiyle pointer
medya özelliğinden farklıdır.
any-pointer
değerinin none
olması, işaretleme cihazının kullanılamadığı anlamına gelir.
any-pointer
değeri coarse
, en az bir işaretleme cihazının çok doğru olmadığı anlamına gelir. Ancak birincil giriş mekanizması bu olmayabilir.
any-pointer
değerinin fine
olması, en az bir işaretleme cihazının ayrıntılı denetim yapabildiği anlamına gelir. Ancak tekrar belirtelim ki birincil giriş mekanizması bu olmayabilir.
Giriş mekanizmalarından herhangi biri testi geçerse any-pointer
medya sorgusu pozitif sonuç bildireceğinden, tarayıcı any-pointer: fine
ve any-pointer: coarse
için sonuç da bildirebilir. Bu durumda, medya sorgularınızın sırası önemlidir. Sonuncusu öncelikli olur.
Bu örnekte, cihazda hem hassas hem de kaba giriş mekanizması varsa genel stiller uygulanır.
@media (any-pointer: fine) {
button {
padding: 0.5em 1em;
}
}
@media (any-pointer: coarse) {
button {
padding: 1em 2em;
}
}
Üzerine gelme
hover
medya özelliği, birincil giriş mekanizmasının fareyle öğelerin üzerine gelip gelemeyeceğini bildirir. Bu genellikle ekranda fare veya dokunmatik yüzeyle kontrol edilen bir tür imleç olduğu anlamına gelir.
İnce ve genel işaretçileri ayıran pointer
medya özelliğinin aksine, hover
medya özelliği ikili programdır. Birincil giriş cihazı imleci öğelerin üzerine getirebiliyorsa hover
değerini bildirir. Diğer durumlarda değer none
olur.
Bu örnekte, fareyle üzerine gelindiğinde bazı ek simgeler kullanılabilir, ancak bunun için birincil giriş cihazının fareyle bir öğenin üzerine gelmesi gerekir.
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:hover .extra {
visibility: visible;
}
}
Farenizi düğmenin üzerine getirirseniz simge görünür. Ancak, düğmeye geçmek için klavyenizi kullanırsanız simge görünmez kalır. Klavyeyi kullandığınızda fareyle öğenin üzerine gelmek yerine odaklanıyorsunuzdur. Fare takılı bir masaüstü cihaz, birincil giriş mekanizmasının fareyle üzerine gelme yapabildiğini bildirir. Bu doğrudur. Ancak fare takılıyken klavye kullanan kişiler, :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ı fareyle öğelerin üzerine gelebilse bile fareyle öğelerin üzerine gelerek yapılan etkileşimlerin arkasında bilgi gizlemeye dikkat edin. Bilgiler daha az bulunabilir hale gelir. Önemli bilgileri veya önemli bir arayüz öğesini gizlemek için fareyle üzerine gelinmeyin.
Fareyle üzerine gelindiğinde açılan herhangi bir öğe
hover
medya sorgusu, yalnızca birincil giriş mekanizmasını raporlar. Bazı cihazlarda birden fazla giriş mekanizması bulunur: dokunmatik ekran, fare, klavye, dokunmatik yüzey.
Herhangi bir giriş mekanizması hakkında any-pointer
bildirdiği gibi, mevcut giriş mekanizmalarından herhangi biri fareyle öğelerin üzerine gelebiliyorsa any-hover
doğru olacaktır.
Önceki örnekte mantığı tersine çevirmeye karar verdiyseniz fareyle üzerine gelme stillerini varsayılan yapabilir ve ardından any-hover
, none
değerine sahipse bunları kaldırabilirsiniz.
button .extra {
visibility: hidden;
}
button:hover .extra,
button:focus .extra {
visibility: visible;
}
@media (any-hover: none) {
button .extra {
visibility: visible;
}
}
Üzerine gelme yeteneğine sahip bir giriş mekanizması olmayan bir cihazda, ekstra simge her zaman görünür.
Sanal klavyeler
İnsanlar arayüzleri keşfetmek için imleçleri ve parmaklarını kullanır, ancak bilgi girebilmek için klavyeye ihtiyaç duyarlar. Kullanıcıların cihazlarına takılı fiziksel bir klavye varsa sorun olmaz, dokunmatik ekranlı cihaz kullanıyorsa durum biraz daha karmaşıktır. Bu cihazlar dokunmatik sanal klavyeler sağlar.
Giriş türleri
Fiziksel klavyelerin aksine sanal klavyeler beklenen girişe uyacak şekilde uyarlanabilir. Beklenen giriş hakkında bilgi sağlarsanız cihazlar en uygun sanal klavyeyi sunabilir.
HTML5 giriş türleri, input
öğelerinizi açıklamanın harika 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 olanağı sunar. Örneğin, number
değerine sahip bir input
type
varken tam sayılar ve ondalık sayıları ayırt etmek için inputmode
özelliğini kullanabilirsiniz.
Bir kişinin yaşı gibi tam sayı almak istiyorsanız inputmode="numeric"
değerini kullanın.
<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">
Fiyat gibi ondalık basamak içeren bir sayı istiyorsanız inputmode="decimal"
değerini kullanın.
<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">
Otomatik tamamlama
Kimse form doldurmayı sevmez. Bir tasarımcı olarak kullanıcılarınızın form alanlarını otomatik olarak doldurmalarını sağlayarak onlara 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">
Bu HTML özellikleri (type
, inputmode
ve autocomplete
) form alanlarınıza küçük birer eklemedir ancak 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üçlendirmiş olursunuz. Daha ayrıntılı bilgi edinmek için formları öğrenmenize yardımcı olmaya özel bir kursa göz atabilirsiniz.
Bu kursun bir sonraki kısmında, bazı yaygın arayüz kalıplarını inceleyeceğiz.
Öğrendiklerinizi sınayın
Etkileşimler hakkındaki bilginizi test etme
Ekran boyutundan kullanıcının giriş türünü tahmin etmeye çalışmak yerine hangi özelliği kullanmalısınız?
@media (pointer: coarse)
veya @media (-any-pointer: coarse)
gibiprompt()
ile kullanıcıya sorhandheld
@media (pointer)
ile @media (any-pointer)
arasındaki fark nedir?
any-pointer
, eşleşmeler için tüm cihaz giriş türlerini sorgular.Hangi giriş türleri kullanıcılar için daha uygun bir sanal klavye gösterir?
type="url"
type="tel"
type="number"
type="email"