6 Ortak Kullanıcı Arabirimi Öğeleri için En İyi Uygulamalar
Bazı arayüz elemanlarının ve işlevselliğinin görünümü ve kullanılabilirliği , günümüz pazarındaki herhangi bir web sitesinin başarısı için çok önemlidir.
Çalışmalar , kullanıcı tarafında düşünmenin bir saniyelik bir gecikme süresinin bile , bir web sitesinde algılarını ve ilgilerini zayıflattığını ve sonuç olarak web sitesinin dönüşüm oranını düşüreceğini göstermiştir.
Bazı niş ve sanayilerde, kullanımlarında bariz olmayan UI elemanlarına sahip olmak mükemmel kabul edilebilir. Blog ve web geliştirme sektörü mükemmel örneklerdir.
Ancak, teknik olmayan merak uyandıran kitleler için kullanıcı arayüzleri tasarladığımızda (ki bu genellikle müşteri işlerinde geçerlidir), belirli UI öğelerinin kullanıcıların alışık olduklarından çok uzaklaşmamasını sağlamalıyız.
Bu makalede , altı kullanıcı arabirimi öğesinin ve her birinin sözleşmelerinin bazı en iyi uygulamaları ve kullanılabilirlik özellikleri tartışılmaktadır; böylece geliştiriciler hem güzel hem de basit kullanıcı deneyimleri oluşturabilir.
1. Arama Kutusunun Görünümü
Geniş bilgi zengin veya ürün ağırlıklı web sitelerinde, arama kraldır. Buradaki kullanıcılar genellikle arama kutusunun lehine geleneksel gezinme çubuklarından geçer.
Hemen görülmeyen bir arama kutusu iki efektden birine sahip olacaktır: 1) kullanıcı hiçbir arama fonksiyonunun mevcut olmadığını varsayır veya 2) kullanıcı arama fonksiyonunu gecikmeli ve muhtemelen tahriş edici bir süre sonra bulacaktır.
Web sitenizdeki arama kutusunun kolayca göründüğünden emin olun. Karanlık arka planlar ve fantezi grafikler kullanılabilirliği bozar , bu yüzden beyaz veya açık gri tutmak en iyisidir. Ayrıca, arama kutusunun sayfada diğer önemli öğelere göre yeterince geniş olduğundan, görsel hiyerarşide konumunu koruduğundan emin olun.
Üzerindeki arama kutusu IP ile alan adı Web sitesinin görsel temasına uygun, çevreye duyarlı, turuncu ve grafik olarak uygun. Ancak daha yoğun bir web sitesinde bir arama kutusu bu tedavi verildi, muhtemelen fark etmek zor olurdu.
Tasarım, IP tarafından Domain tarafından bir engel değildir çünkü web sitesinin bir işlevi vardır: arama, sayfanın tam ortasına doğrudur. Artı, teknoloji nişinde olmak, geliştiricilerin kongre ile uğraşmak için daha az teşvik vardır. Ancak, hedef kitleleri teknik olarak bilinemeyen büyük web sitelerinde bu derecedeki yaratıcılıktan kaçınılmalıdır .
Macera zamanı Bu arada, arama kutusunu beyaz, uygun boyutta ve sayfada bulmak kolay tutar:
Yabancı bir dilde olmasına rağmen, İngilizce konuşan kullanıcılar için bile Adventure Time çok net bir arama kutusuna sahiptir. Kutunun boyutu ve rengi, çevrimiçi arama için evrensel sembol haline gelen büyüteçli grafikle tamamlanır. Bu işlevi arayan bir kullanıcının burada bir sorunu olmaz.
Bu model, farklı bir kullanıcı tabanına hedeflenen tüm projelerde izlenmelidir.
Daha fazla okuma:
2. Açıkça İşaretlenebilir Katlanabilir / Genişletilebilir İçerik
Web siteleri, katlanabilir paneller ve açılır menülerden yararlanır, çünkü daha temiz ve daha az karmaşık düzenler oluştururlar. Bununla birlikte, bu arayüz öğelerindeki gizli içerik, varlıkları açıkça belirtilmemişse, bir web sitesinin kullanılabilirliğini bozabilir.
Bir kullanıcı çıplak bir bağlantıyı veya düğmeyi tıkladığında, yeni bir sayfaya götürülmesini bekler. Ancak bir kullanıcı bir gizli içerik göstergesine sahip bir bağlantıyı veya düğmeyi tıkladığında, yeni içeriğin anında görüntülenmesini (JavaScript veya AJAX aracılığıyla) ve daha sonra gizleme seçeneğine sahip olmasını bekler. Dolayısıyla, bir web sitesi normal bağlantılar ve JavaScript aracılığıyla yeni içeriği ortaya çıkaran bağlantılar arasında keskin bir ayrım yapmalıdır.
Yan paneller ve menü ağaçları gibi katlanabilir içerikler ok, üçgen veya Windows Gezgini benzeri artı / eksi göstergesiyle gösterilebilir. Giriş yapan kullanıcıların gördüğü panel CSS Küre açıkça katlanabilir olduğunu gösterir:
Aşağıda, bir grup işlev ortaya çıkarmak için panel genişletildikten sonra aynı sayfa var:
Paneldeki içerik artık genişletildiğinde, ok 90 derece döndürülüyor, bu da aynı içeriğin artık gizlenebileceğini veya daraltılabileceğini gösteriyor. Bu aynı ilke, açılan bir ok gerektirmese de, açılan menülere veya açılır menülere uygulanabilir. Şaşırtıcı bir şekilde, bu özellik genellikle profesyonelce tasarlanmış web sitelerinde bile ihmal edilir.
Daha fazla okuma:
3. AJAX Yükleme Göstergesi
Eşzamansız isteklerle içerik yükleyerek kullanıcı deneyimini geliştirdiğinizde, kullanıcıya AJAX isteğinin işlendiğini bildirdiğinizden emin olun. Bu gösterge olmadan, kullanıcı beklemekten vazgeçebilir veya tıklamalarına yanıt olarak neden hiçbir şey olmamış?
Bunu çeşitli şekillerde gerçekleştirebilirsiniz; Google'ın RSS okuyucusu yaptığı gibi, bir işlemin gerçekleşeceği yerdeki veya yakınındaki bir "Yükleme" veya benzeri bir mesajı vurgulamaktır:
Ekran görüntüsünün en üstünde, "Okundu olarak işaretle" düğmesini tıkladığında görüntülenen sarı vurgulanmış metin bulunur ve kullanıcıya bir şeyler olduğunu bildirir.
Bunu belirtmenin bir diğer yolu, Windows kullanıcılarına aşina olacak olan animasyon veya bir döner saat camıdır. Çeşitli web sitelerinde animasyonlu bir gösterge kullanılıyor. heyecan Kullanıcılar daha eski tweet'leri görmek için “Diğer” düğmesini tıkladığında:
Düğmeye tıklandığında ve istemcinin sunucuya olan bağlantısının hızına bağlı olarak, alıcının isteğinin işleme koyulduğunu bildiren tanıdık animasyonlu bir döner grafik belirir.
AJAX yükleme grafikleri, pek çok farklı web sitesinden ücretsiz olarak edinilebilir; birçoğu, grafikleri boyut, renk ve diğer seçeneklerle özelleştirmenizi sağlar.
Bu tür görsel gösterge, hangi aktivitenin yüklendiği hakkında istemci tarafı ipuçları sağlamayan asenkron istekler için önemlidir.
AJAX benzeri bir gösterge, AJAX gibi davranan AJAX olmayan işlevselliği geliştirmek için de kullanılabilir ve yüklenmesi zaman alır. Bu, küçük resim tıklandığında daha büyük bir resim yükleyen bir fotoğraf galerisi içerebilir.
AJAX yükleme grafikleri ve diğer göstergeler aslında bir sayfayı hızlandırmaz, ancak "algılanan" yükleme süresini geliştirir ve bu da gerçek yükleme süresinin artırılması kadar değerlidir.
Daha fazla okuma:
4. Alışveriş Sepetinin Yeri ve Giriş-Kayıt Fonksiyonları
Kullanıcılar “Alışveriş sepeti” düğmesi veya “Şimdi kaydet” bağlantısı için bir sayfa taradığında, ilk baktıkları yer sayfanın sağ üst köşesidir. Bunu yapmak için zorlayıcı bir nedeniniz olmadıkça, bu işlevselliği bilinen konumlarında saklayın, aksi takdirde yavaşlar ve kullanıcı deneyimini bozarsınız.
Bu kategoriye giren seçenekler ve fonksiyonlar arasında “View cart”, “Check out”, “Log in”, “Log out”, “Register”, “Link”, “Şifremi Unuttum” ve hatta “Bize Ulaşın. “Bu son öğe genellikle yatay bir gezinme çubuğunda sonuncu olurdu.
TasteBook düzeninin sağ üst köşesindeki dört bağlantıyı içerir:
Maui Divers Takıları başka bir iyi örnek ve bir alışveriş çantası grafiği de içerir:
5. Kredi Kartı Formlarında Son Kullanma Tarihi Formatı
Bir form, kredi kartınızın son kullanma tarihini sorduğunda, biçim her zaman aynıdır: iki basamakla gösterilen ay, ardından iki veya dört rakamla gösterilen yıl (ör. 03/11 veya 03/2011). Dört haneli format, son kullanma tarihinin kredi kartının kendisinde nasıl görüneceğidir.
Öyleyse, bu bilgiyi toplamak ve kullanıcı deneyimini güçlendirmek için en iyi yol, biri ay ve diğeri için olmak üzere iki ayrı seçim kutusu kullanmaktır. Talimatları verseniz bile, kullanıcının son kullanma tarihini tek bir metin kutusuna girmeyin.
İşte iyi bir örnek ödeme sayfası Maui Divers Takı:
Ve burada kötü tasarlanmış bir son kullanma tarihi alanı örneği:
Üstelik ay seçkisi ayların isimlerini göstermemeli, bunun yerine 01'den 12'ye kadar olan sayıları listelemelidir. “08” kelimesinin “Ağustos” anlamına geldiğini anlayarak kullanıcıları yavaşlatmak için bir neden yoktur.
6. Kolayca Tanımlanabilir Bağlantılar
Bu asla bir sorun olmamalı, ancak maalesef bazı web siteleri hala ana gövdedeki bağlantılar ve normal metinleri birbirinden ayırmıyor.
Çoğu durumda, bu farklılığı belirtmenin en iyi yolu, bağlantıları farklı bir renk haline getirerek ve altını çizerek yapmaktır. Bazı durumlarda, tek başına güçlü bir zıt renk yeterlidir; Ancak sadece altını çizen veya yalnızca rengi biraz değiştiren, nadiren yeterlidir ve genellikle erişilebilirliği bozar.
Cameron.io bu ayrımı iyi yapar:
Bu bağlantılar, yalnızca altı çizilip renkli olarak değiştirilmediyse görünür olmayacaktır. Düğmeye benzemeyen bir düğme tasarlamazsınız, o zaman neden metin bağlantılarının ana gövdeye karışmasına izin veriniz? Çoğu kullanıcı çevrimiçi metin taraması yaptığında, tasarımcılar tüm bağlantıların bir fare üzerinde yuvarlanmadan çok önce tanımlanabildiğinden emin olmalıdır.
Daha fazla okuma:
Sonuç
Bu makalede ele alınan kullanıcı arabirimi öğelerinin ve işlevlerinin tamamı, web sitesinin kullanılabilirliği için çok önemlidir ve kullanıcının markanız hakkındaki algısında önemli rol oynar.
Birçok küçük iyileştirme, algılanan hızda büyük bir fark yaratabilir ve kullanıcıların hayal kırıklığına ya da rahatsız edilmesine engel olabilir.
Kullanıcı arayüzü öğelerinizi basitleştirin ve kolaylaştırın ve mümkünse kuralları uygulayın. İndirimli hemen çıkma oranlarını, daha iyi dönüşümleri ve geri dönen trafiğin akışını göreceksiniz.
Serbest yazar ve web geliştiricisi Louis Lazaris tarafından WDD için özel olarak yazılmıştır. Louis koşuyor Etkileyici Webler web tasarımında makaleler ve eğitimler yayınlar.
Bu veya diğer kullanıcı arayüzü öğelerinin bazıları nasıl geliştirilebilir? Lütfen düşüncelerinizi aşağıdaki yorumlarda paylaşın.