it-swarm.asia

Apakah antarmuka kubus berputar ini ramah pengguna?

Saya sedang mengerjakan prototipe untuk antarmuka bentuk inovatif, di mana bagian-bagian berbeda dari bentuk ditampilkan di sisi kubus yang berbeda. Kubus berputar, dan pengguna dapat mengisinya saat kubus berputar. Ini adalah contoh kerja :

enter image description here

Bagi saya, sepertinya ini adalah solusi yang cukup kuat untuk masalah kami (yaitu, sebelumnya, formulir kami menghabiskan terlalu banyak ruang pada halaman dan sangat membosankan), dan rasanya cukup berguna bagi saya, tetapi pendekatan ini mungkin memiliki beberapa pengguna- mengalami masalah yang tidak saya ketahui.

Apakah ini tampak seperti model yang ramah pengguna? Jika tidak, apa yang bisa saya lakukan untuk memperbaikinya?

349
Peter Olson

Saya mengisi formulir dengan sebagian besar data dummy (lihat di bawah) karena saya tahu Anda mengatakan ini hanya contoh yang berfungsi. Satu-satunya perhatian saya dengan seluruh desain ini adalah bahwa bidang input tidak menerima input kecuali bahwa permukaan kubus benar-benar terlihat. Saya pikir itu akan menjengkelkan bagi sebagian besar pengguna untuk mengetik ke bidang input yang tidak dapat mereka lihat dan kemudian menemukan bahwa ketika wajah itu berputar lagi bahwa bidang itu telah kehilangan semua hal yang Anda ketik.

Luke Wroblewski memiliki beberapa info hebat di situsnya sehubungan dengan formulir pendaftaran dan perlu dicoba untuk menyempurnakan tata letak. Saya perhatikan detail alamat jalan semuanya dalam satu baris, dan saya sarankan untuk membagi setidaknya menjadi jalan dan kode pos atau kode pos, dengan bidang opsional lain untuk alamat yang lebih kompleks. Lihat ini artikel tentang UXMatters untuk berurusan dengan alamat internasional dalam bentuk.

Saya akan mempertimbangkan apakah Anda benar-benar perlu mendapatkan nomor jaminan sosial saat mendaftar. Jika itu benar-benar diperlukan, maka saya sarankan memberikan bantuan inline tentang mengapa itu diperlukan karena beberapa pengguna dapat sedikit lucu tentang detail semacam itu. Jika mungkin pertimbangkan untuk memperoleh informasi melalui keterlibatan bertahap .

Saya mungkin akan memilih warna hijau yang kurang jelas, karena sedikit membingungkan, dan mengubah teks merah ke warna yang berbeda. Anda dapat menggunakan Filter Halaman Web Colorblind untuk melihat bagaimana tampilannya bagi pengguna yang buta warna. Jangan takut untuk menggunakan lebih banyak warna - tetapi tidak terlalu banyak! Smashing Magazine memiliki bagian artikel tentang teori warna .

Saya pikir seluruh konsep memiliki banyak hal untuk itu dan setelah masalah UX utama telah disetrika itu akan terlihat sangat apik. Saya pikir pengguna akan menyukai hal baru itu. Formulir pendaftaran sangat membosankan hari ini. Artikel di Daftar ini Terlepas dari alasan formulir pendaftaran harus mati (lagi oleh Luke Wroblewski) sangat tepat. Saya pikir contoh ini mungkin akan menggedor paku terakhir di peti mati pendaftaran, jadi semoga berhasil!

enter image description here

290
Roger Attrill

Jawaban serius: mengerikan

Untuk meningkatkannya, Anda bisa membuatnya bukan kubus yang berputar.

Masalah utamanya adalah saya tidak bisa mengendalikannya. Antarmuka pengguna yang baik membuat pengguna berpikir "hei, saya luar biasa! Lihat apa yang bisa saya lakukan!"

Ini membuat saya berpikir, "sial, aku payah. Aku bahkan tidak bisa mengisi formulir." Saya harus menjaga model mental 3D, mengisi barang dengan terbalik, dan berurusan dengan tampilan teks pada sudut. Ini seperti mencoba bermain gitar dengan borgol aktif.

Jika ruang pada halaman menjadi perhatian, gunakan formulir akordeon. Kemudian pengguna dapat melihat seluruh formulir, dengan mudah mengukur kemajuan mereka, dan hanya menampilkan apa yang mereka butuhkan saat ini.

Jawaban konyol: ini luar biasa!

Saya senang melihat Anda membebaskan formulir dari belenggu 2D mereka. Bisakah Anda mengabstraksi ini menjadi perpustakaan yang membangun bentuk 3D sisi-N, di mana N adalah jumlah bagian formulir yang saya butuhkan? Jika matematika terlalu sulit, mungkin kita dapat mengatur ulang formulir kita agar sesuai bentuk yang mudah dirender - pisahkan menjadi 12 bagian, bukan 11, dll.

Juga, mari kita punya lebih banyak lampu berkedip.

215
Nathan Long

TIDAK. Bagaimanapun, bahkan jika Anda membuatnya menjadi segitiga atau bentuk geometris apa pun, jawabannya tetap TIDAK.

Saya mengunjungi contoh kerja Anda (menebak adalah beta atau sesuatu). Saya mencoba mengisi formulir isian tanpa keberuntungan. Saya mencoba membaca apa yang tertulis, sekali lagi tanpa hasil. Lalu, saya menutup tab.

Saya membaca lagi pertanyaan Anda, mengunjungi kembali kubus dan keluar setelah 1 detik, mengatakan "Anda pasti bercanda".

Yah menyimpulkan jawaban saya dan di mata saya ini bukan UX yang baik. Itu jauh dari baik. Web semakin mudah, mengapa Anda menginginkan hal-hal sulit ?!

Jawaban saya untuk pertanyaan Anda adalah TIDAK. Tentunya.

56
EnexoOnoma

Oke, saya merasa agak bermaksud memilah-milah tetapi ada ada beberapa hal yang benar-benar mengganggu saya tentang hal ini.

  1. Saya tidak yakin font apa yang Anda gunakan, tetapi kerning terlihat sangat aneh bagi saya
  2. 32px adalah lebar standar yang cukup untuk kontrol entri data (saya pikir Anda menggunakan 50 atau sesuatu)
  3. Biasanya, daftar drop-down untuk negara bagian diurutkan berdasarkan kode pos, mulai dari timur laut
  4. Tombol kirim harus IMO rata kanan
  5. Anda mungkin harus mengganti emotikon dengan gambar aktual dari emotikon (yang berbasis teks dicadangkan untuk pertukaran data tekstual (email))

Tetapi manusia, selain itu, terlihat sangat, sangat bagus.

47
Daniel
  1. Saya tidak tahu bagaimana Anda membangun kubus Anda, tetapi sepertinya kubus itu terdistorsi selama rotasi.

  2. kubus yang berputar secara otomatis hanya konyol dan menjengkelkan bagi setiap pengguna - memiliki kemungkinan untuk memutar kubus (dengan menggesek misalnya) mungkin membuatnya cukup menyenangkan

  3. Teks tidak boleh disajikan terbalik. Pernah.

  4. Anda belum memanfaatkan dimensi ketiga dengan cara yang signifikan selain kecantikan. Misalnya, Anda dapat membuat rotasi ke kiri atau kanan sebagai tindakan untuk menyajikan halaman berikutnya/sebelumnya. Rotasi ke atas untuk mendapatkan bantuan untuk halaman saat ini dari formulir, rotasi ke bawah untuk pemberitahuan hukum, tetapi ini disembunyikan dari tampilan dalam penggunaan normal, yang adalah apa yang Anda inginkan.

34
demallien

Saya menyukainya dan berpikir itu bisa sangat berguna. tapi saya ingin melihat versi dengan semua sudut di dalamnya.

32
colmcq

Penggunaan CSS untuk memisahkan konten dan presentasi dilakukan dengan sangat baik. Pengguna yang lebih menyukai pengalaman grafis yang disempurnakan akan dapat menikmatinya, sementara pengguna browser berbasis teks dan mereka yang menonaktifkan lembar gaya CSS akan melihat versi linear tanpa embel-embel. Validasi input tampaknya cukup efektif untuk menyaring kata sandi yang lemah dan SSN palsu. , meskipun saya tidak bisa mengujinya sepenuhnya karena saya tidak ingin membocorkan SSN yang asli. Satu-satunya keluhan saya adalah bahwa pemesanan tidak benar ketika dilihat tanpa CSS, meskipun ini dapat dengan mudah diperbaiki dengan mengatur ulang HTML div.

18
blah

Jujur itu terdengar seperti Anda berada pada tahap di mana Anda perlu bertanya lebih banyak.

Apakah statistik Anda menunjukkan bahwa sejumlah besar orang memulai versi lama formulir Anda tetapi gagal melengkapinya? Itu mungkin mengindikasikan kebosanan atau insentif yang tidak memadai untuk melewati tugas yang membosankan. Meskipun hal baru (seperti antarmuka kubus) dapat membantu, Anda mungkin lebih sukses dengan mengurangi panjang formulir. Jika ini adalah bentuk penting yang harus diselesaikan orang, maka Anda harus membuat kesalahan di sisi membosankan tetapi tidak mungkin dikacaukan oleh (mis. bukan a cube).

Apakah orang cenderung memiliki kemungkinan tertinggi untuk berhenti pada sejumlah kecil pertanyaan spesifik? (mis. Hai. Kami ingin Anda berpartisipasi dalam survei anonim! T1: Apa nomor jaminan sosial Anda?) Itu mungkin menunjukkan sesuatu yang lain, seperti salah satu bagian dari informasi yang diminta formulir Anda adalah sesuatu yang tidak nyaman untuk dibagikan pengguna. Jika ini masalahnya, kubus pemintalan jelas bukan jawabannya.

Ajukan pertanyaan seperti di atas, lalu tanyakan pada diri Anda bagaimana antarmuka kubus mengatasinya. Jika semua yang dilakukannya adalah "menjadi novel" maka Anda mungkin memiliki masalah. Novel satu orang membingungkan orang lain.

Secara pribadi, saya mengalami kesulitan untuk menemukan bagaimana antarmuka kubus benar-benar menambahkan sesuatu yang berarti dalam proses mengisi formulir selain menambahkan eye-candy. Mengisi formulir adalah proses linier. Bagaimana cara mengaitkan berbagai bidang formulir dengan sisi-sisi objek 3D membantu pengguna mengisi formulir? Mungkinkah memiliki bidang yang berdekatan pada wajah kubus yang berbeda benar-benar menghalangi?

Sekali lagi, jika semua antarmuka kubus yang dilakukan adalah "menjadi kurang membosankan" maka saya pikir Anda harus benar-benar melihat alternatif. Semarakkan bahasa form. Alih-alih "alamat" taruh "Tempat di mana Anda ingin kami mengirim spam yang dicetak di pohon mati asli!" (Ini mungkin mengesalkan jika Anda benar-benar seorang spammer!). Coba tambahkan hal-hal menyenangkan. misalnya Tepat setelah nama, tambahkan bidang untuk "tanda-panggilan agen rahasia" (Mungkin berguna untuk pemulihan kata sandi). Mainkan dengan tipografi dan antarmuka. Jadikan formulir itu menyenangkan untuk dilihat. (Saya tahu gambar kubus yang diposting Roger di atas hanyalah mock-up yang cepat dan kotor, tetapi jika Anda pikir itu terlihat jauh dari bentuk selesai, Anda mungkin perlu mendapatkan bantuan dengan ini.)

Semoga berhasil!

17
g-ball

Saya pikir ini bekerja dengan sangat baik dari sudut pandang pengalaman pengguna, dan saya bahkan melangkah lebih jauh untuk menyarankan bahwa dalam waktu yang tidak terlalu lama semua formulir web akan menggunakan model ini.

Satu-satunya saran saya untuk meningkatkan mungkin mempercepat animasi - mungkin sedikit lebih sulit untuk memilih bidang formulir tapi saya pikir kecepatan ekstra pengguna akan menemukan hal yang menarik dan lebih menarik.

16
Boris Hamster

Desain Anda jelas gagal. Dengan kesabaran yang cukup, itu adalah sebenarnya mungkin untuk mengisi (setidaknya bagian dari) formulir. Karena Anda jelas berusaha mencegahnya, Anda gagal.

12
Jerry Coffin

Ketika saya melihat contoh Anda, saya yakin itu hanya demo teknologi dan itu tidak akan berputar saat Anda berinteraksi dengan formulir. Tetapi setelah membaca tanggapan dan komentar Anda, saya kira saya salah.

Bentuk yang berputar mungkin akan membuat Anda kehilangan semua pengunjung Anda.

Sebagai gantinya, saya mengusulkan menggunakan rotasi untuk beralih di antara berbagai halaman dalam formulir. Saya sedang memikirkan sesuatu seperti menu utama dalam gim PC "The Chronicles of Riddick: Escape from Butcher Bay" . Ini bisa membuat efek yang hebat, jika Anda bisa membuatnya cepat dan cepat.

9
Znarkus

Kegunaan seharusnya tidak digunakan dalam kalimat yang sama dengan tautan ke formulir ini, sobat, itu benar.

Anda bahkan tidak dapat melihat formulir 75% dari waktu, bagaimana Anda dapat memiliki formulir yang dapat digunakan Anda bahkan tidak dapat melihat.

Buang-buang waktu Anda, meskipun css 3d mengesankan ...

Cara untuk memperbaiki: Hentikan pemintalan kubus, pilih warna yang tidak menyilaukan, teks Marquee nyata? Tampilkan formulir ... selalu!

8
dannydev

Kamu berkata:

"Jika tidak, apa yang bisa saya lakukan untuk memperbaikinya?"

Berikut ini beberapa saran:

  • Jadikan warna sesuatu yang tidak menyakiti mataku.

  • Hentikan putaran kubus sepanjang waktu.

  • Pastikan bahwa semua data dapat dilihat sekaligus.

  • Artinya, buatlah seperti bentuk input yang tepat.

6

Pendekatan yang sangat inovatif.

Tapi saya pikir perubahan paradigma itu tidak ramah pengguna. Apa yang Anda coba lakukan adalah mengubah cara pengguna akan melakukan ini dalam kehidupan nyata. Ini tidak hanya akan menantang persepsi pengguna tetapi juga meningkatkan kurva belajarnya.

Bayangkan ini di kehidupan nyata. Saya memegang kubus besar dan memutarnya untuk menulis hal-hal di atasnya. Dan kemudian saya tidak yakin bagaimana orang lain akhirnya akan membacanya. Tugas yang Menantang Eh!

Pikirkan sesuatu yang lebih realistis.

6
Kabir Roy

Berikan perintah penuh kepada pengguna, seperti kapan mouse digerakkan kubus harus digerakkan dengan mouse, jadi dengan cara ini pengguna dapat dengan cepat memilih bagian (kirim, bentuk, lainnya). Saat ini saya harus menunggu kubus untuk beralih ke posisi yang tepat.

5
Pir Abdul

Saya pikir konsepnya akan sangat keren jika alih-alih membuat kubus berputar tanpa henti, Anda menggunakan efek rotasi kubus sebagai transisi dari satu halaman ke halaman lainnya. Kubus harus diputar ke sisi pertama dan kemudian berhenti, dan beri waktu pengguna untuk membaca sisi pertama. Ketika pengguna selesai dengan itu, mereka dapat mengklik tombol berikutnya dan membuat kubus memutar ke sisi berikutnya, dan seterusnya dan seterusnya.

Itu akan menambah transisi menarik yang menurut saya akan membuat banyak pengguna terhibur :)

5
user4662

Ok, saya akui saya skeptis tetapi mencoba versi yang berfungsi dan bersenang-senang dengannya !!

Ini adalah ide yang sangat bagus untuk formulir pendaftaran permainan atau sesuatu untuk anak-anak, saya merasa mendaftar dengan ini adalah tantangan dan mendaftar itu sendiri adalah hadiah yang Anda dapatkan sehingga akan sempurna untuk komunitas akses terbatas. Kolom input yang lebih sedikit, rotasi yang lebih sedikit, tampilan yang lebih bagus, dan mungkin pengguna dapat menyeretnya mungkin membuatnya sangat keren.

Tetapi dengan baik menjawab pertanyaan Anda, dalam kasus Anda untuk proyek ini sepertinya tidak berhasil.

4
Taly Emmanuela

Sebagai seseorang yang telah hidup di dunia bentuk yang membosankan ini terlalu lama, saya tidak pernah berpikir saya akan hidup untuk melihat hari ketika seseorang akan datang dan benar-benar menghancurkan penghalang, menyebabkan perubahan paradigma dan menulis ulang buku tentang bentuk-bentuk yang dapat diakses dan inovatif. .. sampai sekarang.

Beberapa hal favorit saya dari perspektif kegunaan yang Anda tambahkan Saya pikir orang-orang seperti Google dan Facebook harus meminjam untuk membantu menaikkan tingkat konversi mereka.

Ketidakmampuan untuk memfokuskan satu sisi kubus - Ini brilian. Saya suka bagaimana saya mencoba dan mengisi bidang, tetapi saya harus menunggu wajah kubus untuk berputar kembali sehingga saya dapat dengan cepat mengisi bidang lain. Butuh waktu sekitar 6 menit untuk mengisi formulir Anda yang saya pikir jauh lebih baik daripada formulir lain yang saya gunakan yang telah memakan waktu 30 detik (lelucon pada mereka). Saya pikir menjaga orang-orang di halaman pendaftaran lebih lama pasti akan membantu menurunkan rasio pentalan Anda.

Label kecil yang tidak dapat dibaca - Mengapa tidak ada orang lain yang memikirkan hal ini? Semua orang peduli untuk membuat bentuk mereka label bagus dan besar, kontekstual membantu dan hal-hal lain untuk membuat proses mengisi formulir lebih mudah (atau begitu kata mereka). Saya harus memperbesar beberapa kali untuk membaca label, tetapi kecepatan kubus berarti mata saya tidak bisa fokus: pekerjaan yang baik.

Kecepatan kubus - Ketika saya pertama kali melihat judul, saya langsung berpikir, saya yakin mereka membuat putaran kubus sangat lambat dan saya akan dapat melihat label formulir dan input dengan jelas, betapa salahnya Saya dulu. Kecepatan kubus itu cepat, tetapi tidak terlalu cepat. Cukup cepat untuk membuat mata Anda sulit untuk fokus dan hal-hal menjadi kabur, tetapi tidak terlalu cepat. Saya pikir kecepatan kubus membuat situs Anda tampil lebih cepat.

Tapi, sayangnya, ada beberapa masalah dengan formulir Anda:

Font itu tidak terlalu menarik - Saya sarankan mencoba font yang lebih bagus, Comic Sans MS Bold mungkin akan menjadi pilihan pertama saya. Ini bisa dibaca dan itu akan membuat kubus pemintalan lebih menyenangkan.

Hijau tidak cukup terang - Maaf untuk mengatakannya, tapi hijau itu tidak cukup cerah. Anda bisa mengambilnya beberapa nuansa lebih ringan untuk tampil lebih modern.

Tombol kirim tidak di tengah - Saya pikir sisi tombol kirim dari kubus harus di tengah. Saat ini tombol kirim disejajarkan ke kiri dan teks di dalam tombol juga tidak berada di tengah. Ini buruk untuk aksesibilitas dan membuat dua tweak kecil itu akan membuatnya lebih baik. Pertimbangkan untuk membuat tombol bekerja sedikit lebih banyak dengan membuatnya hitam atau putih. Gray cenderung terlihat sangat tua.

Kurangnya kehangatan atau karakter - Saya pikir kurangnya animasi GIF benar-benar memengaruhi formulir, tetapi tidak hanya itu, saya mencari di sumbernya dan tidak melihat satu pun contoh dari <Marquee> tag. Secara estetika itu sedikit TERLALU statis untuk seleraku, beberapa gerakan di sana bisa membuatnya lebih menyenangkan (dalam kombinasi dengan perubahan font, tentu saja).

Kurang validasi - Sejauh yang saya tahu, formulir Anda tidak memiliki pesan validasi dan atau validasi. Formulir tanpa validasi adalah mimpi buruk usability, jika mungkin, Anda harus mempertimbangkan untuk menggunakan <Marquee> tag untuk pesan validasi untuk membuatnya tampak lebih ramah dan tidak terlalu agresif seperti bentuk lain yang saya temui selama ini.

Label nomor jaminan sosial terlalu panjang - Label lebih lebar dari yang lain, Anda bisa mencoba menyelaraskan label atau mungkin membuat garis istirahat pada teks ini untuk membuat garis sedikit lebih pendek dan lebih mudah dibaca .

Di Google Chrome (terbaru) pada Mac OS dropdown pilih - Teks label muncul di atas label.

Lagi di Google Chrome (terbaru) di Mac OS tajuk pada halaman info legal rusak - Saya sebenarnya sedang di-cut-off, jadi saya hanya bisa benar-benar lihat, "informasi hukum yang penting !!!"

Terlalu banyak tanda ser - Mengapa Anda berteriak di halaman ketentuan hukum? Satu, maksimum, dua tanda seru. Anda tahu aturannya? Jangan merusak desain yang bagus dengan tanda seru terlalu banyak.

Secara keseluruhan desain bagus, tetapi troll yang lebih baik. Ini mungkin salah satu pertanyaan troll terbaik yang pernah saya baca, bahkan menyaingi beberapa pertanyaan yang saya temui di Yahoo! Jawaban, sangat baik untuk Anda.

4

Itu bekerja dengan baik jika Anda akan memiliki tidak lebih dari 6 halaman.

Ketahuilah bahwa bagian-bagian halaman tidak akan terlihat ketika mereka tidak menghadap ke depan. Itu bisa menjadi masalah kegunaan.

UI telah dibuat di mana ada bilah alat yang berputar. Sekali lagi, ada batas 4 wajah dan orang-orang tidak bisa melihat apa yang ada di samping, membingungkan dan membuat frustrasi pengguna.

Orientasi yang tepat akan menjadi tantangan.

Tetapi kadang-kadang orang suka frustrasi. Lihatlah Angry Birds. Orang-orang terus menghilang dan tantangan semakin sulit. Tapi itu menyenangkan! Itu semua tergantung pada apa yang ingin Anda capai.

3
Tyler Langan

Hal terbesar sejak roti irisan

Berikut ini adalah perpustakaan yang baik untuk menambah momentum: https://chrisbateman.github.io/impetus/

Jika Anda ingin melangkah lebih dari sekadar kubus: https://stackoverflow.com/questions/33629754/text-within-a-non-rectangular-shape-pentagon-or-hexagon

Situs web saya yang lama.

Kemudian saya harus mencari pekerjaan dan memutuskan untuk menjadi lebih "normal"

enter image description here

2
Mars Robertson

Mengapa Anda tidak mencobanya dengan beberapa orang? Saya pikir beberapa pengujian pengguna dilakukan.

Anda telah menghabiskan waktu ini untuk membuat prototipe, jadi mengapa tidak membiarkan pengguna Anda mencobanya. Anda belum mengatakan untuk apa Anda membangun ini, jadi bagaimana kita bisa tahu apakah ini baik atau tidak? Secara pribadi, saya menemukan prototipe Anda menyenangkan - itu bisa membuat permainan yang sangat menyenangkan. Jika ini masalahnya, pengujian pengguna dapat memberi Anda hasil positif.

Tapi, saya ragu Anda membuat game. Kemungkinannya, subjek uji Anda hanya akan merasa sangat menjengkelkan. Tapi siapa yang tahu! Itulah keindahan pengujian pengguna - hampir selalu ada sesuatu yang mengejutkan Anda.

2
Sauce McBoss

Saya berpikir akan lebih baik jika Anda mengatur ulang teks secara vertikal, seperti ini:

  • k
  • saya
  • l
  • l
  • m
  • e
  • :)

Sejujurnya jika ini pada layar komputer standar saya pikir pendekatan ini gagal. Anda telah menerima banyak umpan balik yang tidak akan saya ulangi karena semua kritik cukup valid dan mendalam.

TETAPI

Jika Anda berpikir ini menjadi bagian dari lingkungan VR/AR dan kubus dapat dimanipulasi dengan tangan maka saya pikir ini adalah pendekatan baru untuk membentuk entri untuk ruang semacam itu. Anda bahkan bisa memasukkan kubus ke dalam slot sebagai cara untuk mengirimkannya.

1
RCburn