Etkileşim

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