Tasarımcılar için Active, Hover ve Focus Durumları
Hem tasarım hem de yazılım sürecinde bu kavramları ve bu kavramların farklarını anlamak yararlı olabilir. İşin teknik boyutu koda dökme sürecini, kullanıcı deneyimiyse tasarım sürecini yansıtıyor. Ben bu makalede kullanıcı deneyimine yani işin tasarım sürecine yöneleceğim. Öncelikle, bu kavramların neden önemli olduğuna değinmek istiyorum.
Web kullanıcılarının azımsanmayacak bir bölümü erişebilirlik problemi yaşıyor. Dünya üzerinde engelli web kullanıcı sayısı da oldukça yüksek. Fakat engellilere yönelik geniş erişilebilirlik standartlarını karşılayan web sitelerin oranı yalnızca 1% (kaynak). Erişilebilirlik basit bir konu değil, açıkçası erişebilirlik hakkında her detayı bilmediğimi itiraf edeyim. Bunun için kontrol listeleri var. Fakat şunu biliyorum ki farklı farklı engeller var ve sitemizde her kullanıcı için bu engelleri ortadan kaldırmalıyız. Geniş erişilebilirlik standartlarını merak ediyorsanız WCAG (Web Content Accessibility Guidelines)’a göz atabilirsiniz.
Bahsettiğim 3 state (teknik terim olduğu için Türkçe yazmadım) bazen mouse bazen klavye ile sağlanabilir. Bazı stateleri mobilde farkedemeyiz. Bazılarını fark etmek bile çok güçtür. Bu nedenle gerek tasarım gerek koda dökme sürecinde bu stateleri birbiriyle karıştırabiliriz, gayet normal. Bu üçünü birbirinden nasıl ayırabiliriz ona odaklanalım.
Detaylandırmadan önce bir buton elemanı üzerinde bu stateleri açıklayayım:
- Hover: Buton üzerine imleç ile geldiğimizde oluşan durumdur. Klavye kullanarak bu state’i gerçekleştiremezsiniz. İmleç ile butona tıklamadan, yalnızca üzerine geldiğinizde oluşur.
- Focus: Buton elementinin aktif olmaya hazır olduğunu gösterir. Hover durumuna çok benzese de hover durumunun aksine hem mouse hem de klavye ile oluşan bir statetir. (Tarayıcıya ve sizin uyguladığınız ayarlara göre değişiklik gösterse de genelde “tab” tuşuna basarak elemanlar üzerine odaklanabilirsiniz)
- Active: Çok basit şekilde, bir elemanın aktif olma durumudur. Mesela bizim örneğimizde buton ile etkileşime geçme durumudur. Çok sık karıştırılsa da active durumu “seçilmiş (selected)” olma durumundan farklıdır.
Kullanıcı Deneyimi ve Geri bildirim
Artık statelerin genel anlamda ne olduğundan bahsettiğime göre; şimdi de ne olmadığından bahsedeyim. Bununla birlikte statelerin birbirinden ayrılan özelliklerine ve kullanıcı deneyimini nasıl iyileştirebileceğimize değinmeye çalışacağım.
Hover
Yukarıdaki buton örneğinde olduğu gibi hover durumu bize o elemanla etkileşime girebileceğimizin geri bildirimini verir. Mouse ile eleman üzerine geldiğimizdeki durum hover durumudur. Her ne kadar bir butonun tıklanabilirliğini tahmin edebilsek de bu alışkanlığı kazanamayan/öğrenme güçlüğü çeken kullanıcılar var. Mesela bilgisayar becerisi sınırlı olan biri butonla etkileşime girebileceğini tahmin edemeyebilir.
Hover durumunun farkedilebilir olması gerekiyor. Bu nedenle animasyonlar, efektler hover durumunda major tasarım örneklerini oluşturur (hover effect). Burada güzel örnekler bulabilirsiniz. Fakat genel kullanımda; renk tonu değişiklikleri, gölgeler, scale with transition hover durumlarında en çok kullanılan tasarım stilleridir. Tasarım detaylarına inecek olursam; hover durumu, varsayılan durumdan daha koyu bir renk tonuna sahiptir (dark mode için geçerli değil). Bunun haricinde scale edecek (ölçeklenecek) tasarımlarda hover durumu artarak scale eder. Gölgelendirmedeyse, yine hover durumunda gölgeler artar. Bu tasarımlar gerçek hayat örneklerinden ilham alır.
Küçük bir not olarak; mobilde hover durumu bulunmaz, yalnızca tıklama (tapping) ve klikleme (clicking) bulunur. Ayrıca tamamen klavye kullananlar , klavye kullanıcıları da hover durumu göremezler.
Focus
Klavye kullanıcıları için çok büyük önem taşır. Eğer bilinçli olarak değişiklik yapmadıysanız, genelde tarayıcılarda Tab tuşunu kullanarak focus durumunu görebilirsiniz. Focus durumu şu anda, mevcutta etkileşime geçmeye hazır elemanın hangisi olduğunu belli eder. Ayrıca focus tasarımında, elemanın dışına/çevresine verilen bir anahat çizgisi (stroke) en sık kullanılan ve geleneksek tasaerım stilidir. Bu yöntemin kullanılmasının sebebi, yandaki/çevredeki elemanları etkilememesidir. Zaten bir çok tarayıcıda ve web teknolojilerinde varsayılan olarak bu stil geliyor. Bu yöntem çoğu zaman işe yarar ve yeterlidir. Fakat bu stilin bazı temel hataları bulunuyor;
- Yeterince dikkat çekici değil
- Yeterli hareketlilik yok, bu sebeple odağın nerede olduğu belli olmayabiliyor.
- Arka plan rengi açık olduğunda sorun yaratmazken, koyu arka plan renginde fark edilebilirlik azalıyor.
Varsayılan ayarlar bazen yukarıda değindiğim sorunları beraberinde getirir. Bu düşünüldüğünde özelleştirilmiş focus durumu tasarlamak daha mantıklı olacaktır. Özelleştirilmiş focus durumu tasarlarken; görme yetisi sınırlı olanlar başta olmak üzere herkesin kolaylıkla fark edebileceği tasarımlar yapmak gerekiyor.
— Özelleştirilmiş Focus Durumu
Öncelikle hangi elemanların focus durumu alabileceğini belirleyelim. Aklıma gelenler şunlar; butonlar, linkler ve form elemanları.
Varsayılan stilde outline/stroke zaten var. Kendi tasarımımı yaparken ben de bundan faydalanmayı tercih ederim. Bununla birlikte arka plan rengini, stroke rengini, gölgelendirmeyi ve -varsa- yazı rengini değiştirmek focus state i daha farkedilir kılabilir. Burada amaç farkedilebilirliği artırmak; yani hareketlilik/animasyon da yerine göre kullanılabilir. Özelleştirilmiş focus durumu için bu makale faydalı olabilir.
Stateler için teknik detaylar yazılımcıların karar verdiği bir konu olsa da iş yalnızca yazılımcılara kalmamalı fikrindeyim. Tasarımcı olarak iş yüklerini biraz hafifletelim. İyi bir etkileşim için, focus olabilecek elemanların focus durumunu da tasarlamalıyız.
Active
Hover ve focus durumu çoğumuzun bildiği veya en azından tahmin edebildiği durumlardır. Ama active durumunu tahminimce çoğumuz karıştırıyor ya da yanlış biliyoruz. Bir butona tıkladığımızda active durumu çok kısa bir süre içinde olup biter. Aslında bu state, butonla etkileşime geçtimiz zaman aralığı kadar sürer.
Yani active durumu, seçilmiş olma durumu değildir. Daha net görebilmek için, mouse ile buton üzerine gelin ve butona tıklayıp öylece kalın. İşte butona tıkladığınız an boyunca buton active durumundadır, o an aktiftir. Klavye kullanıcıları aynı şeyi , enter tuşuna basılı kalarak görebilirler.
Nasıl tasarlanabilir? Active durumunda, hoverda olduğu gibi süslü tasarımlar yapılmaz. Ve yine genellikle varsayılan durumunun fark edilebilir derecede koyu tonu kullanılır. Kimi zaman hover ile active durumunda aynı renk tonu kullanılabilir (örnek). Tabii tekrar belirteyim bunlar genel kullanım senaryolarıdır ve kesin olarak böyle tasarlanır diyemem.
Bu üç state hakkında bahsedebileceklerim bunlar. Örneklerle birlikte farklarının net şekilde ortaya çıktığını düşünüyorum.
Okuduğunuz için teşekkür ederim.
