web-gelistirme-sc.com

Bu aşağı açılır desen için bir ad var mı?

Son zamanlarda fareyle üzerine gelindiğinde açılan kutularda küçük bir kullanıcı arayüzü sorunu gördüm. İşte böyle bir açılır listeye bir örnek (Bloomberg tek suçlu olmasa da):

https://www.bloomberg.com/view/articles/2017-08-09/yogurt-liquidity-and-listings

edit : Tarihsel amaçlar için işaretlenmiş ekran görüntüsü ekleme. Kırmızı çizgi kullanıcının fare yoludur. Kırmızı kutuya girmek, Görüş açılır menüsünü anında gizler.

Bloomberg View - Menu issue

Üst çubukta "Fikir" in üzerine gelirseniz, Fikir bölümü ile ilgili bağlantılar sunulur.

Sorun: Fikir düğmesindeki konumlardan bazı bağlantılara giden düz bir yol, Fikir seçeneklerini anında temizleyerek "Politika" bölümünden geçecektir. Bu, kullanıcının bağlantıyı seçerken fare yollarını dikkatlice düşünmesi gerektiği anlamına gelir.

Bu sorunun bir adı var mı? Çözmenin en iyi yolları nelerdir?

edit : Burada, Ben Kamens'in blog izniyle, sorunu gösteren ek bir gif aşağıdaki Midas ile bağlantılı :

Gif demonstrating menu issue

244
N. Quest

Çözüm için bir ad için bir öneri bu harika makale yönlü menü hedeflemesidir .

Amazon, imlecin yolunu algılayarak kullanıcıların 'mega menü', gecikmeleri kullanmadan üzerine getirirken kullanıcıların istenmeyen bir öğeyi yanlış seçmesini nasıl engellediğini gösterir.

İmlecin her konumunda geçerli fare konumu ile açılır menünün sağ üst ve alt köşeleri arasında bir üçgen çizebilirsiniz. Bir sonraki fare konumu bu üçgenin içindeyse, kullanıcı muhtemelen imlecini o anda görüntülenen alt menüye taşır. Amazon bunu güzel bir etki için kullanıyor. İmleç bu mavi üçgen içinde kaldığı sürece geçerli alt menü açık kalacaktır.

Amazon Hover Menu direction

289
Midas

Bahsettiğiniz sorun bazen " dar fare koridoru " olarak adlandırılır. Dar bir fareye sahip olmak koridor, kullanıcıların kullanıcı kontrolü eksikliğinden rahatsız olmasına neden olabilir.

Amazon'un üçgen yaklaşımına bir alternatif (başlangıçta Bruze Tognazzini 1986'da Apple ile yapıldı) koridoru genişletmek için küçük kutular kullanmaktır. Bu özel uygulamanın bir avantajı, saf CSS (sözde öğeler) olmasıdır, bu nedenle jQuery bağımlılığını (veya Vanilla JS) kaldırır.

Image from: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

(Resim: https: //css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ )

96
Jonathan

Çalıştığım yere "ölüm yıldızı hendek menüsü" diyoruz. Bu ismi icat etmediğimizden eminim ama kitabını bulamıyorum.

36
Matthew

Bir programcı bakış açısından, fareyle üzerine gelme niyet fonksiyonu öneririm (çevre reaksiyonunu yaklaşık 300 ms geciktirir. Bu çok görünür değildir ve yanlışlıkla menülerin kapanması/açılması riskini azaltır). Her ne kadar 300 ms'nin daha karmaşık menüler ve alt menüler ağaçlarına ekleneceğini görebilirsiniz.

9
Snsa90

Bu model için kullandığım isim fareyle üzerine gelme tüneli .

Vurgulu tüneller uzun zamandır sorunlu olarak kabul edildi: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Vurgulu menülerle ilgili en kötü şeylerden biri, kullanıcıları farelerini vurgulu tünellerden geçirmeye zorlamalarıdır. Fareyle üzerine gelme tünelleri, kullanıcıların bir öğeyi tıklamak için farelerini hareket ettirmeleri gereken pasajlardır. Daha az teknoloji meraklısı olan yaşlı kullanıcılar bunu yapmakta zorlanırlar. Teknolojiyi meraklı kullanıcılar bile, farelerini sınırlı bir yolda hareket ettirmek için can sıkıcı bulabilirler.

'Anti-desen'in sadece uçan tünelin çökmesinin bir yan etkisi olduğundan şüpheleniyorum, çünkü kullanıcıları tamamen yönlendirmenin güvenilir bir yolu olmaz reklamlara veya diğer içeriklere.

4
Michael Heraghty

Hayır, bu model için bir isim yok.

Sadece bir vurgulu menü, vurgulu menüler UX söz konusu olduğunda çöptür. Ben bile, deneyimli bir internet kullanıcısı bu menüler arasında gezinme sorunları var ve bir hover menüsü kullanmak zorunda kaldığımda 10 kez 9'da çıldırıyorum.

Bu tür menüleri biraz daha kullanıcı dostu hale getirmek için bir şey, örneğin kullanıcılar masadan çıktıklarında küçük bir gecikme ayarlamaktır, böylece menü hemen kapanmaz, ancak 1-1.5s gecikmeye sahiptir, böylece kullanıcı hareket etme şansına sahiptir fare normal akışındayken geri döner.

1
Pectoralis Major