Goals
- Improve the user experience for the CDAP UI for existing and new users
- Enable faster ramp-up for new users of the CDAP UI
- Add additional functionality to the CDAP UI'
When logging into CDAP three things need to be immediately apparent:
- What can I do?
- What am I currently doing?
- What have I completed?
Improving the CDAP UI will facilitate a more comprehensive user interface that is customizable, will provide faster time to value, and ease friction for adding new capabilities into the system.
Checklist
- User stories documented(Todd)
- Requirements documented(Todd)
- Requirements Reviewed
- Mockups Built
- Design Built
- Design Accepted
User Stories
- As a CDAP User I want to be able to add new capabilities to the platform from a centralized repository. I want newly added capabilities to include calls for action in the UI for fast accessibility.
- As a CDAP User I want to be able to search on user and system tags, and filter the results based on additional criteria.
- As a CDAP User when I've built a search query that I like, I want to be able to bookmark this for repeatable viewing.
- As a CDAP User I would like a better step by step experience for creating an entity , that I can then use elsewhere in the platform. I want to be able to edit this entity in the future.
- As a CDAP User I want to be able to view entities in the platform as either "card/tile" or in a list format and drill into those entities quickly based on further actions available to those entities.
- As a CDAP User I would like insights into: Live Info, Container Info, Underlying system info for the platform and be able to navigate to those quickly.
- As a CDAP User I want to be able to update metadata from the UI.
- As a CDAP User I want to be able to manage my artifacts from the UI.
- As a CDAP User I want to be able to configure/map/manage namespaces from the UI.
- As a CDAP User I want to be able to manage secure keys from the UI.
Requirements
General
- The CDAP UI should be configurable, in the build process to include specific features like a splash screen or to not include.
- The CDAP UI should be responsive
Responsive Rules
- Responsive Breakpoints - Card View Design Should be responsive with the following breakpoints:
- Widescreen Desktop Landscape - min-width:1200px
- Maximum 4 user card columns, pagination
- Desktop Workspace - min-width:1024px
- Maximum 3 user card columns, pagination
- Small Desktop Workspace - min-width:768px
- Maximum 2 columns, pagination
- Compact device (large phone, small desktop window, tablet) - min-width:480px
- Maximum 1 column, 1 user cards on screen at once, pagination
- Widescreen Desktop Landscape - min-width:1200px
- Scrolling Behaviors
- Horizontal breakpoints for scrolling
- Row breakpoints at every 300 px
- All Cards should snap to grid during scrolling- no partial row displays or column displays during initial view.
- Scrolling should be exclusively vertical. (no horizontal scroll bars except on minimum compact device size breakpoint. No propagation of cards horizontally on resizing.
- Pagination will be used based on responsive rules for amount of cards per page.
- Horizontal breakpoints for scrolling
- Visibility behaviors
- Cards should appear/disappear per specific breakpoints on resizing
- Cards should reposition dynamically when responsive breakpoint is upsized (EG going from 768->1024)
- Cards should reposition and disappear when responsive breakpoint is downsized.
- Event Color Scheme and Icons
Event Class | Type | BG | HTML CODE | Text | HTML CODE | Icon |
button | Next > | blue | white | |||
button | < Back | white | black | |||
button | cancel | white | black | X | ||
alert banner | informational | Yellow | black | |||
alert banner | error | red | white | |||
alert banner | success | green | white | |||
alert banner | loading | gray | black |
Navigation
- The new UI should have a navigation bar that includes
- Current Context
- Current logged in Username
- Search
- Distributed or Standalone (SDK)
- Current Namespace and ability to switch based on permissions
Search
New CDAP UI should be Card Based navigation System.
Resource Center