Kullanıcı dostu arayüzleri oluşturmakla ilgili makalemin 2.bölümüne hoş geldiniz. Girizgahı çok uzatmadan hemen başlamak istiyorum.
Hover durumu ve imleç kullanın
Kullanıcının tıklayabileceği bir elemana sahipseniz, kullanıcı bu elemanın üzerine geldiğinde hover durumu kullanmanız önemli. Aksi takdirde kullanıcı onun tıklanabilir bir eleman olduğunu anlayamayabilir veya bilse dahi üzerine gelip gelmediğinden emin olamayabilir. Bu nedenle hover kullanmak önemlidir. Eğer hover kullanmıyorsanız dahi mutlaka fare imlecini tıklanabilir bir elemanın üzerine geldiğinde değiştirin. Ben bu örneği accordion menu yaparak hazırladım bakalım örneğimize:
Yanlış kullanım olarak belirtilmiş örneğimizde accordion'daki soruların birinin üzerine gelsek bile tasarım bize üzerine geldiğimize dair herhangi bir geri bildirim vermiyor. Ancak doğru kullanımda hem arkaplan rengi ve yazı rengi değişiyor hem de imlecin davranışı değişiyor. Bu sayede kullanıcı sağdaki örnekte o elemanın tıklanabilir bir eleman olduğuna emin olabiliyor ancak soldaki örnek bazı kullanıcılar için kafa karıştırıcı olabilir.
Oluşabilecek hataları kullanıcıya bildirme ve çözüm önerme
Kullanıcının yapacağı işlemlerde hata oluşursa bunu kullanıcıya mutlaka bildirin, bu bilginin önemini örnekle biraz daha iyi anlayabiliriz aslında. Kullanıcının bir ürünü sepete eklemek istediğini varsayalım, kullanıcı sepete ekle butonuna bastığında bir yükleniyor animasyonunun başladığını ancak arkaplanda hata oluştuğu için bu yükleniyor animasyonunun hiç bitmediğini farz edelim. Bu işlerle ilgili çok bilgisi olmayan bir kullanıcının bu durumun bir sunucu yoğunluğu sonucu ortaya çıktığını düşünebilir ve uzun süre yüklenmesini bekleyebilir.
Bu nedenle yaptığınız işlemlere hata geri bildirimi verin ve olası çözüm önerilerinde bulunun.
Anlık değişiklikler için Toggle Switch kullanın
Kullanıcıya light/dark tema seçimi yapma şansı verdiğinizi düşünelim ve bu değişimin kullanıcı ayarı değiştirdiği gibi olduğunu düşünelim. Elbet görmüşsünüzdür bu örneği diğer internet sitelerinde sık sık kullanılan bir tekniktir ve olması gereken de budur zaten. Bu tarz bir bir ayarı kullanıcıya düz checkbox ile sunmaktansa Toggle Switch ile sunmak çok daha iyidir, çünkü insanlar özellikle akıllı telefonlar sayesinde bu kullanıma çok alıştılar.
Bu örnek biraz kaotik duruyor farkındayım ancak sorun yok, sadece bir örnek
Ek olarak HTML5'in doğal bir Toggle Switch inputu olmadığını, bu Toggle Switch'lerin checkbox'lar üzerinden yapıldığını belirteyim. Yani <input type="switch"> gibi bir kullanım söz konusu değil. Belki daha sonra bununla ilgili de bir makale hazırlayabilirim.
Şimdilik bu kadardı, hem örnekleri hazırlayıp hem de yazıyı yazmak benim için biraz zaman alan bir işlem olduğundan çok fazla şey gösteremiyorum maalesef. Bir sonraki makalede görüşmek üzere...
Sonradan ekleme: İlk örneğin resminde yanlış kullanım ibaresinin ikonunu değiştirmeyi unutmuşum, şu an örneğin kodlarını sildiğimden tekrar yapıp değiştirmek istemedim o yüzden öyle kalsın
Keyifli sosyaller efendim.
Hover durumu ve imleç kullanın
Kullanıcının tıklayabileceği bir elemana sahipseniz, kullanıcı bu elemanın üzerine geldiğinde hover durumu kullanmanız önemli. Aksi takdirde kullanıcı onun tıklanabilir bir eleman olduğunu anlayamayabilir veya bilse dahi üzerine gelip gelmediğinden emin olamayabilir. Bu nedenle hover kullanmak önemlidir. Eğer hover kullanmıyorsanız dahi mutlaka fare imlecini tıklanabilir bir elemanın üzerine geldiğinde değiştirin. Ben bu örneği accordion menu yaparak hazırladım bakalım örneğimize:
Yanlış kullanım olarak belirtilmiş örneğimizde accordion'daki soruların birinin üzerine gelsek bile tasarım bize üzerine geldiğimize dair herhangi bir geri bildirim vermiyor. Ancak doğru kullanımda hem arkaplan rengi ve yazı rengi değişiyor hem de imlecin davranışı değişiyor. Bu sayede kullanıcı sağdaki örnekte o elemanın tıklanabilir bir eleman olduğuna emin olabiliyor ancak soldaki örnek bazı kullanıcılar için kafa karıştırıcı olabilir.
Oluşabilecek hataları kullanıcıya bildirme ve çözüm önerme
Kullanıcının yapacağı işlemlerde hata oluşursa bunu kullanıcıya mutlaka bildirin, bu bilginin önemini örnekle biraz daha iyi anlayabiliriz aslında. Kullanıcının bir ürünü sepete eklemek istediğini varsayalım, kullanıcı sepete ekle butonuna bastığında bir yükleniyor animasyonunun başladığını ancak arkaplanda hata oluştuğu için bu yükleniyor animasyonunun hiç bitmediğini farz edelim. Bu işlerle ilgili çok bilgisi olmayan bir kullanıcının bu durumun bir sunucu yoğunluğu sonucu ortaya çıktığını düşünebilir ve uzun süre yüklenmesini bekleyebilir.
Bu nedenle yaptığınız işlemlere hata geri bildirimi verin ve olası çözüm önerilerinde bulunun.
Anlık değişiklikler için Toggle Switch kullanın
Kullanıcıya light/dark tema seçimi yapma şansı verdiğinizi düşünelim ve bu değişimin kullanıcı ayarı değiştirdiği gibi olduğunu düşünelim. Elbet görmüşsünüzdür bu örneği diğer internet sitelerinde sık sık kullanılan bir tekniktir ve olması gereken de budur zaten. Bu tarz bir bir ayarı kullanıcıya düz checkbox ile sunmaktansa Toggle Switch ile sunmak çok daha iyidir, çünkü insanlar özellikle akıllı telefonlar sayesinde bu kullanıma çok alıştılar.
Bu örnek biraz kaotik duruyor farkındayım ancak sorun yok, sadece bir örnek
Ek olarak HTML5'in doğal bir Toggle Switch inputu olmadığını, bu Toggle Switch'lerin checkbox'lar üzerinden yapıldığını belirteyim. Yani <input type="switch"> gibi bir kullanım söz konusu değil. Belki daha sonra bununla ilgili de bir makale hazırlayabilirim.
Şimdilik bu kadardı, hem örnekleri hazırlayıp hem de yazıyı yazmak benim için biraz zaman alan bir işlem olduğundan çok fazla şey gösteremiyorum maalesef. Bir sonraki makalede görüşmek üzere...
Sonradan ekleme: İlk örneğin resminde yanlış kullanım ibaresinin ikonunu değiştirmeyi unutmuşum, şu an örneğin kodlarını sildiğimden tekrar yapıp değiştirmek istemedim o yüzden öyle kalsın
Keyifli sosyaller efendim.