morrisonlevi

prototype.php.net Usability

Feb 23rd, 2012
113
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. I have discovered some usability and visual issues with the prototype
  2. website (http://prototype.php.net). I also give a brief proposal on how
  3. to fix each problem. In highest to lowest priority, they are:
  4.  
  5. 1. The documentation left-sidebar steals the attention.
  6.  
  7. When I go to a particular documentation page, most of the time
  8. I want to see its description and parameter definition. The way
  9. things are now, the left side bar grabs my attention. I then have
  10. to revert to the actual content. It looks like the sidebar is the
  11. main content instead of the documented item.
  12.  
  13. Proposed fix: Remove the background color of the documentation
  14. left-sidebar. Reduce the border-left of the hyperlinks to something
  15. less than 9 pixels. In playing around with it, 6 and 8 pixels both
  16. look good. Recommend 6.
  17.  
  18. 2. Section headers and parameter items have the wrong visual priority.
  19.  
  20. After I have changed my attention from the sidebar, the next
  21. thing I notice are the parameter names inside of the parameters
  22. section. When I am using the documentation, I find the section I
  23. want first, then the item. The values stick out too much and the
  24. title too little.
  25.  
  26. Proposed fix: Swap the colors of the parameter colors and the
  27. titles. Also reduce the parameter size from 1.2em to 1.1em.
  28.  
  29. 3. Main navigation should go over the rest of the page instead of
  30. pushing the rest of the page down.
  31.  
  32. I don't have any reason to suggest this other than it seems wrong.
  33.  
  34. Proposed fix: Perform usability tests comparing the two methods.
  35.  
  36. 4. Border-radius inconsistency.
  37.  
  38. The rounding on the search-box and go button are 5 pixels,
  39. while the documentation boxes use 3 pixels. Other
  40. things that use borders are not rounded at all.
  41.  
  42. Proposed fix: Consider removing the rounding altogether, but
  43. at least reduce search-box and go-button rounding to 3 pixels
  44. to match the rest of the site.
  45.  
  46. 5. Documentation sidebar spacing is inconsistent.
  47.  
  48. The left-sidebar has 32 pixels between it and the main
  49. documentation. The right-sidebar/page navigation is
  50. scrunched. This makes the right-sidebar hard to notice.
  51.  
  52. Proposed fix: Reduce the spacing between the left-sidebar and
  53. the documentation to 15 pixels and increase the spacing
  54. between the documentation and the right-sidebar to 15 pixels.
  55.  
  56. 6. User-contributed notes are difficult to read because of background.
  57.  
  58. The background color is too dark for the text colors on top of it.
  59.  
  60. Proposed fix: Remove background color. That change
  61. necessitates a few others, including the removal of padding
  62. on multiple elements.
  63.  
  64. 7. Method synopsis and code examples are inconsistent with the
  65. rest of the page.
  66.  
  67. All other elements on the page have borders on all four sides,
  68. but these only have them on the top and bottom. Also, while
  69. they have a lighter background than their container, it still
  70. does not pop enough,
  71.  
  72. Proposed fix: Add border-right and border-left. This also
  73. means that the padding should be changed to .5 em on
  74. all sides. Change background color to #fff (white).
  75.  
  76. 8. Too much vertical padding on the section boxes.
  77.  
  78. Proposed fix: Reduce vertical padding from 15 pixels to 10 pixels.
  79.  
  80. 9. The bar between user contributed notes and the documentation
  81. doesn't match the page.
  82.  
  83. Proposed fix: Change color to #81939F, which is a color
  84. already on the page.
  85.  
  86. You can see high-resolution screen-shots for my proposed changes at
  87. http://imgur.com/a/TxmgX . I included what it currently looks like as
  88. well.
  89.  
  90. This is not a comprehensive list, but does address what I could find
  91. in two hours.
  92.  
  93. Levi Morrison
Advertisement
Add Comment
Please, Sign In to add comment