Cep telefonları gibi küçük ekranlı cihazların genellikle dokunmatik ekranı vardır. Dizüstü 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 dengelemek cazip gelebilir.
Ancak gerçek daha incelikli. Bazı dizüstü bilgisayarlarda dokunmatik ekran özelliği bulunur. Kullanıcılar dokunmatik ekranla, dokunmatik yüzeyle veya her ikisiyle 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
olarak none
değerini bildirirse kullanıcı, web sitenizle etkileşime geçmek için klavye kullanıyor olabilir.
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şaretçidir.
Bir tarayıcı pointer
değerini fine
olarak bildirirse bu, birincil giriş mekanizmasının ayrıntılı kontrol edebildiği anlamına gelir. Fare veya ekran kalemi iyi bir işaretçidir.
Arayüz öğelerinizin boyutunu pointer
değerine uyacak şekilde ayarlayabilirsiniz. Arayüzün nasıl uyarlandığını görmek için bu web sitesini farklı cihazlarda ziyaret etmeyi deneyin.
Bu örnekte, düğmeler genel işaretçiler için daha büyük hale getirilmiştir:
button {
padding: 0.5em 1em;
}
@media (pointer: coarse) {
button {
padding: 1em 2em;
}
}
Ayrıca ince işaretçiler için öğeleri küçültebilirsiniz ancak bunu yaparken dikkatli olun:
@media (pointer: fine) {
button {
padding: 0.25em 0.5em;
}
}
Birisi ayrıntılı kontrol gerçekleştirebilen birincil giriş mekanizmasına sahip olsa bile, etkileşimli öğelerin boyutunu azaltmadan önce iki kere düşünün. Fitts Yasası geçerli olmaya devam eder. Küçük hedeflerde, ince bir işaretçiyle bile daha fazla konsantrasyon gerekir. Daha büyük bir hedef alan, işaretleme cihazı ne olursa olsun 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 fareyi kullanarak web sitenizle etkileşime geçmesi mümkündür.
any-pointer
, herhangi bir işaretleme cihazının testi geçip geçmediğini bildirmesi açısından pointer
medya özelliğinden farklıdır.
any-pointer
değerinin none
olması, kullanılabilir işaret cihazının olmadığı anlamına gelir.
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ğerinin fine
olması, en az bir işaretleme cihazının ayrıntılı kontrol yapabildiği anlamına gelir. Ancak yine de ana giriş mekanizması bu olmayabilir.
Giriş mekanizmalarından herhangi biri testi geçerse any-pointer
medya sorgusu olumlu sonuç bildireceğinden, tarayıcı any-pointer: fine
sonucunu ve ayrıca any-pointer: coarse
sonucunu bildirebilir. Bu durumda medya sorgularınızın sırası önemlidir. Sonuncusu öncelikli olur.
Bu örnekte, cihazda hem hassas hem de genel giriş mekanizması varsa genel 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 fareyle öğelerin üzerine gelip gelmeyeceğini bildirir. Bu genellikle ekranda bir tür fare veya dokunmatik yüzeyle kontrol edildiği anlamına gelir.
Ayrıntılı ve genel işaretçileri ayırt eden pointer
medya özelliğinden farklı olarak hover
medya özelliği ikili bir özelliktir. Birincil giriş cihazı, fareyle öğelerin üzerine gelebiliyorsa hover
değerini bildirir. Aksi takdirde değer none
olur.
Bu örnekte, fareyle üzerine gelindiğinde yalnızca birincil giriş cihazı bir öğenin üzerine gelebiliyorsa bazı ek simgeler kullanılabilir.
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:hover .extra {
visibility: visible;
}
}
Farenizi bu düğmenin üzerine getirmek için kullanırsanız simge görünür. Ancak düğmeye gitmek için klavyenizi kullanırsanız simge görünmez kalır. Klavyeyi kullandığınızda fareyle üzerine gelme yerine odaklanırsınız. Fare takılı bir masaüstü cihaz, birincil giriş mekanizmasının fareyle üzerine gelme yeteneğine sahip olduğunu bildirir. Bu doğru bir değerdir. Ancak fare takılıyken klavye kullanan hiç kimse :hover
stillerinden yararlanamaz. Bu nedenle, :hover
ve :focus
stillerini her iki etkileşimi de kapsayacak şekilde 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 gelebiliyor olsa bile, fareyle üzerine gelme etkileşiminin arkasına gizlenmeye dikkat edin. Bilgilerin bulunabilirliği azalabilir. Önemli bilgileri veya önemli bir arayüz öğesini gizlemek için fareyle üzerine gelme özelliğini kullanmayın.
Herhangi bir fareyle üzerine gelme
hover
medya sorgusu yalnızca birincil giriş mekanizmasını bildirir. Bazı cihazların birden çok giriş mekanizması vardır: dokunmatik ekran, fare, klavye, dokunmatik yüzey.
Giriş mekanizmalarından herhangi biri hakkında any-pointer
bildirdiği gibi, kullanılabilir giriş mekanizmalarından herhangi birinin fareyle öğelerin üzerine gelme yeteneği varsa any-hover
doğrudur.
Önceki örnekteki mantığı tersine çevirmeye karar verdiyseniz fareyle üzerine gelme stillerini varsayılan yapabilir ve any-hover
değeri none
ise 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 özelliği olan giriş mekanizması olmayan bir cihazda, ekstra simgesi 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 girmek istediklerinde bir klavyeye ihtiyaçları vardır. Cihazlarına fiziksel bir klavye takılıysa sorun olmaz ancak dokunmatik ekranlı cihaz kullanıyorsa bu durum biraz daha karmaşıktır. Bu cihazlarda dokunmatik sanal klavyeler bulunur.
Giriş türleri
Fiziksel klavyenin 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 tanımlamanı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 sağlar. Ö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.
Birinin yaşı gibi tam sayı öğrenmek istiyorsanız inputmode="numeric"
kullanın.
<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">
Ondalık basamak içeren bir sayı (ör. fiyat) 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 kullanabileceğiniz 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 eklemeler olsa da kullanıcı deneyimi üzerinde büyük bir fark yaratabilir. Kullanıcılarınızın cihaz özelliklerini öngörerek ve bunlara yanıt vererek kullanıcılarınızı desteklersiniz. Daha ayrıntılı bilgiler için, formları öğrenmenize yardımcı olmaya yönelik bir kurs vardır.
Bu kursta, bazı yaygın arayüz kalıplarını inceleyelim.
Öğrendiklerinizi sınayın
Etkileşimler hakkındaki bilginizi test edin
Ekran boyutuna bakarak kullanıcının giriş türünü tahmin etmeye çalışmak yerine hangi özelliği kullanmanız gerekir?
handheld
prompt()
kullanan kullanıcıya sor@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="number"
type="email"
type="url"
type="tel"