Интуитивный интерфейс для компоновки логической логики?

Мне интересно узнать, как люди, или построит интерфейс, который упрощает построение логических логических условий? (Да, это построитель запросов базы данных). На мой взгляд, плохой интерфейс позволяет им печатать много слов AND, NOT IN, OR и т. Д. Кроме того, имеется миллион комбинированных полей.

Мне интересно, есть ли у кого-нибудь хороший пример, из которого я мог бы извлечь идеи? Или некоторые предложения?

В настоящий момент я рассматриваю разделенный экран с сеткой для составления запроса и холста для отображения визуального представления наборов условий и того, как они перекрываются и т. д. Подобно диаграмме Венна. Это все еще дает мне проблему с удобством /интуитивностью элементов управления на сетке.

EDIT: Меня очень интересуют идеи, которые упрощают его для менее технических пользователей. Однако идеи для версии пользовательского интерфейса для продвинутых пользователей также очень полезны.

116 голосов | спросил Edward Williams 30 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 30 Sep 2010 08:12:50 +0400 2010, 08:12:50

18 ответов


53

См. также iTunes 9 или более поздней версии. Он добавляет возможность делать «вложенные» выражения AND /OR, похожие на то, как программист сделал бы это с помощью скобок:

alt text

ответил Hisham 1 +04002010-10-01T01:01:49+04:00312010bEurope/MoscowFri, 01 Oct 2010 01:01:49 +0400 2010, 01:01:49
43

Этот тест хорошо зарекомендовал себя как с техническими, так и с нетехническими пользователями и может генерировать практически любой возможный запрос к базе данных ...

db query builder

Преимущества: это очень ясно , и пользователь может перетащить ( или удалить ) любое выражение или группу выражений в дерево.

Нижняя сторона - это сколько места она потребляет.

ответил DaveAlger 16 TueEurope/Moscow2014-12-16T00:24:24+03:00Europe/Moscow12bEurope/MoscowTue, 16 Dec 2014 00:24:24 +0300 2014, 00:24:24
42

Основная проблема, которую нетехнические пользователи имеют с логической логикой, понимает разницу между И и ИЛИ, потому что она не всегда соответствует естественному языку (например, «дайте мне заказы из Нью-Йорка и Нью-Джерси» почти наверняка означает Location = NY OR Location = NJ). Часто пользователи склонны интерпретировать «или» как исключительную ИЛИ. Тогда возникает проблема потери треков вложенных круглых скобок.

Одним из решений, позволяющим избежать обеих этих проблем, является графическое представление логики с помощью сантехники или электрической метафоры. С таким подходом выработали пару работ:

  

Шнейдерман, B (1991). Визуальный пользователь   Интерфейсы для информации   Исследование. Труды 54-го   Ежегодное собрание Американского общества   для информационных наук, 28, 379-384.

     

Мюррей Н.С., Патон Н.В., Гобл К.А., Брайс Дж.   (2000) Kaleidoquery - основанный на потоке   визуальный язык и его оценка.   Журнал визуальных языков &   Вычисление, 11 (2), 151-189.

Конструкторы запросов являются одним из немногих мест, где имеет смысл иметь отдельные базовые и расширенные режимы. Вероятно, вы обнаружите, что 90% запросов ваших пользователей подходят только для нескольких моделей (например, «Клиенты с именем, начинающимся с Xxxx», «Ответственные за меня», ответственные за выдающиеся счета, œОдинцы, сделанные между датой a и b). Имеет смысл иметь их как консервированные или полуконсервированные запросы, которые можно легко выбрать и указать, поместив что-то вроде Kaleidoquery под Advanced для более редких запросов ad hoc.

ответил Michael Zuschlag 30 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 30 Sep 2010 15:59:19 +0400 2010, 15:59:19
11

Для этого есть плагин jquery, называемый QueryBuilder, который делает это интересным способом: http : //mistic100.github.io/jQuery-QueryBuilder/

 Скриншот JQuery QueryBuilder

ответил sboye 22 MarpmTue, 22 Mar 2016 16:38:12 +03002016-03-22T16:38:12+03:0004 2016, 16:38:12
9

Это зависит от уровня сложности ваших пользователей. У нас есть что-то подобное в текущей версии интерфейса, которые не учитывают группировку и фиксируют связь между терминами с OR. Каждый термин можно отрицать. Большинство пользователей отлично справляются с такими запросами, и большинство из них не смогут правильно сформулировать более сложные запросы. Теперь мы реализуем двухэтапный процесс, в котором результат запроса можно использовать для ограничения совокупности в следующем запросе (все еще оставляя явную группировку в пользовательском интерфейсе).

Пользовательский интерфейс для этого является основным списком ограничений, которые могут быть добавлены, удалены, активированы и деактивированы и отменены. Этого было достаточно для большинства запросов, которые пользователи хотят создать. У нас был дизайн для новой версии, основанной на концепции потока данных (сильное вдохновение от вистралов, см. Ниже), но это никогда не исполнялось. Vistrails - это продукт, который можно использовать для создания трубопроводов VTK. Если вы хотите идти по множеству частей пользовательского интерфейса, поток данных работает для формулировки запросов, но также работает для формулировки форматирования вывода.

Ищите вдохновение в

ответил Harald Scheirich 30 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 30 Sep 2010 13:37:08 +0400 2010, 13:37:08
9

Мне нравится, как работают правила Apple Mail:

screenshot

ответил LennyUserExperience 30 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 30 Sep 2010 15:35:39 +0400 2010, 15:35:39
8

Здесь немало хороших идей /ссылок, особенно для некоторых существующих подходов. Часто, хотя и не всегда, подход Apple - хорошее место для начала, но, возможно, в вашем случае это может и не быть. У меня создается впечатление (хотя вы этого и не сказали), что вы работаете с огромным количеством данных, состоящих из многих полей /переменных.

Я согласен, что попытка найти способ упростить его для менее технических пользователей - это хорошая идея, если вы ожидаете, что у вас будет меньше технических пользователей, использующих эту систему. В противном случае разработка менее сложного интерфейса может быть большой работой для небольшого выигрыша. Мне также нравится идея диаграммы Венна - было бы интересно посмотреть, как это получается.

Однако, с точки зрения фактических предложений о том, как упростить это, другим подходом было бы просто создать какой-то «Wizard» -процесс, который заставляет пользователя через процесс сочетать естественный язык и знакомый «веб-интерфейс» и чувствовать. Ниже приведен макет того, как это может работать, используя пример базы данных о транспортных средствах:

 введите описание изображения здесь>> </a> </p>

<p> Вышеописанное показывает, как шаг 1 может работать, предоставляя пользователям несколько параметров, которые они могут выбрать, отметив соответствующий флажок. Они могут выбрать один или несколько флажков по необходимости (или, может быть, нет ?!). Если они выбирают флажок для опции, которая требует дополнительной информации, то соответствующие слова гиперссылки. Нажав на гиперссылки, вы должны представить пользователю что-то вроде приведенного ниже примера: </p>

<p> <a href= введите описание изображения здесь>> </a> </p>

<p> Итак, приведенный выше пример показывает, что пользователь может увидеть, выбрали ли они флажок «Транспортное средство изготовлено конкретными производителями», а затем нажали на гиперссылку, чтобы выбрать производителя (и), который они хотят включить в результаты поиска , Конечно, ваш подход может отличаться в зависимости от того, должны ли они видеть свободное текстовое поле, раскрывающийся список параметров и т. Д. </p>

<p> Теперь, чтобы иметь дело с любыми «исключениями» по критерию поиска, вы в основном воссоздаете первое окно снова, но с другой формулировкой, например: </p>

<p> <a href= введите описание изображения здесь>> </a> </p>

<p> Итак, после выбора вышеописанной топливной ошибки пользователь нажимает на гиперссылки слова «конкретное топливо», чтобы выбрать исключение, как показано ниже: </p>

<p> <a href= введите описание изображения здесь>> </a> </p>

<p> Опять же, это может быть раскрывающийся список, переключатели и т. д., в зависимости от того, что лучше всего подходит для этого условия. Они также пройдут один и тот же процесс, чтобы выбрать страну, в которой они не хотели, чтобы транспортное средство было изготовлено. </p>

<p> Конечно, я вижу, что этот подход «Мастер» используется для менее технических пользователей. Вы также предложили бы «расширенный» вариант для пользователей, обладающих более сложным подходом, который может быть упрощен по сравнению с подходом мастера. </p>

<p> <strong> ДОПОЛНЕНИЕ </STRONG> </p>

<p> Ладно, это задержало меня вчера вечером. Я на самом деле вижу, как этот подход Wizard является очень хорошим способом, поэтому подумал, что стоит вернуться, чтобы улучшить свой ответ, поскольку он может помочь кому-то другому, если не вам. </p>

<p> Я обновил изображения mockup выше и хотел расширить вашу идею использования разделенного экрана. </p>

<p> Первоначально я думал, что после того, как последний шаг был завершен, тогда что-то вроде вашей диаграммной диаграммы Венна может использоваться для визуального указания того, что выбрал пользователь. Но потом я подумал о своем первоначальном утверждении о том, что также должен быть способ для пользователя пойти туда и обратно, чтобы изменить свои критерии. Так что теперь я думаю, что с помощью вашего экрана разделения вы могли бы достичь обоих. Ниже приведено новое изображение, иллюстрирующее, о чем я думаю: </p>

<p> <a href= Разделить экран

Итак, приведенное выше является примером того, что может появиться во второй части вашего экрана разделения. Когда пользователь выбирает свои критерии, он обновляется, чтобы указать, какими были их выбор. Этот подход также использует привычный веб-интерфейс и подчеркивает их выбор с помощью гиперссылок, и, если они захотят, они могут изменить свои критерии, нажав на гиперссылки на этом экране, вместо того, чтобы переходить между экранами, чтобы переделать их шаги. Конечно, если они захотят выбрать условие new , им, возможно, потребуется вернуться к соответствующему этапу. Но у вас есть идея.

Единственное, что я хотел бы упомянуть, это то, что, не зная сложность ваших данных, вам может потребоваться уточнить этот подход мастера. Моя простая база данных транспортных средств требует всего лишь двух шагов, но сложнаяможет потребоваться больше шагов. Однако точка этого подхода заключается не столько в количестве шагов, сколько в том, что Мастер «переводит» людей через шаги, используя как можно более естественный язык.

В любом случае, я надеюсь, что это, наряду с другими предоставленными ответами, даст вам немного еды для размышлений. И, возможно, некоторые другие. Это хорошая тема, и я думаю, это будет актуально для многих пользователей.

Удачи!

ответил Monomeeth 12 AMpTue, 12 Apr 2016 09:42:18 +030042Tuesday 2016, 09:42:18
6

Если ваши пользователи достаточно продвинуты, чтобы знать иерархию запроса, любой графический интерфейс, который вы им даете, должен быть достаточно жидким, чтобы не мешать им. Я думаю, что интерфейс, основанный на перетаскивании элементов для создания неявной иерархии, идеален. Вот расширенный аннотированный визуальный пример того, как пользователь может построить запрос (A and B) or ((not C) or D):

Снимите A на панель.
+ --- +
| A |
+ --- +

Drop "и" после A.
+ ------------------- +
| + --- + + ----- + |
| | A | и | ... | |
| + --- + + ----- + |
+ ------------------- +

Отбросьте B на «...».
+ ----------------- +
| + --- + + --- + |
| | A | и | B | |
| + --- + + --- + |
+ ----------------- +

Drop "или" after "и".
+ -------------------------------- +
| + ----------------- + |
| | + --- + + --- + | + ----- + |
| | | A | и | B | | или | ... | |
| | + --- + + --- + | + ----- + |
| + ----------------- + |
+ -------------------------------- +

Капля C на "...".
+ ------------------------------ +
| + ----------------- + |
| | + --- + + --- + | + --- + |
| | | A | и | B | | или | C | |
| | + --- + + --- + | + --- + |
| + ----------------- + |
+ ------------------------------ +

Бросьте «не» на C.
+ -------------------------------------- +
| + ----------------- + + ----------- + |
| | + --- + + --- + | | + --- + | |
| | | A | и | B | | или | не | C | | |
| | + --- + + --- + | | + --- + | |
| + ----------------- + + ----------- + |
+ -------------------------------------- +

Drop "или" after "not C".
+ ------------------------------------------------- ---- +
| + -------------------------- + |
| + ----------------- + | + ----------- + | |
| | + --- + + --- + | | | + --- + | + ----- + | |
| | | A | и | B | | или | | не | C | | или | ... | | |
| | + --- + + --- + | | | + --- + | + ----- + | |
| + ----------------- + | + ----------- + | |
| + -------------------------- + |
+ ------------------------------------------------- ---- +

Drop D на "...".
+ ------------------------------------------------- - +
| + ------------------------ + |
| + ----------------- + | + ----------- + | |
| | + --- + + --- + | | | + --- + | + --- + | |
| | | A | и | B | | или | | не | C | | или | D | | |
| | + --- + + --- + | | | + --- + | + --- + | |
| + ----------------- + | + ----------- + | |
| + ------------------------ + |
+ ------------------------------------------------- - +

Отдельные элементы запроса (A, B и т. д.) строятся до того, как их отбрасывают в панель, используя комбинированные поля или любые другие элементы. Небольшие поля и чередующиеся цвета могут сделать это очень читаемым, а также правила отображения, которые отображают, например, цепочку из or s на одном уровне:

+ ------------------------- +
| + --- + + --- + + --- + |
| | A | или | B | или | C | |
| + --- + + --- + + --- + |
+ ------------------------- +

Естественно, что элементы запроса могут быть расширены, свернуты, переупорядочены и отредактированы после того, как их сбросили на панель компоновки.

Я не говорю, что это самый простой способ построить систему для этой цели. На самом деле, с точки зрения развития, это, вероятно, так сложно, как может быть. Но это самая эффективная и интуитивно понятная вещь, которую я могу придумать, и в любом случае это в основном просто клоун пользовательского интерфейса правил Apple Mail, но с большим упором на иерархию.

Надеюсь, это окажется полезным в вашем поиске того, что правильно.

ответил Jon Purdy 30 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 30 Sep 2010 21:25:48 +0400 2010, 21:25:48
6

Microsoft Access предпринял разумную попытку простого пользовательского интерфейса запросов к базе данных, создав визуальную версию «Запрос по Пример "

Он имеет более естественный язык, который избегает необходимости вложенного интерфейса , за счет изредка немного более избыточных записей в строках.

mockup

скачать источник bmml - каркасы созданный с помощью макетов Balsamiq

ответил Jason A. 16 TueEurope/Moscow2014-12-16T17:20:51+03:00Europe/Moscow12bEurope/MoscowTue, 16 Dec 2014 17:20:51 +0300 2014, 17:20:51
6

В отличие от повторного использования сводных таблиц, как я ранее ответил , это экспериментальный интерфейс, который я думал для обработки повторяющейся необходимости писать AND или OR.

Опираясь на один элемент, вы должны узнать, что AND s являются горизонтальными, а OR s - вертикальными. Однако ему удается справляться с довольно сложной логикой.

Обзор

Предположим, что A, B, C, D и E являются булевыми выражениями.

Для тестирования концепции здесь показано, как вы нарисуете две разные стороны стандартной булевой эквивалентности:

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

 введите описание изображения здесь>> </a> </p>

<p> Это распространяется на более сложные запросы: </p>



<pre><code>((A и B и C) или D) и E
</code></pre>

<p> <a href= введите описание изображения здесь>> </a> </p>

<h3> Фактический пользовательский интерфейс </h3>

<p> Для этой таблицы данных: </p>

<p> <a href= введите описание изображения здесь>> </a> </p>

<p> Экран разделен на две части: </p>

<ol>
<li> Набор фильтров (эффективно <code>AND</code>) </li>
<li> Комбинация фильтров </li>
</ol>
<p> Вы устанавливаете фильтры (их просто набирают с помощью базового условного журнала), а затем перетаскиваете их, чтобы «объединить» его с полным запросом. </p>

<p> <a href= введите описание изображения здесь>> </a> </p>

<p> После перетаскивания нового набора фильтров, левая часть возвращается в нефильтрованный список, а в правой части отображается набор данных «объединенный»: </p>

<p> <a href= введите описание изображения здесь>> </a> </p>

<p> Затем вы можете перетащить и отредактировать выражения с правой стороны, но для этого требуется намного больше работы. </p></body></html>

ответил icc97 10 PMpSun, 10 Apr 2016 23:13:45 +030013Sunday 2016, 23:13:45
4

Вот интерфейс для создания логической логики.

Интерфейс для создания логической логики

Несколько мыслей

  • Интерфейс начинается просто
  • Если это усложняется, это связано с тем, что пользователь построил его шаг за шагом.
  • Нет редактирования или перетаскивания /перетаскивания - просто создание и удаление ветвей.
  • Условия - это простой раскрывающийся список в этом примере, но может быть более сложным или, возможно, отрицательным.

Неоднозначность

В стороне, я также беспокоился о двусмысленности рубашек «покажи мне красные и синие», так как пользователь может технически означать «красные или синие» рубашки.

Я думаю, если вы попросите их описать сингулярную версию («рубашку»), то проблема будет несколько уменьшена. Например, они не сказали бы «Покажите мне красную и синюю рубашку», если они означают «красный или синий».

ответил bendytree 16 TueEurope/Moscow2014-12-16T00:03:11+03:00Europe/Moscow12bEurope/MoscowTue, 16 Dec 2014 00:03:11 +0300 2014, 00:03:11
4

CognitoForms имеет самое интуитивное решение AND /OR, с которым я столкнулся  введите описание изображения здесь «> </a> </p></body></html>

ответил leahg 11 PMpTue, 11 Apr 2017 23:09:29 +030009Tuesday 2017, 23:09:29
4

Это старый вопрос, но я думал, что внесет вклад в случае, если кто-то заинтересован. Хотя много интересных ответов уже было предоставлено, я разработал для нашего приложения следующее:

 введите описание изображения здесь>> </a> </p>

<p> Изначально существует только первое выражение группы и одно правило. Нажатие на «Добавить условие» добавляет новое условие над ним, а «Добавить группу» добавляет новую группу непосредственно под ним; дополнительные группы из родительской группы являются братьями и сестрами, в то время как вы можете создать бесконечную вложенность, используя кнопку «Добавить группу» из вложенной группы. </p>

<p> На мобильных устройствах стеки условий вместе с кнопкой «удалить» действие, которое теперь меняет текст на «Удалить условие». </p>

<p> <a href= введите описание изображения здесь>> </a> </p>

<p> Дизайн работает хорошо, хорошо выглядит, реагирует и не потребляет слишком много места. </p>

<p> Добавленный бонус: над группой одна строка показывает конечное условие, например </p>

<p> [Дата больше XXX И (Имя равно Нику)] </p>

<p> edit: Чтобы сделать его более доступным для нетехнических людей, я буду следовать тому, что говорили другие в этом потоке, - следуйте по пути Apple. Вместо AND /OR я бы использовал контекст ALL /ANY +. </p></body></html>

ответил scooterlord 20 PMpThu, 20 Apr 2017 14:56:27 +030056Thursday 2017, 14:56:27
2

Мой любимый пользовательский интерфейс для построения правила - сервер сценариев ATG . Проверьте это:

alt text

ответил Julian H 30 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 30 Sep 2010 17:22:57 +0400 2010, 17:22:57
2

Я работаю над редизайном веб-приложения, которое использует Boolean, а приведенное ниже изображение показывает, как это делается в настоящее время. Пользователь может удалить скобки там, где это необходимо, или добавить их обратно. Я изо всех сил стараюсь найти лучший способ сделать это, чтобы в конечном итоге сохранить эту часть, которую пользователи, похоже, используют довольно хорошо.

UI boolean

ответил Gueda 10 MarpmTue, 10 Mar 2015 19:37:08 +03002015-03-10T19:37:08+03:0007 2015, 19:37:08
2

Для создания относительно сложных одиночных таблиц очень полезны сводные таблицы .

Хороший материал

  1. Вы можете получить SUM, AVG и GROUP с относительно небольшим количеством знаний.
  2. Разделив поля по столбцам и строкам, вы получите запросы AND
  3. Итоговые данные дают вам OR запросы
  4. Вы можете правильно «строить» запросы, т. е. вы можете быстро увидеть мастер-набор, затем добавить строки /столбцы, а затем добавить фильтры, которые показывают, какие данные доступны для фильтрации

Плохой материал

  1. Полагаю, вы нажмете ограничения, если попытаетесь объединить несколько таблиц /данных.
  2. В зависимости от того, насколько глубоко вы вложены ваши запросы AND /OR, у вас могут быть проблемы

Но, по крайней мере, у вас нет тонны комбинированных ящиков, а поле со списком, которое у вас есть, более интуитивно.

Вот один из них, который я сделал ранее с некоторыми прекрасными футбольными статистиками, чтобы пойти с ним.

 введите описание изображения здесь>> </a> </p></body></html>

ответил icc97 6 AMpWed, 06 Apr 2016 11:21:16 +030021Wednesday 2016, 11:21:16
1

Трудно точно определить, что является интуитивным для того, что традиционно обрабатывалось техническими пользователями (это не обязательно приведет к тому, что интерфейсы будут больше пользователей по сравнению с командами). Для этой эффективности существует особая причина, так как запросы могут быть однозначно заданы и выполняться в командной строке. Кроме того, это никого не удивит, что традиционный дизайн интерфейса, вероятно, сломается, когда дело доходит до более сложных запросов.

Тем не менее, я думаю, что, вероятно, можно с уверенностью сказать, что когда речь идет о логической логике, наиболее распространенной /знакомой темой должна быть диаграмма Венна. Таким образом, вопрос может заключаться в том, как принимать точные утверждения запросов к базе данных и комбинировать их с простотой диаграммы Венна, такой как интерфейс?

Я думаю, что концептуально возможным решением было бы объединить как пространственный макет с пользовательскими взаимодействиями, отражающими характер выполняемых операций. Таким образом, вы получите концепцию диаграммы Венна для пользователей, одновременно делая операции «интуитивными» достаточно понятными. Таким образом, это эффективно принимает то, что @bendytree и @sboye предложили для выполнения фактического ввода данных, но также выводя результат этих операций в виде диаграммы Венна, чтобы пользователь мог сразу увидеть, выполнили ли они правильный тип логической операции , Но вы можете сделать ввод еще проще, реализовав некоторый drag'n'drop для булевых операторов и наборов данных /полей, которые вы хотите отобразить, принимая воодушевление от некоторых интерактивных диаграмм Венна, которые вы можете найти в результатах поиска Google.

ответил Michael Lai 12 AMpTue, 12 Apr 2016 06:52:50 +030052Tuesday 2016, 06:52:50
0

Если это мобильное устройство, для каждой операции есть кнопка, которая просто вводит ее в текстовое поле. Предоставьте ссылку, чтобы помочь в булевой алгебре и тому подобное. Это было бы легко и гибко.

ответил timseal 15 J0000006Europe/Moscow 2011, 23:07:05

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132