KRAD Collections UI Review of UI design challenges – work in progress

Collections – Current UI Problems Lack of visual differentiation between the add/input area and content already in a collection.  Makes it more difficult for user to build mental model of the UI and to visually locate the input area – where they can add to a collection.  Contributes to users forgetting to hit the Add button. Automatic sort exacerbates lack of confirmation/feedback when user adds a row or stacked item to a collection.  Some users will redundantly add due to uncertainty. The interaction between these 2 (sorting and lack of noticeable feedback) will continue to contribute to greater sense of user uncertainty. A standard multi-select model isn’t apparent / enabled (e.g., multiple items for deletion)  For bulk operations, an intuitive multi-select model would improve system performance and user productivity.

Example - Current Visual Treatment Shows lack of visual differentiation between where user can add input & the display of current content Stacked layout Table layout

Recommendations -- Add Visual Differentiation First – the “least change” alternatives: Apply a different visual treatment to the add-input row in a table and stack (lo-fi examples shown, not a spec) Consider placing the add and delete buttons in different locations in a stacked collection (e.g, bottom right & left).

“Least change” Recommendations Continued Apply a different visual treatment to the added rows through 1 submit cycle, to provide visual confirmation/feedback to the user. Make Autosort Off the default behavior:  Added rows should appear closest to the user’s visual field when they are adding – e.g., at top of the collection if the add-input area is above the collection.  User can explicitly sort by column in the table layout (we’ll need to think through if/how user sorts in stacked collections).

Before – After (the least change alternative) Before: After

Second –more significant change alternatives Separate entirely the add-input area from the current collections content, and enable standard multi-select model (similar to other tools). – Eliminates the visual differentiation problem & users forgetting to add. – Differentiates Delete from Add. Delete becomes available when items are selected. – Model can enable multi-select: checkbox on each item in collection (e.g., for bulk deletes or moves).  Support other standard multi-select models (e.g., shift-select, CTRL-select). – Note: we are still working through the “Submit” vs “Add” details. – In this example, changing order is through drag-drop, but we should enable sorting by column, even if we don’t support drag/drop. Example from Confluence task list

Summary – KAI Discussion & Feedback Discussion about the recommendation alternatives: Assessment from the application layer – longer-term impact to you and your users? Recommendation to implement Least-Change alternatives in KRAD as soon as possible – big improvement for low cost? (visual differentiation & feedback) Recommendation to consider more radical change alternatives for next release? (separation of add-input area, standard support for multi-select, work tbd on add/submit.)