As introduced recently we've started working on a new Rules UI as part of the fluxkraft project.
So after quite some planning and discussion we came up with some wireframes that should show how we imagine the new Rules UI to work. The wireframes are not very detailed - expect the details to change - but still the wireframes should show the overall idea.
So let's have a look at them and discuss :-)
Browse rules screen
This is the screen as known from "Rules" and "Components" tabs. It provides an overview of all rules matching the criteria. The idea here is to provide a visual summary of what's configured in a rule via icons. Each rule element (event, condition, action) gets its icon and a summary if you hover over the icon. Also note that events, conditions and events all get their own geometric shape.
On the right side you see a list of available operations, while we plan to leverage drop down buttons to hide away not so common operations like "disable", "export", ...
Oh and yes, we really need to implement a long overdue feature: descriptions for rule configurations.
Ok, so once you edit a rule you'll get to next screen:
Rules edit screen - overview
Editing and adding a new rule all happens on one screen. It gives a detailed (not directly editable) overview of the whole rule:
If you add or edit something you won't leave the screen - part of the screen will reload to show you the necessary form, while after submitting the form it will reload again and replace the form with the summary of the edited area.
For example, when you'd click on the summary or icon of the "Post tweet" action it replaces the summary of the action with an edit form without leaving the page. Once you submit the form it brings you back an updated summary on the overview, while the whole rule won't be saved until you press "Save" at the overview page.
For adding a new event, condition or action a greyed out empty element will be already visible. Clicking on it will load the add screen there. More experienced users can also hover over the small points between the icons on the left and get an "Add action" drop down there. This drop-down allows you to add an action at a certain position instead of adding it at the end and moving it around afterwards. Also, it's an "Add action" drop-down as there other not so common choices like "Add loop", but that's hidden away by the drop-down button by default.
Rules edit screen - add event
So this is how an "add screen" for events, conditions or actions would look like - in this example we are adding a new event:
So instead of the big "select box" which we have now, we'll group available events/conditions/actions by categories ("groups"). Each category will get its own icon which integrating modules can provide. (Yes, we need to come up with a style-guide here!) Once you click on a category item, the list of available items below is instantly filtered by the category. Also, we think that adding a search-box and an optional description to each listed item would make sense here.
With that new screen we should be prepared for the number of available events/conditions/actions increasing significantly!
Editing a condition group
As you may know Rules supports groups of conditions and actions, i.e. condition or action plugins containing other conditions or actions - such as logical OR or AND elements or LOOPs. If you have a look back to the "Rules edit screen" you notice a condition group there which contains two conditions. In the overview this renders just as known from the "browse rules" screen, so you get an overview of what's in there. If you edit this condition group, you'll get to that screen:
The list of contained items (conditions here) will move from the horizontal line to the usual vertical arrangement on the left with the summary of each item on the right - so it renders the same way as top-level conditions on the "rule edit overview" screen. Above of the contained conditions the settings of the whole condition group are rendered and may be edited with the usual approach: A click on it replaces the summary with an edit form and submitting that brings you back to an updated summary.
Editing a condition within a condition group
So, now what if you edit a condition within a condition group? We'll just repeat the pattern and turn the condition into edit mode:
Of course, this could be nested arbitrarily as you can do that now. While it will work, it won't look very nicely with multiple nested groups - just as now. I do not think this is the 90% use-case to cater for, so that should be enough.
Oh, yes there is some new stuff on the wireframes. First off, you see a small stopwatch which allows you to schedule any rule on its own without having to create a Rules component first. This should make the powerful scheduling feature much easier to use and bring sophisticated repeat and postponing settings. But let's have a closer look at this in a later discussion.
Next, you may notice the "Test rule" area at the bottom. The idea behind that is that you can run a test of your rule even without saving it - on some real data but without executing anything. For that we'll probably allow events to provide some testing-data and fall back to require users to provide some test data, e.g. provide a node-id for testing it. That's the idea - there are no more details on that for now.
So what do you think about this UI? Which ideas suck and what do you like? Do you think it will help to simplify Rules so much that an average users could make a clue of it? Or editors could use a stripped-down variant having less available events/conditions/actions?
Let's discuss :-)
Thanks go to grienauer for working out the wireframes and to the rest of the fluxkraft team for providing ideas and feedback!
|Browse Rules screen||69.2 KB|
|Add event selection||49.79 KB|
|Rule edit overview with (closed) condition group||32.12 KB|
|Rule edit overview with open condition group||44.07 KB|
|Rule edit screen editing a item contained in a condition group||52.18 KB|