Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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: Swap the colors of the parameter colors and the
- titles. Also reduce the parameter 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. 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.
- 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. 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.
- 7. 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 bar between user contributed notes and the documentation
- doesn't match the page.
- Proposed fix: Change color to #81939F, which is a color
- already on the page.
- You can see high-resolution screen-shots for my proposed changes at
- http://imgur.com/a/TxmgX . 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.
- Levi Morrison
Advertisement
Add Comment
Please, Sign In to add comment