| 
        php.net | support | documentation | report a bug | advanced search | search howto | statistics | random bug | login | 
  [2012-02-23 22:50 UTC] levim@php.net
 Description: ------------ I have discovered some usability and visual issues with the prototype website (http://prototype.php.net). I also give a brief proposal on how to fix each problem. In highest to lowest priority, they are: 1. The documentation left-sidebar steals the attention. When I go to a particular documentation page, most of the time I want to see its description and parameter definition. The way things are now, the left side bar grabs my attention. I then have to revert to the actual content. It looks like the sidebar is the main content instead of the documented item. Proposed fix: Remove the background color of the documentation left-sidebar. Reduce the border-left of the hyperlinks to something less than 9 pixels. In playing around with it, 6 and 8 pixels both look good. Recommend 6. 2. Section headers and parameter items have the wrong visual priority. After I have changed my attention from the sidebar, the next thing I notice are the parameter names inside of the parameters section. When I am using the documentation, I find the section I want first, then the item. The values stick out too much and the title too little. Proposed fix: Change title color to blue. Also reduce the parameter title size from 1.2em to 1.1em. 3. Main navigation should go over the rest of the page instead of pushing the rest of the page down. I don't have any reason to suggest this other than it seems wrong. Proposed fix: Perform usability tests comparing the two methods. 4. User-contributed notes are difficult to read because of background. The background color is too dark for the text colors on top of it. Proposed fix: Remove background color. That change necessitates a few others, including the removal of padding on multiple elements. 5. Documentation sidebar spacing is inconsistent. The left-sidebar has 32 pixels between it and the main documentation. The right-sidebar/page navigation is scrunched. This makes the right-sidebar hard to notice. Proposed fix: Reduce the spacing between the left-sidebar and the documentation to 15 pixels and increase the spacing between the documentation and the right-sidebar to 15 pixels. 6. Border-radius inconsistency. The rounding on the search-box and go button are 5 pixels, while the documentation boxes use 3 pixels. Other things that use borders are not rounded at all. Proposed fix: Consider removing the rounding altogether, but at least reduce search-box and go-button rounding to 3 pixels to match the rest of the site. 7. Borders on method synopsis and code examples are inconsistent with the rest of the page. All other elements on the page have borders on all four sides, but these only have them on the top and bottom. Also, while they have a lighter background than their container, it still does not 'pop' enough. Proposed fix: Add border-right and border-left. This also means that the padding should be changed to .5 em on all sides. Change background color to #fff (white). 8. Too much vertical padding on the section boxes. Proposed fix: Reduce vertical padding from 15 pixels to 10 pixels. 9. The parameters in method synopsis are clickable but it is not visually expressed. Proposed fix: Change cursor to a pointer for parameters. 10. The bar between user contributed notes and the documentation doesn't match the page. Proposed fix: Change color to to the same blue proposed for the refsect title. You can see high-resolution screen-shots for my proposed changes at http://imgur.com/a/t6gz4 . I included what it currently looks like as well. This is not a comprehensive list, but does address what I could find in two hours. PatchesUsabilityandVisualChanges-1.1.diff (last revision 2012-02-24 00:11 UTC by levim@php.net)UsabilityandVisualChanges.diff (last revision 2012-02-23 22:50 UTC by levim@php.net) Pull RequestsHistoryAllCommentsChangesGit/SVN commits             
             | 
    |||||||||||||||||||||||||||
            
                 
                Copyright © 2001-2025 The PHP GroupAll rights reserved.  | 
        Last updated: Tue Nov 04 09:00:01 2025 UTC | 
11. The website does not work nearly as well in smaller browser sizes. Code examples extend out of their boxes in smaller browsers size. This is problematic because documentation is often used as reference, and used side-by-side with an IDE. This is actually priority 3. I did not find it in my initial search because I have a huge monitor and always work in a maximized window. Proposed fix: The only solutions I see are to do text wrapping (not always desirable) and to remove the right-sidebar. Depending on the usefulness of that sidebar, I would suggest going that route.