Etkileşim

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