php.net |  support |  documentation |  report a bug |  advanced search |  search howto |  statistics |  random bug |  login
Bug #61174 prototype.php.net Usability errors and visual tweaks
Submitted: 2012-02-23 22:50 UTC Modified: 2012-03-02 07:01 UTC
From: levim@php.net Assigned: levim (profile)
Status: Closed Package: Website problem
PHP Version: Irrelevant OS:
Private report: No CVE-ID: None
 [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.


Patches

UsabilityandVisualChanges-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)

Add a Patch

Pull Requests

Add a Pull Request

History

AllCommentsChangesGit/SVN commitsRelated reports
 [2012-02-23 22:50 UTC] 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 23:48 UTC] 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-24 00:09 UTC] 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-24 00:11 UTC] 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-27 12:00 UTC] bjori@php.net
-Status: Open +Status: Assigned -Assigned To: +Assigned To: levim
 [2012-02-27 12:00 UTC] bjori@php.net
Looks good to me.
You have commit karma now and commit the changes yourself :)
 [2012-03-02 07:01 UTC] levim@php.net
-Status: Assigned +Status: Closed
 [2012-03-02 07:01 UTC] levim@php.net
Thank you for your bug report. This issue has already been fixed
in the latest released version of PHP, which you can download at 
http://www.php.net/downloads.php

Most of these are fixed in production.  Closing. . .
 
PHP Copyright © 2001-2024 The PHP Group
All rights reserved.
Last updated: Fri May 03 07:01:32 2024 UTC