[jboss-jira] [JBoss JIRA] (DROOLS-2184) UX design DRD logic table actions

[Liz Clayton (JIRA)]

    [ https://issues.jboss.org/browse/DROOLS-2184?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13528689#comment-13528689 ] 

Liz Clayton edited comment on DROOLS-2184 at 2/5/18 1:55 PM:
-------------------------------------------------------------

[~aglass] Responding to your comment/feedback added to the google doc: 
_"...- since so many of our PF tables and lists use a kabob button to launch menus with actions, would you consider using that button to bring up the menu, rather on relying on the user to learn and discover that clicking produces a menu...." _
Some concerns with using the kebab, from my perspective:
* *Where to kebab menu?* Actions could be performed on a numbers of elements within the table (cell, row, table, nested table...) So the kebab needs to work universally well in a variety of possible presentations, and it needs to be in a consistent location so the user can expect where to find it. 
- If it were placed in the left side of the item it might visually conflict with content. Even if labels were center-aligned, expressions and other cell content will most likely need to be left aligned. Probably less of a concern for right alignment, but then it might not be a very visible affordance on very large tables (say if your visual focus is on the left, such as adding a row, etc.) Center seems the less problematic, but then it might get visually lost unless you provide some highlight treatment to the selection area. 
 !kebab-where.png|thumbnail! 
* If providing cell background highlight treatment to improve visibility of the kebab/selection, it can't be too dark or it might reduce the contrast of the underlying text making it less legible/readable. Equally undesirable imo would be too obscure the color coding provided on some cell types (input versus output or etc.).
 !kebab-dmn.png|thumbnail! 

* *Click target:* If the menu may only be initiated by using then kebab, then you're reducing the click target from being the entire area to that one button, which will most likely need to be fairly small to fit in every cell. Or if you don't require the user to click on the kebab itself but anywhere in the cell/row/table, then the menu should spawn next to the click rather than next to the kebab (which might be unusual.) 

* *On PatternFly*: Originally PF recommended the kebab to be used in conjunction with action buttons. Instead of offering a lot of buttons, user would be presented with a Primary, maybe Secondary button/action, then the rest would be placed within the kebab menu. Seems like the use of the kebab has expanded beyond this, but I can't find usage guidelines to support it. I would argue that this type of table is unique to what's available through PF currently. 


was (Author: uxdlc):
[~aglass] Responding to your comment/feedback added to the google doc: 
_"...- since so many of our PF tables and lists use a kabob button to launch menus with actions, would you consider using that button to bring up the menu, rather on relying on the user to learn and discover that clicking produces a menu...." _
Some concerns with using the kebab, from my perspective:
* *Where to kebab menu?* Actions could be performed on a numbers of elements within the table (cell, row, table, nested table...) So the kebab needs to work universally well in a variety of possible presentations, and it needs to be in a consistent location so the user can expect where to find it. 
- If it were placed in the left side of the item it might visually conflict with context. Even if labels were center-aligned, expressions and other cell content will most likely need to be left aligned. Probably less of a concern for right alignment, but then it might not be a very visible affordance on very large tables (say if your visual focus is on the left, such as adding a row, etc.) Center seems the less problematic, but then it might get visually lost unless you provide some highlight treatment to the selection area. 
 !kebab-where.png|thumbnail! 
* If providing cell background highlight treatment to improve visibility of the kebab/selection, it can't be too dark or it might reduce the contrast of the underlying text making it less legible/readable. Equally undesirable imo would be too obscure the color coding provided on some cell types (input versus output or etc.).
 !kebab-dmn.png|thumbnail! 

* *Click target:* If the menu may only be initiated by using then kebab, then you're reducing the click target from being the entire area to that one button, which will most likely need to be fairly small to fit in every cell. Or if you don't require the user to click on the kebab itself but anywhere in the cell/row/table, then the menu should spawn next to the click rather than next to the kebab (which might be unusual.) 

* *On PatternFly*: Originally PF recommended the kebab to be used in conjunction with action buttons. Instead of offering a lot of buttons, user would be presented with a Primary, maybe Secondary button/action, then the rest would be placed within the kebab menu. Seems like the use of the kebab has expanded beyond this, but I can't find usage guidelines to support it. I would argue that this type of table is unique to what's available through PF currently. 

> UX design DRD logic table actions
> ---------------------------------
>
>                 Key: DROOLS-2184
>                 URL: https://issues.jboss.org/browse/DROOLS-2184
>             Project: Drools
>          Issue Type: Task
>          Components: DMN Editor
>            Reporter: Liz Clayton
>            Assignee: Liz Clayton
>              Labels: UX, UXTeam
>         Attachments: DMN Editor UX - Logic_ 2184 - Google Docs.pdf, Screen Shot 2018-01-19 at 3.22.15 PM.png, Screen Shot 2018-01-19 at 3.22.25 PM.png, Screen Shot 2018-01-19 at 3.23.31 PM.png, kebab-dmn.png, kebab-where.png
>
>
> Use case description:

 As a business user (Citizen Developer…), I want to easily create, edit, and refine business decision logic (tables, expressions, boxed expression, etc.) Note: Using inline controls and employ autocomplete capabilities where possible.



> Verification Conditions
> * The user of this feature is able to easily/quickly perform key actions (Add, Remove, Edit) in logic tables, boxed expressions, and the like. 



--
This message was sent by Atlassian JIRA
(v7.5.0#75005)