it-swarm-ko.com

부울 논리 구성을위한 직관적 인 인터페이스?

사람들이 어떻게 가지고 있는지 알고 싶거나 논리 부울 조건 구성을 단순화하는 인터페이스를 구성하고 싶습니까? (예, 데이터베이스 쿼리 작성기입니다.) 제 생각에 나쁜 인터페이스에는 AND, NOT IN, OR 키워드 등)를 많이 입력하거나 백만 개의 콤보 상자가 있습니다.

아이디어를 얻을 수있는 좋은 모범을 보이는 사람이 있는지 궁금합니다. 아니면 몇 가지 제안?

현재 쿼리를 구성하기위한 격자와 캔버스를 포함하는 분할 화면과 조건 세트를 시각적으로 표시하고 조건이 어떻게 겹쳐 지는지 등을 고려하고 있습니다. 벤 다이어그램과 같습니다. 이것은 여전히 ​​그리드에서 컨트롤의 유용성/직관성에 문제가 있습니다.

편집 : 나는 덜 기술적 인 사용자를 위해 그것을 단순화하는 아이디어에 매우 관심이 있습니다. 그러나 고급 사용자를위한 UI 버전에 대한 아이디어도 매우 유용합니다.

134
Edward Williams

ITunes 9 이상도 참조하십시오. "중첩 된"AND/OR 표현식을 수행하는 기능을 추가합니다. 이는 프로그래머가 괄호로 처리하는 방식과 유사합니다.

alt text

59
Hisham

기술이 아닌 사용자가 부울 논리를 사용하는 데있어 주요 문제점은 AND와 OR의 차이점이 자연 언어와 항상 일치하지 않기 때문에 항상 이해하는 것입니다. Jersey”는 거의 확실하게 Location = NY OR Location = NJ)를 의미합니다. 종종 사용자는 "또는"을 배타적 OR로 해석하는 경향이 있습니다. 그러면 중첩 된 괄호를 추적하지 못하는 문제가 있습니다.

이 두 가지 문제를 피하는 한 가지 해결책은 배관 또는 전기적인 은유로 논리를 그래픽으로 표현하는 것입니다. 이 접근 방식을 취하는 몇 가지 작업이 있습니다.

Shneiderman, B (1991). 정보 탐색을위한 시각적 사용자 인터페이스. 미국 정보 과학 협회 제 54 차 연례 회의, 28, 379-384의 절차.

Murray NS, Paton NW, Goble CA, Bryce J (2000) Kaleidoquery-흐름 기반 시각 언어 및 평가. 시각 언어 및 컴퓨팅 저널, 11 (2), 151-189.

쿼리 작성기는 별도의 기본 및 고급 모드를 사용하는 것이 적합한 몇 안되는 장소 중 하나입니다. 사용자 검색어의 90 %가 소수의 패턴에만 적합하다는 것을 알 수있을 것입니다 (예 :“Xxxx로 시작하는 이름을 가진 고객”,“지급 청구서에 대한 책임이있는 계정”,“날짜 a와 b 사이의 주문) ”). 희귀 한 임시 쿼리를 위해 고급 아래에 Kaleidoquery와 같은 것을 배치하는 동안 쉽게 선택하고 지정할 수있는 미리 준비된 쿼리 또는 세미 준비된 쿼리로 사용하는 것이 좋습니다.

45
Michael Zuschlag

이것은 기술 및 비 기술 사용자 모두에게 잘 테스트되었으며 가능한 모든 데이터베이스 쿼리를 생성 할 수 있습니다 ...

db query builder

장점은 매우 명확함이고 사용자는 드래그 앤 드롭 ( 또는 delete ) 트리의 모든 표현식 또는 표현식 그룹.

단점은 얼마나 많은 공간을 소비하는지입니다.

43
DaveAlger

이 작업을 수행하는 jQuery 플러그인 인 QueryBuilder가 있습니다. http://mistic100.github.io/jQuery-QueryBuilder/

Jquery QueryBuilder Screenshot

14
dryobs

나는 Apple Mail의 규칙이 작동하는 방식을 좋아한다)

screenshot

10

여기에는 특히 기존의 접근 방식에 대한 몇 가지 좋은 아이디어/참조가 있습니다. 항상 그런 것은 아니지만 종종 Apple의 접근 방식은 시작하기에 좋은 곳입니다. 그러나 아마도 귀하의 경우에는 그렇지 않을 수도 있습니다. 많은 필드/변수로 구성된 엄청난 양의 데이터로 작업하고 있다는 인상을 받았습니다 (실제로 말하지는 않았지만).

기술을 덜 사용하는 사용자가 시스템을 사용하지 않을 것으로 예상한다면 기술을 덜 사용하는 사용자를 위해 단순화하는 방법을 찾는 것이 좋습니다. 그렇지 않으면 덜 복잡한 인터페이스를 개발하는 것이 별다른 이득이되지 않을 수 있습니다. 나는 또한 Venn 다이어그램의 아이디어를 좋아합니다-그것이 어떻게 펼쳐지는지 보는 것이 흥미로울 것입니다.

그러나 이것을 단순화하는 방법에 대한 실제 제안과 관련하여 다른 접근 방식은 자연 언어와 친숙한 '웹'모양과 느낌의 조합으로 프로세스를 단계별로 진행하는 일종의 "마법사"프로세스를 만드는 것입니다. 다음은 자동차 데이터베이스의 예를 사용하여 이것이 작동하는 방법에 대한 모형입니다.

enter image description here

위의 1 단계는 어떻게 작동하는지 보여 주며 관련 확인란을 선택하여 사용자가 선택할 수있는 여러 옵션을 제공합니다. 필요에 따라 하나 이상의 확인란을 선택할 수 있습니다 (또는 아닐 수도 있습니까?!). 추가 정보가 필요한 옵션의 확인란을 선택하면 관련 단어가 하이퍼 링크로 연결됩니다. 하이퍼 링크로 연결된 단어를 클릭하면 아래 예와 같은 내용이 사용자에게 표시됩니다.

enter image description here

따라서 위의 예는 사용자가 "특정 제조업체에서 차량을 생산합니다"확인란을 선택한 다음 하이퍼 링크 텍스트를 클릭하여 검색 결과에 포함 할 제조업체를 선택했는지 확인할 수 있습니다. 물론 자유 텍스트 필드, 옵션 드롭 다운 목록 등의 표시 여부에 따라 접근 방식이 다를 수 있습니다.

이제 검색 기준에 대한 "예외"를 처리하려면 기본적으로 첫 번째 창을 다시 작성하지만 다음과 같이 다른 단어를 사용합니다.

enter image description here

따라서 위의 연료 예외를 선택한 후 사용자는 하이퍼 링크 된 단어 "특정 연료"를 클릭하여 다음과 같이 예외를 선택합니다.

enter image description here

다시 한 번 조건에 가장 적합한 드롭 다운 목록, 라디오 버튼 등이 될 수 있습니다. 그들은 또한 차량 제조를 원하지 않는 국가를 선택하기 위해 동일한 과정을 거쳤습니다.

물론이 "마법사"접근 방식은 기술 수준이 낮은 사용자를위한 것입니다. 또한 Wizard 접근 방식과 비교하여 간소화 될 수있는 더 복잡한 접근 방식에 익숙한 사용자에게 "고급"옵션을 제공합니다.

[~ # ~] 부록 [~ # ~]

알았어, 어제 밤에 나를 깨워 줬어 나는 실제로이 Wizard 접근 방식은 꽤 좋은 방법이라고 생각합니다.) 그렇지 않으면 다른 사람을 도울 수 있기 때문에 내 대답을 개선하기 위해 다시 돌아올 가치가 있다고 생각했습니다.

위의 모형 이미지를 업데이트했으며 분할 화면 사용에 대한 아이디어를 넓히고 싶었습니다.

원래 마지막 단계가 끝나면 Venn 다이어그램 아이디어와 같은 것을 사용하여 사용자가 선택한 것을 시각적으로 나타낼 수 있다고 생각했습니다. 그러나 나는 사용자가 자신의 기준을 수정하기 위해 앞뒤로 이동할 수있는 방법이 있어야한다는 원래의 주장에 대해 생각했다. 이제 분할 화면을 사용하면 두 가지를 모두 달성 할 수 있다고 생각합니다. 아래는 내가 생각하는 것을 보여주는 새로운 이미지입니다.

Split screen view

위의 화면은 분할 화면의 두 번째 부분에 나타날 수있는 예입니다. 사용자가 기준을 선택하면 선택 내용을 나타 내기 위해 업데이트됩니다. 이 방법은 또한 친숙한 웹 모양과 느낌을 사용하여 하이퍼 링크로 선택한 항목을 강조 표시합니다. 원한다면 원하는 경우 화면간에 앞뒤로 이동하지 않고이 화면 내 하이퍼 링크를 클릭하여 기준을 변경할 수 있습니다. 단계. 물론 new 조건을 선택하려면 관련 단계로 돌아 가야합니다. 그러나 당신은 아이디어를 얻습니다.

내가 언급하고 싶은 유일한 다른 것은 데이터의 복잡성을 알지 못하면이 Wizard 접근 방식을 수정해야 할 수도 있습니다. 간단한 차량 데이터베이스는 두 단계 만 필요하지만 복잡합니다. 이 접근법의 요점은 단계 수는 많지 않지만 Wizard 자연 언어를 사용하여 단계를 통해 사람들을 '이야기'한다는 사실입니다. 가능한 많이.

어쨌든, 나는 이것이 제공된 다른 답변과 함께 당신에게 생각을위한 음식을 제공하기를 바랍니다. 그리고 아마도 다른 사람들도있을 것입니다. 이것은 좋은 주제이며 많은 사용자와 관련이 있다고 생각합니다.

행운을 빕니다!

10
Monomeeth

사용자의 정교함 수준에 따라 다릅니다. 현재 버전의 인터페이스와 비슷한 것이 있는데 그룹화를 생략하고 용어 사이의 연결을 OR로 수정했습니다. 각 용어는 무시 될 수 있습니다. 대부분의 사용자는 이런 종류의 쿼리를 사용하는 것이 좋으며 대부분의 사용자는 고급 쿼리를 올바르게 구성 할 수 없습니다. 이제 쿼리 결과를 사용하여 다음 쿼리에서 채우기를 제한하는 데 사용할 수있는 2 단계 프로세스를 구현하고 있습니다 (여전히 UI에서 명시 적 그룹화를 생략 함).

이에 대한 UI는 추가, 제거, 활성화 및 비활성화 및 무효화 할 수있는 기본 제약 조건 목록입니다. 이것은 사용자가 만들고자하는 대부분의 쿼리에 충분합니다. 우리는 데이터 흐름 개념 (vistrails에서 강력한 영감을 얻음, 아래 참조)을 기반으로 한 새로운 버전을 설계했지만 결코 실행되지 않았습니다. Vistrails는 VTK 파이프 라인을 생성하는 데 사용할 수있는 제품입니다. 많은 UI 조각의 경로로 가고 싶다면 데이터 흐름은 쿼리를 공식화하는 데에도 사용되지만 출력 형식을 공식화하는 데에도 효과적입니다.

영감을 찾으십시오

9
Harald Scheirich

이전에 answered 처럼 피벗 테이블을 다시 사용하는 것과는 대조적으로, 이것은 AND 또는 OR을 작성해야하는 반복적 인 요구를 처리 할 것으로 생각되는 실험적인 UI입니다.

ANDs는 수평이고 ORs는 수직이라는 것을 알아야합니다. 그래도 상당히 복잡한 부울 논리를 처리합니다.

개요

A, B, C, DE이 부울 표현식이라고 가정하십시오.

개념을 테스트하기 위해 표준 부울 동등성의 두 가지 측면을 그리는 방법이 있습니다.

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

enter image description here

이것은 더 복잡한 쿼리로 확장됩니다.

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

enter image description here

실제 UI

이 데이터 테이블의 경우 :

enter image description here

화면은 두 가지로 나뉩니다.

  1. 필터 세트 (효과적으로 AND 쿼리)
  2. 필터의 조합

필터를 설정 한 다음 (기본 조건부 로그를 사용하여 방금 입력 한) 필터를 끌어 전체 쿼리와 함께 '병합'합니다.

enter image description here

새 필터 세트를 드래그하면 왼쪽이 필터링되지 않은 목록으로 돌아가고 오른쪽에 '병합 된'데이터 세트가 표시됩니다.

enter image description here

그런 다음 오른쪽에서 표현식을 드래그하여 편집 할 수 있어야하지만 더 많은 작업이 필요합니다.

7
icc97

Microsoft Access는 시각적 데이터베이스 버전 인 "Query by Example"

때로는 줄이 조금 더 중복되는 항목을 희생하면서 중첩 된 UI에 필요하지 않은보다 자연스러운 언어가 있습니다.

mockup

bmml 소스 다운로드Balsamiq Mockups

6
Jason A.

그것은 오래된 질문이지만 누군가 관심이 있다면 내가 기여할 것이라고 생각했습니다. 많은 흥미로운 답변이 이미 제공되었지만 앱을 위해 다음을 설계했습니다.

enter image description here

처음에는 첫 번째 그룹 표현식과 규칙이 있습니다. '조건 추가'를 클릭하면 그 위에 새 조건이 추가되고 '그룹 추가'는 바로 아래에 새 그룹을 추가합니다. 부모 그룹의 추가 그룹은 형제이며 중첩 그룹 내에서 '그룹 추가'버튼을 사용하여 무한 중첩을 만들 수 있습니다.

모바일 장치에서 조건은 '제거'작업 단추와 함께 텍스트를 '조건 제거'로 변경합니다.

enter image description here

디자인은 잘 작동하고,보기 좋고, 반응이 좋으며, 공간을 너무 많이 소비하지 않습니다.

추가 된 보너스 : 그룹 위의 단일 라인은 최종 생산 조건을 보여줍니다. 예 :

[XXX보다 큰 날짜 AND (이름은 Nick과 동일)]

편집 : 비 기술적 인 사람들이 접근하기 쉽도록이 스레드에서 다른 사람들이 말한 것을 따르십시오 .Apple의 경로를 따르십시오. AND/OR 대신 ALL/ANY + 컨텍스트를 사용합니다.

6
scooterlord

사용자가 쿼리의 계층 구조를 알기에 충분히 고급 인 경우 사용자에게 제공하는 모든 그래픽 인터페이스는 방해가되지 않도록 유동적이어야합니다. 암시 적 계층 구조를 만들기 위해 요소를 끌어서 놓기 기반의 인터페이스가 이상적이라고 생각합니다. 다음은 사용자가 쿼리 (A and B) or ((not C) or D)를 구성하는 방법에 대한 주석이 달린 확장 된 시각적 예입니다.

 A를 패널에 놓습니다. 
 + --- + 
 | A | 
 + --- + 
 
 A. 
 + --------------- 다음에 "and"를 삭제합니다. ---- + 
 | + --- + + ----- + | 
 | | A | 와 | ... | | 
 | + --- + + ----- + | 
 + ------------------- + 
 
 삭제 "..."에 B. 
 + ----------------- + 
 | + --- + + --- + | 
 | | A | 와 | B | | 
 | + --- + + --- + | 
 + ----------------- + 
 
 삭제 후 "또는" "및". 
 + -------------------------------- + 
 | + ----------------- + | 
 | | + --- + + --- + | + ----- + | 
 | | | A | 와 | B | | 또는 | ... | | 
 | | + --- + + --- + | + ----- + | 
 | + ----------------- + | 
 + ------------------------ -------- + 
 
 C를 "..."에 놓습니다. 
 + ---------------- -------------- + 
 | + ----------------- + | 
 | | + --- + + --- + | + --- + | 
 | | | A | 와 | B | | 또는 | C | | 
 | | + --- + + --- + | + --- + | 
 | + ----------------- + | 
 + ------------------------ ------ + 
 
 C에 "not"을 드롭합니다. 
 + -------------------- ------------------ + 
 | + ----------------- + + ----------- + | 
 | | + --- + + --- + | | + --- + | | 
 | | | A | 와 | B | | 또는 | 아닙니다 | C | | | 
 | | + --- + + --- + | | + --- + | | 
 | + ----------------- + + ----------- + | 
 + ----------- --------------------------- + 
 
 "C가 아닌"뒤에 "또는"을 삭제합니다. ____.] + ---------------------------------------------- ------- + 
 | + -------------------------- + | 
 | + ----------------- + | + ----------- + | | 
 | | + --- + + --- + | | | + --- + | + ----- + | | 
 | | | A | 와 | B | | 또는 | | 아닙니다 | C | | 또는 | ... | | | 
 | | + --- + + --- + | | | + --- + | + ----- + | | 
 | + ----------------- + | + ----------- + | | 
 | + -------------------------- + | 
 + --------------- -------------------------------------- + 
 
 삭제 "..."에 D. 
 + ------------------------------------ --------------- + 
 | + ------------------------ + | 
 | + ----------------- + | + ----------- + | | 
 | | + --- + + --- + | | | + --- + | + --- + | | 
 | | | A | 와 | B | | 또는 | | 아닙니다 | C | | 또는 | D | | | 
 | | + --- + + --- + | | | + --- + | + --- + | | 
 | + ----------------- + | + ----------- + | | 
 | + ------------------------ + | 
 + ----------------- ---------------------------------- + 

개별 쿼리 요소 (A, B 등)는 콤보 상자 또는 필요한 요소를 사용하여 패널에 놓기 전에 구성됩니다. 작은 여백과 번갈아 가며 색이 가독성을 높이고 예를 들어 or 체인을 단일 수준으로 표시하는 표시 규칙을 만들 수 있습니다.

 + ------------------------- + 
 | + --- + + --- + + --- + | 
 | | A | 또는 | B | 또는 | C | | 
 | + --- + + --- + + --- + | 
 + ------------------------- + 

당연히 쿼리 요소는 작성 패널에 놓은 후 확장, 축소, 재정렬 및 ​​편집 될 수 있습니다.

이것이이 목적을위한 시스템을 구성하는 가장 쉬운 방법은 아닙니다. 사실, 개발의 관점에서 볼 때 어려울 수 있습니다. 그러나 그것은 내가 얻을 수있는 가장 효율적이고 직관적 인 것입니다. 어쨌든 기본적으로 Apple 메일 규칙 UI의 복제본이지만 계층 구조에 더 중점을 둡니다)입니다.

이것이 옳은 것을 찾는 데 유용하다는 것을 희망하십시오.

6
Jon Purdy

CognitoForms 내가 찾은 가장 직관적 인 AND/OR 솔루션이 있습니다 enter image description here

4
leahg

부울 논리를 구성하기위한 인터페이스는 다음과 같습니다.

Interface for composing boolean logic

몇 가지 생각

  • 인터페이스는 간단하게 시작됩니다
  • 복잡해지면 사용자가 단계별로 빌드했기 때문입니다.
  • 편집이나 드래그 앤 드롭이 필요하지 않음
  • 이 예에서 조건은 간단한 드롭 다운이지만 더 복잡하거나 무시 될 수 있습니다.

모호성

또한 사용자가 기술적으로 "빨간색 또는 파란색을 의미 할 수 있기 때문에"빨간색과 파란색 표시 "셔츠의 모호성에 대해서도 우려했습니다. "셔츠.

나는 당신이 그들에게 단수 버전 ( "셔츠")을 묘사하도록 요구하면 문제는 다소 줄어 듭니다. 예를 들어, "빨간색 또는 파란색"을 의미하는 경우 "빨간색과 파란색 셔츠 표시"라고 말하지 않습니다.

4
bendytree

우리가 개발 한 ticketing app 에서 예제 추가.

"AND/OR"을 그룹화하는 대신 상단에 "all/any/none"드롭 다운을 설정했습니다. 위에서 언급 한 예 때문에 정확히 말입니다. 비 기술적 인 사람들이 "뉴욕과 뉴저지에서 김미 주문"이라고 말하면 실제로 "논리적 OR"을 의미합니다.

enter image description here

또한 사람들이 혼란스러워지면서 여러 복합 AND/OR 조합을 그룹화하지 않기로 결정했습니다. 대신 "재귀"를 제공하여 다른 규칙을 "트리거"(스크린 샷의 맨 아래)에 제공합니다.

2
Alex

부울을 사용하는 웹 응용 프로그램의 재 설계를 진행 중이며 아래 이미지는 현재 수행중인 방법을 보여줍니다. 사용자는 필요한 곳에서 대괄호를 삭제하거나 다시 추가 할 수 있습니다.이 작업을 수행하는 더 좋은 방법을 찾기 위해 고심하고 있으므로 사용자가 잘 사용하는 것처럼 보이는 부분을 유지할 수 있습니다.

UI boolean

2
Gueda

규칙 작성에 가장 좋아하는 UI는 ATG의 시나리오 서버 입니다. 이것 좀 봐:

alt text

2
Julian H

비교적 복잡한 단일 테이블 쿼리를 만들 때는 피벗 테이블이 매우 유용합니다.

좋은 물건

  1. 비교적 적은 지식으로 SUM, AVGGROUP을 얻을 수 있습니다.
  2. 열과 행을 기준으로 필드를 분할하면 AND 개의 쿼리가 생성됩니다
  3. 총계는 OR 개의 검색어를 제공합니다
  4. 쿼리를 올바르게 '빌드'할 수 있습니다. 즉, 신속하게 마스터 세트를보고 행/열을 추가 한 다음 필터를 추가하여 필터링 할 수있는 데이터를 표시 할 수 있습니다

나쁜 것

  1. 하나 이상의 테이블/데이터 세트를 결합하려고하면 한계에 도달 할 것입니다.
  2. AND/OR 쿼리가 얼마나 깊이 중첩되어 있는지에 따라 문제가있을 수 있습니다.

그러나 적어도 당신은 많은 콤보 상자를 가지고 있지 않으며, 당신이 가지고있는 콤보 상자는보다 직관적입니다.

여기에 멋진 판타지 축구 통계와 함께 만들었습니다.

enter image description here

2
icc97

기술 사용자가 전통적으로 다루었던 것에 대해 직관적 인 것을 정확히 찾아내는 것은 어렵습니다 (명령 프롬프트에 비해 인터페이스가 더 많은 사용자 친구를 찾을 필요는 없음). 명령 줄 프롬프트에서 쿼리를 명확하게 지정하고 실행할 수 있으므로 이러한 효율성에 특별한 이유가 있습니다. 또한 더 복잡한 쿼리에 대해서는 전통적인 인터페이스 디자인이 깨질 수 있습니다.

그럼에도 불구하고 부울 논리와 관련하여 가장 일반적이고 익숙한 주제는 벤 다이어그램이어야한다고 말하는 것이 안전하다고 생각합니다. 그렇다면 질문은 데이터베이스 쿼리의 정확한 문장을 가져 와서 인터페이스와 같은 벤 다이어그램의 단순성과 결합하는 방법 일 것입니다.

개념적으로 가능한 해결책은 공간 레이아웃과 수행되는 작업의 특성을 반영하는 사용자 상호 작용을 결합하는 것입니다. 이런 식으로 Venn 다이어그램의 개념을 사용자에게 전달하면서 작업을 '직관적 인'이해하기 쉽게 만들 수 있습니다. 따라서 실제 데이터 입력을 위해 @bendytree와 @sboye가 제안한 것을 효과적으로 취하면서 Venn 다이어그램 형식으로 해당 작업의 결과를 출력하여 사용자가 올바른 유형의 부울 연산을 수행했는지 여부를 즉시 확인할 수 있습니다. . 그러나 Google 검색에서 찾을 수있는 일부 대화 형 벤 다이어그램에서 영감을 얻어 표시하려는 부울 연산자 및 데이터 세트/필드에 대해 드래그 앤 드롭을 구현하여 입력을 더 쉽게 할 수 있습니다.

1
Michael Lai

모바일 인 경우 텍스트 상자에 간단히 입력하는 각 작업에 대한 버튼이 있습니다. 부울 대수 등에 도움이되는 링크를 제공하십시오. 그것은 쉽고 유연합니다.

0
timseal