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

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved: