web-gelistirme-sc.com

Bu dönen küp arayüzü kullanıcı dostu mu?

Bir küpün farklı taraflarında formun farklı bölümlerinin gösterildiği yenilikçi bir form arayüzü için bir prototip üzerinde çalışıyorum. Küp döner ve kullanıcı küp dönerken doldurabilir. İşte çalışan bir örnek :

enter image description here

Bana göre, sorunumuza oldukça sağlam bir çözüm gibi görünüyor (yani, daha önce formlarımız sayfada çok fazla yer kapladı ve son derece sıkıcıydı) ve bu benim için oldukça kullanışlı hissettiriyor, ancak bu yaklaşımın bazı kullanıcıları olabilir. bilmediğim sorunlar yaşıyorum.

Bu kullanıcı dostu bir model gibi mi görünüyor? Değilse, iyileştirmek için ne yapabilirim?

349
Peter Olson

Bu formu, sadece çalışan bir örnek olduğunu söylediğini bildiğim gibi, bazı kukla verilerle (aşağıya bakın) doldurdum. Tüm bu tasarımla ilgili tek endişem, küpün o yüzü gerçekten görünür olmadığı sürece giriş alanlarının girişi kabul etmemesidir. Çoğu kullanıcının göremedikleri bir giriş alanına yazması için can sıkıcı olacağını düşünüyorum ve o yüz tekrar döndüğünde o alanın yazdığınız tüm şeyleri kaybettiğini keşfediyor.

Luke Wroblewski sitesinde kayıt formlarıyla ilgili bazı harika bilgiler var ve düzeni ince ayarlamak için bir göz atmaya değer. Sokak adresi ayrıntılarının bir satırda olduğunu fark ettim ve daha karmaşık adresler için isteğe bağlı başka bir alanla en azından sokak ve posta koduna veya posta koduna bölmeyi öneririm. Formlardaki uluslararası adreslerle ilgilenmek için bunu XMatters ile ilgili makale işaretine bakın.

İlk kayıt sırasında sosyal güvenlik numarasını gerçekten almanız gerekip gerekmediğini düşünürüm. Kesinlikle gerekliyse, bazı kullanıcılar bu tür ayrıntılar hakkında biraz komik olabileceğinden neden gerekli olduğuna dair bazı satır içi yardım vermenizi öneririm. Mümkünse kademeli katılım yoluyla bilgi almayı düşünün.

Biraz rahatsız edici olduğu için muhtemelen daha az canlı bir yeşil seçerim ve kırmızı metni farklı bir renge değiştiririm. Renk körü kullanıcılara nasıl göründüğünü görmek için Renk Körü Web Sayfası Filtresi kullanabilirsiniz. Daha fazla renk kullanmaktan korkmayın - ama çok fazla değil! Smashing Magazine'in bir renk teorisi üzerine 3 bölüm makalesi var.

Bence tüm konseptin çok şey var ve ana UX sorunları çözüldükten sonra oldukça kaygan görünecek. Bence kullanıcılar bunun yeniliklerini sevecekler. Kayıt formları bugünlerde çok sıkıcı. A List Apart'ta yer alan bu makalede neden kayıt formlarının ölmesi gerekir (yine Luke Wroblewski tarafından) yer almaktadır. Bence bu örnek sadece kayıt tabutundaki son çiviyi patlatabilir, onunla iyi şanslar!

enter image description here

290
Roger Attrill

Ciddi cevap: korkunç

Bunu geliştirmek için dönen bir küp olmamasını sağlayabilirsiniz.

Asıl sorun onu kontrol edemem. İyi bir kullanıcı arayüzü, kullanıcının "hey, harikayım! Bak ne yapabilirim!"

Bu beni "kutsal saçmalık, berbat. Bir formu bile dolduramıyorum" diye düşündürüyor. 3D zihinsel bir model tutmam, baş aşağı doldurmam ve bir açıyla görüntülenen metinle ilgilenmem gerekiyor. Kelepçe ile gitar çalmaya çalışmak gibi.

Sayfadaki alan endişe ediyorsa, akordeon formu kullanın. Daha sonra kullanıcı tüm formu görebilir, ilerlemelerini kolayca ölçebilir ve şu anda sadece ihtiyaç duyduklarını görüntüleyebilir.

Aptalca cevap: harika!

Formları 2D prangalarından kurtardığınızı gördüğüme sevindim. Bunu N taraflı 3D şekiller oluşturan bir kütüphaneye soyutlayabilir misiniz, burada N ihtiyacım olan form bölümlerinin sayısıdır? Matematik çok zorsa, belki de formlarımızı uygun şekilde yeniden düzenleyebiliriz oluşturması kolay şekiller - bunları 11 yerine 12 bölüme ayırın.

Ayrıca, daha fazla yanıp sönen ışığa sahip olalım.

215
Nathan Long

HAYIR. Herhangi bir şekilde, bir üçgen veya herhangi bir geometrik şekil yapsanız bile, cevap hala HAYIR olacaktır.

Çalışma örneğinizi ziyaret ettim (tahmin etmek bir beta ya da bir şeydir). Form alanlarını şanssız doldurmaya çalıştım. Ne yazdığını, yine şanssız okumaya çalıştım. Sonra sekmeyi kapattım.

Sorunuzu tekrar okudum, kübü tekrar ziyaret ettim ve 1 saniye sonra çıkıp "benimle dalga geçiyorsunuz" diyerek çıktım.

Cevabımı sonuçlandırıyorum ve gözlerimde bu iyi bir UX değil. İyi olmaktan uzak. Web giderek daha kolay hale geliyor, neden zor şeyler istiyorsun ?!

Sorunuza cevabım HAYIR. Kesinlikle.

56
EnexoOnoma

Tamam, biraz parçalara ayırmak gibi hissediyorum ama orada are gerçekten bu konuda beni rahatsız bazı şeyler.

  1. Hangi yazı tipini kullandığınızdan emin değilim, ancak karakter aralığı benim için gerçekten garip görünüyor
  2. 32px, veri girişi kontrolleri için oldukça standart bir genişliktir (50 veya benzeri bir şey kullandığınızı düşünüyorum)
  3. Genellikle, durumlar için açılır listeler kuzeydoğudan başlayarak Posta koduna göre sıralanır
  4. Gönder düğmesi sağa hizalanmış IMO olmalıdır
  5. Muhtemelen ifadeyi bir ifadenin gerçek görüntüsüyle değiştirmelisiniz (metin tabanlı olanlar metinsel veri alışverişi için ayrılmıştır (e-postalar))

Ama insan, bunun dışında, gerçekten, gerçekten iyi görünüyor.

47
Daniel
  1. Küpünüzü nasıl inşa ettiğinizi bilmiyorum, ama küpün dönüşü sırasında bozuluyor gibi görünüyor.

  2. otomatik olarak dönen bir küp herhangi bir kullanıcı için saçma ve rahatsız edici - küpü döndürme olasılığına sahip olmak (örneğin bir kaydırma ile) oldukça eğlenceli hale getirebilir

  3. Metin asla baş aşağı olmamalıdır. Hiç.

  4. Üçüncü boyutu güzellikten başka önemli bir şekilde kullanmadınız. Örneğin, formun sonraki/önceki sayfasını sunma eylemi olarak sola veya sağa dönüş yapmış olabilirsiniz. Formun geçerli sayfası için yardım almak, yasal bildirimler için aşağı döndürmek, ancak bunlar normal kullanımda görünmekten gizlenir, bu da istersiniz.

34
demallien

Onu seviyorum ve gerçekten yararlı olabileceğini düşünüyorum. ama içeride tüm köşeleri olan bir versiyon görmek istiyorum.

32
colmcq

İçeriği ve sunumu ayırmak için CSS kullanımı çok iyi yapılır. Gelişmiş grafik deneyimini tercih eden kullanıcılar bundan zevk alabilirken, metin tabanlı tarayıcıların kullanıcıları ve CSS stil sayfalarını devre dışı bırakanlar, birleştirilmemiş bir doğrusal sürüm görecekler.Giriş doğrulaması, zayıf şifreleri ve sahte SSN'leri filtrelemede oldukça etkili görünüyor. ancak tam olarak test edemedim, çünkü gerçek bir SSN'yi ifşa etmek istemedim. Benim tek şikayet CSS olmadan görüntülendiğinde sipariş yanlış olduğunu, ancak bu HTML div yeniden düzenleyerek kolayca düzeltilebilir olmasıdır.

18
blah

Dürüst olmak gerekirse, daha fazla soru sormanız gereken sahnede gibisiniz.

İstatistikleriniz çok sayıda kişinin formunuzun eski sürümüne başladığını ancak doldurmadığını gösteriyor mu? Bu, can sıkıntısını veya sıkıcı bir görevden geçmek için yetersiz teşviği gösterebilir. Yenilik (küp arayüzü gibi) yardımcı olabilirken, formun uzunluğunu azaltarak daha fazla başarı elde edebilirsiniz. Bu, insanların tamamlamaya zorlandığı önemli bir formsa, sıkıcı tarafta hata yapmalısınız, ancak karıştırılmaları imkansız olmalıdır (yani değil bir küp).

İnsanlar az sayıda özel soruda en yüksek bırakma ihtimaline sahip mi? (ör. Merhaba. Anonim bir ankete katılmanızı istiyoruz! S1: Sosyal güvenlik numaranız nedir?) Bu, formunuzun talep ettiği bilgilerden biri gibi kullanıcıların rahatsız edici bir paylaşım olduğu başka bir şeyi gösterebilir. Bu durumda, dönen bir küp kesinlikle cevap değildir.

Yukarıdaki gibi sorular sorun ve ardından küp arayüzünün bunları nasıl ele aldığını kendinize sorun. Eğer tek yaptığı şey "yeni olmak" ise, bir sorun yaşayabilirsiniz. Bir kişinin romanı başka birinin kafasını karıştırır.

Şahsen, bir küp arayüzünün göz şekeri eklemekten başka bir formu doldurma sürecine gerçekten anlamlı bir şey kattığı konusunda zorlanıyorum. Bir formu doldurmak doğrusal bir süreçtir. Formun farklı alanlarını bir 3D nesnenin kenarlarıyla ilişkilendirmek kullanıcının formu doldurmasına nasıl yardımcı olur? Farklı küp yüzlerinde bitişik alanların olması gerçekten engel olabilir mi?

Yine, eğer tüm küp arayüzü "daha az sıkıcı" ise o zaman gerçekten alternatifleri bakmak gerektiğini düşünüyorum. Formun dilini renklendirin. "Adres" yerine "Gerçek ölü ağaçlara basılmış spam göndermemizi istediğiniz yere!" (Eğer gerçekten bir spamcıysanız rahatsız edici olabilir!). Eğlenceli şeyler eklemeyi deneyin. Örneğin. Adın hemen ardından, "gizli ajan çağrı işareti" için bir alan ekleyin (Şifre kurtarma için muhtemelen yararlıdır). Tipografi ve arayüz ile oynayın. Formu bakmak hoş hale getirin. (Roger'ın yukarıda yayınlanan küp resmi sadece hızlı ve kirli bir model olduğunu biliyorum, ancak bitmiş forma uzaktan yaklaştığını düşünüyorsanız, muhtemelen bu konuda yardım almanız gerekir.)

İyi şanslar!

17
g-ball

Kullanıcı deneyimi açısından harika bir şekilde çalıştığını düşünüyorum ve çok uzak olmayan bir gelecekte tümü web formlarının bu modeli kullanacağını önermek için bile ileri gideceğim.

Geliştirmek için tek önerim animasyonu hızlandırmak olabilir - form alanlarını seçmek biraz daha zor olabilir, ancak ekstra hız kullanıcılarının heyecan verici ve daha ilgi çekici bulacağını düşünüyorum.

16
Boris Hamster

Tasarımınız açıkça bir başarısızlıktır. Yeterli sabırla, formu doldurmak gerçekten mümkündür (en azından bir kısmı). Bunu açıkça önlemeye çalıştığınız için başarısız oldunuz.

12
Jerry Coffin

Örneğini gördüğümde, bunun sadece bir teknik demo olduğundan emindim ve formla etkileşime girerken dönmeyecekti. Ama cevapları ve yorumları okuduktan sonra sanırım yanılmışım.

Dönen bir form muhtemelen tüm ziyaretçilerinizi kaybedecektir.

Bunun yerine, formdaki farklı sayfalar arasında geçiş yapmak için döndürmeyi kullanmayı öneriyorum. PC oyunu "Riddick Günlükleri: Kasap Koyu'ndan Kaçış" ana menüsü gibi bir şey düşünüyorum. Eğer hızlı ve çabuk yapabilirsen, bu büyük bir etki yaratabilir.

9
Znarkus

Kullanılabilirlik bu formun bağlantısıyla aynı cümlede kullanılmamalıdır üzgünüm dostum, bu doğru.

Formu% 75 oranında bile göremezsiniz, göremediğiniz kullanılabilir bir forma nasıl sahip olabilirsiniz.

Zaman kaybı, etkileyici 3d css olsa ...

Düzeltme yolları: Küpü döndürmeyi durdurun, kör olmayan renkleri seçin, Marquee metni gerçek mi? Formu göster ... her zaman!

8
dannydev

Dedin:

"Değilse, geliştirmek için ne yapabilirim?"

İşte birkaç öneri:

  • Renkleri gözlerime zarar vermeyen bir şey yap.

  • Küpün dönmesini her zaman durdurun.

  • Tüm verilerin aynı anda görülebildiğinden emin olun.

  • Yani, onu uygun bir giriş formu gibi yapın.

6

Çok yenilikçi bir yaklaşım.

Ama paradigma değişiminin kullanıcı dostu olmadığını düşünüyorum. Yapmaya çalıştığınız şey, kullanıcının bunu gerçek hayatta nasıl yapacağını değiştirmektir. Bu sadece kullanıcının algısını zorlamakla kalmayacak, aynı zamanda öğrenme eğrisini de artıracaktır.

Bunu gerçek hayatta hayal edin. Büyük bir küp tutuyorum ve üzerine bir şeyler yazmak için onu döndürüyorum. Ve sonra diğer kişinin nihayet nasıl okuyacağından emin değilim. Zor Görev Eh!

Daha gerçekçi bir şey düşünün.

6
Kabir Roy

Kullanıcılara tam komut verin, fare hareket ettiğinde olduğu gibi küpün fare ile hareket etmesi gerekir, böylece kullanıcı bölümleri hızlı bir şekilde seçebilir (gönder, form, diğer). şu anda küp doğru konuma dönmek için beklemek zorunda.

5
Pir Abdul

Küpün durmadan dönmesini sağlamak yerine, küp döndürme efektini bir sayfadan diğerine geçiş olarak kullanırsanız, kavramın gerçekten harika olacağını düşünüyorum. Küp ilk tarafa dönmeli ve sonra durmalı ve kullanıcıya ilk tarafı okuması için zaman vermelidir. Kullanıcı bununla işini bitirdiğinde, sonraki düğmeyi tıklatabilir ve küpün bir sonraki tarafa dönmesini sağlayabilir, vb.

Bu, birçok kullanıcının eğlenmesini sağlayacağını düşündüğüm ilginç bir geçiş ekleyecek :)

5
user4662

Tamam, şüpheci olduğumu ama çalışma sürümünü denedim ve onunla çok eğlendim itiraf ediyorum!

Bu, bir oyun kayıt formu veya çocuklar için bir şey için mutlak harika bir fikir, bununla kaydolmanın bir meydan okuma olduğunu ve kaydolmanın kendisi, ödülün sınırlı erişim topluluğu için mükemmel olacağını hissediyorum. Daha az giriş alanı, daha az döndürme, daha hoş görünüm ve belki de kullanıcının sürükleyebilmesi onu gerçekten harika hale getirebilir.

Ancak sorunuzu iyi cevaplamak, bu proje için durumunuzda işe yaramıyor gibi görünüyor.

4
Taly Emmanuela

Bu sıkıcı form dünyasında çok uzun süre yaşamış biri olarak, birisinin geleceği ve engelleri tamamen yıkacağı, bir paradigma değişikliğine neden olacağı ve kitabı erişilebilir ve yenilikçi formlarda yeniden yazacağı günü yaşayacağımı hiç düşünmemiştim. .. şimdiye kadar.

Eklediğim kullanılabilirlik açısından en sevdiğim şeylerden bazıları, Google ve Facebook'un beğenilerinin dönüşüm oranlarını artırmaya yardımcı olması için borçlanması gerektiğini düşünüyorum.

Küpün bir tarafına odaklanamama - Bu harika bir şey. Alanları nasıl doldurmaya çalıştığımı seviyorum, ancak küp yüzünün tekrar geri dönmesini beklemek zorundayım, böylece başka bir alanı hızla doldurabilirim. Formumu doldurmam yaklaşık 6 dakika sürdü ve bence kullandığım 30 saniyeyi (şakalar) alan diğer formlardan çok daha iyi. İnsanları kayıt sayfasında daha uzun tutmanın hemen çıkma oranınızı düşürmenize yardımcı olacağını düşünüyorum.

Okunamayan küçük etiketler - Başka kimse neden bunu düşünmedi? Herkes formlarını güzel ve büyük, yararlı bağlamsal etiketler ve bir formu doldurma sürecini kolaylaştırmak için başka şeyler yapmakla ilgilenir (ya da öyle derler). Etiketleri okumak için birkaç kez yakınlaştırmak zorunda kaldım, ancak küpün hızı gözlerimin düzgün bir şekilde odaklanamayacağı anlamına geliyor: iyi iş.

Küpün hızı - Başlığı ilk gördüğümde, hemen düşündüm, küpün gerçekten yavaş döndüğünü iddia ettim ve yapabiliyorum form etiketlerini ve girdileri açıkça görmek için ne kadar yanılmışım. Küpün hızı hızlı, ama çok hızlı değil. Gözlerinizin odaklanmasını ve bir şeylerin bulanıklaşmasını zorlaştıracak kadar hızlı, ancak çok hızlı değil. Bence küpün hızı sitenizin daha hızlı görünmesini sağlıyor.

Ancak, ne yazık ki, formunuzla ilgili bazı sorunlar var:

Bu yazı tipi çok çekici değil - Daha güzel bir yazı tipi denemenizi öneririm, Comic Sans MS Bold muhtemelen ilk seçimim olurdu. Okunabilir ve dönen küpü daha da eğlenceli hale getirir.

Yeşil yeterince parlak değil - Söylediğim için üzgünüm, ama o yeşil yeterince parlak değil. Daha modern görünmek için daha hafif tonları alabilirsin.

Gönder düğmesi ortalanmamış - Bence küpün Gönder düğmesi tarafı ortalanmalıdır. Gönder düğmesi sola hizalanır ve düğmedeki metin de ortalanmaz. Bu erişilebilirlik açısından kötüdür ve bu iki küçük ayarın yapılması kesinlikle daha iyi olacaktır. Düğmeyi siyah veya beyaz yaparak tasarımla biraz daha çalışmayı düşünün. Gri çok tarihli görünüyor.

Sıcaklık veya karakter eksikliği - Animasyonlu GIF'lerin eksikliğinin formu gerçekten etkilediğini düşünüyorum, ancak sadece bu değil, kaynağa baktım ve yapmadım <Marquee> etiketinin tek bir örneğine bakın. Estetik olarak benim sevdiğim için biraz ÇOK statik, orada bazı hareketler daha eğlenceli hale getirebilir (yazı tipi değişikliği ile birlikte, elbette).

Doğrulama eksikliği - Anlayabildiğim kadarıyla formunuzda doğrulama ve/veya doğrulama mesajları yok. Doğrulama olmadan bir form kullanılabilirlik kabusu, mümkünse, doğrulama mesajları için yıllar boyunca karşılaştığım diğer formlar gibi daha samimi ve daha az pasif-agresif görünmelerini sağlamak için <Marquee> Etiketini kullanmayı düşünmelisiniz.

Sosyal güvenlik numarası etiketi çok uzun - Etiket diğerlerinden daha geniş, etiketleri doğru hizalamayı veya belki de satır sonunu koymayı deneyebilirsiniz satırları biraz daha kısa ve okunabilir hale getirmek için.

Mac OS'ta Google Chrome (en yeni) 'de seçim açılır menüsü bozuk - Etiket metni etiketin üstünde görünüyor.

Yine Mac OS'ta Google Chrome (en yeni) yasal bilgi sayfasındaki başlık bozuk - Aslında kesiliyor -off, sadece gerçekten görebiliyorum, "önemli yasal bilgi !!!"

Çok fazla ünlem işareti - Yasal şartlar sayfasında neden bağırıyorsunuz? Bir, maksimum, iki ünlem işareti. Kuralları biliyorsun? Çok fazla ünlem işaretiyle harika bir tasarımı bozmayın.

Genel olarak büyük tasarım, ama daha iyi bir trol. Bu muhtemelen şimdiye kadar okuduğum en iyi trol sorularından biri, hatta Yahoo! Cevaplar, çok iyi.

4

6'dan fazla sayfanız olmayacaksa bu işe yarar.

Sayfanın bazı bölümleri, ileri bakmadıklarında görünmeyeceklerini unutmayın. Bu bir kullanılabilirlik sorunu olabilir.

UI'ler, dönen bir araç çubuğunun bulunduğu yerlerde yapılmıştır. Yine, 4 yüz sınırı vardı ve insanlar kafa karıştırıcı ve sinir bozucu olan tarafta ne olduğunu anlayamadı.

Doğru yönlendirme bir zorluk olacaktır.

Ama bazen insanlar hayal kırıklığına uğramaktan hoşlanırlar. Angry Birds'e bak. İnsanlar kaybolmaya devam ediyor ve zorluk gittikçe zorlaşıyor. Ama eğlenceli! Her şey neyi başarmaya çalıştığınıza bağlıdır.

3
Tyler Langan

Dilimlenmiş ekmekten bu yana en büyük şey

İşte ivme eklemek için iyi bir kütüphane: https://chrisbateman.github.io/impetus/

Sadece küplerden daha ileri gitmek istiyorsanız: https://stackoverflow.com/questions/33629754/text-within-a-non-rectangular-shape-pentagon-or-hexagon

Eski web sitem.

Sonra iş aramak zorunda kaldım ve daha "normal" olmaya karar verdim

enter image description here

2
Mars Robertson

Neden bazı insanlarla denemiyorsun? Bence bazı kullanıcı testleri yapılıyor.

Bunca zamanı bir prototip oluşturmak için harcadınız, o zaman neden kullanıcılarınızın denemesine izin vermiyorsunuz? Bunu tam olarak ne için inşa ettiğinizi söylemediniz, peki iyi olup olmadığını nasıl bilebiliriz? Şahsen, prototipinizi eğlenceli buldum - gerçekten eğlenceli bir oyun yapabilir. Bu durumda, kullanıcı testi size olumlu sonuçlar verebilir.

Ama bir oyun yaptığınızdan şüpheliyim. Muhtemelen, test denekleriniz onu inanılmaz derecede sinir bozucu bulacaktır. Ama kim bilir! Bu kullanıcı testlerinin güzelliği - neredeyse her zaman sizi şaşırtacak bir şey var.

2
Sauce McBoss

Metni dikey olarak yeniden düzenlemenin daha iyi olacağını düşünüyordum:

  • k
  • ben
  • l
  • l
  • m
  • e
  • :)

Dürüst olmak gerekirse bu standart bir bilgisayar ekranında ise bu yaklaşımın başarısız olduğunu düşünüyorum. Tüm eleştirmenler oldukça geçerli ve derinlemesine olduğu için tekrarlamayacağım birçok geri bildirim aldınız.

, FAKAT

Bunun bir VR/AR ortamının parçası olduğunu düşünüyorsanız ve küp elle manipüle edilebiliyorsa, bu tür bir alan için giriş oluşturmak için yeni bir yaklaşım olduğunu düşünüyorum. Hatta küpü bir yuvaya yerleştirmenin bir yolu olarak yerleştirebilirsiniz.

1
RCburn