Details

    • Type: New Feature
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.5
    • Security Level: Public (Public: Anyone can view)
    • Labels:
      None
    • Epic Link:
    • Rice Module:
      KRAD
    • Application Requirement:
      KC, UXI
    • Sprint:
      2.5.0-m1 Sprint 2, 2.5.0-m1 Sprint 3
    • KAI Review Status:
      Not Required
    • KTI Review Status:
      Not Required
    • Code Review Status:
      Not Required
    • Include in Release Notes?:
      Yes

      Description

      New component that will display a value in a progress bar. For example, see right header on http://ux.kuali.org/prototypes/kc/p2-prototype-a/prop.basics.deliveryinfo.php

      and:
      http://ux.kuali.org/prototypes/kc/p2-prototype-a/prop.review.summary.php

        Attachments

          Activity

          Hide
          bsmith Brian Smith (Inactive) added a comment - - edited

          jQuery ui has a progess bar where you can specify amount that it is full, it is about 2em high about, one color at once.
          it is easy to make this one appear thin with a css change.
          There is no way to put labels above it built in.

          bootstrap has a progress bar that is very similar to the jQueryUI one, specify fullness by adding subdivs with percentages, different parts can be different colors
          it is easy to make this one appear thin with a css change.
          There is no way to put labels above it built in.
          I believe this is what the demo ux made is using, so easy to accomadate the labels using the same pattern, needs to be made accessible by applying techniques explained below
          I would also recommend we make the bar slightly thicker, a bit hard to see at the height demoed (add 2 pixels)

          An interesting one, does not meet needs, does other stuff http://www.jqueryrain.com/?pkQEEMaU

          Article on accessibility and progress indicators: http://24ways.org/2008/checking-out-progress-meters/

          On progress tracker design with a multitude of examples:
          http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/

          Similar to what we want (though numbered)
          http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

          Recommendation:
          UX design seems good to implement, tweaks to add some accessibility content for screenreader guidance and to the height of the bar needed (maybe a couple pixels larger height)
          Two widgets: ProgressBar and StepProgressBar

          Show
          bsmith Brian Smith (Inactive) added a comment - - edited jQuery ui has a progess bar where you can specify amount that it is full, it is about 2em high about, one color at once. it is easy to make this one appear thin with a css change. There is no way to put labels above it built in. bootstrap has a progress bar that is very similar to the jQueryUI one, specify fullness by adding subdivs with percentages, different parts can be different colors it is easy to make this one appear thin with a css change. There is no way to put labels above it built in. I believe this is what the demo ux made is using, so easy to accomadate the labels using the same pattern, needs to be made accessible by applying techniques explained below I would also recommend we make the bar slightly thicker, a bit hard to see at the height demoed (add 2 pixels) An interesting one, does not meet needs, does other stuff http://www.jqueryrain.com/?pkQEEMaU Article on accessibility and progress indicators: http://24ways.org/2008/checking-out-progress-meters/ On progress tracker design with a multitude of examples: http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/ Similar to what we want (though numbered) http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar Recommendation: UX design seems good to implement, tweaks to add some accessibility content for screenreader guidance and to the height of the bar needed (maybe a couple pixels larger height) Two widgets: ProgressBar and StepProgressBar
          Hide
          tdurkin Terry Durkin added a comment -

          This is an example (we've had a few different versions) of how we would use this in KC based on the UXI work that's been going on.

          Show
          tdurkin Terry Durkin added a comment - This is an example (we've had a few different versions) of how we would use this in KC based on the UXI work that's been going on.

            People

            • Assignee:
              bsmith Brian Smith (Inactive)
              Reporter:
              jkneal Jerry Neal (Inactive)
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 1 day, 6 hours Original Estimate - 1 day, 6 hours
                1d 6h
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 days, 1 hour
                3d 1h