1 2 Previous Next 24 Replies Latest reply on May 23, 2007 5:55 AM by theute

    First pass UI improvements

      This thread takes care of grouping the first pass of the UI improvements, I created jira tasks for scoping them per kind of improvements :

      http://jira.jboss.com/jira/browse/JBPORTAL-1402
      http://jira.jboss.com/jira/browse/JBPORTAL-1403
      http://jira.jboss.com/jira/browse/JBPORTAL-1404
      http://jira.jboss.com/jira/browse/JBPORTAL-1405

      The first thing to do is to estimate how long each will take and update the jira task accordingly:

      1/ create a related jira task for each task to implement
      2/ set the proper time to implement it on the task

      Second phase is implementation:

      1/ each developer start with its task
      2/ once a developer is done with all it task he will be assigned other tasks

        • 1. Re: First pass UI improvements
          claprun

          I closed JBPORTAL-1403 since it's a duplicate of http://jira.jboss.com/jira/browse/JBPORTAL-1397. This task is mostly finished. Just need to see what to do about the form labels. Please use this task instead of JBPORTAL-1403 for any comments. Better yet, any other changes to the WSRP GUI configuration tool should be requested in their own JIRA task for easier tracking.

          • 2. Re: First pass UI improvements

            In answer to thomas :

            Do we agree then to keep everything in Jira then ?

            Because as of now, there are 3 sources:
            - THe original email
            - the wiki page:

            https://wiki.corp.jboss.com/bin/view/SystemsEngineering/Portal2_6Usability?skin=blueskin
            - Jira

            I will have to spend quite some time to create JIRA tasks for the 40
            issues mentionned.


            Those JIRA tasks are a snashot of requirements:

            WIKI first pass -> JIRA tasks -> JIRA tasks Resolved

            Once it is done, Chris D. will produce a second pass if necessary.

            JIRA should not be used as a roadmap or a content system, it is software to keep track of evolution of the state of the project.


            • 3. Re: First pass UI improvements
              theute

              So this means that the Wiki is frozen for the first pass, not a living Wiki. (It means, please do not update it)

              • 4. Re: First pass UI improvements

                In answer to Thomas:

                Yes, i could have done it on the Wiki or in the email much faster ;)

                My problem in estimating time is also about making things pretty, i'm
                not a Gimp Guru, when i read:
                "Consider using icon images (with alt attributes set to the name of the
                function) for actions in the lists in this portlet."

                First, Jacob Nielsen
                http://en.wikipedia.org/wiki/Jakob_Nielsen_(usability_consultant)
                would get mad to hear that to improve usability we should change text to
                images (even with alt). I should read his book again, he also released a
                new version of his book, that i was about to buy.
                IMO, the CMS icons don't make the CMS editor easier to understand.


                Second, it can take 15 minutes *if* i have the icons, but much longer if
                i have to design the meaningful icons.

                I'd like us to be pragmatic, either i get the icons from someone but we
                have been asking for a designer for years or this Jira task is doomed
                and we move on and release with simple explicit text.


                For icons : use whatever icons you want (sponge bob or homer simpson), we will start a process that will involve the design team to get the proper icons once we know the icons we need. Chris D. will determine what are the proper graphics to get on the icons.


                • 5. Re: First pass UI improvements
                  bdaw

                  ok... maybe its a lame html problem but...

                  there are a lot of tasks like:

                  The cancel link should be a button styled similarly to the "Save Changes" button, with a slight amount of spacing between the two buttons.


                  it comes from the fact that in all views there is "Save" button and "Cancel" link. I guess it comes from a good reason that both need to trigger different portal URLs. Its hard to align such buttons (two forms) in a single row on the page and keep the functionality. Any suggestions?

                  • 6. Re: First pass UI improvements
                    theute

                    I am still not convinced to replace the text with icons (even with alt text) for usability reasons.

                    What we can do is it add icons to current text, pretty much like there is on the developer bar of the firefox extension: http://chrispederick.com/work/web-developer/
                    See the tabs: CSS | Forms | Images | Information

                    • 7. Re: First pass UI improvements

                      I agree with you, the original design is "iconless" and has been defined as such initially by James Cobb.

                      Let's drop that requirement from "first pass" and we will eventually add it on the "second pass" once the first pass has been implemented and we have an improved UI.

                      Please update the JIRA tasks accordingly.

                      "thomas.heute@jboss.com" wrote:
                      I am still not convinced to replace the text with icons (even with alt text) for usability reasons.

                      What we can do is it add icons to current text, pretty much like there is on the developer bar of the firefox extension: http://chrispederick.com/work/web-developer/
                      See the tabs: CSS | Forms | Images | Information


                      • 8. Re: First pass UI improvements

                        use javascript and put those buttons out of the FORM.

                        <input type="submit" onclick="document.forms["form1"].submit();"/>
                        


                        don't forget to use RenderResponse.getNamespace() to properly namespace the form names in order to avoid collisions.

                        "bdaw" wrote:
                        ok... maybe its a lame html problem but...

                        there are a lot of tasks like:
                        The cancel link should be a button styled similarly to the "Save Changes" button, with a slight amount of spacing between the two buttons.


                        it comes from the fact that in all views there is "Save" button and "Cancel" link. I guess it comes from a good reason that both need to trigger different portal URLs. Its hard to align such buttons (two forms) in a single row on the page and keep the functionality. Any suggestions?


                        • 9. Re: First pass UI improvements
                          claprun

                          Using javascript is bad for usability (what if the client has javascript deactivated, what if the client is a screen reader, etc.)...

                          My big beef with these tasks is what is Chris D. authority, more specifically what does he know about usability that we don't? Most of the tasks are more about consistency (which is good) and making things look better (which is good to a point) but for example, switching labels to generic text or using images is less usable to my mind. I don't mind changing things to improve usability, not just to make them shinier from a marketing perspective.

                          These design issues should be done by a UI person that knows about usability, graphic design, etc. We're going to spend a lot of time changing things that I am not even convinced improve the design. For example, something that would be really useful from the UI team would be a template for CSS-aligned forms (i.e. no tables) that are usable, contain the proper semantic markup with all the alts, labels, what have yous that would make them work properly with screen readers or alternate user agents.

                          • 10. Re: First pass UI improvements
                            james.cobb

                            Hello guys,

                            We've added a second UI designer to the design team. We now have the capacity to help more. Let us know if you'd like us to engage in any fashion.

                            James

                            • 11. Re: First pass UI improvements

                              After the first pass of requirements we'll ask probably your help.

                              "james.cobb@jboss.com" wrote:
                              Hello guys,

                              We've added a second UI designer to the design team. We now have the capacity to help more. Let us know if you'd like us to engage in any fashion.

                              James


                              • 12. Re: First pass UI improvements

                                It looks to me that nobody is responsible for usability by and large for the portal project at JBoss/Red Hat but everybody has its opinion.

                                Roy and Jame Cobb were responsible for usability until James had to work on jboss.org full time and Roy left the boat.

                                Then Thomas and myself took over the job to redo the management portlet in order to get it done the best as we could.

                                Now Chris D. and Ram self granted them that responsiblity.

                                I hope it will be more clearly defined in the future.

                                ps:

                                - The template forms were asked for a long time but it was not taken in account.

                                - the web is designed for documents and that's why we have to hack with javascript or css.

                                "chris.laprun@jboss.com" wrote:
                                Using javascript is bad for usability (what if the client has javascript deactivated, what if the client is a screen reader, etc.)...

                                My big beef with these tasks is what is Chris D. authority, more specifically what does he know about usability that we don't? Most of the tasks are more about consistency (which is good) and making things look better (which is good to a point) but for example, switching labels to generic text or using images is less usable to my mind. I don't mind changing things to improve usability, not just to make them shinier from a marketing perspective.

                                These design issues should be done by a UI person that knows about usability, graphic design, etc. We're going to spend a lot of time changing things that I am not even convinced improve the design. For example, something that would be really useful from the UI team would be a template for CSS-aligned forms (i.e. no tables) that are usable, contain the proper semantic markup with all the alts, labels, what have yous that would make them work properly with screen readers or alternate user agents.


                                • 13. Re: First pass UI improvements

                                  So it is clear for everyone :

                                  we stick to icon less design as designed by James Cobb

                                  we will rediscuss that topic once the first pass of UI improvements is implemented.

                                  • 14. Re: First pass UI improvements
                                    claprun

                                    The so-called first pass is creating its own set of problems... Looking over the commits I already see different solutions implemented for the same problems. This first pass is not going to address the consistency issue that we have and it's not going to be addressed until we have some sort of template. James Cobb offered his team help, let's take him at his word and ask them (again) for a template.

                                    This template will have to have minimally:
                                    - A global page structure taking into account the fact that this is a portlet template.
                                    - Sections and titles.
                                    - A proper use of portlet CSS classes (as defined by JSR-168 and WSRP).
                                    - An example of how to display a page-wide error (i.e. errors that don't affect a particular UI element).
                                    - A table-less, CSS-based, semantically-correct complex form (i.e. form with embedded forms, see the WSRP display of registration properties for an example of why we would need that) with several buttons.
                                    - Examples of how to display errors specific to a given UI element.

                                    1 2 Previous Next