We’re re-engineering a web application and I’m handling the help for the project. The old help was considered unsalvageable (and done in RH) so I started over in Flare. I believe that the old help was done at least 5-6 years ago…and from the look of it, I think it’s WebHelp, not WinHelp or .chm.
Here’s a screenshot of the old help:
And here’s the same topic in the new help:
There are a couple of differences that I notice right away:
- On the old help, there are a number of topics on one page resulting in a lot of scrolling with no in-page navigation.
- Add BLIN
- Edit BLIN
- Delete BLIN
- Adjust Number
- Add DODIC
- Edit DODIC
- Delete DODIC
- The button titles in the old help are blue and bold…and I automatically thought they were links. They’re not.
- The h1 is the same size font as the rest of the text so there’s really no hierarchy of information. When combined with the large number of words on the page, it’s a bit much.
- I prefer to have the steps for a certain action to be numbered, as shown in the second screenshot.
- The text to identify a note is the same as that for button titles.
I changed the topic, with the above items in mind, and ended up with the new look for the help. The result is, in my opinion, a cleaner set of instructions with improved usability.
What I did:
- Broke the long topic in to seven smaller ones.
- Button titles are bolded, per our style guide
- The h1 is a different color with a larger font, as are the h2 and h3. This creates a clear information hierarchy on the page.
- Steps of instructions are numbered.
- The note on the page is created via auto-number formatting in Flare. It has a distinct look, consistent both with the overall design and with other notes throughout the help system.
Your thoughts on the before and after?
- Moving Tags Within a Topic in MadCap Flare (video) May 9, 2013 —
- Controlling Image Sizes in Printed Output with Flare May 7, 2013 —
- Replacing Toggler Icons in Flare May 2, 2013 —
- “Snippetizing” Part of a List in Flare April 29, 2013 —
- Adding Icons to Show File Types in Links April 25, 2013 —