Bu makalemde daha kullanıcı dostu arayüzler oluşturmak için ufak bilgiler vermek istiyorum, bu makalede kullanacağım tüm örnekler benim tarafımdan HTML ve TailwindCSS kullanarak hazırlanmış örnekler olacaktır bunu da belirtmek istedim.
İlk bahsetmek istediğim konu dikey menülerin gruplandırılması olacak, aşağıda örneklerini vereceğim ancak fazla seçeneğe sahip bir dikey menününüz varsa bu dikey menüdeki tüm elemanları alt alta sıralamak yerine gruplara ayırıp gruplarla listeletmek kullanıcının o dikey menüde kafasının karışmasını önemli ölçüde azaltacaktır.
Yukarda hazırlamış olduğum örneğe bakalım, kullanıcının hesabıyla ilgili olan ayarlar diğerleriyle karışmış durumda ve bu bazı kullanıcılar için kafa karıştırıcı olabilir, öte yandan sağdaki örneğe baktığımızda her şey taraması ve bulması çok daha kolay halde dizayn edilmiş. Kullanıcı kendi hesabıyla ilgili ayarlara ulaşmak istediğine nereye bakacağını çok kolay bir şekilde bilir. Ama soldaki menü tasarımında bu pek mümkün olmaz çünkü yerini ezberleseniz bile gözünüz seçmekte zorlanabilir. Yalnızca kullanım açısından değil, tasarım açısından baktığımızda da sağdaki örnek çok daha ferah.
Açık ve direkt olun.
Bahsedeceğim bir sonraki husus ise tasarımdan çok arayüzlerde kullanılan kelime veya cümle seçimleri olacak. Bu örnek size biraz saçma ve anlamsız gelebilir. Bunu anlıyorum ancak her kullanıcının bilgisayarla içli dışlı olamayacağını aklınızdan çıkarmayın. Sitenizde bir onay kutusu çıkardığınızı düşünün, bu onay kullanıcıya 2 farklı seçim sunuyor ve bu seçimlerden biri "iptal" iken diğeri ise yapılan işlemi onaylamak üzerine bir seçim. Bu durumda siz bu onaylama butonu için nasıl bir kelime tercih ederdiniz?
"İptal et" ve "Tamam" gibi bir seçenek bütünü mü yoksa "İptal et" ve "Evet, sil" gibi kullanıcıya mevzu bahis eylemin ne olduğunu hatırlatacak ve onun içini rahatlatacak bir seçenek bütünü mü?
Yukarıdaki 2 örnek arasındaki tek fark birinde "Tamam" yazıyorken diğerinde "Sil" yazıyor olması. Solda gördüğümüz yanlış örnek kullanıcı için bir tedirginlik kaynağı oluştururken sağdaki örnek böyle bir sorun yaşatmaz. Çünkü bir tarafta "Sil" yazıyor, bu durumda bu onay ekranını onaylamak istemeyen kullanıcı bir tarafta "Sil" yazdığı için gönül rahatlığıyla diğer butona tıklayacaktır.
Ancak soldaki yanlış örneğe baktığımızda ise kafasında "bunların hangisi silmemi sağlıyor?" düşüncesini oluşturacak pek çok kullanıcı mevcut. Biliyorum şu an aklınızdan "ne alaka bu adam okuma özürlü mü ki" gibi düşünceler geçiyor ancak gerçekten de bu onay kutusunda kafası karışabilecek çok fazla kullanıcı olacağına emin olabilirsiniz. Çünkü çoğu kullanıcı onay kutusundaki mesajı okumaz ve sadece butonları okuyarak tıklamaya çalışır.
Önemli/baskın butonların öne çıkarılması
Bir üstteki örneği hazırlarken aklıma bir başka önemli konu daha geldi, o nedenle şu an bahsedeceğim konuyu da yukardaki örneği birazcık değiştirerek göstereceğim. Tıpkı yukardaki gibi yan yana birden fazla butonunuz olan bir tasarımınız olduğunu varsayalım. Bu iki butonun da aynı renklerde, aynı kontrast oranında olması genelde iyi bir kullanım değildir. Çünkü bu butonlardan birisi diğerinden daha önemli veya baskındır.
Örnekte de gözüktüğü gibi "Sil" butonu iptal et butonuna kıyasla daha çok kullanılacak bir buton. Bu nedenle bu butonu renkli, diğerini ise nispeten daha renksiz bir şekilde tasarlamak kullanıcının ilk olarak önemli olan butona gözünün kaymasını sağlayacaktır. Benzer bir örnek de yapacağınız sitede eğer üyelik sistemi bulunuyorsa kullanılabilir. "Üye ol" ve "giriş yap" butonlarını yan yana veya alt alta koymak istediğinizde "Üye ol" butonunun daha önde gözükmesi her zaman daha iyi olacaktır. Sitenize yeni gelen bir kullanıcı üye olma butonunu aramakla gereksiz vakit kaybetmemelidir her şeyden önce.
Kullanıcıya yaptığı hatayı geri alma şansı tanıyın
Son olarak eğer yaparsanız kullanıcıya büyük kıyak geçmiş olacağınız, doğru/yanlıştan ziyade yaparsanız daha iyi olabilecek bir özellikten bahsedeceğim. O nedenle bu örnekte doğru kullanım veya yanlış kullanım ibareleri göremeyeceksiniz. Zaten atmış olduğum alt başlıktan anlamış olmanız gerekiyor, kullanıcının yaptığı işlem sonrasında geri bildirim verdiğinizde kullanıcıya bir de işlemi geri alması için seçenek sunarsanız kullanıcı deneyimini arttırmış olursunuz.
Ben geri bildirimleri genelde toast message şeklinde yaparım ve örneğimde de bu şekilde yaptım yine. Basit bir şekilde "Kapat" butonu koyup "ee bu hayat böyle gülüm hata yaptıysan cezanı çek şimdi" demek yerine kullanıcının yapacağı hatadan geri dönmesini sağlayabileceğiniz bir seçenek de koyarsanız yanlış seçim yapan kullanıcının sitenizden memnun kalma oranı büyük ölçüde artacaktır.
Şimdilik bu kadar olsun efendim, başlık yeterince uzun olduğu için bir de "Bölüm 1" gibi ibareler eklemek istemedim ancak bu, bu tarz tüyolar verdiğim blog girdisi serisinin yalnızca 1.bölümü olacak. Yani ilerde bu tarz bilgileri verdiğim başka bölümler de yayınlamayı düşünüyorum.
Keyifli sosyaller.
İlk bahsetmek istediğim konu dikey menülerin gruplandırılması olacak, aşağıda örneklerini vereceğim ancak fazla seçeneğe sahip bir dikey menününüz varsa bu dikey menüdeki tüm elemanları alt alta sıralamak yerine gruplara ayırıp gruplarla listeletmek kullanıcının o dikey menüde kafasının karışmasını önemli ölçüde azaltacaktır.
Yukarda hazırlamış olduğum örneğe bakalım, kullanıcının hesabıyla ilgili olan ayarlar diğerleriyle karışmış durumda ve bu bazı kullanıcılar için kafa karıştırıcı olabilir, öte yandan sağdaki örneğe baktığımızda her şey taraması ve bulması çok daha kolay halde dizayn edilmiş. Kullanıcı kendi hesabıyla ilgili ayarlara ulaşmak istediğine nereye bakacağını çok kolay bir şekilde bilir. Ama soldaki menü tasarımında bu pek mümkün olmaz çünkü yerini ezberleseniz bile gözünüz seçmekte zorlanabilir. Yalnızca kullanım açısından değil, tasarım açısından baktığımızda da sağdaki örnek çok daha ferah.
Açık ve direkt olun.
Bahsedeceğim bir sonraki husus ise tasarımdan çok arayüzlerde kullanılan kelime veya cümle seçimleri olacak. Bu örnek size biraz saçma ve anlamsız gelebilir. Bunu anlıyorum ancak her kullanıcının bilgisayarla içli dışlı olamayacağını aklınızdan çıkarmayın. Sitenizde bir onay kutusu çıkardığınızı düşünün, bu onay kullanıcıya 2 farklı seçim sunuyor ve bu seçimlerden biri "iptal" iken diğeri ise yapılan işlemi onaylamak üzerine bir seçim. Bu durumda siz bu onaylama butonu için nasıl bir kelime tercih ederdiniz?
"İptal et" ve "Tamam" gibi bir seçenek bütünü mü yoksa "İptal et" ve "Evet, sil" gibi kullanıcıya mevzu bahis eylemin ne olduğunu hatırlatacak ve onun içini rahatlatacak bir seçenek bütünü mü?
Yukarıdaki 2 örnek arasındaki tek fark birinde "Tamam" yazıyorken diğerinde "Sil" yazıyor olması. Solda gördüğümüz yanlış örnek kullanıcı için bir tedirginlik kaynağı oluştururken sağdaki örnek böyle bir sorun yaşatmaz. Çünkü bir tarafta "Sil" yazıyor, bu durumda bu onay ekranını onaylamak istemeyen kullanıcı bir tarafta "Sil" yazdığı için gönül rahatlığıyla diğer butona tıklayacaktır.
Ancak soldaki yanlış örneğe baktığımızda ise kafasında "bunların hangisi silmemi sağlıyor?" düşüncesini oluşturacak pek çok kullanıcı mevcut. Biliyorum şu an aklınızdan "ne alaka bu adam okuma özürlü mü ki" gibi düşünceler geçiyor ancak gerçekten de bu onay kutusunda kafası karışabilecek çok fazla kullanıcı olacağına emin olabilirsiniz. Çünkü çoğu kullanıcı onay kutusundaki mesajı okumaz ve sadece butonları okuyarak tıklamaya çalışır.
Önemli/baskın butonların öne çıkarılması
Bir üstteki örneği hazırlarken aklıma bir başka önemli konu daha geldi, o nedenle şu an bahsedeceğim konuyu da yukardaki örneği birazcık değiştirerek göstereceğim. Tıpkı yukardaki gibi yan yana birden fazla butonunuz olan bir tasarımınız olduğunu varsayalım. Bu iki butonun da aynı renklerde, aynı kontrast oranında olması genelde iyi bir kullanım değildir. Çünkü bu butonlardan birisi diğerinden daha önemli veya baskındır.
Örnekte de gözüktüğü gibi "Sil" butonu iptal et butonuna kıyasla daha çok kullanılacak bir buton. Bu nedenle bu butonu renkli, diğerini ise nispeten daha renksiz bir şekilde tasarlamak kullanıcının ilk olarak önemli olan butona gözünün kaymasını sağlayacaktır. Benzer bir örnek de yapacağınız sitede eğer üyelik sistemi bulunuyorsa kullanılabilir. "Üye ol" ve "giriş yap" butonlarını yan yana veya alt alta koymak istediğinizde "Üye ol" butonunun daha önde gözükmesi her zaman daha iyi olacaktır. Sitenize yeni gelen bir kullanıcı üye olma butonunu aramakla gereksiz vakit kaybetmemelidir her şeyden önce.
Kullanıcıya yaptığı hatayı geri alma şansı tanıyın
Son olarak eğer yaparsanız kullanıcıya büyük kıyak geçmiş olacağınız, doğru/yanlıştan ziyade yaparsanız daha iyi olabilecek bir özellikten bahsedeceğim. O nedenle bu örnekte doğru kullanım veya yanlış kullanım ibareleri göremeyeceksiniz. Zaten atmış olduğum alt başlıktan anlamış olmanız gerekiyor, kullanıcının yaptığı işlem sonrasında geri bildirim verdiğinizde kullanıcıya bir de işlemi geri alması için seçenek sunarsanız kullanıcı deneyimini arttırmış olursunuz.
Ben geri bildirimleri genelde toast message şeklinde yaparım ve örneğimde de bu şekilde yaptım yine. Basit bir şekilde "Kapat" butonu koyup "ee bu hayat böyle gülüm hata yaptıysan cezanı çek şimdi" demek yerine kullanıcının yapacağı hatadan geri dönmesini sağlayabileceğiniz bir seçenek de koyarsanız yanlış seçim yapan kullanıcının sitenizden memnun kalma oranı büyük ölçüde artacaktır.
Şimdilik bu kadar olsun efendim, başlık yeterince uzun olduğu için bir de "Bölüm 1" gibi ibareler eklemek istemedim ancak bu, bu tarz tüyolar verdiğim blog girdisi serisinin yalnızca 1.bölümü olacak. Yani ilerde bu tarz bilgileri verdiğim başka bölümler de yayınlamayı düşünüyorum.
Keyifli sosyaller.
