Uploaded image for project: 'DESIGN'
  1. DESIGN
  2. DESIGN-319

UI for Document AI suggestions

    XMLWordPrintable

    Details

    • Type: Task
    • Status: Resolved
    • Priority: Critical
    • Resolution: Done
    • Component/s: Web UI

      Description

      When a field has one or several document references and we are trying to suggest on that field in a form, we need to present the suggestion accordingly and with enough data that would properly identify the document.

      Initial proposal
      Thumbnail, title and path. (with ellipses and full text on tooltip)

      Problems
      This element will be inserted in forms, eventually complex and for this reason, it should be kept the simplest possible, avoiding unnecessary noise and confusion to the user.
      Ideally, the size of the element should not be very big.
      If mouseover, the time that will be expected to reveal the further information should be taken under consideration - this might compromise the success of the solution.

      Possible Solutions
      The suggestion pills may get to big if we include all the proposed information, but the client may configure it to see only what he wants.

      Conclusions
      The user should be clearly informed of this extra feature, and for that reason, a simple mouseover might get evasive and poorly informative. A split button should be considered. If clicking the arrow icon, reveals the extra info, if clicks on the remaining area of the tag, this suggestion will be selected and incorporated on the input area of the field.
      Edge cases with very long blocks of text should be considered, and if so, we should include a show more/show less and scrollbar if necessary.

      Iteration and design exploration: https://nuxeo.invisionapp.com/freehand/document/at6U2fFfz 
      Navigation between screens: https://nuxeo.invisionapp.com/d/main#/console/17697929/366925920/preview

      Specifications
      - Drop area max:
      200x250
      If less:
      it should adjust to the content
      including a margin around the content of 10px
      If more: include a scrollbar
       
      - Image container:
      Max height 72
      Max width 216px
       
      Closes if user clicks outside the area or on the close icon
       
      3 different text styling (10px size all)
      maximum 200characters on description
      Handoff inspect CSS & elements: https://nuxeo.invisionapp.com/d/main#/console/17697929/366925920/inspect
       
       

        Attachments

        1. Screen Shot 2019-04-12 at 17.10.16.png
          Screen Shot 2019-04-12 at 17.10.16.png
          172 kB
        2. animation_mobile_OFF.gif
          animation_mobile_OFF.gif
          173 kB
        3. animation_mobile_ON.gif
          animation_mobile_ON.gif
          187 kB
        4. Mobile Screen 5.png
          Mobile Screen 5.png
          232 kB
        5. Mobile Screen 1.png
          Mobile Screen 1.png
          231 kB
        6. Mobile Screen 2.png
          Mobile Screen 2.png
          236 kB
        7. Mobile Screen 6.png
          Mobile Screen 6.png
          226 kB
        8. Mobile Screen 4.png
          Mobile Screen 4.png
          393 kB
        9. Mobile Screen 3.png
          Mobile Screen 3.png
          388 kB
        10. Suggestion_extrainfo_over.png
          Suggestion_extrainfo_over.png
          152 kB
        11. Suggestion_extrainfo_portrait.png
          Suggestion_extrainfo_portrait.png
          179 kB
        12. Suggestion_extrainfo_panoramic.png
          Suggestion_extrainfo_panoramic.png
          208 kB
        13. Suggestion_extrainfo1.png
          Suggestion_extrainfo1.png
          150 kB
        14. Suggestion_extrainfo_press-dropdown icon.png
          Suggestion_extrainfo_press-dropdown icon.png
          188 kB
        15. Suggestion_extrainfo_scrollbar1.png
          Suggestion_extrainfo_scrollbar1.png
          179 kB
        16. Suggestion_extrainfo_scrollbar-bottom.png
          Suggestion_extrainfo_scrollbar-bottom.png
          180 kB

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: