it-swarm.asia

Antarmuka intuitif untuk Menulis Boolean Logic?

Saya tertarik untuk mengetahui bagaimana orang-orang memilikinya, atau akan membangun antarmuka yang menyederhanakan membangun kondisi boolean yang logis? (Ya, ini adalah pembuat kueri basis data) Dalam pikiran saya antarmuka yang buruk membuat mereka mengetik banyak DAN, TIDAK DI, OR kata kunci dll. Atau memiliki sejuta kotak kombo.

Saya ingin tahu apakah ada yang punya contoh bagus yang bisa saya dapatkan ide? Atau beberapa saran?

Saat ini saya sedang mempertimbangkan layar terbagi dengan kisi untuk menyusun kueri dan kanvas untuk menampilkan representasi visual dari set kondisi dan bagaimana mereka tumpang tindih dll. Seperti Diagram Venn. Ini masih memberi saya masalah dengan kegunaan/intuitif kontrol di grid.

EDIT: Saya sangat tertarik dengan ide-ide yang menyederhanakannya untuk pengguna yang kurang teknis. Namun, ide untuk versi UI untuk pengguna tingkat lanjut juga sangat membantu.

134
Edward Williams

Lihat juga iTunes 9 atau lebih baru. Itu menambahkan kemampuan untuk melakukan ekspresi "bersarang" DAN/OR, mirip dengan bagaimana seorang programmer akan melakukannya dengan tanda kurung:

alt text

59
Hisham

Masalah utama yang dimiliki pengguna non-teknis dengan logika Boolean adalah memahami perbedaan antara AND dan OR karena tidak selalu sesuai dengan bahasa alami (misalnya, “tunjukkan pesanan dari New York dan New kepada saya) Jersey ”hampir pasti berarti Location = NY OR Location = NJ). Seringkali pengguna cenderung mengartikan" atau "menjadi OR eksklusif. Lalu ada masalah kehilangan jejak tanda kurung bersarang.

Salah satu solusi yang menghindari kedua masalah ini adalah merepresentasikan logika secara grafis dengan metafora pipa atau listrik. Ada beberapa jalur kerja yang mengambil pendekatan ini:

Shneiderman, B (1991). Antarmuka Pengguna Visual untuk Eksplorasi Informasi. Prosiding Pertemuan Tahunan ke-54 Masyarakat Amerika untuk Ilmu Informasi, 28, 379-384.

Murray NS, Paton NW, Goble CA, Bryce J (2000) Kaleidoquery — bahasa visual berbasis aliran dan evaluasinya. Jurnal Bahasa Visual & Komputasi, 11 (2), 151-189.

Pembuat kueri adalah salah satu dari sedikit tempat di mana masuk akal untuk memiliki mode Dasar dan Lanjutan yang terpisah. Anda mungkin akan menemukan bahwa 90% kueri pengguna Anda hanya cocok dengan beberapa pola (mis., “Pelanggan dengan nama yang dimulai dengan Xxxx,” “Akun yang bertanggung jawab dengan tagihan luar biasa,” “Pesanan dibuat antara tanggal a dan b) "). Masuk akal untuk memiliki ini sebagai kueri kalengan atau semi-kalengan yang dapat dipilih dan ditentukan dengan mudah sambil menempatkan sesuatu seperti Kaleidoquery di bawah Advanced untuk kueri ad hoc yang lebih jarang.

45
Michael Zuschlag

Yang ini teruji dengan baik dengan pengguna teknis dan non-teknis dan dapat menghasilkan hampir semua permintaan ...

db query builder

Manfaatnya adalah sangat jelas dan pengguna dapat seret dan lepas ( atau hapus ) setiap ekspresi atau grup ekspresi di pohon.

Sisi bawah adalah seberapa banyak ruang yang dikonsumsi.

43
DaveAlger

Ada plugin jquery untuk melakukan ini, yang disebut QueryBuilder, yang melakukan ini dengan cara yang menarik: http://mistic100.github.io/jQuery-QueryBuilder/

Jquery QueryBuilder Screenshot

14
dryobs

Saya suka caranya Apple Aturan surat berfungsi:

screenshot

10

Ada beberapa ide bagus/referensi di sini, terutama untuk beberapa pendekatan yang ada. Seringkali, meskipun tidak selalu, pendekatan Apple adalah tempat yang baik untuk memulai - tetapi mungkin dalam kasus Anda mungkin tidak. Saya mendapat kesan (meskipun Anda belum benar-benar mengatakannya) bahwa Anda bekerja dengan banyak sekali data yang terdiri dari banyak bidang/variabel.

Saya setuju bahwa mencoba menemukan cara untuk menyederhanakannya untuk pengguna yang kurang teknis adalah ide yang bagus, asalkan Anda berharap memiliki lebih sedikit pengguna teknis yang menggunakan sistem. Kalau tidak, mengembangkan antarmuka yang kurang rumit mungkin banyak pekerjaan untuk mendapatkan sedikit keuntungan. Saya juga suka ide diagram Venn - akan menarik untuk melihat bagaimana itu keluar.

Namun, dalam hal saran aktual tentang bagaimana menyederhanakan ini, pendekatan lain adalah dengan hanya membuat semacam "Wizard" proses yang langkah pengguna melalui proses dengan kombinasi bahasa alami dan tampilan dan nuansa 'web' yang akrab. Di bawah ini adalah mockup tentang bagaimana ini bisa bekerja, menggunakan contoh database kendaraan bermotor:

enter image description here

Di atas menunjukkan bagaimana Langkah 1 dapat bekerja, memberi pengguna sejumlah opsi yang dapat mereka pilih dengan mencentang kotak centang yang relevan. Mereka dapat memilih satu atau lebih kotak centang seperlunya (atau mungkin bukan ?!). Jika mereka memilih kotak centang untuk opsi yang memerlukan info lebih lanjut maka kata-kata yang relevan akan hyperlink. Mengklik pada kata-kata hyperlink akan memberi pengguna sesuatu seperti contoh di bawah ini:

enter image description here

Jadi, contoh di atas menunjukkan apa yang dapat dilihat pengguna jika mereka telah memilih kotak centang "Kendaraan diproduksi oleh pabrikan tertentu" dan kemudian mengklik teks hyperlink untuk memilih pabrikan yang ingin mereka sertakan dalam hasil pencarian. Tentu saja pendekatan Anda mungkin berbeda tergantung pada apakah mereka akan melihat bidang teks gratis, daftar turun bawah opsi, dll.

Sekarang, untuk menghadapi "pengecualian" untuk kriteria pencarian, Anda pada dasarnya akan membuat kembali jendela pertama, tetapi dengan kata-kata yang berbeda, seperti:

enter image description here

Jadi, setelah memilih pengecualian bahan bakar di atas, pengguna mengklik kata-kata "hyperlink" bahan bakar khusus untuk memilih pengecualian seperti di bawah ini:

enter image description here

Sekali lagi, ini bisa berupa daftar drop-down, tombol radio, dll, tergantung pada apa yang paling sesuai dengan kondisinya. Mereka juga akan melalui proses yang sama untuk memilih negara tempat mereka tidak menginginkan kendaraan tersebut diproduksi.

Tentu saja, saya melihat pendekatan "Wizard" ini untuk pengguna yang kurang teknis. Anda juga akan menawarkan opsi "Advanced" untuk pengguna yang nyaman dengan pendekatan yang lebih rumit yang dapat disederhanakan dibandingkan dengan pendekatan Wizard.

[~ # ~] addendum [~ # ~]

Oke, ini membuat saya terjaga tadi malam. Saya benar-benar melihat ini Wizard pendekatan sebagai cara yang cukup baik untuk pergi, jadi pikir itu layak untuk kembali memperbaiki jawaban saya karena dapat membantu orang lain jika bukan Anda.

Saya telah memperbarui gambar mockup di atas dan ingin memperluas gagasan Anda menggunakan layar terbagi.

Awalnya saya berpikir bahwa setelah langkah terakhir selesai, maka sesuatu seperti ide diagram Venn Anda dapat digunakan untuk menunjukkan secara visual apa yang telah dipilih pengguna. Tapi kemudian saya berpikir tentang pernyataan asli saya bahwa seharusnya juga ada cara bagi pengguna untuk bolak-balik mengubah kriteria mereka. Jadi sekarang saya berpikir bahwa menggunakan layar terbagi Anda, Anda bisa mencapai keduanya. Di bawah ini adalah gambar baru untuk menggambarkan apa yang saya pikirkan:

Split screen view

Jadi, di atas adalah contoh dari apa yang bisa muncul di bagian kedua dari layar terbagi Anda. Saat pengguna memilih kriteria mereka, pembaruan ini untuk menunjukkan apa pilihan mereka. Pendekatan ini juga menggunakan tampilan dan nuansa web yang akrab dengan menyorot pilihan mereka dengan hyperlink dan, jika mereka mau, mereka dapat mengubah kriteria mereka dengan mengklik hyperlink di dalam layar ini, daripada harus bolak-balik di antara layar untuk mengulang Langkah. Tentu saja, jika mereka ingin memilih kondisi baru , mereka mungkin perlu kembali ke langkah yang relevan. Tetapi Anda mendapatkan idenya.

Satu-satunya hal lain yang ingin saya sebutkan adalah bahwa tanpa mengetahui kompleksitas data Anda, Anda mungkin perlu memperbaiki ini Wizard pendekatan. Database kendaraan sederhana saya hanya membutuhkan dua langkah, tetapi rumit orang mungkin memerlukan lebih banyak langkah. Inti dari pendekatan ini, tidak begitu banyak dalam jumlah langkah, tetapi pada kenyataan bahwa orang Wizard 'berbicara' melalui langkah-langkah menggunakan bahasa alami sebagai sebanyak mungkin.

Bagaimanapun, saya harap ini, bersama dengan jawaban lain yang diberikan, memberi Anda beberapa pemikiran. Dan mungkin beberapa yang lain. Ini adalah topik yang bagus dan saya pikir akan relevan bagi banyak pengguna.

Semoga berhasil!

10
Monomeeth

Itu tergantung pada tingkat kecanggihan pengguna Anda. Kami memiliki sesuatu yang serupa dengan versi antarmuka saat ini yang tidak mengelompokkan dan memperbaiki hubungannya antara istilah dengan OR. Setiap istilah bisa dinegasikan. Sebagian besar pengguna baik-baik saja dengan permintaan seperti itu dan kebanyakan dari mereka tidak akan dapat merumuskan pertanyaan yang lebih maju dengan benar. Kami sekarang menerapkan proses dua langkah di mana hasil kueri dapat digunakan untuk membatasi populasi dalam kueri berikut (masih meninggalkan pengelompokan eksplisit di UI).

UI untuk ini adalah daftar dasar kendala yang dapat ditambahkan, dihapus, diaktifkan dan dinonaktifkan dan dinegasikan. Ini sudah cukup untuk sebagian besar kueri yang ingin dibuat pengguna. Kami memiliki desain untuk versi baru yang didasarkan pada konsep aliran data (mengambil inspirasi kuat dari vistrails, lihat di bawah) tetapi itu tidak pernah dieksekusi. Vistrails adalah produk yang dapat digunakan untuk membuat pipa VTK. Jika Anda ingin pergi rute banyak potongan UI, aliran data berfungsi untuk merumuskan permintaan, tetapi juga berfungsi untuk merumuskan pemformatan output.

Cari inspirasi di

9
Harald Scheirich

Berbeda dengan menggunakan ulang tabel pivot seperti yang saya lakukan sebelumnya dijawab , ini adalah UI eksperimental yang saya pikir untuk menangani kebutuhan berulang untuk menulis AND atau OR.

Itu bergantung pada satu elemen Anda harus belajar bahwa ANDs adalah horisontal dan ORs adalah vertikal. Ia berhasil menangani logika Boolean yang cukup rumit.

Gambaran

Asumsikan bahwa A, B, C, D, dan E adalah ekspresi Boolean.

Untuk menguji konsep di sini adalah bagaimana Anda menggambar dua sisi yang berbeda dari kesetaraan Boolean standar:

(A and B) or C === (A or C) and (B or C)

enter image description here

Ini meluas ke pertanyaan yang lebih kompleks:

((A and B and C) or D) and E

enter image description here

UI aktual

Untuk tabel data ini:

enter image description here

Layar terbagi dua:

  1. Satu set filter (efektif AND permintaan)
  2. Kombinasi filter

Anda mengatur filter (ini hanya diketik dengan log kondisional dasar) dan kemudian seret yang menyeberang untuk 'menggabungkannya dengan kueri lengkap.

enter image description here

Setelah menyeret filter baru ke seberang, sisi kiri kembali ke daftar tanpa filter dan sisi kanan menunjukkan set data 'digabungkan':

enter image description here

Anda kemudian harus dapat menyeret dan mengedit ekspresi di sisi kanan - tetapi itu membutuhkan lebih banyak pekerjaan.

7
icc97

Microsoft Access melakukan upaya yang masuk akal pada UI kueri basis data sederhana dengan memproduksi versi visual "Query by Example"

Ini memiliki bahasa yang lebih alami yang menghindari kebutuhan untuk UI bersarang , dengan mengorbankan entri yang sedikit lebih berlebihan dalam barisan.

mockup

nduh sumber bmml - Wireframes dibuat dengan Balsamiq Mockups

6
Jason A.

Ini pertanyaan lama, tapi saya pikir saya akan berkontribusi jika ada yang tertarik. Meskipun banyak jawaban menarik telah disediakan, saya merancang untuk aplikasi kami yang berikut ini:

enter image description here

Awalnya hanya ada ekspresi grup pertama dan satu aturan. Mengklik 'Tambahkan kondisi' menambahkan kondisi baru di atasnya, sedangkan 'Tambah grup' menambahkan grup baru langsung di bawahnya; grup tambahan dari grup induk adalah saudara kandung sementara Anda dapat membuat sarang tanpa batas menggunakan tombol 'Tambah grup' dari dalam grup bersarang.

Pada perangkat seluler, kondisi menumpuk, bersama dengan tombol tindakan 'hapus' - yang sekarang mengubah teksnya menjadi 'Hapus kondisi'.

enter image description here

Desainnya bekerja dengan baik, terlihat bagus, responsif dan tidak memakan terlalu banyak ruang.

Bonus tambahan: Di atas grup, satu baris menunjukkan kondisi akhir yang diproduksi, mis

[Tanggal lebih besar dari XXX DAN (Nama sama dengan Nick)]

sunting: Untuk membuatnya lebih mudah didekati oleh orang-orang non-teknis, saya akan mengikuti apa yang dikatakan orang lain di utas ini - ikuti jalan Apple. Alih-alih DAN/ATAU saya akan menggunakan konteks ALL/ANY +.

6
scooterlord

Jika pengguna Anda cukup mahir untuk mengetahui hierarki kueri, antarmuka grafis apa pun yang Anda berikan harus cukup lancar agar tidak menghalangi mereka. Saya pikir antarmuka berdasarkan elemen seret dan lepas untuk membuat hierarki implisit sangat ideal. Berikut adalah contoh visual beranotasi yang diperluas tentang bagaimana pengguna dapat membuat kueri (A and B) or ((not C) or D):

 Jatuhkan A ke panel. 
 + --- + 
 | A | 
 + --- + 
 
 Drop "dan" setelah A. 
 + --------------- ---- + 
 | + --- + + ----- + | 
 | | A | dan | ... | | 
 | + --- + + ----- + | 
 + ------------------- + 
 
 Drop B ke "...". 
 + ----------------- + 
 | + --- + + --- + | 
 | | A | dan | B | | 
 | + --- + + --- + | 
 + ----------------- + 
 
 Drop "atau" setelah "dan". 
 + -------------------------------- + 
 | + ----------------- + | 
 | | + --- + + --- + | + ----- + | 
 | | | A | dan | B | | atau | ... | | 
 | | + --- + + --- + | + ----- + | 
 | + ----------------- + | 
 + ------------------------ -------- + 
 
 Jatuhkan C ke "...". 
 + ---------------- -------------- + 
 | + ----------------- + | 
 | | + --- + + --- + | + --- + | 
 | | | A | dan | B | | atau | C | | 
 | | + --- + + --- + | + --- + | 
 | + ----------------- + | 
 + ------------------------ ------ + 
 
 Jatuhkan "tidak" ke C. 
 + -------------------- ------------------ + 
 | + ----------------- + + ----------- + | 
 | | + --- + + --- + | | + --- + | | 
 | | | A | dan | B | | atau | bukan | C | | | 
 | | + --- + + --- + | | + --- + | | 
 | + ----------------- + + ----------- + | 
 + ----------- --------------------------- + 
 
 Drop "atau" setelah "bukan C". 
 + ---------------------------------------------- ------- + 
 | + -------------------------- + | 
 | + ----------------- + | + ----------- + | | 
 | | + --- + + --- + | | | + --- + | + ----- + | | 
 | | | A | dan | B | | atau | | bukan | C | | atau | ... | | | 
 | | + --- + + --- + | | | + --- + | + ----- + | | 
 | + ----------------- + | + ----------- + | | 
 | + -------------------------- + | 
 + --------------- -------------------------------------- + 
 
 Drop D ke "...". 
 + ------------------------------------ --------------- + 
 | + ------------------------ + | 
 | + ----------------- + | + ----------- + | | 
 | | + --- + + --- + | | | + --- + | + --- + | | 
 | | | A | dan | B | | atau | | bukan | C | | atau | D | | | 
 | | + --- + + --- + | | | + --- + | + --- + | | 
 | + ----------------- + | + ----------- + | | 
 | + ------------------------ + | 
 + ----------------- ---------------------------------- + 

Elemen permintaan individual (A, B, dll.) Dikonstruksi sebelum dijatuhkan ke panel, menggunakan kotak kombo atau elemen apa pun yang diperlukan. Margin kecil dan warna bergantian bisa membuat ini sangat mudah dibaca, serta aturan tampilan yang membuat, misalnya, rantai tampilan ors pada satu tingkat:

 + ------------------------- + 
 | + --- + + --- + + --- + | 
 | | A | atau | B | atau | C | | 
 | + --- + + --- + + --- + | 
 + ------------------------- + 

Secara alami, elemen permintaan dapat diperluas, diciutkan, dipesan ulang, dan diedit setelah dimasukkan ke panel penulisan.

Saya tidak mengatakan ini adalah cara termudah untuk membangun sistem untuk tujuan ini. Bahkan, dari sudut pandang pengembangan, ini mungkin sulit. Tapi itu hal yang paling efisien dan intuitif yang bisa saya buat, dan lagi pula itu pada dasarnya hanya klon dari Apple UI aturan email tetapi dengan lebih menekankan pada hierarki.

Semoga ini terbukti bermanfaat dalam pencarian Anda untuk apa yang benar.

6
Jon Purdy

CognitoForms memiliki solusi AND/OR paling intuitif yang pernah saya temui enter image description here

4
leahg

Inilah antarmuka untuk menyusun logika boolean.

Interface for composing boolean logic

Beberapa Pikiran

  • Antarmuka dimulai dengan sederhana
  • Jika menjadi rumit, itu karena pengguna membangunnya langkah demi langkah
  • Tanpa pengeditan atau seret/jatuhkan - hanya membuat dan menghapus cabang
  • Kondisi adalah dropdown sederhana dalam contoh ini, tetapi bisa lebih rumit atau mungkin dinegasikan

Ambiguitas

Selain itu, saya juga khawatir dengan ambiguitas kemeja "tunjukkan padaku merah dan biru" karena pengguna mungkin secara teknis berarti "merah atau biru "kemeja.

Saya pikir jika Anda meminta mereka menjelaskan versi singular ("kemeja") maka masalahnya agak berkurang. Misalnya, mereka tidak akan mengatakan "Tunjukkan baju merah dan biru" jika itu berarti "merah atau biru".

4
bendytree

Menambahkan contoh dari aplikasi tiket yang kami kembangkan.

Alih-alih mengelompokkan "DAN/ATAU" kami memilih dropdown "semua/apa saja/tidak ada" di atas. Tepat karena contoh yang disebutkan di atas: ketika orang non-teknis mengatakan "beri perintah dari New York dan New Jersey" tit sebenarnya berarti "logis ATAU".

enter image description here

Kami juga memutuskan untuk tidak mengelompokkan beberapa kombinasi AND/OR yang kompleks, karena orang menjadi bingung. Kami menawarkan mereka "rekursi" sebagai gantinya, menawarkan untuk "memicu aturan lain" (di bagian bawah tangkapan layar).

2
Alex

Saya sedang mengerjakan desain ulang aplikasi web yang menggunakan Boolean dan gambar di bawah ini menunjukkan bagaimana hal itu sedang dilakukan. Pengguna dapat menghapus tanda kurung di tempat yang diperlukan atau menambahkannya kembali. Saya kesulitan menemukan cara yang lebih baik untuk melakukan hal ini sehingga mungkin berakhir dengan menjaga bagian ini yang tampaknya digunakan oleh pengguna dengan cukup baik.

UI boolean

2
Gueda

UI favorit saya untuk pembuatan aturan adalah Server Skenario ATG . Lihat ini:

alt text

2
Julian H

Untuk membuat tabel tunggal kueri yang relatif kompleks, tabel pivot sangat berguna.

Barang bagus

  1. Anda bisa mendapatkan SUM, AVG dan GROUP dengan pengetahuan yang relatif sedikit.
  2. Dengan memecah bidang di antara kolom dengan baris, Anda mendapatkan permintaan AND
  3. Total memberi Anda OR kueri
  4. Anda dapat 'membangun' kueri dengan benar - mis. Anda dapat dengan cepat melihat kumpulan master, lalu menambahkan baris/kolom dan kemudian menambahkan filter yang menunjukkan data mana yang tersedia untuk disaring.

Hal-hal buruk

  1. Saya kira Anda akan mencapai batas jika Anda mencoba untuk menggabungkan lebih dari satu set tabel/data.
  2. Bergantung pada seberapa dalam Anda menginginkan AND/OR pertanyaan yang mungkin Anda miliki masalah

Tetapi setidaknya Anda tidak memiliki satu ton kotak kombo, dan kotak kombo yang Anda miliki lebih intuitif.

Ini salah satu yang saya buat sebelumnya dengan beberapa statistik sepakbola fantasi yang bagus untuk digunakan.

enter image description here

2
icc97

Sulit untuk menentukan dengan tepat apa yang intuitif untuk sesuatu yang secara tradisional telah ditangani oleh pengguna teknis (yang tidak akan selalu menemukan antarmuka lebih banyak teman pengguna dibandingkan dengan prompt perintah). Ada alasan khusus untuk efisiensi ini, karena kueri dapat ditentukan secara jelas dan dieksekusi dalam Prompt baris perintah. Juga, mungkin tidak akan mengejutkan siapa pun bahwa desain antarmuka tradisional mungkin akan pecah ketika datang ke pertanyaan yang lebih kompleks.

Namun demikian, saya pikir mungkin aman untuk mengatakan bahwa ketika sampai pada logika Boolean, tema yang paling umum/familiar adalah diagram Venn. Jadi pertanyaannya mungkin bagaimana cara mengambil pernyataan yang tepat dari permintaan basis data dan menggabungkannya dengan kesederhanaan diagram Venn seperti antarmuka?

Saya pikir secara konseptual solusi yang mungkin adalah menggabungkan tata ruang baik dengan interaksi pengguna yang mencerminkan sifat operasi yang sedang dilakukan. Dengan cara ini Anda akan mendapatkan konsep diagram Venn kepada pengguna sambil membuat operasi 'intuitif' cukup untuk dipahami. Sehingga secara efektif mengambil apa yang disarankan @bendytree dan @sboye untuk melakukan entri data aktual tetapi juga mengeluarkan hasil dari operasi tersebut dalam bentuk diagram Venn sehingga pengguna dapat segera melihat apakah mereka telah melakukan jenis operasi boolean yang tepat . Tetapi Anda mungkin ingin membuat input lebih mudah dengan menerapkan beberapa drag'n'drop untuk operator boolean dan set data/bidang yang ingin Anda tampilkan, mengambil inspirasi dari beberapa diagram Venn interaktif yang dapat Anda temukan di pencarian Google.

1
Michael Lai

Jika ponsel, miliki tombol untuk setiap operasi yang cukup memasukkannya ke dalam kotak teks. Berikan tautan untuk membantu aljabar boolean dan sejenisnya. Itu akan mudah dan fleksibel.

0
timseal