Bug #61174 [Opn->Asn]: prototype.php.net Usability errors and visual tweaks

Edit report at https://bugs.php.net/bug.php?id=61174&edit=1 ID: 61174 Updated by: bjori@php.net Reported by: levim@php.net Summary: prototype.php.net Usability errors and visual tweaks -Status: Open +Status: Assigned Type: Bug Package: Website problem PHP Version: Irrelevant -Assigned To: +Assigned To: levim Block user comment: N Private report: N New Comment: Looks good to me. You have commit karma now and commit the changes yourself :) Previous Comments: ------------------------------------------------------------------------ [2012-02-24 00:11:14] levim@php.net The following patch has been added/updated: Patch Name: UsabilityandVisualChanges-1.1.diff Revision: 1330042274 URL: https://bugs.php.net/patch-display.php?bug=61174&patch=UsabilityandVisualChanges-1.1.diff&revision=1330042274 ------------------------------------------------------------------------ [2012-02-24 00:09:50] levim@php.net The proposal for number 4 is counter-productive. It solved one problem but created another. It should remove the background for each section but add it to each post. It should also be a bit lighter. Can view at http://i.stack.imgur.com/wgpRX.png Updated patch. ------------------------------------------------------------------------ [2012-02-23 23:48:21] levim@php.net 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. ------------------------------------------------------------------------ [2012-02-23 22:50:32] levim@php.net The following patch has been added/updated: Patch Name: UsabilityandVisualChanges.diff Revision: 1330037432 URL: https://bugs.php.net/patch-display.php?bug=61174&patch=UsabilityandVisualChanges.diff&revision=1330037432 ------------------------------------------------------------------------ [2012-02-23 22:50:10] 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. ------------------------------------------------------------------------ -- Edit this bug report at https://bugs.php.net/bug.php?id=61174&edit=1