- Frankly, your formatting reference is so poorly done that it hurts to read even the 1st sentence, which means that only masochists will read any of it, and only extreme masochists will actually try to make sense of it.
I’m pretty sure it could be the perfect anti-example for teaching the “Don’t make me think” approach to UI development. Even a hard core text-aholic teenage dropout fanboy would be stumbling over it.
As an example, here’s what anybody that has completed their 3rd grade punctuation and grammar course will see and understand as the 1st sentence:
[some missing word(s), perhaps a rendering issue in my browser, or an image not yet downloaded?] indent code by 4 spaces [more missing word(s) and/or image] don’t wan’t colorization?
Even if I could grok wtf this 1st, hence most important, formatting tip is purportedly trying to teach me, I will have an even harder time trying to implement it because the directions to do so are even less understandable!
You probably already made the leap and slapped your forehead, but here’s what most people will see as the beginning of the 2nd sentence, which is as far as they will get before running away mumbling incoherent inanities about goggles and eyes:
Use “pre” tag to linebreak use 2 spaces at end [missing words or image] > blockquote [more missing words/image or punctuation marks]…
At this point they have to be wondering what kind of grammar/rendering mistake this is. Hmmm… I’m trying to get my code indented by 4 spaces, and maybe toggle colorization on/off, so I use the “pre” tag and and a line break and 2 spaces? Or do I get double line spacing with the “pre” tag, or is it automatic 4 spaces indent with “pre” tag and if I want a line break I use 2 spaces? And if this is true, do I put the 2 spaces at the end of the pre tag or at end of “right angle bracket” or the word “blockquote”, or GAAAAAAAAAAAA.
And there is no way I’m going to click on your “full reference” button, because given the example(s?) I have seen so far, I fear it will be even more painful than reading the early versions of the W3C HTML reference.
Solution: Clearly separate each topic. Clearly separate and indicate rules and suggestions from how to’s. Clearly separate the “what” and the “how” of each how to. Use standard grammar and punctuation, like capital letters and periods and question marks appropriately.
- Do you actually think that people who don’t recongnize the formatting toolbar icons on the left of the screen are actually going to recognize what a neon pink question mark does? Especially when it is so obviously NOT CONNECTED to the group of functionality performed by the cute pictures on the left.
If they do recognize it as a help link, how do you expect them to know that it leads to your formatting rules and reference, and not just a popup with minimal text under a picture of each toolbar icon?
Additionally, most people will recognize some of the toolbar buttons, and won’t be bothered enough about not knowing what any of the others do that they’ll actually spend time to go find out. You don’t need me to tell you why this is.
Solution: Exchange the icon for a “Formatting Rules and Help Reference” hyperlink, and stick it just above or below your toolbar, on the left, where everybody is actually looking.