Her Web Tasarım Projesinde Uymanız Gereken İyi Kullanıcı Arayüzü Tasarımının 10 Kuralı

Sabit kodlanmış, asla değişmeyen HTML'lerine sahip Geocities sitelerinin günleri geride kaldı. Günümüzde siteler ve uygulamalar dinamik ve etkileşimlidir. Tasarımcılar olarak bizim işimiz, web UI tasarımımızla etkileşime girdikleri arayüzün mümkün olduğunca ideale yakın olmasını sağlamaktır. Neyse ki, yardımcı olabilecek neredeyse evrensel bazı kurallar var. Gelecekteki tüm web tasarım projelerinizi geliştirebilmeniz için en iyi tasarım ilkeleri olduğunu düşündüğümüzü bir araya getirdik.

Her Web Tasarım Projesinde Uymanız Gereken İyi Kullanıcı Arayüzü Tasarımının 10 Kuralı

Youtube Kanalımıza Abone Olun

1. Kullanıcının İhtiyaç Duyduğu Her Şeyi Kolayca Erişilebilir Hale Getirin

Web tasarım uygulamaları için bir dizi tasarım aracı, bir video oyunundaki bir karakterin envanteri, bir elektronik tablo veya başka herhangi bir şey olsun, kullanıcı istediğini bulamazsa, yazılımınızdan geri döner. Sekmeler şeyleri erişilebilir kılar. Kısayollar ve vurgulu araç ipuçları da.

Örneğin Divi'yi düzenlemek için sekmeleri kullanmayı seçtik. İhtiyacınız olan tüm araçlar, kategorilere göre ayrılmış şekilde oluşturucunun içindedir. Araç çubuklarına da benzer şekilde erişilebilir. WordPress kullanıyorsanız, yönetici araç çubuğu size gönderi düzenleyiciye, tema özelleştiriciye, eklenti ayarlarına vb. hızla erişme olanağı sağlar. Seçenekler açık bir şekilde etiketlenmiştir ve bunları aramanız gerekmez.

Başka bir örnek, Yardım/Destek/İletişim seçenekleridir. Bir mobil uygulama, web uygulamaları, WordPress web siteleri veya başka herhangi bir şey için bir kullanıcı arayüzü tasarlarken, kullanıcılarınızın her zaman Yardım düğmesini (veya Desteğe Ulaşın düğmesini) bulması gerekir. Bir noktada kesinlikle sizinle iletişime geçmeleri gerekecek . Bu yüzden yardım düğmelerini her zaman öne ve ortaya koyduğunuzdan emin olmalısınız. Divi'ye bakın. Her modülde, ihtiyaç duyduğunuz her an parmaklarınızın ucunda, sizin için hazır bir destek butonumuz var.

Bunun da ötesinde, hangi özellik ile çalışıyorsanız o konuda bir eğitim videosu içeren yardım penceresi açılır. Bu modül içi dahil edildiğinde, Divi çok daha erişilebilir ve daha az sinir bozucu hale gelir. Ayrıca, kullanıcı arayüzünün bir parçası olarak, yardımın konumu tüm üründe tutarlıdır. Bu da bizi bir sonraki noktaya getiriyor…

2. Tutarlı Olun

Biraz önce söylediğimiz gibi, kullanıcı arayüzünüzde özellik yerleşiminde tutarlı olmak önemlidir. Ancak, kullanıcı arayüzünüzün tüm üründe çalıştığından ve tutarlı göründüğünden de endişe duymalısınız. Menü bir sayfanın üstünde ve diğerinin altında olmasın. Menü öğelerini her yüklendiğinde yeniden düzenlemeyin. Kullanıcılarınızın sitenizdeki şeylerin nerede olduğunu bildiğinden emin olun. Blog gönderilerinizin altında bir iletişim formu bulundurursanız, bırakmaya karar vermeyin. Kullanıcılar fark edecek ve şaşıracaklar.

Tutarlılık, yazı tiplerinizi de içerir ve tasarım sayfadan sayfaya çalışmalıdır. Sayfadan sayfaya başlık/gövde yazı tiplerini değiştirmeyin.

En az sürpriz ilkesi adı verilen ilginç bir fikir var, diyor ki, kullanıcınızı bir şeyin nasıl çalıştığına şaşırtırsanız… daha sezgisel olması için yeniden çalışın.

Ek olarak, kullanıcı arayüzünüzün platformunuz için uygun olduğundan emin olmalısınız - iOS uygulamaları bazı durumlarda Android'den farklı çalışır. Masaüstü sitelerin menüler, galeriler ve hatta ürün satın alma için mobil sitelerden farklı ihtiyaçları vardır. Tutarlılık, sitenizde ne yapacaklarını anlamalarını sağlayarak kullanıcılarınızı hayal kırıklığına uğratmamanız anlamına gelir.

3. Açık Olun

Bu, yukarıdakinin tekrarı gibi görünebilir, ancak netlik ve tutarlılık farklıdır. Netlik, kullanıcılarınızın her zaman ne yapacaklarını bilmelerini istediğiniz anlamına gelir. Bazı yönlerden bu, UX tasarımına da yansıyor çünkü kullanıcılarınızdaki hayal kırıklığını azaltıyor ve elde tutma oranını artırıyor ve hemen çıkma oranını düşürüyor.

Netlik, minimalist (ve bir dereceye kadar acımasız) web tasarımının bu kadar popüler olmasının nedenidir. İnsanların herhangi bir sitenin veya sayfanın amacı konusunda kafası karışmaz çünkü (veya çok az) dağınıklık yoktur. Ling's Cars'ın yaptığının tam tersi bir deneyim sağlamak istiyorsunuz.

Açıklığa ulaşmanın bir yolu, farklı sayfalarda bir adımdan diğerine geçmektir. Bir ödeme işleminin sayfayı aşağı kaydırması veya tek bir bölüm veya kutu içinde yer alması yerine, kullanıcılarınızın bir Ürün Sayfasından Alışveriş Sepeti sayfasına, Ödeme Sayfasına ve Ödemenizi Seçin sayfasına ve Sipariş Ver sayfasına gitmesini sağlayın. bir Onay sayfası. (Aşağıdaki resimde de görebileceğiniz gibi Amazon bunu yapıyor).

Herhangi bir belirsizliği ortadan kaldırarak, süreçte tam olarak nerede durduklarını bileceklerdir. Bu özellikle mobil kullanıcılar için önemlidir, çünkü ekran gayrimenkulü çok değerlidir .

4. Geribildirim Verin

Kullanıcıların isteyeceği son şey, neler olup bittiğini anlamamaktır. Bir düğmeye basarlarsa, düğmeye basıldığına dair bir gösterge sağlayın. Bunu birden fazla şekilde yapabilirsiniz. Düğmeyi canlandırarak sayfaya batıyormuş gibi görünmesini sağlayabilirsiniz. Yükleme simgeleri (MacOS Rainbow Wheel gibi), söylemeye gerek kalmadan “İsteğiniz üzerinde çalışıyoruz” şeklinde geri bildirim sağlar.

Kullanıcıların dosya yüklemesine izin verirseniz (Dropbox veya Google Drive gibi), kalan süreyi belirtin. Onlara eylemlerinin başarılı olduğunu söyleyen bir açılır pencere veya model sağlayın, hayal kırıklığını ve kafa karışıklığını azaltır.

Gerçekten, kullanıcı arayüzünüzde herhangi bir işlem yaptığında, sadece küçük bir onay, iyi bir deneyim ile cansız bir deneyim arasındaki fark olabilir.

5. Tanıma Kullanın, Hatırlamayın

İyi test çözme becerilerinin aksine, kullanıcılarınızın sitenizi gördüklerinde sitenizle ilgili her şeyi tanımasını istersiniz. Bunun hakkında düşünmeleri ve bilgileri hatırlamaları gerekmemelidir. Her şeyden çok, her parçanın sezgisel olması ve bir noktadan diğerine hareket etmesi için arayüzünüzü düzene sokuyorsunuz. Bu, yukarıda bahsettiğimiz gibi tanınabilir simgeler kullanılarak yapılabilir. İnsanlar belirli şeyler için belirli simgeleri tanır.

Ayrıca, bir kullanıcıyı ilk kez olmasa bile bir süreç boyunca yönlendirmek için sanal turlar kullanılarak da yapılabilir. İlk mod ortaya çıktığında süreci tanıyacaklar ve bu eylemleri tam olarak nasıl gerçekleştireceklerini hatırlamak için enerji harcamak zorunda kalmayacaklar.

Bunu, kullanıcılarınıza sitenizde neyin ne yaptığını hatırlatan iyi yerleştirilmiş mesajlaşma yoluyla da başarabilirsiniz. Bunu Divi'de basit vurgulu araç ipuçlarıyla başarıyoruz - biri simgenin ne yaptığını hatırlamasa bile, onları işlevine yönlendiriyoruz. Bundan sonra, simgeyi tanımaları gerekir. Veya en azından tekrar gelirlerse araç ipucu. Veya bilgiyi almak için gezinme süreci bile.

6. İnsanların Önce Nasıl Etkileşim Yapacağını Seçin

fotoğraf kredisi John Picklap, MarieClaire.com'un izniyle

En kötüsü ne biliyor musun? Bir çekme kapısını itmek. Özellikle de ona ulaşmak için bir öncekine bastığınızda. Bu binanın tasarımcısı, kullanıcı arayüzünü tutarsız hale getirdi, bu yüzden yapmanız gereken şeyi nasıl yapacağınıza dair hiçbir fikriniz yoktu. Bir düğmeye benzeyen ama yine de yanıt bekleyen bir şeye basmaya ne dersiniz? Bunun nedeni, bu tasarımcıların, kullanıcılarının ürünleriyle nasıl etkileşime gireceğini hesaba katmamalarıydı. Bu nedenle, kullanıcı arayüzünüzü tasarlarken bir (belki iki) hareket seçin ve buna bağlı kalın.

Mobil cihazlarda, bu kaydırma eğilimi gösterir. Snapchat'e bakın. Ayarlarınıza ve profilinize ulaşmak da dahil olmak üzere hemen hemen her eylem kaydırarak gerçekleştirilir . Kendinizi görmek için Snapchat'te aşağı, sohbetlere gitmek için sola, hikayelere sağa ve anılarınıza (veya bu hafta ne denirse) gitmek için yukarı kaydırabilirsiniz. Kullanıcılarının ürünleriyle nasıl etkileşim kurmasını istediklerini seçtiler ve kullanıcı arayüzlerini buna uygun olarak tasarladılar. Tam tersi değil.

Kullanıcı arayüzünüzü tasarlarken, menüler ve dokunuşlar, ikonografi, kaydırma ve hareketler veya tamamen başka bir şey kullanıp kullanmayacağınızı seçin. Alexa ve Siri, birincil UI etkileşimleri olarak ses girişini kullanır. Bilgi sağlama ve görevlerini yerine getirme biçimleri, bu belirli girdi etrafında tasarlanmıştır. Ve bir kullanıcı olarak, sezgisel olarak ne yapacağınızı bilirsiniz çünkü bu bilgiler başlangıçta sizin için hazırlanmıştır. Tasarımcılar size ne yapmanız gerektiğini söyledi ve siz de yaptınız . Kullanıcılarınız, onlar için aynı şeyi yaptığınızı takdir edeceklerdir.

7. Tasarım Standartlarını Takip Edin

Eski atasözü bozuk değilse tamir etme burada da geçerlidir. Standart işe yarıyorsa, bir şeyi yeniden canlandırmaya çalışmanıza gerçekten gerek yok. Bu, simge kullanımından öğelerin standart yerleşimine kadar gider. Kullanıcılarınızın bir şeylerin yapmasını beklediklerine karşı çıkmak istemezsiniz. İnsanlar soru işaretlerinin (?) yardıma işaret ettiğini biliyorlar. Bu yüzden ünlem işareti (!) kullanmayın . Kullanıcıların mobil menünüzü bulmasını istiyorsanız ızgara yerine hamburger simgesini (üç yığılmış çizgi) kullanın.

Arama çubuklarını düşünün. Çoğu sitede benzer yerlerde bulunma eğilimindedirler: kenar çubuğunun üstü veya başlık menüsünün sonu. Orada değilse, sayfanın üst bölümünün ortası. Kenar çubuğunuzun alt kısmına, sayfa altbilgilerine veya blog gönderilerinizin metninin altına tek arama alanını eklemeye karar verirseniz, insanlar nereye bakacaklarını bilemezler. Standart büyüteç simgesiyle tanımlasanız bile.

Alışılmışın dışında düşünmekte ve yeni ve yenilikçi bir tasarıma yönelmekte yanlış bir şey yoktur, ancak bu, tasarımın kullanımının zor olduğu anlamına gelmemelidir.

8. Element Hiyerarşisi Önemlidir

Hayır, Dünya, Rüzgar, Su veya Ateşin diğerlerinin patronu olduğunu kastetmiyoruz. Sayfanızdaki öğelerin hem yardımcı program hem de kullanıcının sayfayı görme şekli için net bir hiyerarşiye sahip olması gerektiğini kastediyoruz. Temel olarak, en önemli işlevlerin ilgili sayfalarının başında olduğundan emin olmak istersiniz. Ek olarak, bu tür bir hiyerarşi, kullanıcıyı organik olarak sayfanın aşağısına yönlendirebilir ve kullanıcıyı hizmetiniz boyunca yönlendirebilir.

Süreç boyunca ilerledikçe boyutu azalan büyük öğeler, önem ve düzenin göstergesidir. Renk ve kontrast da öyle. Boşluk kullanımı da önemlidir, çünkü dağınıklık kullanıcının ilerlemesini durdurabilir ve gözü sayfanın amacından uzaklaştırabilir. Temiz çizgiler, bol miktarda alan ve iyi tanımlanmış öğeler, kullanıcılarınıza herhangi bir belge veya açıklama olmadan kullanıcı arayüzünüzde nasıl hareket edeceklerini görsel olarak gösterebilir.

İyi bir temel kural, işlerin soldan sağa, yukarıdan aşağıya akmasını istemenizdir.

9. İşleri Basit Tutun

Bu iletişim formuna bakın:

Şimdi şuna bakın:

Her ikisi de istekte bulunmak için iletişim formlarıdır. Bunlardan birini doldurmak sorun değil, diğeri ise biraz daha fazla baş ağrısı yapıyor. Bir devlet formu olmanın dışında, alt formun tasarımı kullanıcı için değil, yönetici için yapılmıştır. Bu senin işin değil. İşiniz, işleri kullanıcı için olabildiğince sorunsuz hale getirmektir . Ve bunu yapmanın en iyi yollarından biri, kesinlikle gerekli olmayan her şeyi kesmektir.

10. Kullanıcılarınızı Özgür ve Kontrol Altında Tutun

Dokunmak istediğimiz en son şey - ve kullanıcı arayüzünüzle yapmak istediğiniz en son şey - kontrolü kullanıcıdan almaktır. Veya tasarımınız tarafından kısıtlanmış veya kısıtlanmış hissetmelerini sağlamak için. Onları güçlendirmek istiyorsunuz ve kullanıcı arayüzünüz onların istedikleri eylemleri gerçekleştirmelerine izin vermelidir. Bu kuralın iki bölümü vardır: bağlam ve izin .

İlk olarak, kullanıcının yapması gereken işlem ne olursa olsun, üzerinde işlem yapmak istediği şeyin yakınında bulunmalıdır. Bir gönderiyi düzenlemeleri gerekiyorsa, düzenle düğmesi kaydet , yayınla/gönder , önizleme düğmelerinin yanında olmalıdır. Aslında, daha iyi seçenek, kullanıcının belirli bir öğe (veya sayfa) üzerinde gerçekleştirebileceği tüm eylemler için bağlamsal menüler içindir. Kullanıcı arayüzünüzde tutarlıysanız, yukarıda bahsettiğimiz gibi, kullanıcılarınız bu bağlam menülerinin veya araç çubuklarının her zaman belirli herhangi bir öğe için tüm eylem listesine sahip olacağını anlayacaktır.

Ek olarak, kullanıcı arayüzünüz her zaman kullanıcıya yaptıkları herhangi bir işlemden çıkabilecek veya geri dönebilecekmiş gibi hissettirmelidir. Kullanıcı arayüzünü tasarlarken, onu kullanacaklar . Bu nedenle, işi yapmak için ihtiyaç duydukları şeyi yapmak için izne (ya da belki de özgürlüğe) ihtiyaçları vardır. Bunu yapmak, e-ticaret ödemenizin her sayfasına bir iptal düğmesi eklemek kadar basit olabilir (çünkü tarayıcının geri düğmesine basmak işlerin sarpa sarmasına neden olabilir). Belki bu bir geri alma özelliğidir, bu yüzden denemenin uygun olduğunu düşünürler. Veya büyük ölçekli projeler için bir revizyon geçmişi (Google Drive veya WordPress veya Git gibi).

Kullanıcılarınız özgür ve kısıtlamasız hissettiklerinde, belli ki bazı iyi UI tasarım ilkelerini izlemişsinizdir.

Kullanıcı Arayüzü Hazır mı?

Kötü kelime oyunu. Biliyorum üzgünüm. Ancak bu UI kurallarıyla, bir sonraki web tasarım projenizi parkın dışına çıkarmaya kesinlikle hazır olacaksınız. Bunlardan bazıları, bazı projelere diğerlerinden daha fazla uygulanabilirken, iyi UI, iyi UI ve iyi UI, iyi UX'e yol açar. Ama bu tamamen farklı bir yazının konusu.

İyi UI tasarımı için her zaman uyguladığınız herhangi bir kuralınız var mı?

Makale özellikli görsel emojoez / Shutterstock.com