web-gelistirme-sc.com

Uzun listedeki bir öğe alt kümesini seçmenin en iyi yolu

Müşterilerimizden biri, yayınladığı dergiler hakkında bilgi paylaşmak için bir web uygulaması geliştirmemizi istiyor. Bir derginin her baskısında değişken miktarda reklamveren bulunur. Bu reklamverenler, merkezi bir reklamveren havuzundan gelir. Bu havuz (şu anda) yaklaşık 150 reklamveren içeriyor. Bir derginin her baskısında bu reklamverenlerin bir alt kümesi (yaklaşık 70-80) bulunur.

Müşterimiz, bu 150 listeden 70-80 reklamveren bir dergi baskısına eklemesi için bir yol bulmamızı istiyor. Mümkün olduğunca hızlı, mümkün olduğunca kolay ve mümkün olduğunca sezgisel olmalıdır.

Burada ideal bir çözüm ne olurdu? Aşağıdaki görüntünün çizgilerinde bir şey düşünüyordum.

  1. Mevcut reklamverenlerin listesi.
  2. Seçilen reklamverenlerin listesi. Reklamverenlerin sil düğmesi vardır.
  3. Soldaki listedeki reklamverenler için otomatik öneren metin kutusu. <Enter>, reklamvereni sol listeden kaldırır ve sağdaki listeye ekler. Metin kutusu temizlenir ve odak kalır.

Meslektaşlarım, her reklamveren için bir onay kutusu içeren sürükleyip bırakma veya yalnızca bir liste önerdi, ancak bu yaklaşımlar kullanıcıyı çok fazla arama ve tıklama yapmaya zorluyor. Benim yaklaşımımla kullanıcı yazmaya devam edebilir.

Bu durum için başka öneriniz var mı?

My idea to transfer items between lists

36
Kristof Claes

Tasarım Kristof zaten çok iyi. Bu fareyi ve klavyeyi geri ve dördüncü eylemi durdurmak gibi çok önemli şeyleri çivirdiniz - bu deneyimi mahvedecek. Ve ben seninle sürükle ve bırak - yuk!

Fikrinizi biraz geliştirdim:

alt text

  • Açıkça sol öğelere fare tıklaması onları sağa ekleyecektir.
  • Metin filtresinin Google Stil olmasını istersiniz - ör. çok kelimeli, kısmi eşleme. Arama girişinde olduğu gibi "rce bm", şemada gösterilen üçüncü öğeyle eşleşir. Bunu yapmak kolaydır ve kullanıcıya isimleri aramak için güçlü ve sezgisel bir yol sağlar. İkinci sınıf filtreleme (dize başlangıcı gibi) yalnızca kullanıcıları hayal kırıklığına uğratır ve tekrar kullanmasını engeller. Filtreleme arayüz için çok kritik olduğundan, daha iyi çalışır.
  • Kullanıcı için zaman kazanmanın başka bir yolu (bir başkasının önerdiği gibi), "seçilen reklamverenler" tarafında kısmen tamamlanmış bir listeye sahip olmaktır. "En çok kullanılan ilk 10" reklamverenin% 70 veya daha yüksek bir isabet olacağını düşündüğünüzde, onları yükün sağ tarafındaki listeye de atabilir misiniz? En kötü durumda, kullanıcının ilk 10 taneden bir veya ikisini (her biri 1 fare tıklaması) ve istediği kalan 7 öğeyi silmeleri gerekir. Kullanıcıyı daha fazla işten kurtarmak için bu fikirdeki sayıları değiştirin.

Unutmayın: Daha fazla iş siz kullanıcı için yapabilir; tıklamalarını, görünümlerini ve aramalarını azaltmak için arayüzünüzün daha hızlı, daha kolay ve sevimli olması gerekir.

34
cottsak

Dergi yayınlayan bir şirkette çalışıyorum, bu yüzden alan adınıza biraz aşinayım.

Reklamverenlerin listesinin sayıdan meseleye fazla değişmediğini düşünüyorum, bu nedenle önceki sayıdaki reklamverenlerin varsayılan olarak seçilmesini sağlayacağım.

Yalnızca 150 reklamvereniniz olduğundan ve bunların yaklaşık yarısı seçileceğinden, bir arama yapmakla uğraşmazdım. Basit bir onay kutusu listesiyle başlıyorum ve bunun ne kadar iyi çalıştığını görüyorum. Seçilen öğelerin görsel olarak farklı olduğundan emin olun (örn. Kalın yapın), böylece taranması kolaydır.

7

İlk yazım, lütfen nazik olun ve ben de aynısını yapacağım :-)

Burada bazı iyi fikirler olsa da, bunların hiçbirinin orijinal posterin gereksinimlerini tam olarak karşıladığını düşünmüyorum:

"Müşterimiz, bu 150 listeden 70-80 reklamveren eklemesi için bir yol bulmamızı istiyor" - Kristof Claes .

Kullanıcıların sonuçları filtreleyebileceği ve Seçilen Reklamverenler listesine ekleyebileceği şık fikirlerin çoğuna kesinlikle katılıyorum, yine de bir yola ihtiyacımız var toplu seçim seçime yaklaşık 70 reklamveren ekleyin. Filtreleme fikirleri oldukça iyi olsa da, yalnızca kullanıcının alıcıları "alıcı" alanında belirttiği herhangi bir e-posta uygulaması gibi bir uygulamaya yol açacaktır. Elle 70 alıcı eklemek zorunda olduğunuzu düşünün!

İdeal olarak, aşağıdaki iş akışını istemeyiz:

  1. Aranacak cümle türü
  2. (Sonuçlar görünür)
  3. Otomatik tamamlanan öğe için enter tuşuna basın veya görünen listeden bir veya daha fazla öğe seçer
  4. Yaklaşık 70 reklamveren eklenene kadar 1-3 arasındaki adımları tekrarlayın

Burada pek çok insandan gerçekten iyi şeyler bilen bazı güzel mesajlar görüyorum, ancak bazılarının belki de kapalı bir konuya gittiğini ve iyi "kullanıcı arayüz tasarımı" psikolojisinden ziyade uygulama teknolojilerine odaklandığını düşünüyorum.

Bu konudaki son düşüncem - belki de seçime "gruplar" eklemek için bir çeşit mekanizmadır, çünkü bu kesinlikle aynı iş akışını 70 kez tekrar etmeyi azaltacaktır. Gördüğüm bazı yazılımlar "yuvarlak robin" yaklaşımında reklamverenleri seçecek. Kesinlikle bu seçim bazı yardımcı olabilir; Ayrıca, her zaman eklenmesini isteyebileceğiniz önceden tanımlanmış gruplarınız olabilir, belki de en çok ödeyen reklamverenlerinizin bir listesi veya "yeni" ürünler için reklamlar.

Ve şimdi biraz konu dışı bir şey için ...

Matty, Apple ve özellikle iPhone'dan bahsettiğinizi görüyorum -

... iPhone'dan öğrenebiliriz ... anahtar, kullanıcı için alınan kararlarda ortaya çıkan makul varsayımlar yapmaktır ...

Geçen günkü konuşmamızdan sonra bunu kastettiğinizden emin değilim. Sadece dokunmatik cihazlar değil, belki de daha az kullanılabilir, ancak Apple genellikle kullanıcı tabanları hakkında gerçekten ne düşündüklerini merak eden bir yazılım yapma geçmişine sahiptir. Temel bir örnek - iPad cihazınızı yeniden adlandırmak istiyorsanız, önce cihazı iTunes yazılımına sahip bir bilgisayara bağlamanız gerekir. Neden dünyadaki iPad'in Genel ayarlarına giremiyorum ki herkes tahmin ediyor.

En iyi kullanıcı arayüzleri - "tümevarımcı kullanıcı arayüzü tasarımı" ya da başka bir deyişle - "deneme yanılma" - aksine "endüktif kullanıcı arayüz tasarımı" tarzındadır. Dokunmatik cihazlar ikinci kategoriye girer. Açıklamama izin ver:

Apple tarafından iTouch, iPhone ve şimdi iPad yazılımında herhangi bir şey atıldığında popüler hale gelen bir şey varsa "tümdengelimli kullanıcı arayüzleri" nin Taş Devri'ne geri dönüşü. Bir düğmedeki çok kötü tasarlanmış bir glif gibi, kullanıcıyı düşünmeye bırakıyor - " iyiliğimi, bunun anlamı nedir? ", bir dokunmatik cihazın ekranına bakarak, hemen değil iki parmağın kullanılmasının kullanıcının yakınlaştırma veya uzaklaştırma yapmasına izin verdiği açıktır; ya da benim favorim - parmağınızı iki saniye kadar basılı tutarak cihazı "silme moduna" geçirir.

Kötü tasarlanmış bir simgenin - " kategorisine girdiği gibi, bunun ne anlama geldiğini bilmiyorum, ancak ilk kez kullandıktan sonra, genellikle ne yaptığını hatırlayacağım ", birçok dokunmatik cihaz tümdengelimli kullanıcı arayüzleri kategorisine girer, çünkü kullanıcı" onunla oynayarak "programın gerçekte ne yapabileceğini belirlemelidir, böylece anında kullanılabilirliğini azaltır.

İnce iş tutun!

MickyD'nin Rastgele Düşünceleri

6
MickyD

Tüm reklamveren listesinin üstünde filtreleme ( temel olarak "3" ünüzü "1" inizin üzerine koymalı ve "3" "1" in içeriğini dinamik olarak etkilemelidir ):

  • Arama (anında listeyi daraltır)
  • Gruplar ("Son Kullanılan", "Moda", "Elektronik" vb.)

Not - aramanız yeterince güçlü ise, yalnızca bir kontrol kullanabilirsiniz, bu nedenle "moda" araması, adında "moda" olan veya "moda" kategorisine ait olarak etiketlenmiş tüm reklamverenleri döndürür.
"Son Kullanılan" bir onay kutusu olabilir.

Ana fayda:
Listeyi anında daraltmak, ilgili tüm öğeleri birlikte seçmenize ve taşımanıza olanak tanır.

Örnek: "Elektronik" yazar, elektronikle ilgili tüm reklamverenlerin bir listesini alırsınız, tümünü seçersiniz (fare, ctrl + A veya başka bir yöntemle) ve hemen doğru listeye taşırsınız.

4
Dan Barak

Alakalı olabilecek bu kullanıcı arayüzüne sahibim.
https://dl.dropbox.com/u/2965258/foodSelector/foodHierarchy.html
Reklamverenlerin bir şekilde kategoriler halinde düzenlenmiş olması ve kullanıcının hangi kategorinin her biri olduğunu bilmesi yararlı olabilir.
Reklamveren başına tek bir tıklama gerektiren, yalnızca fare içeren bir kullanıcı arayüzü.
Klavye ile çalıştırılabilir, ancak menü kapanır ve her seçim için yeniden genişletilmesi gerekir. Bu, enter menüsü kapatılmadan düzeltilebilir.

3
Juan Lanus

Kabul etmek zorundayım Micky Duncan : Arama/gruplama/filtreleme bu görev için hiç uygun değil.

Büyük bir listeden birkaç öğe aramak ve seçmek istemezsiniz. Listedeki tüm öğelerin yaklaşık yarısını seçmek istiyorsunuz. Kullanıcının öğelerin yarısını seçmesi gerekiyorsa, kullanıcı tüm adayları seçtiğinden ve kimseyi kaçırmadığından emin olmak isteyecektir. Dolayısıyla iş akışı aşağıdakilere daha benzer:

Kağıt üzerinde 150 reklamveren listeniz olduğunu düşünün. Listeden yukarıdan aşağıya doğru gidersiniz ve her biri için "bu reklamvereni ister miyim?" Sonra bir onay işareti veya ihtar verirsiniz - ve sonunda hepsini değerlendirdiğinizden emin olabilirsiniz.

Dolayısıyla Tasarım şöyle olmalıdır:

Selector mockup

Odak, orta listedeki en üstteki öğedir ve kullanıcı öğeyi silmek veya seçilen listeye koymak için sol ve sağ ok tuşlarını kullanabilir. Böylece, reklamverene bağlı olarak sola veya sağa basarak tüm listeyi hızlı bir şekilde çalıştırabilir ve her birine bir şeyler düşündüğünden ve kaçırmadığından emin olur.

2
Falco

Çözümünüz oldukça iyi bir çözüm gibi görünüyor. Gerçekten herhangi bir bilgi eklemediği için sol listeyi kaldırırdım (sadece uzun bir liste ve Enter'a bastıktan sonra sadece bir şeyin buharlaştığını söylemek zor olacak) ve sadece otomatik tamamlama ( ancak kullanıcıların hangi seçeneklerin mevcut olduğunu görebilmeleri için bu alandan bir açılan menü olması gerekir ve kullanıcılarınızın Enter tuşuna basmayı bilmemesi durumunda büyük bir "Listeye reklamveren ekle" düğmesi ekleyin.

Bunu çalışma prototip aşaması ASAP'a (sahte verileri kullanarak) alın ve ardından müşterinizle birlikte demo yapın ve bunları çalıştırmasını sağlayın. Geri bildirimlerini mümkün olan en kısa sürede almak kritik öneme sahiptir, çünkü onlar sık ​​sık kullanan kişilerdir ve bu nedenle rahat hissetmeleri gerekir.

1
Rahul

MickyD ve Patrick tarafından ortaya atılan noktalara katılıyorum. Her şey reklamveren seçiminin nasıl yapıldığına bağlıdır. Müşteri, belirli bir sorun olması gereken reklamverenleri seçmek için kullanıcı arayüzünü kullanacak mı yoksa müşterinin belirli bir sorundaki reklamverenlerle zaten bir listesi var mı? Her iki durumda da filtrelemenin en iyi çözüm olduğunu düşünmüyorum.

Müşteri, reklamverenleri seçmek için kullanıcı arayüzünü kullanıyorsa, yalnızca bir listeyi işaretlenmiş/işaretlenmemiş durumla sunmak çok daha iyi çalışmalıdır. Patrick'in yazdığı gibi, seçilen durumu öne çıkarmak iyi bir fikirdir. Seçili durumun yalnızca seçilen durumu kalınlaştırmak yerine daha açık görünmesini sağlamak da mümkündür. İstemci, tuşu yukarı/aşağı tuşunu kullanarak ve boşluk (veya benzer bir anahtar) kullanarak kontrol/işaretini kaldırarak listede hareket eder.

Müşterinin, belirli sayıda görünen reklamverenlerle bir listesi varsa, ilk yaklaşım, bu listenin dijital biçimde alınıp otomatik olarak içe aktarılıp aktarılmayacağını kontrol etmek olmalıdır. Bu mümkün değilse, liste bir şekilde sıralanır ve kullanıcı arayüzü aynı şekilde reklamverenleri sıralamalıdır.

Üçüncü seçenek, müşterinin reklamverenleri ararken sorunu incelemesi veya sıralanmamış bir listeye sahip olmasıdır. Bu durumda bir filtre işlevinin olması mantıklıdır.

Mesele şu ki, hedefi ve görevi çevreleyen koşulları bilmeden, iyi bir çözüm sağlamak gerçekten zor olabilir.

0
Robert Höglund

İki liste ve iki düğme kullanırdım. Kullanıcı sol listedeki tek öğeleri fare tıklaması ile işaretleyebilir, çift tıklamak elemanı sağ listeye taşır.

Vardiya tıklayabilir, bir aralığı işaretleyebilir ve [>] düğmesi ile işaretli tüm öğeleri sağa aktarabilir. Ctrl ile tek bir eleman işaretli durumdan işaretsiz duruma getirilebilir ve tekrar geri getirilebilir.

Ctrl-a tüm öğeleri işaretler. Tümü diğer program arayüzlerinden bilinmektedir.

Alfabetik olarak sıralanmış öğeler bir girişi bulmayı kolaylaştıracak, kaydırma gerektiğinde ilk karakter o girişe gitmek için bir kısayol tuşu olarak kullanılabilir.

> afoo                    ifoo
bfoo                      jfoo
cfoo                      kfoo
> dfoo                    lfoo
> efoo                    mfoo
> ffoo                    
gfoo
hfoo
          [ < ]    [ > ]  

{a, d, e, f} foo artık solda işaretli. [>] İle kullanıcı onları sağa taşır.

Bu arayüzler oldukça hızlı, kullanımı kolay ve anlaşılması kolaydır. Belki araç ipucu metni ekleyebilir veya 'Seçili öğeler listesine git' ve 'Seçili öğeler listesinden kaldır' düğmelerini adlandırabilirsiniz.

Başka bir listeye taşındıktan sonra, bu listenin yeniden gönderilmesi gerekir.

0
user unknown