Comflow Actions Standard

Comflow Actions Standard 

Actions are normally represented as Buttons or Right Click options in a list. Here is a design guide of how to manage Actions. Note that Actions are the representation of "Feed forward" for the user, meaning what can be accomplished, when and how, and thereby a key component in creating good User Experience.  

Actions

Actions and shall primarily indicate action = use verbs; “Add”, “Edit”, ”Delete”…

The action can be complex, so try to orient them around the following: (2, 3 and 4 are not always applicable, since it is clear from context):

1. What will happen? (Verb) – Add, Delete…
2. What scope is involved? – Selected, All…
3. What object is affected? (Object) – Line, Item…
4. What will happen after the action? – Close, Next…
   1. Example: “Delete Selected Items & Close”

2, 3 and 4 are not always applicable or redundant, since it is clear from context. 1 is though central and is recommended to always be used.

So when you create actions, use as specific meaning as possible, like “Add Line” or “Delete Line”. If the context is clear, like the user only sees lines, you can use “Add” or “Delete”. Avoid generic meanings like “OK” or “Submit”.

Add dots (…) to signal that the action will happen in next step, like “Delete…”, compared to “Delete” which acts immediately

Icons are as signifiers a very fast way for the user to understand the meaning of the action in the actual context. Icons shall therefore indicate action (verbs) rather than object (noun), like “add”, “edit”, ”open”, “delete”, “cancel”, “close”.  See Comflow Standard Icons.

If you have standard functions, like the Work list, that means the same thing for all users, you can also use an icon for an object. Make sure to be consistent with the icon across the whole application.

If the label and icon for a button reflects an action on an object, there shall be a consideration for the opposite action, like forward-back, next-previous, add-remove, new-delete, so the context is right.

Show icon and label together if the space allows it

Location: Try to be consistent in the placing of the button, so the user always gets the same function in the same place. You can work with disabled buttons to achieve that, even if it can confuse the user with many buttons

Proximity: Keep buttons close to its related data

List: A row action shall always correspond with the first right click action. So if you have Edit... (menu.edit.dot) on your row click, then you should have the same as the first option for the right click options.

Be generous with saving data. In most context, the user expect the edited data to be saved also for other buttons, like edit a line shall save header information.

Hotkeys

Comflow enables the usage of hotkeys on Buttons, meaning that you can access the action of a visible or not visible button via keyboard. Hotkey keys are F1-F12 + F13-F24(Shift + F1-F12) + Enter. So for example a "Create" (button.create) can be connected to the hotkey "Enter" and thereby be executed via the Enter button.

Hotkeys are stylable, meaning that the can be controlled via Comflow css. Standard wise only the Enter hotkey is styled via ".button-fk-Enter".

In Comflow Standard Actions the following hotkeys are used:

F3 - Close

F4 - Lookup (prompt)

F5 - Refresh

F6 - Add/New

F7 - Previous record

F8 - Next record

F12 - Cancel

Enter - Create/Create Copy/Delete/OK/Save and Close

Standard Actions

The recommendation is to use Comflow Standard Actions when applicable to get standard behavior! 

Portlet buttons

Close (button.close)

Cancel (button.cancel – Hotkey F12 in cooperation with Close)

Cancel (button.cancel)

Refresh (button.refresh – Hotkey F5 in cooperation with Refresh tool bar icon )

Refresh (button.refresh)

Filter (button.filter)

Create (button.create – cond. mode insert. Hotkey Enter in cooperation with Cancel )

Save (button.save – cond. mode update)

Save and close (button.save.and.close – cond. mode update. Hotkey Enter in cooperation with Cancel )

Create copy (button.create.copy – cond. mode copy. Hotkey Enter in cooperation with Cancel )

Delete (button.delete – cond. mode delete. Hotkey Enter in cooperation with Cancel )

OK (button.ok – cond. mode view, Hotkey Enter in cooperation with Cancel)

OK (button.ok – cond. mode view)

List menu

Edit… (menu.edit.dot – row action and next action update mode)

Edit… (menu.edit.dot – right click action and next action update mode)

View… (menu.view.dot – row action and next action view mode)

View… (menu.view.dot – right click action and next action view mode)

Copy…(menu.copy.dot – right click action and next action insert mode)

Delete…(menu.delete.dot – right click action and next action delete mode)

Select (menu.select – row action and doSelect for prompt selection)

Select (menu.select – right click action and doSelect for prompt selection)

Open… (menu.open.dot – can be used as edit, signaling more action than edit)

NB: The top right click option shall functionally always be the same as the row action

List buttons (all same function, used based on context) 

New… (button.new.dot –next action insert mode)

Add… (button.add.dot –next action insert mode)

Filter (button.filter – if not in the portlet)

Ambiguities

Finish versus Close

Finish is a completion of a flow of actions that closes the view while Close is controlled stop of the function where no more operations are performed and the view is closed

Close versus Cancel

Cancel is for cancelling one specific operation while Close is controlled stop of the functions where operations can not be cancelled

Cancel versus Previous

Cancel is for cancelling one specific operation while Previous is a step in a chain of operations

Edit versus Open

Edit is to be able to change data for an entity 

Open is a wider scope to act on an entity and relations, like from the worklist where a related function is opened or when you show a whole complex entity, like an order with header, address, lines…

New versus Add versus Add New

New creates a new entity, Add adds an existing entity to the context and Add New does both

Search versus Find versus Filter

Search is outside the viewed scope, like Quick Search that searches within whole Comflow

Find is within the viewed scope, like Finding something on a web page

Filter is for filtering the actual list

Delete versus Remove versus Disconnect

Delete is for deleting an entity, while Remove and Disconnect is for deleting a relation and not the entity itself. Remove or Disconnect is based on context

Apply versus Save

Apply stores values AND activates if’s function immediately. Save stores values but that does not mean that actions are taken immediately based on the value