Ölçebildiğim kadarıyla (erişimim olan istatistiklere dayanarak), şunu rahatlıkla söyleyebilirim ki 2025 itibarıyla artık tasarladığım arayüzlerin %85’i sadece parmakla dokunularak kullanılıyor, herhangi bir imlece maruz kalmıyor. Masaüstü web sitesi bile olsa, iPad gibi tabletler üzerinden kullanımlar buna dahil.
Geçtiğimiz on yıl, kullanıcı arayüzlerinin temel etkileşim mekanizmalarını kökten dönüştürdü. Geleneksel fare ve klavye ikilisinin yerini, akıllı telefonlar ve tabletler aracılığıyla doğrudan dokunma deneyimi aldı. Şimdi farklı formlarda insan-makine etkileşimini konuşur olduk.
Elimdeki analitik veriler ışığında söyleyebilirim ki günümüzde tasarladığım arayüzlerin her 5 etkileşiminden en az 4’ü sadece parmakla gerçekleşiyor. İmleç gerektiren masaüstü sürümler, etkileşim hacmi açısından geri plana itilmiş durumda.
Bu dönüşümü anbean yaşamış bir tasarımcı olarak, bu yazıda, bunun ardındaki başlıca dinamikleri, arayüz tasarımı (UI) ve kullanıcı deneyimi (UX) açısından getirdiği yenilikleri ve yaklaşımımı paylaşacağım.
2020’lerin ortasında dünya nüfusunun %70’inden fazlası internete mobil cihazla bağlanıyor hale geldi. Akıllı saatler, katlanabilir ekranlı telefonlar ve hibrit tablet/PC modelleri dokunmatiğin eksenini daha da genişletti. Dokunmatik etkileşim, tıklama yerine parmakla sürükleyip-bırakma, uzun basma, parmakla açma-kapama ve iterek kaydırma alışkanlıklarını hayatımıza soktu.
Arayüzde neler değişmek zorunda kaldı?
Dokunmatik arayüzler, fare imlecine göre daha büyük tıklanabilir alanlar gerektiriyor. 40 pikselden küçük ve birbirine yakın tıklanabilir öğeler sorun çıkarabiliyor. Eğer yakında başka tıklanabilir öğe yoksa daha küçükleri de sorun yaratmayabilir. (Gelişmiş tarayıcılar, o dokunmanın tıklanabilir alanı hedef aldığını tahmin edebiliyor.)
Scroll çubukları yerine doğal parmak hareketleriyle kaydırmaya başladığımız için arayüze yatay ve dikey kaydırmayı net şekilde gösteren görsel ipuçları yerleştirmek zorunda kaldık.
Parmakla etkileşimin geri bildirim ihtiyacını karşılamak için dokunma öncesinde, sırasında ve sonrasında geri bildirim veren animasyonlar yaratmamız gerekti.
Ekran düzeninde neler değişti?
Ekran alanı sınırlı olduğundan, kısa başlıklar ve evrensel simgeler ön plana çıktı. Yer yer farklı içerik türlerini parmakla kolayca ayırıp keşfetmeye uygun bloklar halinde sunduk. Tek parmakla erişilebilen (o da genellikle baş parmak) menüler ve alt-üst araç çubukları tasarlamaya çalıştık.
Erişilebilirlik için ne yaptık?
Dokunmatik UI’nin gecikmeye tahammülü yok, bu yüzden yüksek FPS animasyonlar (web ise CSS ile takılmadan) ve anında dijital tepkiler vermeye çalıştık. Dokunmaya uygun butonların ve metinlerin tüm ışık koşullarında rahat okunması için karşıtlık oranlarına dikkat ettik. Her mobil cihaz da aynı ekran kalitesine sahip olmadığı için tüm ihtimalleri dikkatle değerlendirdik. Ekran okuyucular, sesli komutlar ve akıllı cihazların sezgisel uyarılarla dokunma deneyimini destekleyebilmesi için üst üste binmeleri -gerekmedikçe- azalttık ve içeriğin daha okunabilir olmasını sağladık (makine tarafından bile).
Tasarlama sürecimizde neler değişti?
Sketch gibi uygulamalarda tasarladığımız arayüzleri çeşitli araçlarla ya da yöntemlerle prototipleyip test ettik. -Kendi adıma- çoğu zaman gerçek cihazlarda ve gerçek kullanıcılarla testler yaptık, geri bildirimler topladık. Laboratuvar yerine, küçük ölçekli test grupları ile BETA çalışmaları yapmak, zaten kullanıcınız olan kişilerin daha acımasız ve gerçek eleştirileri ya da davranışlarından elde edilecek daha doğru çıkarımlar her zaman daha faydalı oldu. Hit oranları, kaydırma derinlikleri ve etkileşim süresi verilerini de sürekli takip ettik ve buna göre arayüzleri şekillendirdik.
Masaüstü ile mobili nasıl öpüştürdük?
Masaüstü siteleri tasarlarken dahi dokunmaya uygun arayüzler, büyük ekranlı cihazları da kapsayacak şekilde “genişletilmiş dokunmatik” etkileşim modelleri sunduk. Responsive tasarım yapı itibarıyla -bazı durumlarda- tersine döndü. Başlangıçta sadece masaüstü siteleri responsive ile mobil uyumlu hale getirirdik, artık masaüstü siteleri tablet gibi cihazlarda düzgün görünmesini sağladıktan sonra genişledikçe responsive ile (ör; büyük monitörler için) daha fazla ya da farklı şekilde öğe gösterir hale getirdik.
Tek bir design system içinde, hem fare imleci, hem dokunmatik uyumlu ortak bileşenler oluşturmaya başladık. Kullanıcıların, bir işleme masaüstünden başladığında, mobilde sürdürmesini sağladık (continuity). Örneğin; bir içerik oluşturma aşamasına masaüstünde başlayıp, aynı taslağa mobil cihazı üzerinden web sürüm ile ya da mobil uygulama aracılığıyla devam etmesini sağladık.
Kullanıcıların büyük çoğunluğunun parmaklarının ucu ile etkileşim kurduğunu unutmadan tasarlamaya devam ediyoruz.