Sinir bozucu Tasarım Modelleri: Kırık Filtreler

Filtreler her yerde . Genellikle uçuş rezervasyonu yaparken veya çevrimiçi alışveriş yaparken göründüklerini düşünsek de, filtreler bir avuçtan fazla veri noktası içeren hemen hemen her arayüzde sıklıkla kullanılır.

Yine de anlamlandırılması zor olan yalnızca verinin çokluğu değildir; veri ızgaralarında, kurumsal gösterge tablolarında, aşı takibinde ve kamu kayıt kayıtlarında böyle yaygın bir senaryo gibi, bazı filtreleme gerektiren verilerin genellikle gerektirdiği karmaşıklık ve tutarlılık eksikliğidir .

Rahat Alan İçin Tasarlama

Müşteriler olarak, çok sayıda seçeneği daha yönetilebilir ve yüksek düzeyde alakalı bir seçime indirgemek için filtreler kullanıyoruz. Belki binlerce yerine sadece birkaç düzine ödeme fişi veya tüm koleksiyon yerine sadece bir avuç bluz.

Arayüzle bir şekilde iletişim kurmamız gereken belirli ilgi özelliklerine, belirli bir niyete sahibiz. Bunu, amacımızı bir dizi kullanılabilir özelliğe bölerek yapıyoruz. Bu amaç oldukça spesifik veya oldukça genel olabilir, ancak her iki durumda da tasarım, müşterilerin varsayılan durumdan (hiçbir filtre seçilmediğinde) son duruma (tüm filtreler başarıyla uygulandığında) ulaşması için gereken süreyi en aza indirmelidir .

Gerçi bu hikayenin sadece bir kısmı. Alakalı filtreleri uygulamak kolay kısımdır, ancak yeterince alakalı sonuçları göstermek biraz daha zordur. Aslında, her arayüz ve her amaç için, aklımızda belirli bir rahat aralığımız var, bu da nispeten zahmetsizce yönetebileceğimizi düşündüğümüz tercih edilen bir dizi seçenek.

Bu seçenekler yelpazesinin tek bir ekrana sığması, tek bir sayfada görüntülenmesi veya kolayca hatırlayabileceğimiz küçük bir kısa listeyle sınırlı olması gerekmez. Birkaç sayfaya dağılmış düzinelerce ila yüzlerce öğe olabilir.

Önemli olan, bu aralığın şu beklentilerimizi karşılamasıdır:

• son derece alakalı seçeneklere bakıyoruz,
• ne araştırdığımızı kolayca anlayabiliriz,
• tüm seçenekler arasındaki farkları görebiliriz ve
• her şeyi makul, öngörülebilir bir zaman çerçevesi içinde işleyebiliriz.

Sonuçları yalnızca tercih edilen bazı niteliklere ( yumuşak sınırlar ) göre yeniden düzenleyen sıralamadan farklı olarak, filtreler her zaman kesin sınırları temsil eder. Sonuçların kapsamını kesinlikle sınırlarlar. Yeterli uygun filtre yok ve kullanıcılar rahat aralığın çok üzerinde çekim yapıyor; çok fazla filtre ve kullanıcı sıfır sonuçla sonuçlanır ve siteyi tamamen terk eder.

Rahat aralık, bir üründen ürüne önemli ölçüde değişir . Nerede olduğuna dair ipucu, seçeneklerin gerçekte ne kadar farklı olduğundan çıkarılabilir. Kullanılabilirlik testlerinde, insanların 20-30 çeşit araç, 40-50 çeşit spor ayakkabı, 70-80 çiçek buketi keşfetmekte ve hatta 100-200 ödeme fişini sayfalara ayırmada sorun yaşamadıklarını görüyoruz. Yine de 15 farklı türde keskinliği veya AAA pili keşfederken kendilerini tamamen bunalmış hissediyorlar. Genel bir kural olarak, seçenekler ne kadar farklıysa , biraz daha geniş seçeneklerle kendimizi o kadar rahat hissediyoruz gibi görünüyor.

O halde nihai soru, arayüzümüz kullanıcıların yeterli sonuca hızla ulaşmasına yardımcı olduğunda, bu hassas dengeyi nasıl bulacağınızdır. Bu sorunun bir cevabı kulağa çok açık gelen bir şeyde yatıyor: Kullanıcıların bu rahat menzile giden yolundaki tüm engelleri ortadan kaldırın . Yazması yapmaktan daha kolay - özellikle mobilde, masaüstünde ve aradaki her yerde erişilebilir olması gereken düzinelerce hatta yüzlerce filtreniz olduğunda.

Filtrelemenin Karmaşıklığı

İlk bakışta, filtreleme özellikle karmaşık bir çaba gibi görünmüyor. Elbette farklı türdeki filtreler için doğru form öğeleri hakkında uzun tartışmalar yapabiliriz - otomatik tamamlama, radyolar, geçişler, seçim-açılır menüler, kaydırıcılar ve düğmelerden sadece birkaçı - ancak özünde, tüm form öğeleri yalnızca temeldir. girdi, değil mi?

Görünüşe göre, filtre tasarlamayı oldukça zorlaştıran deneyimin birkaç yönü var:

• filtreler, fiyatlandırma, derecelendirme, renkler, tarihler, saatler, boyut, marka, kapasite, özellikler, deneyim düzeyi, yaş aralığı, semptomlar, ürün durumu vb. için çeşitli tat ve şekillerde olabilir.
• filtreler genellikle çok sayıda gelir ve ekranlarda görüntülenmeleri gerekir.
• filtreler genellikle farklı durumlara sahiptir (seçili, seçilmemiş, devre dışı)
• filtreler genellikle mantıklı varsayılanlara ihtiyaç duyar ve kullanıcının girişini hatırlamaları gerekir,
• filtreler birbirine bağımlı olabilir ve bu bağımlılıkların açık olması gerekir,
• filtrelerin doğrulanması zor olabilir, örneğin kullanıcılar saat veya tarih gibi karmaşık verileri yazabiliyorsa,
• filtrelerin anlamlı hata mesajlarını desteklemesi ve göstermesi gerekir,
• ve diğerleri.

Filtreler asla kendi başlarına var olmazlar ; öyle ya da böyle, her zaman üzerinde hareket ettikleri sonuçlarla bağlantılıdırlar. Bu bağlantı genellikle filtrelerin ve eşleşen sonuçların bir şekilde senkronize olmasına neden olur, çünkü ikincisi kullanıcı arayüzünün bir girişi ne kadar hızlı kaydettirdiğine ve onu başarılı bir şekilde işlemek için ne kadar zamana ihtiyacı olduğuna bağlıdır.

Şimdi, bu zorlukların her birinin tüm ince inceliklerini ele almak, anıtsal bir çalışmadan başka bir şey değildir, ancak bazı sorunlar diğerlerinden biraz daha sinir bozucu, genel deneyimi acı verici ve can sıkıcı hale getiriyor ve bu nedenle yüksek terk ve yüksek hemen çıkma oranlarına neden oluyor. Kritik olanlardan bazılarını inceleyelim.

Küçük Kaydırılabilir Bölmelerden Kaçının

Filtreleri kendi cihazlarında kullanmaya çalışan müşterilerle yalnızca birkaç kullanılabilirlik oturumundan sonra, tekrar tekrar dolaşırken bazı yaygın hayal kırıklıklarını görebilirsiniz. En sinir bozucu kalıplardan biri, düzinelerce seçenek içeren uzun filtre bölümlerinden gelir. Bu seçenekler genellikle, bir seferde 3-4 seçenek gösteren ve seçeneklere göz atmak için dikey kaydırma gerektiren, kaydırılabilir küçük bir bölmede saklanır.

Bu bölümler genellikle müşterilerin aşırı odak ve hassasiyetle dikey, yavaş, doğru bir şekilde kaydırmasına neden olur. Mobilde olduğu gibi, bazı filtreler yanlışlıkla etkinleştirilir ve müşterinin daha da odaklanmasına neden olur. Bu kalıbın klasik bir örneği, popülerliğe veya alfabeye göre sıralanmış, genellikle yüzlerce seçenek içeren "Markalar" filtresidir.

Alternatif bir seçenek, dokunarak/tıklayarak genişletecek ve tüm seçenekleri gösterecek bir akordeon ile bir seferde 7-10 kadar seçeneği göstermek olabilir. Bu seçeneklerin tam yüksekliklerinde görüntülenmesi gerekmez, ancak kaydırılabilir daha büyük bir bölmede yaşayabilirler. Ancak daha sonra bölmede kaydırılarak etkinleştirilmemelidirler.

Popüler seçeneklerden bazıları en üstte vurgulanmışsa, filtreyi otomatik arama tamamlama ve alfabetik görünümle tamamlamak da iyi bir fikirdir. Buna iyi bir örnek, Ukrayna'dan bir e-ticaret perakendecisi olan Rozetka.ua'dır (yukarıya bakın).

Kaydırıcılar İçin Daima Metin Girişi Geri Dönüşü Sağlayın

Kullanıcılar, perakende mağazadaki fiyatlandırma aralığı, bir tren yolculuğunun maksimum süresi veya bir sigorta planının minimum/maksimum kapsamı gibi geniş bir değer aralığı tanımlayabildiğinde, muhtemelen bir tür kaydırıcı kullanacağız. Tüm kaydırıcıların ortak bir yanı vardır: Müşterileri birçok seçeneği hızlı bir şekilde keşfetmeye teşvik etmek istediğimizde harikadırlar, ancak kullanıcının aklında belirli bir şey olduğunda ve bu nedenle biraz daha kesin olması gerektiğinde oldukça sinir bozucu olurlar.

Fiyatı 200$'dan 215$'a yükseltirken veya uçuş süresine bir saat daha eklerken genellikle yaşadığımız hayal kırıklığını bir düşünün. Bunu bir kaydırıcıyla yapmak zordur çünkü inanılmaz bir hassasiyet gerektirir ve bu her zaman hatalara yol açar ve hüsrana neden olur.

Mükemmel bir kaydırıcının nasıl tasarlanacağını zaten ayrıntılı olarak ele aldık, ancak muhtemelen her kaydırıcının ihtiyaç duyduğu en önemli özellik, farklı etkileşim hızlarını desteklemektir. Aslında, birkaç yaygın etkileşim türü vardır:

• müşteriler birçok seçeneği hızla keşfetmek istediklerinde, bir parça ve başparmak ile iyi bir eski sürgü gayet iyi çalışır;
• müşteriler keşiflerinde daha hassas olmak istediklerinde, ileri ve geri granüler atlamalar için adımlayıcılar (+/-) ekleyerek yardımcı olabiliriz.
• müşterilerin aklında kesin bir değer olduğunda, min/maks değerler için metin giriş alanları sağlayarak yardımcı olabiliriz, böylece kullanıcılar kaydırıcıyı kullanmak zorunda kalmadan değerleri doğrudan yazabilirler,
• tüm bu durumlarda, çözümler erişilebilir olmalı ve yalnızca klavye etkileşimini desteklemelidir.

Aşağıdaki Lloydsbank örneğine bir göz atın. Bir kişisel kredi hesaplayıcısı, her türlü etkileşimi güzel bir şekilde destekler. Ayrıca, başparmak etkinleştirildiğinde odak stillerine ve müşterinin şu anda nerede gezindiğini belirtmek için üst kısımdaki faiz oranı kaydırıcısının altında görüntülenen aralıklara dikkat edin. Faiz oranı, müşterinin ne kadar borç almak istediğine bağlı olarak değişir.

İyi tasarlanmış bir kaydırıcının bir başka ilginç örneği de Made.com'un kanepeleri sahip olmaları gereken boyutlara göre filtrelemenize izin veren Sofasizer'dan gelir. Made.com, bir dizi giriş alanı kullanmak yerine, "Yeniden Boyutlandır" simgesi olan görsel bir arayüz kullanmayı tercih etti. Boyutu ayarlamak için tutamacı sürükleyebilir veya yükseklik ve genişlik giriş alanlarına tam değerleri yazabilirsiniz.

Kullanıcıları Hiçbir Zaman Tek Bir Girişte Otomatik Kaydırmayın

Daha önce orada bulundun. Belki de heyecan içinde perakende mağazasına gidersiniz, tüm doğru kategori bağlantılarına tıklayın, alt navigasyonda sola ve sağa kaydırın ve sonunda taahhütte bulunmaya hazır olduğunuz o parlak yeni dizüstü bilgisayara kartal gözüyle bakın. Sırada sizi bekleyen şey, kendinizi şımartmayı umduğunuz deneyim olmayabilir. Aşağıdaki örneğe bir göz atın. Neler olduğunu görebiliyor musunuz?

Dell.com'dan alınan bu örnekte, dizüstü bilgisayarınızın özelliklerini seçtiğinizde, aynı anda yalnızca tek bir giriş kaydedilir. Birden fazla seçeneği hızlı bir şekilde seçerseniz, yalnızca son giriş uygulanacaktır. Ve bir giriş kaydedildiğinde , sayfa yenilenerek müşteriyi filtreleme kenar çubuğunun en üstüne kadar atlar. Bu, ne kadar çok filtre kullanmak isterseniz - ve genellikle yukarıdan aşağıya doğru giderseniz - doğru filtreyi bulmak için aşağı kaydırmaya devam etmeniz gerektiği anlamına gelir.

Bu uygulamanın bu kadar yaygın olmasının bir nedeni, müşterileri otomatik olarak filtre alanının en üstüne kaydırmak istememiz değil, daha çok, onları filtre uygulanmış ürün sonuçlarının en üstüne doğru yönlendirmek istememizdir. Yeni filtreler uyguladıktan sonra, listenin ortasında bir yerde takılıp kalmak özellikle yararlı olmayacaktır. Ve aslında, her filtre güncellemesinde sonuçların en üstünü göstermek daha iyidir, ancak bu, filtreleri otomatik olarak kaydırmamız gerektiği anlamına gelmez.

Aslında, bu şekilde yalnızca 6–10 özellik belirtmek isteseniz bile, bir seferde yalnızca tek bir filtre kaydedilerek otomatik kaydırmaya karşı oldukça inatçı bir kaydırma savaşına girişmeniz gerekir. Aynı anda birden fazla filtreye dokunmak veya tıklamak mümkündür, ancak bu durumda maalesef kullanıcı arayüzü beklendiği gibi yanıt vermeyecektir. Genel deneyim oldukça sinir bozucu ve kafa karıştırıcı, çünkü web sitesi yavaş hissediyor ve filtrelemeye devam etmek her zaman daha fazla çaba gerektiriyor. Varsayılan durumdan son duruma kadar geçen süreyi en aza indirmenin en iyi örneği değil.

Bu sorunları çözmenin bir yolu , filtreler için otomatik kaydırmayı tamamen kaldırmak ve aynı anda yalnızca bir giriş yapılabileceğini belirtmenin daha iyi bir yolunu bulmaktır. Örneğin, tüm arayüzü dondurabilir ve böylece yeni veriler sunucudan geri gelene kadar herhangi bir girişi devre dışı bırakabiliriz. O zaman DOM'a yeni sonuçların eklenmesini beklememiz ve ancak o zaman kullanıcı arayüzünün geri gelmesini beklememiz gerekir. Önceki çözümden biraz daha net olsa da, kendi başına sorunları olduğu ortaya çıktı.

Kullanıcı Arayüzünü Tek Bir Girişte Asla Dondurmayın

Kullanıcı arayüzünü tek bir girişte her dondurduğumuzda, müşterilerimizi niyetlerini ifade etmede aktif olarak yavaşlatırız. Aslında, sonuçların görüntülenmesine girdi yerine öncelik vererek, ilgilendiklerini belirtmelerini onlar için biraz daha hantal hale getiriyoruz. Yine de bu yanlış bir önceliklendirme gibi görünüyor. Aşağıdaki örneğe bir göz atalım.

Sears.com'da, her seçim yapıldığında, yalnızca kullanıcı arayüzü tamamen engellenmekle kalmaz; kullanıcılar da sayfanın en üstüne itilir. Bu, özellikle akordeon içeren filtreler için can sıkıcıdır (örneğin, “Marka”daki “daha ​​fazlasını görün” bağlantısı). Her yeni filtrede, kullanıcının seçmek istediği belirli özelliği bulmak için aşağı kaydırması ve akordeonu açması gerekir. Walmart (aşağıdaki örneğe bakın) aynı modeli izler.

Bu durumlarda, veriler sunucudan geri gelmemiş olsa veya yavaş geri gelse ya da hatalı biçimlendirilmiş olsa bile, donmuş ve çalışma durumları arasında güvenilir bir şekilde geçiş yapmak için JavaScript'e güvenmemiz gerekir. Bu, güvenilecek oldukça kırılgan bir varsayım.

Şimdi, elbette kullanıcının girdisini ne zaman bitirdiğini bilmiyoruz, ancak yalnızca filtrelerle tüm etkileşim sırasında müşterinin bir arayüzün yanıt vermesini beklemek zorunda kalmamasını sağlamak mantıklıdır. Şimdi, yukarıdaki üç örneğe biraz daha yakından bakarsak, bir benzerlik fark edeceğiz. Hepsi, seçim üzerine her filtreyi otomatik olarak uygular ve yeni sonuçlar sayfası geri gelene kadar başka seçimi devre dışı bırakır.

Ancak, müşterilerin bazen aynı kategoride birden çok filtreyi hızlı bir şekilde eklemesi oldukça yaygındır. Kullanıcı arabiriminin davranışı bu amacı iyi desteklemiyor.

Peki, alternatifimiz var mı? Açık bir alternatif, sonuçların ne zaman güncellenmesi gerektiğine ilişkin kararı kullanıcıya teslim etmektir. Bu, bir "Uygula" düğmesi eklemek ve müşterileri herhangi bir sonuç görmeden önce tüm filtreleri seçmeye teşvik etmek anlamına gelebilir. Ama mutlaka tek seçenek bu değil. Aslında, ortaya çıktığı gibi, her ikisini de yapabiliriz: herhangi bir gecikme olmadan filtreyle etkileşime girerken güncel sonuçları görmek. Sadece sonuçların senkron gösteriminden asenkron karşılığına geçmemiz gerekiyor.

Sonuçları Her Zaman Eşzamansız Olarak Göster

Filtrelerin ve eşleşen sonuçların genellikle bir şekilde senkronize olduğundan daha önce bahsetmiştik. Ancak, kullanıcı arayüzünün parçalarını bölebilir ve her ikisini de asenkron olarak ayrı ayrı işleyebiliriz. Bu durumda, her filtre girişinde, eşleşen sonuçlar eşzamansız olarak güncellenebilirken, filtreler her zaman erişilebilir ve aynı yerde kalır. Her yeni filtre girişiyle, kullanıcı bir flaş yeni içerik akışı görürdü.

Yukarıdaki BestBuy örneği, bu kalıbı hareket halinde gösterir. Sol kenar çubuğundaki filtreleri seçtiğimizde, arka planda uygulanırlar ve bunu yapmayı seçersek daha fazla filtre seçmeye devam edebiliriz. Ürün listesi eşzamansız olarak güncellenir: Veriler sunucudan her geri alındığında eşleşen sonuçlar listesine yeni içerik doldurulduğundan hiçbir zaman devre dışı bırakılmış bir durum yoktur.

Yeni filtreler uygulandıkça yeni ürünlerin yüklendiğini göstererek bunu biraz daha belirgin hale getirebiliriz. Buna güzel bir örnek, sol tarafta görünen eşzamansız bir kenar çubuğu filtreleme kullanıcı arayüzüne sahip Coolblue'dur.

Bu noktada, filtreler alanındaki her girişin kaydedilmesi ve ardından ürün listesine uygulanması gerektiğini vurgulamakta fayda var. Filtreler alanının yakınında kayan bir "Uygula" düğmesini tutmazsanız, birçok müşteri için bunun beklenen bir davranış olduğunu fark ettik.

Filtre Girişinde Düzen Kaydırmalarından Kaçının

Arayüz girişi engellemediği sürece, elbette müşteriler birbiri ardına bir dizi filtre ayarlayabilmelerini beklerler. Ancak, filtrelerin bulunduğu yere bağlı olarak, bazen yanlışlıkla düzen değişiklikleriyle karşılaşabilirler, bu nedenle kendilerini tekrar sayfada yönlendirmeleri, kaldıkları yeri bulmak için yukarı ve aşağı kaydırmaları ve ardından bir sonraki girişe devam etmeleri gerekir. Aşağıdaki örneğe bir göz atın. VictoriaPlum'daki (aşağıda gösterilmektedir) sorun ne gibi görünüyor?

Kullanıcılar bir filtreyle her etkileşim kurduğunda, yeni ürün öğeleri geldiğinde, filtreleme alanında küçük bir değişiklik olur. Genellikle bunun olmasının üç nedeni vardır:

• her filtre girişinde, müşteri tarafından genişletilen filtre bölümleri otomatik olarak çöker,
• daha önce mevcut olan filtreler kullanılamaz hale gelir ve gizlenirler, bu da filtreleme alanının yüksekliğini azaltır,
• Uygulanan filtrelere genel bakış, filtreler alanının üzerinde yer alır, böylece her yeni filtre ile boyutu büyüdükçe filtreleri de aşağı doğru iter.

İlk sorundan kaçınmak için, kullanıcı yeni bir filtre ayarlamış veya sayfayı yenilemiş olsa bile , akordeonların durumunu korumamız ve onları açık tutmamız gerekir. Ayrıca yenileme veya gezinme sırasında filtreleme ayarlarını da korumamız gerekiyor. Aslında, önceki kategorilere veya sayfalara geri dönseler bile (örneğin “Geri” düğmesiyle) filtrelerin uygulanmaya devam etmesini bekleyen müşteriler görüyoruz.

İkinci sayı için, filtreler artık kullanılamıyorsa, onları otomatik olarak gizlemek yerine devre dışı bırakabiliriz, ayrıca neden devre dışı bırakıldıklarını (dostça bir ipucu yardımcı olabilir) ve bunları yeniden etkinleştirmek için ne yapılması gerektiğini açıklayabiliriz . . Daha sonra “Kullanılamayan tüm seçenekleri gizle” seçeneğini de ekleyebiliriz.

Son olarak, uygulanan filtrelerin filtreler alanının üzerindeki konumunu yeniden düşünmek isteyebiliriz. Yine de yaşayabilecekleri çok fazla seçenek yok ve daha iyi bir seçenek, filtreleme sonuçlarının üzerindeki alan gibi görünüyor.

Sonuçların Üstündeki Filtreleri Görüntüle

Düzen kaymalarını tamamen önlemek için, uygulanan filtreleri ürün sonuçlarının üzerinde görüntüleyebiliriz. Bu, tüm kullanıcı etkileşimi sırasında filtreleme alanını sabit ve öngörülebilir tutar. Aslında, her zaman görünür olması gerekmez. Aşağıdaki örnekte Crate & Barrel, müşterilerin talep üzerine filtreleri gizlemesine ve göstermesine olanak tanırken, ürünlerin üzerindeki özel alana uygulanan filtreler eklenir. Tüm filtreleri temizleme seçeneğinin de mevcut olduğunu unutmayın. (Videonun kaydedilmesinden bu yana ürün sayfası değişti.)

Diğer bir seçenek de, tüm filtre bölümlerini kaplamalara dönüştürmek ve bunları sonuçların üzerinde dokunarak/tıklayarak görüntülemektir. Aslında, yüzen filtreler bile kullanabilirsiniz, böylece bir müşteri sayfayı aşağı kaydırdıkça filtrelere her zaman erişilebilir.

Bu modelin bir örneği Adidas'tır (aşağıdaki resme bakın). Filtreler çubuğu kalıcıdır; Kullanıcılar sayfayı aşağı kaydırırken bile, filtre yerleşimi otomatik olarak kapanmaz - kontrolü tekrar kullanıcıya devreden kullanıcının girdisini gerektirir. Ancak, filtrelerden biri seçildiğinde otomatik olarak kapanır. Kullanıcı birden fazla filtre seçmek isterse aynı filtre grubunu tekrar tekrar açması gerekir. Filtreleri kalıcı tutmak daha iyi bir fikir olabilir. Yine de sonuç: düzen değişikliği yok, dar koridorlarda sinir bozucu kaydırma yok ve filtrelere her zaman erişilebilir.

Filtreleri sonuçların üzerinde göstermenin varsayılan olarak her zaman daha iyi olduğunu söylemeye gerek yok. Asos'ta, her filtre girişi sayfanın en üstüne atlamalara neden olur, bu nedenle müşterilerin filtrelemeye devam etmek için manuel olarak aşağı kaydırması gerekir. Tüm sayfayı yeniden oluşturmak yerine, filtreler alanını ve ürün listesini ayrı ayrı yeniden oluşturmak daha mantıklı olacaktır.

Genel olarak, ilk iki seçenek (Crate & Barrel ve Adidas) çok iyi çalışıyor gibi görünüyor ve daha önce tartıştığımız tüm sorunlardan kaçınırken, ürünlerin sergilenmesi için daha fazla alan bırakıyorlar. Bu, barikatlardan veya karışıklıklardan kaçınmak istediğimizde kullanmak için oldukça güvenilir bir kalıptır. Ama yine de biraz daha fazlasını yapabiliriz, örneğin iyi bir "uygula" düğmesiyle.

“Uygula” Düğmesinde Sonuç Sayısını Göster

Kesintisiz ve akıcı etkileşimlere, yavaş yavaş geçişlere ve zamanlı animasyonlara alışmaya başladığımız zamanlarda filtreler için bir "Uygula" düğmesine sahip olmak biraz eskimiş gibi geliyor. Ancak, müşterileri rahat bir aralığa yönlendirmek istiyorsak, bunu yapmanın mümkün olan en kısa sürede sonuçların sayısını göstermekten daha iyi bir yolu yoktur.

Ikea, sonuçların en üstünde filtrelere sahiptir. Bazen filtreler, açılır bir kaplamada ve bazen filtrelerin altında bir hap olarak görünür. Ancak çoğu zaman, önceki örneklerden farklı olarak, bir filtre seçildiğinde, sağda, orada gruplandırılmış tüm mevcut filtreleme seçenekleriyle birlikte bir kenar çubuğu mega filtre kaplaması görüntüler. Müşteri filtreler arasında ilerlerken, ürün listesi arka planda eşzamansız olarak güncellenir. Daha da önemlisi, girişe bağlı olarak etiketin değiştiği “Uygula” düğmesine dikkat edin.

Her filtre girişiyle, sunucuya yeni bir istek gönderilir, sonuç sayısı alınır ve ardından bu sayı kullanıcı arabiriminde gösterilir. Bu, kullanıcılara rahat menzillerine ne kadar uzak veya ne kadar yakın oldukları konusunda çok net bir fikir vermenin harika bir yoludur.

Başka bir örnek, filtreleme söz konusu olduğunda birinci sınıf bir deneyim sağlayan bir İsviçre e-ticaret perakendecisi olan Galaxus.ch'dir (aşağıya bakın). Filtreler, ürün sonuçlarının üzerinde görüntülenir; Dokunma/tıklama sırasında bir filtre yerleşimi görünür. Yavaşlama yok, hızlı tepki süreleri ve aktif filtrelerin filtreler alanıyla güzel bir entegrasyonu. Her türlü filtreyi tasarlarken dikkate alınması gereken harika bir referans örneği .

Genel olarak, içerik alanının gerçek zamanlı güncellemeleriyle birlikte bir “Uygula” düğmesine sahip olmak en iyi sonucu veriyor gibi görünüyor. Her iki çözümün de en iyilerini gerçekten birleştirir: Sonuçları geldiklerinde hemen gösterirken filtreleri her zaman erişilebilir tutar.

Mobilde Bölünmüş Ekranlardan Kaçının

Makalede incelediğimiz sorunlar, büyük ve küçük ekranlar için eşit derecede geçerlidir. Ancak küçük ekranlarda ve özellikle yavaş bağlantılarda bu sorunlar daha da kritik hale geliyor. Çoğu zaman, arayüzler tek bir filtre girişinde tüm kullanıcı arayüzünü bloke etme eğilimindedir ve bu da hareket halindeki müşteriler için büyük gecikmelere neden olur (örn. Crutchfield, Walgreens). Öte yandan, arka planda güncellenen ürün listesini göstermeye devam ederken bir filtre yerleşimini görüntülemek için ekranı bölmek yaygındır (örn. Nordstrom).

Yine de genel olarak, filtreler için tam sayfa yer paylaşımının daha iyi performans gösterip göstermediğini denemek daha iyi bir fikir olabilir. Çok sütunlu bir görünümle deneme yapmak için daha fazla alan sağlar, hatta ayrı sayfalar arasında hareket etmek zorunda kalmadan filtreleri seçmek için kaydırılabilir bir alan bile gösterir. Aslında, kullanıcıyı ayrı bir sayfaya getirmek yerine çökebilen ve genişleyebilen akordeonlar kullanmak iyi bir fikir olabilir - mega açılır menülerle tartıştığımız şeye benzer.

Masaüstünden farklı olarak, tüm bu örneklerde bir “Uygula” düğmesine sahip olmak önemlidir ve ürün miktarını düğmenin üzerine etiket olarak ekleyerek ve kullanıcı aşağı kaydırırken düğmeyi altta sabit tutarak biraz daha kullanışlı hale getirebilirsiniz. .

Filtreleme Tasarım Kontrol Listesi

Her zaman olduğu gibi, burada herhangi bir filtreyi tasarlarken akılda tutulması gereken her şey var - tasarımcı ve geliştirici arkadaşlarınızla konuşmadan önce önemli ayrıntıları kaçırmamak için küçük bir yardımcı. Gerçekten Smashing Magazine'de tam bir Akıllı Arayüz Tasarım Modelleri Kontrol Listeleri destesi bulabilirsiniz.

1. Bir filtre simgesinden kaçınabilir ve filtreleri oldukları gibi gösterebilir miyiz?
2. Değilse, filtrelemeyi belirtmek için hangi simgeyi seçiyoruz?
3. Simge + dolgu, rahat dokunma için yeterince büyük mü?
4. Simgeyi üste mi, alta mı yoksa kayan bir yere mi (mobil/masaüstü) yerleştiriyoruz?
5. Kullanıcı simgeye tıkladığında/dokunduğunda tam olarak ne olur?
6. Dokunma/tıklama sırasında simge nasıl değişecek?
7. Tıklamada bir tür animasyon veya geçiş olacak mı?
8. Filtreler tam sayfa/kısmi kaplama veya kaydırmalı olarak görünecek mi?
9. Genellikle yavaş olduğu için kenar çubuğu filtrelemesinden kaçınabilir miyiz?
10. Varsayılan olarak popüler veya alakalı filtreleri mi gösteriyoruz?
11. Her filtre için beklenen sonuçların sayısını gösteriyor muyuz?
12. Filtreler arasında geçiş yapmak için yatay bir kaydırma çubuğu kullanabilir miyiz?
13. Açılır menülerden kaçınabilir ve yalnızca düğmeler/yongalar + geçişler kullanabilir miyiz?
14. Karmaşık filtreler için filtreler içinde arama sağlıyor muyuz?
15. Çeşitli filtreler arasındaki farkları açıklamak için simgeler kullanıyor muyuz?
16. Filtreler için doğru öğeleri kullanıyor muyuz, örneğin kaydırıcılar, düğmeler, geçişler?
17. Filtreler otomatik olarak uygulanır mı (evet, içeri kaydırmalar için)?
18. Filtreler onay sırasında manuel olarak mı uygulanıyor (“Uygula”) (evet, bindirmeler için)?
19. Halihazırda seçilmiş filtreleri nasıl iletebiliriz?
20. Seçilen filtreler çıkarılabilir haplar, çipler veya etiketler olarak görünebilir mi?
21. Seçime göre alakalı filtreler öneriyor muyuz?
22. Seçilen filtreler arasındaki uyumsuzluğu takip ediyor muyuz?
23. Kullanıcı arayüzünde hata mesajları veya uyarılar nasıl görünür?
24. Müşterilerin tüm filtreleri bir kerede hızlı bir şekilde sıfırlamasına izin veriyor muyuz?
25. Mobil/masaüstünde kaydırma sırasında filtreler (veya filtreler düğmesi) yüzüyor mu?
26. Kullanıcılar filtreleri açmak/kapatmak için aynı noktaya dokunabilir mi?

Toplama

Web'deki filtreleme deneyimi çok sık bozulur ve sinir bozucu olur, bu da müşterilerin bu parlak, rahat ilgili sonuçlara ulaşmasını gereksiz yere zorlaştırır . Bir sonraki filtreyi tasarlarken, kaçınmak isteyebileceğiniz bazı genel sorunlara bir göz atın ve umarız bozuk ve erişilemeyen uygulamalardan kaynaklanan tüm hayal kırıklıklarından kaçının.

• Bir müşterinin birden fazla filtreyi hızlı bir şekilde art arda eklemek istediği durumlar için konforlu seçenekler yelpazesi için tasarım yapın.
• Uzun filtre grupları için, kaydırılabilir küçük bölmelerden kaçının ve dokunarak/tıklattığınızda genişleyecek ve tüm seçenekleri gösterecek bir akordeon ile bir seferde 7-10 kadar seçenek gösterin. Otomatik arama tamamlama ve alfabetik görünüm de ekleyin.
• Kaydırıcıları kullanırken daima adımlayıcılar (+/-) ve metin giriş alanları ekleyin,
• Müşteri genellikle aynı türden birkaç filtre ayarlamak ister. Kullanıcıları hiçbir zaman tek bir girişte otomatik olarak kaydırma ve asla bir filtre grubunu otomatik olarak daraltma.
• Kullanıcı arabirimini asla tek bir girişte dondurmayın ve filtreleri ayarlarken müşterinizi asla bir arabirimin yanıt vermesini beklemeyin.
• Filtreleri her zaman güncelleyin ve sonuçları eşzamansız olarak gösterin, böylece her filtre girişinde eşleşen sonuçlar eşzamansız olarak güncellenebilirken, filtreler her zaman erişilebilir ve aynı yerde kalır.
• Filtre girişinde her zaman düzen kaymalarından kaçının ve sonuçların üzerinde filtreleri görüntülemeyi düşünün.
• Mobil cihazlarda, “Uygula” düğmesi ekranın alt kısmında yapışkan olabilir. Ürün sayısını güncelleyin ve buton üzerinde gösterin.

Dizi Makaleleri

Bu makaleyi yararlı bulursanız, burada yıllar içinde yayınladığımız benzer makalelere genel bir bakış - ve birkaç tane daha yolunuza çıkıyor.

• mükemmel akordeon
• Mükemmel Duyarlı Konfigüratör
• Mükemmel Doğum Günü Seçici
• Mükemmel Tarih ve Saat Seçici
• Mükemmel Mega-Download
• Mükemmel Özellik Karşılaştırması
• Mükemmel Kaydırıcı
• Adam Silver tarafından yazılan Form Tasarım Desenleri Kitabı, SmashingMag'de yayınlandı
• Sonrakileri kaçırmamak için e-posta bültenimize abone olun.