Please enable JavaScript.

Coggle requires JavaScript to display documents.

IRIS UI Guide Book - Coggle Diagram

- - - - UI Standard
        
        Style
        
        Layout
        
        Typical Screens
      - UX Guideline
        
        General Principles
        
        Window Management
        
        Keyboard Shortcut Rule
        
        1.1.1 General rules
        
        Avoid conflicting with the default operating system support
        
        Ctrl+X for Cut, Ctrl+C for Copy, Ctrl+V for Paste is browser default behavior, will not be changed.
        
        "Enter" - perform action of highlight button (for all cases, highlight button action should be performed when enter key is pressed except:
        
        Cursor in text area. (press enter will result new line in text area)
        
        Auto complete list is return for selection (press enter will result selection of auto complete item)
        
        "Tab" behavior for field level validation.
        
        If validation for a field is real time and invalid input is detected, the focus will not switch to next field.
        
        Tab order of the various fields
        
        enter " tab" enter pattern should be common input behavior for fast access to common fields.
        
        IRIS-2 shortcut can be reused to let user have less study effort. But should follow the rules above.
        
        1.1.2 Common items for general use
        
        "Alt + A" - Add
        
        "Alt + D" - Download
        
        "Alt + U" - Upload
        
        "F2" - Edit
        
        "Del" – Delete
        
        Wording
        
        Function Name
        
        Window Title
        
        Menu
        
        Page Title
        
        Button
        
        Field Label Table Column Name
        
        Instruction
        
        Tel No
        
        Date Format
        
        Data Picker
        
        Date Time Display
        
        Session Timeout
        
        Actions Response
        
        Recommendation
        
        Data Analysis Results
        
        Content recommendation
        
        Default Value
        
        Recent Record
        
        UI Visuals*
        
        Placement
        
        Layout Decisions
        
        Alignment
        
        Font
        
        Color
        
        Help and Tips
        
        Navigations
        
        Tab
        
        Group
        
        Step
        
        Redirection
        
        Message
        
        Empty
        
        Success
        
        Warning
        
        Graded Warning
        
        Error
        
        Instant Error
        
        Submit Validation
        
        Overall Error Msg
        
        Transient
        
        Informational
        
        Design Patterns
        
        Organizing the Content: Information Architecture and Application Structure
        
        Action Flows
        
        Organizing the Content: Information Architecture and Application Structure
        
        Query
        
        Creation
        
        4 more items...
        
        Modification
        
        Deletion
        
        2 more items...
        
        View
        
        Upload
        
        2 more items...
        
        Download
        
        2 more items...
        
        Organizing the Page: Layout of Page Elements
        
        Getting Around: Navigation, Signposts, and Wayfinding
        
        Doing Things: Actions and Commands
        
        Getting Input from Users: Forms and Controls
        
        Form
        
        Normal Forme
        
        Dialog Form
        
        Inline Form
        
        Batch Edit
        
        Scenario
        
        Some common fields frequently update by same value
        
        2 Level Data Edit
        
        Feedback
        
        Message
        
        Empty
        
        Success
        
        Warning
        
        Graded Warning
        
        Error
        
        Instant Error
        
        Submit Validation
        
        Overall Error Msg
        
        Transient
        
        Informational
        
        Return Stats
        
        Create Record
        
        Update Data
        
        System Alert
        
        Search
        
        Normal Search
        
        Constrains
        
        Clear range for target information
        
        Search criterion ≤ 6
        
        Default Value
        
        Advance Search
        
        Scenario
        
        Search criterion include seldom used items
        
        Search criteria > 6
        
        Normal
        
        Tab/Group
        
        1 more item...
        
        Search by Template
        
        Scenario
        
        Search criterion reuse chance is high
        
        Search criterion
        
        Recent Search
        
        Scenario
        
        Search criterion reuse chance is high Recently
        
        Tab/Group
        
        Constrains
        
        User might have different search dimension for same target data pool
        
        Suggest to further analyse user requirement to reduce the complexity for search criteria
        
        Lists of Things
        
        List
        
        Table
        
        Normal Table List
        
        Search Box Collapse + Search Criteria Summary
        
        3 more items...
        
        Normal
        
        3 more items...
        
        Filter
        
        2 more items...
        
        Group Summary
        
        2 more items...
        
        View Details
        
        2 more items...
        
        Customize Column
        
        2 more items...
        
        Froze Actions Column
        
        2 more items...
        
        Two Level Table List
        
        Card
        
        Tree
        
        Details
        
        Single Card View
        
        Timeline
        
        Process View
        
        Dashboard
        
        Map
        
        Calendar
        
        Charts
        
        Status Update
        
        Complex Data Format
        
        Notifications
        
        Example Solutions
        
        Data Maintenance
        
        EQM
        
        Process Monitoring
        
        Data Visualization
        
        Intelligence assistant
        
        Graded Warning
        
        Recommendation
        
        Data Analysis Results
        
        Content recommendation
        
        Default Value
        
        Recent Record
      - Components
        
        VUE
        
        React
        
        ExtJs