Etkileşim

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 alan gibi donanımlarla birlikte gelir. Küçük ekranları dokunmayla, büyük ekranları ise işaretçilerle ilişkilendirmek cazip gelebilir.

Ancak gerçek daha karmaşıktır. Bazı dizüstü bilgisayarlarda dokunmatik ekran özelliği bulunur. Kullanıcılar dokunmatik ekranla, dokunmatik alanla veya her ikisiyle de etkileşim kurabilir. Aynı şekilde, tablet gibi dokunmatik ekranlı bir cihazla harici klavye veya fare de kullanabilirsiniz.

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ğeri bildiriyorsa kullanıcı, web sitenizle etkileşim kurmak için klavye kullanıyor olabilir.none

Bir tarayıcı pointer değeri olarak coarse bildiriyorsa birincil giriş mekanizmasının çok doğru olmadığı anlamına gelir. Dokunmatik ekrandaki parmak, kaba bir işaretçidir.

Bir tarayıcı pointer değeri olarak fine bildiriyorsa birincil giriş mekanizması ayrıntılı kontrol sağlayabilir. Fare veya ekran kalemi iyi bir işaretçi olabilir.

Arayüz öğelerinizin boyutunu pointer değerine uyacak şekilde ayarlayabilirsiniz. Arayüzün nasıl uyum sağladığını görmek için bu demo web sitesini farklı cihazlarda ziyaret etmeyi deneyin.

Bu örnekte, kaba işaretçiler için düğmeler büyütülmüştür:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

İnce işaretçiler için öğeleri küçültmek de mümkündür ancak bu işlemi yaparken dikkatli olmanız gerekir:

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

Kullanıcıların ayrıntılı kontrol yapmasına olanak tanıyan birincil giriş mekanizması olsa bile etkileşimli öğelerin boyutunu küçültmeden önce iki kez düşünün. Fitts Yasası geçerliliğini korur. Küçük bir hedef, ince bir işaretçiyle bile daha fazla konsantrasyon gerektirir. 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 cihazda birden fazla giriş mekanizması bulunur. Bir kullanıcının web sitenizle aynı anda hem dokunmatik ekran hem de fare kullanarak etkileşim kurması mümkündür.

any-pointer, herhangi bir işaretleme cihazının testi geçip geçmediğini bildirmesi bakımından pointer medya özelliğinden farklıdır.

any-pointer değeri none ise işaretleme cihazı olmadığını gösterir.

any-pointer değeri coarse ise 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 yapabildiği anlamına gelir. Ancak bu, birincil giriş mekanizması olmayabilir.

any-pointer medya sorgusu, giriş mekanizmalarından herhangi biri testi geçerse olumlu sonuç bildireceğinden bir tarayıcının any-pointer: fine için sonuç bildirmesinin yanı sıra any-pointer: coarse için de sonuç bildirmesi mümkündür. Bu durumda medya sorgularınızın sırası önemlidir. En sonuncusu öncelikli olur.

Bu örnekte, cihazda hem hassas 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 genellikle ekranda fare veya dokunmatik yüzeyle kontrol edilen bir imleç olduğ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 gelme özelliğine sahipse hover değerini bildirir. Aksi takdirde değer none olur.

Bu örnekte, fareyle üzerine gelindiğinde bazı ek simgeler gösterilir ancak yalnızca birincil giriş cihazı bir öğenin üzerine gelmeye uygunsa.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

Fare imlecinizi bu düğmenin üzerine getirirseniz simge görünür. Ancak klavyenizi kullanarak düğmeye sekme ile giderseniz 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 üzerine gelme özelliğine sahip olduğunu (doğru) bildirir. Ancak fare bağlıyken klavye kullananlar :hover stillerinden yararlanamaz. Bu nedenle, her iki etkileşimi de kapsamak için :hover ve :focus stillerini birleştirmeniz önerilir.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

Birincil giriş cihazı öğelerin üzerine gelme özelliğine sahip olsa bile bilgileri fareyle üzerine gelme etkileşiminin arkasına gizleme konusunda dikkatli olun. Bilgilerin bulunması zorlaşır. Önemli bilgileri veya önemli bir arayüz öğesini gizlemek için fareyle üzerine gelme özelliğini kullanmayın.

Herhangi bir fareyle üzerine gelme işlemi

hover medya sorgusu yalnızca birincil giriş mekanizması hakkında rapor verir. Bazı cihazlarda birden fazla giriş mekanizması bulunur: dokunmatik ekran, fare, klavye, izleme dörtgeni.

any-pointer giriş mekanizmalarından herhangi biri hakkında rapor oluşturduğu gibi, any-hover de mevcut giriş mekanizmalarından herhangi biri öğelerin üzerine gelme özelliğine sahipse doğru olur.

Önceki örnekteki mantığı tersine çevirmeye karar verirseniz fareyle üzerine gelme stillerini varsayılan yapabilir ve any-hover değişkeninin değeri none ise bu stilleri 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ğine sahip bir giriş mekanizması olmayan cihazlarda ek simge her zaman görünür.

Sanal klavyeler

Kullanıcılar, arayüzleri keşfetmek için imleç ve parmaklarını kullanır ancak bilgi girmeleri gerektiğinde klavyeye ihtiyaç duyarlar. Cihazlarına fiziksel bir klavye bağlıysa bu yöntem işe yarar ancak dokunmatik ekranlı bir cihaz kullanıyorlarsa biraz daha karmaşık bir durum söz konusudur. Bu cihazlar, ekranda sanal klavye sağlar.

Giriş türleri

Fiziksel klavyelerin aksine, sanal klavyeler beklenen girişe uyacak şekilde özelleştirilebilir. Beklenen giriş hakkında bilgi verirseniz cihazlar en uygun sanal klavyeyi sunabilir.

input öğelerinizi açıklamak için HTML5 giriş türlerini kullanabilirsiniz. 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, değeri number olan bir input type varken tam sayılar ve ondalık sayılar arasında ayrım yapmak için inputmode özelliğini kullanabilirsiniz.

Birinin yaşı gibi tam sayı istiyorsanız inputmode="numeric" 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" 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 doldurmalarını sağlayarak deneyimlerini iyileştirebilirsiniz. autocomplete özelliği, iletişim formlarını, giriş formlarını ve ödeme formlarını iyileştirmek için çeşitli seçenekler 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 HTML özellikleri, form alanlarınıza yapılan küçük eklemelerdir ancak kullanıcı deneyiminde büyük bir fark yaratabilirler. 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 özel bir kursa göz atabilirsiniz.

Bu kursta bir sonraki adımda, bazı yaygın arayüz kalıplarını inceleyeceğiz.

Bilgilerinizi sınayın

Etkileşimlerle ilgili bilginizi test edin