10 UI Tasarım Kuralları Her Web Tasarım Projesi’nde izlenmek iyidir
Sabit kodu HTML’leri ile geocities sitelerinin günleri boyunca ve asla değişmez. Mevcut site ve uygulama dinamik ve etkileşimlidir. Bir tasarımcı olarak işimiz, web UI tasarımımızla etkileşim kurmak için kullandıkları arayüzün ideal ile mümkün olduğunca yakın olmasıdır. Neyse ki, yardımcı olabilecek bazı evrensel kurallar var. Gelecekteki tüm web tasarım projelerinizi geliştirebilmeniz için en iyi tasarım prensibi olarak düşündüğümüz şeyi topladık. 10 UI Tasarım Kuralları Her Web Tasarım Projesi’nde izlenmek iyidir
YouTube kanalımıza abone olun 1. Kullanıcıların tüm ihtiyaçlarını kolayca erişilebilir hale getirin
Başka bir örnek yardım/destek/iletişim seçeneğidir. UI tasarlarken, hücresel uygulamalar, web uygulamaları, WordPress web siteleri veya herhangi bir şey için olsun, kullanıcılarınızın her zaman bir yardım düğmesi (veya iletişim düğmesi) bulması gerekir. Gerçekten birkaç noktada sizinle iletişime geçmeleri gerekiyor. Bu yüzden her zaman yardım düğmesini öne ve ortaya koyduğunuzdan emin olmalısınız. Divi’ye bak. Her modülde, ihtiyacınız olduğunda sizin için, parmaklarınızın ucunda hazır bir destek düğmemiz var. Ayrıca, Yardım penceresi üzerinde çalıştığınız özellikler hakkında bir video eğitimi ile görünür. Bu modüle dahil ederek, Divi çok daha kolay erişilebilir hale gelir ve sinir bozmaz. Ayrıca, kullanıcı arayüzünün bir parçası olarak, yardımın yeri tüm ürünlerde tutarlıdır. Bizi bir sonraki noktaya getiren … 2. Tutarlı
Birkaç dakika önce söylediğimiz gibi, kullanıcı arayüzünüze özelliklerin yerleştirilmesinde tutarlıdır. Ancak UI’nizin tüm ürünlerde de işlev gördüğünü ve tutarlı göründüğünü fark etmelisiniz. Bir sayfanın üstünde ve diğerinin altında bir menü yok. Her yüklendiğinde menü öğesini sıfırlamayın. Kullanıcınızın sitenizde nerede olduğunu bildiğinden emin olun. Kişilik formunu blog yayınınızın altına kaydederseniz, görmezden gelmeye karar vermeyin. Kullanıcılar görecek ve kafası karışacak. Tutarlılık ayrıca sayfadan sayfaya çalışmanız gereken yazı tiplerini ve tasarımları içerir. Yazı tipi başlıklarını/gövdeyi sayfadan sayfaya değiştirmeyin. Kullanıcınızı bir şeyin çalışma şekliyle şaşırırsanız, daha sezgisel olması için yeniden yap. Ayrıca, kullanıcı arayüzünüzün platformunuz için uygun olduğundan emin olmalısınız – iOS uygulaması bazı durumlarda Android’e kıyasla farklı çalışır. Masaüstü siteleri, menüler, galeriler ve hatta ürün kontrolleri için hücresel sitelerden farklı ihtiyaçlara sahiptir. Tutarlılık, sitenizde ne yapacağınızı öğrenmek zorunda kalmaları için kullanıcıları hayal kırıklığına uğratmadığınız anlamına gelir. 3. Açıkçası bu yukarıdaki tekrar gibi görünebilir, ancak netlik ve tutarlılık farklıdır. Netlik, kullanıcınızın herhangi bir zamanda ne yapacağını bilmesini istediğiniz anlamına gelir. Bazı durumlarda, bu aynı zamanda UX tasarımını da etkiler, çünkü kullanıcılarınızdaki hayal kırıklığını azaltır ve elde tutmayı artırır ve baskının oranını azaltır. İnsanlar herhangi bir sitenin veya sayfanın amacı konusunda kafası karışmaz, çünkü (veya biraz) kaos yoktur. Ling’in otomobillerinin yaptığı tersi deneyimi vermek istiyorsunuz. Netlik elde etmenin bir yolu, farklı sayfalarda bir adımdan diğerine geçmektir. Bir ödeme işlemi yerine, sayfayı aşağı kaydırın veya bir bölüme koyun veya ürün sayfasından alışveriş sepeti sayfasına gitmek için kullanıcınıza ödeme sayfasına sayfaya sayfaya ödemenizi seçin Siparişi yerleştirin Onay sayfası için. (Amazon bunu aşağıdaki resimde görebileceğiniz gibi yapar).
Süreçte nerede durduklarını tam olarak bilecekler, herhangi bir belirsizliği ortadan kaldıracaklar. Bu, hücresel kullanıcılar için çok önemlidir, çünkü gayrimenkul ekranı çok pahalıdır. 4. Geri bildirim verin, kullanıcının istediği son şey neler olduğunu anlamak değildir. Düğmeye basarlarsa, düğmeye basıldığına dair bir gösterge verin. Bunu çeşitli şekillerde yapabilirsiniz. Düğmeyi canlandırabilir, sayfaya batarak görünmesini sağlayabilirsiniz. Yükleme simgeleri (MacOS Rainbow Wheel gibi), bunu söylemek zorunda kalmadan “isteğiniz üzerinde çalışıyoruz” geri bildirimi sağlar. Kullanıcıların dosyaları (Dropbox veya Google Drive gibi) yüklemesine izin verirseniz, kalan sürenin göstergelerini verin. Onlara eylemlerinin hayal kırıklığı ve karışıklığı azaltmayı başardığını söyleyen pop-up veya sermaye verin.
Gerçekten, kullanıcı arayüzünüzde herhangi bir işlem yaptığında, sadece küçük bir tanıma iyi deneyim ve daha az hevesli bir fark olabilir. 5. Giriş kullanın, hatırlamayın İyi testler yapma becerilerinin tersi, kullanıcılarınızın sitenizle ilgili her şeyi gördüklerinde tanımasını istersiniz. Bunu düşünmelerine ve bilgileri hatırlamalarına gerek yok. Her şeyden daha fazlası, arayüzünüzü kolaylaştırırsınız, böylece her parça sezgisel olur ve bir noktadan diğerine geçer. Bu, yukarıda bahsettiğimiz gibi tanınabilen bir simge kullanılarak yapılabilir. İnsanlar belirli şeyler için belirli simgeleri tanırlar.
Ayrıca, ilk kez olmasa bile, kullanıcıyı bir işlem boyunca yönlendirmek için sanal bir tur kullanılarak da yapılabilir. İlk sermaye ortaya çıktıktan sonra süreci tanıyacaklar ve bu eylemleri nasıl gerçekleştireceklerini hatırlamak için enerji harcamalarına gerek yok. Ayrıca, kullanıcılarınıza sitenizin ne yaptığını hatırlatan iyi yerleştirilmiş bir mesajla da yapabilirsiniz. Bunu Divi’de basit bir Hover araç ipuçlarıyla başarıyoruz – birisi simgenin ne yaptığını hatırlamasa bile, bunları işlevlerine yönlendiriyoruz. Bundan sonra simgeyi tanımalıdırlar. Ya da en azından tekrar yüzerse araç ipucu. Hatta bilgi almak için yüzme süreci. İnsanların önce nasıl etkileşime gireceğini seçin John Picklap fotoğraf kredisi, marieclaire.com’a ait En kötüsü biliyor musun? Römorkör kapısını itiyor. Özellikle daha önce buna ulaşmak için ittiğinizde. Bina tasarımcısı kullanıcı arayüzünü tutarsız hale getirir, böylece yapmanız gerekenleri nasıl yapacağınızı bilmiyorsunuz. Bir düğmeye benzemeyen, ama yine de bir yanıt bekleyen bir şeye basmaya ne dersiniz? Bunun nedeni, tasarımcıların kullanıcıların ürünleriyle nasıl etkileşime gireceğini düşünmemesidir. Bu nedenle kullanıcı arayüzünüzü tasarlarken, bir hareket (belki iki) seçin ve bakımını yapın.
Mobil cihazlarda kaydırma eğilimindedir. Bkz. Snapchat. Ayarlarınızı ve profillerinizi elde etmek de dahil olmak üzere, hemen hemen her eylem kaydırma ile gerçekleştirilir. Snapchat’i kendinizi görmek için aşağı kaydırabilir, bir konuşma açmak için sola kaydırabilir, hikayeye doğru ve anılarınızı (veya bu hafta adını ne olursa olsun) almak için. Kullanıcıların ürünleriyle nasıl etkileşime girmelerini istediklerini ve onları karşılayacak şekilde tasarlamalarını seçiyorlar. Tam tersi değil. Kullanıcı arayüzü tasarlarken, menüyü ve beats, ikonografi, sürtünme ve jest veya diğerlerini kullanıp kullanmayacağınızı seçin. Alexa ve Siri, ana kullanıcı arayüzü etkileşimi olarak ses girişini kullanırlar. Bilgi sağlama ve görevlerini yapma şekli bu girdi etrafında tasarlanmıştır. Ve bir kullanıcı olarak, başlangıçta sizin için bilgiler ayarlanmıştır çünkü sezgisel olarak ne yapacağınızı biliyorsunuz. Tasarımcılar size ne yapacağınızı söyler ve bunu yaparsınız. Kullanıcınız, onlar için aynı şeyi yapmaya saygı duyacaktır. 7. Tasarım standartlarını takip edin
Atasözü hasar görmezse uzundur, burada geçerlidir. Aslında standart başarılı olursa bir şeyi canlandırmaya çalışmaya gerek yoktur. Simgelerin kullanımından başlayarak standart öğelerin yerleştirilmesine. Kullanıcınızın beklediği şeyle çelişmek istemezsiniz. İnsanlar soru işaretinin (?) Yardım gösterdiğini bilirler. Bu yüzden bir ünlem işareti kullanmayın (!). Bir kullanıcının hücresel menünüzü bulmasını istiyorsanız, bir kutu değil Hamburger simgesini (üç istiflenmiş çizgi) kullanın. Arama çubuğunu düşünün. Çoğu sitede aynı yerde olma eğilimindedirler: kenar çubuğunun üstü veya başlık menüsünün sonu. Orada değilse, üst sayfanın ortası. Kenar çubuğunun, sayfa altbilgisinin altına veya blog yayınınızın metninde tek arama alanını girmeye karar verirseniz, insanlar nerede arayacağınızı bilemez. Standart bir büyüteç simgesiyle tanımlasanız bile. Alışkanlıkları düşünmek ve yeni ve yenilikçi tasarımlar aramakta yanlış bir şey yoktur, ancak bu tasarımın kullanımı zor olduğu anlamına gelmez. 8. Önemli unsurların hiyerarşisi Hayır, hem Dünya, Rüzgar, Su hem de Ateşin diğerlerinin patronu olduğu anlamına gelmiyoruz. Sayfanızdaki öğelerin, kullanıcının sayfayı gördüğü yardımcı programlar ve yollar için net bir hiyerarşiye sahip olması gerektiğini kastediyoruz. Temel olarak, en önemli işlevin her sayfanın üstünde olduğundan emin olmak istersiniz. Buna ek olarak, bu tür bir hiyerarşi kullanıcıyı hizmetleriniz aracılığıyla yönlendirerek kullanıcıyı organik olarak yönlendirebilir. İşlem boyunca hareket ettiğinizde boyut olarak azalmış büyük unsurlar önemi ve düzenliliği gösterir. Aynı şekilde renk ve kontrast ile. Mekanları kullanmak da önemlidir, çünkü kaos kullanıcı ilerlemesini engelleyebilir ve dikkati sayfanın amacından yönlendirebilir. Temiz çizgiler, çok fazla alan ve iyi tanımlanmış öğeler, kullanıcılarınıza herhangi bir belge veya ek açıklama olmadan kullanıcı arayüzünüzde nasıl hareket edeceğinizi görsel olarak gösterebilir. İyi bir pratik kural, her şeyin soldan sağa, yukarıdan aşağıya akmasını sağlamak istediğinizdir. 9. Basit her şey için bu iletişim formuna bakın: Şimdi şuna bakın:
Her ikisi de talep göndermek için iletişim formlarıdır. Bunlardan biri doldurulacak bir sorun yok, diğerleri biraz daha baş ağrısı. Dışarıda bir hükümet formu olarak, aşağıdaki formun şekli kullanıcılar için değil, yöneticiler için yapılır. Bu senin işin değil. İşiniz, her şeyi kullanıcılar için mümkün olduğunca rahat hale getirmektir. Ve bunu yapmanın en iyi yollarından biri, kesinlikle gerekli olmayan her şeyi kesmektir. 10. Kullanıcınızı ücretsiz tutun ve dokunmak istediğimiz son şeyi kontrol edin – ve UI’nizle yapmak istediğiniz son şey kullanıcıdan kontrol almaktır. Ya da tasarımınız tarafından kısıtlanmış veya sınırlı hissetmelerini sağlamak. Onları güçlendirmek istiyorsunuz ve kullanıcı arayüzünüz istedikleri eylemi yapmalarına izin vermelidir. Bu kuralda iki bölüm vardır: bağlam ve izin. İlk olarak, kullanıcılar tarafından yapılması gereken eylemler ne yapmak istediklerinin yanına yerleştirilmelidir. Gönderi düzenlemeleri gerekiyorsa, Düzenle düğmesinin kaydet düğmesine yakın olması, yayınla/gönder, önizleme olması gerekir. Aslında, daha iyi bir seçenek, belirli öğeler (veya sayfalar) tarafından yapılabilecek tüm işlemler için bağlamsal bir menüdür. Yukarıda bahsettiğimiz gibi, kullanıcı arayüzünüzle tutarlıysanız, kullanıcınız içerik menüsünün veya çubuk menüsünün her zaman belirli öğeler için işlem listesine sahip olacağını anlayacaktır.
Buna ek olarak, kullanıcı arayüzünüz, kullanıcıları her zaman yaptıkları eylemden kurtulabilir veya geri yükleyebilir gibi hissettirmelidir. Kullanıcı arayüzü tasarladığınızda, kullanacaklar. Bu nedenle, işi tamamlamak için ihtiyaç duydukları şeyi yapmak için izinlere (hatta özgürlüğe) ihtiyaçları vardır. Bunu yapmak, e-Niaga kontrolünüzün her sayfasına iptal etmek için düğmeler eklemek kadar basit olabilir (çünkü tarayıcı geri düğmesine basmak her şeyin kaotik olmasına neden olabilir). Belki bir geri alma özelliğidir, bu yüzden deneyin iyi olduğunu hissederler. Veya büyük ölçekli projeler için bir revizyon geçmişi (Google Drive veya WordPress veya GIT gibi). Kullanıcınız özgür hissettiğinde ve sınırlı olmadığında, bir dizi iyi kullanıcı arayüzü tasarım ilkesini açıkça izlediniz. Kullanıcı arayüzü hazır mı? Uygunsuz kelimeler. Biliyorum üzgünüm. Ancak bu UI kurallarıyla, bir sonraki web tasarım projenizi parktan oluşturmaya hazır olacaksınız. Bazıları birkaç projeye diğerlerinden daha fazla uygulanabilirken, iyi bir kullanıcı arayüzü iyi bir kullanıcı arayüzüdür ve iyi bir kullanıcı arayüzü iyi bir UX’e yol açar. Ama bu tamamen farklı yayınlar için bir konu. Her zaman takip ettiğiniz iyi bir UI tasarımı için kurallarınız var mı? Emojoez / Shutterstock.com tarafından makalenin üstün görüntüsü
